Membuat Auto Read More dengan Gambar Thumbnail

Membuat Auto Read More dengan Gambar Thumbnail

Versi ini adalah hack script dari Rilwis yang telah di update dan dimodifikasi untuk membuatnya lebih usefull/multi guna. Lebih banyak fitur-fitur yang dapat Sobat manfaatkan untuk membuat auto readmore yang user friendly, seperti : thumbnails floating,post skipping, ringkasan dengan dan tanpa thumbnails dan beberapa fitur utama new update, yaitu :

1.Terdapat Automatic default thumbnail image ketika postingan tidak mempunyai atau disertakan gambar/ image di dalamnya.

2.Dapat dengan mudah untuk membuat turn off/disable auto read more untuk beberapa posting pertama.

3.Opsi turn on/off auto readmore pada homepage and label page.

Sebelum mulai membuat Auto Read More, check jika Anda telah memasang Read More Link atau Auto Read More link di template, maka hapus kodenya dahulu semuanya. Caranya ikuti petunjuk Cara Menghapus Read More/Auto Read More Link di Blogger

Langkah Pemasangan Kode Script Auto Read More

1. Masuk ke Blogger Dashboard > Template

2. Backup template Anda

3. Click Edit HTML

4. Lanjutkan

5. Check Expand Widget Template checkbox

6. Cari code tag  </head> 

    Untuk memudahkan pencarian gunakan Control + F

7. Tambahkan / letakkan kode berikut tepat diatas tag  </head>

    Kode nya :

<script type='text/javascript'>
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrNenZWXmWnew75exxvJ_xJ0OMV9_XFc1rn1TDqY1aXx8JOwDIITZFZa9VhrTi8kFA8gs1HJxkxKbC1VHfD0vdnfOaV-O7ImXYDkWQAFMxKY4B2z2Td23SQmxDwvMdeay1NXHuSoZZ1k/s1600/no-thumb.jpg',
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
};
</script>
<script src='http://problogizjs.googlecode.com/files/autoreadmore.js' type='text/javascript'/>

8. Cari tag line  <div class='post-body entry-content'>

9.  Letakkan kode berikut tepat dibawah tag <div class='post-body entry-content'>

     Kode nya :

<span expr:id='data:post.id'><data:post.body/></span> <b:if cond='data:blog.pageType == &quot;index&quot;'> <script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</script> <span style='float:right;padding-top:12px;'><a expr:href='data:post.url'>Read More</a></span> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</script> </b:if> </b:if>

10. Klik Pratinjau / Preview, setelah semua OK
      Save / Simpan Template

Kostumisasi Fitur

Anda dapat merubah code control fitur yang telah diberi warna-warna pada script auto read more diatas, antara lain :

showImage: true, Jika Sobat tidak ingin menampilkan gambar thumbnail ganti "true" menjadi "false"

imgFloat: 'left', Jika ingin posisi gambar di sebelah kanan ganti menjadi 'right'

imgWidth: 120, Ukuran lebar gambar

imgHeight: 90, Ukuran tinggi gambar

defaultThumb:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrNenZWXmWnew75exxvJ_xJ0OMV9_XFc1rn1TDqY1aXx8JOwDIITZFZa9VhrTi8kFA8gs1HJxkxKbC1VHfD0vdnfOaV-O7ImXYDkWQAFMxKY4B2z2Td23SQmxDwvMdeay1NXHuSoZZ1k/s1600/no-thumb.jpg', Gambar default ini muncul jika postingan tidak ada gambarnya. Sobat juga bisa menggantinya dengan url gambar pilihan sendiri.

words: 65, Jumlah kata jika ringkasan dengan thumbnail

wordsNoImg: 80, Jumlah kata jika ringkasan tanpa thumbnail

skip: 0, untuk buat on/off fungsi auto readmore pada beberapa postingan. Jika di set angka "0" maka berarti all post/semua postingan diterapkan fungsi auto readmore 

showHome and showLabel: fungsi auto readmore pada halaman page dan label page. Jika di set "true" maka fungsi auto readmore enable/on dan "false" berarti off/disable

Itulah Sobat, cara membuat Auto Read More, semoga bisa membantu para Sobat bloger.

Cara Menghapus Read More/Auto Read More Link di Blogger

Cara Menghapus Read More/Auto Read More Link di Blogger

Sobat bloger..kali ini saya mau share tentang Cara Menghapus Read More/Auto Read More Link di Blogger, yang terdiri dari 2 bagian yaitu : Menghapus Read More Link Bawaan Blogger (fungsi Jump Break) dan Auto Read More Link. Dengan menghapus atau menghilangkan kode Read More link tersebut pada template blogger, akan membuat posting di homepage blog ditampilkan seluruhnya / seutuhnya tanpa ada ringkasan / summary.

Tentu maksudnya bisa berbeda-beda tiap individu, ada yang menghapusnya karena ingin memasang Auto Read More yang baru dan lebih baik mungkin, atau ada juga yang malah lebih suka postingan / artikel di homepage ditampilkan secara utuh tanpa ada pemotongan.

Oleh karena itu, jika Sobat ingin menghapus fungsi Read More link, baik yang bawaan/default blogger maupun yang Auto Read More feature link. Ikuti saja tutorial dan panduannya dibawah ini.

1. Menghapus / Remove Read More Link Bawaan Blogger ( Fungsi Jump Break Link )
 

Masuk Blogger > Template > Edit HTML

Backup your template

Click the "Expand widget Templates" Box

Tekan Control + F

Cari tag line  

<data:post.body/>

Dibawahnya hapus kode berikut ini :

<b:if cond='data:post.hasJumpLink'> 
<div class='jump-link'> 
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> 
</div> 
</b:if >

