أزرار التواصل الاجتماعى بشكل أحترافى

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

شرح تركيب أضافة أزرار التواصل الاجتماعى بشكل أحترافى.

  1. أذهب إلى لوحة التحكم بمدونتك
  2. أهب الى قالب> HTML تحرير 
  3. قم بالبحث داخل القالب على هذه الكود فى الاسفل
]]> </ B: skin>

التالى الأن قم بأضافة الكود تحت]]> </ b: skin>
ul.cbttopshare {float: right; margin: -4px 0; Ul.cbttopshare} li {float: left; list-style: none outside none; border: none;} li ul.cbttopshare 96px; border: 0 none; color: white; direction: ltr; display: block; height: 32px; overflow: hidden; text-align: left; text-decoration: none; text-indent: -999em; transition: all 0.2s ease 0s; width: 32px}. ie7 ul.cbttopshare li a, .ie8 ul li .cbttopshare ul.cbttopshare li.facebook a {background-position: 0 0} ul.cbttopshare li.flickr a {background-position: -32px 0} ul .cbttopshare li.dribbble a {background-position: -64px 0} ul.cbttopshare li.googleplus a {background-position: -96px 0} ul.cbttopshare li.linkedin a {background-position: 0} ul.cbttopshare -128px li.pinterest a { background-position: 0} ul.cbttopshare -160px li. rss a {background-position: 0} ul.cbttopshare -192px li.skype a {background-position: 0} ul.cbttopshare -224px li.twitter a {background- position: 0} ul.cbttopshare -256px li.vimeo a {background-position: 0} ul.cbttopshare -288px li.youtube a {background-position: 0} ul.cbttopshare -320px li.facebook a: hover, #sidebar ul.cbttopshare li.facebook a: hover {background-position : 0 -32px ul.cbttopshare li.flickr} a: hover, #sidebar ul.cbttopshare li.flickr a: hover {background-position: -32px -32px ul. cbttopshare li.dribbble} a: hover, #sidebar ul. cbttopshare li.dribbble a: hover {background-position: -64px -32px ul.cbttopshare li.googleplus} a: hover, #sidebar ul.cbttopshare li.googleplus a: hover {background-position: -96px -32px} ul. cbttopshare li.linkedin a: hover, #sidebar ul.cbttopshare li.linkedin a: hover {background-position: -32px -128px ul.cbttopshare li.pinterest} a: hover, #sidebar ul.cbttopshare li.pinterest a: hover {background-position: -32px -160px ul.cbttopshare li.rss} a: hover, #sidebar ul.cbttopshare li.rss a: hover {background-position: - -192px ul.cbttopshare li.skype 32px} a: hover , #sidebar ul.cbttopshare li.skype a: hover {background-position: -32px -224px ul.cbttopshare li.twitter} a: hover, #sidebar ul.cbttopshare li.twitter a: hover {background-position: -32px -256px ul.cbttopshare li.vimeo} a: hover, #sidebar ul.cbttopshare li.vimeo a: hover {background-position: -32px -288px ul.cbttopshare .youtube li} a: hover, #sidebar ul.cbttopshare. youtube li a: hover {background-position: -32px -320px} blockquote {-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #FBFBFB; border-color: #dddddd #dddddd -moz-use-text-color; border-image: none; border-style: solid; border-width: 1px 1px 2px; padding: 5px; clear: both;}
  • قم بحفظ القالب
  • الأن أذهب إلى التخطيط 
  • قم بأختيار المكان الذى تريد وضع الاداة فيه وأضغط أضف أداة
  • أختر html / java وأضف الكود التالى فيه.

<! - Social Icons Started by blogger1dev.blogspot.com -> <ul class = 'cbttopshare'> <li class = 'facebook'> <a href = 'http: //www.facebook.com/' rel = 'nofollow' target = '_ blank' title = 'facebook'> </a> </ li> <li class = 'googleplus'> <a href = "https: //plus.google.com/' rel =" nofollow "target = '_ blank' title = 'googleplus'> </a> </ li> <li class = "pinterest"> <a href =' http: //pinterest.com/ 'rel =' nofollow 'target =' _ blank 'title =' pinterest '> </a> </ li> <li class = "twitter"> <a href =' http: //twitter.com/ 'rel =' nofollow 'target =' _ blank 'title = 'twitter'> </a> </ li> <li class = 'rss'> <a href = 'http: //feedburner.com/' rel = 'nofollow' target = '_ blank' title = 'rss' > </a> </ li> <li class = 'skype'> <a href='http://www.skype.com/' rel='nofollow' target='_blank' title='Skype'> < / a> </ li> <li class = 'vimeo'> <a href='http://www.vimeo.com/' rel='nofollow' target='_blank' title='vimeo'> </ a > </ li> <li class = 'flickr'> <a href='http://www.flickr.com/' rel='nofollow' target='_blank' title='flickr'> </a> < / li> <li class = "linkedin"> <a href='http://www.linkedin.com/' rel='nofollow' target='_blank' title='linkedin'> </a> </ li > <li class = "youtube"> <a href='http://www.youtube.com/' rel='nofollow' target='_blank' title='youtube'> </a> </ li> < / ul> <! - End Social Icons by blogger1dev.blogspot.com ->

الان قم بحفظ الاداة ومبروك الاضافة الجديد المهمة لمدونتك

أنتهينا ! هذه كل شىء اتمنى أن هذه الاضافه قد أعجبتكم , أنتظرونا فى شرح جديدوأضافة جديده
اقرأ أيضًا: