BLOGGER EKLENTİSİ:Öne Çıkan yayınlar

Ara ara blogumda değişiklik yaparım.Bugünde dersten vakit bulduğumda değişiklik olsun diye bloguma ayıracağım demiştim.Bugün fark ettiyseniz-ki fark edilmeyecek gibi değil- Son gönderiler için düzenleme yaptım.Son dönemlerde çok fazla karşıma çıkmıştı.Yapıp yapmamak konusunda kararsızdım çünkü bir kez denedim ve bloguma yakışmadığını düşündüm.Ama bugün biraz düzenlemeyle çok güzel bir şeyler ortaya çıkardım.

Üzerine fare ile tıklamak için geldiğinizde o gönderinin başlığını gösteriyor size.

Peki ne işe yarıyor diye düşünebilirsiniz:

• Yayınları menünün hemen altında ya da üstünde gösteriyor
• Blogunuzu ziyarete gelenler aşağıya gitmeden de yayınlarınızı görebilir
• Yayınlarınıza farklı bir hava katar
• Blogunuza görsellik katar
• Otomatik olarak gönderileriniz eklentide ki yerini alır.

Ben kendi blogum için 6 tane gönderinin yukarıda yer almasını yeterli buldum.Siz bu sayıyı arttırabilir veya azaltabilirsiniz.Tüm bunları yapmadan önce blog temanızı yedeklemenizde fayda var.
Eklemek için:Blogger panelinizi açın.Yerleşim kısmına girin ve gadget ekleye tıklayın.HTML/Javascript ekleyin ve kodu yapıştırın

ŞEKİL-1

Kareli olanı yapmak istiyorsanız aşağıdaki kodu,blogunuzda olmasını istediğiniz yere ekleyin.

