cara membuat read more otomatis dengan snippet

Memodifikasi post halaman blog agar lebih ringan dengan sistem snipet pada home page halaman blog menjadi keuntungan buat para bloger mania. Sistem memodifikasi post pada halaman blogspot ini dapat mengurangi pemakaian script read more sebab sudah memakai fitur snipet secara otomatis akan mengambil atau menampilkan beberapa baris suku kata dari artikel postingan. Banyak para bloger mania selalu bertanya kepada saya, bagaimana cara membuat loading blog agar tidak lambat ? salah satu cara jitu yang saya pakai adalah sistem memodifikasi post pada halaman blog. itu adalah tehnik saya agar loading blog saya lebih ringan.

Pada postingan kali ini , post yang telah saya modifikasi akan lebih gampang untuk pemakaian berbagai widget pada halaman post anda. saya sudah membuat tanda untuk keperluan widget seperti " Related Post ", " Share media sosial " ditambah dengan pesan anda buat para pengunjung blog seperti halaman blog saya ini. Dalam modifikasi saya saya sudah menyertakan " Author post " pada halaman tersebut jadi anda tidak perlu lagi untuk memasangnya. Untuk demonya anda boleh lihat seperti tampilan halaman blog saya ini, baik itu pada home page saya ( Halaman awal blog ini ) atau tampilan saat anda membaca ini.

Untuk DEMO home page silahkan " KLIK DISINI " Lihat tampilannya tanpa menggunakan read more.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

/*****************************************
START CSS modifikasi post BLOG DESIGN
******************************************/
h2.post-titles {
display : block;
font-family : Arial, sans-serif;
font-weight : bold;
font-size : 14px;
color : #950202;
padding : 5px;
background : #D0D5FD;
}
h2.post-title {
display : none;
}
.posthead {
font-size : 12px;
padding-top : 5px;
padding-left : 15px;
color : #999;margin:-10px 0 10px 0;
}
.post-body {
color : #000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size : 13px;
padding : 0 5px;width: auto;height:auto;
text-align : left; line-height: 1.5em;
}
.thuum {
height : 90px;
width : 150px;
border : #999999 solid 1px;
}
.thumbmage {
float : left;
width : auto;
height : auto;
margin : -20px 0 -10px 0;
padding : 5px;
width : 150px;
height : 100px;
transform : rotate(9deg);
} /*****************************************
END CSS modifikasi post BLOG DESIGN
******************************************/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Karena kita mau memodifikasi post pada halaman blog, sekarang anda lebih fokus terhadap tulisan post.
• cari kode seperti kode dibawah ini
  
  <b:includable id='post' var='post'>...</b:includable>
  
  
• Setelah ketemu silahkan perhatikan kodenya agar lebih tepat. lihat code
  <b:includable id='post' var='post'> ini adalah kode awal dari post blog anda, jadi anda harus menghapusnya mulai dari kode tersebut. dan kode yang terakhir sebagai kode penutupnya adalah </b:includable> berarti anda harus menghapus semua kode tersebut sampai batas kode </b:includable>.
• Setelah anda hapus gantikan dengan kode yang ada dibawah ini, silahkan copy kode yang ada didalam spoiler dibawah ini.
  

<b:includable id='post' var='post'>
<!-- Modifikasi post BLOG DESiGN START-->
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.title'>
<h2 class='post-titles' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.firstImageUrl'>
<div style='clear:both;'/>
<span class='thumbmage'>
<img class='thuum' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
</span>
<b:else/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='posthead'>
Di poskan oleh :
<span class='vcard author'>
<span class='fn'>
<data:post.author/>
</span>
</span>
| Dipublish pada :
<span class='updated'>
<data:post.timestamp/>
</span>
|
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'>
1
<data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</b:if>
</div>
</b:if>
</b:if>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<div>
<!-- Blog Design start pesan halaman -->
<div style='margin-top:1px; margin-right: 2px; text-align:center;font-family : Arial, Helvetica, sans-serif; font-size : 12px;'>
<div>

[[ isi dengan pesan anda kepada pengunjung halaman berupa terimakasih atas kunjungannya]]

</div>
</div>
</div>
<div style='clear: both;'/>
<!-- Blog Design end pesan halaman -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top: 10px;'>
<!-- Blog Design start related post halaman -->
<div>

[[ isi dengan related post, silahkan kunjungi <a href="http://rivai-silaban.blogspot.com/2013/07/cara-membuat-widget-related-post-valid.html" target="_blank" title="cara membuat related post">++ cara membuat related post ++ </a> untuk membuat related post halaman anda]]

</div>
</div>
</b:if>
<div style='clear: both;'/>
<!-- Blog Design and related post halaman -->
<!-- Blog Design start share sosial media halaman -->
<div>

[[ isi dengan share sosial media anda, silahkan kunjungi <a href="http://rivai-silaban.blogspot.com/2013/07/cara-membuat-widget-share-diblog.html" target="_blank" title="cara membuat widget share sosial media">++ cara membuat widget share sosial media ++ </a> untuk membuat memasang sosial media share halaman anda]]

</div>
<!-- Blog Design and share sosial media halaman -->

<div style='font-size: 11px; color: #999; padding-top: 5px;'>
Di posting oleh :
<span class='vcard author'>
<span class='fn'>
<data:post.author/>
</span>
</span>
, Update pada :
<span class='updated'>
<data:post.timestamp/>
</span>
| &#9658;
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'>
1
<data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</b:if>

</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div>
<data:post.snippet/>
</div>
<div style='clear:both;'/>
</b:if>
</b:if>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText' rel='nofollow'>
<data:post.jumpText/>
</a>
</div>
</b:if>
</div><!-- Modifikasi post BLOG DESiGN AND-->
</b:includable>

Keterangan Code

• Untuk kode CSSnya sesuaikan tampilan dengan kreative anda sendiri,bila ada kode yang sama dengan kode CSS yang anda miliki sebelumnya silahkan hapus satu kode CSS yang sama.
• Untuk mengisi berbagai widget pada halaman anda silahkan lihat kode warna blog hitam, sya sudah membuat tnda untuk keperluan RELATED POST, SHARE SOSIAL MEDIA, DAN PESAN ADMIN.
  

Kesimpulan

Modifikasi halaman post yang telah saya posting ini akan mengurangi beratnya loading halaman blog anda. modifikasi post halaman blog ini valid terhadap HTML 5 dan CSS 3 serta lebih SEO Friendly.

Untuk melakukan tutorial ini anda harus lebih dahulu untuk menyimpan tampila template anda agar lebih aman, bila ada kesalahan atau kekurangan pada tutorial ini silahkan hubungi saya dengan fasilitas yang ada di halaman blog ini atau share bersama saya pada form komentar halaman blog ini.

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

post

• blockquote blogger
• solusi kesalahan membuat pesan komentar diblog
• cara membuat spoiler di blog valid html5
• mengantisipasi tag heading h4 h5 h6 not found pada tool seo
• membuat link internal dan external seo friendly
• cara membuat tool parse kode html diblog
• meningkatkan trafik pengunjung dengan feedburner
• Random post dengan gambar valid html5
• Widget random post seo friendly html5
• Cara membuat pesan komentar di blogspot

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 10:13 PM