Nurhamka Blog Belajar Ngeblog dari sekarang bersama Kami

Cara Membuat Auto Read More di Blog dengan Mudah

Cara Membuat Auto Read More Di Blog Dengan Mudah – Auto Read More dalam sebuah Blog berguna untuk Mempercepat Loading Blog anda, ketika audience mengunjungi halaman utama Blog anda, selain itu dengan adanya Auto Read more dalam sebuah Blog maka blog kita akan terlihat keren dan menarik.

Nah bagi anda yang mau membuat Auto read More dalam Blog nya, Silahkan baca tutorial nya di bawah ini.

 

Auto Read More Versi 1

1.Silahkan anda masuk dulu ke halaman utama Blog anda

2. kemudian Klik Menu Template/tema

3. kemudian Klik edit Html

4. pada editor Template nya silahkan silahkan tempelkan kode di bawah ini tepat di atas kode ]]></b:skin>

.thumbnail-post {width:100px;height:100px;float:left;margin:0px 10px 0px 0px;}

5. kemudian Silahkan anda cari kode <data:post.body/> yang ke 2 atau yang ke 3 karena kalau tidak salah kode tersebut ada lebih dari 1.

6. jika kode <data:post.body/> sudah ketemu, silahkan anda ganti dengan kode di bawah ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <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> </b:if> <div class='post-snippet'> <data:post.snippet/> </div> <div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Baca Selengkapnya</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>

7. kemudian silahkan Simpan Template nya, kemudian lihat hasil nya.

 

Auto Read More Versi 2

1.Seperti biasa masuk dulu ke editor Template di Blogger

2. kemudian anda klik pada keyword anda tombol ctr+f secara bersamaan

3. kemudian akan muncul kotak pencarian

4. pada kotak pencarian tersebut silahkan anda cari kode <b:includable id=’post’ var=’post’>

5. jika kode nya sudah ketemu silahkan anda ganti kode <b:includable id=’post’ var=’post’> dengan kode di bawah ini

<b:includable id='post' var='post'><article expr:class='&quot;blogger-post blogger-post-&quot; + data:blog.pageType' expr:id='&quot;post-&quot; + data:post.id'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div class='blogger-post-part blogger-post-thumbnail-area'><b:if cond='data:post.thumbnailUrl'><a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a></b:if></div></b:if></b:if><div class='blogger-post-part blogger-post-body-area'><h3 class='blogger-post-title'><b:if cond='data:post.title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if><b:else/>[Untitled]</b:if></h3><div class='blogger-post-body'><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/><b:if cond='data:post.snippet'><data:post.snippet/><b:else/>No content.</b:if></b:if></b:if></div><footer class='blogger-post-footer'><div class='blogger-post-footer-line blogger-post-footer-line-1'><span class='blogger-post-author vcard'><b:if cond='data:top.showAuthor'><data:top.authorLabel/> <span class='fn'><b:if cond='data:post.authorProfileUrl'><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a><b:else/><span class='g-profile'><data:post.author/></span></b:if></span></b:if></span> <span class='blogger-post-timestamp'><b:if cond='data:top.showTimestamp'><data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a></b:if></span> <span class='blogger-post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:post.allowComments'><a expr:href='data:post.url + &quot;#comments&quot;'><data:post.commentLabelFull/></a></b:if></b:if></b:if></span></div><div class='blogger-post-footer-line blogger-post-footer-line-2'><span class='blogger-post-labels'><b:if cond='data:post.labels'><data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if><b:include data='post' name='postQuickEdit'/></span></div></footer></div></article></b:includable>

6 kemudian Tempelkan kode di bawah ini tepat di atas kode ]]></b:skin>

.blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;}.blogger-post:after { content:" "; display:block; clear:both;}.blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;}.blogger-post-title a{color: #888;}.blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('http://4.bp.blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;}.blogger-post-footer {margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999;}.blogger-post-footer a {color: #888;}.blogger-post-item,.blogger-post-static_page {height:auto}.blogger-post-item .blogger-post-body-area,.blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;}.blogger-post-item .blogger-post-title,.blogger-post-static_page .blogger-post-title {font-size:30px}.icon-action {width: 10px;height:10px;}

7. kemudian tempelkan kode di bawah ini tepat di atas kode </body>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'><script type='text/javascript'>function changeThumbSize(id,size){var blogGadget = document.getElementById(id);var replacement = blogGadget.innerHTML;blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);for(var i=0;i&lt;thumbnails.length;i++){thumbnails[i].width = size;thumbnails[i].height = size;}}changeThumbSize(&quot;Blog1&quot;,210);</script></b:if></b:if>

8. jika sudah selesai silahkan simpan Template nya, kemudian Lihat Hasil nya.

 

CATATAN

Jika sebelumnya anda sudah menggunakan Script auto read more, saran saya hapus dulu kode yang sebelumnya sudah di pakai, supaya, script yang saya berikan ini berfungsi dengan baik.

Selamat mencoba.


2 Comments

Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *