ibrahimfirat.net | KişiseL Görüş Evrensel Bilgi: blogger eklentileri

blogger eklentileri

Çok Yorumlananlar Eklentisi

By: İbrahim Fırat on Perşembe, Haziran 06, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Blogger En Çok Yorum Alan Eklentisi

En Çok Yorumlananlar Gadgeti

Blogger için en güzel eklentileri paylaşımlarımıza devam ediyoruz. Bu eklentimiz, blogunuzda en çok yorum alan konularınızı listeleyen sitenizin herhangi bir bölümüne ekleyebileceğiniz, gerekli eklentilerden bir tanesi.

Kodun içinde "ibrahimfirat.net" yazan bölüme kendi site adresinizi yazın ( değiştirin )

Tekrar kodun içinde bulunan &ShowHowMany=10 "10" yazan bölüme sayfanızda ne kadar çok yorum alan konuların listelenmesini isterseniz sayıyı ona göre belirleyebilirsiniz. Fakat ideal olan bizim belirlediğimzi rakamdır. fazlası da olabilir ancak görsel açıdan böylesi daha iyidir.

Kodu eklemeniz için;

Kumanda paneli + Yerleşim + Gadget ekle sekmesinden HTML Javascript ekle bölümüne tıklayarak aşağıdaki kodu yapıştırın ve kayıt edin.

Blogger Youtube Eklentisi

By: İbrahim Fırat on Perşembe, Mayıs 16, 2013 / yorum : 0 blogger eklentileri

Youtube Eklentisi Blogspot

Blogger eklentilerine bir yenisi daha eklendi. Blogger Youtube eklentisi ile blogunuza farklı bir görünüm sunacaksınız.

Eklentinin kurulumu

Blogger yönetim panelinden Şablon + HTML'yi düzenle kısmından CRTL + F klavye yardımı ile </head> kodu bulun ve bir satır üstüne gelecek şekilde aşağıdaki kodları ekleyin.

Kod:

Yukarıda kodu ekledikten sonra kaydedin.

Yerleşim + Gadget Ekle + HTML/JavaScript Gadget ekle seçeneğinden aşağıdaki kodu ekleyin

Kaynak >> BlogHocam

Blogger Header ( Üst ) Menü ( Kayan )

By: İbrahim Fırat on Perşembe, Mart 14, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Blogger kayan üst menü eklentisi

Blogger bloglarınızı siteleriniz eklentilerle iyi bir görünüm ve kaliteli şekile büründürmek için yeni bir eklenti ile karşınızdayız blogger header üst menü kayan şekilde hemen eklentiyi nasıl ekleyeceğimize geçelim.

HTML Kodu

</div>
<ul class="header-menu">
<li><a href="/">Ana Sayfa</a></li>
<li><a href="http://forum.ozicab.com/">Forum</a></li>
<li><a href="http://www.resim.ozicab.com/">Resim Yükle</a></li>
<li><a href="http://upload.ozicab.com">Dosya Yükle</a></li>
<li><a href="http://ozicab.com/reklam-ver/">Reklam</a></li>
<li><a href="http://ozicab.com/sitene-ekle/">Sitene Ekle</a></li>
</ul>
<div id="headerozi-ara">

CSS Kodu

#headerozi-wrapper{

position:fixed;

top:0;

right:0;

left:0;

z-index:1;

border-top:2px solid #1a74b0;

background: rgb(249, 249, 249) url(images/header-menu-bg-ozicab.png) repeat-x;

height:45px;

width:%100;

-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .25);

-moz-box-shadow: 0 2px 3px rgba(0,0,0,.25);

box-shadow: 0 2px 3px rgba(0, 0, 0, .25);

}

#headerozi{

width:1010px;

margin-left:auto;

margin-right:auto;

}

#headerozi-ara{

float:right;

margin-right:5px;

padding-top: 9px;

}

#headerozi-logo{

float:left;

margin-right:5px;

padding-top:2px;

}

.header-menu{position: relative;width: 550px;float: left;margin-top:0px;}

.header-menu li {

float: left;

margin-right: 1px;

display: block;

border-right: 1px solid #ededed;

}

.header-menu li a {

display: block;

text-align: center;

height: 30px;

min-width: 50px;

padding: 10px 10px 5px 10px;

font-weight: bold;

line-height: 22px;

font-size: 13px;

color: gray;

}

.header-menu li.active a {

color: #1a74b0;

font-weight: bold;

background-color: #fafafa;

}

