Sitenize Manuel Manşetler Ekleme

Sitemde bulunan ve yaptığım temaların çoğunda olan manuel manşetler bölümünün kodlarını sizler için yayınlıyorum ve kurulumu anlatıyorum. Çoğu kişi wordpress'teki gibi manşetleri otomatik sanıyor ama bu manşetleri kendiniz kodlardan link veriyorsunuz. Resimleri kendiniz ekliyorsunuz kısacası her şey manuel. Neyse manşetlerin ön izlemesi sitenin üst kısmında var manşetler 5 adet olup çoğaltılabilir veya azaltılabilirlerdir. Kodlama bilginiz var ise istediğiniz şekli verebilirsiniz. Neyse gelelim anlatıma..



İlk olarak aşağıdaki kodlarımızı " /b:skin'> " etiketimizin hemen üstüne ekliyoruz..

/* Manşetler Bölümü Ozicab----------------------------------------------- */

#mansetlerozicab{padding:10px;
background:#fff url(http://img.webme.com/pic/o/ozicabdeneme/mansetlerbgozicab.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;
}

Ardından aşağıdaki kodlarımızı manşetlerimizin nerede görünmesini istiyor iseniz (örn: menü altı; menünün css etiketinin altına... vb.) ekliyorsunuz.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mansetlerozicab'>
<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://ocabbaroglu.blogspot.com/2012/06/liseli-polisler-21-jump-street-izle.html'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nrGDFSD7owZnFeS8Pf6_JkT8qL0ezDRFbFplQ3W0O5l4m4ifiEX6v6BUhI8wNksckAjCT-OAK5JnH8HAJUEPBvY09ykgjtr98rwWQhNc_ix-orokovLsV_MZ4BahqxdeDOWyoBWb-_8/s400/21_jump_street-ozicab.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://ocabbaroglu.blogspot.com/2012/06/liseli-polisler-21-jump-street-izle.html' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Liseli Polisler - 21 Jump Street (Türkçe Altyazılı)</a></span></div>
    </li>

     <li id='dvUstMansetBox'>
    <div id='mansetUdiv'><a href='http://j.mp/prov2blogger'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7CEI2PPe9Kfx6N9DEDP1onXm6YJdzLkC2CW-q9rINsRhzffIsWTxRBs8JN_9ZLMTCstfbjCbOpT13cPztkITP8YbOCcXbIAAmMEisy3TLL8W3mpNJ-plLlis28531TVOA3RwfgCcUBE/s1600/ocabbaroglu-OWGDPro-01.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://j.mp/prov2blogger' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Ocabbaroglu Pro v2 Blogger Teması - SATIŞTA!</a></span></div>
    </li>

 <li id='dvUstMansetBox'>
    <div id='mansetUdiv'><a href='http://ocabbaroglu.blogspot.com/2012/06/en-cok-kullanlan-sosyal-medya-araclar.html'><img alt='' border='0' src='http://www.m-gen.biz/resimler/SOSYAL-MEDYA-INSAN-KAYNAKLARI.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://ocabbaroglu.blogspot.com/2012/06/en-cok-kullanlan-sosyal-medya-araclar.html' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>En Çok Kullanılan Sosyal Medya Araçları</a></span></div>
    </li>

 <li id='dvUstMansetBox'>
    <div id='mansetUdiv'><a href='http://ocabbaroglu.blogspot.com/search/label/Kapak%20Foto%C4%9Fraflar%C4%B1'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJVbRG_8ade1LYINVM_He3juaS1kdc0J59HGQrs18W9kLnIW_QoUDHHte3s_Umf8Cy5-_SaTwzunZqSx3ji5P1CQACGv3qjMK-61HrYyht_NA7cVLgyuCntaMAAfTWmhhqTI2TqZNh7I/s1600/timelinekapak.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://ocabbaroglu.blogspot.com/search/label/Kapak%20Foto%C4%9Fraflar%C4%B1' style='color: rgb(255, 255, 255); font-size: 14px; font-family: arial, helvetica, clean, sans-serif; text-decoration: none; font-weight: 700; '>Dev Facebook Kapak Fotoğrafları Arşivi</a></span></div>
    </li>
</ul>
</div>

</center>
</div>
 </b:if>

İlgili Aramalar: Manşetler ekle, sitene manşetler ekle, blogger manşetler eklentisi, sitene üst kısma resimli manşetler kodu