Subscribe For Free Updates!

We'll not spam mate! We promise.

eklentiler etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
eklentiler etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

28 Ocak 2015 Çarşamba

Blogger Yazı Etiketleri ile Resimli Slayt Eklentisi

Blogger, sidebar kenar çubuğuna sadece yazı etiketi kullanarak, Resimli, Yazı açıklamalı, Resim genişlik ve yükseklik ayarı, Slayt post sayısı ve navigasyon alt numaratörlü, Önceki ve sonraki yazı butonlu, yazı Etiketleri ile Resimli Slayt Eklentisi.  Blog’unuz için Json ve Java kodlama tekniği ile tasarlanmış, tüm yazı etiketlerinizden en popüler olanları veya dilediğiniz zaman sadece diğer etiket ismini değiştirmek suretiyle kullanabileceğiniz resimli slayt eklentisi için tek yapmanız gereken işlem birkaç link değişiminden ibarettir.

Blog’unuz da gadget olarak kullanacağınız slayt eklentisi oldukca hızlı olup, tüm slayt çalışmasını blog’unuzun RSS, feeds bağlantısından almakta olup, açılış hızını etkilemez. Diğer özelliklerinden biri de, resmin üzerine maus’u yanaştırıldığında slayt geçişi durup, kendini otomatikman bekleme pozisyonuna almasıdır. Maus’u yazı, resim üzerinden uzaklaştırdığınızda slayt çalışmasına devam eder.

Eklentinin özelleştirilmesi için yapmanız gereken çok fazla bir işlem mevcut değildir. Sadece blog isminizi (url) girerek, kullanmak istediğiniz etiketinizi seçeceksiniz. Blog şablonunda kullanılan genişlikler değişebildiğinden, genişlik ve yükseklik rakamlarını belirleminiz yeterli olacaktır. Blog yazılarınız için oluşturduğunuz etiketleri kullanarak her hafta farklı yazılarınızı okuyucularınıza tanıtabilirsiniz. Blog’unuz da bu kadar işlevsel bir eklentinin kullanılması tavsiyelerim arasında yer almaktadır.

Herhalde etiketlerden oluşan resimli açıklamalı, numaratör butonlu eklentinin nasıl çalıştığını merak etmişsinizdir ! Aşağıda canlı demosu verilen eklentiyi görebilmeniz için blog’a giriş yapın. Sidebar da, “ TEMA TASARIM İLE İLGİLİ MESAJLAR “ isimli gadget başlığını bularak inceleyin.

Resimli Son Yazılar Slayt Eklentisinin kurulumu :
1. Blogger kumanda paneline giriş yapın.
2. Yerleşim →  Gadget ekle →  Html/JavaScrip, gadget’ini açın ve aşağıdaki kodları ekleyin. Emeğe saygı duyuyor ve bana destek vermek istiyorsanız kod içindeki Gadget’i al link bağlantısını lütfen silmeyin.
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/> <style type="text/css"> .slider-rotator { width:300px; height:400px;} </style> <div id="slider-rotator" class="slider-rotator loading"></div> <script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script> <script type="text/javascript"> makeSlider({ url: "http://adnanguney.blogspot.com", numPost: 10, newTabLink: false, labelName: "Etiketinizinismi", showDetail: true, summaryLength: 240, titleLength: "auto", showThumb: true, thumbWidth: 300, squareThumb: true, noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", showNav: true, navText: { prev: "&lt;", next: "&gt;" }, containerId: "slider-rotator", autoSlide: true, interval: 6000, speed: 1000, hoverPause: true, crossFade: false, autoHeight: false }); </script> <div style="font-size:10px;text-align: center;">By <a href="http://guney59.blogspot.com/2015/01/blogger-yaz-etiketleri-ile-resimli.html"target="_blank"> Adnan Güney Gadgeti Al</a></div>  
 
Özelleştirme :
width: 300 px : Gadget resim genişliği
height: 400 px : Gadget resim yüksekliği
http://adnanguney.blogspot.com : Blog (url) link’ini aynı formatta girin. tr uzantısı olmasın.
numPost : 10 : Görülmesini istediğiniz yazı adetini belirler.
labelName : "Etiketinizinismi" Kullanmak istediğiniz etiket yazınızı trayıcıda açın. Son etiket kısmını kopyalayın bu kısma yapıştırın. Tırnak ayraçlarını bozmamaya özen gösterin.
summaryLength : 240 : Yazı açıklama uzunluğunu belirler.
thumbWidth: 250 : Resmin genişliğini belirler.
ÖNEMLİ NOT : Blog’unuzda Jguery kütüphanesinin son güncelleşmiş linki yoksa aşağıdaki verilen etiketi bularak, hemen altına aşağıdaki link’i yapıştırın. Bu link olmadan yukarıdaki kodlar çalışmayacaktır.
Bulunacak etiket :
]]></b:skin>
Güncelleşmiş Jguery linki :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/> 
Blog yazılarınız için kullandığınız resim ebatlarını standart boyutlarda olmasına özen gösterin. Büyük resim kullanıyor iseniz, genişlik ebatlarını 400 px. veya 500 px. ebatlarında hangisini tercih ederseniz devamlı ilk yazı resminiz de bu ölçüyü kullanmaya özen gösterirseniz, Slayt görseliniz veya bir başka eklentilerinizin de düzgün görülmesini sağlamış olursunuz. Unutmayın sosyal paylaşımlarda ilk resim önerilen resimdir. Bu neden ile çok iyi olması gerekir. Güzel tasarlanmış açıklama alt niteliği kullanmış resimlerin Google Plus Görseller aracılığı ile blog’unuza %10 civarında okuyucu getirmesi demek olduğunu unutmayın.

