اضافة شبكات التواصل الاجتماعي بطريقة رائعة
اقدم لكم افضل اضافة لبلوجر 2014 .
لنبدأ على بركة الله
بلوجر :: قم بالذهاب الى لوحة التحكم , من ثم التخطيط من ثم ادراج اضافة html و الصق الكود
وورد بريس او اي موقع اخر
فقط قم بالصاق الكود حيث تريد ان تضهر الاضافة
الكود::
رمز Code:
<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/AVvXsEiHsnMKUt9AZ4nFlNIeCifbI-bpxd-3WimypQ0fCsd1iEAUzdH3ybXEpAkx9v1fpozQOlW2OvAY3NSgBHBzCmJ3FR1s2SetvvHgYWwpz5Murq6ueDa195KOyRia1T8kKy7AMeyBvwYjIug/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 .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;}
#buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}
#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 .pint {background-color: #C00;background-position: 0 -142px; }
#buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#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="Link Facebook Anda" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li>
<li ><a href="Link Twitter Anda" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span></li>
<li ><a href="Link Google+ Anda" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span></li>
<li ><a href="Link Pinterest Anda" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span></li>
<li ><a href="Link Linkedin Anda" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span></li>
<li ><a href="Link Deviant Art Anda" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span></li>
<li ><a href="Link Youtube Anda" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span></li>
<li ><a href="Link RSS/Feed Anda" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul>
* يمكنك تغير الجمل حسب ماتريد مثلا
Like us on Facebook تخليها تابعنا على فيس بوك
لادراج الاضافة فقط قم بتغيير روابط موقعك في الشبكات الاجتماعية بدلا من الكلمات الملونة
adblock تم الكشف عن مانع الإعلانات
الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️
0 تعليقات