Blogger rastgele yayınlar eklentisi anlatımına geçelim
Blogger rastgele yazılar eklentisi gayet şık harika denebilecek kadar güzel bir eklentidir. Yazılarınızın küçük resimlerini başlıklarını yorum sayısını tarihini etiketlerini yazar ismi ve avatarı dahil olmak üzere bir çok özellik içeren kendimin de kullanmış olduğum geniş kapsamlı bir eklentidir.
Özelliklerine şöyle bir bakalım
1 - Yazar ismi ve resmi
2 - Tıklanabilir yorum sayacı
3 - Etiket gösterimi
4 - Özel tarih biçimi
5 - Animasyonlu mini resim önizleme
6 - Mini resim çözünürlüğünü değiştirme
7 - 3. parti resimlerini ve youtube mini resimlerini gösterme
8 - Ayarlanabilir başlık uzunluğu
9- Ayarlanabilir snippet uzunluğu
Blogger rastgele yayınlar eklentisi kurulumuna geçelim
Uyarı! Aklınızda bulunsun bir işlem yaparken yada bir kod denerken mutlaka Kuruluma başlamadan önce her zaman Temanızın yedeğini alın. Bir sorun olursa eski temanızı sorunsuz bir şekilde yeniden yükleyebilirsiniz çünkü kurulum esnasında bir hata yaparsanız mesuliyet kabul etmiyorum. Tema yedeği almak için blogger kontrol paneli Tema seçeneğini seçin ve sağ üst kısımda görmüş olduğunuz Yedekle/Geri Yükle butonuna tıklayarak açılan küçük sayfadan en son Tema indir butonuna tıklayın ve temanız inmiş olacaktır.
Blogger rastgele yayınlar ekletisi kurulum
1-Blogger kontrol panelinize girin Tema bölümüne tıklayın
2-HTML'yi düzenle kısmına tıklayın açılan yerde <head> kodunu CTRL F kombinasyonu ile aratın ve onun hemen altına aşağıdaki kodu yapıştırınız blogunuzda zaten varsa bu kodlar yeniden eklemeniz gerekmez.
<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"></link>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"></link>
3-Şimdi yine aynı şekilde ]]></b:skin> kodunu aratın ve hemen üzerine gelicek şekilde aşağıdaki kodu yapıştırınız.
.mbtlist {list-style-type:none;overflow:hidden; margin: 10px 0px 0px 10px!important; width:300px; padding:0px!important;}
.mbtlist li {margin:0px auto 10px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}
.mbtlist li a { color:#666; text-decoration:none; }
.mbtlist i{color:#999; padding-right:5px; }
.mbtlist .iline{line-height:2em; margin-top:3px;}
.mbtlist .icontent{line-height:1.5em; margin-top:5px; clear:both}.mbtlist div span{margin:0 7px 0 0; display:inline-block;font-weight: normal; }
.mbtlist .mbttitle {font-family:oswald; font-size:13px; color:#838383; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover {color:#333; text-decoration:none;}
.mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
.mbtlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
float: none; display: inline-block; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
.mbtlist .itag{ color: #fff;position: absolute;left: 9px;top: 9px;display: inline-block;font-size: 11px;width: 100px; height:22px; overflow: hidden;}
.mbtlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height: 2em;font-family: arial;font-size: 11px;border:1px solid #333;}
.mbtlist .itag a:hover{background:#84DB06;border: 1px solid #84DB06; color:#fff; text-decoration:none;}
.mbtlist .iFeatured{overflow:hidden;position:relative;float:left;margin:0 10px 10px 0;padding:0;}
.mbtlist .iFeatured a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrrBJB0Ina-gnlf3FYKrEI2TdbCm65uuHx-p3l91CiXJp6EZKBsXigJDLSxME14zZejGSkvGXSIvcAYc8DH8WJKCyaIKy-tylZzq_fJIbXRrwfLLkWMBSpVz1jimTis7AfxDEViNfqwMI/s100/mbt-bg1.png) 0 0;padding:6px 5px 4px 6px;display: block;}.mbtlist .iFeatured img{width:100px;height:60px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border: 1px solid #ddd; border-radius: 2px;}
.mbtlist .iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbtlist .icomments a{color:#0080ff; font-family: arial;font-size:12px;}
.mbtlist .icomments a:hover{text-decoration:underline}
.mbtlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
.mbtlist .idate:before {content:'\f073';padding-right:4px}
.mbtlist .iedit:before {content:'\f040';}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
.mbtlist .itotal {color:#999; padding:5px 0px; }
.mbtlist .itotal a {font-family:"Droid Sans"; font-size:12px; font-weight:normal; color:#999; text-decoration:none}
.mbtlist .itotal span:before {content:'\f07c';}
.mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:droid sans; font-size:15px; font-weight:bold}4-Şablonu kayıt edin.
5-Blogger kontrol panelinde Yerleşim kısmına tıklayın.
6-Gadget Ekle kısmına tıklayıp açılan pencerede HTML/JavaScript seçiyoruz ve içerisine aşağıdaki kodları ekliyoruz.
<script type='text/javaScript'>
//#################### Defaults
var ListBlogLink = "";
var ListCount = 3;
var ChrCount = 85;
var TitleCount = 70;
var ImageSize = 150;
var showcomments = "on";
var showdate = "off";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "on";
var RandomArray = [];
var TotalPosts = 0;
var RandomArray = new Array(ListCount);
function TotalCount(json) {
TotalPosts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
function GenerateNum() {
for (var i = 0; i < ListCount ; i++) {
for (var j = 0; j < RandomArray.length; j++){
var RandomNum = Math.floor(Math.random() * (TotalPosts ) + 1);
RandomArray[i] = RandomNum; }
}
}
</script>
<script type='text/javaScript'>
document.write('<ul class="mbtlist">');
//################ Function Start
function mbtrandom(json) {
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}
}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);
mm = ListUpdate.substring(5, 7);
DD = ListUpdate.substring(8, 10);
TT = ListUpdate.substring(11, 16);
MM = ListMonth[parseInt(mm - 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-D1JOjFz9dKX4ZqgeF7vYbYBgbqhXZcPyAJVRlkHEbud_AMEHLq-HajqsJLuyX6a48XXqo2PhxMrYbwvRhbAggB8wZCY-QQII1POgywuIfUh7v4eJreJ6dDaVE3Vw8zbu1z_8K-vqQ1g/s200/Icon.png'";
}
//################### Printing List
document.write( "<li style='margin:0px auto 10px auto!important; padding:0px!important;' class='node"+[i]+"' >");
if (showthumbnail == 'on'){
document.write("<div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div>");
}
if (showlabel == 'on'){
document.write("<span class='itag'>"
+ListTag +
"</span>");
}
document.write("<a class='mbttitle' href="
+ ListUrl+
">"
+ ListTitle+
"</a><div class='iline'>");
if (showauthor == 'on'){
document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span>");
}
if (showcomments == 'on'){
document.write("<span class='icomments'>"
+ListComments +
"</span> ");
}
if (showdate == 'on'){
document.write("<span class='idate'>"
+ M +
" "
+ D +
"</span>");
}
document.write("</div>");
if (showcontent == 'on'){
document.write("<div class='icontent'>"
+ListContent +
"...</div> ");
}
document.write("</li>");
}
document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"'>View all <font>"+TotalPosts+"</font> posts in ─ "+ListLabel+" </a></span></div>");
}
<!-- ######### Invoking the Callback Function ######## -->
for (var i = 0; i < ListCount ; i++) {
GenerateNum();
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + RandomArray[i] + '&max-results=1&callback=mbtrandom\"><\/script>')
};
document.write('</ul>');
</script>
Kırmızı ile belirtmiş olduğum özellikleri kendinize göre uyarlayabilirsiniz.
2-var ChrCount = 85; Snippet yani yayınınızdaki açıklama bölümündeki karakter saysını belirtir.
3-var TitleCount = 70; Yayın başlığının karakter sayısını belirtir.
4-var ImageSize = 150; Yayındaki resmin px lini belirtir.
5-var showcomments = "on"; Yayına yapılmış yorumları gösterir off yaparsanız göstermez.
6-var showdate = "off"; Yayın tarihini belirtir on yaparsanız gösterir.
7-var showauthor = "on"; Yazar resmini belirtir off yaparsanız göstermez.
8-var showthumbnail = "on"; Yayın resmini belirtir off yaparsanız göstermez.
9-var showlabel = "on"; Yayına ait etiketi belirtir off yaparsanız göstermez.
10-var showcontent = "on"; Yayın açıklamasını belirtir off yaparsanız göstermez.
Eğerki Sizde blogunuzda bu eklentiyi paylaşmak isterseniz Blogdan indir'den alıntı olduğunu belirtirseniz sevinirim. Ayrıca sormak istediğiniz bir şey olursa yorum yazarak belirtebilirsiniz.
