Etiketlerinizin çarşaf liste gibi çok yer kaplamasından mı şikayetçisiniz, yada blogunuza özel bir görünümmü kazandırmak istiyorsunuz, işte aradığınız blogger için açılır etiket menü eklentisi burada.Bu ekleni sayesinde etiketleriniz daha düzenli bir hal alacak ve sayfanızda çok az bir yer kaplayarak bir çok etiketi-kategoriyi ana sayfada yada istediğniz bir yerde göstermenizi sağlayacak.
DEMO GÖRÜNÜM

Blogger Açılır Etiket Menüsünü Blogunuza Eklemek için;

1-Blogger hesabımızla giriş yapıyoruz.
2-Yerlerşim>Gadget Ekle yolunu takip edip bir adet Etiketler Gadgeti ekliyoruz. Açılır etiketler menüsünün nerede görünmesini istiyorsak gadgeti ekledikten sonra göünmesini istediğimiz yere sürükleyip bırakıyoruz.

3-Şablon>HTMLyi düzenle Yolunu takip edin.

4-Ctrl+F yardımıyla aşağıdaki kodu aratıp bulun.

<b:widget id="Label1" locked="false" title="Labels" type="Label"></b:widget>

5-Yukarıda bulduğunuz kodun yerine aşağıdaki kodu yapıştırın.

<b:widget id="Label1" locked="false" title="Categories" type="Label"> 
<b:includable id="main"> 
<b:if cond="data:title"> 
<h2>
<data:title></data:title></h2>
</b:if> 
<div class="widget-content">
<select onchange="location=this.options[this.selectedIndex].value;" style="width: 100%;"> 
<option>Bir Kategori Seçin</option> 
 
<option expr:value="data:label.url"> 
() 
</option> 
 </select> <b:include name="quickedit"> </b:include></div>
</b:includable> 
</b:widget>

Yukarıda verdiğimiz Açılır Etiket Menüsü Kodları içerisindeki;
*width:100% değeri genişliği,
*Bir Kategori Seçin yazan yer Açılır Etiket menüsü içerisinde başlık olarak görünecek kısmı,
* () kodu da etikettten sonra gösterilecek olan bu etikete sahip yazı adedini belirtir, bu kısmı silerseniz yazı adedi görünmeyecektir.
Kodları ekledikten sonra şablonumuzu kaydedip çıkıyoruz ve Blogger Açılır Etiket Menüsünün görünümünü kontrol edip kullanmaya başlıyoruz.

Blogger öne çıkan yayın gadgeti anlatımına geçmeden önce bloggerin ilk çıktığı zamandan bugüne kadar kat ettiği mesafeye baktığımda, "vay be" diyorum kendi kendime :), zaman ilerledikçe teknoloji gelişiyor ve web ortamında yeni çıkan platformlarda çoğalıyor, bu platformların kullanılabilirliği ve ihtiyaçlara cevap verebilirliği bakımından incelediğimizde blogger zirvede gibi duruyor.Peki blogger bunu nasıl yapıyor? tabiki kendini yenileyerek ve ihtiyaçları tespit edip bunları en verimli ve kolay şekilde bloggerlerin kullanımına sunarak yapıyor.İşte bloggerde kesinlikle bir ihtiyaç olan öne çıkan yayın gadgeti blogger tarafından kullanıcılarına sunuldu.Uygulaması çok basit olan ve istediğiniz bir yazıyı seçerek başlık,açıklama ve resim de dahil olmak üzere bir yazınızı öne çıkan yayın olarak blogunuzda istediğiniz bir yerde görüntülemenize olanak sağlayan eklenti bloggerde yayınlandı.

Blogger Öne Çıkan Yayın Gadetini Blogunuza eklemek için:

1-Blogger Hesabınızla giriş yapın.
2-Yerleşim>Gadget Ekle yolunu takip edin.Aşağıdaki resimde görüldüğü gibi.Gadget Ekle linkini blogunuzda blogger öne çıkan yayınları nerede göstermek istiyorsanız oradaki linke tıklayın, yada ekleme işlemi bittikten sonra istediğiniz alana sürükleyip bırakın.
3-Gadget Ekle Linkine tıkladığınızda aşağıdaki gibi bir pencere açılacak.

Bu pencerede resimde gördüğünüz ve Blogger Öne Çıkan Yayın linkine yada okun olduğu yerdeki .+  işaretine tıklayın.
4-Öne Çıkan Yayın linkine tıkladığınızda aşağıdaki gibi bir pencere açılacak.
Bu penceredeki işlemleri resimde de gördüğünüz gibi 5 basamak halinde sizlere anlatmaya çalışalım.
1-Blogger Öne Çıkan Yayın gadgetinizin blogunuzda görünen başlık kısmını buradan giriyoruz.Örneğin Günün Yazısı,Ayın Tavsiyesi,Günün Yemeği,Bizden Bir Öneri veya Öne Çıkan Yayın gibi istediğinizi bu kısıma yazabilirsinz.
2-Blogger öne çıkan  yayın gadgetinde snippet kısmında iki seçenek görünüyor, yayın başlığını göster ve resmi göster,eğer bunların görünmesini istiyorsanız kutucukları işaretleyin, istemiyorsanız kutu içerisindeki işaretleri maus ile tıklayıp kaldırın.
3-Blogger Öne çıkan yayın gadgeti için göstermek istediğiniz yazıyı buradan seçiyoruz.Sağ tarafta yazı başlığını aratıp yada sol taraftaki etiketler kısmından bir etiket seçip bu etikete ait yazıların liste şeklinde 4 numara ile gösterdiğimiz kısımda açılmasını sağlayabilirsiniz.Size tavsiyem öne çıkan yayın olarak belirlemek istediğiniz yazının başlığını direk yazın ve aratın.
4-Blogger öne çıkan yayın gadgeti içerisinde görüntülemek istediğiniz yazı hangisi ise onu bir kere tıklayın.Tıkladığınızda arka tarafı resimdeki gibi hafif turuncu olacak (4 numara).
5-Blogger öne çıkan yayın gadgeti için yapmış olduğunuz seçim sağ tarafta ön izleme kısmında görünecektir, eğer öne çıkarmak istediğiniz yayın doğru ise 5 numarada gösterdiğimiz kaydet butonuna basın ve çıkın.
Artık blogger öne çıkan yayın gadgeti blogunuzda aşağıdaki gibi görünecektir.
Hayırlı olsun.

