ازرار المواقع الاجتماعيه بشكل جميل وذات تأثير رائع

 

السلام عليكم! في هذا الموضوع ساتطرق لكيفية اضافة ازرار

المواقع الاجتماعيه بشكل انيق وذات تأثير جميل كما في الصوره اعلاه

 طبعا تم ترجمة الموضوع من قِبل مدونة ارشيف بلوجر ,المصدر 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

1. اذهب للوحة تحكم مدونتك.
2. اذهب إلى تخطيط .
3.  اضف اداة HTML/Javascript' و الصق الكود التالي بداخلها  ثم حفظ.

/*--------Social Sharing Widget ------*/
<style type="text/css">
.socialsharing {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.socialsharing span {
float: left;
display: inline;
margin-right: 8px;
}
.socialsharing span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcWwraGPVx-l0JD2L-FcdY46wY9d_REjoTNyUDMat7zYLz3K7-fbmQaYfGNyKOriAcNDe8fUg8rFgJ0AIFlcloVNpcEcKsQ5LWGgaabvXQa3HNE-fIQMljsUW__pITuZC8TKo7sBeTMV9/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>

<div class="socialsharing">
<a href="http://www.twitter.com/bloggerarchive" id="iconTwitter" target="_blank" title="Follow us on Twitter">Twitter</a>
<a href="http://www.facebook.com/bloggerarchive" id="iconFacebook" target="_blank" title="Join us at Facebook">Facebook</a>
<a href="http://feeds.feedburner.com/bloggerarchive" id="iconRSS" target="_blank" title="Subscribe our RSS Feed">RSS</a>
<a href="http://www.blogger.com/youtube.com/bloggerarchive" id="iconYouTube" target="_blank" title="Follow our YouTube Channel">YouTube</a>
<a href="https://plus.google.com/123456789005648565/posts" id="iconGooglePlus" target="_blank" title="Follow us at Google+">Google</a></div>

عدل الاجزاء الملونه في الكود بالمطلوب.

واي استفسار يمكنك وضعه في تعليق في هذه التدوينيه وسيتم الرد عليه في اقرب وقت ممكن.

تحياتي.