√ Cara Mengatur Jumlah Snippet di Homepage Blogger Supaya Terlihat Rapi - AdityaTekno

Social Items

Cara Mengatur Jumlah Snippet di Homepage Blogger Agar Terlihat Rapi

Cara Mengatur Jumlah Kata atau Huruf pada Snippet Homepage Blogger/Blogspot Agar Terlihat Rapi - Welcome back sobat AdityaTekno.com. Sesuai judul diatas, pembahasan seperti ini semacam membuat readmore otomatis, akan tetapi hanya terfokus pada snippetnya saja, deskripsi atau kalimat singkat yang mewakili artikel tertentu di homepage. Nah, pasti anda sekalian pengen kan jumlah kata diblognya menjadi rapi.

Tanpa berbasa-basi lagi, mari simak dua tutorial berikut ini Cara Mengatur Jumlah Snippet di Homepage Blogger Agar Terlihat Rapi.


1. Mengatur Jumlah Baris pada Snippet di Homepage Blogger dengan Manipulasi CSS (Tanpa JavaScript) 


Untuk Cara yang pertama yaitu mengatur jumlah baris yang diisi oleh kata-kata pada snippet di homepage. Cara berikut tidak menggunakan JavaScript, cocok bagi Blogger yang hemat JavaScript. Berikut cara-caranya.

Seperti biasanya, Login terlebih dahulu, kemudian setelah masuk ke Dashboard Blogger silahkan pilih Tema >> Edit HTML.

Temukan kode seperti berikut ini.
<div class='post-snippet'><data:post.snippet/></div>

Atau yang seperti ini.
<data:post.snippet/> 

Ganti kode tersebut dengan kode dibawah ini. 
<div class='post_summary' itemprop='articleBody'><data:post.body/></div>