Kişisel blog yazarken platform olarak Blogger kullanıyorsanız, muhtemelen blogunuzu kendinize özgü ve şekil olarak güzelleştirmek içinde bir çaba sarf ediyorsunuzdur.Blogunuza eşsiz güzellik katacak olan Blogger Popüler yazılar widgetini görünüm olarak CSS kodları ile değiştirip blogunuzu göz alıcı yapmak ve internetteki birçok blog sayfalarından görünüm olarak bir adım önde olmanızı sağlayacak eklentiyi sizlerle paylaşacağız.Blogger Popüler yazılar eklentisi, görünüm farklılığı sayesinde sitenizi sürekli ziyaret eden takipçilerinde dahi dikaktini çekerek hedef kitlenizi arttırmaya yönelik bir çalışma olacak diye tahmin ediyorum.Bu eklentide anlatacaklarımızı blogunuzda Blogger Popüler yayınlar widgeti kurulu olanlar 5.Adımdan başlayarak takip edip uygulamaya başlayabilirler.Blogunda blogger popüler yayınlar eklentsisi hiç olmayanlar 1. maddeden başlasınlar.

Blogger Popüler Yayınlar Eklentsi Kurulumu

1-Blogger Hesabınızla giriş Yapın.
2-Yerleşim>Gadget Ekle Yolunu Takip Edin.
3-Açılan Pencerede Popüler Yayınlar Gadgetini tıklayın, aşağıda resimde görüldüğü gibi.

4-Popüler Yayınlar Gadgeti Ekle Butonuna tıkladığınızda aşağıdaki gibi bir pencere açılacak, bu pencerede ilgili kısımlardaki ayarlamalar Türkçe olarak verilmiştir,bunları kendinize göre ayarlayın.(Snippet yazan kısım, ilgili yazıdan kısa bir özet alarak görüntülensin/görüntülenmesin)

5-Bundan sonra anlatacaklarımız ise Blogger Popüler Yayınlar Eklentisini şekil olarak değiştirmenize yarayacak bilgilerdir.

 Aşağıda yer alan 5 farklı şekildeki blogger popüler yayınlar eklenti şekli için önce script kodu ekliyeceğiz ve ardından beğendiğimiz bir görünümün CSS kodunu alıp blogumuza uygulayacağız.

Blogger Popüler Yayınlar Eklentisini şekil olarak değiştirmek için ekliyeceğimiz scrip kodu:

Blogger>Şablon>Htmlyi Düzenle Yolunu takip edip HTML kodları içeriisnde Ctrl+F yardımı ile </head> kodunu aratıp bulun ve aşağıdaki kodu kopyalayıp bulduğunuz </head> kodundan önceki kısma yapıştırın.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

6-Şimdi ise aşağıdaki Popüler yazılar stilinden hangisini beğeniyorsak onun kodunu alıp, Şablon>HTML'yi Düzenle yolunu takip edip HTML kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu bulup ilgili stilin altında bulunan CSS kodunu kopyalayıp bulduğumuz ]]></b:skin> kodunun üst satırına yapıştırıyoruz.

Blogger Popüler Yayınlar Eklentyisi Stil 1: (Resim Üzerinde Kutu Şeklinde Başlık)

<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>

Blogger Popüler Yayınlar Eklentisi Stil 2:(Resim Altında Başlık ve Açıklama)

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style> 

Blogger Popüler Yayınlar Eklentyisi Stil 3:(Renkli Kututlar içinde Açıklama)

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

Blogger Popüler Yayınlar Eklentyisi Stil 4:(Kare Kutucuk Şeklinde)

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

Blogger Popüler Yayınlar Eklentyisi Stil 5:(Numaralı Kutucuklar Halinde)

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>

Son olarak Şablonu kaydet deyip çıkıyoruz.
Eğer verilen kodları doğru yerleştirdiyseniz seçtiğiniz Blogger Popüler Yayın Eklenti Stili sitenizde görünecektir.

Blogger jQuery tab menu ekleme yöntemlerinden en basitini ve yazı içerisinde kullanımı en kolay olanı blogunuza uygulama yöntemini sizlerle paylaşacağız.Blogger tab menu ne işime yarayacak diyenleriniz olabilir, aslında blogger tab menuyu her yerde kullanabilirsiniz, sizin hayal gücünüze ve yaratıcılığınıza kalmış bir durum yine de bir örnekle açıklamaya çalışayım;

