اضافة زر التحميل و المعاينة على مواضيع blogger

السلام عليكم ورحمة الله وبركاته

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


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

اولا سوف نذهب الى المظهر في مدونتك ومن ثم تعديل html 
و من ثم نقوم بالبحث cntrl+f على هذا الكود
<b:skin/><[[
ومن ثم نضع  الكود css فوق <b:skin/><[[

كود CSS :

#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 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc;}.btn-slide2:hover span.circle2 { color: #efa666;}.btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0;}.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px;}.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 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; left: 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; left: 80px;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff;}
ومن ثم نقوم بحفظ القالب 
ثم نذهب الى اي موضوع و نضيف واحد من هذه اكود في جهة HTML خاصة بالموضوع يمكنك اختيار اي واحد منهما

كود المعاينة :
<div id="wrap"><a href="هنا ضع رابط توجيه المعاينة" class="btn-slide" target="_blank"> <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" target="_blank"><span class="circle2"><i class="fa fa-download"></i></span><span class="title2">للتحميل</span><span class="title-hover2">أنقر هنا</span></a></div>


ومبرووك عليك اضافة لا تنسوا تعليق تحفيزي لاننا نتعب على مواضيع