30 Mayıs 2019 Perşembe

Blogger rastgele yayınlar eklentisi

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.
Blogger rastgele yayınlar eklentisi

Ö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.


1-var ListCount = 3; Kaç adet yayın gösterileceğini belirtir.
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.


28 Mayıs 2017 Pazar

Power Game Blogger Ücretsiz Oyun Teması

Tema Platformu: Blogger
Tema İsmi: Power Game Blogger Teması
Tema Kategorisi: Oyun
Tema Açıklaması: Power Game Blogger teması oyun severler için oyun tanıtımımlarında kullanılan siteler için hazırlanmış bir temadır. Göreseli ön planda tutan tema görsel yoğunluğuna rağmen açılış hızı olarak tatmin edici bir seviyededir. Blogger kullanıcıları için hazır şablon olarak sunulmuş bir temadır. Responsive özelliği bulunmaktadır. 
Responsive: Bilgisayar, Tablet ve Mobil Kullanıma Duyarlı

Tema Ücreti: Ücretsiz
Temadan Ekran Görüntüleri

8 Mayıs 2017 Pazartesi

Folio 360 Blogger Ücretsiz Magazin Teması



Tema Platformu: Blogger  Teması
Tema İsmi: Folio 360
Tema Kategorisi: Portfolyo Teması
Tema Açıklaması: Folio 360 teması sade tema severlerin daha çok dikkatini çekecek bir tema. Temanın Header (Başlık) kısmında sol tarafında logo bölümünü görüyoruz. Logonun hemen yanında ise Menülerin bulunduğu bir alan var. Bu sayede sitede öne çıkarmak istediklerinizi menü ile ziyaretçilerinize sağlayabilirsiniz. Main kısmına indiğimizde bizi resimlerin ön plana çıktığı öne çıkan görseller karşılıyor. Buda görselliği ön planda tutanlar için vazgeçilmez bir özellik. Tabi bunun dezavantajı da sitenin açılış hızını yavaşlatması. Footer bölümü oldukça başarılı. Blogroll Popüler yayınlarınız ve Hakkında bölümü olarak üç kısma ayrılmış. Kendinize göre kişileştirme imkanını size sunmuş bir tema. En önemli özelliklerinden biride bu temanın ücretsiz olarak sunulmuş olması.Tema SEO açısından da gayet uyumlu ve her şeyi düşünülmüş olarak sunulmuş. Sosyal medya ikonları da oldukça zarif bir şekilde sunulmuş.
Tema Ücreti: Ücretsiz


Temadan Ekran Görüntüleri:






VCard Blogger Ücretsiz Kişisel Portföy Teması

Tema Platformu: Blogger
Tema İsmi: VCard 
Tema Kategorisi: Portföy, CV
Tema Açıklaması: Blogger için hazırlanmış Kişisel bilgilerinizi paylaşabileceğiniz CV tarzında blogger temasıdır. İsim Soyisim bir alan adına süper yakışır bu tema. Tavsiye ederim. Kendinize göre düzenleme yapmalısınız. Sol tarafta ise sosyal ağlarınızı paylaşabileceğiniz şık bir bölüm oluşturulmuş. Footer kısmınıda kendinize göre özelleştirebilirsiniz. 
Tema Ücreti: Ücretsiz
Temadan Ekran Görüntüleri:




18 Nisan 2017 Salı

Elegant Blogger Ücretsiz Moda Teması


Tema Platformu: Blogger
Tema İsmi: Elegant Clean
Tema Kategorisi: Moda, Magazin
Tema Açıklaması: Elegant Blogger teması moda tasarım web siteleri için tasarlanmış orijinal blogger temalarından biridir. Bazı Magazin siteleride bu temayı görsel efektlerinden dolayı tercih etmiştir. Slider tam anlamıyla ekranı kaplamıştır. Footer kısmıda küçük kare resimler olacak şekilde dizayn edilmiştir. Seo uyumunun yanı sıra güzel ve zarif bir kodlamaya sahiptir. 
Responsive: Bilgisayar, Tablet ve Mobil Kullanıma Duyarlı
Tema Ücreti: Ücretsiz

Temadan Ekran Görüntüleri


12 Nisan 2017 Çarşamba

Arcade Mag Blogger Ücretsiz Oyun Teması

Tema Platformu: Blogger
Tema İsmi: Arcade Mag
Tema Kategorisi: Oyun, Magazin
Tema Açıklaması: Arcade Mag blogger ücretsiz teması oyun severler için hazırlanmış sitelere yakışır bir temadır. Oyunlar hakkında güncel bilgileri paylaşan sitelerin kulladığı tema magazin severler içinde bulunmaz bir hint kumaşıdır. Ana gövde de büyük bir vitrin bulunmaktadır. Sayfa altlarına gidildikçe kategorileşmelere yer verilmiştir. Buda kullanıcıya daha açık bir panel sunmaktadır. Responsive özelliği bulunan temayı tüm oyun sitelerine tavsiye ederim.
Responsive: Bilgisayar, Tablet ve Mobil Kullanıma Duyarlı
Tema Ücreti: Ücretsiz


Temadan Ekran Görüntüleri