Örnek:Yemek tarifleri yayınladığınız bir blogunuz olsun, bu blogunuzda herşeyi alt alta çarşaf liste şeklinde yayınlamaktansa tab menuyu kullanarak birinci taba kullanılacak malzemeler, ikinci tab kısmına hazırlanışı,üçüncü tab kısmına videolu anlatım, dördüncü taba da resimleri koyarak ziyaretçinizin bir tıkla istediği tarif içerisinde istediği bilgilere kısa yoldan ulaşmasına ve sayfanızda ziyaretçi 1.tab kısmına göz atarken diğer tabdaki yazılarınızında bir yandan yüklenmesi için zaman kazanarak sayfa boyutunuz büyük olsa bile hızlıca yüklenmesini sağlamış olursunuz, yani ziyaretçi hiç beklemeden bütün veriler yüklenmiş olur.Bu sadece basit bir örnekti, siz bunu kendinize göre istediğiniz şekilde uyarlayabilirsiniz.
DEMO GÖRÜNÜM

Bloguma Blogger Tab Menu nasıl ekleyebilirim?

1-Blogger hesabınızla giriş yapın.
2-Blogunuzun kodlarını her ihtimale karşı yedekleyin.(Blogger yedek alma)
3-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
5-Aşağıdaki kodu kopyalayıp  4.adımda bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.

/*-----Shortcode Tabs--------*/
.sc-tab ul.tabset.tabs li a.active{
border-bottom: 1px solid #70CF0A;
border-top: 3px solid #70CF0A;
padding: 8px 10px 10px 10px;
background: #70CF0A;
color: #fff;
border-left: 1px solid #70CF0A;
border-right: 1px solid #70CF0A;
}
.sc-tab ul.tabset.tabs li a:hover {
background: #70CF0A;
color: white;
border-color: #70CF0A;
}

.sc-tab ul.tabset.tabs {
margin: 0;
padding: 0;
list-style: none;
}
.sc-tab ul.tabset.tabs li {
float: left;
margin: 0px 4px 0px 0px;
border-right: 1px solid #EEE;list-style: none !important;
}
.sc-tab ul.tabset.tabs li a {
color: #666;
text-decoration: none;
    font-family: oswald, arial;font-size: 14px;
}
.sc-tab .tab-box {
clear: both;
position: relative;
z-index: 50;
top: 3px;
}
.sc-tab .tab_content {
display: none;
border: 1px solid #EEE;
padding: 1em;
border-bottom: 3px solid #70CF0A;
box-shadow: 2px 4px 6px #EEE;
font-family: arial;
font-size: 14px;
}
.sc-tab ul.tabset.tabs li a {
padding: 10px;
display: block;
border: 1px solid #EEE;
background: #fbfbfb;
position: relative;
z-index: 100;
} 

6-Yukarıdaki kodlar içeriisnde (5.adım) #70CF0A   kodunu değiştirip html renk kodlarını kullanarak istediğimiz renkte blogger tab menu oluşturabilirsiniz.
7-Html kodları içerisinde Ctrl+F yardımı ile </head> kodunu aratıp bulun.
8.Aşağıdaki kodu kopylayın ve 7. adımda bulduğunuz </head> kodunun üst satırına yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<script src='https://googledrive.com/host/0B4LZsB4bN2rdNE4yRjdreDBIcUU/blogokulu-kisa-kod.js' type='text/javascript'/>

9- Tab menu eklemek istediğiniz yere aşağıdaki kodu yapıştırıp ilgili kısımları doldurun.

[tab]
[content title="Tab 1"] Tab1 Açıklama için yazınızı yada resimlerinizi buraya ekleyin.[/content]
[content title="Tab 2"] Tab2 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. [/content]
[content title="Tab 3"] Tab3 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. [/content]
[/tab]

Tab1, Tab2,Tab3 yerine tab başlıklarını yazın.
Tab1 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. yazan yere içeriğinizi ekleyin.
Bütün bu işlemleri doğru yaptığınnızda blogger tab menu eklentisini artık istediğiniz her yere ekleyebilirsiniz.

Demo Görünüm Blogger İnstagram Eklentisini Bloguma Nasıl Eklerim?
1-Buraya tıklayarak siteye giriş yapıyoruz.
2-Açılan Sayfadaki formu aşağıdaki gibi dolduruyoruz.
3-Oluşturduğumuz blogger instagram eklentisinin nasıl göründüğüne bakmak isterseniz, yukarıdaki resimde görünen mavi renkli Preview butonuna basın.
4-Kod Oluşturmak için de yeşil renkli Generate code butonuna basın.Butona bastığınızda aşağıdaki gibi bir kod sayfası açılacak.
5-Yukarıdaki resimde gördüğünüz pencerede açılan ve sizin ayarlarınızı barından kodu kopyalıyoruz.
6-Blogger hesabımızla giriş yapıyoruz.
7-Kumanda Paneli>Yerleşim modunu açıyoruz ve buradan Gadget Ekle>HTML/JavaScript gadgetini seçiyoruz.
8-Açılan Gadget penceresine 4.adımda resimde gördüğümüz ve kopyaladığımız kodu yapıştırıyoruz.
9-Kaydet butonuna basıp çıkıyoruz.
10-Blogger İnstagram eklentisi blogunuza eklenmiş oldu.
Dilerseniz eklediğiniz Blogger İnstagram eklentisini yerleşim modundayken sürükle bırak yöntemi ile blogunuzda istediğiniz bir alana sürükleyip bırakabilirsiniz.
İnstagram hesabımızı burdan takip edebilirsiniz. @blogokulu

