السلام عليكم ورحمة الله وبركاته

اليوم حبيت اقدم لكم اضافة رائعة وانيقة وبسيطة لمدونات بلوجر اضافة ازرار المواقع الاجتماعية بشكل احترافي الصراحة شكل الازرار اكثر من رائع

♦ طريقة التركيب ♦

1- نذهب الى لوحة تحكم المدونة  ثم الى التخطيط

2- ثم اضافة اداة HTML/Javascript جديدة ثم ضع الكود التالي داخل المستطيل واضغط على حفظ

<div class="abt-social-slide">

<ul>

<li><a class="facebook" href="###" target="_blank">فيس بوك</a></li>

<li><a class="twitter" href="###" target="_blank">تويتر</a></li>

<li><a class="google-p" href="###" target="_blank">جوجل بلس</a></li>

<li><a class="rss" href="###" target="_blank">خلاصات المواضيع</a></li>

</ul>

</div>

<style>

.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}

.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}

.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7YwEr1iDsFd-_0SsRvAOaqIA4eJX1-tZKSbnBvQwNYWLvcnnfVc3bc_YrokpQJX5jFgVVBxEeuSx7X3WEm1KvKskDxFMhm1o-LujjtgYAuEfNCj3CToz999bYaEkJ_g7VJxQOgq7MA/s1600/facebook.png) no-repeat 0 -88px}

.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7YwEr1iDsFd-_0SsRvAOaqIA4eJX1-tZKSbnBvQwNYWLvcnnfVc3bc_YrokpQJX5jFgVVBxEeuSx7X3WEm1KvKskDxFMhm1o-LujjtgYAuEfNCj3CToz999bYaEkJ_g7VJxQOgq7MA/s1600/facebook.png) no-repeat 0 0}

.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3oEn5I5xCVVggted9jDDPO2F56b-kFE8yQ0av4telwF-af8q1FN1T0Ir0DZq_-eKO1_jHJRBdsZcZNiD0xE2b-czBVOhZkElP9IiGz-PIjCrjLMxjqWQbrZIQEi-i7qnvquoODCA4w/s1600/twitter-1.png) no-repeat 0 -88px}

.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3oEn5I5xCVVggted9jDDPO2F56b-kFE8yQ0av4telwF-af8q1FN1T0Ir0DZq_-eKO1_jHJRBdsZcZNiD0xE2b-czBVOhZkElP9IiGz-PIjCrjLMxjqWQbrZIQEi-i7qnvquoODCA4w/s1600/twitter-1.png) no-repeat 0 0}

.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr6-qUpvEZwXySSvs9xjZtw7jV486XQy_mPzORGG5Sq7T2f9yigSGaUMEqhbtHsgp1XjoEj8_fX6sWId9aodv8YkZM6Mr2dE4NfiMhfqXoqtIuc0GZsCyoec8jC4HT8LbDWgfF8dI4xQ/s1600/google.png) no-repeat 0 -88px}

.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr6-qUpvEZwXySSvs9xjZtw7jV486XQy_mPzORGG5Sq7T2f9yigSGaUMEqhbtHsgp1XjoEj8_fX6sWId9aodv8YkZM6Mr2dE4NfiMhfqXoqtIuc0GZsCyoec8jC4HT8LbDWgfF8dI4xQ/s1600/google.png) no-repeat 0 0}

.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMD9c-Mbm6Dd-7reFqUAGdn9dyVe5NI6pwIBKZk5mTw2Z5UTttCJsOKVRy3t6RDl-P7P1pohOCWOyowtlm6v-zNF-wi2arozA2ZZETeg9dsXJT9EDwkZ9rDeH5_CJfq2GK17IpNx_IQ/s1600/twitter.png) no-repeat 0 -88px}

.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMD9c-Mbm6Dd-7reFqUAGdn9dyVe5NI6pwIBKZk5mTw2Z5UTttCJsOKVRy3t6RDl-P7P1pohOCWOyowtlm6v-zNF-wi2arozA2ZZETeg9dsXJT9EDwkZ9rDeH5_CJfq2GK17IpNx_IQ/s1600/twitter.png) no-repeat 0 0}

</style>

 غير الرمز (###) الي بلون الاحمر بالروابط الخاصة بك واضغط على حفظ ومبروووك عليك الاضافة الرائعة

 √ اتمنى من كل من مر على هذا الموضوع ان يترك كلمة شكر فى تعليق √