Slider Şeklinde Duyarlı Son Yazılar Eklentisi

Temmuz 25, 2015
Duyarli Son Yazilar

Blogger bloğunuzun ana sayfasında yazıların ve sidebarın tam üzerinde oldukça şık duran mobil ve tüm ekranlara duyarlı son yazılar eklentisini kullanmak istiyorsanız bu yazı tam size göre.

Bu son yazılar eklentisi sürekli sabit bir şekilde atıyorum son 5 yazıyı göstermiyor. Sayfa her yenilendiğinde ve belli bir süre içerisinde gösterilen yazılar değişiyor. Böylece çok önceden yazmış olduğunuz yazınız ana sayfada gösterilme imkanı sağlıyor. Eski yazılarınızı güncel tutmak adına faydalı bir eklenti diye düşünüyorum.

İnternette son yazılar eklentisi, blogger son yazılar widgetı, otomatik son yazılar sliderı diye başlıkları araştırdım. Pek çok eklenti buldum ama benim tam aradığım gibi bir slider karşıma çıkmadı. Ben en iyi bloglar için uğraşıyorum. Sonunda yabancı bir siteden çok güzel ve şık duran bir slayt şeklinde otomatik son yazılar eklentisine rastladım. Bunu bloğumuza nasıl uygulayacağız bugün bunu anlatacağım. Sözü çok uzatmadan icraata geçelim :)

1. İlk olarak blogger panelimizden Şablon-HTML'yi Düzenle yolunu takip ederek ]]></b:skin> kodunu buluyoruz. Bu kodun üst satırına aşağıdaki CSS kodlarımızı kopyalayıp yapıştırıyoruz.
/* CSS Duyarlı Son Yazılar Eklentisi http://blogbakkali.blogspot.com.tr/ */
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

2. Şimdi </body> kodunu buluyoruz ve hemen üzerine aşağıdaki jawascript kodlarımızı ekliyoruz.

<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"BLOG URLNİZ",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

3. Şimdi son yazılarımızı bloğumuzun neresinde ve nasıl göstereceğiz bunu belirlemeye geldi. 

4. Aşğıdaki kodları ise bloğumuzun content-wrapper kısmından önce yapıştırıyoruz. Yani üst menümüz var ya ana sayfa, iletişim falan yazan kısım işte üst menü kodlarının bittiği yere yapıştırıyoruz. Kodlar içinde ana sayfa diye aratsak bile bu kısmı bulabiliriz. 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>
Şablonu kaydediyoruz. 

İkinci Yol:
5. Böyle yapmak zor geliyorsa bir de şu ikinci yolu deneyin. Sadece gadget olarakta son yazılar sliderını bloğa uygulayabilirsiniz. Yani şöyle:

6. Blogger panelimizden Yerleşim-Gadget Ekle-HTML/Jawascript yolunu takip ederek aşağıdaki kodları gadget olarak ekleyin. Eklediğiniz gadgetı sürükleyerek Blog Kayıtlarının üzerine getirin Düznlemeyi Kaydedin. Bu şekilde yapınca son yazılar bloğunuzun ana sayfasında yazıların tam üzerinde görünecektir. 

<style>
/* CSS Slider Son Yazılar Eklentisi http://blogbakkali.blogspot.com.tr/ */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"BLOG URLNİZ",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
Üstteki kodlarda içerisinde kırmızı ile boyadığım BLOG URL yeine kendi bloğunuzun adresini ekleyin. 8: Gösterilecek yazı sayısı; 500: Gösterilen yazıların görsel boyunu temsil ediyor.

7. İşlemler bu kadar. Bloğunuzu açın ve son yazılar eklentinizin keyfine varın. Anlatacaklarım bu kadar. Sizde bloğunuzdaki eski yazılarınızı karışık bir şekilde ana sayfada göstermek istiyorsanız bu eklentiyi kaçırmayın. Ben açıklayıcı anlatamamış olabilirim. Anlamadığınız yerleri aşağıdaki yorum formundan sorabilirsiniz. İyi bloglamalar. Bloğumu izlemeyi unutmayın :)

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

12 Yorum
avatar

Çok teşekkürler, böyle bir slider zor bulunur.

Yanıtla
avatar

Merhaba, çok güzel bir paylaşım. Böyle birşey istiyordum ancak benim blogumda olmadı. Özel bir şablon kullandığım için olabilir mi? java olarak yükledim ama slaytın olması gereken yerde boşluk oluşuyor o yüzden kaldırmak zorunda kaldım. Ben kullanamadım ama çok güzel bir paylaşım olmuş. Teşekkürler. (www.miskokulubebekler.com)

Yanıtla
avatar

Temanızdaki başka kodlarla çakışıyor olabilir yoksa özel tema olmasıyla alakası yok. Birinci yolu deneyin olması lazım genelde herkeste oldu da :)

Yanıtla
avatar

Bunda da başarılı olamadım:)Sanırım bişeyi yanlış yapıyorum. Sonra tekrar deneyeceğim. Teşekkürler.

Yanıtla
avatar

bu slayt kodunu etiket bazlı ayarlayabilmemiz mümkün mü acaba? bu arda blogunuzu yeni keşfettim ama oldukça yararlı içerikler mevcut. artık sürekli takipteyim.

Yanıtla
avatar

Merhaba Murat Bey, Etiket bazlı ayarlamamız şuan için pek mümkün gözükmüyor :) Takibiniz için teşekkür ederim, faydalı olabiliyorsam ne mutlu bana.

Yanıtla
avatar

ellerıne kolllarına sağlık dostum

Yanıtla
avatar

Guzel bir site devamli takipteyim basarilarinizin devamini bekleriz

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