YardimBlogger

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.

2 Eylül 2015 Çarşamba

Blogger blogunuza resimli mega menü ekleyin

Artık AJAX navigasyon menü widget'ti ile sub-menü yanı alt menülerinize resim veya foto ekleyebilirsiniz.

AJAX navigasyon menü Blogger platformu için özel olarak tasarlanmıştır.Resimli alt menüler sayesinde daha fazla hit alabilirsiniz.

AJAX menü çoklu alt-menülerden oluşur.Mouse'nizi veya farenizi ana menü üstüne getirdiğinizde resimli alt menüler çıkacaktır.Bu özellik sayesinde sayfa görüntüleme sayınız artabilir.Çünkü resimleri gören ziyaretçileriniz bunları tıklamak isteyecektir.

Bu menüler bütün tarayıcılara uygundur.Sadece belirli bir tarayıcı için tasarlanmamıştır.Bunun için AJAX navigasyon menü ideal bir seçenektir.

Eğer farenizi ana menüye getirirseniz alt-menüler otomatik olarak gözükecektir,ana menüye tıklamanıza gerek yoktur.Böylece navigasyon zamanından tasarruf etmiş olursunuz ve trafiğiniz artmış olur.

Menü parametrelerini veya AJAX menü stilini manuel olarak kendinize göre ayarlayabilirsiniz.

Blogger blogunuza resimli mega menü eklemek için alttaki adımları takip edin:

Adım 1:Blogger hesabınıza giriş yapınız sırasıyla Şablon>HTML'yi düzenle kısımlarına tıklayın.Ve Ctrl+F yardımıyla alttaki kodu bulun:

]]></b:skin>

Adım 2:Yukarıda bulduğunuz tagın veya kodun hemen üstüne alttaki kodu ekleyin:

.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjha_Y-cch_uLVVl6DSjyq2eWX63_9HUvLpKFBJXR4tTsfG8aF2G0mY3HPZ5b08fLu_VzOeZ0O5_D2zyPqoRkBCTRpiMZH0SS3fMymhcPHyKLIrc-WwxAACb3-aq_O3P4Jtqp9E6SN3gig/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5W3w1Xy25hrYCgMPtecTDU4fRta3qDzp32ytksdlY-_ltS8kFEHuhz-l6CUtdIIxuom4QmWERemXPijd3biRW88aNWUAmnUNbuv7uYAhGFhvwlJZubQk2i5ovK8VttHESyNB7ATxZMM8/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4gCsadiZQBZz60c2FPFTiev5XJeWvIdgKq7XO3qY4bhWs54N4o2TV6FbDrjdnVkIH3iHcq-B27WWavxYvJ1pglmn-NNuMxmplhcFQ8QVCexX0SwxPTL5Bmn_TH8yDELz69FD3_xe54aU/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

Adım 3:Blogunuzda jQuery eklentisinin kurulup kurulmadığını kontrol edin.Eğer kurulmamışsa </head> kodundan önce bir kaç satırlık kod eklemeniz lazım.</head> kodunu Ctrl+F yardımıyla bulun ve hemen öncesine alttaki kodu ekleyin:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://helplogger.googlecode.com/svn/trunk/megamenu.js' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function($) { $('#megamenuid').megaBloggerMenu({ postsNumber : 4,
noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uBEYphD4kcFSBscb8GUyWvKH1hLcQSWZ8OgQbDcpuFlbCR9MPrTaKYgKrrUYU6RtKnx2RjlLZe8EP41WZOfmozztjAZ049x-jyaXcUcYK6kI-5DRpBtsynzPOj-zpWEeJ8_xRQtX67U/s1600/no_image_available.png'
});});
$(function(){ $('.search-here').submit(function(e){ if($('.search-box .search-field').val().length==0){ $('.search-box .search-alert').fadeIn().css('display','inline-block'); e.preventDefault(); } });});</script>

Not:

