Vereceğim kodlar üzerinde gerekli düzenlemeleri yaptığınızda, görünümü de kendinize göre özelleştirebiliyor olacaksınız. Basit ayarları mevcut, yazınızın içeriğinde görsel varsa görseli, yoksa Youtube videosu varsa onun görselini kullanarak thumbnail oluşturan pratik bir uygulama... Hazırsak ve temamızın yedeğini aldıysak başlıyorum... =)
Blogger Resimli Rastgele Yazılar Eklentisi
1- Öncelikle, rastgele yazılar eklentimizin şık bir görünüşe sahip olması için; biraz CSS ekliyoruz. Bunun için blogger panelimize girerek, şablon alanından HTML düzenleme kısmına gidiyoruz. Sonrasında <head> kodunu bularak, sonrasına aşağıda yer alan kodları ekliyoruz.
4- Şimdi yapacağımız şey, oluşturduğumuz CSS kodlarını, javascript ile desteklemek olacak. Javascript kodlarımızla rastgele yazılarımızı oluşturacağız. Sonra da bunu ekrana basacağız. Yerleşim sekmesinde, yeni bir html widget ekleyeceğiz rastgele yazılarımızı göstermek istediğimiz yere. Sonra bu widget içeriğine aşağıdaki kodu kopyalayıp yapıştıracağız.
Kodlarımızı yapıştırdıktan sonra, widget için bir de başlık ayarlayarak kaydediyoruz. Hepsi bu kadar! Şimdi kodlarımızla alakalı olarak biraz açıklama yapalım. Ayarlar kısmında yer alan kodlarımızda ufak tefek değişiklikler yapabilirsiniz. Ama ListBlogLink etiketinin karşısında yer alan http://www.ehliblog.com adresini muhakkak kendi blogunuzun adresiyle değiştirin. Diğer değişkenlerimize ve nasıl göründüğüne gelirsek...
ListCount değişkenimiz, kaç adet rastgele yazı göstermek istediğimizi belirliyor. Bu sayı, blogunuzdaki toplam sayıdan fazla olmamalıdır.
ChrCount değişkeni, eğer yazınızın içeriğinden bir bölüm göstermek istiyorsanız ve showcontent değişkeninizi "on" olarak ayarlamışsanız etki edecektir. Oraya yazacağınız rakam da yazınızın içerisinden kaç karakter göstermek istediğinizi ifade etmektedir.
TitleCount: Başlık uzunluğunun gösterilen kısmını ayarlamanıza olanak tanır.
ImageSize: Pixel cinsinden gösterilecek resmin boyutunu ayarlar.
ShowComments: Yorum sayısını göstermeye/gizlemeye yarar.
ShowDate: Yazınızın tarihini gösterip gizleme seçeneğini ayarlar.
Showauthor: Yazının yazarının adını gösterip gizlemeye yarar.
Showthumbnail: Yazının küçük resmini göstermeye gizlemeye yarar.
Showlabel: Yazı için tanımlanmış etiket varsa küçük resmin üzerinde etiketi göstermeye yarar.
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>2- Bunu ekledikten sonra, yine aynı alanda ]]></b:skin> kodunu aratın. Ve aşağıda yer alan CSS kodlarımızı hemen bu kodun aşağısına yapıştırın.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='http://forum.ehliblog.com/ehlisources/rastgeleyazilar.css' rel='stylesheet'/>3- CSS düzenleme kısmımız tamam. Temanızı böyle kaydedin. Sonrasında blogger panelinizden, yerleşim sekmesine gelin.
4- Şimdi yapacağımız şey, oluşturduğumuz CSS kodlarını, javascript ile desteklemek olacak. Javascript kodlarımızla rastgele yazılarımızı oluşturacağız. Sonra da bunu ekrana basacağız. Yerleşim sekmesinde, yeni bir html widget ekleyeceğiz rastgele yazılarımızı göstermek istediğimiz yere. Sonra bu widget içeriğine aşağıdaki kodu kopyalayıp yapıştıracağız.
<script type='text/javascript'>
//#################### Ayarlar
var ListBlogLink = "http://www.ehliblog.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";
//#################### Sonrasında değişiklik yapmayınız!
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=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
</script>
<script type='text/javascript' src='http://forum.ehliblog.com/ehlisources/bloggerrastgeleyazilar.js' />
Kodlarımızı yapıştırdıktan sonra, widget için bir de başlık ayarlayarak kaydediyoruz. Hepsi bu kadar! Şimdi kodlarımızla alakalı olarak biraz açıklama yapalım. Ayarlar kısmında yer alan kodlarımızda ufak tefek değişiklikler yapabilirsiniz. Ama ListBlogLink etiketinin karşısında yer alan http://www.ehliblog.com adresini muhakkak kendi blogunuzun adresiyle değiştirin. Diğer değişkenlerimize ve nasıl göründüğüne gelirsek...
ChrCount değişkeni, eğer yazınızın içeriğinden bir bölüm göstermek istiyorsanız ve showcontent değişkeninizi "on" olarak ayarlamışsanız etki edecektir. Oraya yazacağınız rakam da yazınızın içerisinden kaç karakter göstermek istediğinizi ifade etmektedir.
TitleCount: Başlık uzunluğunun gösterilen kısmını ayarlamanıza olanak tanır.
ImageSize: Pixel cinsinden gösterilecek resmin boyutunu ayarlar.
ShowComments: Yorum sayısını göstermeye/gizlemeye yarar.
ShowDate: Yazınızın tarihini gösterip gizleme seçeneğini ayarlar.
Showauthor: Yazının yazarının adını gösterip gizlemeye yarar.
Showthumbnail: Yazının küçük resmini göstermeye gizlemeye yarar.
Showlabel: Yazı için tanımlanmış etiket varsa küçük resmin üzerinde etiketi göstermeye yarar.
 Blogger İçin Rastgele Yazılar Eklentisi){kind=link}