Blogger Dikey Menü Eklentisini bloguma nasıl eklerim?

<!-- Blogger Dikey Menu Code From http://www.blogokulu.org/ --> 
<style>
#v-menu {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#v-menu {
    width: 275px;
}
#v-menu ul {
    list-style: none;
    text-indent: 0px;
}
#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
}
#v-menu a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight:bold;
    font-variant: inherit;
    padding: 0px;
    color:#CCC;
    display: block;
    padding: 13px 50px;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwPMA91_hQACiyq1XKCZSizpPh-oBZVkON-2kGfDmLD2EdkAICQE4G08dnoXhtePNHAtTWutw0PH7P8Iv6XLd4p4DSaWHPIBfsd-xFEQa4yrmkLPL7-iPV2Xr24EJRvHEQVORF-ZTlXUu/s1600/menu-bg.png) no-repeat;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#v-menu a:hover {
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAzoaxN4A1msW8cgF36wLJsjfN42r-y3t5spUXp8scV0CY6Q898p62Boxn4OyxHOl_h0pLBp7rjvhYqR4fS77vI80ytFd2dE15cyAMhhhu1y8S89NN4mskiW7hNyPm0XqQd91zOljE17yU/s1600/hover-bg.png) no-repeat;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
   
}
#v-menu a:visited {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAzoaxN4A1msW8cgF36wLJsjfN42r-y3t5spUXp8scV0CY6Q898p62Boxn4OyxHOl_h0pLBp7rjvhYqR4fS77vI80ytFd2dE15cyAMhhhu1y8S89NN4mskiW7hNyPm0XqQd91zOljE17yU/s1600/hover-bg.png) no-repeat;   
}
#v-menu a:active {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAzoaxN4A1msW8cgF36wLJsjfN42r-y3t5spUXp8scV0CY6Q898p62Boxn4OyxHOl_h0pLBp7rjvhYqR4fS77vI80ytFd2dE15cyAMhhhu1y8S89NN4mskiW7hNyPm0XqQd91zOljE17yU/s1600/hover-bg.png) no-repeat;   
}
</style>
<div id='v-menu'>
<ul>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
</ul>
</div>
<!-- Blogger Dikey Menu Code From http://www.blogokulu.org/ -->

Kod içerisinde mavi renkle belirttiğimiz "URL ADRESİNİZ" kısmına adresimizi yazıyoruz, kırmızı yere ise menudeki ismi yazıyoruz.
Örnek:

<li><a href="http://www.blogokulu.org/2014/11/blogger-dikey-menu-eklentisi-navigasyonlu.html">Blogger Dikey Menü</a></li>

gibi.

Uzun içerikleri olan yada yayınladığı yazılar çarşaf liste gibi uzayıp giden bloglarda ziyaretçi maus tekeri  ile sabırla  aşşağılara kadar inebilir, ama aynı sabrı gösterip yukarı çıkma eziyetine katlanmadan blogunuzu terkedebilir.Blogunuza ekliyeceğiniz basit bir yukarı çık buton ile ziyaretçileri bu çileden kurtarmak sizin elinizde. Şimdilerde birçok kaliteli sitede kullanılan "sayfa başına dön" yada "yukarı çık" butonu olarak adlandırılan bu eklentiyi en basite indirgeyerek sizlerin kullanımına sunuyoruz.Yukarı Çık butonunu en basit yöntem olan Gadget Ekleme yöntemi ile blogumuza ekliyeceğiz.
Sayfa Başına Dön (Yukarı Çık) Butonunu eklemek için;
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip ediyoruz,aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıp kaydediyoruz.Yukarı Çık (Sayfa Başına Dön) butonu klullanıma hazır.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.blogokulu.blogspot.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha4XyoQo4Du4_zP2wEMXNv8XWE0t1Hzsef1GRAQ8wzFTR82JOARIF3zPxbowpy-Z1q6ba5o8ezI7pqxBgZ7PN3wvA360_Dodil2Bq4arA6U5xYn56EEEX-lzJcnDQdiZmsHDU3fBMzSiQ/s1600/hb-arrow-up.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
    controlattrs: {offsetx:5, offsety:25}, //offset of control relative to right/ bottom of window corner 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport) //if control is positioned using JavaScript 
            this.$control.css({opacity:0}) //hide control immediately after clicking it 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                .attr({title:'Sayfa Başına Dön'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>

Kod içerisinde kırmızı renkle belirttiğimiz link,yukarı çık butonuna ait resmin linki,buraya kendi tasarladığınız bir yukarı çık butonuna ait resim linki ekleyerek blogunuza uygun bir tasarım yaratabilirsiniz.
offsetx:5
offsety:25 değerlerini değiştirerek yukarı çık butonun blogunuzdaki konum ayarlamasını yapabilirsiniz.
offsetx;x düzlemi üzerinde (yatay),
offsety;y düzlemi üzerinde (dikey) konum ayarlaması yapılabilir.

Blogger üzerinden ticaret yapıp satış yapan bir çok insan vardır, işyerlerini yada konumlarını uzun uza tarif etmektense google maps yardımıyla konumunuzu yada adresinizi harita üzerinden insanlara direkt olarak tarif edebilir ve gösterebilirsiniz.Yada beraber yazıştığınız bloggerle bir buluşma adresi ayarlayıp bu adresi blogunuzdan tam nokta olarak harita üzerinden davetiye yazınızla birlikte yayınlayabilirsiniz.Biz blogunuza haritalı adres eklemeyi anlatalım kullanımı size kalmış, nasıl kullanmakisterseniz?

