12 Mayıs 2014 Pazartesi

Jquery ile Önceki-Sonraki Yazı Baslıkları

Merhaba arkadaşlar bugün sizlere arşivime aldığım bir konuyu paylaşacağım.Bu konunun daha doğrusu eklentinin ilk olarak hiç bir hileci tarafı yoktur.Bu eklenti kullanıcının dikkatini çekecek bir şekilde yapılmıştır.Blogger için göz yormayan zarif bir eklentidir.Bu eklenti bazı ovallıklardan ve hoverliklerden geçmiştir.Ayrıca çok faydalı bir eklentidir.Eskiden kullandığımız önceki sonraki butonları yerine yeni butonlar geliyor.

Blogger
Şablon
Htmlyi Düzenle
Bu Kodu ctrl+f Yardımı İle "]]></b:skin>" Kodunu Aratın
Vereceğim Kodları Aradığınız Kodun Üzerine Ekleyiniz.

/*################MBT Pager ##########################*/
.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;} 
.mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;} 
.mbt-pager li.next a { padding-left: 24px; }
.mbt-pager li.previous { 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;}

Yazı Rengini Değiştirmek İçin Kod İçerisinde "background:#333333;" Ve Yazı Rengini Düzenlemek İçin "color: #ffffff;" Bulunuz Ve Değiştiriniz.
Şimdi ctrl+f Yardımı İle "<head>" Kodunu Aratın.
Vereceğim Kodları Aradığınız Kodun Altına Ekleyiniz.

Ardından Tekrar ctrl+f Yardımı İle "<data:post.body/>"
Bu Kodun Hemen Altına Aşağıdaki Kodu Ekleyin.

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='mbt-pager'>
<li class='next'> 
<b:if cond='data:newerPageUrl'> 
<a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/> 
<b:else/> 
<a rel='next'>Next You are viewing Most Recent Post</a> 
</b:if> 
</li>
<li class='previous'> 
<b:if cond='data:olderPageUrl'> 
<a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/> 
<b:else/> 
<a rel='previous'>Previous You are viewing Last Post</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('Sonraki '+$(data).find('.post h3.post-title').text()+''); 
 },"html"); 
 $.get(olderLink.attr('href'), function (data2) { 
 olderLink.html('Önceki '+$(data2).find('.post h3.post-title').text()+''); 
 },"html"); 
})(jQuery); 
//]]> 
</script>
 </b:if></b:if>

2 yorum:

Furkan YURDAKUL12 Mayıs 2014 08:02
aslında jquery'e gerek yok fakat başarılı bir çalışma teşekkürler
YanıtlaSil
Yanıtlar

Yorum ekle

Son Yazılar

Popüler

Arşivim

Yorum

İletişim Formu

Sponsor

12 Mayıs 2014 Pazartesi

Jquery ile Önceki-Sonraki Yazı Baslıkları

2 yorum:

Ivır Zıvır

Hakkımızda

Destek Ekipi