.header-menu li a:hover {

color: #fff;

font-weight: bold;

Popüler Yayınlar Gadget ( Özelleştirilmiş )

By: İbrahim Fırat on Perşembe, Mart 14, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Blogger eklentilerinin en güzellerinden olan Popüler yayınlar Gadget'ini başka bir sitede gördüm ve oldukça güzel olan bu eklentiyi kendi siteme'de kurdum ben boyutlarını biraz küçük yaptım sitenize şık bir görünüm kazandıracaktır.

Bu eklenti kaliteli olmasının yanında siteyi hiç bir şekilde yavaşlatmıyor ve Javascript kodlarından ibaret olan bir eklenti değil.

Demo olarak bakmak isterseniz www.ibrahimfirat.net sitesinin sağ bölümünden ulaşabilirsiniz.

Kurulum için:

Blogger kumanda paneli + Şablon + HMTL'yi düzenle ve bu kısımdan ctrl + f yardımı ile aşağıdaki kodu bulunuz.

Yukarıdaki kodu bulduktan sonra aşağıdaki kodu bulduğunuz kodun bir satır üstüne ekleyiniz.

#PopularPosts1{max-width:300px}

#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}

#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}

#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Ancak sorunsuz kodları ekledikten sonra çalışabilmesi için popüler yayınlar gadgetini eklemeniz gerekmektedir.

Sonrasında aşağıdaki kodu bulunuz.

Yukarıdaki bulduğunuz kod ile aşağıdaki kodu tamamen değiştirin.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2>
<data:title/></h2>
</b:if> <div class='widget-content popular-posts'>
 <ul> <b:loop values='data:posts' var='post'> <dd> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'>
<data:post.snippet/></div>
</b:if> <b:else/> <b:if cond='data:showSnippets == "false"'>  <div class='item-thumbnail-only'>
 <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'>
 <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div>
</b:if> <div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
 <b:else/>  <b:if cond='data:post.thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a> </b:if> </b:if> </b:if> </dd> </b:loop> </ul>
<div class='clear'/>
 <b:include name='quickedit'/> </div>
</b:includable> </b:widget>

CSS Popüler Yayınlar Eklentisi Video

Blogger için Footer 4 Sütun Widget Eklentisi

By: İbrahim Fırat on Perşembe, Mart 14, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Footer 4 Sütun Widget eklentisi

Blogger eklentilerini yayınlamaya uzun bir aradan sonra paylaşımlara devam ediyoruz. Kullanıcılarının temalarındaki eksiklerden bir tanesi de footer alanında ki widgetler dir bu yazımızda en kolay şekilde bu eklentiyi eklemeyi göstereceğiz.

İlk olarak Kumanda Paneli + Şablon + HTML'yi düzenle kısmından aşağıdaki kodu Ctrl+F yardımı ile bulunuz.

Aşağıdaki kodu yukarıda ki bulduğunuz kodun bir satır üstüne ekleyiniz.

#lower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background:#333333; } #lower-wrapper { background:#333333; margin:auto; padding: 20px 0px 20px 0px; width: 950px;  border:0; } #lowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 24%;  text-align: justify; color:#ddd; font: bold 12px Arial, Tahoma, Verdana; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } .lowerbar {margin: 0; padding: 0;} .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; border:0; color:#ddd; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; } .lowerbar ul { color:#fff; margin: 0 auto; padding: 0; list-style-type: none; } .lowerbar li { display:block; color:#fff; line-height: 1.6em; margin-left: 0 !important; padding: 6px; border-bottom: 1px solid #222; border-top: 1px solid #444; list-style-type: none; } .lowerbar li a { text-decoration:none; color: #DBDBDB; } .lowerbar li a:hover { text-decoration:underline; } .lowerbar li:hover { display:block; background: #222; }

Hemen sonrasında aşağıdaki kodu aaratıp bulun.

Yukarda ki bulduğunuz kodun bi satır üstüne aşağıdaki kodu ekleyiniz.

Bütün işlemleri doğru yaptıysanız eksiksiz eklenti çalışır vaziyette olacaktır.

Eklentiyi kurmakta zorluk çekenler için görsel olarak anlatım için video

Facebook Yorum Kutusu Ekleyin ( Blogger )

By: İbrahim Fırat on Perşembe, Şubat 07, 2013 / yorum : 1 blogger, blogger eklentileri, iF

Ziyaretçierlerinizin daha çok yorum yapmasını sağlamak için blogger yorum kutusunu değiştirelim blogger'in yorumlama biçimi bilmeyenler için çok zor gibi gözüküyor ve kolay kolayda yorum yapamıyor insanlar kolay olması gerekirken baya bir zor durumda olduğunu düşünüyorum bu yüzden webmaster'ler ziyaretçilere her zaman kolay yolları tercih etmeleri için uygun ortamları oluşturmalıdırlar bunun için yorum bölümünü Facebook yorum kutusu ile değiştireceğiz..

Facebook yorum kutusu eklemenin faydalarına gelince:

Herhangi yazdığınız konularınıza daha çok yorumlar yazılacak basit ve kolay olduğu için çünkü normal yorum kutularında email e posta website vs gibi bilgiler istediğinden ziyaretçi bu bilgileri girmeye erindiğinden insanlar yorum yazacakları varsa bile vazgeçebiliyorlardı. İkinci olarak her yorum yapanların Facebook ana sayfalarında sizin sitenizin linki paylaşılıyor hem backlink elde etmiş oluyorsunuz hemde Sitenizin reklamı yapılmış ve ziyaretçileriniz çoğalmış oluyor.

Yorum kutusunu eklemeye geçelim karışık gibi gözükebilir fakat anlattığım gibi harfi harfine uygularsanız sorunsuz eklentinizi kurmuş olacaksınız.

Şu https://developers.facebook.com/apps adrese gidin ve yeni bir uygulama oluşturun. Uygulamanızı oluşturdukdan sonra blogger yönetici panelinize gelin ve aşağıdaki kodu bulun..

<head>

Yukarıdaki kodun bi alt kısmına ağağıdaki kodu ekleyin.

<meta content='ID NUMARASI' property='fb:app_id'/> ( ID numarası facebook'ta yeni bir uygulama oluştururken ekranda çıkan numaranızdır. )

Devamında aşağıdaki kodlardan herhangi birini bulunuz..

<div class='post-footer-line post-footer-line-3'>

Yukarıdaki kodu bulamazsanız aşağıdakini aratın bulun.

<data:post.body/> ( bu kod her temada mevcuttur. )

Bulduğunuz kodun bi altında aşağıdaki kodu ekleyin.

Son aşamaya geldik son olarak bulacağınız kod aşağıda.

<html

Yukarıdaki kodun hemen yanına aşağıdaki kodu ekleyiniz.

xmlns:fb="https://www.facebook.com/2008/fbml"

Örnek: <html xmlns:fb="https://www.facebook.com/2008/fbml"

Yapmanız gerekenler bunlardan ibaret biraz uzun gibi gözüksede 3 4 dakikada halledilecek bir eklenti her şeyi eksiksiz yaptıysanız sorunsuz yorum kutusu işlevini gösterecektir.

Hareketli Twitter Akışı Ekleyin ( Blogger )

By: İbrahim Fırat on Perşembe, Şubat 07, 2013 / yorum : 0 blogger, blogger eklentileri, iF

Hareketli blogger Twitter eklentisi

Bu eklentinin özelliği daha önceki twitter eklentilerinden farklı yanı hareketli twitter paylaşımlarınızın sitenizde görünmesi özellikle haber portallarında kullanılan bir çoğunuz denk gelmiştir website için gerekli eklentilerinden biridir.

Twitter eklentisini blogger'e eklemeye gelince..

Yerleşim Gadget ekle seçeneğinden aşağıdaki HTML kodunu ekleyin.

}
#twitter {
background:url(http://1.bp.blogspot.com/-54S-2NHc4M8/UKJlG67LaAI/AAAAAAAAHDk/W1J_FLnKsl0/s1600/twitter-akisini-blogger-eklemek-bloglamazamani.png)left center no-repeat ;
padding: 2px 5px 2px 125px;
margin: 0 0 0 0px;
overflow: hidden;
}
#twitter p,
#twitter marquee,
#twitter div {
float: left;
font: 13px bold helvetica, verdana, sans-serif;
margin: 0 10px 0 0;
padding: 12px 0 6px 0px;
line-height: 1;
}
#twitter marquee a,
#twitter div a {
margin: 0 10px 0 0;
color: #000;
text-decoration: none;
}
#twitter marquee a i,
#twitter div a i {
font-style: normal;
color: #0094FF;
}

