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

Yazarımız : Adsız Tarih : 3 Ekim 2012 Çarşamba

Blogger Sayfa Altında Sabit Duran Sosyal Paylaşım Butonları
Blogger Sayfa Altında Sabit Duran Sosyal Paylaşım Butonları
Blogger Eklentileri  kuşağında sizler için sayfa altında her zaman sabit duran ve üzerine geldiğinizde hareketlenen sosyal paylaşım butonları eklentisini paylaşmak istiyorum.Özellikle kullanıcıların dikkatini çekmek isteyen Blogger sahipleri için ideal bir Blogger eklentisi.

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 ]]></b:skin> kodunu buluyoruz.
3 ) </head> 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQ4ZvxQTUBm5MBm4egVKXQqH6sl8AT9zgJC-T10pfvUCzXnI0PKBbVyfka_61HeejGVMiBYhcPacFJN4eVJkTagMrEbvb0enMiud6pOq0WntJ5ULFO_2E0_6pBlFiL_w4i6aadfo98Zg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQ4ZvxQTUBm5MBm4egVKXQqH6sl8AT9zgJC-T10pfvUCzXnI0PKBbVyfka_61HeejGVMiBYhcPacFJN4eVJkTagMrEbvb0enMiud6pOq0WntJ5ULFO_2E0_6pBlFiL_w4i6aadfo98Zg/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 </head> kodunu buluyoruz.
2 ) </head> kodunun öncesine aşağıdaki  Blogger Sayfa Altında Sabit Duran Menü kod dizinini ekliyoruz.


 <script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>
 <script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.tipsy.js"></script>

 <script type="text/javascript">
  // Place all Javascript code here

  $(document).ready(function(){
   $("a[rel=tipsy]").tipsy({fade: false, gravity: "s"});

    $("ul.mbl-dock li").each(function (type) {
        $(this).hover(function () {
          $(this).prev("li").addClass("nearby");
          $(this).next("li").addClass("nearby");
        },
        function () {
          $(this).prev("li").removeClass("nearby");
          $(this).next("li").removeClass("nearby");
        });
      });
  });
  
 </script>

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 .


<div id="mbldockwraps">
<div id="macWrap">  
<div class="cap left"></div>
<ul class="mbl-dock">
<li class="active">
<span>Ana Sayfa</span>
  <a href="http://www.bloggerdersleri.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYJ4WVKeM5lglA4SCwBbbILzpHpw7iDagPn8PfJ1RIQrx0gXwOgIGKPVwlWXVxsDelMCdrzwyKWUOL2q87hSO1uOoxLGrS2v2Yyo-MLcf-k-osXHJqroY8Fsg-_3woc_Fd_myGle8VjU/s1600/MBL_home.png" /></a>
   </li>
   <li>
   
<span>İletişim</span>
   <a href="http://www.bloggerdersleri.com/p/iletisim.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3l911kGzWO7d89eszFKvMs7UASOn2Nq9Tuf5NYE0ueAABSia-gVPG6TxpyXrvZeDhIw75igtnArtYgtAua4yRfyY55suV0iQnlT27HnlFDzndo-mZPOuRokIuRumIILN31badoamKloY/s1600/MBL_contact.png" /></a>
 </li>
 <li>
 
<span>Hakkında</span>
 <a href="http://www.bloggerdersleri.com/p/blogger-dersleri-site-icerigi.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg611IEr1x5NoBfA1390RQg82uOJ0badvKXaiVJqQR8WRHQoggis1BfVHFjsr8H6KSncIYWo3-a0WXbju5VAY3zrgfgo452blx2KKA6y4zC9Nqc1aPqryqix5OyH_p1kTM6MT47ESOqNSM/s1600/MBL_about.png" /></a>
 </li>
 <li>
     
<span>Site İçeriği</span>
 <a href="http://www.bloggerdersleri.com/p/blogger-dersleri-site-icerigi.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmU8KtxX4K7k6Hn9UH0WOgh8RUqej25DMd6QVk0RfK1N0guhaDfwkH66DneG35e2urEX__YmFqePTOJF27qrWcLmMn5u6iBNnn14Fr4MYoGflQdYrheAzndw3mAfAkP6Jmic46l0jbp7Q/s1600/MBL_search.png" /></a>
 </li>
 <li>
     
<span>RSS</span>
 <a href="http://feeds.feedburner.com/bloggerdersleri/MOiP"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0y5e13MiyBzmmAHy4ThD1NqWN0NpvIXqP4PUomO2aVA5w5fkJ0g9FegMaz17K6gPIQBdtFyQVKb9YVHwjtiCMpEs23SLLi13nJvpeKfJeVZcNGAwqvw6Cizp4WOyEJk3iNofxxzOxkI/s1600/MBL_rss.png" /></a>
 </li>
 <li>
<span>Blogger</span>
 <a href="http://www.blogger.com/profile/3635639306019249049"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBFp7u3A3S00Tv4_4mt1dCfpHK4Li-Pgpi9PHe45MG-F5B3dHb8eyXN6sqmjwrO923HR1g3Uu0J3RoiJ8uO1MbiBLkUV1ibsWKAYRP8i6cy7yXTC4-8tT2osWzDuo95Q4Zgsh9tcdlazk/s1600/MBL_blogger.png" /></a>
 </li>
 <li>
 
<span>PAGE</span>
 <a href="https://www.facebook.com/BloggerDersleri"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2f0LjUIWKZwqqyitOz8aMtj3QmBnpJ9Qn82NP0xIZ6Dixbl8FWn2Pm5R_tIsnHgUNM34wBsBp9wzzcdQl5OPHV2iHdVAAdKXK7ZIctq1SBH1mASrYCL-u7RWqBD2sOufA_TEtk2zcbP8/s1600/MBL_FB.png" /></a>
 </li>
 <li>
 
<span>Twitter</span>
 <a href="https://twitter.com/Bloggerblog_"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivgP0feWiB2xUWNIRyL97X7XyWmGH9d97NWLWiZxeswIvwfTy9mPEAd8yP1CoeP0nMmzCI92JThlGbQLH2OiO9Cq2x24vHiS6jjW-3N4NMSTl7vB3quYazWo4SJwD9gQ-1jB8ZlUnnnKI/s1600/MBL_Twitter.png" /></a>
 </li>
 <li>
 
 <span>Pin IT</span>
 <a href="http://pinterest.com/atolyye/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkcpxzP9YAOvXE7vARYltVwgcrX9Yt2rNT49Sgj2Tb-SZR7Wx538IzOfHwvOZqgYLi1UyEhifYkBB2a63ENFljzCYO_0bC5_m3OC-h75Y1_RhZlXrZGgIzqLr-mnQGAI043Zp6_fs9_Q/s1600/MBL_pin.png" /></a>
 </li>
 <li>
 
 <span>Google</span>
 <a href="https://plus.google.com/u/0/106374439082237286396"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVsKwJubBeTDCH3OIedYs-ikURYwsAZ486BRYUAqPjAk64fSo4iP5TtwoTe2Q6JNXhgbEMfooLpWB6ZdJ6-dZlTEHbYfUG-m33jBD18QpUCQpbnCPJlzoSZhBXefWLqdYFX7MkvtPPLjM/s1600/MBL_googleplus.png" /></a>
 </li>
 </ul>
 </div>
 </div>

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ı >> 



0 yorum:

Yorum Gönder