17 Ocak 2015 Cumartesi

Blogger için E-Posta Takip Formu Eklentisi

Blogger gadget ekletinizde Mail, Rss, Twitter, Facebook, YouTube ve okuyucularınızın E-Posta ile abone olmasına imkan tanıyan tüm eklentilerin bir form içinde yer aldığı sade görünümlü abone takip form eklentisi. Blog’unuz da fazla alan kaplamadan kullanabileceğiniz, okuyucularınızın tek bir form kutusundan birçok işlemi aynı anda yapabilmesine imkan sağlayan, E-Posta Takip Formu Eklentisini gadget olarak blog’unuz da kullanabilirsiniz. E-Posta Takip Formu Eklentisinin özelleştirilmesi çok kolaydır. Tek yapmanız gereken işlem Feedburner isminizi ve Sosyal paylaşım site hesabınızdaki kullacı isminizi belirttiğim yerlere kopyalayıp yapıştırmaktır.  E-Posta Takip Formu Eklentisini alt bilgi (Footer) veya sidebar da her iki şekilde de kullanmanız mümkündür. Blogger temanızın alt bilgi arkaplan rengi renkli ise eklentinin görünümünü daha canlı gösterebilirsiniz.
DEMO
E-Posta Takip Formu Eklentisinin kullanım bilgileri :
1. Blogger kumanda paneline giriş yapın.
2. Yerleşim → Gadget ekle → Html/JavaScript gadgetini açın ve aşağıda verilen kodları ekleyin.
3. Gadget’i, Sidebar veya alt bilgi Footer alanına istediğiniz konuma sürükleyerek konumlandırın.
E-Posta Takip Form gadget kodları :
<style type='text/css'>
.social a{color: #6e6e6e;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}
.emailform{margin:16px 0 0; display:block; clear:both;}
.emailtext{margin:10px 0 0;background:#f6f6f6 url(http://3.bp.blogspot.com/-3nqMfDFqsUQ/T4_x8t_XbaI/AAAAAAAAAok/oVXZ6X2RKsg/s1600/email.png) no-repeat scroll 4px center;padding:6px 5px 6px 34px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:175px;}
.emailtext:hover{background: #f3f3f3 url(http://3.bp.blogspot.com/-3nqMfDFqsUQ/T4_x8t_XbaI/AAAAAAAAAok/oVXZ6X2RKsg/s1600/email.png) no-repeat scroll 4px center;border-color:#999;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:5px 10px; border:1px solid #666;cursor:pointer;background:#999}
.sub-button:hover{color:#444;border-color: #999;background:#ccc}
</style>
<center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=feedisim' target='_blank'><img alt='newsletters' src="http://2.bp.blogspot.com/-T6Jwvl78yt4/T6aQRn6CDmI/AAAAAAAABCU/vmj_BCGOv2U/s1600/mail.png" border="0" title='newsletters'/></a> </td>
<td> <a href='http://feeds.feedburner.com/feedisim' target='_blank'><img alt='rss' src="http://2.bp.blogspot.com/-BkgRd2NvFT8/T6aQSYJiQnI/AAAAAAAABCg/IPE8JvSisT4/s1600/rss.png" border="0" title='rss'/></a> </td>
<td> <a href='http://twitter.com/#' target='_blank'><img alt='twitter' src="http://2.bp.blogspot.com/-wDhM0i4yvb8/T6aQTdIRmSI/AAAAAAAABCo/CS61MLJ8QRo/s1600/twitter.png" border="0" title='twitter'/></a> </td>
<td> <a href='http://www.facebook.com/#' target='_blank'><img alt='facebook' src="http://1.bp.blogspot.com/-RvQpmf-y4PE/T6aQQqqjT2I/AAAAAAAABCQ/jEECzsdedY8/s1600/facebook.png" border="0" title='facebook'/></a> </td>
<td> <a href='http://www.youtube.com/#' target='_blank'><img alt=' youtube' src="http://1.bp.blogspot.com/-Lpu7KBe9Q2c/T6aQUbuQWBI/AAAAAAAABCw/bsKGA1q_WeQ/s1600/youtube.png" border="0" title='youtube'/></a>
</td></tr></tbody></table> </div></center>
<center>
<div class='sub-box'>
<div style="text-align: left; display: inline-block;">
<h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">RSS Feed ile abone ol</h8>
<small><i>Bu yazıları sevdi iseniz <a href='http://feeds.feedburner.com/feedisim' target='_blank' title='feedburner'>
<b>buraya tıklayın</b></a>, veya bunun gibi içerikler için abone olun.</i></small>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedisim', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="feedisim" name="uri"/>
<input type="hidden" name="loc" value="fr_FR" />
<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="E-postanızı girin..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Gönder" title='' alt='' />
</form></div></div></center>
Özelleştirme :
1. feedisim : 5 ad. Feed isim bulunmakta olup, bunlar mavi renkler ile belirtilmiştir.
İpucu : Kodları bir metin dosyasına yapıştırın. Metin dosyasında boş bir yere tıklayın. CTRL+F kısayol arama penceresini açın ve şu kelimeyi aratın; ( feedisim ) parantezler hariçtir. Her bulduğunuz ( feedisim ) yerine, Feedburner son ek isminizi kopyalayın ve yapıştırın. Bir sonraki ismi bulmak için; Sonraki seçeneği ile devam edin. Bu yolu takip ederseniz aradığınız hiçbir şeyi atlamamış tüm kodları rahatlıkla bulmuş olursunuz.
Feedburner uygulmasına sahip değilseniz !
FeedBurner kategorisindeki diğer yazılar ilginizi çekiyorsa bağlantı link’inden inceleyin.
2. Sosyal paylaşım isimlerinin yazılması : Yukarıda anlatılan İpucu örneğine gibi bu işareti aratın
( # ) ve paylaşım isminizi girin.
3. Mail için Feedburner ismini girdiğinizden herhangi bir işlem yapmanıza gerek yoktur.
4. Resim linklerini kopyalayın Google Plus → Fotoğraflar bölümünde bir albüm oluşturarak kendi sunucunuzda barındırabilirsiniz.

16 Ocak 2015 Cuma

Blogger Küçük Ebatlı Rasgele Yayınlar Eklentisi

Blogger tema şablonunu üç sütun, iki sidebar olarak kullananlar için sol tarafta bulunan dar sidebar sütunda kullanılabilen sadece resim ve başlık linkinden oluşan Popüler yazılar benzeri küçük ebatlı Rasgele yazılar eklentisi. Blog’unuzun sağ tarafında bulunan sidebar alanında kullanabileceğiniz büyük boy Rasgele yayınlar eklenti yazımın hemen ardından, üç sütun blogger temanızın sol sidebar alanında bu eklentiyi kullanabileceksiniz. Blogger temanızın sol sidebar 200 px. dar alana eklentinin sığabilmesi için resimler biraz küçültüldü ve ve sadece yazı başlık linki bırakıldı. Açıklama kısmı görüntüyü bozduğundan pasif konuma alındı. CSS kodları ve Gadget içine ekleyeceğiniz eklenti Css ve Html kodları olmak üzere iki şekilde ekleniyor. Blog temanızın sol kısmındaki Sidebar’ın genişliğini ve yazı başlık bağlantı link yazı font değerlerini de ayrıca ayarlayabileceksiniz. Eklenti Json kodlama ile derlenmiş mümkün olduğunca hızlı açılır. Rasgele yazılar feed rss içeriklerini okur. Blog yazılarınız çok fazla aşırı derecede ise birkaç milisaniye geçikme yaşanabilir. Eklentinin nasıl görüldüğünü benim de kullandığım Adnan Güney isimli klasik blog’undan ve Guney13 test blog’umdan inceleyebilirsiniz. Demoların bazen değişebileceğini unutmayın.
Blogger rasgele yayınlar eklenti uygulamaları :
1. Blogger kumanda peneline giriş yapın.
2. Şablon kodlarınızı bozmayacağından şablon yedeğinizi almanıza gerek duymuyorum.  Ancak tereddüt ediyorsanız blog’unuzun yedeğini alabilirsiniz. Bilmeyenler için ; Blogger nasıl yedeklenir okuyun.
3. ŞablonÖzelleştirGelişmişCSS ekle yolunu takip ediyoruz.
4. Aşağıda verilen CSS kodlarını koplayıp pencereye yapıştırın ve en alttaki ( } ) sağa ters kulaklı parantezden sonra enter çekin ve blogu kaydedin.
Blogger rasgele yayınlar Css eklenti kodları :
/* http://adnanguney.blogspot.com */
#random-post-container {width:180px}
#random-post-container ul,
#random-post-container li {
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
#random-post-container img {
display:block;
float:left;
border:1px solid;
margin:2px 7px 5px 0;
}
#random-post-container a {
font-weight:bold;
font-size:90%;
}
#rancom-post-container .clear {
display:block;
clear:both;
}
 
CSS özelleştirme hakkında bilgiler :
1. Width : En üst kısımdaki mavi renkli 180 px. sidebar genişlik ayarıdır. Blog’unuzun sidebar’ında taşma oluşursa bu değeri değiştirin. Sidebarınızın genişliğine göre birkaç deneme yapabilirsiniz.
2. Font-Size : Alt kısımdaki mavi renkli, “font-size: 90% ;” blogger için normal olan bir boyuta göre ayarladım. Dilerseniz değerle ile oynayabilirsiniz. Başlık rengi blog şablonunda özelleştirdiğiniz değer renkleridir. Her blog’un seçimine bağlı olarak farklı görülebilir.
3. Sidebarda kullandığınız farklı bir eklenti kod içindeki CSS kod renklerini değiştirmiş olabilir.
4. Başlık link rengini değiştirmek isterseniz, “font-size: 90% ; üst kısmını aşağıdaki etiketi ekleyin.
color: blue ;
Blue mavi olarak bilinen renk ismi için siz istediğinizi yazabilirsiniz. Örnek: red
CSS kodlarında yapmanız gereken başka özel bir işlem yoktur. Şimdi diğer kodlarımızı ekleyelim.
Blogger rasgele yayınlar Html ve Json kodlarının eklenmesi :
1. Blogger kumanda peneline giriş yapın.
2. YerleşimGadget ekleHtml/JavaScript, Gadget’ini açın ve aşağıdaki kodları eksiksiz yapıştırın.
<div id='random-post-container'>Load...</div>
<script>

// Feed configuration
var homePage = 'http://adnanguney.blogspot.com',
maxResults = 7,
summaryLength = 0,
noImageUrl = 'http://3.bp.blogspot.com/-_U5cQwKj03I/UoY31u4GqqI/AAAAAAAAAAA/m3ZCKVhD2vc/s40-c/grey.png',
containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
var link, summary, img,
ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s40-c") : noImageUrl;
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li>';
skeleton += '<img src="' + img + '" alt="" width="40" height="40">';
skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
skeleton += '<span>' + summary + '</span>';
skeleton += '<span class="clear"></span></li>';
}
ct.innerHTML = skeleton + '</ul>';
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');

