25 Aralık 2014

Blogger RSS Haber Şeridi Eklemek


Blog sahipleri okuyucularının diğer yazılarını okuyabilmeleri için dikkatlerini çekmeye çalışmaktadırlar. Okuyucuların dikkatini çekmek için kullanılan yöntemlerden bir tanesi ise haber şeridi kullanmaktır. Bir çok blog ya da web sitesinde yazı başlıklarının olduğu bir haber şeridi kullanılmaktadır. Ancak bir çok blog sahibi diğer yazılarının bulunduğu haber akışını kenar çubuğunda okuyucularına göstermek istemektedirler.

Klasik olarak kullanılan haber şeritlerini blogger kenar çubuğunda kullanıldığında istenildiği gibi bir görüntü elde etmek mümkün olmamaktadır. Bunun nedeni ise bu tür haber şeritlerinin yatay olarak kullanılmakta olmasıdır.

Blogger kenar çubuğunda bir RSS haber akşısı göstermek için bir kaç üçük özelleştirme ile mümkün olabilmektedir.

Blogger RSS haber şeridi eklemke için izlenilmesi gereken adımlar şu şekilde sıralanmaktadır. 

Adım 1 


Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle yolunu izlediğimizde karşımıza çıkan kod sayfasında CTRL+F kombinasyonu yardımıyla ]]></b:skin> kodunu aratıp buluyoruz. Bulduğumuz kodun hemen üzerine aşağıda bulunan CSS kodlarını kopyalayarak yapıştırıyoruz.

