featured content gallery slider manşet jquery blogger blogspot

BLOGGER İÇİN FEATURED CONTENT(MANŞET) KURULUMU

Bloğunuzda konu başlıklarınızı slayt(slide)şeklinde sunmanız okuyucularınızın konularınıza daha hızlı ulaşabilmeleri açısından oldukça önemlidir.Aşağıda böyle bir uygulamayı bloğunuza nasıl kuracağınızı detaylı bir şekilde anlatmaktayız.
Gmail kullanıcı adınız ve şifrenizle blogger dashboard(kumanda panelinize)girin.Tasarım > HTML'yi düzenli adımlarını belirleyin
(!) HTML kodlarınız üzerinde değişiklik yapacağımız için ilk önce tam şablonunuzu indirin.Bu herhangi bir aksilik durumında şablonunuzu geri çağırmanızı sağlar.
DEMO

1. CTRL +F tuş yardımı ile <div id='main-wrapper'> kodunu bulun aşağıdaki kodları bu kodun altına ekleyin <div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img heigth="50" width="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1qsZnyi13wCD64TJCsVwd2awOEnlCtIHMb_vj6jksNC2ew_OssL6nQcOfo-lg3M7fUeRyZiy_zAnastKwHqrUSopk92V97lIxEtepo9c6mop8U8PLMVm2SSDDQB5ye3qkBv6XScqw05K/s1600/ricardo-quaresma-in-turkey.jpg" alt="" /><span>He is running for BJK anymore</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2nL2YDAopgkJZC7sPpoAq58dmpGX65bbjwSfcGruHBNTrcQCY5aA3ovnJg8IdEQpm9QqY1dJv0xeHE69gEilQOClSwdrj_A7NscLTlOyAQWAlgSBFPZRIIK48P8X4GKK34EHK-gnPvjl/s1600/guti-in-bjk1.jpg" alt="" /><span>Guti hernandez has been transferred by BJK</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKNh2ClSeiH4wiJCHwJZbLl2X87UGXDVmU_AfDP_VYqk8ZMaTvl4PsdCszNnApDRE8TWPSAlSs-T6S5SdrKz9x1dJgpQniMWF3S3IBUy5Z8pqBSit49c9nmVveQ0kt7APPCiNHZ0KL13IG/s1600/bjk-rapid.jpg" alt="" /><span>Rapin 1-2 BJK</span></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjinD6a62dIKJdWmOyq-9B54ZUjqtqGtyZsKV8OpLi8LrinF1bqjKAlBHmWD3diy7AAPFW1rqdRMCXoqRv353kTDyM7sWkNwmOfgFerJ0zKXZOmKCs4mbq9V4RhzHYNu2NgCziAh3SZ06FD/s1600/bjk-uefas.jpg" alt="" /><span>BJK got through to next round</span></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkW_bZY-z0LYZPEkUxbg8og2XndCnIwtetHSruY7AtMc-m6jLhkkOVpFTCYUkVNqVjm45Q0kq-rgHG4McRdcoXyL-o9JGK9KR0UPlxaNntxy9XFXKmtmnIz_qZ2lYtJTI5Z6K6VLO2JL6D/s1600/ricardo-quaresma-q7.jpg" alt="" /> <div class="info" > <h2><a href="#" >He is running for BJK anymore...</a></h2> <p>BJK has transferred R.QUARESMA from Inter,BJK payed 7,3 million euro for Q7....<a href="#" >read more</a></p> </div> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJtKWyr2my9MRVVbiGo8Fc_R_uMqa3P_czXU5uRpdMPvvgJfMBBdDiTD9tnI3jT8IfhI-idMoQtPmduGQck2M8W-5a8IwJ3-6L4qJTd9rbzVtC__BJmCy00J3S-TpAvRfB9jI9GNBuHhO/s1600/guti-in-BJK.jpg" alt="" /> <div class="info" > <h2><a href="#" >Guti hernandez in BJK</a></h2> <p>Guti from Real madrid is transferred by BJK....<a href="#" >read more</a></p> </div> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqf_mgb7vbCJPJGQcInV7GTm-clwFIeHLjj5rxePvyKFb198ivKOSwPvFx4Du6aSJV86tsoMblB_N5juVquIlYEdwngVFYkoVHGQ__wVSsQ42m0sUVrNdhZVtRHj5AeId0MKs-OZd4m3Rm/s1600/rapid-bjk.JPG" alt="" /> <div class="info" > <h2><a href="#" >Rapid 1-2 BJK</a></h2> <p>16 dec 2010 rapid 1-2 BJK....<a href="#" >read more</a></p> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWPC0TZUbIaN7oovnGaS9WFKBL2Cd23vZA8sHvdczT7Kde8IhW_wiAEYGDKuJDeneTwGeRUtWVLe-QNWhyphenhyphenzbb6-qCQmZsdi8kRkhYb2iPxatnlztCMofAAWo4_a9IEKjl8ge4DK7UwPwXS/s1600/bjk-uefa.JPG" alt="" /> <div class="info" > <h2><a href="#" >BJK in next round</a></h2> <p>BJK is in next round in UEFA as second after porto....<a href="#" >read more</a></p> </div> </div> </div>

