Cara Menciptakan Auto Read More Otomatis Dengan Mode Zoom Image

Baca Juga

Auto Readmore ialah Menyematkan Postingan Menjadi Kecil. Tujuannya ialah biar tidak memakan daerah pada Home page blog. Memasang Fitur ini anda tidak perlu lagi menciptakan garis Readmore <!--More---> Pada Entri gres Atau mengklik tanda Insert Jump Break. Fitur Auto Readmore akan mengurangi secara otomatis postingan yang muncul dihalaman utama maka akan terpotong oleh Read More

Baca Juga :

• Cara Membuat Auto ReadMore Tanpa JQuery atau Java Script.

Cara Membuat Auto Read More Otomatis Dengan Mode Zoom Image

Cara Pertama :

1. Buka Blogger - Kemudian login.
2. Dashboard - Template
3. Edit HTML.
4. Silakan Backup Terlebih dahulu Template anda, Misalnya Sellect All Script Template ke Notepad.

Proses Pembuatan :

1. Temukan arahan </head> 
2. Copy&paste arahan berikut ini, dan letakkan diatas arahan </head>

<!--Auto Read More Mulai--> <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:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}     .grow img{height:165px;width:280px;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 abjad jikalau tidak ada gambar     summary_img = 250; //banyaknya abjad jikalau ada gambar     img_thumb_height = 165;     img_thumb_width = 280;     </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-->

3. Proses kedua, Temukan(CTRL+F) kode <data:post.body/> . Biasanya arahan ini, lebih dari satu. Kaprikornus pilih saja yang kedua & ketiga. Biasanya sih yang kedua. Atau anda dapat coba satupersatu1/1
4. Copy&paste  kode berikut ini 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'>Read More &#187;</a> </div> </b:if> </b:if> <!-- Auto read more Akhir -->

5. Silakan Preview dahulu/ Pratinjau untuk memastikan dapat atau ngga nya.
6. Simpan Template.

Demikianlah Tutorial Blogger kali ini, jikalau terjadi kesalahan, Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Auto Read More Otomatis Dengan Mode Zoom Image