-Eğer jQuery eklentisi çoktan eklenmişse kırmızı satırı silin.

-Post sayısını değiştirmek için 4 rakamını değiştirin.

postsNumber : 4

-Eğer postunuzda herhangi bir foto yer almıyorsa ziyaretçilernize göstermek isteyeceğiniz sabit foto için yeşil renkle belirtilen url'değiştirin altta olduğu gibi :

noThumbnail : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uBEYphD4kcFSBscb8GUyWvKH1hLcQSWZ8OgQbDcpuFlbCR9MPrTaKYgKrrUYU6RtKnx2RjlLZe8EP41WZOfmozztjAZ049x-jyaXcUcYK6kI-5DRpBtsynzPOj-zpWEeJ8_xRQtX67U/s1600/no_image_available.png'

Adım 4:Ctrl+F yardımıyla alttaki kodu bulun:

<div class='main-outer'>

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

<ul class='megamenu' id='megamenuid'><li><a href='/'>Ana Sayfa</a></li>
<li><a class='menu-target' href='#'>MENÜ BAŞLIĞI</a><ul><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li></ul></li><li><a class='menu-target' href='#'>MENÜ BAŞLIĞI</a><ul><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li><li><a href='http://BURAYAURLEKLE.com'>ETİKET ADI</a></li></ul></li><li><a href='http://BURAYAURLEKLE.com'>Normal Link</a></li><li class='search-box'><form action='/search' class='search-here' method='get'><input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/><input class='search-button' type='submit' value=' '/></form><p class='search-alert'>Arama formu boştur!</p></li></ul><div class='clear'/>
<div class='clear'/>

Not: ETİKET ADI yerine post etiketini , http://BURAYAURLEKLE.com yerine etiket url'si ,MENÜ BAŞLIĞI yerine menünüzün ismini yazın.

26 Ağustos 2015 Çarşamba

Blogger blogunuza en çok yorum yapılan postları gösteren widget ekleyin

Blogger blogu için en önemli gadgetlerden bir tanesi popüler post gadget'idir.Bu okuyucularınıza hangi postların çok okunduğunu gösterir ve okumaları için onları cesaretlendirir.Ancak günümüzün modern dünyasında okuyucular sadece trend olan postlarınızı görmek istemez,aynı zamanda blogunuzda olan tartışmalara da katılmak isterler.Bu tartışmaları okuyucularınıza sunmak için en çok yorum yapılan postları gösteren widget veya kenar çubuğu ekleyin.

Bunu eklemek için alttaki adımları takip edin:

Adım 1:Şablon>HTML'yi düzenle'ye tıklayın ve HTML kodu içinde Ctrl+F yardımıyla alttaki kodu bulun:

</Group>

Not:Eğer bu kodu bulamazsanız alttaki kodu deneyin:

<b:skin><![CDATA[

Adım 2:Yukarıda bulduğunuz kodun hemen altına alttaki kodu ekleyin:

<Group description="Most Commented" selector=".most-commented"><Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/><Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/><Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/><Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/><Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/></Group>

Adım 3:Şimdi CTRL+F yardımıyla alttaki kodu bulmaya çalışın:

]]></b:skin>

Adım 4:adım 3'te bulduğunuz kodun hemen üstüne alttaki kodu ekleyin

