[Tutorial] Menambahkan Navigasi Read More pada Blogspot

Selamat malam sahabat bloger, pada malam ini saya akan memposting bagaimana cara manambahkan navigasi Read More pada blog anda. Sebelumnya mungkin anda akan tertarik untuk membaca

Menambahkan Bootstrap CSS Framework Pada Blogspot karena beberapa bagian styling link yang saya gunakan menggunakan class css yang ada pada Bootstrap Framework.



Langkah-langkah ini saya dapatkan setelah melakukan beberapa percobaan menambahkan read more dengan cara-cara berbeda. Sehingga, menurut saya, ini adalah cara paling simple yang diberikan oleh seorang blogger internasional yang diposting di halaman blognya [http://netoopsblog.blogspot.com/2013/08/add-automatic-read-more-trick-blogger-blogs.html]. Berikut adalah langkah-langkah menambahkan link Read More pada blogspot :

1. Pilih menu Template lalu klik pada tombol Edit HTML. 
2. Selalu backup template anda sebelum melakukan perubahan pada kode-kode HTML pada halaman Edit HTML.
3. Cari kode </head>.
4. Copy kode berikut ini, lalu Paste tepat diatas kode </head>
   

   <script type='text/javascript'>
   
     var thumbnail_mode = "no-float" ; 
   
     summary_noimg = 400;  /* Summary length if no image*/
   
     summary_img = 300; /* Summary length with image*/
   
     img_thumb_height = 200; /*Image Height*/
   
     img_thumb_width = 200; /*Image Width*/
   
     </script>
   
     <script type='text/javascript'   src='http://netoopscodes.googlecode.com/svn/branches/Js%20files/auto-readmore-blogger.js'   ></script>
   

5.  Selanjutnya, cari kode <data:post.body/> dan ganti kode tersbut dengan kode dibawah ini.
   

   <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 style='clear: both;'/>
   
   <span class='rmlink'   style='font-weight:bold;padding:5px;float:right;text-align:right;'><a   expr:href='data:post.url' >Read more...</a></span>
   
   </b:if>
   
   </b:if>
   

6. Preview template anda, jika sudah sesuai maka simpan template anda. 

Sekian tutorial simple pada malam hari ini. Jika terjadi kesalahan, restore template anda lalu ulangi langkah-langkah di atas dari awal.



Terimakasih sudah berkunjung pada blog saya.