</style> <div id='twitter'>
</div>

Yandan Açılır Menü ( Blogger )

By: İbrahim Fırat on Çarşamba, Şubat 06, 2013 / yorum : 0 blogger, blogger eklentileri

Açılır Menü Yapımı - Blogger Dersleri

Bu dersimizde blogger kullanıcıları için yandan açılır menü eklemesini yapacağız..

Yandan açılır menü daha önceki menülerden farkı ziyaretçinin siteye girdiğinde mause ile üstüne geldiğinde sol tarafa doğru açılır şekilde düzenlenmiştir. sitenize güzellik katacak farklı bir menü kodunu uygulamaya başlayalım. Kumanda paneli Şablon + HTML'yi düzenle seçeneğinden Ctrl + F yardımı ile aşağıdaki kodu bulunuz.

Kodu bulduysanız bulduğunuz kodun üst kısmına gelecek şekilde aşağıdaki kodları ekleyiniz.

/* Blogger Yandan Açılır Menü Eklentisi ibrahimfirat.net */  ul.nav8 {     list-style:none;     height:120px;     margin:0;     padding:0; }  ul.nav8 table {     border-collapse:collapse;     width:0;     height:0;     margin:-1px 0 -5px -1px; }  ul.nav8 > li {     float:right;     height:120px;     width:40px;     position:relative;     overflow:hidden;     -webkit-transition-duration:.5s;     -moz-transition-duration:.5s;     -o-transition-duration:.5s; }  * html ul.nav8 > li {     width:auto; }  ul.nav8 > li a.ie6 {     float:left;     height:120px;     width:39px;     position:relative;     overflow:hidden; }  ul.sub {     list-style:none;     height:120px;     width:600px;     background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;     position:absolute;     left:0;     top:0;     margin:0;     padding:0; }  ul.sub li {     float:left; }  ul.sub li:first-child {     margin-left:45px; }  ul.sub li a {     display:block;     width:110px;     height:120px;     float:left;     overflow:hidden;     position:relative;     text-decoration:none;     color:#000; }  ul.sub li a b {     font-size:14px;     display:block;     padding:15px 15px 5px; } ul.sub li a b:hover {     font-size:16px;     color:#FF0000;     display:block;     padding:15px 15px 5px; } ul.sub li a p {     font-size:12px;     display:block;     margin:0;     padding:0 10px; }  ul.sub li a p:hover {     font-size:13px;     display:block;     margin:0;     padding:0 10px; }  ul.nav8 > li:hover {     width:600px; }  ul.nav8 > li a.ie6:hover {     direction:ltr;     width:600px; }  ul.sub li a:hover i {     opacity:1.0; }

Bütün işlemleri doğru yaptıysanız şablonunuzu kaydedin ve yerleşim kısmına gelin Gadget ekleme kısmından aşağıda verdiğim HMTL kodlarına ekleyin ve açılır menünüz hazır gelsin..

Demosuna bakmak için Videoyu İzle

Kaç Kez Okundu - Kaç Ziyaretçi Görüntüledi Eklentisi

By: İbrahim Fırat on Salı, Ocak 08, 2013 / yorum : 1 blogger, blogger eklentileri, iF

Blogger yazım kaç defa okundu video kaç kez izlendi zkaç kişi ziyaret etti sayfayı Kaç kez okundu eklentisi

Bu yazımda webmaster blogger kullanıcılarının en çok ihtiyaçlarından olan yazılarının konularının veya videolarıınn kaç kez okundu yada izlendi olarak bilmesini isteyeceği süper bir eklenti her yerde bulamayacağınız bulsanızda gerçek anlamda net bilgi ve bozulmayan tekil hit sayısını tam olarak alamayacağınız tarzda eklentiler bulabilirsiniz ama tanıttığım kaç kez okundu eklentisi senelerden beri kullandığım bir eklenti ve hiç bir zaman aksaklık yada hata almadığım nadide sayaçlardan birisi ve artık yararlı olacağımı düşündüğüm için paylaşmayı uygun gördüm.

Eklentinin kurulumunu bir kaç adımda gerçekleştirebilirsiniz

Aşağıda vereceğim kod blogger temalarında birden fazla olduğu için Ctrl + F yardımı ile arattğınızda kodların içinde ilk çıkanın altına yerleştiriniz ve ve bakınız sayaç çalışır haldemi eğer ki olmadıysa

<data:post.body/> kodundan 4 yada 5 tane olduğu için teker teker deneyiniz ama genelde ilk etapta oluyor çoğu temada sorunsuz bu işlemi gerçekleştirebilirsiniz Kumanda paneline giriş yapın + sol tarafta şablon sekmesine tıklayın HTML'yi düzenle sekmesinden Widget şablonlarını genişlet'i işaretledikten sonra Ctrl + F yardımı ile <data:post.body/> Kodunu aratıp bulunuz ve hemen bir satır altına aşağıdaki kodu ekleyiniz. Eklemeniz gereken kod:

Ve kaydetip çıkın... Kolay gelsin...

Not: Artık bu kod çalışmıyor...

Sosyal Butonlar Eklentisi Hareketli Dönen

By: İbrahim Fırat on Salı, Ocak 08, 2013 / yorum : 1 blogger, blogger eklentileri, iF, Sosyal Butonlar Eklentisi

Blogger Sosyal Ağlarda paylaşım butonu dönen hareketli butonlar

Butonlarun üstüne gelindiğinde sağ tarafa doğru döner demosuna yayınlamakta gerek olmadığını düşündüğüm için paylaşmadım yukarıdaki resimde gördüğünüz gibi butonlar sadece sitelerinize eklediğinizde üzerlerine gelindikçe mauseyle hızlıca kendi etrafında dönerler. Oldukça güzel ve şık bir eklenti blogger kullanıcılarının bloglarında kullanacaklarını düşünerekten paylaşımımı yapıyorum.

Aşağıda bulunan kodlarınızı , Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile ekleyiniz..

Bu Yazıyı Okudunuz Mu? Blogspot Eklentisi

By: İbrahim Fırat on Çarşamba, Aralık 26, 2012 / yorum : 0 blogger, blogger eklentileri, iF

Blogspot, sitenizde ziyaretçilere sayfanıza tıkladıklarında aşağı doğru inerken rast gele yazı gösterme eklentisi.

Basit bir Bu yazıyı okudunuz mu eklentisini anlatmaya çalışacağız. Yazılar her sayfa yenilendiğinde aşağı doğru inerken rast gele yazı gösterir. sitenizin sağ tarafının en altında ufak kutucuk şeklinde kendini gösterir.

Blog'unuza renk katacak ve yazılarınızın okuma popülaritesini arttıracak güzel bir eklenti hiç bir şekilde sitenizde kasma yada yavaşlama yapmaz.

Yerleşim >> Gadget Ekle >> HTML/JavaScript Yolu ile aşağıdaki kodu ekleyiniz.

<div id="bpslidein" style="display:none;"><div class="help">?</div><div class="expand">+</div><div class="close">X</div><p>Bu Yazıyı Okudunuz mu ?</p><div id="bpslidein_image"></div><div  id="bpslidein_title">Loading..</div></div><script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://yourjavascript.com/22209113892/recom.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://ibrahimfirat.net" target="_blank"><img src="https://lh4.googleusercontent.com/-3ZeBFGQpJLA/Tu3juLKG8EI/AAAAAAAACTs/9CxWgQBV9G8/I/bloggerplugins.png" alt="Bu yazıyı okudunuz mu" /></a>

Kumanda paneli şablon html'yi düzenle sekmesinden ctrş + F yardımıyla ..

<div class='post-footer-line post-footer-line-1'>


bu kodu


<p class='post-footer-line post-footer-line-1'>


veya bunu


<data:post.body/>




ÜSTTEKİ 3 KODDAN BLOGUNUZDA OLANI BULUN
 VE HEMEN ALTINA ALTTAKİ KODLARI EKLEYİNİZ

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

kolay gelsin..

Blogger Yatay Slayt Eklentisi

By: İbrahim Fırat on Salı, Aralık 25, 2012 / yorum : 0 blogger, blogger eklentileri, blogger slide manset, iF

Blogger için vaz geçilmez olan eklentilerden bir taneside slayt alanı eklemektir. Bu yazımda üstteki resimde gördüğünüz gibi yatay bir slayt alanı oluşturacağız. Blog'unuz bu sayede hem daha şık bir görünüme ve profosyonel bir tasarıma sahip olacak.

Bu eklentiyi sitenizin hemen hemen her tarafında kullanabilirsiniz üstte, altta veya ortada seçim sizin zevkinize kalmış bir olay.

Kurulumu:

Blogger kumanda paneli şablon HTML'yi düzenle Ctrl + F yardımı ile aşağıdaki kodu bulunuz.

</head>

Yukarıda bulduğunuz kodun üstüne gelecek şekilde aşağıdaki kodları ekleyiniz.

Üstteki işlemi yaptıysanız </body> kodunu bulun ve üstüne aşağıdaki kodları ekleyin..

Ve son aşamaya geldik blogger kumanda paneli yerleşim gadget ekle html javascript seçeneğinden aşağıdaki kodu ekleyiniz.

<br />
                <ul id="carousel" class="elastislide-list">
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/20.jpg" alt="image20" /></a></li>
</ul>
<br />

Bütün işlemleri doğru yaptıysanız, sorunsuz çalışacaktır..

Kaynak >> http://bloghocam.blogspot.com/2012/12/minimal-yatay-slayt-eklentisi.html

Yan Yana Kategorilendirmek ( Blogger )

By: İbrahim Fırat on Cuma, Aralık 07, 2012 / yorum : 2 blogger, blogger eklentileri, iF

Blogger derslerimize kaldığımız yerden devam ediyoruz fırsat buldukça blogger kullanıcılarının ihtiyacı olan gerekli olan konulara her zaman yer vermeye çalışıyoruz bugün ki yazımızda temadaki kategorileri yan yana sıralamayı anlatacağım normalinde kategorileri etiketler vasıtasıyla yada linklerle halledebiliyorduk fakat estetik açısından istediğimiz gibi olmadığı için yan yana dizilmiş şekilde gözüken eklentiyi kurmayı anlatacağım.

Yan yana kategori oluşturmak

Kumdan Paneli > Şablon > HTML'yi Düzenle > Widget Şablonlarını Genişlet kutucuğunu işaretleyerek aşağıdaki aratıp buluyorsunuz.

]]></b:skin>

