 |
| 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/AVvXsEgoK6a6INGNbT4QiMwpyMGRjVuoKl4hC3TA_qg32V7SBTSH_jHHYGF3_iOeHvAaSmAPaR2Q1JmgknGSj5tJiiR3vGC6Yl_H-U6MTg7ZpAvZVNImthBGe8oTPfNQUXpZior38VeVcFECyXA/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/AVvXsEgoK6a6INGNbT4QiMwpyMGRjVuoKl4hC3TA_qg32V7SBTSH_jHHYGF3_iOeHvAaSmAPaR2Q1JmgknGSj5tJiiR3vGC6Yl_H-U6MTg7ZpAvZVNImthBGe8oTPfNQUXpZior38VeVcFECyXA/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/AVvXsEjCobnubbGDw8YmNhnNUQvCpNOZPULvJN5bdNcWpqS2crvRn3UhVJ-eb2NWKDTUi8q4vHRFiM4iKLgJv5sklCDcQxOYc-h7YNsNLxUiDdQVmsAg0MU5gcRva8BGZLu6ihybk84Bv2wofSs/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/AVvXsEjNMCzlU6jTIHQlia97r85NJ981O-Q4r3oMJPsqmlmvPVc0pX5yUbo79LvW3LPUzJ14pqvwWYBZbqCiLVK0dZbfAZJThBlcVC1IKzlAuUOedgOtBqnkHDFyQAaVRFxfwzt2ya5c2n7Jvmc/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/AVvXsEh2vhTHgVCUEsq5eXE8_qbDedOjAh6lnIKtTxCv4o_Ah1V6hmHsCMeR4ZvyXqgI1lTZdwjktHvez9CTZG1fbqaef0tPXbMPRN6sAv1FJp9wFLHdYUHIze0ZB0xuyytCwrzj4DSS0wtG4ZE/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/AVvXsEiJbqiPUvZ3hLwsnGT5k8nLNfkB8CaSiqhlIxVXFoC5frpDX6fZ7xkEp74qFO87Vw8U3qnCrJBPHbDLiAwS4HZES2SOxzp4Ouj0J9AWyPdy7CD0AulyQ-7xE9a7cqpXUmjECOWu-19rQK4/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/AVvXsEiKqdSsmtPG1XfeooODd93qSuzPaEsu8NdohrTwPzS8BCMzzLdQkxMYmYwtobeJPyEvwCVH4j9y8oN5B-OZ3uKMe1r1tjvbEqHuikvIeqVU1n_GJ2pWoKUVCI1sxFRAHKIEXI3vXOA3SHA/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/AVvXsEiQxb2C5n4iLBFa2SbZjtmaguYPUDshXIqppJPT3EjoTAv53Ni2a_Uza3vDme0UJXcCTXC2TgJvPbkj4oc_evvPp9TbKAHAn3A6VxWXr9dUW6oI5FXAGXZ8ZVwYH7WYk0us7fxrw7YYnNs/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/AVvXsEiH2gLZd1YwkM2Cg4SbbpUCmzgQ5Ti5p4BDF449uuFTe_cKaF0Vr-dIzZl8Zklqq2bEl_c4BkQ_jJIj8G0_ZgnaviRZmWFpwCFFAgGM_X6TbAUYZeLncfQbKz8CwRB6Aq8JCMfhl6160eE/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/AVvXsEgo9Lf8uVk6xaUJWVP-Th7Xcs_G9iIBdnza8zm711nQi8SsrN3lDQPcOP3B43tHCiu_VBvRiccx51ymt1THJwYRhecjdCAZBM0v73UHEhObmaJtoZIqp9acZGu3d7L4Gw7zMi18YgOAhgM/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/AVvXsEjJPrfdeeOo6_y6Tr4li6OBMX9Xt64W4EHcYn49AyYvgvj3UU5Pl4FeBsy7sdXvJBeomZrNpyQ7sQGQR2ljO227g6GVGouvraNb9vqnnGRy6O6ugzyy_fruHJBZkGBXJrrFe5sZ8X8PvjA/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/AVvXsEhSpEL5BpiLrTR0MMFn8BnK7aNrHLNNU7Pttaaeh8xUry-HeChB_i2H4vkIvLBBOg1UflT6RcshsgVAMl0ZonOxIFMy4UOE0XXUHFsJPtUuaUGxgzW2timIZEdiMffjY-aCi5qtzjSq6Ck/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ı >>
Yorum Gönder