Langsung ke konten utama

Tampilan Posting Grid dengan Thumbnail pada Blogger

Tampilan posting pada homepage blogger secara grid dengan thumbnail ini sangat menarik untuk diterapkan pada blog sobat. Tampilan ini sangat cocok untuk blog yang memiliki gambar/photo pada setiap postingannya. Mungkin blog dengan niche berita, photografi, dll. Walaupun sebenarnya sekarang sobat dapat dengan mudah menggunakan tampilan dengan template dinamic yang notabene memiliki tampilan grid pada homepage-nya. Kalau sobat tidak mau repot sobat pilih saja template dinamic yang tersedia pada costumise template.

Mungkin sobat dapat lihat dulu:
a.) Tampilan Posting Datar dengan Thumbnail
b.) Tampilan Posting ala Majalah/Korang dengan Thumbnail

Kelebihan:
  • Adanya Tampilan seperti Pinterest
  • Blog terlihat lebih elegan dan profesional

Sebelum Memasang
Sebelum sobat memasang tampilan ini, ada baiknya sobat download template sobat terlebih dahulu.
Backup Template: Pada dashboard blogger --> Template --> Cadangkan/Pulihkan (Pojok Kanan Atas) --> Unduh Template Lengkap

Cara Memasang:
Langkah 1. Pada Dashboard blogger pergi ke --> Template --> Edit HTML

Langkah 2. Klik kiri disembarang kotak Edit HTML dan cari (CTRL+F) kode:
</head>
Langkah 3. Copy dan Paste kode berikut diatas/sebelum </head>:
<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</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, pURL, pTITLE){
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; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}
else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXuMVjKmgvSkrHGxCL8J7sT0IHUOc8juKwc2xk5XEXKsvK9Ie13hR3D_JVPu1bnrtGYGUEK2Al7Ea2C83tHUyy9c1wWcG6CUcsw9Pd0LdFYiGiI_GoAgkMSXMEdVtTKHIkW_T4EfXWPr56/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>
Langkah 4. Selanjutnya cari (CTRL+F) kode berikut:
<data:post.body/>
Pilih kode yang kedua.

Langkah 5. Lalu gantikan kode diatas dengan kode berikut:
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
</b:if>
Langkah 6. Pilih salah satu kode style yang sobat suka lalu Paste diatas </head>

Tampilan Pinterest

Tampilan Pinterest



Tampilan Grid Simple

Tampilan Grid Simple

Langkah 7. Pratinjau terlebih dahulu. Apabila oke maka sobat dapat Simpan Template.
Selamat Mencoba.

Komentar

Postingan populer dari blog ini

Mod Immortal Treasure Trove Carafe 2018

Mod immortal Treasure Trove Carafe 2018. This treasure contain of : Huskar - The Spoils of Dezun, Ogre Magi - Gimlek Decanter, Pangolier - Mask of Confidant, Venomancer - Cult of Aktok, Rubick - Crux of Perplex, Disruptor - Orb of Deliverance, Silencer - Glaive of Oscilla, Storm Spirit - Mandate of the Stormborn, Windranger - Sylvan Vedette and Mirana mount - Axia of Metira. Hope you guys like this mods cosmetic skin and support our favorite game Dota 2 in steam community market. No money? Just mods! Enjoy the game and boost your Matchmaking Ratings MMR and Seasonal Rankings Medals !

Rubick - Rambling Fatebender

Mod Rubick - Rambling Fatebender rare item Dota 2 Reborn from Treasure of the Emerald Revival. This item consists of : Staff of the Rambling Fatebender Cape of the Rambling Fatebender Pauldrons of the Rambling Fatebender Mask of the Rambling Fatebender Rubick - Rambling Fatebender Hope you guys like this mod and support our favorite game in steam community market. No money? Just mods! Enjoy your game!

Broodmother - Epoch of the Abysm

Black Arachnia, the Broodmother - Epoch of the Abysm mods rare item Dota 2 Reborn from Fortivus 2017 Treasure. This item consists of : Eyes of the Abysm Abdomen of the Abysm Anterior of the Abysm Legs of the Abysm Creepling of the Abysm Broodmother - Epoch of the Abysm Hope you guys like this mods and support our favorite game in steam community market. No money? Just mods! Enjoy your game!