Baca Juga

Cara Membuat Readmore Dengan Thumbail gambar
Readmore Otomatis
Bismillah.. setelah saya sharing tetang cara membuat button sexy social bookmark sekarang kita beranjak akan membahas tutorial cara membuat readmore otomatis dengan Thumabil gambar. cara membuat readmore di blogspot sebenarnya sangat mudah, sobat tidak perlu pakai JavaScript atau CSS lain,  sobat tinggal gunakan saja pasilitas yang ada dalam postingan blogspot, sobat  tinggal menggunakan tool insert jum break lihat gambar di bawah.

jump break blogspot
Jump Break Blogspot
Oke jika sobat males tiap posting harus klik jump break, itu ada cara lain yaitu dengan memakai java script, oke langsung saja jika sobat ingin memakai readmore otomatis caranya silahkan ikuti tutorial blog kali ini, langkah pertama sobat login ke blogger, langsung sobat menuju ke Edit HTML dalam Tab Design, setelah itu sobat cari kode seperti ini </head> , setelah ketemu sobat masukan CSS dan JavaScript di bawah ini di atas kode </head> .

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://bloggertutorial.googlecode.com/files/readmore%20thumbail.js' type='text/javascript'/>
<style>
.button {
        float:right;
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small {
    font-size: 11px;
    padding: .2em 1em .275em;
}
.orange2 {
    color: #fef4e9;
    border: 2px solid white !important;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#faa51a&#39;, endColorstr=&#39;#f47a20&#39;);
}
.orange2:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f88e11&#39;, endColorstr=&#39;#f06015&#39;);
}
.orange2:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f47a20&#39;, endColorstr=&#39;#faa51a&#39;);
}
</style> 
Setelah itu sobat simpan/save template blog nya, tidak juga tidak apa apa, langkah selanjutnya sobat cari tag/kode yang mirip atau sama dengan ini tag <data:post.body/> setelah ketemu sobat ganti tag tersebut dengan kode di bawah. 
<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>
<a class='button orange2' expr:href='data:post.url'>Read More</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 
Setelah proses instalasi selesai sobat klik Save dan lihat hasilnya. oke sobat sekian dulu tutorial blog Cara Membuat Readmore Dengan Thumbail Gambar, semoga bermanfaat. Good Luck, Happy Blogging.
Axact

Z-PLATE

Terima Kasih Telah Berkunjung dan Berkanan Membaca artikel dari Blog Kami, Silahkan Masukan Komentar Untuk menambah Motivasi Kami.

Post A Comment:

7 comments:

  1. sory baru mampir sob cz banyak kegiatan off dan kebetulan ada masalah konesi dari kemaren2

    BalasHapus
  2. hhmm aku masih pake readmore yg lama nih sob,, gak ada thumbnailnya,, hehehhe,, thx atas infonya,,

    BalasHapus
  3. owww gitu. makasi ya. berguna nih. tapi lebih asik kalo blog gw ngak pake readmore. jadi bisa langsung kebaca

    BalasHapus
  4. Wah, sepertinya saya harus banyak belajar dr blog anda nih.. #maklumnewbie
    salam kenal + ijin follow

    BalasHapus
  5. wahh postingan aku ngga pake readmore......soale jarang psoting panjang2 sech....tp infonya bermanfaat banget nechh.....mksh ilmunya

    BalasHapus