Blogger siteleriniz için süper manşet eklentisi !

Blogger siteleriniz için süper manşet eklentisi !

Gönderen Admin zaman: 2012-08-14T14:52:00+03:00

Selamün aleyküm millet ! Bugün çoğu sitede görüp özendiğiniz manşet eklentisini anlatacağız. Eklentinin kurulumu 3 adımdan oluşuyor. Birinci adım CSS kodlarını eklemek, ikinci adım script eklemek ve üçüncü adım ise HTML kodlarını eklemek.

1. Adım - CSS kodlarını eklemek

Bu adımda yapmanız gereken CSS kodlarınızı sitenize ekleyerek eklentinin sitenizde düzgün biçimde görünmesini sağlamak. Eğer aşağıdaki kodlarını nereye ekleyeceğini bilmeyenler "CSS kodlarını eklemek" adlı sayfamızı ziyaret edebilir.

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
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('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{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('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;
}

2. Adım - JS kodlarını eklemek

Aşağıda yer alan kodları </head> kodundan hemen önceye ekleyin.

<a href="http://www.davuterarslan.com" target="_blank" title="Blogger eklentileri"><img src="http://icons.iconarchive.com/icons/deleket/orb/16/Blogger-icon.png" border="0" alt="Blogger Eklentileri" style="position:absolute; top: 0px; right: 0px;" /></a><script src='https://sites.google.com/site/davuterarslan1/jquarydavut.js' type='text/javascript'/>

<script src='https://sites.google.com/site/davuterarslan1/jquarymin.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>

3. Adım - HTML kodlarını eklemek

Yukarıdaki 2 adımı yaptıktan sonra temanızı kaydedin ve çıkın. Çünkü 3. adım sayfa öğelerine ekleyeceğiniz gadget sayesinde olacak. Tasarım-Sayfa öğelerine gelin ve HTML/Javascript ekleye tıklayın. Daha sonra aşağıdaki kodları ekleyin. Ve kaydetmeden önce kendi düzenlemelerinizi yapın;

<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 alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>1. blogger manşet eklentisi başlığı</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>2. blogger manşet eklentisi başlığı</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>3. blogger manşet eklentisi başlığı</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>4. blogger manşet eklentisi başlığı</span></a></li>
</ul>
<!-- First Content -->
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
<h3><a href='#'>1. blogger manşet eklentisi başlığı</a></h3>
<p>Burası birinci başlığın açıklama yeri <a href='http://www.davuterarslan.com'>devamını oku.</a></p>
</div>
</div>
<!-- Second Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
<div class='info'>
<h3><a href='#'>2. blogger manşet eklentisi başlığı</a></h3>
<p>Burası ikinci başlığın açıklama yeri <a href='http://www.davuterarslan.com'>devamını oku.</a></p>
</div>
</div>
<!-- Third Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
<div class='info'>
<h3><a href='#'>3. blogger manşet eklentisi başlığı</a></h3>
<p>Burası üçüncü başlığın açıklama yeri <a href='http://www.davuterarslan.com'>devamını oku.</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
<div class='info'>
<h3><a href='#'>4. blogger manşet eklentisi başlığı</a></h3>
<p>Burası dördüncü başlığın açıklama yeri <a href='http://www.davuterarslan.com'>devamını oku.</a></p>
</div>
</div> </div>

Burada 1.,2.,3. ve 4. deinlen yerlere başlıkları ekleyin. Tanım yerlerine tanımları ekleyin. Ayrıca <a href='http://www.davuterarslan.com'>devamını oku.</a> bölümünüde o yazının linki ile değiştirin. Ekleyeceğiniz resimlerin 400x250 olmalı. Başka düzenleyeceğiniz yer aklıma gelmiyor. İstediğiniz soruyu yorumlardan sorabilirsiniz. Her sorunuzu cevaplayacağız : )