كيفية إضافة أيقونات المواقع الاجتماعية لمدونات بلوجربشكل جذاب

اليوم سوف نتعرف على إضافة رائعة جداً إلا وهي إضافة المواقع الاجتماعية بشكل جميل وجذاب ،يضفي على مدونتك مظهر من الرونق والجمال .

- طريقة تركيب الإضافة :

1- أدخل إلى مدونتك ثم أختر لوحة التحكم  >>تخطيط >> إضافة أداة : HTML/JavaScript .

2- اضف الكود التالي في صندوق الأداة ، ثم أحفظ .

 <style>
/*homeblog7.blogspot.com CSS starts*/
ul.HB-thinsprite {float:right;}
ul.HB-thinsprite li {float:left;list-style: none outside none;border:none;}
ul.HB-thinsprite li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnB8cVPYEhGRjhABSSgd0KqQb-MOyeDik96_TThv6N3by-OL3uuExWG6BJQLTIcYJNCLblE9MvzcrSAxOhZn8vBIW1PSH0ye_8z0rPii3w_YnUe2ydmbqGXekXfiBEiDffwufweW-gCWVg/s1600/social-icons+-+Copy.png');background-repeat:no-repeat;background-size:430px;border:0 none;color:white;direction:ltr;display:block; height:39px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:35px;}
.HB-thinsprite li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnB8cVPYEhGRjhABSSgd0KqQb-MOyeDik96_TThv6N3by-OL3uuExWG6BJQLTIcYJNCLblE9MvzcrSAxOhZn8vBIW1PSH0ye_8z0rPii3w_YnUe2ydmbqGXekXfiBEiDffwufweW-gCWVg/s1600/social-icons+-+Copy.png')}
ul.HB-thinsprite li.facebook a{ background-position:0 0}
ul.HB-thinsprite li.twitter a{ background-position:-40px 0}
ul.HB-thinsprite li.google a{ background-position:-80px 0}
ul.HB-thinsprite li.pinterest a{ background-position:-120px 0}
ul.HB-thinsprite li.linkedin a{ background-position:-160px 0}
ul.HB-thinsprite li.tumblr a{ background-position:-200px 0}
ul.HB-thinsprite li.vimeo a{ background-position:-240px 0}
ul.HB-thinsprite li.myspace a{ background-position:-280px 0}
ul.HB-thinsprite li.flickr a{ background-position:-320px 0}
ul.HB-thinsprite li.youtube a{ background-position:-360px 0}
ul.HB-thinsprite li.feed a{ background-position:-400px 0}

ul.HB-thinsprite li.facebook a:hover, #sidebar ul.HB-thinsprite li.facebook a:hover{ background-position:0 -40px}
ul.HB-thinsprite li.twitter a:hover, #sidebar ul.HB-thinsprite li.twitter a:hover{ background-position:-40px -40px}
ul.HB-thinsprite li.google a:hover, #sidebar ul.HB-thinsprite li.google a:hover{ background-position:-80px -40px}
ul.HB-thinsprite li.pinterest a:hover, #sidebar ul.HB-thinsprite li.pinterest a:hover{ background-position:-120px -40px}
ul.HB-thinsprite li.linkedin a:hover, #sidebar ul.HB-thinsprite li.linkedin a:hover{ background-position:-160px -40px}
ul.HB-thinsprite li.tumblr a:hover, #sidebar ul.HB-thinsprite li.tumblr a:hover{ background-position:-200px -40px}
ul.HB-thinsprite li.vimeo a:hover, #sidebar ul.HB-thinsprite li.vimeo a:hover{ background-position:-240px -40px}
ul.HB-thinsprite li.myspace a:hover, #sidebar ul.HB-thinsprite li.myspace a:hover{ background-position:-280px -40px}
ul.HB-thinsprite li.flickr a:hover, #sidebar ul.HB-thinsprite li.flickr a:hover{ background-position:-320px -40px}
ul.HB-thinsprite li.youtube a:hover, #sidebar ul.HB-thinsprite li.youtube a:hover{ background-position:-360px -40px}
ul.HB-thinsprite li.feed a:hover, #sidebar ul.HB-thinsprite li.feed a:hover{ background-position:-400px -40px}
/*homeblog7.blogspot.com CSS ends*/
</style>
<!--homeblog7.blogspot.com sprite widget starts-->
<ul class="HB-thinsprite">
<li class="facebook">
<a href="http://www.facebook.com/your profile" target="_blank" title="Join us on facebook" rel="nofollow"></a></li>

<li class="twitter">
<a href="http://www.twitter.com/your profile" target="_blank" title="Follow us on Twitter" rel="nofollow"></a></li>

<li class="google">
<a href="http://plus.google.com/your profile" target="_blank" title="circle us on Google+" rel="nofollow"></a></li>

<li class="pinterest">
<a href="http://www.pinterest.com/your profile" target="_blank" title="Follow us on Pinterest" rel="nofollow"></a></li>

<li class="linkedin">
<a href="http://www.linkedin.com/your profile" target="_blank" title="Follow us on Linkedin" rel="nofollow"></a></li>

<li class="tumblr">
<a href="http://your site.tumblr.com/" target="_blank" title="Follow us on tumblr" rel="nofollow"></a></li>

<li class="vimeo">
<a href="http://www.vimeo.com/your channel" target="_blank" title="Follow us on Vimeo" rel="nofollow"></a></li>

<li class="myspace">
<a href="http://www.myspace.com/your profile" target="_blank" title="Add us on myspace" rel="nofollow"></a></li>

<li class="flickr">
<a href="http://www.flickr.com/your profile" target="_blank" title="Follow us on flickr" rel="nofollow"></a></li>

<li class="youtube">
<a href="http://www.youtube.com/your channel" target="_blank" title="Subscribe us on Youtube" rel="nofollow"></a></li>

<li class="feed">
<a href="http://feeds.feedburner.com/feed id" target="_blank" title="Never miss a post Subscribe" rel="nofollow">
</a></li></ul>
<!--homeblog7.blogspot.com sprite widget ends-->