أزرار التحميل والمعاينة بشكل رائع ومميز

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

طريقة تركيب إضافة أزرار التحميل والمعاينة 

ابحث عن الوسم التالي

</head>

 في تحرير HTML و ضع الكود التالي بعده

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

ابحث عن الوسم التالي

]]></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;}

و لإضافة الكود ضعه في محرر HTML في انشاء المشاركة

<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>

ثم غير # بالرابط الخاص بك