إضافة أزرار للمواقع الاجتماعية و 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhItDWN3FjG-XBhuU_0SGrB5xj-wYc47OoOTNUHtF3XBIkQ8eVfadF46fK4ob5qfEwoD7VLAWsZqi_IWFb2XcfYHBlOzU4HXH9peOstdwl6nNcE7bEZ8icIA91WaBPBvXeV08b4nKK1Nw5M/s1600/facebook.png") no-repeat center center;}
#jocial .twitter{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBA3HHQtBsjoW6hEnIOc-eQVZk4H8hVNLxLPOXWp1GZEV_LrdXuUqYmDTtCee0-r-GtLm7_rp5P5SIctn77bH_NIvzNLHBt2C1wb6rm6g5Z4j1JLMui2A2SIvSLSvwkYwoLLTrWl9vpSK/s1600/Twitter.png") no-repeat center center;}
#jocial .googleplus{width: 150px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn4aclWXyn-U4amFiuLGicXf3inkcgqiZkwzOZusA68Gkeg0WjVUaQ9U-QcIv0czicomoxieeLn-kNGyOR7GFDw3QqhrY_vqdsZ5O5MUO-XpWA41Sdo2RMIY5kRHuIsCYK5-c06mfZCt3/s1600/google+plus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7C05uJK6tSXi7QqkFQqEO3vuwfNf8zxzW-eHk67186haAMgu82kuFPWGBsuKqJQLdiy16ZR76fcg6bkmlbOTGHv8XRlrqoekaNUoeAN8-lg124LV-YPxkgz-fDZjwn32geAFy_NRcMxxP/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBA3HHQtBsjoW6hEnIOc-eQVZk4H8hVNLxLPOXWp1GZEV_LrdXuUqYmDTtCee0-r-GtLm7_rp5P5SIctn77bH_NIvzNLHBt2C1wb6rm6g5Z4j1JLMui2A2SIvSLSvwkYwoLLTrWl9vpSK/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn4aclWXyn-U4amFiuLGicXf3inkcgqiZkwzOZusA68Gkeg0WjVUaQ9U-QcIv0czicomoxieeLn-kNGyOR7GFDw3QqhrY_vqdsZ5O5MUO-XpWA41Sdo2RMIY5kRHuIsCYK5-c06mfZCt3/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7C05uJK6tSXi7QqkFQqEO3vuwfNf8zxzW-eHk67186haAMgu82kuFPWGBsuKqJQLdiy16ZR76fcg6bkmlbOTGHv8XRlrqoekaNUoeAN8-lg124LV-YPxkgz-fDZjwn32geAFy_NRcMxxP/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
</style>

بقـلـــــــــــــــــــم

الــمـــــــــــــــــــــدون    فهد لافي