Cara Mudah Dapat Uang di Internet Lewat Blog, Twitter, Facebook
» » Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script


Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Untuk Blogger | Hai sobat blogger, seperti pada tutorial seelumnya yang membahas auto readmore dengan javascript namun kali ini kita akan membahas tanpa javascipt.

*Apa sih perbedaan menggunakan javascipt dengan tanpa javascript? Auto readmore dengan javascipt memakan waktu loading yang lebih lama lagi ketimbang tanpa java script. Nah, 1 lagi, katanya javascript membuat duplikat kontent yang akan membuat masalah lebih banyak lagi yang akan diberitahukan di Google Web Master.

Auto Read More With Thumbnail Without Java Script For Blogger

Langkah Membuat Auto Readmore Dengan Gambar Tanpa Java Script :


  1. Buka akun Blogger Anda
  2. Masuk ke menu edit HTML, centang expand template widget
  3. Cari kode dibawah ini :
<data:post.body/>
Catatan : Biasanya kode diatas ada 3 sampai 4 pada template blogger, silahkan Anda tempatkan kode dibawah ini pada kode 2/3/4.

     4.  Ganti kode diatas, dengan kode dibawah ini :
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
    <a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVw1-qpSPkwzfoc6z5Pt3Vm32KGT0A42fdR1ohbV7l5b4oz2ukQ5G6rC2k_gjc_Q9hukcUFKz6S1NT4msaljRyLOaN5on6UEvRSQU1Fky4y651R5i5OzJ_pPUuCRmw9rhotZibnh4KY8Ls/s0/no-image.png'/></a>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link' style='float:right'>
<a expr:href='data:post.url' expr:title='data:post.title'>Readmore &#187;</a>
</div></b:if><b:else/>
<data:post.body/></b:if><b:else/>
<data:post.body/></b:if></b:if>
     5.  Cari kode dibawah ini :
]]></b:skin>
     6.  Pastekan CSS dibawah ini diatas pada kode diatas :
.post-thumbnail {width:72px; height:72px; float:left; margin:0px 10px 0px 0px;}
     7.  Preview dahulu template Anda, dan save.

Catatan : Pada langkah 7 diatas, saat Anda preview pastikan sudah sesuai dengan yang Anda harapkan. Jika belum perhatikan langkah 3 diatas.
Odii Siitohang
Judul: Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script;
Ditulis oleh: Anonymous;
Rating Blog: 5 dari 5





