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

مقدمة

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

صورة الإضافة

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

1- من لوحة التحكم ---> التخطيط

2- إضافة اداة ---> HTML/JavaScript

3- ثم قم بإضافة الكود التالى فى المربع الظاهر إمامك

<<style type="text/css">
    .pbtv2Social {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.pbtv2Social span {
float: left;
display: inline;
margin-right: 8px;
}
.pbtv2Social span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0bw1DU0HnnzxftBczPQIAwQzFFp2mU-N-fPNEmfIInRBgbmHi9pYBSavZ84bhnK7EoGfdYFYgf_CXknhL2UqU5PGjs2tVOdtWcz80vTkwDdekTkL5pBRltU3rEa6P7ZJ_f93Lf6BNNKOw/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>
<body>
 <div class='pbtv2Social'>
<span><a href='twitter.com/Al3oraby' id='iconTwitter' target='_blank' title='Follow us on Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/Al3oraby' id='iconFacebook' target='_blank' title='Join us at Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/Al3oraby' id='iconRSS' target='_blank' title='Subscribe our RSS Feed'>RSS</a></span>
<span><a href='youtube.com/Al3oraby' id='iconYouTube' target='_blank' title='Follow our YouTube Channel'>YouTube</a></span>
<span><a href='https://plus.google.com/+Al3oraby' id='iconGooglePlus' target='_blank' title='Follow us at Google+'>Google</a></span></div>
</div>

4- قم بالتعديل لاضافة روابط المواقع الاجتماعية الخاصة بمدونتك 

twitter.com/Al3oraby
http://www.facebook.com/Al3oraby
http://feeds.feedburner.com/Al3oraby
youtube.com/Al3oraby
https://plus.google.com/+Al3oraby

والان مبرووك علي مدونتك الإضافة و هكذا انتهى درسنا اليوم و اى استفسار لا تترد بطرحه فى التعليقات بالأسفل