Kasım 22, 2012

Blogunuza Yanyana Sıralanmış Manşet Ekleyin


Blogunuza Yanyana Sıralanmış Manşet Ekleyin 
CSS ile tasarlanmış bu kodda istediğiniz önemli paylaşımları blogunuza manşet olarak ekleyebileceksiniz. Haber Manşet kodu ile blog ziyaretçilerinizin dikkatini çekmek istediğiniz konuları kolay ulaştırabilirsiniz. Temanızda fazla yer kaplamayacak olan bu eklentinin kullanımı da çok basit. Şuan 4 tane haber kodu ile paylaşıyorum. Dileyen arttırabilir veya azaltabilir. 
Kodda temanızı kasacak bir eklenti javascript içermiyor. 

Bu eklenti de manşetler yanyana sıralanmış bir biçimde gösteriliyor. Ekleyeceğiniz konuların orijinal resim boyutu ile ekleyebilirsiniz.

Gelelim Blogunuza Yanyana Sıralanmış Manşet Alanını Eklemeye;

  • Kumanda Paneli
  • Şablon
  • HTML'yi Düzenle
  • Widget Genişlet yolunu takip edin.

Ctrl + f yardımı ile "/b:skin'  kodunu bulun. Bu kodun üzerine gelecek bir şekilde aşağıdaki kodu yapıştırın;

Kod: 
/* Manşetler Bölümü Bloglamazamani----------------------------------------------- */ #mansetlerbloglamazamani{padding:10px; background:#fff url(http://1.bp.blogspot.com/-7faUwSZwLoA/UK3jtSHJaWI/AAAAAAAAHKg/QY7MkbYVQ_g/s1600/mansetlerbgbloglamazamani.png); background-repeat:no-repeat; border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px; margin-top:7px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; border-left:1px solid #ddd; border-top:1px solid #ddd; height:147px; } #dvUstManset{ margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 930px; color: rgb(76, 76, 76); font-family: arial, sans-serif; font-size: 12px; line-height: 19px; } #mansetUdiv { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; height: 150px; } #mansetUdiv a { color: rgb(45, 45, 45); font-size: 13px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; } #dvUstMansetBox { margin-top: -3px; margin-right: 4px; margin-bottom: 0px; margin-left: 2px; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(230, 230, 230); border-right-color: rgb(230, 230, 230); border-bottom-color: rgb(230, 230, 230); border-left-color: rgb(230, 230, 230); border-image: initial; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; float: left; overflow-x: hidden; overflow-y: hidden; width: 220px; }

Yukarıdaki kodu yapıştırdıktan sonra Şablonu kaydedip çıkabilirsiniz.
Şimdi ekleyebileceğiniz konuların kodunu dilerseniz şablonun içerisine veya yeni bir gadget ekleyerek onun içine yapıştırabilirsiniz.
Eğer gadget olarak ekleyecekseniz aşağıdaki resimde gördüğünüz gibi yukarı taşıyarak manşet alanın üstte görünmesini sağlayabilirsiniz.

