مرحبا بجميع متابعين وزوار مدونة تعلم نت الكرام
فى هذة التدوينة سوف نتعرف على شرح طريقة اضافة ايقونات او ازرار مواقع التواصل الاجتماعى لمدونات بلوجر بشكل جميل جدا ومتحرك وجذاب حيث سوف تزيد تلك الاضافة المتميزة من عدد مشاركات تدوينتك وزيادة عدد زوار مدونتك بشكل ملحوظ
::كود ازرار التواصل الاجتماعي بلوجر::
::كود HTML::
قم باستبدال # برابط الصفحه الاجتماعيه الخاصه بك فى كل رابط وفى حالة عدم امتلاكك او عدم رغبتك فى ظهور احدى مواقع التواصل الاجتماعى يمكنك مسح العنصر من الكود .
قم باستبدال # برابط الصفحه الاجتماعيه الخاصه بك فى كل رابط وفى حالة عدم امتلاكك او عدم رغبتك فى ظهور احدى مواقع التواصل الاجتماعى يمكنك مسح العنصر من الكود .
<div id="social-platforms"><h1>Social Buttons with Icon Fonts</h1><a class="btn btn-icon btn-facebook" href="#"><i class="fa fa-facebook"></i><span>Facebook</span></a><a class="btn btn-icon btn-twitter" href="#"><i class="fa fa-twitter"></i><span>Twitter</span></a><a class="btn btn-icon btn-googleplus" href="#"><i class="fa fa-google-plus"></i><span>Google+</span></a><a class="btn btn-icon btn-pinterest" href="#"><i class="fa fa-pinterest"></i><span>Pinterest</span></a><a class="btn btn-icon btn-linkedin" href="#"><i class="fa fa-linkedin"></i><span>LinkedIn</span></a></div>
:: كود css ::
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);/*Ignore me, I'm just page styling*/html {font-family: 'Roboto', sans-serif;font-size:16px;line-height:1em;height:100%;}body { background: #ffffff; background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 50%, #F2F2F2 50%, #F2F2F2 50%, #F2F2F2 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop(50%,#F2F2F2), color-stop(50%,#F2F2F2), color-stop(100%,#F2F2F2)); background: -webkit-linear-gradient(-45deg, #ffffff 0%,#ffffff 50%,#F2F2F2 50%,#F2F2F2 50%,#F2F2F2 100%); background: -o-linear-gradient(-45deg, #ffffff 0%,#ffffff 50%,#F2F2F2 50%,#F2F2F2 50%,#F2F2F2 100%); background: -ms-linear-gradient(-45deg, #ffffff 0%,#ffffff 50%,#F2F2F2 50%,#F2F2F2 50%,#F2F2F2 100%); background: linear-gradient(135deg, #ffffff 0%,#ffffff 50%,#F2F2F2 50%,#F2F2F2 50%,#F2F2F2 100%);}
h1 {font-size:1.5em;margin-bottom:55px;}
#social-platforms { position:relative; top:100px; top:25vh; font-size:1rem; text-align:center; height:250px; overflow:hidden;}
/*Pen code from this point on*/.btn { clear:both; white-space:nowrap; font-size:.8em; display:inline-block; border-radius:5px; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35); margin:2px; -webkit-transition:all .5s; -moz-transition:all .5s; transition:all .5s; overflow:hidden}
.btn:hover { box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.45);}
.btn:focus { box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);}
.btn > span,.btn-icon > i { float:left; padding:13px; -webkit-transition:all .5s; -moz-transition:all .5s; transition:all .5s; line-height:1em}
.btn > span { padding:14px 18px 16px; white-space:nowrap; color:#FFF; background:#b8b8b8}
.btn:hover > span { background:#b8b8b8}
.btn:focus > span { background:#9a9a9a}
.btn-icon > i { border-radius:5px 0 0 5px; position:relative; width:13px; text-align:center; font-size:1.25em; color:#fff; background:#212121}
.btn-icon > i:after { content:""; border:8px solid; border-color:transparent transparent transparent #222; position:absolute; top:13px; right:-15px}
.btn-icon:hover > i,.btn-icon:focus > i { color:#FFF}
.btn-icon > span { border-radius:0 5px 5px 0}
/*Facebook*/.btn-facebook:hover > i,.btn-facebook:focus > i { color:#3b5998}
.btn-facebook > span { background:#3b5998}
/*Twitter*/.btn-twitter:hover > i,.btn-twitter:focus > i { color:#55acee}
.btn-twitter > span { background:#55acee}
/*Google*/.btn-googleplus:hover > i,.btn-googleplus:focus > i { color:#dd4b39}
.btn-googleplus > span { background:#dd4b39}
/*Pinterest*/.btn-pinterest:hover > i,.btn-pinterest:focus > i { color:#cb2028}
.btn-pinterest > span { background:#cb2028}
/*LinkedIn*/.btn-linkedin:hover > i,.btn-linkedin:focus > i { color:#007bb6}
.btn-linkedin > span { background:#007bb6}
::طريقة تركيب كود ايقوانات التواصل الاجتماعى على بلوجر::
اولا:: قم باخذ نسخه احتياطيه من القالب الخاص بك تجنب لحدوث اى اخطاء وبعد ذلك قم بفتح تحرير القالب وقم بالبحث عن اكواد css عن طريق الضغط على ctrl+f واكتب فى مربع البحث <style/> او ]]></b:skin> جرب الاثنين ثم قم بوضع كود css فوقه.ثانيا :: قم بالبحث عن </data:post.body> عن طريق الضغط على ctrl+f من لوحة المفاتيح ونسخ ولصق الكود فى مربع البحث ثم قم بالضغط على enter سوف تجد ثلاثة قم باختيار اخر واحد وضع كود Html فوقه وقم بالحفظ ستجد ايقونات التواصل الاجتماعى ظهرت فى نهاية موضوعات بلوجر ويمكنك مشاركة المواضيع بسهوله تامه.
ليست هناك تعليقات:
إرسال تعليق