Cara Membuat Auto Read More Otomatis Dengan Mode Zoom Image

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd2miK1693YGvTyUGFBpsMUQDc98claJ_yqXU1kRA_89zs_-muvppxme185CvT7o6KDGqm12WBzJCtNpm91qlZGJnqSqn55U8srR4yRm4UABwomBqvbQ8hxJxHhQab4FVNnYBXUuejgls/s1600/auto-readmore-maycyber-download.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd2miK1693YGvTyUGFBpsMUQDc98claJ_yqXU1kRA_89zs_-muvppxme185CvT7o6KDGqm12WBzJCtNpm91qlZGJnqSqn55U8srR4yRm4UABwomBqvbQ8hxJxHhQab4FVNnYBXUuejgls/s1600/auto-readmore-maycyber-download.jpg" /></a></div><br />Auto Readmore adalah Menyematkan Postingan Menjadi Kecil. Tujuannya adalah agar tidak memakan tempat pada Home page blog. Memasang Fitur ini anda tidak perlu lagi membuat garis Readmore <!--More---> Pada Entri baru Atau mengklik tanda Insert Jump Break. Fitur Auto Readmore akan mengurangi secara otomatis postingan yang muncul dihalaman utama maka akan terpotong oleh Read More<br /><br /><b>Baca Juga :</b><br /><ul style="text-align: left;"><li><a href="https://maycyber-download.blogspot.co.id/2016/09/cara-membuat-auto-read-more-thumbnail.html">Cara Membuat Auto ReadMore Tanpa JQuery atau Java Script.</a></li></ul></div><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Auto Read More Otomatis Dengan Mode Zoom Image</span></b></div><br /><b>Cara Pertama :</b><br /><br />1. Buka <a href="http://blogger.com/">Blogger </a>- Kemudian login.<br />2. Dashboard - Template<br />3. Edit HTML.<br />4. Silakan Backup Terlebih dahulu Template anda, Misalnya Sellect All Script Template ke Notepad.<br /><br /><b>Proses Pembuatan :</b><br /><br />1. Temukan kode <b><span style="color: red;"></head></span> </b><br />2. Copy&paste kode berikut ini, dan letakkan diatas kode <b><span style="color: red;"></head></span></b><br /><pre data-codetype="CSS" title="CSS, HTML, Java Script"><code class="language-css"><!--Auto Read More Mulai--><br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><style><br /> .post-body{text-align:justify;}<br /> .post-body img{max-width:none;width:auto;}<br /> .read-more{float:left; padding-top: 10px;}<br /> .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;}<br /> .read-more a:hover{text-decoration:none;background:#666;}<br /> .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;}<br /> .grow img{height:165px;width:280px;transition: all 2s ease;}<br /> .grow img:hover{width:400px;height:250px;}<br /></style><br /><script type='text/javascript'><br /> var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar<br /> summary_noimg = 300; //banyaknya huruf jika tidak ada gambar<br /> summary_img = 250; //banyaknya huruf jika ada gambar<br /> img_thumb_height = 165;<br /> img_thumb_width = 280;<br /> </script><br /><script type='text/javascript'>//<![CDATA[<br /> 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;}<br /> //]]></script><br /></b:if><br /></b:if><br /><!--Auto Read More Akhir--></code></pre>3. Proses kedua, Temukan(CTRL+F) kode <b><span style="color: red;"><data:post.body/></span></b> . Biasanya kode ini, lebih dari satu. Jadi pilih saja yang kedua & ketiga. Biasanya sih yang kedua. Atau anda bisa coba satupersatu1/1<br />4. Copy&paste  kode berikut ini dan ganti dengan kode dibawah ini :<br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><!-- Auto read more Mulai --><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><data:post.body/><br /><b:else/><br /><b:if cond='data:blog.pageType == &quot;static_page&quot;'><br /><data:post.body/><br /><b:else/><br /><div expr:id='&quot;summary&quot; + data:post.id'><br /> <data:post.body/><br /></div><br /><script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><br /><div class='read-more'><br /> <a expr:href='data:post.url'>Read More &#187;</a><br /></div><br /></b:if><br /></b:if><br /><!-- Auto read more Akhir --></code></pre>5. Silakan Preview dahulu/ Pratinjau untuk memastikan bisa atau ngga nya.<br />6. Simpan Template.<br /><br />Demikianlah Tutorial Blogger kali ini, jika terjadi kesalahan, Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda. Sekian dari saya, <b>Semoga Bermanfaat!</b> Thanks for Reading & Sharing : <b>Cara Membuat Auto Read More Otomatis Dengan Mode Zoom Image</b></div></div></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Auto Read More Thumbnail Ringan dan Anti JQuery

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscDm5t3qf7S6_XJKJPTIvohMHXAdPUr-e9hZe6lL9YRVGivR5KHJYdNi9QxMvUPkkexvdF9Hk1CNQxEakUJul_Fgt7l2eclGH6R-KIWpMUlplFCq4VsMNHcZeLlDou58RIKe9vy1be3Y/s1600/auto-readmore-by-maycyber-download.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscDm5t3qf7S6_XJKJPTIvohMHXAdPUr-e9hZe6lL9YRVGivR5KHJYdNi9QxMvUPkkexvdF9Hk1CNQxEakUJul_Fgt7l2eclGH6R-KIWpMUlplFCq4VsMNHcZeLlDou58RIKe9vy1be3Y/s640/auto-readmore-by-maycyber-download.jpg" width="640" /></a></div><br />Read More adalah Menyematkan Artikel Menjadi kecil. Tujuannya adalah agar postingan tidak memakan tempat. Read More biasa disebut " Baca Selengkapnya " Ini sangat penting diterapkan di blog anda. Kali ini yang akan diposting Cara Membuat Auto Readmore Tanpa Menggunakan Jquery atau Java Script. Seperti yang kamu ketahui bahwa Java Script dapat menyebabkan loading blog menjadi lama. Anda bisa melihat Contohnya gambar diatas, Jika kalian suka? Yaudah langsung saja kita praktekan.. <br /><br />Cara Pertama :<br /><br />1. Buka <a href="http://blogger.com/">Blogger</a> - Kemudian Login.<br />2. Dashboard - Template<br />3. Edit HTML.<br />4. Cari (CTRL+F) Kode <b>]]></b:skin></b><br />5. Copy & Paste kode berikut ini, dan Letakkan diatas kode <b>]]></b:skin></b><br /><br /><div style="background-color: #ece9e9; border: 2px #006400 solid; height: 110px; overflow: auto; padding: 10px; text-align: left; width: 580px;">.thumbnail-post {<br />width:100px; <br />height:100px; <br />float:left; <br />margin:0px 10px 0px 0px;<br />}</div></div><br />6. Cari (CTRL+F) kode <b><data:post.body/></b> . Biasanya kode ini lebih dari satu, pilih yang kedua.<br />7. Copy & Paste kode berikut ini, dan ganti dengan kode dibawah ini :<br /><br /><div style="background-color: #ece9e9; border: 2px #006400 solid; height: 490px; overflow: auto; padding: 10px; text-align: left; width: 580px;"><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br />  <b:if cond='data:blog.pageType != &quot;item&quot;'><br />    <b:if cond='data:post.firstImageUrl'><br />      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a><br />    <b:else/><br />      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a><br />    </b:if><br />    <div class='post-snippet'><br />      <data:post.snippet/><br />    </div><br />    <div class='rm-button-wrap'><br />      <a class='button' expr:href='data:post.url'><b><span style="color: red;">Baca Selengkapnya</span></b></a><br />    </div><br />  </b:if><br /></b:if><br /><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br />  <data:post.body/><br /></b:if><br /><b:if cond='data:blog.pageType == &quot;static_page&quot;'><br />  <data:post.body/><br /></b:if></div></div><br />Note : Baca Selengkapnya bisa diubah misalkan Read More.<br /><br />8. Simpan Template.<br /><br />Bagaimana? Mudah bukan, jika terjadi kesalahan Silakan Berkomenar dibawah ini. Sekian dari saya, Terima kasih telah berkunjung. <b>Semoga Bermanfaat!</b></div>

Diposting oleh Mr Xiulung