27 Kasım 2013 Çarşamba

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

Yazar kerem yasar Konu Zamanı 27.11.13 Yorum Yok

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/AVvXsEj3-qx1zgIXBc8aMy_tcnkSshY911yM8MTmmCyIvpOroCfrLLWcDvtePedy10ktOJF9h5kYvwZ7PrrvMBajSGt2TKhU9-M7B5lCoP8qc_tCA2A0b3b2HVIsjoAxdRis51zUbY6r1Z1YiTo/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/AVvXsEj3-qx1zgIXBc8aMy_tcnkSshY911yM8MTmmCyIvpOroCfrLLWcDvtePedy10ktOJF9h5kYvwZ7PrrvMBajSGt2TKhU9-M7B5lCoP8qc_tCA2A0b3b2HVIsjoAxdRis51zUbY6r1Z1YiTo/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/AVvXsEjvQ4CfHvGAh_WeBqFZsFNAlUGL5Sj8lGvMeD5OXam-ZNaT_X9WhUbBoi66Pe7zdLwsHWrgy9VBh7iCLrXZYa6JlsqBb2DnQoerFFYIX03WrIJfunaBsihCtZPTz_aIxST_fR8w1_FBtng/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/AVvXsEjkEgHpH5gUbNVzuS4lpWKIZz94zO1To-tiWJsw0Qn25M4ikJM_TCEYIeaCevJ465oCyOzS1cKscjzePAVithuT0_sT9FE9YTynJSkBYZlC9XR67qZ8vvJqLyRwmlG6yKLFy9On2u3eUCg/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/AVvXsEhdSAaLtOzEMshzqnSOOa81Rz8roTY1EtwHOBXvf7mkRGahNTq9R3mKJegUQ1lJVzMu1XrRxz0ae24l84U73gtp7dvVFIK0Djzo4M3gXZd6z7kaCwWcpJ6n3RUMqI24ztKNTpEplAe8gxk/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/AVvXsEjKawB3IY16zwhCTsRtpmxYFlck-CJzLoUE1NtijxfUFQEQw9Q3lLgr83L52zeoe7PHS90PSWdAgoR5xu5Sc_CExE_8dprGGUS-N2_12T_zpfhA38GIRoTAeuUweIbnqGASbwOngfdUjJk/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/AVvXsEj6f8VFXXHBfUKhqh_mcINXKGZ9QKxUDGDCoZVwhgIUpvhUqW6jouWt-0wcjMu6UB1S-xEgz1yT68x_l3IOusnDYgLkoOisplOk7fQjfyGveYRqbjQ5ovcWZXBfkHSznbR3xy_xRnvxIu0/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/AVvXsEjJUDqa9Z32Njs1fAdGPQ_mTmvmzuqGdthKc1Av1ql6XLGfUgpsjPaLrf5LpknjuD3ACiBtf7pN477To8vERr5eXN7EloRt6NBr4DwoeqB8O79kY8gK8qJ9JQbw9r7JK3OzgD00F5ojof0/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/AVvXsEhPoRNxfKHEyNNf6MfJG5POXktGG8bWZnfRxipq3yqXUKLAE3rmqqkcfqlUNQ9R24zc6QgdYOQ5kPa7SgqwAezSi7DJdb6aTAHArCIJ6LN2oCKnjzYo2bLJQDLHEBdZCMeCotl-AvlP6WM/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/AVvXsEhJoVHY7ak_G7pB095GSrx3hpwk7aCNuw_KEpSAn5Ixk5H6jAmOqd_oOvAQ5z-xh4dlSmfT0Cm0KYcdF719SF9yEgn3RYumtapCCmk70cTNAWiIWa6_nUu2ibJL1M8IO-04Dm79viO3foM/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/AVvXsEg4TllvAVvXHddjDlm8p3_4hbJu57D0Go-c89AlHbINxkICpVyw8_e_8i1W-8ojMWYM63XT8vdXHfLppIA2CKxRNFyylmSYdpaEHvn7ZV6oAYFKof_YSEMyGO0xmUAnG1oTPJAKjkpnv_c/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/AVvXsEgFTfSvzBLH_gwey_HDJCgyqh2Bjm_2L0aN5RaW_LAkRtte9qHl_iRViDfoKJE5FiMLcS0RQz7iPnwBPpYudMLeuBDWyGovMjFCwx5FMexDMZwntbodY_eHihLeFpOV7GC5PC1Ym7wRG78/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. 
Kategori:

0 yorum:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)
Domain Domain