Kodu bulduktan sonra hemen üstüne gelecek şekilde aşağıdaki kodu eksiksiz yerleştiriniz.

#LinkList1 ul li{float: left;width: 45%;}

Üstteki kod baglantı gadgetiyle kategori oluşturanlar için etiketler ile kategorilendirme yapanlar ise alttaki kodu eklemeleri yeterli olacaktır etiketler de bulut kısmı değil liste kısmı isaretli olacak

#Label1 ul li{float: left;width: 45%;}

kolay gelsin

Blogger E-mail Takip Et Paylaş Butonları

By: İbrahim Fırat on Cumartesi, Kasım 10, 2012 / yorum : 0 blogger, blogger eklentileri, iF

Blogger yazılarınızın altına çok sade ve kullanışlı Twitter Facebook Rss Google+ E -posta aboneliği butonları;

Hemen kuruluma geçelim Yerleşim html yi düzenle sekmesinden widget şablonları genişleti işaretleyerek devam edin ve aşağıdaki kodu bulun.

<data:post.body/>

Bu kodun hemen bir altına gelecek şekilde aşağıdaki kodları ekleyin..

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
form.feedburner {
    margin: 20px 0 0;
    display: block;
    clear: both;
}

.bloglamazamanistyle {
    background: url(http://3.bp.blogspot.com/-bxM3QNK972I/T-7CAYh5NmI/AAAAAAAAD4o/R9qMmCn9hqU/s1600/bloglamazamani-email-icon.png) no-repeat scroll 4px center transparent;
    padding: 7px 15px 7px 35px;
    color: #666;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #D3D3D3;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}

.bloglamazamanisubmit {
    color: #666;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 15px;
    border: 1px solid #D3D3D3;
    cursor: pointer;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -goog-ms-border-radius: 4px;
    border-radius: 4px;
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;
    #FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#bloglamazamani-widget {
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -goog-ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    padding: 8px;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 480px;
    -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: inset    0px 0px 8px rgba(50, 50, 50, 0.75);
    box-shadow: inset         0px 0px 8px rgba(50, 50, 50, 0.75);
    -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;
}

#bloglamazamani-widget:hover {
    background: none repeat scroll 0 0 #FFF;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}

#bloglamazamani-widget td {
    padding: 3px 0;
}
</style>

<center><br/><div id='bloglamazamani-widget'>
 <div id='emailwidget'>
  <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
  <tbody>
  <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
   <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>
     Günlük Paylaşımlardan Haberdar OL!
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=feedadresiniz&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
     <input name='uri' type='hidden' value='blogzamani'/>
     <input name='loc' type='hidden' value='en_US'/>
     <input class='bloglamazamanistyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
     <input alt='' class='bloglamazamanisubmit' title='' type='submit' value='Submit'/>
    </form>
   </td>
   <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>
     Follow us!
    </p>
    <a href='http://feeds.feedburner.com/feed' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://3.bp.blogspot.com/-TOvbaKF042o/T-7F7kPp9PI/AAAAAAAAD6Y/SIB9FlTde9c/s1600/rss-icon.png'/></a>
    <a href='http://twitter.com/twitteradınız' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-GMK90Sm85Io/T-7DDXnxRvI/AAAAAAAAD5E/LaCPsEiZQmE/s1600/twitter-icon.png
'/></a>
    <a href='http://www.facebook.com/facebookadresiniz' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://2.bp.blogspot.com/-7oFS4V6IaTk/T-7C3xD6knI/AAAAAAAAD48/MIQe9vPIoDA/s1600/facebook-icon.png
'/></a>
    <a href='https://plus.google.com/google+ id si/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://2.bp.blogspot.com/-vJmZn_h-rYE/T-7DMO8lJaI/AAAAAAAAD5M/a1FiLz7QgHA/s1600/google-plus-icon.png
'/></a>
   </td>
  </tr>
  </tbody>
  </table>
  <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.bloglamazamani.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2facebooksayfaadresi&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true">
  </iframe>
  <a class='twitter-follow-button' href='http://twitter.com/twitter adersiniz' rel='nofollow'></a>
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
 </div>
</div>
</center>
</b:if>

Kod Kutusu - Blogger

By: İbrahim Fırat on Pazar, Kasım 04, 2012 / yorum : 0 blogger, blogger eklentileri, iF

Blogger Blogunuzda içerik eklerken lazım olan kodlardan bir taneside kod kutusudur, herhangi bir yazıda kod paylaşımı yapacak iseniz kodları düzenli olarak göstermek için kodların etrafına çerçeve yapmak lazım gelir.

Örnek Görüntü :

ibrahimfirat.net

Kod Kutusu:

<pre style="background-color: #ebf3fb; border: 2px dashed rgb(235, 243, 251); overflow: auto; padding: 5px; text-align: justify; width: 600.6333618164063px;">Buraya Kod<span style="font-size: 12px; line-height: 14px;"></span></pre>

Renklerinde oynama yaparak değiştirebilirsiniz boyutunuda istediğiniz gibi ayarlayabilirsiniz.

Yorum Formunu Modifiye Yapmak - Özelleştirmek

By: İbrahim Fırat on Cuma, Ekim 26, 2012 / yorum : 4 blogger, blogger eklentileri, iF

Blogger yakın bir zamanda dişli yorumlara geçmişti hatırladığınız gibi. Bu sayede yorum bölümlerinde yorumlara yanıtla seçeneğininde ilave edildiği gibi. Blogger yorum bölümü bir çok kullanıcı hatta tüm kullanıcılar tarafından pek beğenilmemekte.

Blogger kaliteli bir sistem fakat yorum bölümlerinde biraz eksik kalıyor gibi ama her şeyin çaresi olduğu gibi bunuda kodlar yardımı ile halledebiliyoruz yukarıdaki resimde gördüğünüz gibi olacaktır yanıtla sil bölümleri mavidir renk ayarlarından istediğiniz renkleri ayarlayabilirsiniz tabi kod bilginiz varsa.

İlk önce şablonunuzun ]]></b:skin> kodunun hemen üstüne aşağıdaki vereceğim kodları ekleyin.

.comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em; } .comments .comments-content { font-size: 12px; margin-bottom: 16px; font-family: Verdana; font-weight: normal; text-align:left; line-height: 1.4em; } .comments .continue a, .comments .comment .comment-actions a { display:inline; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding: 2px 5px; text-decoration: none; text-shadow:0 1px 1px rgba(0,0,0,.3); color:#FFF; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-right: 10px; border: 1px solid #3079ED; background: #0066FF; background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999)); background: -moz-linear-gradient(top, #0099FF, #009999); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF', endColorstr='#009999'); } .comments .continue a:hover, .comments .comment .comment-actions a:hover { text-decoration: none; background:#0099FF; background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF)); background: -moz-linear-gradient(top, #009999, #0099FF); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#0099FF'); } .comments .continue a:active, .comments .comment .comment-actions a:active { position: relative; top:1px; background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC)); background: -moz-linear-gradient(top, #0066FF, #0099CC); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0099CC'); } .comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: none; } .comments .comments-content .inline-thread { padding: 0.5em 1em 0 1em; } .comments .comments-content .comment-thread { margin: 8px 0px 0px 0px; } .comments .comments-content .comment-thread:empty { display: none; } .comments .comments-content .comment-replies { margin-top: 1em; margin-left: 40px; font-size:12px; } .comments .comments-content .comment { padding-bottom:8px; margin-bottom: 0px } .comments .comments-content .comment:first-child { padding-top:16px; } .comments .comments-content .comment:last-child { border-bottom:0; padding-bottom:0; } .comments .comments-content .comment-body { position:relative; } .comments .comments-content .user { font-style:normal; font-weight:bold; } .comments .comments-content .user a { color: #444; } .comments .comments-content .user a:hover { text-decoration: none; color: #555; } .comments .comments-content .icon.blog-author { width: 18px; height: 18px; display: inline-block; margin: 0 0 -4px 6px; } .comments .comments-content .datetime { margin-left:6px; color: #999; font-style: italic; font-size: 11px; float: right; } .comments .comments-content .comment-content { font-family: Arial, sans-serif; font-size: 12.5px; line-height: 19px; } .comments .comments-content .comment-content { font-family: Arial, sans-serif; font-size: 12.5px; line-height: 19px; text-align:none; margin: 15px 0 15px; } .comments .comments-content .owner-actions { position:absolute; right:0; top:0; } .comments .comments-replybox { border: none; height: 250px; width: 100%; } .comments .comment-replybox-single { margin-top: 5px; margin-left: 48px; } .comments .comment-replybox-thread { margin-top: 5px; } .comments .comments-content .loadmore a { display: block; padding: 10px 16px; text-align: center; } .comments .thread-toggle { cursor: pointer; display: inline-block; } .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em; } .comments .comments-content .loadmore.loaded { max-height: 0px; opacity: 0; overflow: hidden; } .comments .thread-chrome.thread-collapsed { display: none; } .comments .thread-toggle { display: inline-block; } .comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px; } .comments .thread-expanded .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent; } .comments .avatar-image-container { float: left; overflow: hidden; } .comments .avatar-image-container img { width: 36px; } .comments .comment-block { margin-left: 48px; position: relative; padding: 15px 20px 15px 20px; background: #F7F7F7; border: 1px solid #E4E4E4; overflow: hidden; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-image: initial; }

Hemen sonrasında yapmanız gereken <b:include data='post' name='comments'/> kodunu bukun.bir kaç taneden fazla aynı koddan çıkacaktır.Bu kodların hepsini teker teker deneyin mutlaka birinde doğru sonuç alacaksınız.. ve üstteki kodu bulduysanız aşağıdaki vereceğim kod ile değiştiriniz.

Herhangi bir hata yapılmaıdysa sorunsuz kod çalışacaktır.

Blogger Slayt Alanı Ekle ( Otomatik )

By: İbrahim Fırat on Perşembe, Ekim 11, 2012 / yorum : 1 blogger, blogger eklentileri, blogger slide manset, Etiket bazlı slide, iF, otomatik slayt alanı, Slayti Slide ekle

Blogger için ototmatik slide manset slayt alanı blogger hızla her geçen gün kendini geliştirmekte ve en iyi seviyelere gelmektedir, fakat bloglarımızı eklentilerle daha iyi profosyonel görünümlere sokmamızda mümkün bunlardan en önemlisi slide slayt alanıdır büyük sitelerde ve bir çok sitelerde görmüssünüzdür çeşitli çeşitli slayt alanlarını blogger içinde bir çok manset eklentisi var ama ben sizlere en iyi en şık güzel duracağına inandığım eklentiyi anlatmaya çalışacağım:

1-Blogger Hesabımızla giriş yapıyoruz.Her ihtimale karşı şablonumuzun yedeğini almayı unutmayınız
2-Kumanda Paneli>Şablon>Htmlyi Düzenle>Devam Et yolunu takip ediyoruz.Widget şablonlarını genişlet kutucuğunu işaretliyoruz.
3-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz.
4-Aşağıdaki kopdu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz...

.shadow{width:950px; height:39px; background:#fff url(http://4.bp.blogspot.com/-FePkOajMbd8/T656LNNmKSI/AAAAAAAAGEE/Vcpgql7qqXQ/s1600/shadow1.png) no-repeat center;margin:0 auto}<br />
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(http://4.bp.blogspot.com/-XIuN9wCp7P4/T6v_XWDrceI/AAAAAAAABKg/X5A25lOVkVk/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}<br />
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}<br />
#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}<br />
#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}<br />
#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}<br />
#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}<br />
#featured-slider .featuredPostMeta a{color:#a1a1a1}<br />
#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url() no-repeat 0 0; position:absolute;  font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}<br />
#featured-slider .order a:hover{ color:#515151;}<br />
.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}<br />
.featuredTitle a{color:#719429}<br />
.featuredTitle a:hover{color:#0a0a0a}<br />
#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}<br />
#paginate-featured-slider ul{width:595px;list-style:none}<br />
#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}<br />
#paginate-featured-slider .featured_thumb:hover{opacity:0.7}

kod içerisinde renkli olarak verdiğimiz 950px ve 325px değerlerini değiştirip slayt alanını kendinize göre boyutlandırabilirsiniz. 5-Html kodları içerisinde Ctrl+F yardımı ile </head> kodunu aratıp buluyoruz. 6-Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz...

aBold = true;

summaryPost = 400;
summaryTitle = 25;

numposts2 = 7;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

var daystr = day+ ' ' + m + ' ' + y ;
 
 var trtd = '<div class="contentdiv">
<div class="sliderPostPhoto">
<a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo">
<div class="featuredTitle">
<a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>
'+removeHtmlTag(postcontent,summaryPost)+'...   <a href="'+posturl+'" class="meta-more">devamını oku... </a></p></div><p class="order">
<a href="'+posturl+'"></a></p></div>';
  document.write(trtd);     
    
     j++;
 }
 
}

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

var daystr = day+ ' ' + m + ' ' + y ;
 
 var trtd = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';     
  document.write(trtd);     
    
     j++;
 }
 
}
//]]>
</script>

