YardimBlogger: Post

Post etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

1 Aralık 2015 Salı

Blogger postlarına adsense reklamı eklemek:İlk paragraftan sonra

Bu makalede size nasıl Blogger postlarına adsense reklamını ekleyebileceğiniz anlatacağım.Artık postlarınıza tek tek adsense reklamı yerleştirmeye gerek yok.Size vereceğim kodla adsense reklamı bütün sayfalarınızda gözükecektir.Bu kodun avantajı sadece bir kaç rakamla oynayarak adsense reklamlarınızı yayın içinde aşağı ve yukarı kaydırabilir,sağa,ortaya veya sola yerleştirebilirsiniz.Sadece kod içindeki bir sayıyı değiştirerek istediğiniz paragraftan sonra adsense reklamın gözükmesini sağlayabilirsiniz.Ayrıca unutmayın Blogger postlarına yerleştireceğiniz adsense reklamı ile daha çok para kazanabilirsiniz.Yapılan araştırmalara göre en çok gelir yayın içine yerleştirilen adsense reklamlarından gelmektedir.

Blogger postlarına adsense reklamı nasıl yerleştirilir?

Adım 1:Blogger hesabınıza giriş yapın,sırasıyla Şablon>HTML'yi düzenle kısımlarına tıklayın ve Ctrl+F yardımıyla arama kutusunu açın ve arama kutusuna alttaki kodu yapıştırıp bulun.Alttaki kodtan karşınıza birden fazla kod çıkabilir,siz ikinci kodu seçin.

<data:post.body/>

Adım 2:Yukarıda bulduğunuz kodun sağ ve soluna kırmızı renkle belirtilen kodları ekleyin.Altta olduğu gibi.Yada alttaki kodu kopyalayıp üstteki kodla değiştirin.

<div id='adsense-target'><data:post.body/></div>

Adım 3:İlk önce buradan adsense reklam kodunuzu dönüştürün.Sonra alttaki kodu adım 2'deki kodun hemen üstüne yapıştırın.Adsense kodunuzu ise alttaki kodta 'ADSENSE KODU YAPIŞTIR' denilen yere yapıştırın.

<b:if cond='data:blog.pageType == "item"'>
<div id='adsense-content' style="display:block;text-align: center">ADSENSE KODU YAPIŞTIR</div></b:if>

Adım 4:Şablonu kaydette tıklayın.Adsense reklamları şimdi psotlarınızda gözükecektir.Fakat psotların ortasında ve en üst tarafında.Bunları değiştirmek için alttaki adımları takip edin:

Adsense reklamını sağa veya sola kaydırmak

a-Eğer adsense reklamlarınızın post içinde sol tarafta gözükmesini isterseniz,adım 3'te bulunan <div id='adsense-content' style="display:block;text-align: center"> kodunu alttaki kodla değiştirin:

<div id='adsense-content' style="display: inline-block;float: left;margin:15px 15px 15px 0px">

Değişiklikleri kaydettikten sonra reklam alttaki resimde olduğu gibi gözükecektir.

b-Eğer adsense reklamının post içinde sol tarafta gözükmesini istiyorsanız,adım 3'te bulunan <div id='adsense-content' style="display:block;text-align: center"> kodunu alttaki kodla değiştirin:

<div id='adsense-content' style="display:inline-block;float:right;margin:15px 0px 15px 15px">

Değişiklikleri kaydettikten sonra adsense reklamı sağ tarafta gözükecektir.

Adsense reklamını post içinde aşağı yukarı doğru kaydırmak

Yukarıdaki değişiklikleri kaydettikten sonra adsense reklamı genellikle postların en üst tarafında gözükmeye başlar.Bunu aşağı doğru hareket ettirmek için alttaki kodu yukarıda adım 2'de bulunan kodun hemen altına yapıştırın.Adsense reklamını aşağı doğru kaydırmak için kırmızı renkle belirtilen parantez içindeki 0 rakımını arttırın,rakam artıkça reklam aşağıya kayar.Yukarı doğru tekrar kaydırmak için artırdığınız rakamı azaltın.

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById("adsense-content");
var target = document.getElementById("adsense-target");
var linebreak = target.getElementsByTagName("br");
if (linebreak.length > 0){
insertAfter(adscont,linebreak[0]);
}
</script>

25 Kasım 2015 Çarşamba

Blogger blog postlarınıza kayan sosyal medya butonları ekleyin

Blogger blogunuza ekleyeceğiniz bu sosyal medya butonları mouse ile birlikte aşağı veya yukarı doğru hareket etmektedir.Ayrıca paylaşım sayılarını da gösterir.Bu sosyal medya butonları normal bloglarda veya sitelerde yer alan diğer paylaşım butonlarından farklıdır,mükemmel bir şekilde özelleştirilmiş ve mobil uyumludur.Ekleyeceğiniz bu paylaşım butonları sayesinde ziyaretçileriniz postlarınızı kendi sosyal medya hesaplarında paylaşarak daha fazla ziyaretçi kazanabilirsiniz.

Bu kayan sosyal medya paylaşım bu tonları en üstte toplam paylaşım sayısı,altı sosyal medya butonu,ve butonları gizle seçeneğine sahiptir.

Blogger blogunuza kayan sosyal medya butonlarını nasıl ekleyebilirsiniz?

Adım 1:Her zamanki gibi Blogger hesabınıza giriş yapın ve Şablon kısmına tıklayın.Şablon kısmında HTML'yi düzenle'ye tıklayın.Karşınıza çıkacak HTML kodu içinde Ctrl+F yardımıyla <head> kodunu bulun ve hemen altına alttaki linki kopyalayıp yapıştırın:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>

Eğer şablonunuzda Google Javascript linki yoksa alttaki linki de üstteki linkin altına yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Adım 2:Yine Ctrl+F yardımıyla </head> kodunu bulun ve alttaki kodu bu kodun hemen üstüne yapıştırın:

