موضوع اليوم عن اضافة ازرار التواصل الاجتماعى , ازرار التواصل الاجتماعي هي ضمن افضل الادوات التي يحتاجها المدون , ليتمكن الجميع من مشاهدة المحتوى الخاص بك بكل سهولة , اذا كنت مدون جديد او مدونتك جديدة وتريد جلب زيارات فعليك استخدام هذه الاضافة , لذلك تحتاج اضافة من هذا النوع الى المدونة الخاصة بك , وهذه الاضافة تتميز بتأثير ماوس هوفر , تجعل المدونة الخاصة بك مثل المحترفين.
شرح و كيفية تركيب الازرار:
- كل ما عليك فعله ان تدخل الى " تحرير القالب "
- بحث باستعمال
CTRL+F عن<b:skin/><[[ وضع الكود التالي فوقه
ul.cbttopshare { float: right; margin: -4px 0; } ul.cbttopshare li {float:left;list-style: none outside none;border:none;} ul.cbttopshare li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivX9KPMjbGvF7pBin9JUGTNXPWWeu8nROqpcjyD4a1-h4HJzqLUE7D-fcAtfWMt0jZ4jvqRPjlK89qM5RryDra0P7cjLnjKprEJ_-1jmUYVAcMBYSfXyEsG8sjuDC1CrujZ_CpYz4yFAaf/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 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.cbttopshare li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivX9KPMjbGvF7pBin9JUGTNXPWWeu8nROqpcjyD4a1-h4HJzqLUE7D-fcAtfWMt0jZ4jvqRPjlK89qM5RryDra0P7cjLnjKprEJ_-1jmUYVAcMBYSfXyEsG8sjuDC1CrujZ_CpYz4yFAaf/s1600/spice-social-gadget-sprite.png)} 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:-128px 0} ul.cbttopshare li.pinterest a{ background-position:-160px 0} ul.cbttopshare li.rss a{ background-position:-192px 0} ul.cbttopshare li.skype a{ background-position:-224px 0} ul.cbttopshare li.twitter a{ background-position:-256px 0} ul.cbttopshare li.vimeo a{ background-position:-288px 0} ul.cbttopshare li.youtube a{ background-position:-320px 0} ul.cbttopshare 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:-128px -32px} ul.cbttopshare li.pinterest a:hover, #sidebar ul.cbttopshare li.pinterest a:hover{ background-position:-160px -32px} ul.cbttopshare li.rss a:hover, #sidebar ul.cbttopshare li.rss a:hover{ background-position:-192px -32px} ul.cbttopshare li.skype a:hover, #sidebar ul.cbttopshare li.skype a:hover{ background-position:-224px -32px} ul.cbttopshare li.twitter a:hover, #sidebar ul.cbttopshare li.twitter a:hover{ background-position:-256px -32px} ul.cbttopshare li.vimeo a:hover, #sidebar ul.cbttopshare li.vimeo a:hover{ background-position:-288px -32px} ul.cbttopshare li.youtube a:hover, #sidebar ul.cbttopshare li.youtube a:hover{ background-position:-320px -32px} 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 --> <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> <!--Social Icons End-->
معاينة الاضافة :