Anda sedang membaca Artikel tentang Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script dengan url http://d-copy.blogspot.com/2013/02/auto-readmore-dengan-gambar-tanpa-script-untuk-blogger.html, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.
D-Copy Reader DMCA
[55] Komentar untuk Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script:
  1. This comment has been removed by the author.

    ReplyDelete
  2. wah,keren sob,jgn lupa mampir dan follback ya sob : http://genkacyber-pkp.blogspot.com

    ReplyDelete
  3. postingan yang bagus bro tapi aku perlu belajar banyak tentang kode kode html supaya saya lebih lancar dalam pengembangan websiteku ini sangat membantu saya terima kasih
    salam kenal dari saya gathot ps

    www.indonesiabeautyful.com

    ReplyDelete
  4. Bang Odii
    itu yg dimaksud [blockquote]..silahkan Anda tempatkan kode dibawah ini pada kode 2/3/4..[/blockquote]
    berarti untuk kode yang ke 1 ngga usah, apa gituh Bang ?

    ReplyDelete
    Replies
    1. Bukan sob, letakkan pada kode 2 atau 3 ataupun 4.
      Biasanya pada kode 2 atau 3. Tergantung pada struktur masing-masing template.

      Delete
  5. awalnya sedikit bermasalah,..tapi akhirnya berhasil,..makasih gan

    ReplyDelete
  6. gan buat nambahin jumlah karekter sebelum di readmore gmn?
    thx

    ReplyDelete
    Replies
    1. modif bagian :
      [blockquote]Readmore »[/blockquote]

      Delete
  7. Makasih infonya. Mau tanya saja biasanya pakai aplikasi apa buat kode HTML atau java script untuk blog misalnya HTML atau java script recent post, related post, atau kotak permalink kayak di blog ini? Jujur saja sampai sekarang aku belum tahu langkah awal dapatnya kode tersebut dari mana? Maksudku bagaimana caranya agar aku bisa bikin kode-kode begitu dengan hasil buatanku sendiri tanpa harus copy-paste kode punya orang. Kan, biasanya kalau copy-paste kode punya orang pasti ada nama blog/nama pembuat kode yang kita copy-paste itu di kode HTML atau java script-nya termasuk di template kita juga ada. Kalau nama blog/nama pembuat kode itu diganti kodenya tidak berfungsi. Apakah saudara sudi memberi tahu cara atau aplikasi pembuat kodenya ?

    ReplyDelete
    Replies
    1. Jujur saja, saya ndak tahu bagaimana cara membuat seperti itu, tapiii...

      Mereka biasanya menggunkan paltform wp.org sedangkan untuk blogger.com itu ndak bisa. Blogger.com sangat terbatas.

      Sobat bisa menanyakan pada Webmaster mana saja, yang sobat maksud itu untuk blogger.com itu tidak bisa dibuat.

      Dan 1 lagi untuk blogger.com, sobat bisa memanfaatkan widget seperti "Artikel Slider untuk blogspot" di https://www.google.com/search?q=Content+Slider+for+blogspot

      Semoga senang dengan cara yang berbeda (karena platform yang berbeda). :D

      Delete
  8. gimana caranya hanya menampilkan gambar saja tanpa text di auto readmore di atas?
    Mohon bantuannya
    scorpiners@gmail.com

    ReplyDelete
  9. nice info gan, jangan lupa mampir kesini ganhehee. di tunggu komennya

    ReplyDelete
  10. gan gambarnya g bisa keluar?caranya biar keluar gmn?

    ReplyDelete
  11. gan tolong liat www.mbahphomet.blogspot.com biar gambar postingan beda2 sesuai isi postingan gmn ya?q edit malah gambarnya sma smua.klo g di edit gambarnya cuma hitam.tolong ya gan terima kasih

    ReplyDelete
    Replies
    1. Pada artikel di blog sobat yang berjudul "Berbagai Tips Menjaga Keharmonisan Dalam Pernikahan Anda" gambarnya dibuat dan di upload langsung dari dalam postingan. Gambarnya jangan copas.

      Delete
    2. Terima kasih matur nuwon bosss.seharian utak atik ternyata g bloeh copas ya.meski dari picasa web kita...sep jempol 10.top markotop.terima kasih

      Delete
  12. Sudah kucoba, dan bisa. Tapi isi rangkuman postingnya kok pendek kali? Cara memperpanjang isi rangkuman posting yg ditampilkan di samping gambar thumbnailnya cemana Lae?

    ReplyDelete
  13. http://ngupasbola.blogspot.com/

    ReplyDelete
  14. mas mau tanya, untuk nyetting jumlah character di auto readmore ini gimana ya?

    ReplyDelete
  15. Gag bisa, karen ini non JS.

    Tapi bisa diperbanyak characternya dengan mengubah

    [code]<data:post.snippet/>[/code]

    menjadi

    [code]<data:post.body/>[/code]

    ReplyDelete
  16. maksud diperbanyaknya itu seperti apa ya mas ?

    ReplyDelete
    Replies
    1. Deskrisnya diperbanyak di homepage

      Delete
    2. diperbanyak gimana ya bang ?
      terus kode diatas kita ganti tujuan nya apa yah ?

      Delete
    3. saya masih kurang paham mas dengan kata2 yang ini "


      menjadi

      "

      Delete
    4. Kan yang sobat tanyakan "bagaimana menyetting jumlah karakter pada deskripsi di homepage" jawabannya yah tidak bisa.

      Tapi jika diperbanyak caranya dengan mengubah cara seperti pada komentar diatas...

      Delete
  17. lae, eh, sob maksudnya..
    untuk mengatur jumlah karakter yg ingin ditampilkan bagaimana ya sob?
    memang sudah ada yg bertanya seperi ini, tapi jawaban sobat terlalu singkat, jadinya saya belum paham..

    ReplyDelete
    Replies
    1. Mengatur jumlah karakter gga bisa.

      Kan pada auto read more dengan JS (java script), scriptnya seperti dibawah ini:
      [blockquote]<script type='text/javascript'>
      summary_noimg = 600;
      summary_img = 400;
      img_thumb_height = 130;
      img_thumb_width = 190;
      </script>[/blockquote]

      Kita hanya tinggal menngubah:
      [blockquote]summary_noimg = 600;
      summary_img = 400;[/blockquote]
      untuk mengatur deskripsi.

      Sedangkan auto readmore tanpa javascript tidak bisa mengatur banyaknnya karakter deskripsi di home page.

      Delete
  18. malam bang,,makasih tutorialnya,,,
    ijin nyoba bang mungkin cocok scriptnya dengan template blog saya...
    kalau ada waktu silahkan berkunjung dan tolong di review bang...
    makasih.
    http://prastypunya.blogspot.com

    ReplyDelete
  19. Bang CAra agar TExtnya di samping gambar , dan tetap auto readmore gmn ?
    Agan punya gambar diatas text dibawah

    ReplyDelete
    Replies
    1. Deskripsinya disebelah kanan dan gambar selebah kiri sob, perhatikan saja dulu tutor nya baik-baik. :)

      Delete
  20. Saya coba dan saya kasih hasilnya ....
    Maksud agan tuh diatas masih di ubah toh , G otomatis dia gambar sebelah kiri dan text sebelah kanan...

    ReplyDelete
  21. Masih saja gan , memang si gambar jadi kecil di samping kiiri , tapi deskripsinya di bawah . DI samping gambar g ada deskripsi , kosong ..

    ReplyDelete
  22. http://mrmichaelsihombing.blogspot.com/ Masih di hapus script di atas lae .
    Kan ada gambar . Dia emang thumbnail jadinya lae. tapi deskripsi di bawah ne lae. Tokin jo olo.

    ReplyDelete
    Replies
    1. Tuh kan, ku inspect elemet jelas uda beda.

      Coba perhatikan langkah 3 diatas lae, lae salah pada bagian itu.

      Delete
  23. tunggu ya lae . gw cari . Maksudnya Inspect element ?
    data:post body tadi tempat nya salah .
    kan d saya ada 3
    Di kedua bisa , tapi ke 3 juga bisa .Tapi gw buat ke dua tanpa liat aapa sebenarnya data:post body khusus tempat ke dua

    kira2 gtu ?

    ReplyDelete
  24. Gw ikutin bener tuh tutor lae.
    Buka html
    cari tuh data post tadi
    dapet ada 3
    coba pertama g ada efek
    kedua baru ada , taro di bawah
    trus 1 dan 3 g diisi
    cari b:skin
    dapet taro di atas.

    ReplyDelete
  25. Pertama buat ini di atas b:skin
    http://s22.postimg.org/w5h13wpsh/image.jpg
    Truss Cari ini , gw buat yg data:.post kedua
    http://s7.postimg.org/b15g3h8uj/image.jpg
    Ganti Kode di atas menjadi ini
    http://s15.postimg.org/9s57glfaj/image.jpg
    Hasil
    http://s22.postimg.org/50huomnpt/image.jpg

    ReplyDelete
    Replies
    1. Kirim aja lah template lae, biar ku edit.

      Delete
  26. tolong di perbaiki yah lae .... makasih lae.
    Add facebook donk lae
    https://www.facebook.com/kaka.kael
    http://www21.zippyshare.com/v/20579150/file.html > File HTML Nya

    Ntar klo ada kesalahan tolong kasihtau di mana ya lae , soalnya semua dah di coba g bisa...
    Mudah mudahan hri ini bisa ya lae... Mkasih sudah membantu

    ReplyDelete
  27. Makasih lae, da jadi tapi yang tampil cuma satu aja itupun ga ada gambarnya. Di mana salahnya www.medis612.blogspot.com oh ya aku pakai yang ke tiga, trims.

    ReplyDelete
    Replies
    1. Font postingannya biasa aja lai. Pakai font normal; arial.

      Delete
  28. terima kasih ya mas, infonya sangat bermanfaat bagi saya,.. dan saya terapkan di blog saya.

    ReplyDelete
  29. Thanks Gan. Informasinya sangat bermanfaat, Khususnya untuk orang yang ingin mencoba bikin template sendiri seperti saya

    ReplyDelete
  30. bang Odii mau tanya lagi ne, biar kata-kata yang keluar disamping gambar agak banyak gimana,2-3 kalimat gitu. terus biar di halaman depan bisa muncul samapi 9 postingan terakhir gmn? bukan cuma 4 postingan, terima kasih buat jawabannya, tolong ya,

    ReplyDelete
  31. gan kok no image available padahal ada gambarnya gimana nih??

    ReplyDelete
  32. maaf gan mau tanya nih, kalo auto readmore seperti itu cara untuk mennetukan jumlah karakternya bagaimana ?

    ReplyDelete
  33. tekniknya bagus, bisa mempercepat loading blog,

    tapi sayang gak bisa menambah jumlah deskripsinya ya.

    ReplyDelete

Beberapa panduan dalam berkomentar :
Untuk menyisipkan kode[code]KODE ANDA[/code]
Untuk menyisipkan quote[blockquote]QUOTE ANDA[/blockquote]
Untuk menyisipkan gambar[img]URL Gambar[/img]
Untuk menyisipkan video[youtube]URL Video[/youtube]
Anda bisa mengekspresikan komentar Anda dengan emoticon
Klik subscribe by email agar Anda segera tahu balasan komentar Anda

 
D-Copy Blog © 2013 - All Rights Reserved Design : Creating Website Published : Mas Template