Kemudian tambahkan kode CSS berikut ini, dan letakkan di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; 
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
.separator {display:none}
.post_summary{color:#666;line-height:1.4em;margin:0;font-size:13px;font-weight:normal;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;height:40px;overflow:hidden}
</b:if>


Note:
Angka 3 pada kode CSS di atas adalah yang menentukan jumlah pada baris snippet. Silahkan anda bisa mengubah angka tersebut jika ingin membuat jumlah baris pada snippet jadi lebih banyak. Dan cara yang pertama ini juga dapat diterapkan pada template AMP.

Simpan Tema. Dan lihat hasilnya.

2. Mengatur Jumlah Baris pada Snippet di Homepage Blogger dengan JavaScript 


Cara yang kedua ini seperti yang digunakan pada template EvoMagz buatan Mas Sugeng. Mengatur jumlah kata pada snippet/summary homepage dengan JavaScript, berikut cara-caranya.

Caranya sama seperti tutorial diatas, Login terlebih dahulu, kemudian setelah masuk ke Dashboard Blogger silahkan pilih Tema >> Edit HTML.

Temukan kode seperti berikut ini.
<div class='post-snippet'><data:post.snippet/></div>

Atau yang seperti ini.
<data:post.snippet/> 

Ganti kode tersebut dengan kode dibawah ini. 
<div class='post_summary' itemprop='articleBody'><data:post.body/></div>

Kemudian tambahkan kode JavaScript berikut ini, dibawah kode yang diganti tadi.
<script>//<![CDATA[$('.post_summary').each(function(){var txt=$(this).text().substr(0,140);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});//]]></script>

Dan hasilnya akan tampak seperti ini.
<div class='post_summary' itemprop='articleBody'><data:post.body/></div>
<script>
//<![CDATA[
$('.post_summary').each(function(){var txt=$(this).text().substr(0,140);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});
//]]>
</script>

Jika menggunakan tag conditional (widget khusus tampil di homepage), maka hasilnya akan seperti ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post_summary' itemprop='articleBody'><data:post.body/></div>
<script>
//<![CDATA[
$('.post_summary').each(function(){var txt=$(this).text().substr(0,200);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});
//]]>
</script>
</b:if>


Note:
Angka 200 adalah jumlah kata yang akan tampil sebagai snippet di homepage. Silahkan ubah dan sesuaikan dengan selera Anda.

Simpan Tema. Dan lihat hasilnya.

Demikian Cara Mengatur Jumlah Snippet di Homepage Blogger Supaya Terlihat Rapi. Semoga tutorial yang saya bagikan ini bisa membantu anda dalam mengatur jumlah snippet di homepage anda. Selamat mencoba dan Good Luck!

Sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.

sumber referensi

Cara Mengatur Jumlah Snippet di Homepage Blogger Supaya Terlihat Rapi

Cara Mengatur Jumlah Snippet di Homepage Blogger Agar Terlihat Rapi

Cara Mengatur Jumlah Kata atau Huruf pada Snippet Homepage Blogger/Blogspot Agar Terlihat Rapi - Welcome back sobat AdityaTekno.com. Sesuai judul diatas, pembahasan seperti ini semacam membuat readmore otomatis, akan tetapi hanya terfokus pada snippetnya saja, deskripsi atau kalimat singkat yang mewakili artikel tertentu di homepage. Nah, pasti anda sekalian pengen kan jumlah kata diblognya menjadi rapi.

Tanpa berbasa-basi lagi, mari simak dua tutorial berikut ini Cara Mengatur Jumlah Snippet di Homepage Blogger Agar Terlihat Rapi.


1. Mengatur Jumlah Baris pada Snippet di Homepage Blogger dengan Manipulasi CSS (Tanpa JavaScript) 


Untuk Cara yang pertama yaitu mengatur jumlah baris yang diisi oleh kata-kata pada snippet di homepage. Cara berikut tidak menggunakan JavaScript, cocok bagi Blogger yang hemat JavaScript. Berikut cara-caranya.

Seperti biasanya, Login terlebih dahulu, kemudian setelah masuk ke Dashboard Blogger silahkan pilih Tema >> Edit HTML.

Temukan kode seperti berikut ini.
<div class='post-snippet'><data:post.snippet/></div>

Atau yang seperti ini.
<data:post.snippet/> 

Ganti kode tersebut dengan kode dibawah ini. 
<div class='post_summary' itemprop='articleBody'><data:post.body/></div>

Kemudian tambahkan kode CSS berikut ini, dan letakkan di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; 
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
.separator {display:none}
.post_summary{color:#666;line-height:1.4em;margin:0;font-size:13px;font-weight:normal;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;height:40px;overflow:hidden}
</b:if>


Note:
Angka 3 pada kode CSS di atas adalah yang menentukan jumlah pada baris snippet. Silahkan anda bisa mengubah angka tersebut jika ingin membuat jumlah baris pada snippet jadi lebih banyak. Dan cara yang pertama ini juga dapat diterapkan pada template AMP.

Simpan Tema. Dan lihat hasilnya.

2. Mengatur Jumlah Baris pada Snippet di Homepage Blogger dengan JavaScript 


Cara yang kedua ini seperti yang digunakan pada template EvoMagz buatan Mas Sugeng. Mengatur jumlah kata pada snippet/summary homepage dengan JavaScript, berikut cara-caranya.

Caranya sama seperti tutorial diatas, Login terlebih dahulu, kemudian setelah masuk ke Dashboard Blogger silahkan pilih Tema >> Edit HTML.

Temukan kode seperti berikut ini.
<div class='post-snippet'><data:post.snippet/></div>

Atau yang seperti ini.
<data:post.snippet/> 

Ganti kode tersebut dengan kode dibawah ini. 
<div class='post_summary' itemprop='articleBody'><data:post.body/></div>

Kemudian tambahkan kode JavaScript berikut ini, dibawah kode yang diganti tadi.
<script>//<![CDATA[$('.post_summary').each(function(){var txt=$(this).text().substr(0,140);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});//]]></script>

Dan hasilnya akan tampak seperti ini.
<div class='post_summary' itemprop='articleBody'><data:post.body/></div>
<script>
//<![CDATA[
$('.post_summary').each(function(){var txt=$(this).text().substr(0,140);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});
//]]>
</script>

Jika menggunakan tag conditional (widget khusus tampil di homepage), maka hasilnya akan seperti ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post_summary' itemprop='articleBody'><data:post.body/></div>
<script>
//<![CDATA[
$('.post_summary').each(function(){var txt=$(this).text().substr(0,200);var j=txt.lastIndexOf(' ');if(j>42)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));});
//]]>
</script>
</b:if>


Note:
Angka 200 adalah jumlah kata yang akan tampil sebagai snippet di homepage. Silahkan ubah dan sesuaikan dengan selera Anda.

Simpan Tema. Dan lihat hasilnya.

Demikian Cara Mengatur Jumlah Snippet di Homepage Blogger Supaya Terlihat Rapi. Semoga tutorial yang saya bagikan ini bisa membantu anda dalam mengatur jumlah snippet di homepage anda. Selamat mencoba dan Good Luck!

Sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.

sumber referensi
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo