أهلاً بكم زوار ومتابعي المدونة
اليوم سوف نتعرف على طريقة إضافة المواقع الإجتماعية الخاصة بك إلى مدونات بلوجر وهذه الإضافة تضيف لمسة جمالية وأحترافية إلى مدونتك .
- طريقة التركيب :
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+ </p>Google+</a></li>
<li><a class="tbisbox pinterest" href="#"><p>4K+ </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- احفظ القالب .
