اضافة ازرار المواقع الاجتماعية بطريقة احترافية

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

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

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

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/AVvXsEjsYhUdL8Gy11dtAi1eE_wJo5TlybhYN1VdP2RSQ8DjubRbji7YSGQ_pEaktl28PPMg0sAtYz8wNV90AxKp2olJHcaqR9gjXp-QU1qUvpw1gQD0bVftloMPbxE0eyWGt_M1XCk-HPRaeA/s1600/facebook.png) no-repeat 0 -88px}

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

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

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

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

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

.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDeLoikeaHgckgJdMxoFeq-LMhL7DYKvpJaTznKn1saNxQM_X5Jfe4cDvrC3S0BCVYEfkdaloeI7sGwW6Tn2ScPLNqG_JAaiTzc-RUC_YI-rF5s9e8rcozbIVFgrjnLZGoDnv6dFl-gw/s1600/twitter.png) no-repeat 0 -88px}

.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDeLoikeaHgckgJdMxoFeq-LMhL7DYKvpJaTznKn1saNxQM_X5Jfe4cDvrC3S0BCVYEfkdaloeI7sGwW6Tn2ScPLNqG_JAaiTzc-RUC_YI-rF5s9e8rcozbIVFgrjnLZGoDnv6dFl-gw/s1600/twitter.png) no-repeat 0 0}

</style>

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

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

• غرد
• شاركه
• شاركه
• شاركه
• شاركه

azez mohammed

اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها التصوير ، الرياضة ، والتصميم بحد ذاته ومدونة تعاون تعبر عما أهواه .