18 Aralık 2012 Salı

Blogger Sayfa Altında Sabit Duran Sosyal Paylaşım Butonları


Blogger eklentimiz sosyal paylaşım butonları haricinde Ana sayfa / Site Haritası Sunma / İletişim ve Arama butonlarına da sahip .

Blogger Sayfa Altında Sabit Duran Menü Demosu

Blogger Dersleri - Sayfa Altında Sabit Duran Menü 


1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle temamızın kodlarını açıyoruz.
2 ) Ctrl + F yardımı ile 
 kodunu buluyoruz.
3 ) kodunun öncesine aşağıdaki  Blogger Sayfa Altında Sabit Duran Menü kod dizinini ekliyoruz.

/*---www.Bloggerdersleri.com Like To Enter Advance Traffic POP ---*/
  
div.cap {
 display: block;
 height: 100px; 
 width: 40px;
 background: url(http://3.bp.blogspot.com/-296iWD5AC80/UEHlDsazgbI/AAAAAAAAFBk/Y22FaBJ66Lo/s1600/dock-background-left.png)bottom left no-repeat; }
  
div.cap.left { 
 position: absolute; 
 bottom: 0px; 
 left: 0px; }
  
div.cap.right { 
 background-position: right bottom;
 position: absolute; 
 top: 0px;
 right: 0px; }
  
ul.mbl-dock { 
 display: inline-block; 
 height: 130px;
 padding: 0 40px 0 0; 
 background: url(http://3.bp.blogspot.com/-296iWD5AC80/UEHlDsazgbI/AAAAAAAAFBk/Y22FaBJ66Lo/s1600/dock-background-left.png) no-repeat right bottom;
 overflow: hidden; 
 margin: 0 0 0 40px; }
  
ul.mbl-dock li { 
 display: block; 
 position: relative;
 float: left;
 width: 50px; 
 height: 50px; 
 margin: 60px 0 4px 0;
 -webkit-transition: 0.15s linear; 
 -webkit-transition-property: -webkit-transform margin;
 text-align: center; }
  
ul.mbl-dock li a {
 display: block;
 height: 50px;
 padding: 0 1px; 
 -webkit-transition: 0.15s linear;
 -webkit-transition-property: -webkit-transform margin; 
 margin: 0;
 -webkit-box-reflect: below 2px
 -webkit-gradient(linear, left top, left bottom, from(transparent),
 color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));}
  
ul.mbl-dock li a img { width: 48px; }
  
ul.mbl-dock li:hover { 
 margin-left: 9px; margin-right: 9px;}
  
ul.mbl-dock li:hover a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.5);}
  
ul.mbl-dock li.nearby { 
 margin-left: 6px; margin-right: 6px;
 z-index: 100;}
  
ul.mbl-dock li.nearby a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.25);}

ul.mbl-dock li span { 
 background:#fff;
 position: absolute; 
 bottom: 80px; margin: 0 auto;
 display: none; 
 width: auto;
 font-family:arial; 
 font-size: 11px;
 font-weight: bold; 
 padding: 3px 6px;
 -webkit-border-radius: 6px; 
 color: #000; }
  
  
ul.mbl-dock li:hover span { display: block; }
  
div#mbldockwraps { 
    position: fixed; 
 bottom: 12px; 
 height: 120px;
 padding: 50px 0 0; 
 text-align: center; 
 -webkit-border-radius: 6px; 
 -moz-border-radius: 6px;
 width: 100%;
 line-height: 1; z-index: 100; }
  
div#macWrap { 
    width: auto; 
 display: inline-block;
 position: relative; 
 border-bottom: solid 2px rgba(255,255,255,.35);
 line-height: 0; }


1 ) Ardından Ctrl + F yardımı ile  kodunu buluyoruz.
2 )  kodunun öncesine aşağıdaki  Blogger Sayfa Altında Sabit Duran Menü kod dizinini ekliyoruz.

Blogger Dersleri - Sayfa Altında Sabit Duran Menü Kullanımı

Blogger Sayfa Altında Sabit Sosyal Paylaşım Butonu kullanmak için  Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak aşağıda ki kodları ekleyin .
  • Sabit Duran Sosyal Paylaşım Sitesi Butonları İçin Düzenlemeler:
    • Blogger Eklenti kodlarında : Kırmızı ile yazılmış alanlar butonların üzerine gelindiğinde görünecek metin içeriği. 
    • Mavi ile yazılmış linkler ise sizin sosyal paylaşım sitesi profil linkleriniz. 
    Umarım yararlı olmuştur. Farklı tarzda hareket eden sosyal paylaşım butonu yapmak isteyenler için ise : Blogger Hareketli Sosyal Paylaşım Buton Yapımı >>