Yazılarınızın sonunda önceki yayın sonraki yayın sitede gezinme açısından oldukça önemlidir. Bu eklentiyi adımları takip ederek oldukça şık bir şekilde bloğunuza kolayca ekleyebilirsiniz.
Demo için bu sitenin en aşağı tarafına bakınız. Kendi kullandığım eklentidir.
1 - Blogger sayfasından --> Şablon kısmına tıklayınız.
2 - Her ihtimale karşı sağ üst köşeden yedek almanızı tavsiye ediyoruz.
3 - HTML'yi düzenle kısmına basınız.
4 - HTML kısmında ]]></b:skin> arayınız ve onun tam üstüne aşağıdaki kodu yapıştırınız.
color: #ffffff burada mouse ile üzerine geldiğimiz yazının rengini değiştirebiliriz.
height:114px bu iki değer ile alanın boyunu değiştirebilirsiniz.
5 - <head> kısmını arayınız ve tam altına aşağıdaki kodu yapıştırınız.
6 - <data:post.body/> kısmını arayınız. (Bu koddan bir kaç tane olabilmektedir. HTML kısmında en alttaki kodu deneyiniz. Eğer işe yaramazsa diğerlerini deneme yoluyla deneyin ve kesinlikle işe yaraması lazım) Daha sonra tam altına aşağıdaki kodu yapıştırınız.
Eklentimizi başarıyla oluşturmak olduk.
----------------------------------------------------------------------------------------------------------------------------------------------------
Varsayılan Önceki/Sonraki butonunu kaldırma
2 - Her ihtimale karşı sağ üst köşeden yedek almanızı tavsiye ediyoruz.
3 - HTML'yi düzenle kısmına basınız.
4 - HTML kısmında ]]></b:skin> arayınız ve onun tam üstüne aşağıdaki kodu yapıştırınız.
.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;}background:#333333 burada mouse ile üzerine geldiğimiz alanın rengini değiştirebiliriz.
.mbt-pager li.next { height:114px; float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }
.mbt-pager li.previous { height:114px; margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:none;
}
.mbt-pager li.previous a { padding-right: 24px; }
.mbt-pager li.next:hover, .mbt-pager li.previous:hover {background:#333333; }
.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.mbt-pager li i { color: #ccc; font-size: 18px; }
.mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.mbt-pager li a span { font-size: 15px; color: #666; font-family:oswald,Helvetica, arial; margin:0px;}
.mbt-pager li a:hover span,
.mbt-pager li a:hover i { color: #ffffff; }
.mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.mbt-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }
.mbt-pager li.next i, .mbt-pager li.previous i ,
.mbt-pager li.next, .mbt-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}
color: #ffffff burada mouse ile üzerine geldiğimiz yazının rengini değiştirebiliriz.
height:114px bu iki değer ile alanın boyunu değiştirebilirsiniz.
5 - <head> kısmını arayınız ve tam altına aşağıdaki kodu yapıştırınız.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>Not: Eğer şablonunuza daha önceden jquery kütüphanesi eklediyseniz kalın yazılı kodu siliniz.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
6 - <data:post.body/> kısmını arayınız. (Bu koddan bir kaç tane olabilmektedir. HTML kısmında en alttaki kodu deneyiniz. Eğer işe yaramazsa diğerlerini deneme yoluyla deneyin ve kesinlikle işe yaraması lazım) Daha sonra tam altına aşağıdaki kodu yapıştırınız.
<b:if cond='data:blog.pageType == "item"'>Vurgulu kısımdaki kelimeleri değiştirerek istediğiniz gibi modifiye edebilirsiniz.
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='mbt-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' />
<b:else/>
<i class='fa fa-chevron-right'/><a ><strong>Sonraki</strong> <span>En yeni yazıyı görüntülüyorsunuz</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' />
<b:else/>
<i class='fa fa-chevron-left'/><a ><strong>Önceki</strong> <span>En eski yazıyı görüntülüyorsunuz</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) { newerLink.html('<strong>Sonraki</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Önceki</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>
Eklentimizi başarıyla oluşturmak olduk.
----------------------------------------------------------------------------------------------------------------------------------------------------
Varsayılan Önceki/Sonraki butonunu kaldırma
----------------------------------------------------------------------------------------------------------------------------------------------------
Şimdi bloggerde ki varsayılan Önceki/Sonraki butonları kaldıralım
1 - <b:includable id='nextprev'> kısmını arayınız.
Şimdi bloggerde ki varsayılan Önceki/Sonraki butonları kaldıralım
1 - <b:includable id='nextprev'> kısmını arayınız.
2 - HTML kısmında aşağıdaki gibi kodları göreceksiniz. Buna "kod yığını" adı verelim.
div class='blog-pager' id='blog-pager'>3 - Bu kodun tam üstüne ve tam aşağısına şekildeki gibi kodları ekleyelim.
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
<b:if cond='data:blog.pageType != "item"'>Bu varsayılan buton sadece yazı sayfalarınızdan kaldırıldı. Eğer bu varsayılan butonları her yerden kaldırmak istiyorsanız basitçe "kod yığını" kısmını siliniz.
<b:if cond='data:blog.pageType != "static_page"'>
KOD YIĞINI
</b:if></b:if>
ben yapamadım reis dediğin gibi kodları ekledim olmadı
YanıtlaSil