7-Ve son aşamaya geldik: html kodları içerisinde Ctrl+F yardımı ile <div id='main-wrapper'>

kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz

kodundan önceki kısma yapıştırıyotruz...

<b:if cond='data:blog.url == data:blog.homepageUrl'><br />
<div id='slide-wrapper'><b:section class='slide' id='slide' preferred='yes'><br />
<b:widget id='HTML82' locked='false' title='blogmimarı slayt alanı' type='HTML'><br />
<b:includable id='main'><br />
<div id='featured-slider'><script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script><br />
<div id='paginate-featured-slider'><ul><script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script> </ul></div></div><script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script><br />
</b:includable><br />
</b:widget><br />
</b:section><br />
</div></b:if><br />
<div class='shadow'/>

Not: Slayt alanında hangi yazılarınızın görünmesini istiyorsanız o alana o yazının etiketini girmeniz gerekir mesela slayt alanı gatgetinin içine slayt yazdığınız zaman slayt etiketli yazılarınız manset olarak temanızda listelenecektir.

Sitemizin kategorilerinde bulunan toplam yazı, bu yazılara yazılmış yorum bulunmaktadır!

Popüler
Yasal Uyarı
Yorumlar
Kategori

Tüm Hakları Saklıdır - !BR@H!M F!R@T - Skype: live:iletisim_1269 - Tema Düzenleme | Set by NarKo | Sitemiz, hukuka, yasalara, telif haklarına ve kişilik haklarına saygılı olmayı amaç edinmiştir. Sitemiz, 5651 sayılı yasada tanımlanan yer sağlayıcı olarak hizmet vermektedir. İlgili yasaya göre, site yönetiminin hukuka aykırı içerikleri kontrol etme yükümlülüğü yoktur. Bu sebeple, sitemiz uyar ve kaldır prensibini benimsemiştir. Telif hakkına konu olan eserlerin yasal olmayan bir biçimde paylaşıldığını ve yasal haklarının çiğnendiğini düşünen hak sahipleri veya meslek birlikleri, ibo.firat@gmail.com mail adresinden bize ulaşabilirler. Buraya ulaşan talep ve şikayetler Hukuk Müşavirimiz tarafından incelenecek, şikayet yerinde görüldüğü takdirde ihlal olduğu düşünülen içerikler sitemizden kaldırılacaktır. Sitede yayınlanan köşe yazılarından yazarları sorumludur. Site yönetimine ulaşmadan yapılan hukuki işlemlerden site yönetimi hiçbir şekilde sorumlu tutulamaz. Bu siteye giren her kullanıcı bu duyurudan haberdar olmuş sayılır. Sitedeki tüm harici linkler ayrı bir sayfada açılır. Sitemiz harici linklerin sorumluluğunu almaz.

