Blogger Reklam Kutusu Oluşturma

Merhabalar, bir blog için en önemli şeylerden bir tanesinde onca uğraştan gelir elde etmek.

Peki bu nasıl olur ?

Sitenizde özgün içerik var ve yeterliyse AdSense'ye başvurabilirsiniz. Bu sayede reklamlardan para kazanabilirsiniz, veya kendiniz özel reklam alabilirsiniz. Bu konu için gerekli olan şeyler birkaç kod ekleyerek sitenize reklam bölümü oluşturmanız gerek. Bunun için yapmanız gerekenler.

-Blogger hesabınıza giriş yapın ve blogunuzun panelinden Tema > HTML'yi Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Ardından aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üstüne ekleyin ve şablonu kaydedin.

/* Reklam Kutusu CSS - Tasarım: ibrahimcantr.blogspot.com.tr */
.reklam_kutusu {text-align: center;}
.reklam_kutusu  img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #eee;}
.reklam_kutusu  img:hover {border:1px solid #ddd}
.reklam_kutusu  img.no-limit {border:0;}

-Blogger panelinden Yerleşim bölümünü açın ve Gadget Ekle > HTML/JavaScript ile bir widget oluşturun ve ardından aşağıdaki kodları ekleyin ve düzenlemeyi kaydedin.

<div class="reklam_kutusu">
<a href="reklam bağlantı adresi" title="reklam başlığı"><img class="no-limit" src="resim URL" alt="resim etiketi" width="125" height="125" /></a>
<a href="reklam bağlantı adresi" title="reklam başlığı"><img class="no-limit" src="resim URL" alt="resim etiketi" width="125" height="125" /></a>
<a href="reklam bağlantı adresi" title="reklam başlığı"><img class="no-limit" src="resim URL" alt="resim etiketi" width="125" height="125" /></a> 
<a href="reklam bağlantı adresi" title="reklam başlığı"><img class="no-limit" src="resim URL" alt="resim etiketi" width="125" height="125" /></a> 
</div>

İyi Günler.

Blogger Renkli Kategori Widget'i

Son Zamanlarda Popüler Olan Bu Widget'i Sizlerle Paylaşma Gereği Duydum.

Öncelikle Yapmanız Gereken İşlemler Şöyle;

Blogger > Şablon > HTML'yi Düzenle

Şimdi İse Kodlarımızı Ekleyelim.

Ctrl + F Tuşuna Basarak </head> Kodunu Bulalım.

Ve Hemen Üstüne Şu Kodları Ekleyelim:

<style type="text/css">

/* Renkli Kategori CSS */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:0;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;transition:all .3s}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:2px;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{background:#45a2db;position:relative;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:all .3s}
#sidebar-wrapper .label-size a{display:inline-block;color:#fff;padding:4px 6px;font-weight:400;transition:all .3s}
#sidebar-wrapper .label-count{display:inline-block;background:#3a91c7;color:#fff;padding:5px 8px;text-align:center;transition:all .3s}
#sidebar-wrapper .label-size a:hover{color:#fff;text-decoration:underline}
#footer-wrapper .label-size{background:#2e2e2e;color:#eee;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:initial;}
#footer-wrapper .label-size a{display:inline-block;color:#eee;padding:4px 6px;font-weight:400;transition:all .3s}
#footer-wrapper .label-size a:hover {color:#fff;text-decoration:underline}
#footer-wrapper .label-count{white-space:nowrap;background:#2e2e2e;display:inline-block;color:#eee;padding:5px 8px;text-align:center}
#footer-wrapper .Label li{padding:5px 0;margin:0;text-align:left;border-bottom:1px solid #444;transition:all .3s}
#footer-wrapper .Label li a {color:#eee;transition:all .3s;}
#footer-wrapper .Label li span{background:#2e2e2e;float:right;color:#eee;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;transition:all .3s;}
#footer-wrapper .Label li a:hover,#footer-wrapper .Label li:hover,#footer-wrapper .Label li span:hover {color:#fff;text-decoration:underline}
</style>

Daha Sonra Yerleşim Bölümünden ''Gadget Ekle'' Daha Sonra

Label'i İşaretleyip Ekle Diyoruz. Ve Şablonu Kaydediyoruz.

İyi Günler.

Merhaba Dünya !

Merhabalar, Ben İbrahim Can Bu Açmış Olduğum Kişisel Bloguma HoşGeldiniz...

Bu Blogda Neler Olacak ?

- SEO

- Temalar

- Widget'lar

- Blogger Destek

- Blogger İpuçları

Ne Üzerinde Yoğunlaşılacak ?

- Genellikler Tema Ve Kodlar İle İlgileneceğim.

İlerleyen Zamanlarda Daha Çok Birlikte Olacağız.

İyi Günler.

Renkli Materyal Yazı Kutuları

Sade, Şık Ve Güzel Görünen Bir Renkli Materyal Yazı Kutuları

Öncelikle Yapmamız Gereken İşlemler Şöyle:

Blogger > Şablon > HTML'yi Düzenle

Şimdi CSS Kodlarımızı Ekliyelim.

Ctrl + F Tuşuna Basarak ]]></b:skin> Kodunu Bulalım.

Ve Hemen Üstüne Şu Kodları Ekleyelim:

/* Renkli Materyal Yazı Kutular */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}

Artık Her Şey Tamam Şimdi İse Demolarını Görelim:

İstediğiniz Yazıyı Buraya Yazınız.

<div class="colorbox purple">
İstediğiniz Yazıyı Buraya Yazınız.
</div>

İstediğiniz Yazıyı Buraya Yazınız.

<div class="colorbox blue">
İstediğiniz Yazıyı Buraya Yazınız.
</div>

İstediğiniz Yazıyı Buraya Yazınız.

<div class="colorbox green">
İstediğiniz Yazıyı Buraya Yazınız.
</div>

İstediğiniz Yazıyı Buraya Yazınız.

<div class="colorbox red">
İstediğiniz Yazıyı Buraya Yazınız.
</div>

İstediğiniz Yazıyı Buraya Yazınız.

<div class="colorbox orange">
İstediğiniz Yazıyı Buraya Yazınız.
</div>

İyi Günler.