Template dengan magazine atau newspaper style adalah menampilkan ringkasan atau cuplikan di homepage dengan block kolom di atas satu sama lain. Jenis template ini sangat populer saat ini, apakah itu berita atau blog teknologi, semua orang membutuhkan tata letak magazine style untuk blog mereka.
Ada beberapa cara untuk membuat posting muncul dengan seperti gambaran diatas. Sebuah pilihan akan menggunakan script readmore untuk menampilkan ringkasan post dan menambahkan tag kondisional untuk menambahkan gaya yang berbeda dari posting baru atau pertama, sehingga akan memiliki ukuran width yang lebih besar dari posting lama.
Jadi, tutorial ini akan menunjukkan cara membuat magazine style untuk Template blogger. Dengan mengikuti tutorial ini, anda dapat membuat template Blogger yang membosankan dan sederhana menjadi lebih menarik dengan tata letak magazine style.
Menambahkan Magazine/Newspaper style pada Template Blogger
Langkah 1. Sebelum melangkah lebih jauh, silakan membuat backup dari template anda saat ini terlebih dahulu untuk memastikan bahwa anda tidak akan kehilangan sesuatu yang penting dari template sebelumnya, caranya login ke Dashboard blogger, pilih blog dan masuk ke tab Template , kemudian klik pada tombol Cadangkan/Pulihkan di sudut sebelah kanan. Setelah anda menyimpan salinan template .xml, klik pada tombol Edit HTML:
 |
| Edit Html |
Langkah 2. Klik di mana saja di dalam kode area dan buka kotak pencarian dengan menggunakan tombol CTRL+F, lalu cari shortcode dibawah ini:
<data:post.body/>Catatan: anda menemukan beberapa atau lebih dari satu untuk baris diatas, maka cukup berhenti pada baris yang kedua.
Langkah 3. Hapus baris tersebut dan tambahkan kode dibawah ini:
<b:if cond='data:blog.pageType != "item"'>Catatan: Anda dapat mengganti tulisan Read More, dengan teks lain seperti 'lebih lanjut', 'lanjutkan membaca', ataupun lainnya.
<b:if cond='data:blog.pageType != "static_page"'>
<span class='post-comment-link'>
<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'><data:post.numComments/></a>
</b:if>
</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'>Read More »</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>
Langkah 4. Sekarang cari (CTRL + F) baris dibawah ini:
<b:include data='post' name='post'/>
Langkah 5. Hapus baris itu juga dan gantikan dengan menambahkan code dibawah ini:
<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 cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</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>
Langkah 6. Cari tag </ head> dan paste script dibawah diatasnya:
<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>
Langkah 7. Dan paste script css dibawah diatas tag </head> juga:
<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>
Menyesuaikan Tata Letak Magazine
1. Pada awal script dari langkah 6, kita mengambil bagian ini:
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;
- Angka pertama pada baris pertama adalah jumlah karakter untuk pos-pos singkat ketika tidak ada gambar yang tersedia
- Nomor kedua atau baris kedua adalah jumlah karakter yang akan muncul bila post singkat memiliki gambar.
- baris 3 dan 4 adalah untuk tinggi dan lebar thumbnail(gambar) pada post singkat.
- pada tulisan yang biru juga memiliki perlakuan yang sama seperti diatas, hanya saja yang berwarna biru untuk posting terbaru/pertama.
2. Dan akhirnya, kita memiliki style CSS. Itu kode yang menentukan bagaimana posting akan terlihat pada homepage dan juga pada halaman arsip, kecuali untuk posting pertamanya.
Untuk mengubah lebar dan tinggi, masing-masing ukuran untuk field posting pertama, ubah pada baris ini:
width: auto;
height: 250px;
Di bawah posting pertama nilai-nilai untuk posting lainnya, cari bagian ini:
width: 46%;Lebar 46% dari lebar kolom utama dan tinggi diatur ke 230px. Di sini Anda mungkin perlu bereksperimen sedikit dengan ukuran untuk membuat mereka lebih bagus, jangan seperti di blog demo.
height: 230px;
Akhirnya, atur jumlah posting untuk ditampilkan di homepage, sehingga tidak akan ada ruang kosong. Pergi ke Setelan> Pos, komentar dan berbagi > Tampilkan sebanyak mungkin dan pilih jumlah posting yang ingin ditampilkan.
0 komentar