Sağ Üst Kenara Sosyal Butonlar Ekleme




Blogger için sosyal paylaşım butonları ile ilgili bir çok yazı paylaşmıştım sizlere takipçi olan arkadaşlarım iyi bilir ve her geçen gün yeni yeni bir eklenti ile sizleri tanıştırıyorum.Şimdiki eklentimiz başlıktata sizlere belirttiğim gibi "Sağ Üst Kenara Sosyal Butonlar Ekleme" özelliği yani alttaki demodan bakmış iseniz sayfanın sağ üst köşesinde bulunuyor.Blogcular genelde bu butonları sayfanın yanında tutmayı tercih eder veya bu eklenti ile karşılaşmadıkları için öyle yaparlar ama farklı birşeyler olması açısından bu eklenti tam size göre.

 
Blogger Paneli >> Şablon>> HTML Düzenle diyoruz ve CTRL+F yardımıyla ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz.

* Sağ Üst Kenara Sosyal Butonlar Ekleme PhtmlDrive
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
display:block;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Şimdi bu kodu kopyalayın ve tekrar CTRL+F yardımıyla bulun 

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 

bulduktan sonra aşağıdaki kodu hemen üstüne yerleştiriyoruz.Aşağıdaki resimde gösterdiğim gibi.




<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/
phtmldrive'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE6-GW6R5BrBOz_qssUaOQYmngFL1jAaG1pcGlJFCszLXD1ZMd05_9hBPGrMk205K9_4Ay-yCblgzRH3Udtix_Voy1PyCD7W5UECb2xGKBjZVzu9UbxxFNYagoPx_HPm81qk0y4VK69N0/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/
phtmldrive'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG4eX60iUInoCOy57uk141Q4QzGKiOYOZ_6fdHpfs2h2nMjg6zlenXOk8MoXIUxxxDu9mrpj70hwCMZwQKSb4xqbRSvfcFjYGo7Z8OB8Hp3CEY8_l6JKSg-ZWb5KwvTmhl5ALbnFJ8HMI/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/
phtmldrive/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSMZaJLobqB5rr6eVSUox4rloeLX6-yqwDVL0fcLTjjsK0veDoBgWcxqlyqyB4TDs2UIUPnF5nGNmjsOqLxZp2hdrYL_D5ecEs9FtZKqtv5bs6_n4coi1Sim8omyfBN02ts0aCuxw9Nso/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://
phtmldrive.blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBvqIO3px6-8a_Hge7O3zVw55nvIYEN0iPLKlazSbRGPPx-6QGKZ35-Uh4tZ4DJaGQpAhPcW8f_nWgO16pjzykNMoW6dAAyRMfGaxU5GUH8ZLdxlcj4nV5a8vbvnTya4H66Dc_wyaor8/s1600/RSS.png'/></a></li>

</ul></div>

Şimdi adım oldukça basit arkadaşlar yukarda görmüş olduğunuz kırmızı renk "phtmldrive" kodlarını kendi sosyal paylaşım veya site diyelim adreslerinizi girmeniz gerekiyor.

0 yorum:

Copyright © 2011- PhtmlDrive
Tüm Hakları Saklıdır Kesinlikle İzinsiz Kopyalanamaz.. PHtmlDrive`da Yayınlanan Görseller ve Yazılar Kaynak Gösterilmeden Kullanılamaz... Tema Yapımı ©
PHtmlDrive