<b:if cond='data:blog.pageType == "item"'>
< style type='text/css'>
/*------------------------------------------------------------
Floating Social Share Button Bar Version 2.0
Designed by:: http://www.twistblogger.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome 4.2.0
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.twistBlogger_SocialBar {
position: fixed;
bottom: 30%;
padding: 0;
left:0;
background: none;
text-align: center;
margin: 0 auto;
z-index: 99999999;
}
.twistBlogger_SocialBar label:hover {
cursor: pointer;
opacity:1;
}
.twistBlogger_SocialBar label {
text-align: center;
opacity: 0.4;
width: 50px;
background: #3A3939;
color: #FFF;
border: 0;
font-family: FontAwesome;
display: block;
font-size: 12px;
padding: 0px 0px;
border-radius: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
position: absolute;
line-height: 1.5em;
margin-top: 346px;
}
input.ShowHide_Button:checked + label {
transform-origin: 50% 0%!important;
-webkit-transform-origin: 50% 0%!important;
-moz-transform-origin: 50% 0%!important;
-ms-transform-origin: 50% 0%!important;
-o-transform-origin: 50% 0%!important;
opacity: 1;
-webkit-transform: translateX(0px) rotateY(-180deg);
-moz-transform: translateX(0px) rotateY(-180deg);
-ms-transform: translateX(0px) rotateY(-180deg);
-o-transform: translateX(0px) rotateY(-180deg);
transform: translateX(0px) rotateY(-180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
border: 1px solid #3A3939;
border-radius: 50px 0px 0px 50px;
width: 30px;
max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
-webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
margin-left: -75px !important;
}
input.ShowHide_Button {
display: none;
}
.twistBlogger_SocialBar .social_menu {
display: inline-block;
float: left;
list-style:none;
max-width:50px;
margin: 0;
padding: 0;
}
.twistBlogger_SocialBar .social_menu .button_facebook {
background: #3a579a;
}
.twistBlogger_SocialBar .social_menu .button_facebook:hover {
background: #314a83;
}
.twistBlogger_SocialBar .social_menu .button_twitter {
background: #00abf0;
}
.twistBlogger_SocialBar .social_menu .button_twitter:hover {
background: #0092cc;
}
.twistBlogger_SocialBar .social_menu .button_googleplus {
background: #df4a32;
}
.twistBlogger_SocialBar .social_menu .button_googleplus:hover {
background: #be3f2b;
}
.twistBlogger_SocialBar .social_menu .button_pinterest {
background: #cd1c1f;
}
.twistBlogger_SocialBar .social_menu .button_pinterest:hover {
background: #ae181a;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon {
background: #ea4b24;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon:hover {
background: #c7401f;
}
.twistBlogger_SocialBar .social_menu .button_linkedin {
background: #2554BF;
}
.twistBlogger_SocialBar .social_menu .button_linkedin:hover {
background: #224EB4;
}
.twistBlogger_SocialBar .social_menu .button_facebook .count,
.twistBlogger_SocialBar .social_menu .button_twitter .count,
.twistBlogger_SocialBar .social_menu .button_googleplus .count,
.twistBlogger_SocialBar .social_menu .button_pinterest .count,
.twistBlogger_SocialBar .social_menu .button_stumbleupon .count,
.twistBlogger_SocialBar .social_menu .button_linkedin .count {
color: #fff!important;
padding-top: 4px;
font-size: 13px !important;
line-height: 1.2em;
font-family: sans-serif;
font-weight: bold;
}
.twistBlogger_SocialBar .social_menu > ul {
margin: 0;
padding: 0;
list-style: none;
}
.twistBlogger_SocialBar .social_menu .share {
background: #FFF;
color: #807F7F;
font-size: 11px;
height: 45px !important;
}
.twistBlogger_SocialBar .social_menu .share .count.h4 {
font-size: 18px;
font-family: sans-serif;
color: #424242;
height: 25px !important;
line-height: 1.5em;
font-weight: bold;
margin: 0px !important;
}
.twistBlogger_SocialBar .social_menu .share .h6 {
padding-bottom: 3px;
font-family: sans-serif;
margin: 0px !important;
line-height: 1.5em;
font-size: 11px;
}
.twistBlogger_SocialBar .social_menu > ul > li {
margin: 0px 0px 0px 0px;
position: relative;
text-align: center;
list-style: none;
list-style-type: none;
padding: 0px;
border: 0px;
border-left: 0 solid rgba( 0,0,0,.4);
height: 50px;
width: 50px;
overflow: hidden;
display: block;
box-sizing: border-box;
background: none;
box-sizing: content-box;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px 0px;
cursor: pointer;
text-decoration: none;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover {
border-left: 5px solid rgba( 0,0,0,.3);
width: 40px;
}
.twistBlogger_SocialBar .social_menu > ul > li i {
color: #fff !important;
font-family: FontAwesome;
font-size: 20px;
font-style: normal;
font-weight: normal;
line-height: 1em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover i {
opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.twistBlogger_SocialBar {
bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.twistBlogger_SocialBar {
bottom: 15% !important;
}
}
@media only screen and (max-width:479px) {
.twistBlogger_SocialBar {
bottom: 10% !important;
display: none !important; /*---delete this code line to make it appear on mobile--*/
}
}
< /style>
< /b:if>

Not:Eğer bu kayan sosyal butonların mobil cihazınızdan da gözükmesini istiyorsanız sarı yerle belirtilen kod satırını silin.

Adım 3:Şimdi alttaki kodu Ctrl+F yardımıyla bulun:

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

Adım 5:Adım 4'te bulduğunuz ikinci kodun hemen altına alttaki HTML kodunu yapıştırın:

