كود ايقونات التواصل الإجتماعي لمدونات بلوجر -ازرار المشاركة الاجتماعيه

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

إضافة ايقونات التواصل الإجتماعي لمدونات بلوجر

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

::معاينة كود ازرار التواصل الاجتماعى::

::كود ازرار التواصل الاجتماعي بلوجر::

::كود 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 فوقه وقم بالحفظ ستجد ايقونات التواصل الاجتماعى ظهرت فى نهاية موضوعات بلوجر ويمكنك مشاركة المواضيع بسهوله تامه.