bu benzer yazılar eklentisini yazı altına bir türlü ekleyemedim >div class='post-footer'< kodu yok hocam bilginiz varmı ?
YanıtlayınSilYarın akşam bakayım, olur mu :)
SilTemanı inceledim FahriCan, senin temanda post-footer bölümü yok. Onun yerine < div id='share-this ' > etiketinin üstüne ya da < div class=" halaman " > etiketinin altına ekleyebilirsin. :)
SilEkledim hocam çokta güzel durdu teşekkürler :D
Silİyi günlerde kullan :)
Silfahri usta ile aynı sorun benimkide
YanıtlayınSilteşekkürler. blogspotta yapayım.
YanıtlayınSilhttp://www.ahmetduzen.net/
Çok yararlı ve açıkcalıyı bir makale olmuş ellerinize sağlık.
YanıtlayınSilbu eklenti iyi oldu ilk seferde çalıştıramadım ama yanlış eklemişim çok şık durdu sitemde
YanıtlayınSilBlogger'da bunları yapmak gerçekten bana zor geliyor. Kod yapısını bilmediğim için her sitemde bu yüzden wordpress kullanıyorum. Blogger'a hakim olabilsem keşke..
YanıtlayınSilWordpress eklenti çeşitliliği ve kod bilgisi gerektirmemesi bakımından güzel olsa da orta-uzun vadede maliyeti bloggera göre daha yüksek olacaktır. Bu nedenle ben ısrarla blogger tavsiye ediyorum :)
SilGüzel paylaşım olmuş emeğinizesağlık.. Ziyaretnizi beklerim..
YanıtlayınSilhttp://teknolojidehbr.blogspot.com
merhaba eklenti çok güzel teşekkürler
YanıtlayınSilyazı başlığı uzun olduğunda çerçeveden taşıyor ve şekil bozuluyor taşmadan ikinci sıraya devam etmesini nasıl sağlarız yardımcı olabilirmisi acaba :)
eklenti hatalı kullanmayın
YanıtlayınSil