<b:if cond='data:blog.pageType == "item"'>
< b:if cond='data:blog.pageType != "static_page"'>
< div class='twistBlogger_SocialBar'>
<input class='ShowHide_Button' id='twiSter' type='checkbox'/>
<label for='twiSter'><i class='fa fa-arrow-left'/></label>
<div class='ShowHideMe'>
<div class='social_menu'>
< div class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='h6'>SHARES</div>
</div></div>
< ul>
< li class='button_facebook'>
< a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
< div class='share-btn' data-service='facebook'>
<div class='count'/></div></strong>
< /a>
< /li>
< li class='button_twitter'>
< a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @ - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
< div class='share-btn' data-service='twitter'>
<div class='count'/></div></strong>
< /a>
< /li>
< li class='button_googleplus'>
< a expr:href='" https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
< div class='share-btn' data-service='google'>
<div class='count'/></div></strong>
< /a>
< /li>
< li class='button_pinterest'>
< a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
< div class='share-btn' data-service='pinterest'>
<div class='count'/></div></strong>
< /a>
< /li>
< li class='button_stumbleupon'>
< a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + " & title=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
< div class='share-btn' data-service='stumbleupon'>
<div class='count'/></div></strong>
< /a>
< /li>
< li class='button_linkedin'>
< a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
< div class='share-btn' data-service='linkedin'>
<div class='count'/></div></strong>
< /a>
< /li>
< /ul>
< /div>
< /div>
< /div>
< script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr("href");
$.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
shares = data.shares;
$(".count").each(function (index, el) {
service = $(el).parents(".share-btn").attr("data-service");
count = shares[service];
if (count > 1000) {
count = (count / 1000).toFixed(1);
if (count > 1000) count = (count / 1000).toFixed(1) + "M";
else count = count + "k";
}
$(el).html(count);
});
});
});
//]]></script>
< /b:if>
< /b:if>

Eğer istemedğiniz butonları silmek isterseniz <li> ve </li> kodları arasında yer alan satırları silin.

Adım 6:Şablonu kaydet'e tıklayın.

Herhangi bir problemle karşılaşırsanız yorum yapabilirsiniz.

24 Ağustos 2015 Pazartesi

Blogger postlarını çerçeve içine almak

Bu makalemde blogger postlarını nasıl çerçeve içine alabileceğinizi anlatacağım.Şablon HTML kodunuza bazı kodları ekleyerek postların etrafına bir sınır koyabilirsiniz.Bunu yapmak oldukça basit ve sadece bir kaç kod satırını HTML'ye eklemektir.Bu çerçeve içinde yer alan alanın rengini değiştirebilirsiniz.Postlarınızı çerçeve içine koyarak blogunuza iyi bir görünüm kazandırabilirsiniz.

Bunun bir örneği alttaki resimde gösterilmiştir.

Blogger postlarınızı çerçeve içine yerleştirmek için alttaki adımları takip edin:

Adım 1:Sırasıyla Şablon>HTML'yi düzenle linklerine tıklayın.

Adım 2:Ctrl+F kombinasyonunu kullanarak alttaki kodu bulun:

]]></b:skin>

Adım 3:Yukarıda bulduğunuz kodun hemen üstüne alttaki kodu yapıştırın.

