اضافة مواقع التواصل الاجتماعية على بلوجر بطريقة جذابة ~ علي للمعلوماتية

بسم الله والصلاه والسلام على اشرف الانبياء والمرسلين .. اقدم لكم طريقة اضافة مواقع التواصل الاجتماعية بشكل جميل جداً لمدونات بلوجر . 

بأمكانك مشاهدة الاضافة في مدونتي..

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

<style type="text/css"> #buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VLJVXwr_1jpdRHdtFr8HDmxxHvIaCp_Rli-EmjWUqIGVCs75tRaMDlPSeSKS_qpQiY3YMrADSrcZEXRylnpQ7kJ8iLj8nQtXNvm9THUt-cgzRcljcOPe3t4gyoO6VS-vPczXsas80hg/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover {visibility: hidden;} #buttonbg span {display: block;top: 15px;position: absolute;left: 90px;} #buttonbg .icon {color: #fafafa;overflow: hidden;} #buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; } #buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;} #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;} #buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; } #buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style> <ul id="buttonbg"> <li ><a href="http://facebook.com/khreashifotinfo" class="icon fb">تابعنا عبر facebook</a><span></span></li> <li ><a href="http://twitter.com/khreashi" class="icon twit" >تابعنا عبر Twitter</a><span></span></li> <li ><a href="https://plus.google.com/u/0/110424427482310469269/posts" class="icon google" >تابعنا على google+</a><span></span></li> <li ><a href="http://khreashi-info.blogspot.com/" class="icon linked" > تابعنا عبر linked</a>تابعنا عبر<span></span></li> <li ><a href="http://youtube.com/khreashi94" class="icon ytube">تابعنا على Youtube</a><span></span></li> <li ><a href="http://feeds.feedburner.com/blogspot/hNLgL" class="icon rss" >اشترط عبر RSS</a><span></span></li> </ul>

قم بتغيير الروابط التالية المحددة في اللون الاصفر بروابط موقعك مكان رابط موقعي..

<ul id="buttonbg">

<li ><a href="http://facebook.com/khreashifotinfo" class="icon fb">تابعنا عبر facebook</a><span></span></li>

<li ><a href="http://twitter.com/khreashi" class="icon twit" >تابعنا عبر Twitter</a><span></span></li>

<li ><a href="https://plus.google.com/u/0/110424427482310469269/posts" class="icon google" >تابعنا على google+</a><span></span></li>

<li ><a href="http://khreashi-info.blogspot.com/" class="icon linked" > تابعنا عبر linked</a>تابعنا عبر<span></span></li>

<li ><a href="http://youtube.com/khreashi94" class="icon ytube">تابعنا على Youtube</a><span></span></li>

<li ><a href="http://feeds.feedburner.com/blogspot/hNLgL" class="icon rss" >اشترط عبر RSS</a><span></span></li>

</ul>

اذا واجه احدكم مشكلة يتواصل معي عبر الرسائل وانشاء الله برد عليه بأسرع وقت