.MBL-container-header h1{font-weight:300; font-size:48px; text-align:center;}
.MBL-container-header h2{font-size:30px; text-align:center;}
overflow: hidden;
#MBLnewsticker1 ul { padding: 0px; } .MBLnewsticker { width: 100%; height: 440px;
text-align:center;
position: relative; padding: 0 5px; box-sizing: border-box; margin: 0 auto; } .MBLnewsticker>ul {
display: none;
padding: 0; margin: 0; list-style-type: none; position: relative; } .MBLnewsticker>ul>li { width: 100%;
position: absolute;
height: 100px; background: #FFF; position: absolute; overflow: hidden } .MBLnewsticker>ul>li>.MBL-content { top: 0;
.MBLnewsticker>ul>li>.MBL-content a {
bottom: 30px; left: 0; right: 0; box-sizing: border-box; padding: 5%; overflow: hidden; } text-decoration: none; }
left: 0;
.MBLnewsticker>ul>li>.MBL-content a:hover { text-decoration: underline; } .MBLnewsticker>ul>li>.MBL-info { position: absolute; bottom: 0; right: 0; height: 20px;
opacity: 0.2;
padding: 5px; border-top: solid 1px #DDD; } .MBLnewsticker>ul>li>.MBL-info a { display: inline-block; width: 20px; height: 20px; background: #0F0; cursor: pointer; }
background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) 0 0 no-repeat;
.MBLnewsticker>ul>li>.MBL-info a:hover { opacity: 1; } .MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-black { float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black {
background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) -40px 0 no-repeat;
background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) -20px 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-google-black { float: left; } .MBLnewsticker>ul>li>.MBL-info a.MBL-link-black {
float: left;
background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) -60px 0 no-repeat; float: right; } .MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white { background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) 0 0 no-repeat; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white {
background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) -60px 0 no-repeat;
background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) -20px 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-google-white { background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) -40px 0 no-repeat; float: left; } .MBLnewsticker>ul>li>.MBL-info a.MBL-link-white { float: right; } .MBLnewsticker>ul>li>.MBL-info span { position: absolute; left: 80px; right: 30px;
background: url(http://3.bp.blogspot.com/-lITqIhqOgXc/VJPESRoZK4I/AAAAAAAAFRM/MloiTyBZg8Y/s1600/arrows-black.png) bottom no-repeat;
text-align: center; opacity: 0.4; z-index: 0; font-size: 13px; cursor: default; } .MBLnewsticker>div { width: 50px; height: 30px; cursor: pointer; position: absolute; opacity: 0.3; } .MBLnewsticker>div:hover { opacity: 1; } .MBLnewsticker>div.MBL-top-arrow { top: 0; background: url(http://3.bp.blogspot.com/-lITqIhqOgXc/VJPESRoZK4I/AAAAAAAAFRM/MloiTyBZg8Y/s1600/arrows-black.png) top no-repeat; } .MBLnewsticker>div.MBL-bottom-arrow { bottom: 0; } .MBLnewsticker .MBL-top0 { -ms-transform: scale(0.80);
-webkit-transform: scale(1);
-webkit-transform: scale(0.85); transform: scale(0.85); opacity: 0.85; top: 0; z-index: 1; display: block; } .MBLnewsticker .MBL-top1 { -ms-transform: scale(0.87); -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.9; top: 20px; z-index: 2; display: block; } .MBLnewsticker .MBL-top2 { -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0.95; top: 45px; z-index: 3; display: block; } .MBLnewsticker .MBL-active { -ms-transform: scale(1);
transform: scale(0.85);
transform: scale(1); opacity: 1; top: 75px; z-index: 10; display: block; } .MBLnewsticker .MBL-bottom2 { -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0.95; top: 105px; z-index: 6; display: block; } .MBLnewsticker .MBL-bottom1 { -ms-transform: scale(0.87); -webkit-transform: scale(0.90); transform: scale(0.90); opacity: 0.9; top: 130px; z-index: 5; display: block; } .MBLnewsticker .MBL-bottom0 { -ms-transform: scale(0.80); -webkit-transform: scale(0.85);
-webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
opacity: 0.85; top: 150px; z-index: 4; display: block; } .MBL-easing2 { transition: .25s linear; -moz-transition: .25s linear; -webkit-transition: .25s linear; } .MBL-easing li { transition: .5s ease-out; -moz-transition: .5s ease-out; -webkit-transition: .5s ease-out; } .MBL-radius li { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .MBL-radius2 li { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .MBL-shadow li { -moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
}
box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3); } .MBL-shadow-big { -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important; -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;

Adım 2 


CSS kodlarını ekledikten sonra yine CTRL+F kombinasyonu ile kodunu </head> aratıp bulduktan sonra hemen üzerine aşağıda bulunan JavaScript kodlarını kopyalayarak yapıştırıyoruz.

<script type='text/javascript'>
/*<![CDATA[*/ (function(e) {
$.fn.MBLnewsticker = function(e) {
var t = { width: "100%",
timer: 3e3,
modulid: "MBLnewsticker", autoplay: true,
btnfacebook: true,
itemheight: 130, infobarvisible: true, btntwitter: true,
btnlinktarget: "_blank",
btngoogleplus: true, btnlinkbutton: true, pagecountvisible: true,
feedcount: 100
buttonstyle: "black", pagenavi: true, pagenavistyle: "black", feed: false, };
$(e.modulid + ">div").css({
var e = $.extend(t, e); return this.each(function() { function o() { function o() {
$(e.modulid + " ul li").eq(r[0]).addClass("MBL-top0");
left: ($(e.modulid).width() - 30) / 2 }) } function u() {
$(e.modulid + " ul li").eq(r[3]).addClass("MBL-active");
$(e.modulid + " ul li").eq(r[1]).addClass("MBL-top1"); $(e.modulid + " ul li").eq(r[2]).addClass("MBL-top2");
$(e.modulid + " ul li").eq(r[6]).addClass("MBL-bottom0")
$(e.modulid + " ul li").eq(r[4]).addClass("MBL-bottom2"); $(e.modulid + " ul li").eq(r[5]).addClass("MBL-bottom1"); } function a() {
}
t--; if (t < 0) t = n; l() } function f() { t++; if (t == n + 1) t = 0; l()
r[2] = n;
function l() { $(e.modulid + " ul li").attr("class", ""); if (t == 0) { r[0] = n - 2; r[1] = n - 1; r[3] = t;
r[2] = t - 1;
r[4] = t + 1; r[5] = t + 2; r[6] = t + 3 } else if (t == 1) { r[0] = n - 1; r[1] = n; r[3] = t;
r[3] = t;
r[4] = t + 1; r[5] = t + 2; r[6] = t + 3 } else if (t == 2) { r[0] = n; r[1] = t - 2; r[2] = t - 1;
r[3] = t;
r[4] = t + 1; r[5] = t + 2; r[6] = t + 3 } else if (t == n) { r[0] = n - 3; r[1] = n - 2; r[2] = n - 1; r[4] = 0;
r[5] = 0;
r[5] = 1; r[6] = 2 } else if (t == n - 1) { r[0] = n - 4; r[1] = n - 3; r[2] = n - 2; r[3] = t; r[4] = t + 1; r[6] = 1
r[0] = t - 3;
} else if (t == n - 2) { r[0] = n - 5; r[1] = n - 4; r[2] = n - 3; r[3] = t; r[4] = t + 1; r[5] = t + 2; r[6] = 0 } else { r[1] = t - 2;
background: e.itembgcolor,
r[2] = t - 1; r[3] = t; r[4] = t + 1; r[5] = t + 2; r[6] = t + 3 } u() } $(e.modulid + " ul li").css({ height: e.itemheight, border: "solid 1px " + e.bordercolor,
if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-facebook-' + e.buttonstyle + '"></a>';
color: e.titlecolor, "font-size": e.titlefontsize }); $(e.modulid + " ul li").each(function(t, r) { if (e.infobarvisible) { i = '<div class="MBL-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">';
if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-google-' + e.buttonstyle + '"></a>';
if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-twitter-' + e.buttonstyle + '"></a>'; if (e.pagecountvisible) i = i + "<span>" + ($(this).index() + 1) + " / " + (n + 1) + "</span>"; if (e.btnlinkbutton) i = i + '<a href="' + $(this).find(".MBL-content").attr("data-link") + '" class="MBL-easing2 MBL-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>';
window.open("http://www.facebook.com/sharer.php?u=" + encodeURIComponent($(this).attr("data-url")) + "&t=" + encodeURIComponent($(this).attr("data-text")), "sharer", "toolbar=0,status=0,width=626,height=436");
i = i + "</div>" } $(this).append(i) }); $(e.modulid + " ul li .MBL-content").find("a").css({ color: e.contentlinkcolor }); $(e.modulid + " ul li").find(".MBL-info").find("a").click(function(e) { if ($(this).attr("data-type") == "facebook") { return false } else if ($(this).attr("data-type") == "twitter") {
$(e.modulid + " ul li").click(function(e) {
window.open("http://twitter.com/share?text=" + $(this).attr("data-text") + "&url=" + $(this).attr("data-url"), "sharer", "toolbar=0,status=0,width=626,height=436"); return false } else if ($(this).attr("data-type") == "google") { window.open("https://plus.google.com/share?url=" + $(this).attr("data-url") + "&title=" + $(this).attr("data-text"), "sharer", "height=550,width=525,left=100,top=100,menubar=0"); return false } }); t = $(this).index(); l() }); if (e.pagenavi) {
$(e.modulid + ">div").click(function(e) {
$(e.modulid).append('<div class="MBL-top-arrow"></div><div class="MBL-bottom-arrow"></div>'); $(e.modulid).css({ height: e.itemheight + 200, padding: "20px 10px", width: e.width }) } else { $(e.modulid).css({ height: e.itemheight + 160, padding: "0px 10px", width: e.width }) } o(); $(window).resize(function(e) { o() }); u(); if ($(this).attr("class") == "MBL-top-arrow") a(); else f() });
success: function(i) {
if (e.autoplay) { s = setInterval(function() { f() }, e.timer); $(e.modulid).hover(function() { clearInterval(s) }, function() { s = setInterval(function() { f() }, e.timer) }) } } function u() { $.ajax({ type: "GET", url: document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + e.feedcount + "&callback=?&q=" + encodeURIComponent(e.feed), dataType: "json", async: false,
else if (e == 3) news = news + '<li class="MBL-bottom0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
veri = i.responseData.feed.entries; news = ""; $(veri).each(function(e, t) { if (e == 0) news = news + '<li class="MBL-active"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == 1) news = news + '<li class="MBL-bottom2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == 2) news = news + '<li class="MBL-bottom1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else news = news + '<li><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"
else if (e == veri.length - 1) news = news + '<li class="MBL-top2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == veri.length - 2) news = news + '<li class="MBL-top1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else if (e == veri.length - 3) news = news + '<li class="MBL-top0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; }); $(e.modulid + " ul").html(""); $(e.modulid + " ul").append(news); n = veri.length - 1; r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3]; o() },
</script>
error: function() { $(e.modulid + " ul").html('<li class="MBL-active"><div class="MBL-content">Error! Please try again later...</div></li>') } }) } e.modulid = "#" + $(this).attr("id"); var t = 0; var n = $(e.modulid + " ul li").length - 1; var r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3]; var i = ""; var s = e.modulid; if (e.feed != false) { $(e.modulid + " ul").html(""); $(e.modulid + " ul").append('<li class="MBL-active"><div class="MBL-content">Rss Feed Loading...</div></li>'); u() } else { o() } }) } })(jQuery)
/*]]>*/

Adım 3 


CSS ve JavaScript kodlarımızı blogumuza ekledikten sonra Blogger Kontrol Paneli > Yerleşim > Gadget Ekle yolunu takip ederek Açılan küçük pencerede bulunan HTML/JavaScript ekle diyerek açılan kod penceresine aşağıda bulunan kodları yapıştırıyoruz.

<div class="MBLnewsticker MBL-radius MBL-shadow MBL-easing" id="MBLnewsticker1">
<ul> <li>
<div class="MBL-content" data-link="http://mybloggerlab.com">Powered by MyBloggerLab (Don't remove or Widget will not work).</div>
</li></ul> </div> <script> $(document).ready(function(){ $("#MBLnewsticker1").MBLnewsticker({
titlefontsize: "16px",
feed:"http://feeds.feedburner.com/xtrealblog", width:"100%", contentlinkcolor: "#766D6D", timer:5000, titlecolor: "#333", itembgcolor: "#FFF",
</script>
contentlinkcolor: "#766D6D", infobgcolor: "#f2f2f2", bordercolor: "#DDD" });
});

İstediğiniz gibi özelleştirebileceğiniz RSS haber şeridi kodları üzerinde istediğiniz gibi özelleştirme yapabilmek için aşağıda belirtilen alanları istediğiniz gibi özelleştirebilirsiniz.


  • http://feeds.feedburner.com/xtrealblog olarak belirtilen URL'yi kendi RSS URL'niz ile değiştirin.
  • Genişliği istediğiniz gibi arttırmak ve ya azaltmak için %100 olarak belirtilen bölümü değiştirebilirsiniz.
  • Yayınların dönüşüm hızını arttırmak ya da azaltmak isterseniz 5000 yazan yeri değiştirebilirsiniz.
  • Yayınlar için arka plan rengini değiştirmek için #fff yazan yere istediğiniz renk kodunu yazabilirsiniz.
  • Diğer arka plan rengini değiştirmek isterseniz #f2f2f2 olarak belirtilen yeri istediğiniz renk kodu ile değiştirebilirsiniz.
  • Kenarlık rengi oalrak belirlenen #DDD renk kodunu istediğiniz renk kodu ile değiştirebilirsiniz.
  • Yayınlarınızda bulunan bağlantıların rengini değiştmek için #766D6D renk kodunu değiştirebilirsiniz.

Tüm işlemleri bitirdikten sonra kaydet butonuna tıklayarak yapılan değişikliklerin kaydedilmesini sağlıyoruz. Kaydettikten sonra RSS haber şeridini blogumuza eklemiş oluyoruz.

0 yorum:

Yorum Gönder

© 2013 iPRESS. All rights resevered. Designed by Templateism