Slider

İlgi Çeken Videolar

Sağlık

Teknoloji

Sinema

Televizyon

Ne Nedir?

En5 Konular

Blogger En Çok Yorum Alan Eklentisi

En Çok Yorumlananlar Gadgeti

Youtube Eklentisi Blogspot

Eklentinin kurulumu

Blogger kayan üst menü eklentisi

CSS Popüler Yayınlar Eklentisi Video

Footer 4 Sütun Widget eklentisi

Hareketli blogger Twitter eklentisi

Twitter eklentisini blogger'e eklemeye gelince..

Açılır Menü Yapımı - Blogger Dersleri

Blogger yazım kaç defa okundu video kaç kez izlendi zkaç kişi ziyaret etti sayfayı Kaç kez okundu eklentisi

Blogger Sosyal Ağlarda paylaşım butonu dönen hareketli butonlar

Kurulumu:

Yan yana kategori oluşturmak

Blogger yazılarınızın altına çok sade ve kullanışlı Twitter Facebook Rss Google+ E -posta aboneliği butonları;

Blogger yakın bir zamanda dişli yorumlara geçmişti hatırladığınız gibi. Bu sayede yorum bölümlerinde yorumlara yanıtla seçeneğininde ilave edildiği gibi. Blogger yorum bölümü bir çok kullanıcı hatta tüm kullanıcılar tarafından pek beğenilmemekte.

Popüler Yayınlar

Comments

Labels

Pages