الدرس 68 : إضافة أزرار التحميل و المعاينة v1

بسم الله الرحمان الرحيم

السلام عليكم أحباء و متابعي مدونة منبع المعلوميات

اليوم إن شاء الله سأعلمكم طريقة إضافة أزرار التحميل و المعاينة الإصدار الأول لأنه هناك العديد من الأكواد الخاصة بهذا المجال .

و ستعطي هذه الإضافة جمالية و أناقة إضافية للتدوينة و سنتخلص بها من الطرق التقليدية لوضع التحميلات و المعاينة بأشكال عادية أو روابط مباشرة !

بالنسبة للمعاينة فيمكنكم زيارة هذا الرابط : 

من هـــنـــا

أو يمكنكم معاينتها بشكل مباشر هنا :

معاينة
اضغط للمعاينة



تحميل
اضغط للتحميل

حسنا لنمر لطريقة التركيب التي إن شاء الله لن تأخذ منكم الكثير من الوقت :

1. ندخل لمدونة التي نرغب بتركيب الإضافة فيها
2. نمر إلى قالب
3. ندخل إلى تحرير Html

و نبحث عن الوسم ]]></b:skin>

و نضع هذا الكود فوقه :

#wrap {    margin: 20px auto;    text-align: center;}
#wrap br {    display: none;}
.btn-slide, .btn-slide2 {    position: relative;    display: inline-block;    height: 50px;    width: 200px;    line-height: 50px;    padding: 0;    border-radius: 50px;    background: #fdfdfd;    border: 2px solid #0099cc;    margin: 10px;    transition: .5s;}
.btn-slide2 {    border: 2px solid #efa666;}
.btn-slide:hover {    background-color: #0099cc;}
.btn-slide2:hover {    background-color: #efa666;}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {    right: 100%;    margin-right: -45px;    background-color: #fdfdfd;    color: #0099cc;}
.btn-slide2:hover span.circle2 {    color: #efa666;}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {    right: 40px;    opacity: 0;}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {    opacity: 1;    right: 40px;}
.btn-slide span.circle, .btn-slide2 span.circle2 {    display: block;    background-color: #0099cc;    color: #fff;    position: absolute;    float: right;    margin: 5px;    line-height: 42px;    height: 40px;    width: 40px;    top: 0;    right: 0;    transition: .5s;    border-radius: 50%;}
.btn-slide2 span.circle2 {    background-color: #efa666;}
.btn-slide span.title,  .btn-slide span.title-hover, .btn-slide2 span.title2,  .btn-slide2 span.title-hover2 {    position: absolute;    right: 90px;    text-align: center;    margin: 0 auto;    font-size: 16px;    font-weight: bold;    color: #30abd5;    transition: .5s;}
.btn-slide2 span.title2,  .btn-slide2 span.title-hover2 {    color: #efa666;    right: 80px;  }
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    right: 80px;    opacity: 0;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    color: #fff;}

ثم و لنركب الرموز الخاصة بالإضافة نقوم بالبحث عن </head>

و نضع هذا الكود قبله مباشرة :

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

لحضة !
لا تغادر !
مازال الموضوع 
حسنا بالنسبة لطريقة تركيب الإضافة على أحد المواضيع .
نقوم بالذهاب إلى تبويب HTML و نضيف الكود التالي :

<center>
<div id="wrap">
<a href="#" class="btn-slide">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">اضغط للمعاينة</span>
</a>
<a href="#" class="btn-slide2">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط للتحميل</span>
</a>
</div>
</center>

تعديلات على الكود :

نغير # برابط المعاينة .
نغير # برابط التحميل .

هنا يكون الدرس قد إنتها أتمنى أكون أفدتكم قبل كل شيء و شكرا على قراءة الموضوع