.comment-count { padding: 3px 10px; background: #fff; color: #000; font-size: 10px; float: right;}
.most-commented ul { padding: 0px !important; font-family: Century Gothic, sans-serif;}
.most-commented ul li { list-style-type: none; padding: 10px; color: #555; margin-top: -10px;}
.most-commented ul li a { color: #444; font-weight: bold; text-decoration: none; font-size: 11px;}
.most-commented ul li img { float: left; margin: 0px 5px 0px 0px; width: 60px; height: 60px;}
.most-commented:nth-child(3n+0) { background: $(most.commented.background1); width: 100%;}
.most-commented:nth-child(4n+0) { background: $(most.commented.background2); width: 95%;}
.most-commented:nth-child(5n+0) { background: $(most.commented.background3); width: 90%;}
.most-commented:nth-child(6n+0) { background: $(most.commented.background4); width: 85%;}
.most-commented:nth-child(7n+0) { background: $(most.commented.background5); width: 80%;}

Adım 5:Şablonu kaydet'e ekleyin.

Şimdi en çok yorum yapılan post widgetini yerleşim bölümüne ekleyelim.Bunun için Yerleşim bölüne gidin ve eklemek istediğiniz yere Gadget ekle linkine tıklayın.HTML/JavaScript'e tıklayın açılan pencereye alttaki kodu yapıştırın:

<script type="text/javascript">function stripTags(s,n) { return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")}function mostcommented(feed) { var i; for (i = 0; i < feed.count ; i++) {var postURL = "'" + feed.value.items[i].link + "'";var postTitle = feed.value.items[i].title;var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";var postDescription = feed.value.items[i].postdescription;var postComments = feed.value.items[i].commentcount;var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>" + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>'; document.write(postList); } } </script><script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://opinion34.com
&NumberofPosts=5&_id=2cb5eb603ed55a6264ee1484e5fdd45c&_callback=mostcommented&_render=json"type="text/javascript"></script><span style="font-size: 80%; float:left;"></span>

opinion34.com domain adresini kendi blog adresinizle değiştirin.Eğer tanım kısmına daha çok karakter(harf) eklemek istiyorsanız postDescription,10 kodundaki 10 sayısını artırın.

Eğer daha basit stilini yanı resimsiz ve snipetsiz widgeti eklemek istiyorsanız yukarıdaki kod yerine alttaki kodu ekleyin:

<script type="text/javascript">function stripTags(s,n) { return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")}function mostcommented(feed) { var i; for (i = 0; i < feed.count ; i++) {var postURL = "'" + feed.value.items[i].link + "'";var postTitle = feed.value.items[i].title;var postComments = feed.value.items[i].commentcount;var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>" + '</li></ul></div>'; document.write(postList); } } </script><script src="http://pipes.yahoo.com/pipes/pipe.run? AddUrlHere=http://opinion34.com
&NumberofPosts=5&_id=2cb5eb603ed55a6264ee1484e5fdd45c&_callback=mostcommented&_render=json"type="text/javascript"></script><span style="font-size: 80%; float:left;"></span>

opinion34.com yazılan yere kendi blog adresinizi yazın.Eğer yorum sayısından önce yorum yazısı eklemek istiyorsanız bu yeşil renkle belirtilen kodu alttaki kodla değiştirin.

<div class="comment-count">' + postComments + " comments" + "</div>"

Yukarıdaki değişiklikleri yaptıktan sonra Kaydet'e basın.

Blogger Şablonunu SEO'ya uygun hale getirmek

Bazıları Blogger'ın bir Google ürünü olduğunu ve bu nedenle SEO dostu olduğunu söylemektedir.Aslında gerçek böyle değildir.Default yanı normal Blogger şablonları SEO'ya uygun değildir.Bir kullanıcı olarak blogumuzu arama motorları için optimize etmeliyiz.Blogger eskiden WordPress ve Joomla'ya göre bir çok SEO özellikten yoksundu.Fakat Google Blogger'a önemli bir kaç SEO özellik ekledi.Bunlar:Özel Robot.txt,Meta tag tanımı,301 yeniden yönlendirme,özel permalinks ve daha fazla...

Bugün bunlar hakkında ayrıntılı bir şekilde konuşacağım.Blogger şablonunu SEO dostu yapmak için alttaki bilgileri takip edin.

1-Post başlıklarını SEO'ya uygun hale getirmek

Eğer dikkat etmişseniz default(orjinal veya normal) Blogger şablonları için arama motorlarına baktığınız zaman blog başlığını post başlığından önce geldiğini görürsünüz.Biliyorsunuz Google sadece başlıkların ilk 66 harfini gösterir.Eğer bunu düzeltmezseniz yanı post başlıkları blog başlıklarından önce gelmezse post başlıklarının tamamı arama motorlarında gözükmeyebilir.Bu da sizin için bir kayıp olabilir.

Bunu düzeltmek için Alttaki adımları takip edin:

Adım 1:Sırasıyla Şablon>HTML'yi düzenle'ye tıklayın.Ctrl+F kombinasyonunu kullanarak alttaki kodu bulun:

<title><data:blog.pageTitle/></title>

Adım 2:Yukarıda bulduğunuz kodu alttaki kodla değiştirin:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Adım 3:Şimdi şablonunuzu kaydedin.

2-Post başlık etiketini değiştirin

Default şablonları ana sayfa başlığı için H1,blog tanımı için H2 ve post başlıklarını için H3 kullanır.Blog başlığından sonra en önemli şey post başlıkları olduğu için post başlıkları için H3 yerine H2 kullanmalısınız.

Bunu yapmak için:

Adım 1: Şablon>HTML'yi düzenle'ye tıklayın. .post h3 kodlarını bulun ve .post h2 kodları ile değiştirin.

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

<h3><data:title/></h3>

Adım 3:Yukarıda bulduğunuz kodu alttaki kodla değiştirin:

<h2><data:title/></h2>

Adım 4:Şablonu kaydedin.

3-Meta Etiketler

Meta etiket yardımıyla arama motorlarına blogunuzun ne hakkında olduğunu söyleyebilirsiniz.Bunu aktifleştirmek için Ayarlar>Arama tercihleri'ne tıklayın.Meta etiketler altındaki beyaz kutuya 150 harf ile blogunuzu tanıtabilirsiniz.

Ayrıca özel veya üçüncü taraf şablonlar kullanıyorsanız <head> tagın altına alttaki kodu da yapıştırın.

<b:if cond=’data:blog.metaDescription != ""’>< meta expr:content=’data:blog.metaDescription’ name=’description’/>< /b:if>

4-Özel Robot.txt dosyası

Eğer Özel Robot.txt dosyasını ayarlamazsanız tüm postlar ve etiketler arama motorları tarafından indekslenir.Böylece yinelenen içerik problemleri ortaya çıkar.

Bunu ayarlamak için sırasıyla Ayarlar>Arama Tercihleri>Özel Robot.txt dosyası etkinleştirme linklerine tıklayın.Açılan beyaz kutuya alttaki kodu yapıştırın.Ve kodun içinde blogadres yazan yere blog adresinizi yazmayı unutmayın.

User-agent: Mediapartners-Google Disallow: User-agent: * Disallow: /search/ Disallow: /search? Disallow: /search?q=* Disallow: /*?updated-max=* Disallow: /p/about.html Disallow: /p/privacy.html Allow: /
Sitemap: http://www.blogadres.com/atom.xml?redirect=false&start-index=1&max-results=500

5-Blogger etiketlerine noFollow Tag'ı ekleyin

Dördüncü maddede eklediğiniz Özel Robot.txt dosyası sayesinde etiketleriniz indesklenmez.Ancak işimizi garantiye almak istiyorsak etiketlere NoFollow tag'ı eklemeliyiz.

noFollow tag'ı eklemek için:

Adım 1:Şablon HTML kodu içinde alttaki kodu Ctrl+F kombinasyonu yardımıyla bulun:

<a expr:href=’data:label.url’ rel=’tag’>

Adım 2:Yukarıda bulduğunuz kodu alttaki kodla değiştirin:

<a expr:href=’data:label.url’ rel=’tag,nofollow’>

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

6-Özel Robot Başlık etiketleri

Bu dosyayı ayarlayarak arama motorlarının arşiv ve arama sayfalarınızın indesklemesini engelleyebilirsiniz.

Bunu ayarlamak için sırasıyla Ayarlar>Arama Tercihleri>Özel robot başlık etiketleri'ni etkin hale getirin.

Alttaki resimde olduğu gibi işaretleyin.

7-Kırılan linkleri yeniden yönlendirmek

Eğer sayfalarınızda 404 hataları var ise bunları 301 kullanarak doğru yere yönlendirebilirsiniz.

Bunu yapmak için Ayarlar>Arama tercihleri>Hatalar ve yönlendirmeler>Özel yönlendirmeler kısımlarına gidin.Kaynak kısmına kırılan sayfa linki,Hedef kısmına ise yönlendirmek istediğiniz sayfayı yazın.

25 Ağustos 2015 Salı

Blogger için Özel Robot.txt içeriğini etkinleştirme

Eğer blogunuzda her şeyin indekslenmesini istemiyorsanız,Özel Robot.txt içeriği sayesinde blogunuzu daha iyi kontrol edebilirsiniz.Böylece arama motoru böcekleri blogunuza geldiği zaman duplicate yanı yinelenen içerik problemlerinden kurtulabilirsiniz.Özel Robot.txt içeriğini etkin hale getirmek için:

Adım 1:Sırasıyla Ayarlar>Arama tercihlerini tıklayın.Özel Robot.txt'nin karşısında bulunan Düzenle linkine tıklayın ve Evet'i işaretleyin.Alttaki resimde olduğu gibi.

Adım 2:Açılan beyaz kutuya alttaki kodu yapıştırın.

-agent: Mediapartners-GoogleDisallow: User-agent: *Disallow: /search/ Disallow: /search? Disallow: /search?q=* Disallow: /*?updated-max=* Disallow: /*.html Allow: /*.html$ Allow: / Sitemap: http://www.blogadres.com/atom.xml?redirect=false&start-index=1&max-results=500

Adım 3:Kırmızı renkle blogadres yazan yere blog adresinizi yazın ve Değişiklikleri kaydet'e tıklayın.

Blogger'da magazin stili oluşturmak

Magazin şablonları post özetleri,post başlıklarını ve post fotosunu gösterir.Alttaki resimde olduğu gibi en üsteki post alttaki postların iki katı boyutundadır.Bu tür şablonlar bugünlerde çok popülerdir.İster haber ister teknoloji olsun herkesin ışıl ışıl magazin stiline ihtiyacı vardır.

Blogger blogunuza magazin stili eklemenin bir çok yolu vardır.Fakat biz birinci posta yanı en üst posta devamını oku scripti,durum tagı ve farklı stil ekleyerek bunu yapacağız.Böylece bu makale Blogger magazin stilini nasıl oluşturabileceğiniz hakkındadır.Size vereceğim bilgileri takip ederek sıkıcı ve basit Blogger şablonunuzdan kurtulabilirsiniz.

Blogger şablonuna Magazin stili eklemek

Adım 1:Hiçbir şey yapmadan önce eski Blogger şablonunuzu kaydedin.Bunu yapmak için Blogger hesabınıza giriş yapınız ve sırasıyla Şablon>Yedekle/Geri yükle linkine tıklayın.

Adım 2:Blogger şablonunuzun eski xml şablonu yedekledikten sonra Ctrl+F kombinasyonu yardımıyla alttaki kodu bulun:

<data:post.body/>

Adım 3:Yukarıda bulduğunuz kodu alttaki kodla değiştirin.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'></b:if></span>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Devamını oku »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Adım 4:Şimdi Ctrl+F kombinasyonu yardımıyla alttaki kodu bulmaya çalışın:

<b:include data='post' name='post'/>

Adım 5:Adım 4'te bulduğunuz kodu alttaki kodla değiştirin :

<b:if cond='data:post.isFirstPost'><b:if cond='data:blog.homepageUrl == data:blog.url'><div id='first'><b:if cond='data:post.title'><h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h3></b:if><div class='first-body'>
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><div expr:id='"summary1" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script><span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'></b:if></span><span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Devamını oku »</a></span></b:if></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
</div></div><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

Adım 6:</head> kodunu bulun ve hemen üstüne alttaki iki kodu ekleyin:

<script type='text/javascript'>posts_no_thumb_sum = 290;posts_thumb_sum = 240;img_thumb_height = 80;img_thumb_width = 80;first_no_thumb_sum = 580;first_thumb_sum = 450;img_thumb_height1 = 145;img_thumb_width1 = 165;</script>
<script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}
function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = posts_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = posts_thumb_sum;}
var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
function createSummaryAndThumb1(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = first_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';summ = first_thumb_sum;}
var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary1;}
//]]></script>

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style type='text/css'>.first-post-thumb { margin-right: 10px;}
.summary { height: 100%;}
#first { /* Styles for the First Post Container */ width: auto; height: 250px; float: left; margin-bottom: 10px; background-color: #F4F4F4; /* background color for the first post */ border: 1px solid #E5E5E5; /* border for the first post */}
.first-body { /* Style for the First Post summary */ color: #545454; font-size: 13px; text-align: justify; padding: 5px 10px; line-height: 1.5em;}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/ border-bottom: 2px solid #DFDFDF; color: #515151; font-size: 20px; display: block; margin: 10px auto; width: 95%; font-size: 20px; padding: 0px 0px 4px 0px; font-weight: bold; text-align: left; line-height: 1.4em; background: none;}
#first h3 a:hover { /* Color on mouseover for the First Post Title */ color: #1061A1;}
.post { /* Styles for the small posts container */ float: left; margin: 0px 6px 2% 5px; width: 46%; height: 230px; padding: 0px 5px 5px 5px; background: #FCFCFC; /* background color for the small posts */ border: 1px solid #E5E5E5; /* border for the small posts */ overflow: hidden;}
.posts-thumb { /* Style for the small posts thumbnails */ margin-right: 10px;}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { background: none; border: none; box-shadow: none; padding: 0;}

h3.post-title a{ /* Style for the small posts titles */ font-size: 14px; color: #747474; text-transform: uppercase;}
h2.date-header { /* Hide the post date */ display: none;}
.post-footer { display: none;}
h3.post-title { margin: 0px;}
.readmorebutton { margin-top: 5px;}
.readmorebutton a { /* Styles for the Read More link */ color: #767676; border: 1px solid #E1E1E1; background: #EAEAEA; /* Background color for the Read More link */ text-decoration: none; padding: 3px 5px; font-weight: bold; font-size: 11px; float: right; position: relative;}
.post-comment-link { /* Style for the comment bubble of posts below */ position: absolute; top: -35px; right: -10px; display: block; border: 1px solid #E1E1E1; /* border for the comment bubble */ background: #EAEAEA; /* background color for the comment bubble */ font-size: 11px; position: absolute;}
#first .post-comment-link { /* Style for the comment bubble of first post */ position: absolute; top: 10px; right: 0px;}
.post-comment-link a { /* Link color for the comments bubble*/ padding: 10px; color: #6A6A6A; text-decoration: none; font-weight: bold;}
#blog-pager { clear: both;}</style></b:if></b:if>

Gerekli özelleştirmeler

1-Ana sayfada post görünüşleri ve özetleri ayarlamak için birinci post yanı boyutu büyük olan post için üsteki kodta alttaki kodu bulup değerleri değiştirebilirsiniz.

width: auto;
height: 250px;

2-Eğer ana sayfada diğer postlarınız düzgün gözükmüyorsa üstteki kodta alttaki kodu bulup değerleri ayarlayabilirsiniz.Demek istediğim alttaki kodu bulun ve post boyutlarını ayarlayın,ana sayfada tek sütün gözüküyorsa 46% değerini küçültün.

width: 46%;height: 230px;