Ben web işinden anlamam nasıl yapacağım ben beceremem demeyin, öyle bir anlatacağız ki bunu herkes kolaylıkla yapabilecek.Yapamayan olursa da elimizden geldiğincd yardımcı olacağız.Sitesine yada bloggere google harite eklemek isteyenler bundan sonrasını dikkatle okusunlar:

1-Google Mapsi ziyaret ediyoruz. Siteyi ziyaret ettiğimizde aşşağıdada gördüğümüz resimdeki gibi direk türkiye haritasının olduğu bir pencere açılacak.

2-Açılan bu pencerede yukarıda gösterdiğimiz adres arama kutucuğuna kendi adresimizi,yani tarif edeceğimiz,sitemize harita ile ekliyeceğimiz adresi yazıyoruz.
Örnek olarak ben bir okul ismi yazacağım, okulun ismi çaldağ ilkokulu olsun ve bu okulu bulup haritadaki yerini yazının sonuna ekliyeceğim.
Adres arama kısmına: Çaldağ ilköğretim okulu yazdık ve mercek işaretine tıkladık.Aşağıdaki resimde de gördüğümüz gibi adresimizi bulduk.
Adresimizin doğruluğunu teyid ettikten sonra  haritada üzerine adresimizin bulunduğu yere birkere tıklyoruz ve aşşağıdaki gibi işaretin çıkmasını sağlıyoruz.İşareti harita üzerinde gördükten sonra yukarıdaki resimde gösteridğimiz google maps ekranının sağ alt köşesinde bulunan 3 nolu kısımdaki dişli çark simgesine tılıyoruz.

3-Dişli çark simgesine tıkladığımızda açılan menü içerisinde Haritayı paylaş ve yerleştir kısmına tıklıyoruz.
4-Haritayı Paylaş ve yerleştire tıkladığımızda bir pencere açılacak bu pencerede de Haritayı yerleştir sekmesini tıklıyoruz.


5-Haritayı yerleştir sekmesine tıkladığımızda aşşağıdaki gibi birpencere açılacak ve kutucuk içeriisne aldığımız yerdeki iframe kodunu kopyalıyacağız.Aynı zamanda ekliyeceğimiz haritanın boyutlarını ayarlamayı da buradan yapıyoruz.Sol tarafta bulunan boyut ayarlama penceresinden sitemize yerleştireceğimiz yere uygun bir boyut seçiyoruz ve kodu kopyalıyoruz.
6-Kopyaladığımız kodu blogumuzda her hangi bir yazı içerisinde HTML moddayken ekliyoruz.



Gadget olarak eklemek istiyorsak da Yerleşim>Gadget Ekle>Html Javascript yolunu takip edip gadget olarak ekliyebiliyoruz.

Aşşağıda Çaldağ İlöğretim Okulu adresini Haritalı Olarak Blogumuza Ekledik.

Yukarıda yazdığımız yazıyı okuyarak sizde blogunuza google haritalı adres ekliyebilirsiniz.

Blogunuza gelen ziyaretçileri blogunuza bağlayacak ve onların da konu açabilecekleri kendilerinden birşeyler yazabilecekleri blogger forum ekleme eklentisi ile sizleri tanıştırıp blogunuzu  daha zengin ve çeşitliliğin olduğu bir blog haline getireceğiz. Ziyaretçileriniz kendi aralarında tartışılacak konular açacak, yorumlar ve yazılar yazacak bu sayede blogunuza bağımlı bir topluluk oluşacak, kulağa hoş geliyor öyle değil mi? :) Bunu nasıl yapacağım? çok zor!!! ben kodlardan anlamıyorum,benim hiç bilgim yok diyen, okuması yazması olan herkes, bloguna forum ekleme ile ilgili yazdığımız bu yazıyı okuduğunda blogger bloguna forum eklemiş olacak, ekleyemeyen arkadaşlarada eğer isterler ise yardımcı olacağım.Anlatıma başlamadan önce blogger forum eklentisi nin nasıl göründüğüne bakmak isterseniz demo görünümden bakabilirsiniz.


Blogger aracılığıyla yapmış olduğunuz blogunuza yada sitenize forum sayfası ekleme:
1-Blogger hesabımızla giriş yapıyoruz.
2- Sayfalar butonuna tıklayıp yeni bir sayfa açıyoruz.
3-Yeni açtığımız sayfanın başlık kısmına FORUM diye yazıyoruz ve HTML modunu açıyoruz.
4- Nabble.com sitesine giriş yapıp gerekli bilgileri dolduruyoruz.
5-Kayıt işlemi başarılı bir şekilde gerçekleştiği zaman aşşağıdaki gibi bir pencereyle karşılaşacaksınız.
6- Yukarıdaki resimde (5. maddede) kırmızıyla BLOG OKULU yazan yerin hemen üstünde SONRAKİ ADIMA GEÇ butonu bulunmakta, bu butona tıklıyoruz.Butona tıkladığımızda bir kod çıkıyor, bu kodu kopyalıyoruz.
7-Kopyaladığımız kodu 3. adımda açık bıraktığımız FORUM başlıklı sayfamıza HTML modundayken yapıştırıyoruz ve ardından buradaki YAYINLA butonuna tıklıyoruz.
8-Bloggerden oluşturduğumuz bloga forum sayfası eklemiş olduk böylece.Bundan sonra gelsin yorumlar.
Gördüğünüz gibi forum sayfanız artık blogunuzun içinde çıkıyor.Forum sayfanıza Ana Sayfadan Link vermeyi unutmayın Menülerin içine Forum diye yeni bir menü ekleyin ki ziyarteçileirniz Blogunuzda bir Forum sayfası olduğunu anlasınlar yada forum sayfanızı bulabilsinler.
Sorularınızı yorumlar kısmından sorabilirsiniz.Teşekkürler...