<div class='widget-content'> <style type="text/css"> /* CSS -Öne Çıkan yazılar */ .bsrp-gallery{ width:100%; clear:both; margin-left:-15px; } .bsrp-gallery:after { display: table; clear: both; } .bsrp-gallery .bs-item a { position: relative; float:left; margin: 0 0 0 15px; text-decoration:none; } .bsrp-gallery .bs-item .ptitle { background: #FA5882; /*--Fareyle üzerine gelindiğinde oluşan arkaplan resmi --*/ display: block; clear: left; font-size: 13px; font-family: arial; text-transform:uppercase; /*--Post üzerindeki metin--*/ line-height:1.3em; font-weight:300; height: 48%; width:79%; position: absolute; bottom:0%; text-align: center; margin:0 0 14px 13px; padding:60px 10px 0px 0px; color:#000000; /*--Yazı Rengi--*/ word-wrap: break-word; overflow:hidden; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; } .bsrp-gallery .bs-item .ptitle:hover { filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity:0.9; opacity:0.9; -webkit-transition: 0.6s ease-in; -moz-transition: 0.6s ease-in; -o-transition: 0.6s ease-in; } .bsrp-gallery a img { background: #fff; float: left; } .bsrp-gallery a:hover img { } /* CSS-post */ </style> <script> function bsrpGallery(root) { var entries = root.feed.entry || []; var html = ['<div class="bsrp-gallery nopin" title=""> ']; for (var i = 0; i < entries.length; ++i) { var post = entries[i]; var postTitle = post.title.$t; var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : ''; var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c'); var links = post.link || []; for (var j = 0; j < links.length; ++j) { if (links[j].rel == 'alternate') break; } var postUrl = links[j].href; var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>'; var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : ''; var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>'; html.push('<div class="bs-item"> ', item, '</div> '); } html.push('</div> '); document.write(html.join("")); } hoje = new Date() numposts = 1; var bsrpg_thumbSize = 175; var bsrpg_showTitle = true; document.write("<script src=\"https://nurovicci.blogspot.com/feeds/posts/default?start-index="+numposts+"&max-results=6&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script> </div> <div class='clear'> </div>

ŞEKİL-2

Yuvarlak olanı yapmak istiyorsanız,olmasını istediğiniz yere aşağıdaki kodu ekleyin.

<div class='widget-content'> <style type="text/css"> /* CSS -Öne çıkan yazılar */ .bsrp-gallery { width:100%; clear:both; margin-left:-15px; } .bsrp-gallery:after { display: table; clear: both; } .bsrp-gallery .bs-item a { position: relative; float:left; margin: 0 0 0 15px; text-decoration:none; border-radius:130px; /*--Görüntü yuvarlama derecesi--*/ -moz-border-radius:130px; /*--Görüntü yuvarlama derecesi--*/ -webkit-border-radius:130px;/*--Görüntü yuvarlama derecesi--*/ } .bsrp-gallery .bs-item .ptitle { background: #FA5882; /*--Fareyle üzerine gelindiğinde oluşan arkaplan rengi --*/ display: block; clear: left; font-size: 13px; font-family: arial; text-transform:uppercase; /*--Post üzerindeki metin--*/ line-height:1.3em; font-weight:300; height: 48%; /*--Resim yazısının yüksekliği --*/ width:79%; /*--Resim yazısının genişliği --*/ position: absolute; bottom:0%; text-align: center; margin:0 0 14px 13px; padding:60px 10px 20px 10px; color:#000000; /*--Yazı rengi--*/ word-wrap: break-word; overflow:hidden; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; border-radius:130px; -moz-border-radius:130px; -webkit-border-radius:130px; } .bsrp-gallery .bs-item .ptitle:hover { filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity:0.9; opacity:0.9; border-radius:130px; -moz-border-radius:130px; -webkit-border-radius:130px; -webkit-transition: 0.6s ease-in; -moz-transition: 0.6s ease-in; -o-transition: 0.6s ease-in; } .bsrp-gallery a img { background: #fff; float: left; border-radius:130px; -moz-border-radius:130px; -webkit-border-radius:130px; } .bsrp-gallery a:hover img { border-radius:130px; /*--Fare üzerindeyken arkaplanın yuvarlaklık derecesini ayarlar--*/ -moz-border-radius:130px; /*--Fare üzerindeyken arkaplanın yuvarlaklık derecesini ayarlar --*/ -webkit-border-radius:130px; /*--Fare üzerindeyken arkaplanın yuvarlaklık derecesini ayarlar --*/ } /* CSS post */ </style> <script> function bsrpGallery(root) { var entries = root.feed.entry || []; var html = ['<div class="bsrp-gallery nopin" title=""> ']; for (var i = 0; i < entries.length; ++i) { var post = entries[i]; var postTitle = post.title.$t; var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : ''; var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c'); var links = post.link || []; for (var j = 0; j < links.length; ++j) { if (links[j].rel == 'alternate') break; } var postUrl = links[j].href; var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>'; var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : ''; var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>'; html.push('<div class="bs-item"> ', item, '</div> '); } html.push('</div> '); document.write(html.join("")); } hoje = new Date() numposts = 1; var bsrpg_thumbSize = 200; /*--Bir gönderinin boyutu --*/ var bsrpg_showTitle = true; document.write("<script src=\"https://nurovicci.blogspot.com/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script> </div> <div class='clear'> </div>

Bilmeniz gereken birkaç şey:
Her iki kodda da aşağılarda benim blog adresim var.Kodun üzerinde gösteremedim maalesef.Siz orayı kendinizin blog adresiyle değiştirin.Adresin hemen altında şöylesi bir kod yazıyor:

start-index="+numposts+"&max-results=4&orderby=published&alt=json-in

Bu kısımda ki  4 sayısı slaytta gösterilecek olan yazılarınızın sayısıdır.Değiştirebilirsiniz.
hemen üstte şu şekilde bir kod var:

var bsrpg_thumbSize = 200;  /*--Bir gönderinin boyutu --*/

Anlayacağınız bir gönderinizin ne kadar yer kaplayacağınız.Unutmadan gösterilecek yazınızın sayısını 5-6vs. yaparsanız bu kısmı düşürün yoksa sayfanıza sığmaz.
Tüm bunları yapmanıza rağmen olmadıysa aşağıdaki kodu HTML sayfanızdan aratınca bulacaksınız.İşeretlediğim yerleri silin ve böyle deneyin.Unutmayın kendi blog adresinizi, benim blog adresimin yazdığı yerle değiştirmezseniz kod çalışmaz.