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

{ أعتدر لصورة التدوينة نظرا لعطل عندي بالفوتوشوب }
باسم الله الرحمن الرحيم 

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

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

للـــمـــعـــايـــنــــة

شرح طريقة التركيب

* توجه ل-لوحة التحكم المدونة

* ثم الدخول الى قالب / تحرير HTML

* نبحث عن الرمز ]]></b:skin> 

نضيف الكود التالي فوقه :

button.example { transition: all 0s ease-out; height: 35px; font-family: JF Flat; font-size: 14px; color: #fff; text-decoration: none; text-align: center; text-shadow: 0px -1px 0px rgba(0,0,0,0.4); padding: 4px 20px 0; margin: 10px 20px; position: relative; cursor: pointer; border: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } button.facebook { border-left: solid 1px #2E4476; background: #3B5999; -webkit-box-shadow: 0px 5px 0px 0px #2E4476; box-shadow: 0px 5px 0px 0px #2E4476; } button.twitter { border-left: solid 1px #269BD0; background: #46C1F6; -webkit-box-shadow: 0px 5px 0px 0px #269BD0; box-shadow: 0px 5px 0px 0px #269BD0; } button.pinterest { border-left: solid 1px #C02B21; background: #DE463B; -webkit-box-shadow: 0px 5px 0px 0px #C02B21; box-shadow: 0px 5px 0px 0px #C02B21; } button.yahoo { border-left: solid 1px #813781; background: #A948A9; -webkit-box-shadow: 0px 5px 0px 0px #813781; box-shadow: 0px 5px 0px 0px #813781; } button.example:active { top: 3px; } button.facebook:active { -webkit-box-shadow: 0px 2px 0px 0px #2E4476; box-shadow: 0px 2px 0px 0px #2E4476; } button.twitter:active { -webkit-box-shadow: 0px 2px 0px 0px #269BD0; box-shadow: 0px 2px 0px 0px #269BD0; } button.pinterest:active { -webkit-box-shadow: 0px 2px 0px 0px #C02B21; box-shadow: 0px 2px 0px 0px #C02B21; } button.yahoo:active { -webkit-box-shadow: 0px 2px 0px 0px #813781; box-shadow: 0px 2px 0px 0px #813781; } button.example:before { content: "1"; width: 35px; height: 25px; display: block; position: absolute; padding-top: 10px; line-height: 20px; top: 0px; margin-right: 46px; font-size: 16px; font-weight: bold; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } button.facebook:before {border-right: solid 1px #2E4476; background: #3B5999; box-shadow: 0px 5px 0px 0px #2E4476; content: "\f0ed"; font-family: FontAwesome; font-weight: normal;} button.twitter:before {border-right: solid 1px #269BD0; background: #46C1F6; box-shadow: 0px 5px 0px 0px #269BD0; content: "\f019"; font-family: FontAwesome; font-weight: normal;} button.pinterest:before { border-right: solid 1px #C02B21; background: #DE463B; box-shadow: 0px 5px 0px 0px #C02B21; content: "\f1d9"; font-family: FontAwesome; font-weight: normal;} button.yahoo:before {border-right: solid 1px #813781; background: #A948A9; box-shadow: 0px 5px 0px 0px #813781; content: "\f06e"; font-family: FontAwesome; font-weight: normal;} button.example:active:before { top: -3px; } button.facebook:active:before { -webkit-box-shadow: 0px 5px 0px 0px #2E4476, 6px 4px 2px rgba(0,0,0,0.3); box-shadow: 0px 5px 0px 0px #2E4476, 6px 4px 2px rgba(0,0,0,0.3); } button.twitter:active:before { -webkit-box-shadow: 0px 5px 0px 0px #269BD0, 6px 4px 2px rgba(0,0,0,0.3); box-shadow: 0px 5px 0px 0px #269BD0, 6px 4px 2px rgba(0,0,0,0.3); } button.pinterest:active:before { -webkit-box-shadow: 0px 5px 0px 0px #C02B21, 6px 4px 2px rgba(0,0,0,0.3); box-shadow: 0px 5px 0px 0px #C02B21, 6px 4px 2px rgba(0,0,0,0.3);border:none;} button.yahoo:active:before { -webkit-box-shadow: 0px 5px 0px 0px #813781, 6px 4px 2px rgba(0,0,0,0.3); box-shadow: 0px 5px 0px 0px #813781, 6px 4px 2px rgba(0,0,0,0.3); }

* بعدما نقوم بحفظ القالب ننتقل للتدوينة التي نريد وضع الازرار بها ونقوم بفتح تبويب HTML ونضع الكود التالي :

<button class="example facebook">تحميل</button>
<button class="example twitter">تحميل</button>
<button class="example pinterest">معاينة</button>
<button class="example yahoo">معاينة</button>

* ثم بعدها ما عليك الا اضافة الروابط { المعاينة - التحميل } ومبرووك لك الاصافة .

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

قم بنشر الموضوع إذا أعجبك