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;