Kemudian Save Template
Selesai!!. Sobat sudah menghapus fungsi Jump Break link Blogger pada blog Anda.

2. Menghapus Auto Read More Link di Blogger 

Untuk yang ini tidak semudah atau se-sederhana menghapus Jump Break Link diatas, karena type template dan jenis kode Auto Read More bisa berbeda-beda. Untuk itu saya akan berikan 2 contoh dibawah dengan cara yang berbeda.

Cara Pertama

Remove Blogger Auto Read More Option

Masuk Blogger > Template > Edit HTML

Backup your template

Click the "Expand widget Templates" Box

Tekan Control + F

Cari tag line

<div class='post-body entry-content'>

Dibawahnya cari semua kode seperti berikut ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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='readmorecontent'><a class='readmore' expr:href='data:post.url'><b>Read more &#187;</b></a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

note : beberapa code mungkin bisa berbeda tergantung jenis template, tapi secara keseluruhan hampir sama.

Gantilah semua kode diatas dengan kode berikut :

<data:post.body/>

Kemudian Save Template

Refresh Homepage blog Sobat dan check fungsi Auto Read More telah hilang dari blog Sobat.

Namun ada kasus yang masih melihat tombol Read more link, setelah melalui semua proses diatas, maka ini bisa diatasi dengan kembali cari kode mirip berikut dibawah :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='readmore-wrap'>
<a class='readmore' expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

Save Template Sobat sekali lagi,
Dan Selesai!!

Cara Kedua

Remove Auto Read More Feature with Thumbnail

Masuk Blogger > Template > Edit HTML

Backup your template

Click the "Expand widget Templates" Box

Tekan Control + F

Cari semua kode yang mirip seperti berikut :

<p><script type='text/javascript'> summary_noimg = 800; summary_img = 650; img_thumb_height = 150; img_thumb_width = 200; </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> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <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><a expr:href='data:post.url'>Read more &#187;</a></div> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>

Gantikan semua dengan kode dibawah ini :

<p><data:post.body/></p>

Kemudian Save Template

Selesai!!

Semoga metode-metode Cara Menghapus Read More Link di Blogger diatas bisa membantu Sobat semua. Mungkin Sobat bisa menambahkan metode lain dengan senang hati saya menerimanya sebagai saling tukar informasi atau sharing bersama.

Cara Membuat Blockquote/Kotak Khusus Kode Di Postingan

Cara Membuat Blockquote/Kotak Khusus Kode Di Postingan

Met pagi Sobat semua seperti yang sudah diketahui betapa pentingnya untuk kita jika mengetahui 

Cara Membuat Blockquote Di Postingan atau Artikel, terutama yang diblognya berkonsep 

tentang tutorial tips n trik blog. Membuat blockquote bertujuan agar pengunjung tidak bingung dan bisa membedakan mana yang kode Html atau bukan.

Dari pada panjang lebar, karena yang lebar itu mulutnya tukul simak tutorial dibawah ini

Cara Membuat Blockquote atau Kotak Khusus Untuk Kode HTML/JavaScript Di Posting/Artikel

1.Log in ke blog

2.Buat Entri Baru

3.Pilih HTML

4.Copy kode dibawah ini

<blockquote style="background-color: #f6ebc1; border-left: 5px solid #fce27c; margin: 0; margin: 1em 3em; padding: .5em 1em;">
Masukkan kode atau kata disini </blockquote>

Catatan: ganti yang berwarna merah dengan "terserah anda"

sedangkan yang berwarna biru adalah warna latar belakang atau background !!
bingung mencari kode warna html? klik aja disini


5.Selesai

Cara Membuat Gambar Membesar DiSentuh Mouse

Cara Membuat Gambar Membesar Disentuh Mouse - Banyak sekali cara untuk mempercantik tampilan sebuah Blog yang kita miliki salah satunya dengan Cara Memperbesar Gambar Saat Disorot Mouse, Dimana Tampilan sebuah Gambar atau Foto akan Membesar Saat Disorot Oleh Pointer Mouse.

Baiklah untuk lebih jelasnya Cara Memperbesar Gambar Saat Disorot Mouse berikut contohnya, silahkan arahkan pointer mouse pada Gambar dibawah ini :

 
Nah seperti itulah Cara Memperbesar Gambar Saat Disorot Mouse yang akan saya share pada kesempatan kali ini. Apabila sahabat tertarik untuk membuatnya silahkan sahabat copy paste kode dibawah ini dan letakan pada halaman posting atau sidebar milik sahabat :

<style type="text/css"> border: none; vertical-align: top; </style> <script src="http://sundaboy.googlecode.com/files/sundaboyzoom.txt" type="text/javascript"></script><img border="0" class="expando" height="100" src="URL GAMBAR" width="100" />

Keterangan :

• Ganti URL GAMBAR dengan url gambar yang akan diperbesar
• Ukuran Tinggi dan Lebar harus lebih rendah dibanding ukuran aslinya, karena kode ini akan memperbesar sesuai dengan ukuran gambar yang sahabat masukan. misalnya ukuran gambar asli adalah tinggi : 200px dan lebar 300px. Maka sahabat harus merubah kodenya menjadi lebih kecil dari ukuran aslinya, misalnya tinggi 100px dan lebar 200px. Nanti saat disorot oleh mouse maka Gambar akan di zoom menjadi ukuran aslinya yaitu 200px dan 300px..

Bagaimana?! mudah bukan  Cara Memperbesar Gambar Saat Disorot Mouse,

 semoga bermanfaat untuk sahabat. kalau ada kekurangan mohon untuk dimaklumi