Bloumuzda yukarıdaki oyunlar widgetini blogunuza ekleyip ziyaretçilerinizin eğlenmesini ve hoş vakit geçirmesini sağlayacak oyunlar widgetini sizlerle paylaşalım dedik.Yapmanız gereken işlem çok basit;Kumanda Panelinden>Yerleşim>Gadget Ekle yolunu takip edip,Html/Javascript gadgeti içerisine yapıştırıyoruz.Yada bir sayfa ekliyerek buradaki kodları HTML modundayken sayfamıza yapıştırıyoruz,yada normal bir yazı yayınlar gibi Yeni kayıt oluştur dedikten sonra yine html modunda kodu yapıştırıp oyunları sitemize ekliyebiliriz.Bu işlemi yaptıktan sonra artık blogumuzda oyunlar olacak ve bu oyunlar sürekli güncellenecek.Blogunuzu biraz daha renklendirecek güzel bir eklenti.
DEMO GÖRÜNÜM

<style type="text/css">
#post-gallery {
  width:525px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:none;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
margin-top:-75px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .bgt-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmBF2CPZEaqueE49oi_OK2TXiZonLTGSr2HQcELf2L7h-RozSVNu9d5WQqYVc4Ob7kCQ2cHZdZFNkGypozbVFBybsZ1pHp88BCYwZYflTCkhHAh5pBXM0RrGXdGpfcF5KM7e4s4EQMIk/s1600/395.GIF') no-repeat 50% 50%;
  width:71px;
  height:71px;
}
#post-gallery .bgt-item img {
  width:71px;
  height:71px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .bgt-item .bgt-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #FA7C19;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .bgt-item .bgt-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .bgt-item:hover .hidden {display:block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var bgtTitle     = "Oyunlar Yükleniyor...",
    numposts    = 56,     
    numchar     = 190,     
    rcFadeSpeed = 610,   
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-BrJVj225KE5ZWhVzYx8esfowADN6ePgO1jRfa9V1Vpq6gt1CdaD0FwBXVT2s1LDq6YLgblSr_xwOy4t-LTrLL6losbQRMg9deg1XyNZxYeeihzfztojn6KLLTxp9Ow1ZxKqrKPwZOhY/s1600/no-image-ava.jpg", 
    blogURL     = "http://www.arabaoyunlari04.com";
</script>
<script src="https://googledrive.com/host/0B4LZsB4bN2rdNE4yRjdreDBIcUU/recent-post-blogokulu.js" type="text/javascript"></script>

kod içerisinde
numposts = 56, gösterilecek oyun sayısını,
width:525px; ekleyeceğiniz widgetin genişlik değerini belirtir, bunları değiştirerek kendinize göre ayarlama yapabilirsiniz.

Blogger de yayınladığınız yazıların hemen altına ekliyeceğiniz sosyal paylaşım butonları ve beğenme butonları sayesinde blogger blogunuzu sosyal paylaşım siteleri ile iç içe geçirip müthiş bir köprü atacak,Bu bölümde blogger yazı altı, yatay sosyla paylaşım butonlarını blogunuza nasıl ekliyebileceğinizi anlatacağız.Unutmayalım arkadaşlar blog yazmak zor değil,blog hazırlamak da zor değil,blogumuza ziyaretçi çekmek yazdıklarımızın okunurluluğunu arttırmak, asıl bu işin zor kısmı.Herkes birşeyler yazıyor çiziyor,ama kim okuyor? kime ne faydası var? bunların, diye kimse sormuyor kendine.Ortalık blog çöplüğüne dönüşmüş adeta.Bundan dolayı blog okulu blogların gerçekten işine yarayacak, sadece blogunuzda var olsun diye eklentiler paylaşmıyor.Blogger yazı altı eklentisini eklediğinizde bir kişi yazınızı okuduğunda ve yazı sonuna geldiğinde, eğer yazınızı beğenmişse sosyal paylaşım sitesinde paylaşacak ve burdan size ziyaretçi kazandıracak faydalı bir eklentiyi blogunuza nasıl ekliyebileceğinizi anlatalım:

Eklenti içeriisnde bulunan butonlar: Facebook beğen butonu Twitter Paylaş butonu Google+ Butonu Blogger Paylaş Butonu Linkedin Butonu Pinterest Butonu E-Posta Abonelik Butonu

DEMO GÖRÜNÜM1)Blogger hesabımızla giriş yapıyoruz.
2)Her ihtimale karşı blogger şablonlonumuzu yedeğini alıyoruz.
3)Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip ediyoruz.
4)Widget Şablonlarını Genişlet Kutucuğunu işaretliyoruz.
5)Ctrl+F yardımı ile kodlar içerisinde </head> kodunu aratıp buluyoruz.
6)Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodunun hemen üst tarafına yapıştırıyoruz.

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ab0ca80d-f3e2-4a23-96ba-c400631a4619", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

