Blogspot SEO Ayarları - Blogseocu

Metro tarzı sosyal ağ paylaşım butonları makalemizle yine beraberiz.
Bu makalemde Windos 8 Metro Arayüzüne benzerliği ile dikkat çeken, Metro style sosyal ağ butonlarını paylaşıcam.
Bu güzel eklentiyi sanırım siz de beğeneceksiniz. Dilerseniz kodlara geçelim.


Metro stil sosyal ağ butonları CSS kodu

#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/AVvXsEhqiAlx0dXRN45C-Snv5Z4TogGvWWMRzHTluNWrAG-Q18iB9iM7iJ41-ORNRePlX4KpA_TOhHAxBSnhQM3hIjlzmY5xvY_zMm7zu_f0uWJ3imf1fkh6y2syxiZlo-s6hxI6DAaR4xdIXkxA/s0/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/AVvXsEhSdsbyIAY5dgG3oAcgdRyx6YN-3pWkYiWQW5N5SeWvn6DU9bRABEaP_VvNuqq4e642kGifujb5c1LoRTMDuy1QnqFb1NKzgcm1hHc2DWH2_sdBQEmxP8IAYS02LtTHVrM88cup-8lO_CR6/s0/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/AVvXsEiVurJDR4kDkZhQ7tllGg3SyvlT2WhqIn2yghOfizclN9o7-g3EV_Z-MTSv_yFO03l3UEFhCc6xdn_X-OQAVnymWmGyrYvfh4YJ5Zf7WzHsKJs60WBB_rCswt0FOQz6GjXFB3cFCqNAMQ2r/s0/google%25252Bplus.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/AVvXsEi0c589XYdzYFm_g09NtDBGaOGhaVA591ne7iY_aOaQYmON_LfmWw0xlZwtbPyw30Eg7BehoNm0XmlMyVKPAn9U4Vd8BKVT0cAEIVxyVrCn2aGzG2nvK6014Q9fHmUJ6OPvhDGYQjifpUd3/s0/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/AVvXsEhSdsbyIAY5dgG3oAcgdRyx6YN-3pWkYiWQW5N5SeWvn6DU9bRABEaP_VvNuqq4e642kGifujb5c1LoRTMDuy1QnqFb1NKzgcm1hHc2DWH2_sdBQEmxP8IAYS02LtTHVrM88cup-8lO_CR6/s0/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/AVvXsEiVurJDR4kDkZhQ7tllGg3SyvlT2WhqIn2yghOfizclN9o7-g3EV_Z-MTSv_yFO03l3UEFhCc6xdn_X-OQAVnymWmGyrYvfh4YJ5Zf7WzHsKJs60WBB_rCswt0FOQz6GjXFB3cFCqNAMQ2r/s0/google%25252Bplus.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/AVvXsEi0c589XYdzYFm_g09NtDBGaOGhaVA591ne7iY_aOaQYmON_LfmWw0xlZwtbPyw30Eg7BehoNm0XmlMyVKPAn9U4Vd8BKVT0cAEIVxyVrCn2aGzG2nvK6014Q9fHmUJ6OPvhDGYQjifpUd3/s0/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}

Metro stil sosyal ağ butonları HTML kodu

<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/YOUR_USERNAME/'></a></li>
<li><a class='icon twitter' href='http://twitter.com/username/'></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/YOUR_USERNAME'></a></li>
</ul>

HTML kodlarındaki ''your user name'' yazan yerleri kendi sosyal ağ isimleri ile değiştirmeyi unutmayın.