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 terkenal dikala ini, apakah itu isu atau blog teknologi, semua orang membutuhkan tata letak magazine style untuk blog mereka.
Ada beberapa cara untuk menciptakan posting muncul dengan menyerupai citra diatas. Sebuah pilihan akan menggunakan script readmore untuk menampilkan ringkasan post dan menambahkan tag kondisional untuk menambahkan gaya yang berbeda dari posting gres atau pertama, sehingga akan mempunyai ukuran width yang lebih besar dari posting lama.
Jadi, tutorial ini akan menunjukkan cara menciptakan magazine style untuk Template blogger. Dengan mengikuti tutorial ini, anda sanggup menciptakan 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 menciptakan backup dari template anda dikala 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 instruksi area dan buka kotak pencarian dengan memakai tombol CTRL+F, kemudian 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 instruksi dibawah ini:
<b:if cond='data:blog.pageType != "item"'>Catatan: Anda sanggup mengganti tulisan Read More, dengan teks lain menyerupai '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/j4vascript'>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/j4vascript'>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/j4vascript'>
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/j4vascript'>
//<![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 bab 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 yaitu jumlah huruf untuk pos-pos singkat ketika tidak ada gambar yang tersedia
- Nomor kedua atau baris kedua yaitu jumlah huruf yang akan muncul kalau post singkat mempunyai gambar.
- baris 3 dan 4 yaitu untuk tinggi dan lebar thumbnail(gambar) pada post singkat.
- pada goresan pena yang biru juga mempunyai perlakuan yang sama menyerupai diatas, hanya saja yang berwarna biru untuk posting terbaru/pertama.
2. Dan akhirnya, kita mempunyai style CSS. Itu instruksi yang memilih 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 bab ini:
width: 46%;Lebar 46% dari lebar kolom utama dan tinggi diatur ke 230px. Di sini Anda mungkin perlu bereksperimen sedikit dengan ukuran untuk menciptakan mereka lebih bagus, jangan menyerupai 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.
Mari berteman dengan saya
Follow my Instagram _yudha58
0 Response to "Membuat Tampilan Magazine Dengan Ringkasan Artikel Dan Thumbnail Di Blogger"
Posting Komentar