7)Yine Html kodlarımız içerisinde <data:post.body/> kodunu aratıp buluyoruz.
8)Aşağıdaki kodu kopyalayıp bulduğumuz <data:post.body/> kodunun hemen altına yapıştırıyoruz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center' class='doncaprio-share-buttons'>
<span class='st_fblike_hcount' displayText='Facebook Like'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_googleplus_hcount' displayText='Google +'></span>
<span class='st_blogger_hcount' displayText='Blogger'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
<span class='st_email_hcount' displayText='Email'></span>
</p>
</b:if>

9)Bir ön izleme yapalım,şablonda sıkıntı yoksa ,şablonumuzu kaydedip çıkıyoruz.Bu haliyle, bir yazınız tıklandığında yazı sonunda blogger sosyal paylaşım butonlarınız görünecektir.İstemediğiniz bir paylaşım butonu var ise 8. adımda verdiğimiz kodlar içerisinde mavi renkle verdiğimiz satırlardan sildiğinizde o paylaşım butonu kaldırılmış olur.Örnek olarak linkedin payşaım butonunu istemiyorsunuz.

<span class='st_linkedin_hcount' displayText='LinkedIn'></span>

satırını kaldırdığınızda linkedin paylaşım butonunu da kaldırmış olursunuz.
Not:Blogger yazı altı sosyal paylaşım butonlarını yazı üstünde de göstermek istiyorsanız yada sadece yazı üstünde çıksın istiyorsanız,yapmanız gereken;
8.adımda verdiğimiz kodu <data:post.body/> kodunun hemen üst tarafına yapıştırıyoruz.
Blogger sosyal paylaşım butonlarınız kullanıma hazır hayırlı olsun:) 

Bloglardaki slayt alanlarının, yada türk bloggerler arasında blogger manşet alanı olarak adlandırılan geçişleri farklı animasyonlarla süslenmiş blogger nivo slider olarak bilinen müthiş bir blogger slayt alanı yada blogger manşet alanı eklentisi ile karşınızdayız.Blogger nivo slider slayt alanını blogunuza ekleme işlemi oldukça basit.Üstellik emsallerine göre yani bu kadar kaliteli olan slayt alanlarına göre ilk etapta açılış hızı da oldukça iyi.

Yani blogunuzun açılış hızını pek te etkilemeyen ve blogger slayt alanları içerisinde benimde en çok beğendiğim blogger slayt alanı eklentisi olan blogger nivo slider i blogunuza eklemek için:
DEMO GÖRÜNÜM 1-Blogger hesabımızla giriş yapıyoruz.Her ihtimale karşı blogger şablonumuzu yedeğini alıyoruz.
2-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.
3-Html kodları içerisinde Ctrl+F yardımı ile </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

<!-- blogger nivo slider www.oyun04.com araba oyunlari code start-->
<style type="text/css">
/* <![CDATA[ */
    #blogokuluSlideContainer           {position: relative;display: block;}
    #blogokuluNivoSlider               {position:relative;width:600px  !important;height:300px  !important;min-height:225px  !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnT1PECCci_pimXmHSpwiylh4-LNYoBKXKG0HQNQ6in2wggaFm7x7GUyHmQw0svlt59sPmiD_fyp2GUZwSWenEXgteMPcofGIx8KKXgKEpDm1_Dq4lVuWF12nuqwclgacSSxFC89xGzndh/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);box-shadow: 0px 1px 5px rgba(0,0,0,0.4);}
    #blogokuluNivoSlider img           {position:absolute;top:0;left:0;display:none}
    .nivoSlider                  {position:relative;width:100%;height:auto;}
    .nivoSlider img              {position:absolute;top:0;left:0}
    .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
    .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
    .nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
    .nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
    .nivo-box img                {display:block}
    .nivo-caption                {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .nivo-caption p              {padding:5px;margin:0}
    .nivo-caption a              {display:inline!important}
    .nivo-html-caption           {display:none}
    .nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjunzq0ma3IJ7vXlZX3_DHL3KdZ8WKqwt6nhtpOxiAwPKLvOtwMJDHlFO8WlqIdH9FLlozDKacaAbR-Pn1nq9ef26la2xr35mwRnN_zNP_ESKqvC-pHQOX6VglMeeGelorRT3meKtxbQRYo/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0}
    .nivo-prevNav                {left:10px}
    .nivo-nextNav                {background-position:-30px 0!important;right:10px}
    .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
    .nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4dFpb3mfXOPlsDkbMZoP8nTnLMy8gldAgx7z8et4gZZkYGAjWhnLRZP-YA4KQKxaR9JNOrJChj2vzDfHpmYyI_183mhy4evIXU1HwV682NA-DQmE9d5JMqkkwnJZGC0w9txFVQeLZvia/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
    .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function($) {
    $('#blogokuluNivoSlider').nivoSlider({
        effect           : 'random',
        slices           : 15,
        boxCols          : 8,
        boxRows          : 4,
        animSpeed        : 500,
        pauseTime        : 3000,
        startSlide       : 0,
        directionNav     : true,
        directionNavHide : true,
        controlNav       : true,
        keyboardNav      : false,
        pauseOnHover     : true,
        captionOpacity   : 0.8
    });
});
/* ]]> */
</script>
<!-- blogger nivo slider www.oyun04.com araba oyunlari code end-->

bu kod içerinde: renkli olarakta belirttiğimiz. 
width:600px blogger slayt alanı genişlik değeri

height:300px blogger slayt alanı genişlik değeri
        animSpeed    : 500, slayt geçiş hızı
        pauseTime    : 3000, bir resmin slaytta bekleme süresi
        startSlide      : 0, hangi slayttan başlayacağını seçiyoruz.