.post{border:1px solid #E5E5E2;border-style:solid;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;background:#ffffff;margin:.1em 0 .5em;padding:0px 8px 0px 8px}

Adım 4:Şablonu kaydet' tıklayın.

Gerekli özelleştirmeler

1-Çerçeve rengini değiştirmek için sarı renkle belirtilen #E5E5E2 değerleri değiştirin.

2-Köşe eğrilerini değiştirmek isterseniz kırmızı renkle belirtilen 10px değerini istediğiniz sayıya ayarlayabilirsiniz.

3-Post arkaplan rengini değiştirmek için yeşil renkle belirtilen #ffffff değerlerini değiştirin.

4-Çerçeve yanı sınır kalınlığını değiştirmek için turuncu renkle belirtilen 1px değerini değiştirin.

23 Ağustos 2015 Pazar

Blogger 404 hatası ile karşılaşan ziyaretçilerinizi ana sayfaya yönlendirin

404 hatası size ve arama motorlarına sayfanın bulunmadığını söyler.Eğer sayfa URL'sini değiştirirseniz,bir kaç sayfa silerseniz veya ziyaretçileriniz sayfa url'lerinizi yanlış yazdığında şu mesajla karşılaşırsınız:

'Web sunucusu dosyayı ya da isteğinin komut dosyasını bulamıyor. Lütfen izlediğin yolun doğru olup olmadığından emin olmak için URL'yi kontrol et'

Tabi bu mesaj blogtan bloga değişebilir.Bazı bloglarda:

Üzgünüz,aradığınız sayfa bu blogta bulunmamaktadır.Bu zamanla değiştirdiğiniz URL sebebiyle olabilir.

404 hatası nedeniyle bazı ziyaretçilerimizi kaybedebiliriz.Çünkü ziyaretçiler 404 hatası ile karşılaştıklarında genellikle sayfayı kapatıp arama motorlarına geri dönerler.Ama 404 hatası ile karşılaşan ziyaretçileri blogumuzun ana sayfasına yönlendirirsek bu ziyaretçilerin hala blogumuzu okuma şansı vardır.

404 hatası ile karşılaşan ziyaretçilerinizi veya okuyucularınızı ana sayfaya yönlendirmek için alttaki adımları takip edin.

Adım 1:Blogger hesabınıza giriş yapınız.

Adım 2: Blogger hesabınıza giriş yaptıktan sonra sırayla Ayarlar>Arama tercihleri'ne tıklayın.

Adım 3:Karşınıza çıkan sayfada 'Sayfa bulunmadı sayfası için özel içerik' karşısındaki Düzenle kısmına tıklayın.Beyaz bir kutu açılacaktır.Açılan bu kutuya alttaki kodu yapıştırın:

Üzgünüz,aradığınız sayfa bu blog'ta bulunmamaktadır.Kısa bir süre sonra ana sayfaya yönlendirileceksiniz.<script type = "text/javascript">BSPNF_redirect = setTimeout(function() {location.pathname= "/"}, 5000); </script>

Adım 4:kodu yapıştırdıktan sonra Değişiklikleri kaydet'e tıklayın.

Yukarıdaki kodta yer alan mesajı kendinize göre yazabilirsiniz.Eğer 404 hatalarını ana sayfaya değil de bir sayfaya yönlendirmek isterseniz pathname kelimesini href ile ve pathname kelimesi karşısında yer alan / işaretini ise sayfa url'si ile değiştirin.Bu kodta yer alan 5000 sayısı gecikmeyi belirtmektedir.İstediğinizde bunu değiştirebilirsiniz.

22 Ağustos 2015 Cumartesi

Bir widget/gadget veya kenar çubuğunu sadece belli bir sayfada göstermek

Hepiniz farkındasınız blogunuza eklediğiniz bir gadget bütün sayfalarda gözükür,ana sayfa da buna dahildir.Ve bundan eminim eğer iletişim ve hakkımızda veya hakkımda sayfasına google adsense gadgeti eklerseniz,adsense hesabınız kapatılabilir.Onun için bazı araçları bazı sayfalarda gizlemek sadece tasarım için iyi değil aynı zamanda bir gerekliliktir.

Adım 1:ilk önce Blogger hesabınıza giriş yapınız ve yerleşim bölümünde blogunuza eklediğiniz gadgetlere özel adlar yanı aynı olmayan adlar verin.

Adım 2:sırasıyla Şablon>HTML'yi düzenle kısımlarına tıklayın.

Adım 3: CTRL+F kombinasyonunu kullanın.Sağ üstte çıkacak kutuya istediğiniz gadgetin ismini yazın ve enter'a tıklayın.

Diyelim ki 'En son paylaşımlar' gadgeti yazıp tıkladınız.Aşağıdaki koda benzer bir kodla karşılaşırsınız.

<b:widget id='HTML1' locked='false' title='En son paylaşımlar' type='HTML'><b:includable id='main'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:includable></b:widget>

Şimdi bu gadgeti sadece belirli sayfalarda göstermek için üstteki kodta aşağıdaki değişiklikleri yapabilirsiniz:

1-Gadgeti sadece ana sayfada göstermek için:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:if></b:includable></b:widget>

2-Gadgeti ana sayfa dışındaki sayfalarda göstermek için:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType == "item"'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:if></b:includable></b:widget>

3-Gadgetin paylaşım sayfalarında saklamak için

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType!= "item"'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:if></b:includable></b:widget>

4-Gadgeti sadece özel bir sayfada göstermek için:

Sayfa URL'si yazan yere istediğinizin sayfanızın URL'sini yapıştırabilirsiniz.

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><b:includable id='main'><b:if cond='data:blog.url == "Sayfa URL'si"'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:if></b:includable></b:widget>

5-Gadgeti sadece statik sayfasında göstermek için:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType == "static_page"'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:if></b:includable></b:widget>

6-Gadgeti statik sayfasında saklamak için:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:if></b:includable></b:widget>

7-Gadgeti sadece arşiv sayfasında göstermek için:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><b:includable id='main'><b:if cond='data:blog.pageType == "archive"'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div>
<b:include name='quickedit'/></b:if></b:includable></b:widget>

Bu değişiklikleri yaptıktan sonra şablonu kaydet'te tıklayın.

Blog yayınlarınıza Facebook beğen butonu ekleyin

Facebook beğen butonu ziyaretçilerinizin paylaşımlarınızı beğenmelerini sağlar.Bu makalede her post için nasıl Facebook beğen butonu ekleyebileceğimizi anlatacağım.Bu Facebook sayfa butonu değildir her post için farklıdır.Ama Facebook sayfası için kenar çubuğunda bir butona sahip olmak blogunuz için oldukça yararlıdır.Yayınlarınızda Facebook beğen butonuna sahip olmanız ziyaretçilerinize yayınlarınızı ayrı ayrı beğenmeleri için kolaylık sağlar.

Eğer Facebook beğen butonu eklemek istiyorsanız aşağıdaki adımları takip edin:

Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>HTML'yi düzenle kısımlarına tıklayınız.

Adım 2:HTML kodu içinde herhangi bir yere tıklayın ve CTRL+F kombinasyonunu kullanarak alttaki kodu bulun:

<data:post.body/>

Not:bu kodtan 3 tane bulabilirsiniz üçüncü kodu seçin.Aşağıdaki resimde olduğu gibi:

Adım 3: Yukarıdaki kodu bulduktan sonra alttaki kodu koplayıp hemen üstüne yapıştırın.

<p><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/></p>

Adım 4:Değişiklikleri kaydetmek için şablonu kaydet'e tıklayın.

Blogger 'Numaralı Liste'yi' özelleştirin

Blogger'ın size sağladığı Numaralı liste'yi özelleştirebilirsiniz.Numaralı liste cümlelerinizi veya paragraflarınızı belli bir sıraya koyar ve onları 1'den yukarıya doğru sayılandırır.Blogger2ın size vermiş olduğu kendine has bir 'Numaralı liste' vardır ama bunu daha da güzelleştirmek için özelleştirmeniz gerekir.Bunu özelleştirmek için HTML koduna bazı kodlar ekmenize gerek yok çünkü Blogger bunun için zaten belli kodları düzenlemiştir eğer HTML kodunuza giderseniz bu kodu göreceksiniz.Alttaki koda benzer bir kod göreceksiniz.

<ol><li>The content of the 1st. element</li><li>The content of the 2nd. element</li><li>The content of the 3rd. element</li><li>The content of the 4th. element</li> etc... </ol>

Numaralı liste oluşturmak okuyucularımıza bilgi vermek için oldukça önemlidir.Daha çiğ olan blogları pişirmek için oldukça kullanışlıdır.Eğer makale falan paylaşacaksanız bazı kısımları numaralandırmak için numaralı liste kullanabilirsiniz.

Numaralı liste'yi özelleştirmek için aşağıdaki adımları takip edin:

Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>Özelleştir>Gelişmiş>CSS ekle'tıklayın.

Adım 2:Açılan beyaz pencereye alttaki kodlardan beğendiğinizi ekleyebilirsiniz.

Not:Bazı bloglar CSS eklemeye izin vermez bunun için Şablon HTML'ye gidin ve CTRL+F kombinasyonu yardımıyla ]]></b:skin> bu kodu bulun ve hemen üstüne alttaki beğendiniz kodlardan birini yapıştırın.

Adım 3:Kodu CSS alanına yapıştırdıktan sonra sağ üst tarafta bulunan 'Blog'a uygula' butonunu tıklayın.

Stil*1:

.post ol{counter-reset: li;list-style: none;*list-style: decimal;font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */padding: 0;margin-bottom: 4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);font-weight: bold;}.post ol li{position: relative;display: block;padding: .4em .4em .4em 4em;*padding: .4em;margin: .5em 0;text-decoration: none;border-radius: .3em;transition: all .3s ease-out;}
.post ol li:hover:before{transform: rotate(360deg);}
.post ol li:before{content: counter(li);counter-increment: li;position: absolute;
left: 10px;top: 50%;margin-top: -1.3em;height: 2em;width: 2em;line-height: 2em;color: #fff; /* text color of numbers */background: #FA8022; /* background color of numbers */border: .2em solid #fff; /* border color */-webkit-box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;box-shadow: 0 8px 5px -7px #888;text-align: center;font-weight: bold;border-radius: 2em;transition: all .3s ease-out;}

Stil*2

.post ol{counter-reset:li;list-style: none;*list-style: decimal;margin-left:0;padding-left:0}.post ol li{
position:relative;margin:0 0 20px 15px !important;padding:4px 5px 4px 10px !important;list-style:none;*list-style: decimal;border-bottom:1px solid #e2e3e2; /* bottom border of each element */background:#f2f2f2; /* background color of each element */text-indent:14px;}.post ol li:before{
content:counter(li);counter-increment:li;position:absolute;top:-6px;left:-10px;font-family:'Oswald', serif;font-size:14px; /* size of the numbers */width:20px;margin:0 0 10px 0;padding:4px !important;color:#A5A5A5; /* color of the numbers */text-align:left;background:#e2e2e2; /* background color of the numbers */text-indent:6px;text-shadow: 1px 3px 2px #fff;}.post ol li:after{content:"";position:absolute;top:-5px;left:17px;width: 0px;height: 0px;border-style: solid;border-width: 5px 0 0 5px;border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */}

Stil*3

.post ol{counter-reset: li;list-style: none;*list-style: decimal;padding: 0;margin-bottom: 4em;font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */text-shadow: 0 1px 0 rgba(255,255,255,.5);}.post ol li{position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 4.5em;text-decoration: none;}.post ol li:before{content: counter(li);counter-increment: li;position: absolute;
left: -30px;top: 50%;margin-top: -1em;background: #bada55; /* background color of the numbers */height: 2em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;}.post ol li:after{position: absolute;content: '';left: -5px;margin-top: -.7em;
top: 50%;width: 0;
height: 0;
border-top: 8px solid transparent;border-bottom: 8px solid transparent;
border-left:8px solid #bada55; /* background color of the right arrow*/

Blogunuza mouse ile değişen (rollover) resim ekleyin

Rollover resim,farenizi resim üzerine getirdiğiniz zaman başka bir resim gözükür,fareyi resim üzerinden kaldırdığınız zaman eski haline döner.Bu dönüşüm oldukça hızlıdır,yanı bir sayfanın yüklemesinden çok daha hızlıdır.Alttaki resmin üzerine farenizi getirdiğinizde resim değişiyor.

Bu tür resimler için aşağıdaki kodu kullanabilirsiniz:

<a href="URL ADRES"><img src="Birinci resim url adresi" onmouseover="this.src='İkinci resim url adresi'" onmouseout="this.src='Birinci resim url adresi'" /></a>

-URL ADRES:Okuyucuyu göndermek istediğiniz sayfanın url'sidir.

-Birinci resim url adresi:Üzerine fare olmadan gözüken resimdir.

-İkinci resim url adresi:Üzerine fare getirildiği zaman gözüken resimdir.
Bunu blogunuza eklemek için sol tarafta bulunan Yerleşim bölümüne gidiniz ve gadget ekleye tıklayın.Açılan sayfada aşağıya doğru inip HTML/JavaScript seçin.Açılan boş pencereye yukarıdaki kodu yapıştırın.

Post başlıklarının yanına resim veya logo ekleyin

Sürekli söylenir bir resim bazen bin kelime anlatır.Okuyucularınızın dikkatini çekmek istiyorsanız post başlıklarının yanına resim ekleyebilirsiniz. Yüklediğim alttaki resimde bunun nasıl olduğunu görebilirsiniz:

Adım 1:İlk yapmanız gereken şey bir resim hazırlamak ve bu resim için bir url oluşturmaktır.Url oluşturmak için resmi önce blogunuza yükleyip paylaşın,paylaştıktan sonra paylaştığınız sayfaya gidin sağ tıklayıp resim url'sini kopyalayın.İşinizi bitirdikten sonra bunu silebilirsiniz.Ya da URL oluşturma programlarına gidip url oluşturabilirsiniz.

Adım 2:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>HTML'yi düzenle kısımlarına tıklayın.

Adım 3:Html kodu içinde herhangi bir yere tıklayın ve CTRL+F kombinasyonunu kullanarak aşağıdaki kodu bulun:

<b:includable id='post' var='post'>

Adım 4:Yukarıdaki kodu bulduktan sonra solundaki siyah ok'a basarak genişletin.

Adım 5:Alttaki kodu göreceksiniz,bunu silin.

<b:includable id='post' var='post'> <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <b:if cond='data:post.firstImageUrl'> <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/> </b:if> <meta expr:content='data:blog.blogId' itemprop='blogId'/> <meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if>

Silinmesi gereken kod:

Adım 6:Sildiğiniz kodun yerine aşağıdaki kodu ekleyin:

<b:includable id='post' var='post'> <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <b:if cond='data:post.firstImageUrl'> <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/> </b:if> <meta expr:content='data:blog.blogId' itemprop='blogId'/> <meta expr:content='data:post.id' itemprop='postId'/>
<a expr:name='data:post.id'/> <b:if cond='data:post.title'> <table><tr> <td class='posttitle'> <img src='Resim url'si'/></td> <td><h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </td> </tr></table>
<style> h3.post-title { margin: 0px !important; } </style>
</b:if>

Yeşil renkle belirtilen yere resim url'nizi ekleyin.Ondan sonra Şablon'u kaydet'e tıklayın.

21 Ağustos 2015 Cuma

Blogger yayınlarının üst kısmına popüler post slaytı ekleyin

Son 4 yıldır bir çok ünlü websiteleri yayınlarının üst kısmına slayt eklemektedir.Hangi güçlü ve ünlü websiteye girerseniz bunu görürsünüz.Bu durum okuyucuların websitenizde veya blogunuzda gezmesi kolaylaştırarak site kullanılabilirliğini artırmaktadır.Ekleyeceğiniz bu popüler post galeri veya slayt en popüler 10 yayınınızı gösterir.Alttaki resimde olduğu gibi:

Bu galeri veya slayt eklemden önce şablonunuzu yüklemeyi veya kaydetmeyi unutmayın çünkü bu galeri bazı şablonlar için uygun değil.Bunu eklemek için aşağıdaki adımları izleyin:

Adım 1:Blogger hesabınıza giriş yapınız sırasıyla Şablon>HTML'yi düzenle bölümlerine gidiniz.

Adım 2:HTML kodu içinde herhangi bir yere tıklayın ve CTRL+F kombinasyonunu kullanarak
]]></b:skin> kodu bulun.

Adım 3:Yukarıda bulduğunuz kodun hemen üstüne aşağıdaki kodu ekleyin:

#gallery{position:relative;margin:0 35px 20px;
width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-
#gallery .belt{position:absolute;top:0;left:0;list-
#gallery .belt{position:absolute;top:0;left:0;list-
#gallery .belt{position:absolute;top:0;left:0;list-#gallery .belt{position:absolute;top:0;left:0;list-#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWcgwwtOe3wtiyMLMDH9R95FiskVQ19htZszEPcd6amJtHzuHMo4HWJ-Egv0_GWOIii3bKcUOztLwj4ottjtdSTU-RMSJF8dgZlzMdAOQs5G_f9ZxvpTBqcCEOeRhapvj3amt322zh7frm/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Not:galerinizin veya slaytınızın boyutlarını kırmızı renkle belirtilen rakamlarla(590 ve 126) oynayarak değiştirebilirsiniz.

Adım 4:Şimdi </head> kodunu bulun.

Adım 5: bulduğunuz </head> kodun üstüne aşağıdaki kodu yapıştırın:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[stepcarousel.setup({galleryid: "gallery",beltclass: "belt",panelclass: "panel",autostep: {enable:true, moveby:1, pause:6000},panelbehavior: {speed:500, wraparound:true, persist:true},defaultbuttons: {enable: true, moveby: 2, leftnav: ["http://2.bp.blogspot.com/-0Iss3Wjr36Q/T393U65TcKI/AAAAAAAABq4/K_uzwyuNzrE/s1600/prev.png", -40, 36], rightnav: ["http://1.bp.blogspot.com/-DtspeRHclnQ/T393WdyB8EI/AAAAAAAABrA/TKHickb2iI8/s1600/next.png", 2, 36]},contenttype: ["external"]})//]]></script>

Bundan sonra yapmanız gereken galeriyi postlarınızın üstüne yerleştirmektir bunu yapmak için:

Adım 6:Alttaki kodu CTRL+F kombinasyonu yardımıyla bulun:

<b:section class='main' id='main' showaddelement='yes'>

Eğer bulamadıysanız alttaki kodu deneyin:

<b:section class='main' id='main' showaddelement='no'>

Adım 7:yukarıda bulduğunuz kodun hemen altına aşağıdaki kodu ekleyin:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'><b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'> <div id='gallery'> <ul class='belt'> <b:loop values='data:posts' var='post'> <li class='panel'> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> <b:else/> <div class='item-title'> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a> </div> <div class='item-snippet'> <data:post.snippet/> </div> </b:if> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'> <b:if cond='data:post.thumbnail'> <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/> <b:else/> <img alt='no image' src='http://2.bp.blogspot.com/-mRxY2oEkLJc/T393wpt0z_I/AAAAAAAABrI/4blMjDaSOUY/s1600/no-image.PNG'/> </b:if> </a> </b:if> </li> </b:loop> </ul> </div></div></b:if> </b:includable></b:widget>

Not:Eğer slaytların ana sayfa dışında da gözükmesini istiyorsanız yeşil renkle belirtilen yerleri silin.

Adım 8:Yaptığınız değişiklikleri bir daha kontrol ettikten sonra şablonunuzu kaydettin.

Sayfa tıklama ve blog trafiğinizi artırın

Google Adsense sayfa izleme nedir?

Sayfa izleme veya görüntüleme:okuyucularınızın sayfalarınızda ne kadar kaldığı ve kaç sayfa ziyaret ettiğidir.Eğer bir reklam hakkında konuşuyorsak en önemli şey budur.Sayfa izleme sayısı genellikle kaliteli içerikler sayesinde kazanılan iyi bir trafikle elde edebilirsiniz.Eğer kaliteli içerikler paylaşırsanız insanlar blogunuzda veya sitenizde gezmek ister ve sayfa izleme veya görüntüleme sayısını artırabilirsiniz.

Adsense genellikle aşağıdaki faktörleri dikkate alarak kazanacağınız parayı hesaplar.

Sayfa izleme:Sayfalarınızın veya Adsense reklamı içeren sayfalarınızın ziyaretçiler tarafından kaç kez ve ne kadar ziyaret ettiğidir.

Tıklama:Ziyaretçilerin sitenizde veya blogunuzda yer alan Adsense reklamlarına tıklama sayısıdır.

Sayfa CTR:Firmanın tıklama başı için reklama verdiği orandır.Bazı reklamlarda bu oran yüksekken bazılarında düşüktür.

CPC:Her bir tıklama için ödenen paradır.

Tahmini kazanç:Seçilen zaman periyodunda kazanılan tahmini kazançtır.Ay sonunda gerçek kazandığınız para hesaplanır.

Sayfa izlenme sayısını artırmanın yolları:

1-Linkler

Sayfalarınız arasında link oluşturun.Mesela yayınlarınızın ortalarına veya alt kısımlarına diğer sayfalarınıza ait olan linkleri yerleştirebilirsiniz.Böylece okuyucularınız bu linklere de tıklar ve sayfa görüntüleme sayısı artmış olur.

2-Ana sayfanızda yayınlarınızı özetleyin
Sayfa görüntüleme sayısını artırmanın en iyi yollarından birisi de ana sayfanıza koyduğunuz yayınları özetlemenizdir.Okuyucu daha çok okumak isteyecektir ve okumak için de tıklayacaktır.

3-Sayfalarınızın yükleme hızını geliştirin

Eğer sayfalarınız çok geç yükleniyorsa okuyucu sabrını kaybeder ve daha çok sayfayı tıklamaktan vazgeçer.Hızlı yüklenen sayfalar ziyaretçilerinizin hoşuna gider ve daha çok tıklamak isteyeceklerdir.

4-Popüler post widgeti ekleyin

Okuyucularınızı blogunuzda veya sitenizde daha çok kalmasına ikna etmenin diğer yolu popüler post widgeti eklemektir.Popüler post genellikle herkesin hoşuna giden içeriklerinizdir zaten hoşuna gitmeseydi popüler olmazdı.Bu içerikler oldukça önemlidir bunları okuyucularınıza göstermelisiniz.Okuyucularınız bunları görür görmez tıklayacaktır bundan emin olabilirsiniz.

5-Rastgele post widgeti ekleyin

Her gün sitenizi ziyaret eden bir okuyucu popüler post widgetini görmekten sıkılacaktır çünkü her gün aynı postları görmek istemeyecektir.Bunun için rastgele post widgeti eklemeniz gerekir,bu widget okuyucularınıza farklı postları gösterir,farklı postlar gören okuyucularınız buna tıklayacaktır böylece sayfa tıklanma sayınız artabilir.

6-İlgili postlara link verin

Diyelim SEO ile ilgili bir makale yazdınız eğer daha önce bu makaleye benzer makaleleriniz varsa bunların linkini yeni makalenize koyabilirsiniz.Böylece eski makaleleriniz de okunmuş olur.

7-Linklerinizi sosyal medyada paylaşın
Yazdığınız makale veya yazıların linklerini sosyal medyada yanı Facebook,Twitter ve buna benzer sosya medya platformlarında paylaşmayı unutmayın.Tabi bunları paylaşırken çok dikkatli olun spam konumuna düşmeyin uygun içerikler paylaşın.

8-Arama kutusu ekleyin

Bir çok websitesi arama kutusuna sahip değildir.Okuyucular bu sitelerde aramak istediğini en kısa sürede bulamayınca hemen kaçmak isterler çünkü okuyucularınız için zaman çok önemlidir.Eğer arama kutusu ekleyecekseniz Google'nin arama kutusunu ekleyin ilgili sonuçları en iyi o gösterir.

9-Sosyal medya butonları ekleyin

Sosyal medya butonları yardımıyla okuyucular yazılarınızı okuduktan sonra arkadaşlarına da tavsiye etmek isterler ve bunu ancak Facebook,Twitter,Google plus vb ile yapabilirler.Bunları herkesin görebileceği ve rahatlıkla ulaşabilecekleri yerlere koyun.

10-Temiz bir arka plan ve okunabilir bir fon ekleyin

Karanlık arka planlardan ve kalın,karışık fonlardan kaçının ve yazdığınız yazıların blogunuzun en iyi görünen parçası olmasına dikkat edin.Eğer hedefiniz okuyucularınıza bir mesaj vermek ise ve bu mesajın okunmasını istiyorsanız bunlara dikkat etmeniz gerekir.

11-Reklam

Eğer paranız varsa blogunuzun reklamını yapabilirsiniz.Reklam için harcayacağınız paranın 3-4 katını kazanabilirsiniz.Mesela Google Adwords sitenizi googlede gösterir ve ziyaretçiler gelip reklamlarınıza tıklamayana kadar sizden para almaz.

En son postlarınızı gösteren resimli widget (kenar çubuğu)

Son paylaşımlarımda en son postlarınız için nasıl widget(kenar çubuğu) ekleyebileceğinizi anlatmıştım.Bu widgetin diğerinden farkı resimli olmasıdır.Yanı sadece başlıkları değil yayınlarınızda yer alan resimleri de gösterir.

Bu widgeti eklemek isterseniz aşağıdaki adımları takip edin:

Adım 1:Yerleşim bölümüne giderek gadget ekleye tıklayın.

Adım 2:Açılan pencerede mouse'nuzu veya farenizi aşağı doğru kaydırarak HTML/JavaScript tıklayın.

Adım 3:Karşınıza boş bir pencere çıkacaktır.Bu pencereye aşağıdaki kodu kopyalayın:

<div class="eggTray"><script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list","pipe_params":{"URL":"Blog adresi/feeds/posts/default"},
"hideHeader":"false","height":"500","count":
"hideHeader":"false","height":"500","count": 8 }</script>
<noscript>Your browser does not support JavaScript!<noscript>Your browser does not support JavaScript!</noscript></div><style type=text/css>.eggTray {margin:10px 0px;padding:0px;}.ybr li {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}.pipesTitle {padding-top:0px;}.pipesDescription {display:true;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>.ycdr, .ycdr a {color:#999999;}.widget .popular-posts ul {padding-left:0;}</style>

Gerekli özelleştirmeler:

-Blog adresi yazılan yere kendi blogunuzun web adresini yazın.örnek:http:// opinion34.com

-Eğer sadece post başlıklarının gösterilmesini istiyorsanız kırmızı renkle belirtilen true yazısını none olarak yazın.

-Gösterilen post sayısını değiştirmek için yeşil renkle belirtilen 8 rakamını değiştirin.

Post başlıklarının altında yazarın ismi,tarih,etiket ve yorum sayısını göstermek

Bu makalede post başlıklarının altına yazarın ismi,tarih,etiket ve yapılan yorum sayısını nasıl ekleyebileceğinizi anlatağım.Eğer hiç yorum yoksa yorum sayısı ' ilk yorum yapan siz olun' olarak gözükecektir eğer bir yorum varsa '1 yorum' olarak gözükür.Sol tarafta yazarın ismi gösterilecektir.Ve hemen sağ tarafında paylaşımın yapıldığı tarih gözükecektir.Son olarak hangi etikete ait olduğu.

Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>HTML'yi düzenle kısımlarına tıklayın.

Adım 2:HTML kodunun içinde herhangi bir yere tıklayın ve CTRL+F kombinasyonunu kullanarak bu kodu <div class='post-header-line-1'> bulun.

Not:eğer üstteki kodu bulamazsanız bunu <div class='post-header'> deneyin.

Adım 3:bulduğunuz kodtan hemen sonra alttaki kodu ekleyin:

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhkemyBBI_2rSJlhxJovHASOZVvmDZkXQs0n3E_KRqyywlMuIIGcpCvDcdfvqecx_lAtPk24e3qRjkmIhrGoxI777wonVwMk2PvdQye8DYPfaEkrHnJNoMa-_6gM8TM6H285RROr6qGzGr/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgik0XCqBgD4kAVn2p2Doaa4QQBV0iv0Dvfff0mWdIxQYjHVLzObIGDqMl2TlE4cv42KndgyGLqndXqg3OR9Lg37IcqLRXyRKsFHUbqHrQBeA3ctN1XOfbXyd-URYGH55MjZSscqSwX3Jlg/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd93lG0Jf3AnySV9i7TAKyE8swbbY7QZHlH3zG0x14udYn_2wLuOalzeLz_C0UvtTUwybo_cyvVcuSjfgYSZjkkxQbvKsPUCvPH-FqJztTyhYrPDlFlddP4-12i-YBeWM8A85yH7YoP4IC/s1600/tag.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + "?max-results=8"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>|</b:if></b:loop></b:if></font><span class='post-comment-link' style='Float:right;'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjho3unAp_r36eDzKo5Pk1Iwb-UDgsV8TbfxdBktWRa-WOPvN8GS5gltTSAAhG-jYgX1r6l6qgX_CbeFQ_G_EW-Z6KOlstiP2V0GyhMzeFQscOKXf_Ob_aL9RdU0A8eAN4q4NVR430yCWxY/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>İlk yorum yapan siz olun!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Yorum</b:if> </b:if></a></b:if></b:if></span></div>

Blogger postlarına adsense reklamı eklemek

Belki Adsense reklamının blogger postlarınıza veya içeriklerinize nasıl ekleyebileceğinizi merak ediyorsunuzdur.Belki duymuşsunuz Wordpress blog postların üst kısmında yanı başlığın altında reklam için ayrılmış yer vardır yanı Adsense kodunu direk alıp o alana yapıştırabiliyorsunuz.Ama Blogger için o kadar şanslı değilsiniz.

Blogger postlarına reklam koymanın en önemli avantajı çok tık almasıdır,böylece daha çok kazanabilirsiniz.Bu kodu yerleştirmek oldukça kolaydır.

Adım 1:Postunuzu yanı makalenizi yazdıktan sonra HTML kısmına tıklayın ve aşağıdaki kodu en üste yapıştırın.Eğer reklamın ortalarda çıkmasını istiyorsanız yazınızın ortasına altta çıkmasını istiyorsanız en altta yapıştırın.Size tavsiyem en üstte yapıştırın çünkü ortalara yapıştırırsanız okuyucunuzun dikkati dağılabilir.

Eğer reklamın sağ tarafta çıkmasını isterseniz şu kodu kullanın:

<div style="float:right;">Adsense kodu yapıştırın</div>

Eğer Adsense reklamının sol tarafta çıkmasını isterseniz şu kodu kullanın:

<div style="float:left;">Adsense kodunuz</div>

Blogger postlarına Drop Caps (ilk harf büyük) eklemek

Bugün size blogunuzu özelleştirmenin başka bir yolunu anlatacağım:drop cap nasıl ekleyebileceğinizi.Drop cap, yazıların ilk harfinin çok büyük yazılmasıdır.Belki bir çok dergi ve gazetelerde görmüşsünüzdür genellikle yazıların ilk harfi 3-4 satırın yerini almaktadır yanı 3-4 satır yüksekliğindedir.Buna drop cap diyoruz.Ayrıca bunun için farklı renklere ve fonlara başvurabilirsiniz.Drop capın bir örneğini alttaki resimde görebilirsiniz:

Blogunuza drop cap eklemek için sırasıyla aşağıdaki adımları uygulayın:

Adım 1:Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>HTML'yi düzenle tıklayın.

Adım 2:HTML kodu içinde herhangi bir yere tıklayın ve CTRL+F yardımıyla aşağıdaki kodu bulmaya çalışın:

]]></b:skin>

Adım 3:Yukarıda bulduğunuz kodun hemen üstüne aşağıdaki CSS kodu ekleyin:

.capital:first-letter { float: left; display: block; font-family: Times, serif, Georgia; font-size: 40px;
color: # color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
} margin:0px 5px 0 0; padding:0 0 0 10px; }