2. ]]></b:skin> Bu kodu bulun ve aşağıdaki CSS kodlarını üstüne ekleyin

#featured{ width:580px; padding-right:185px; position:relative; height:250px; background:#ccc; border:4px solid #666; } #featured ul.ui-tabs-nav{/* ufak resimler*/ position:absolute; top:0; left:400px; list-style:none; width:170px; margin-left:0px; } #featured ul.ui-tabs-nav li{/* ufak resim altalta dizilimi*/ padding:1px 0; padding-left:0px; font-size:12px; color:#666; } #featured ul.ui-tabs-nav li span{/*ufak resim tanimi*/ font-size:11px; font-family:Verdana; line-height:18px; } #featured .ui-tabs-panel{/*buyuk resimler*/ width:390px; height:250px; background:#999; position:relative; overflow:hidden; margin-left:2px; } #featured .ui-tabs-hide{/* elleme*/ display:none; } #featured li.ui-tabs-nav-item a{/*On Hover Style*/ display:block; height:60px; color:#333; background:#fff; line-height:20px; outline:none; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ /*Selected tab style*/ background:url('images/selected-item.gif') top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; } #featured ul.ui-tabs-nav li img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; } #featured .ui-tabs-panel .info{/* resim bilgileri*/ position:absolute; top:180px; left:0; height:70px; width: 370px; background: url('images/transparent-bg.png'); } #featured .info h2{ font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; } #featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0; } #featured .info a{ text-decoration:none; color:#fff; } #featured .info a:hover{ text-decoration:underline; }

3. </head> Bu kodu bulun ve ağağıdaki kodu üst satırına ekleyin
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script>

Ekleme işlemimiz bitti şimdi eklentiye kendi bloğunuza göre resim,link ve tanım eklemeniz gerekiyor,ipucu olarak yukardaki demodan faydalanabilirsiniz,eklentiyi ilk ingilizce bloğuma kurduğum için içerikte ingilizce kaldı ama yeniden düzenlemesi çk basit ve uygulaması çok kolay,düzenlemesi kolay olsun diye resim ve yazı linklerini kaldırmadım,siz bu alanlara kendi resim ve yazı linklerinizi ekleyeceksiniz.Büyük resimler üzerinde bulunan "read more" yazısını silip "Devamını oku" olarak değiştireceksiniz

Ayrıca slider için resim ve link oluşturuken:
Büyük resim boyutu: 390 x 250
Küçük resim boyutu: 55x55
Küçük resim tanımı: 41 harf
Büyük resim üzerindeki üst link 27 harf
Büyük resim üzerindeki " read more/devamını oku" tanımı 81 harf olması slider'ınızın güzel görünmesi açısından oldukça önemlidir,slider'ınızı oluştururken bu durumları değerlendirmenizi tavsiye ediyoruz

English version of this article is available on search2add

iyi bloglamalar!
Blogcadergi