Referensi mahrus.net tentang tutorial android, blogging, daftar, kesehatan, komputer, internet, operator update terbaru dan terlengkap setiap hari.

Tuesday, April 21, 2015

Cara Pasang Read More Seo Friendly di Blog Gratis


Cara Pasang Read More Seo Friendly di Blog Gratis

cara buat readmore

Cara Memasang READ MORE di blog dengan mudah agar fast loading dan menjadikan blog agan semua menjadi seo friendly. Read more tentunya sangat penting sekali untuk terpasang di blog anda karena selain mempercantik tampilan home page sobat, juga agar blog sobat lebih simpel dan ringan loadingnya.

Read more ini sudah bisa digunakan otomatis untuk blog agan semua, saat anda memasang kode html berikut ini maka akan tampil dengan sendirinya jika kita membuka situs depan blog anda. Nah untuk menampilkan artikel per artikel agar singkat sobat harus segera memasang readmore ini.

Biasanya jika anda menggunakan template bawaan blogger fitur readmore ini tidak ada jadi semua artikel sobat akan tampil semua di halaman depan tanpa disingkat, jadi terkesan kurang menarik ya master blogging.

Kalian nanti juga bisa mengganti kata readmore dengan "Selengkapnya", "Selanjutnya", "View More", "Lanjutkan membaca" dan "Sak Lajengipun". .  dan masih banyak lagi kata lain yang bisa anda rubah sendiri.

Cara Memasang readmore otomatis dgn gambar :


  • Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
  • Cari Kode </head>.
  • Copy paste kode dibawah ini tepat di atas kode </head>
<!--ReadMore http://trikseosimple.blogspot.com-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</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){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->
  • Save Template anda.
  • Kemudian scroll template anda kebawah cari kode seperti berikut:
readmore keren

Keterangan : Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

  • Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
  • Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut :
readmore

  • Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
  • Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
  • selanjutnya akan terbuka kode kode yang lain.
  • geser atau scrol ke bawah dan cari kode
 <data:post.body/>
  •  Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
  • Klik SAVE / SIMPAN dan lihat hasilnya.

Cara Membuat Read More di Blog Tanpa Gambar Keren :


1. Masuk ke Template dan klik Edit Template

2. Klik CTRL + F, dan cari kode html </head>

3. Letakan kode dibawah ini, tepat diatas kode html </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
img_thumb_width = 120;
</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){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. Lanjut dan cari kode ini <data:post.body/> dan ubah dengan kode HTML di bawah ini.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Disini banyak blogger yang bingung, karena ada banyak sekali kode <data:post.body/>, kalau pakai template standar yang diganti adalah yang kode Kedua ( itemprop='description articleBody' )

6. Jika sudah tinggal Anda klik Save dan, silahkan lihat hasilnya. Jika cara membuat read more di blog Anda berhasil, maka hasilnya akan seperti gambar dibawah ini.

itulah 2 cara gampang membuat readmore otomatis keren di blog semoga bisa membantu kalian yang mencoba ingin menerapkan pada template blog anda. Selamat mencoba!


Cara Pasang Read More Seo Friendly di Blog Gratis
loading...
Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Pasang Read More Seo Friendly di Blog Gratis