</script>
 
Özelleştirme :
1. Kodlar içinde alt alta 2 ad. mavi renkleri göreceksiniz.
homePage : http://guney5.blogspot.com → Kendi url’niz ile aynı biçimde değiştirin.
maxResults : 5 → Görülmesini istediğiniz yayın sayısıdır.
2. Kodlar hassasdır bu neden ile dikkatli kopyalayın ve diğerleri üzerinde oynama yapmayın.

15 Ocak 2015 Perşembe

Blogger Rasgele Yayınlar Eklentisi

Blogger ana sayfa sidebar eklentileriniz arasında kullanabileceğiniz, her yazı sayfa değişiminde eklenti bağlantı linkleri değişen resimli, başlık link ve açıklamalardan oluşan Popüler yazılar benzeri Rasgele yazılar eklentisi. Blog’a eklenti iki şekilde ekleniyor. CSS kodları ve Gadget içine ekleyeceğiniz Html kodlarından oluşmakta. Eklediğiniz kodlar içinden, Sidebar genişliğini, görülmesi gereken yazı sayısını, yazı font değeri ve yazı açıklama değerlerini düşürebilir veya yükseltebilirsiniz. Eklenti Json kodlama ile derlenmiş mümkün olduğunca hızlı açılır. Rasgele yazılar feed rss içeriklerini okur. Blog yazılarınız çok fazla aşırı derecede ise birkaç milisaniye geçikme yaşanabilir. DEMO

