أكتب إسم موقع أو شركة ..

السبت، 4 يناير 2014

من أجمل اضافات المدونات

إضافة أزرار للمواقع الاجتماعية و RSS الى بلوجر

إضافة جميلة لمدونات بلوجر و هي تبويبات تشبه واجهة Metro التي بالويندوز 8 للمتتابعة على المواقع الاجتماعية بتأتير CSS تفيدك هذه الاضافة بالمنح لزوارك من متابعت مدونتك و التوصل بكل جديدها لن أطيل عليكم الاضافة جيدة نمر لتجريبها أو تركيبها على مدونتك




خطوات اضافة الأداة 

  1.  إذهب للوحة تحكم بلوجر
  2.  إذهب إلى تخطيط
  3.  إضافة أدا ثم اختر HTML/JAVASCRIPT
  4.  قم بنسخ و ألصق هذا الكود و عدل XXXX.بما يناسبك




<ul id='jocial'>

<li><a class='icon facebook' href='https://www.facebook.com/XXXX'/></a></li>

<li><a class='icon twitter' href='http://twitter.com/XXXX'/></a></li>

<li><a class='icon googleplus' href='https://plus.google.com/XXXX'/></a></li>

<li><a class='icon rss' href='http://feeds.feedburner.com/XXXX'/></a></li>

</ul>
<style>
#jocial{width: 305px;
float: left;margin-top: 10px;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: rgba(59,89,152,1) url("http://1.bp.blogspot.com/-BGOX3zdOF4s/UQNU_PFl3oI/AAAAAAAAFL0/_5nRgCuxHrc/s1600/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/s1600/rss.png") no-repeat center center;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
</style>


▩ مواضيع مقترحة :
هل إستفدت من هذا الموضوع ؟ من فضلك شاركه على :

ليست هناك تعليقات

جميع الحقوق محفوظة لــ: Azzoudz 2017-2013 ©