-Sarı renkle belirtilen 40px rakamını küçülterek veya büyüterek ilk harfi yeniden boyutlandırabilirsiniz.

-Kırmızı renkle belirtilen değerleri değiştirerek ilk harfin rengini değiştirebilirsiniz.

Renk kodları için alttaki Renk kod jeneratörünü kullanabilirsiniz;

Adım 4:Şimdi CTRL+F kombinasyonu yardımıyla alttaki kodu bulmaya çalışın:
<data:post.body/>

Adım 5:Adım 4 te bulduğunuz emen öncesine ve sonrasına kırmızı renkle belirtilen alttaki kodu ekleyin.Alttaki örnekte olduğu gibi.

<div class='capital'><data:post.body/></div>

Adım 6:Şablonu kaydet'e tıklayın

Önemli:Eğer Adım 5'teki kod çalışmazsa aşağıdaki kodlardan deneyin.

1- <p class="capital"><data:post.body/></p>

2-<span class="capital"><data:post.body/></span>

Yorumlarınıza cap drop eklemek için alttaki adımları takip edin:

Adım 1:CTRL+F kombinasyonunu kullanarak aşağıdaki kodu bulmaya çalışın:

]]></b:skin>

Adım 2:Bulduğunuz kodun hemen üstüne alttaki kodu kopyalayıp yapıştırın:

.capital:first-letter { float: left; display: block; font-family: Times, serif, Georgia; font-size: 40px; color: #000000; margin:0px 5px 0 0; padding:0 0 0 10px; }

Adım 3:Şimdi CTRL+F kombinasyonu yardımıyla alttaki kodu bulun:

<data:comment.body/>

Adım 4:Yukarıdaki kodun hemen öncesine ve sonrasına kırmızı renkle belirtilen alttaki kodu ekleyin alttaki örnekte olduğu gibi:

<p class="capital"><data:comment.body/></p>

Adım 5:Şablonunuz kaydedin.

1 Aralık 2015 Salı

25 Kasım 2015 Çarşamba

24 Ağustos 2015 Pazartesi

23 Ağustos 2015 Pazar

22 Ağustos 2015 Cumartesi

21 Ağustos 2015 Cuma

İletişim Formu