Membuat Tampilan Postingan Homepage Seperti Layar Leptop dan Tab

Membuat Tampilan Postingan Homepage Seperti Layar Leptop dan Tab - Sebelumnya saya berterimakasih kepada Bungfrangki yang telah mengeshare tutorial tentang membuat Homepage seperti layar leptop dan tab.

Bagi sobat yang menginginkan membuat sebuah blog template dan ingin homepagenya terlihat ada leptop secara nyata untuk menarik pengunjung. Sekarang akan saya share kembali kepada sobat yang menginginkannya.


Prosen Membuat Tampilan Postingan Homepage Seperti Layar Leptop dan Tab:

Masuk keblogger >> Buka Template >> Edit HTML

Masukkan kode ibawah ini  diatas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
/* Homepage Layar Laptop */

Baca Juga

• Cara Membuat Peringatan Blog Sedang Perbaikan "Maintenance" / prbe
• Tutorial Membuat Tabel Keterangan Keren seperti Arlina Design di Blogger
• Memodifikasi Iframe didalam Blog Biar Menjadi 100% SEO

.post{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjbeU8F6lnjE5mtNCJTv9R17e8cCu-7OPjmC2FmIAdEVkFkhw6fEXjedq3uzy0uLTNMjWfZvzLYZbsRU8YQ_f6gx0_lC15vtLSARTT3XpSlaxDsQL0C5VAUntwhoyQiDrGV15KO_Y2ipE/s1600/bunground.png) no-repeat; margin: 0 0 30px 50px;width: 320px;height: 260px;overflow: hidden;float: left;positon: relative; padding:0;display:block}

.post h2 {margin:45px 0 30px;padding:0;font-family:&#39;Roboto&#39;, arial, sans-serif;font-size:18px;line-height:1.3em;text-align:center}
.post h2 a{color:#777; text-decoration:none;font-weight:700;text-transform:capitalize}
.post h2 a:hover{color:#66be92;background:#f9f9f9;}
h3.date-header, .postmeta {display:none}
.snippet-wrapper img {margin:10px auto 0}
.mobile-no-img:before {content: &quot;&quot;; display: block;position: absolute;top: 0;left: 0;height: 100%;width: 244px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOV4B2UTPcn0iEw9C90Kt9Tas94A15wPn6i1ZotxzoDMvB59B8YLVk4ALQ2Da4YZf1jUphEpnEICuJEEhqQEAEbf-cISIcnlSOUVv_h5yK7CPI_3c2XHg3fZJ5D2VvQ6h6B0HwK5NxvsQ/s1600/zoom-bg.png) no-repeat scroll center center #222; opacity: 0;visibility: hidden;transition: all 0.25s ease-in-out 0s;}
.mobile-no-img:hover:before {visibility: visible; opacity: 0.8;}
.mobile-no-img {display: block; position: relative;max-width: 240px;margin-left: 38px;}
.mobile-no-img img {box-shadow: 0 0 0 #000;}
.mobile-no-img img {display: block;width: 244px;}
</style>
</b:if>
</b:if>

Sekarang tambahkan juga kode Javascript nya iatas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 0;
summary_img = 0;
img_thumb_height = 153;
img_thumb_width = 244;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-0){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}
function createSummaryAndThumb(d,t){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="text-align:center;margin:0;"><a class="mobile-no-img " href="' + t + '" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

 Setelah itu, cari kode <article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>  atau kode yang serupa, (yang pasti kode itu terletak setelah kode <b:includable id='post' var='post'> ). Letakkan kode berikut ini, tepat di bawah kode <article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='snippet-wrapper' itemprop='description'>
    <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;,&quot;<data:post.title/>&quot;);</script>
</div>
</b:if>
</b:if>

Langkah terakhir SIMPAN Template daan refresh home.
Semoga bermanfaat.

Cara Download DiBlogMinan

LAPORKAN MASALAH LINK TIDAK AKTIF