daha sonra şablonumuzu kaydedip çıkıyoruz.
4-Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip aşağıdaki kodu kopyalayıp açılan gadget içerisine yapıştırıyoruz.

<div id="blogokuluSlideContainer">
    <div id="blogokuluNivoSlider">
<a href="URL ADRESİ-1"><img src="RESİM URL ADRESİ-1" title="RESİM AÇIKLAMA SATIRI-1" alt=""/></a>
<a href="URL ADRESİ-2"><img src="RESİM URL ADRESİ-2" title="RESİM AÇIKLAMA SATIRI-2" alt=""/></a>
<a href="URL ADRESİ-3"><img src="RESİM URL ADRESİ-3" title="RESİM AÇIKLAMA SATIRI-3" alt=""/></a>
<a href="URL ADRESİ-4"><img src="RESİM URL ADRESİ-4" title="RESİM AÇIKLAMA SATIRI-3" alt=""/></a>      
    </div>
</div>

kod içerisinde:
URL ADRESİ-1:Yerine blogger salyt alanındaki resme tıklayınca yönlendirmek istediğimizadresin URL sini yazıyoruz.
RESİM URL ADRESİ-1:Slayt alanında görüntülemek istediğimiz resmin URL adresini yazıyoruz. 
RESİM AÇIKLAMA SATIRI-1:Blogger Slayt alanı altında görünen açıklama satırı.Bu kısma reklediğiniz resimle ilgil kısa bir açıklama yazabilirsiniz.
Yaptığınız değişiklikler neticesinde görünüm aşağıdaki gibi olacaktır.
<a href="www.blogokulu.org"><img src="http://imageshack.us/a/img89/8497/arabaoyunlari.png" title="Blogger Eklentileri,blogger widget ve blogger hakkında güzel şeyler bulabileceğiniz bir blog.Blog Okulu" alt=""/></a>
Gerekli eklemeleri ve düzenlemeleri yaptıktan sonra eklediğiniz gadgeti blog kayıtlarının üzerine sürükleyip bırakın.Blogger slayt alanı,blogger manşet alanı kullanıma hazır.

Blogger Sosyal Paylaşım ve Abonelik Butonları Eklentisinin ingilizcesi "wood model" olan ahşap modellisini sunuyoruz.İçerisinde Blogger sayfanızdan direkt olarak Facebook,Twitter,RSS ve blog aboneliği, yani ziyaretçilerin e mail adreslerini girip kaydet butonuna bastıkları takdirde yazılarınızın kişilerin mail adreslerine gitmesini sağlayacak eklentiyi blogunuza nasıl ekliyebileceğinizi anlatacağız.

Demo Görünüm
1-Blogger Hesabımızla Giriş Yapıyoruz.
2-Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip ediyoruz.
3-Aşağıdaki kodu kopyalayıp Açılan Gadget içerisine yapıştırıyoruz.

<!-- Start Gadget Code From http://www.oyun04.com/ -->
<style type="text/css">
 /* Delete form Here*/  
img.beintouch:hover {
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
/* Delete to Here*/
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS_k7AbksumOcG6iKF6AIxtJWtLDEtn3ggs9U_a6CHs6VwlCiOXmDVnNEMb-lWiV_A1PSh5NyC0Wih3-oSVbD62j8tAXTFhyphenhyphenEsaSStC8nGKJPnFlYwbqF5zl42VsMj0Wypirt-SdQzVu4/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: black;
    cursor: pointer;
    font-weight: bold;
    margin-left:0 auto ;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 6px #000000;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/Blog-Okulu/270630239670726"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsrjcZUz7bj2NuIICcMPcEdXenQMOABjNBfnk4j1P5ArNGgtXK5DdNcqHqePY7uuGp_2m51uspkgGJODoAo6bcFsLnwjDR2VCmRbBz-Bl7J-YP78QE0oiFPdHJYKDXdjH7hyrvU1pCzoM/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/blogokulu/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2PUJ1D2sUIhNPqPAkxg1HMhPMaGECgG2EsQCckdK0goI-w5RWaqYAkwTQtX_1-s94kBlA5qgsxXMmnNa21nJhTXc1ohpzzv1RuIq9xzVBg7v7wDoySNOi6jv7JErxQ4bMdvJBWxlftM/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/blogokulu" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijEQitYgCf6a9gnoezBmfcaJwjbnPhcIyncl6-FZhHi6zlfycWt8XyESj7N9Oi8qR7LDZ-ELTv3cFNrBMWqxVDHec6atwVMam0bA4ZUPLwZcj6NH7IOPquQ4mlSalKTmDMM6deS8LazzA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
<div><b>Yazılarımız E-Mail Adresinize Gelsin</b></div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="NetOopsBloggerTricks" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Mail Adresinizi Girin..." onfocus="if (this.value == &quot;Mail Adresinizi Girin...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Mail Adresinizi Girin...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Kaydet" title="" class="ebutton" alt="" />
</form>
<!-- End Gadget Code From http://www.oyun04.com/ -->

Kod içerisnde renkli olarak belirttiğimiz:

1. http://www.facebook.com/pages/Blog-Okulu/270630239670726 Adresi yerine kendi facebook adresinizi.
2. http://twitter.com/blogokulu Adresi yerine kendi Twitter adresinizi.
3. http://feeds.feedburner.com/blogokulu Adresi yerine kendi RSS adresinizi yazıyorsunuz.