 |
| 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 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/AVvXsEgoK0Q2cUV6WJgJAkn6Nsovkb4vDBDb-5Z5fUTdU36ipVqXQCJOr-81sJ_kt157-lNec0yzWQKsElpwbNZWFmeFXmHdWQfth4virMBVs_fVH0K1nrwPrFpY2FvjVawAHePlvecWrENqkhE/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/AVvXsEgoK0Q2cUV6WJgJAkn6Nsovkb4vDBDb-5Z5fUTdU36ipVqXQCJOr-81sJ_kt157-lNec0yzWQKsElpwbNZWFmeFXmHdWQfth4virMBVs_fVH0K1nrwPrFpY2FvjVawAHePlvecWrENqkhE/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/AVvXsEiYMTb79dKYNIdPG29RjSzoVmb3UOm6Ka865vNawjOMsBw08fJqV0lBTkotstII2o1P-YDalYlicN2WOwADnh0P0B7kcmiIyiLQCm-3A9yquNDCMGTw42H7LinLKHhRld_OhmLCY9uQEt0/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/AVvXsEjmP24GMZ4AR_A0QxQ8SzhOfmcjEmAFENJBCCzUP5QQE98qzz2Lv4CzgseR_HAniHXAY5e_02nMtTLW9dLfFwzMBm4Emnjy-Z1DRgU6I_tblJivN2dESqM-qr3ViD9mQ3bY7AIau-v2weo/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/AVvXsEigGcrqrfMI3IU3M2TUt5VYj-HvZHQrFxHGFENPFpV1e_qj9XTaIEnuV1JVHQ8bbSXyBQGMDKmjJe-NNlVCWl1OvBN4BgueY-_95Us1PZdNaLBSlVATigIzK5r8iOiXQLJoJQm48mXWneU/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/AVvXsEhF6-IYyQsuLzjz1W_Nf5JUzmPosfZjiIvw7lf_i7b7flDfvn9ygTY48aDKYcYsMlQ0foWAfwpregHNMH66rykMPi51Hzaw7pvTt8efE_HyhcA56UqdQAk8jIQcc0cy8Wu-lo3ALOxsuGg/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/AVvXsEjtwlZv-pSvrurcvUHDXosmMNJxyp9dasSYIdg7i99Iqd_98X9IhHyC6oAK8oOkzXkZVkoukA3KkcVL6DzEr9k2sMWTbSkI1dxvJnAMgRlKY4-km4AAnKCUyFKgAi6SBFNEgjF3464Er5k/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/AVvXsEi8rjYw8UuunGFKPClme-jOJQ1uqqJZe4Ykg-gZvifKDYWkMkoJmHrYXeQ-4BGsfXrJNjO8zDRC3J-CdOQMOB8Usapzx5OLNusiVvibP9y5dq4mLVNotfu50h59EWpSxid0B8DmNTpK_Lc/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/AVvXsEi-HywkBPDihwiDhXi5fmi2sIk2vvpHd_vdYh8qwPsy8FIKPppiXeXh3O36E-V-Ir9Zorhu6cftZrh46oEcZZQhx-96bsI-ScADN642Ky4bQNIMfbxO_XfSCdHvH2GZGQtRwUOhrGDtYLQ/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/AVvXsEgaGiC1-xltXjnO5f51kzRcweAsEGpqmL1wES_PFNNA6GcUbx9Pvt17leH9l6CHO_IsVsvzym0r9RBF3XmLH0Wex6oBDyVVDiRp2OHzuuJVvKaZpAKGpr8jUl5OwZ59OKZb1Mk8xutjDMs/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/AVvXsEhXGXaVFq8f0IuldQ2twX4qQfblULYb5-dowIa1SMnyi09XAYX0bPXnBnKxi173EQPaFSwmDOB15umIeyCy4nrcufzXK11ZpHzab3_vlGXUYVz3RsxI6f1MAz02jLvMFTtwyHd5FSKKdJU/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/AVvXsEgM1MqXGVhrLMSTL87fCBfD9FI5WRADc48iWhrVyG9usWFKiwehWWJNZTJy0bZExma89PEYfOPi7u1EIfmOEKbg8Q8kE6q-TNLQd8B6BmZyenC80V2dxdua-t4t7j8wx5Gt_-Djrt5hzrM/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.
0 yorum: