Memperbesar dan Memperkecil Thumbnail Auto Read More Tanpa Javascript

<a name="866357370720860856"></A>Cara Memperbesar dan Memperkecil Thumbnail Auto Read More blogger blogspot Tanpa Javascript - Postingan ini sekaligus menjabarkan bagaimana cara membuat auto read more blogspot tanpa javascript dan merubah ukuran thumbnail read more otomatis (auto read more). Lihat screenshot read more otomatis tanpa javascript dibawah ini atau lihat demonya di <a href="http://www.zaenudin.com/" target="_blank">SEO Friendly Blogger Template</A> atau download template <a href="http://www.zaenudin.com/2012/08/thesisseoforblogspot.html" target="_blank">thesis seo blogspot</A> yang saya buat komplit dengan auto read more tanpa javascript.<BR><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOyCA2Lk5Cjy9JwjhJ8XTEDhpiuDJWOyGHjJpJ8DHp72DAeMBdkd8A7VRosYvGu085a4ihU7M-yQ0kxPRSqQN1SADHttFbmUxVyeOjVCvyKKqy5IarDozUxvdCdArcqwfhvh1BmXPyLs/s1600/thumbnail_auto_read_more.jpg" imageanchor="1"><img alt="Memperbesar dan Memperkecil Thumbnail Auto Read More Tanpa Javascript" border="0" height="186" src="/thumbnailautoreadmore.jpg" title="Memperbesar dan Memperkecil Thumbnail Auto Read More Tanpa Javascript" width="320"></A><BR>Baiklah langsung saja ke Cara Memperbesar dan Memperkecil Thumbnail Auto Read More blogger blogspot Tanpa Javascript. Langkah pertamanya adalah dengan cara membuat read more otomatis (auto read more) tanpa javascript terlebih dahulu: <P>A. Membuat auto read more pada template blogspot pertama kali.</P><P>Jika blog anda belum pernah di pasang fitur read more, maka untuk cara membuat auto read more/read more otomatis tersebut dilakukan dengan cara berikut:</P>Pertama login ke account blogger anda, kemudian plih menu "Template", dan pilih Edit HTML, klik proceed/lanjutkan,Centang expand template widget, kemudian cari kode dibawah ini: <BLOCKQUOTE class=tr_bq><data:post.body/></BLOCKQUOTE>Selanjutnya hapus kode tersebut dan ganti dengan kode html berikut:  <BLOCKQUOTE class=tr_bq><b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='thumb img'> <img alt="" expr:src="data:post.thumbnailUrl"/> </div> </b:if> <data:post.snippet/><b:if cond='data:post.jumpLink != data:post.hasJumpLink'> <div class='jump-link'><b>More about</b> → <a expr:href="data:post.url" expr:title="data:post.title"><data:post.title/></a> </div> </b:if> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if></b:if> </BLOCKQUOTE>Save Template, selesai dan lihat hasilnya dengan cara buka halaman homepage blog anda.<BR>B.  Membuat auto read more (read more otomatis) untuk blog yang sudah ada read more nya tetapi menggunakan javascript. <P>Jika sebelumnya template blog anda sudah dibuatkan auto read more dengan menggunakan javascript, maka untuk mengganti fungsi read more tersebut dengan auto read more tanpa javascript adalah dengan cara berikut:<BR>Setelah anda login dan membuka template seperti pada cara diatas (point A), maka anda harus mencari kode html dan javascript auto read more yang ada di template blogspot anda, caranya: cari kode html/javascript berikut:  <BLOCKQUOTE class=tr_bq><script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 220; img_thumb_height = 120; img_thumb_width = 220; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; //]]> </script></BLOCKQUOTE>Letaknya biasanya ada diatas kode </head>Selanjutnya cari kode ini: <BLOCKQUOTE class=tr_bq><b:if cond='data:blog.pageType != "item"'><BR><div expr:id='"summary" + data:post.id'><data:post.body/></div><BR><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><BR><span class='rmlink' style='float:left'><b>More about</b> → <a expr:href="data:post.url"><data:post.title/></a></span><BR></b:if><BR><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></BLOCKQUOTE>Kemudian ganti dengan kode html auto read more otomatis seperti yang dijelaskan pada point A. <BR>C. Resizing and Floating Image and Read More button/text link with CSS <P>Langkah selanjutnya setelah tahap-tahap di A dan B, sekarang adalah cara merubah ukuran atau memperbesar dan memperkecil thumbnail auto read more otomatis di blog blogspot anda, caranya tambahkan kode CSS berikut kedalam template, letaknya diatas kode: ]]><BR><BLOCKQUOTE class=tr_bq>.thumb img {width:220px;height:120px; float : left; margin : 0 10px 10px 0;} .jump-link { margin : 1px; padding-top : 30px; font-style : italic; float : left;}</BLOCKQUOTE><B>Keterangan: </B><BR>Fungsi alt pada kode <img alt="" expr:src="data:post.thumbnailUrl"/> adalah untuk menghilangkan error validasi di W3 site.Kode width:220px;height:120px; pada kode CSS .thumb img adalah untuk merubah/memperbesar/memperkecil ukuran thumbnail auto read more tanpa javascript, width=lebar, dan height=tinggi.Kode float:left pada css .thumb img untuk meletakan posisi thumbnail berada disebelah kire post summary, dan kode float:left yang ada di css code .jump-link berfungsi untuk meletakkan anchor link read more kesebelah kiri, ganti left dengan right jika anda ingin meletakkanya di sebelah kanan.Langkah terakhir adalah Save template dan selamat sekarang read more otomatis/auto read more tanpa javascript di blogspot anda sudah jadi.<BR>Demikianlah <a href="http://www.zaenudin.com/">tutorial blogspot</A> mengenai cara memperbesar dan memperkecil thumbnail auto read more di blogspot tanpa javascript atau cara membuat auto read more tanpa javascript, artikel ini bisa juga ditemukan dengan kata kunci cara membuat read more otomatis tanpa javascript. Selamat mencoba, salam blogger Indonesia. <br /><p><a href="http://www.zaenudin.com/2012/09/memperbesar-dan-memperkecil-thumbnail.html" rel="nofollow" target="_blank">View the original article here</a></p>

Memperbesar dan Memperkecil Thumbnail Auto Read More Tanpa Javascript

Cara Memperbesar dan Memperkecil Thumbnail Auto Read More blogger blogspot Tanpa Javascript - Postingan ini sekaligus menjabarkan bagaimana...

Baca selengkapnya »

Memperbesar dan Memperkecil Thumbnail Auto Read More Tanpa Javascript

Post by Zaenudin Saja on Minggu, 09 September 2012 Cara Memperbesar dan Memperkecil Thumbnail Auto Read More blogger blogspot Tanpa Javascript - Postingan ini sekaligus menjabarkan bagaimana cara membuat auto read more blogspot tanpa javascript dan merubah ukuran thumbnail read more otomatis (auto read more). Lihat screenshot read more otomatis tanpa javascript dibawah ini atau lihat demonya di SEO Friendly Blogger Template atau download template thesis seo blogspot yang saya buat komplit dengan auto read more tanpa javascript.<BR><img alt="Memperbesar dan Memperkecil Thumbnail Auto Read More Tanpa Javascript" border="0" height="186" src="/thumbnailautoreadmore.jpg" title="Memperbesar dan Memperkecil Thumbnail Auto Read More Tanpa Javascript" width="320"><BR>Baiklah langsung saja ke Cara Memperbesar dan Memperkecil Thumbnail Auto Read More blogger blogspot Tanpa Javascript. Langkah pertamanya adalah dengan cara membuat read more otomatis (auto read more) tanpa javascript terlebih dahulu: <P>A. Membuat auto read more pada template blogspot pertama kali.</P><P>Jika blog anda belum pernah di pasang fitur read more, maka untuk cara membuat auto read more/read more otomatis tersebut dilakukan dengan cara berikut:</P>Pertama login ke account blogger anda, kemudian plih menu "Template", dan pilih Edit HTML, klik proceed/lanjutkan,Centang expand template widget, kemudian cari kode dibawah ini: <BLOCKQUOTE class=tr_bq><data:post.body/></BLOCKQUOTE>Selanjutnya hapus kode tersebut dan ganti dengan kode html berikut:  <BLOCKQUOTE class=tr_bq><b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='thumb img'> <img alt="" expr:src="data:post.thumbnailUrl"/> </div> </b:if> <data:post.snippet/><b:if cond='data:post.jumpLink != data:post.hasJumpLink'> <div class='jump-link'><b>More about</b> → <a expr:href="data:post.url" expr:title="data:post.title"><data:post.title/></a> </div> </b:if> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if></b:if> </BLOCKQUOTE>Save Template, selesai dan lihat hasilnya dengan cara buka halaman homepage blog anda.<BR>B.  Membuat auto read more (read more otomatis) untuk blog yang sudah ada read more nya tetapi menggunakan javascript. <P>Jika sebelumnya template blog anda sudah dibuatkan auto read more dengan menggunakan javascript, maka untuk mengganti fungsi read more tersebut dengan auto read more tanpa javascript adalah dengan cara berikut:<BR>Setelah anda login dan membuka template seperti pada cara diatas (point A), maka anda harus mencari kode html dan javascript auto read more yang ada di template blogspot anda, caranya: cari kode html/javascript berikut:  <BLOCKQUOTE class=tr_bq><script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 220; img_thumb_height = 120; img_thumb_width = 220; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; //]]> </script></BLOCKQUOTE>Letaknya biasanya ada diatas kode </head>Selanjutnya cari kode ini: <BLOCKQUOTE class=tr_bq><b:if cond='data:blog.pageType != "item"'><BR><div expr:id='"summary" + data:post.id'><data:post.body/></div><BR><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><BR><span class='rmlink' style='float:left'><b>More about</b> → <a expr:href="data:post.url"><data:post.title/></a></span><BR></b:if><BR><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></BLOCKQUOTE>Kemudian ganti dengan kode html auto read more otomatis seperti yang dijelaskan pada point A. <BR>C. Resizing and Floating Image and Read More button/text link with CSS <P>Langkah selanjutnya setelah tahap-tahap di A dan B, sekarang adalah cara merubah ukuran atau memperbesar dan memperkecil thumbnail auto read more otomatis di blog blogspot anda, caranya tambahkan kode CSS berikut kedalam template, letaknya diatas kode: ]]><BR><BLOCKQUOTE class=tr_bq>.thumb img {width:220px;height:120px; float : left; margin : 0 10px 10px 0;} .jump-link { margin : 1px; padding-top : 30px; font-style : italic; float : left;}</BLOCKQUOTE><B>Keterangan: </B><BR>Fungsi alt pada kode <img alt="" expr:src="data:post.thumbnailUrl"/> adalah untuk menghilangkan error validasi di W3 site.Kode width:220px;height:120px; pada kode CSS .thumb img adalah untuk merubah/memperbesar/memperkecil ukuran thumbnail auto read more tanpa javascript, width=lebar, dan height=tinggi.Kode float:left pada css .thumb img untuk meletakan posisi thumbnail berada disebelah kire post summary, dan kode float:left yang ada di css code .jump-link berfungsi untuk meletakkan anchor link read more kesebelah kiri, ganti left dengan right jika anda ingin meletakkanya di sebelah kanan.Langkah terakhir adalah Save template dan selamat sekarang read more otomatis/auto read more tanpa javascript di blogspot anda sudah jadi.<BR>Demikianlah tutorial blogspot mengenai cara memperbesar dan memperkecil thumbnail auto read more di blogspot tanpa javascript atau cara membuat auto read more tanpa javascript, artikel ini bisa juga ditemukan dengan kata kunci cara membuat read more otomatis tanpa javascript. Selamat mencoba, salam blogger Indonesia. <br /><p><a href="http://www.zaenudin.com/2012/09/memperbesar-dan-memperkecil-thumbnail.html" rel="nofollow" target="_blank">View the original article here</a></p>

Memperbesar dan Memperkecil Thumbnail Auto Read More Tanpa Javascript

Post by Zaenudin Saja on Minggu, 09 September 2012 Cara Memperbesar dan Memperkecil Thumbnail Auto Read More blogger blogspot Tanpa Javascr...

Baca selengkapnya »