13 Ağustos 2016 Cumartesi

Blogger rastgele yazılar eklentisi

2 comments   
Yazılarınızın küçük resimlerini , başlıklarını, yorum sayısını, tarihini, etiketlerini ve yazar ismi ile avatarını ayarlayabileceğiniz geniş kapsamlı bir eklentidir.
Özellikleri
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

Demo için bu sitenin sağ tarafına bakınız. Kendi kullandığım eklentidir. Ve yazının en sonundaki resme bakınız.

Aşağıdaki adımları takip ederek bloğunuza kolayca ekleyebilirsiniz.

1 - Blogger sayfasından --> Şablon kısmına tıklayınız.
2 - Her ihtimale karşı sağ üst köşeden yedek almanızı tavsiye ediyoruz.
3 - HTML'yi düzenle kısmına basınız.
4 - HTML kısmında <head> arayınız ve onun tam altına aşağıdaki kodu yapıştırınız.
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
5 - ]]></b:skin> kısmını arayınız ve tam üstüne 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/AVvXsEiTOnG8lqmNQFLcX9dAMIytf0G6WIvutk5m9uru2ZCgKbURAapjJ6U2FnLrAeT18dX-BmcSrXiSYUEm6BvX663W1v0GkcXLBLMX9YRASd_jrq3FYaXLgG3oKRpxQxG-eMuWN3Tj5DzqdPQ/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}
6 - Şablonunuzu kaydedin.
7 - Blogger sayfasından --> Yerleşim kısmına tıklayınız.
8 - Gadget ekle kısmını seçiniz.
9 - HTML/JavaScript kısmını seçiniz
10 - Aşağıdaki kodu yapıştırınız.
<script type='text/javaScript'>
//#################### Defaults
var ListBlogLink = "http://pekinasilcalisir.blogspot.com";
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 = "off";
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=\"http://pekinasilcalisir.blogspot.com/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/AVvXsEiXE5u1miqFtIV-dA3f0oRe6OotUSyldJkXFgVzizhDroSCaPD0nN2cm8Aeje0Bcq5ZTm-GVzPYZRKP6x7_isieoVe34uMCBcSKRPqsQFRUx0-6Yy_jxEgo5lpvJjG5UnpeiyVffv9c7DY/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=\"http://pekinasilcalisir.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=' + RandomArray[i] + '&max-results=1&callback=mbtrandom\"><\/script>')
};
document.write('</ul>');
</script>
11 - http://pekinasilcalisir.blogspot.com kısmına kendi blog adresinizi yazınız. Toplam 3 isim değiştirmesi var.

Şimdi eklentimizdeki ayarlara göz atalım.
ListCount = Kaç tane rastgele yazı gösterildiğini ayarlar
ChrCount = Yazı içeriğinde kaç tane karakterin gösterileceğini ayarlar
TitleCount = Yazı başlığında kaç tane karakterin gösterileceğini ayarlar

Aşağıdaki ayarları on ile açıp off ile kapatabilirsiniz.
showcomments = Yorum sayısını gösterir.
showdate = Tarihi gösterir.
showauthor = Yazar ismini gösterir.
showthumbnail = Yazıdaki kapağı gösterir.
showlabel = Yazı etiketlerini gösterir.
showcontent = Yazı içeriğini gösterir.


2 yorum :