Haber Olarak Ekleyebileceğiniz Kodlar;

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='mansetlerbloglamazamani'> <center> <div id='dvUstManset'> <ul id='menuManset' style='margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; '> <li id='dvUstMansetBox'> <div id='mansetUdiv'><a href='http://bloglamazamani.blogspot.com/2012/11/kisisel-blogger-temasi-myst-blogger.html'><img alt='' border='0' src='http://4.bp.blogspot.com/-8HJeadUkXDU/UKsyRyZATuI/AAAAAAAAHJc/KYDFTzz4Hno/s1600/myst-blogger-temasi-ucretsiz-profesyonal-tema-blogger-bloglamazamani.png' style='border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; width: 220px; height: 150px; '/></a><span class='text' style='padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; background-image: url(http://img.haber365.com/img/opacity70.png); background-attachment: scroll; background-origin: initial; background-clip: initial; bottom: 0px; color: rgb(0, 0, 0); height: 33px; left: 0px; line-height: 16px; position: absolute; text-align: center; width: 212px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: 0px 0px; background-repeat: repeat repeat; '><a href='http://bloglamazamani.blogspot.com/2012/11/kisisel-blogger-temasi-myst-blogger.html' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>MYST Kişisel Blog Teması - ÜCRETSİZ</a></span></div> </li> <li id='dvUstMansetBox'> <div id='mansetUdiv'><a href='http://bloglamazamani.blogspot.com/2012/11/facebook-hesabimi-tamamen-nasil-silerim.html'><img alt='' border='0' src='http://4.bp.blogspot.com/-_oMF7EOXgug/UKTne7b6A6I/AAAAAAAAHHM/Y7M_EZSc7Tc/s400/facebook-hesabini-tamamen_silme-bloglamazamani.png' style='border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; width: 220px; height: 150px; '/></a><span class='text' style='padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; background-image: url(http://img.haber365.com/img/opacity70.png); background-attachment: scroll; background-origin: initial; background-clip: initial; bottom: 0px; color: rgb(0, 0, 0); height: 33px; left: 0px; line-height: 16px; position: absolute; text-align: center; width: 212px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: 0px 0px; background-repeat: repeat repeat; '><a href='http://bloglamazamani.blogspot.com/2012/11/facebook-hesabimi-tamamen-nasil-silerim.html' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Facebook Hesabımı Tamamen Nasıl Silerim ?</a></span></div> </li> <li id='dvUstMansetBox'> <div id='mansetUdiv'><a href='http://bloglamazamani.blogspot.com/2012/11/bloggera-hareketli-twitter-akisini.html'><img alt='' border='0' src='http://3.bp.blogspot.com/-B6sQZ5tq1rk/UKJrLQPp34I/AAAAAAAAHE4/gWCSXbVYwLs/s400/bloggera-twitter-akisini-eklemek-bloglamazamani.jpg' style='border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; width: 220px; height: 150px; '/></a><span class='text' style='padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; background-image: url(http://img.haber365.com/img/opacity70.png); background-attachment: scroll; background-origin: initial; background-clip: initial; bottom: 0px; color: rgb(0, 0, 0); height: 33px; left: 0px; line-height: 16px; position: absolute; text-align: center; width: 212px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: 0px 0px; background-repeat: repeat repeat; '><a href='http://bloglamazamani.blogspot.com/2012/11/bloggera-hareketli-twitter-akisini.html' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Blogger'a Hareketli Twitter Akışını Ekleyin</a></span></div> </li> <li id='dvUstMansetBox'> <div id='mansetUdiv'><a href='http://bloglamazamani.blogspot.com/2012/11/seo-yapmanz-icin-onemli-nedenler.html'><img alt='' border='0' src='http://2.bp.blogspot.com/-JSVL0ao7dqs/UJaOTQEJJTI/AAAAAAAAG8o/PS0eYCyUi-0/s1600/seo-yapmaniz-icin-onemli-nedenler-blogger-seo-bloglamazamani.png' style='border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; width: 220px; height: 150px; '/></a><span class='text' style='padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; background-image: url(http://img.haber365.com/img/opacity70.png); background-attachment: scroll; background-origin: initial; background-clip: initial; bottom: 0px; color: rgb(0, 0, 0); height: 33px; left: 0px; line-height: 16px; position: absolute; text-align: center; width: 212px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: 0px 0px; background-repeat: repeat repeat; '><a href='http://bloglamazamani.blogspot.com/2012/11/seo-yapmanz-icin-onemli-nedenler.html' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Seo Yapmanız İçin Önemli Nedenler</a></span></div> </li> </ul> </div> </center> </div> </b:if>

Yukarıdaki alanda değiştirebileceğiniz yerler resimler ve konuların linkleri. Şimdilik bu kadar. Kodun Önizlemesi: BURADA Eğer yapamadığınız bir şey olursa "YORUM" bölümünde sorabilirsiniz. İyi bloglamalar , kolay gelsin...

7 yorum :

Yapamadığınız kısım neresi ?

@Behice Uçar; kodun kırık olması gibi bir durum söz konusu olamaz. Sizin yapamadığınız yer neresi ?

Dört tane var burada bunun 5 adet yanyana olmasını nasıl sağlarım acaba ?

@Gürkan Bilgisu, eğer temanızın genişliği uygunsa 5 tane de yapabilirsiniz.

Şu kodu düzenleyerek yeni 1 tane daha ekleyebilirsiniz.

< div id='mansetUdiv'> < a href='http://bloglamazamani.blogspot.com/2012/11/seo-yapmanz-icin-onemli-nedenler.html'>< img alt='' border='0' src='http://2.bp.blogspot.com/-JSVL0ao7dqs/UJaOTQEJJTI/AAAAAAAAG8o/PS0eYCyUi-0/s1600/seo-yapmaniz-icin-onemli-nedenler-blogger-seo-bloglamazamani.png' style='border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; width: 220px; height: 150px; '/>< / a> < span class='text' style='padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; background-image: url(http://img.haber365.com/img/opacity70.png); background-attachment: scroll; background-origin: initial; background-clip: initial; bottom: 0px; color: rgb(0, 0, 0); height: 33px; left: 0px; line-height: 16px; position: absolute; text-align: center; width: 212px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; background-position: 0px 0px; background-repeat: repeat repeat; '> < a href='http://bloglamazamani.blogspot.com/2012/11/seo-yapmanz-icin-onemli-nedenler.html' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Seo Yapmanız İçin Önemli Nedenler< / a>< / span>< / div> < / li> < / ul> < / div> < / center> < / div> < / b:if>

kod önizleme de çalışmıyor

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.