اضافة ازرار المعاينة والتحميل لمدونات بلوجر

بسم الله السلام عليكم اعزائي تحياتي لك زائر اومتابع , موضوع اليوم عن ازرار المعاينة والتحميل لمدونات بلوجر, بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عدي لكم بازرار بشكل فلات والوان متناسقة
ايضا يمكنك تغييرها وهو كود CSS بسيط مع تأثير hover لا يلزم الكثير من الخبرات
 ايضا يمكنك عمل معاينة للازرار عبر زر المعاينة.

شرح و كيفية تركيب + معاينة الاضافة من هنا  :

1. داخل القالب تحرير html 
2. فوق هذا الوسم  <b:skin/>  نضع الكود التالي:

#wrap {margin:20px auto;text-align:center;} a.btn {display:inline-block;position:relative;font-family:'Droid Arabic Kufi',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;} a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;} a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;} a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;} a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}

1. الان عند كتابة موضوع اذهب الى خانة  html 
2. وتضع الكود التالي اسفل اكواد الموضوع :

<div id="wrap"><a class="btn" href="#"><i class="fa fa-eye"></i> معاينة</a></div> <div id="wrap"><a class="btn warn" href="#"><i class="fa fa-diwnload"></i> تحميل</a></div>