Blogger rasgele yayınlar eklenti uygulamaları :

1. Blogger kumanda peneline giriş yapın.
2. CSS kodlarını 3 aşamalı olarak eklememiz mümkün. Şablon, Özelleştirme, Şablon head kapanış üstüne veya b:skin CSS  kodlarının olduğu yere. Ancak yeni blogger kullanıcıları da düşünülerek daha kolay ekleyebilmeniz için aşağıdaki adımları takip ederek CSS kodlarını ekleyin. Şablon kodlarınızı bozmayacağından şablon yedeğinizi almanıza gerek duymuyorum.  Ancak tereddüt ediyorsanız blogunuzun yedeğini alabilirsiniz. Bilmeyenler için ; Blogger nasıl yedeklenir okuyun.
3. ŞablonÖzelleştirGelişmiş CSS ekle yolunu takip ediyoruz.
4. Aşağıda verilen CSS kodlarını koplayıp pencereye yapıştırın ve en alttaki ( } ) sağa ters kulaklı parantezden sonra enter çekin ve blogu kaydedin.

Blogger rasgele yayınlar Css eklenti kodları :

/* http://adnanguney.blogspot.com */
#random-post-container {width:330px}
#random-post-container ul,
#random-post-container li {
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
#random-post-container img {
display:block;
float:left;
border:1px solid;
margin:2px 7px 5px 0;
}
#random-post-container a {
font-weight:bold;
font-size:90%;
}
#rancom-post-container .clear {
display:block;
clear:both;
}
CSS özelleştirme hakkında bilgiler :
1. Width : En üst kısımdaki mavi renkli 330 px. sidebar genişlik ayarıdır. Blog’unuzun sidebar’ında taşma oluşursa bu değeri 300 px. olarak değiştirin. Sidebarınızın genişliğine göre birkaç deneme yapabilirsiniz. Çekinmeyin patlamaz.
2. Font-Size : Alt kısımdaki mavi renkli, “font-size: 90% ;” blogger için normal olan bir boyuta göre ayarladım. Dilerseniz değerle ile oynayabilirsiniz. Başlık rengi blog şablonunda özelleştirdiğiniz değer renkleridir. Her blog’un seçimine bağlı olarak farklı görülebilir.
3. Sidebarda kullandınığınız farklı bir eklenti kod içindeki CSS kod renklerini değiştirmiş olabilir.
4. başlık link rengini değiştirmek isterseniz, “font-size: 90% ; üst kısmını aşağıdaki etiketi ekleyin.
color: blue ; Blue mavi olarak bilinen rengi siz hangisini istiyorsanız yazabilirsiniz. Örnek: red
CSS kodlarında yapmanız gereken başka özel bir işlem yoktur. Şimdi diğer kodlarımızı ekleyelim.
Blogger rasgele yayınlar Html ve Json kodlarının eklenmesi :
1. Blogger kumanda peneline giriş yapın.
2. Yerleşim → Gadget ekle → Html/JavaScript, Gadget’ini açın ve aşağıdaki kodları eksiksiz yapıştırın.
<div id='random-post-container'>Load...</div>
<script>
// Feed configuration
var homePage = 'http://guney5.blogspot.com',
maxResults = 5,
summaryLength = 120,
noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
containerId = 'random-post-container';

// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}

// Widget's main function
function randomPosts(json) {
var link, summary, img,
ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : "";
img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li>';
skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
skeleton += '<span>' + summary + '</span>';
skeleton += '<span class="clear"></span></li>';
}
ct.innerHTML = skeleton + '</ul>';
}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
</script>
Özelleştirme :
1. Kodlar içinde alt alta 3 ad. mavi renkleri göreceksiniz.
homePage : http://guney5.blogspot.comKendi url’niz ile aynı biçimde değiştirin.
maxResults : 5 → Görülmesini istediğiniz yayın sayısıdır.
summaryLength : 120 → Yazı başlık link altındaki açıklamaların uzunluğunu belirtir. Rasgele yazılar sol tarafta çıkan resimler 72 px. değelerinde olduğundan yazı açıklamalarını blogger’a göre ayarladım. Siz isterseniz değeleri değiştirebilirsiniz.
2. Kodlar hassasdır bu neden ile dikkatli kopyalayın ve diğerleri üzerinde oynama yapmayın.

Ads Inside Post

Sitemize Hoşgeldiniz :)

Haberci

Destek3

Related Posts Plugin for WordPress, Blogger...