إضافة أيقونات المواقع الإجتماعية مع التأثير إلى مدونات بلوجر

أهلاً بكم زوار ومتابعي المدونة 

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

للمعاينة أنقر هنا

- طريقة التركيب :

1- ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر تخطيط .

3- من تخطيط اختر >> إضافة أداة HTML/JavaScript

4- اللصق الكود التالي في صتدوق الأداة ثم احفظ .

 <div class="tbislso">
<ul>
<li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li>
<li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li>
<li><a class="tbisbox gplus" href="#"><p>5K+&nbsp;</p>Google+</a></li>
<li><a class="tbisbox pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>     <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li>
</ul>
</div> 

5- عدل مكان هذه الإشارة " # " بمواقعك الإجتماعية .

6- بعد ذلك اختر لوحة التحكم مرة أخرى .

7- من لوحة التحكم احتر قالب >> تحرير قالب .

8- ابحث عن الوسم : ]]></b:skin>

9- ضع الكود التالي فوقه :

 .tbisbox {font: 25px/24px normal 'Denk One', sans-serif; display: inline-block;position: relative;width: 95%;max-width: 280px;margin: 0 auto 15px auto;padding: 16px;background-color: rgba(238, 238, 238, 0.1);box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;     box-sizing: border-box;}
.tbislso {width: 95%;max-width: 280px;padding-top: 8px;padding-left: 8px;padding-right: 8px;}
.tbislso a {text-decoration: none !important;}
.tbislso ul {margin: 0;padding: 0;list-style: none;}
.tbislso ul li {display: inline;margin: 0;padding: 0;text-indent: 0;}
.tbislso ul li a.facebook {border-left: 65px solid rgba(59, 89, 152, 1);     color: rgba(59, 89, 152, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.facebook p {margin: 2px 20px 0 -70px; display: inline-block;     color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.facebook:hover {background: rgba(59, 89, 152, 1);border-left: 0px solid rgba(59, 89, 152, 0.1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.facebook:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
.tbislso ul li a.twitter {border-left: 65px solid rgba(64, 153, 255, 1);color: rgba(64, 153, 255, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.twitter p {margin: 2px 20px 0 -70px; display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.twitter:hover {background: rgba(64, 153, 255, 1);     border-left: 0px solid rgba(64, 153, 255, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.tbislso ul li a.twitter:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
.tbislso ul li a.gplus {border-left: 65px solid rgba(219, 74, 57, 1);color: rgba(219, 74, 57, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.gplus p {margin: 2px 20px 0 -70px;display: inline-block;     color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.gplus:hover {background: rgba(219, 74, 57, 1);border-left: 0px solid rgba(219, 74, 57, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;     -ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;     transition: all 300ms ease-in-out;}
.tbislso ul li a.gplus:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
.tbislso ul li a.pinterest {border-left: 65px solid rgba(174, 45, 39, 1);color: rgba(174, 45, 39, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.pinterest p {margin: 2px 20px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.pinterest:hover {background: rgba(174, 45, 39, 1);border-left: 0px solid rgba(174, 45, 39, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;
}
.tbislso ul li a.pinterest:hover p {opacity:0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}
.tbislso ul li a.rss {border-left: 65px solid rgba(255, 102, 0, 1);color: rgba(255, 102, 0, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;     -ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition:all 300ms ease-in-out;}
.tbislso ul li a.rss p {margin: 2px 20px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;     transition: all 300ms ease-in-out;}
.tbislso ul li a.rss:hover {background: rgba(255, 102, 0, 1);     border-left: 0px solid rgba(255, 102, 0, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.tbislso ul li a.rss:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;} 

10- احفظ القالب .