DavutErarslan 10 von 109Oy 5 Kritik
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 : )
Mehmet Arabacı dedi ki...

usta senin bu eklentinin sağ en üstte senin siteye giriş için yer oluştu.onu kaldırmak istiyorum.yardımcı olabilir misin?

Yorum gönderirken lütfen alakalı yorumlar yollayın.

Burada yer alan Haber7 haberleri ile güncel hayattan haberdar olun. Davut Erarslan haber eklentisi vardı önceden onu da bir ara eklerim.

Daha fazka haber için tıkla. Haber7 haberleri
blogger"