Update: Lihat Cara Membuat Auto Readmore (Thumbnails) Blogspot V2 (Penyempurnaan) yang merupakan penyempurnaan dari script auto readmore ini, pengecualian tampilan auto readmore pada halaman statis (static pages) telah ditambahkan.Pertama-tama, bapak ibu sekalian, auto readmore memudahkan kita dalam membuat posting. Memasang fitur ini membuat kita tidak perlu membubuhkan kode atau mengklik tanda setiap kali melakukan posting.Fitur auto readmore akan mengurangi pekerjaan ini karena secara otomatis semua posting yang muncul di halaman-halaman utama (misalnya home, search query results, tag results, dll) akan terpotong dengan readmore.Berikut langkah-langkahnya:1. Masuk ke editor template HTML. Download template terlebih dahulu untuk amannya.2. centang expand widgets template.3. Masukkan script berikut TEPAT SEBELUM tag (gunakan Ctrl+F untuk mencari)var thumbnail_mode = "float" ;summary_noimg = 230;summary_img = 140;img_thumb_height = 100;img_thumb_width = 100;keterangan:-summary_noimg = 230; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.-summary_img = 140; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.-img_thumb_height = 100; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.-img_thumb_width = 100; adalah lebar gambar thumbnail, anda dapat mengubah nilainya. Tapi untuk amannya tinggalkan begitu saja.4. Lanjutkan dengan mencari (seperti biasa, gunakan senjata Ctrl+F) 5. Lalu GANTI dengan script berikut:createSummaryAndThumb("summary");Read more >>keterangan:-padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.-float:right, ganti right dengan left jika ingin readmore muncul di sebelah kiri.-Anda bisa mengganti Read more dengan kata-kata lain misalnya "baca selanjutnya", "Read the rest of this entry", "Lanjut gan...", "Monggo dilanjut!", atau apa sajalah...Tapi untuk amannya tinggalkan begitu saja. 6. Untuk memastikan hasilnya, jangan di-save dulu. Gunakan preview untuk mengeceknya.7. Setelah beres, silakan di-save.8. Finished, you've now got auto readmore for blogger.mencuri adalah pekerjaan pengecut! buka-rahasia.blogspot.comTweet
saya coba terapkan auto read more ini di blog saya. code html nya sudah saya pasang tetapi tetap saja tidak terjadi read more otomatis seperti yang diharapkan dan setelah saya utak atik saya tetap tidak dapat memperbaikinya,,, nah saya mau minta tolong sama mas Ahmad Khoirul Azmi untuk mencoba memperbaiki auto read more di blog saya tersebut tolong sms saya di nomor 085878738769 nanti akan saya kirim ID login ke blog saya sekalian password nya, atau saya kirim script template blog saya via e-mail.. maaf kalo merepotkan dan terimakasih banyak
Cara terbaru membuat auto read more di blogspot
tutor yang sangat berguna bagi saya yang msh newbie..saya banyk mendaptkn info dari blog agan..saya ada pertanyaan sedikit gan..stlh pasang totur agan diatas ternyata halaman statisnya jg ikut berisi readmore, pertanyaan saya bagaimana cara menghilangkannya?terima kasih sebelumnya gan..
thx infonya.. sy punya masalah nih.. susah ngejelasinnyacoba mampir: whatskpop.blogspot.com/Templatenya pake auto read more (bagus sih) CUMA, pos sebelum di klik read more itu keliatan seperti berantakan dan nyambung ky gitu... kl cuma memperbaiki aja bisa gak ya? (Read more tetep, cuma postingannya sebelum klik read more, beraturan/sesuai dengan yang kita buat)Hmmm... kl tau, kasitau sy ya... thx you
Auto readmore dengan javascript secara otomatis membaca dan menuliskan semua tulisan yang dipersingkat secara plain. Apabila anda menuliskan lirik lagu dimana perbarisnya hanya diberi jarak spasi dengan enter, otomatis baris ke satu dan kedua sebenarnya tidak ada jarak, sehingga ketika diringkas, baris ke satu dan kedua nyambung alias tidak ada jarak. Solusinya adalah memberi spasi sebelum anda tekan enter untuk menuliskan baris berikutnya, sehingga tulisan per baris tidak nyambung, tapi ada jarak.Itu sama sekali tidak ada hubungannya dengan desain, tapi format tulisan anda penyebabnya, karena dalam bentuk bait-bait lirik dan tidak dalam format paragraf biasa.
@Henry: Hai. Jenis tulisan apa yang anda post? Karena readmore ini hanya akan me-retrieve tulisan normal. Silahkan detilkan problemnya lewat contact form di link bawah.Itu problem bug Blogger yang sampai sekarang masih dihadapi banyak Blogger, termasuk saya. Ada banyak faktor, di antaranya faktor setting tanggal (sebaiknya diset automatic), faktor caching browser, setting permalink, label, deskripsi, dll yang belum disave, beberapa kode yang dimasukkan ke dalam mode HTML posting dan kemudian tidak dapat diparse oleh post editor, dan masih banyak lagi. Sebenarnya artikel sudah saved, tapi editor tidak mau menganggapnya sudah saved. Cek beberapa hal tersebut. Lalu coba keluar lagi dari post editor (close), jika tidak yakin isi post tersimpan, copy dulu ke notepad. Kemudian kembali lagi buka post editor dan coba save.
Penggunaan Jump break sangat penting meskipun kita sudah menggunakan fitur Auto read more. Hal ini karena fitur auto read more biasanya berupa Javascript jadi sistem Blogger tetap mendeteksi ukuran request halaman blog berdasarkan jumlah artikel yang dimuat. Hal ini berakibat pada penurunan kecepatan loading blog khususnya saat request ke server.
Template Bawaan Blogger Bisa Dijadikan Responsive (Mobile-Friendly) dan Lebih SEO Friendly.TEMPLATE default blogger, kita pilih saja template Simple, bisa dijadikan responsive mobile-friendly dan lebih seo friendly.Kita tinggal memodifikasinya dengan menambahkan kode-kode tertentu dan menambah elemen (widget) yang membuat template blog lebih ramah mesin pencari.Saat membuat blog, pilih tema / template Simple seperti gambar ilustrasi di atas, lalu lakukan langkah di bawah ini.Dengan menjadikannya responsive, maka blog Anda akan lebih ramah mesin telusur, juga bebas credit link karena Anda sendiri yang memodifikasinya.Cara Membuat Template Blogger Jadi ResponsiveBerikut ini Cara Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly. 1. Klik Tema / Template > Edit HTML2. Hapus Kode NavbarCari kode berikut ini dan hapus:3. Cari dan Ganti kode:.post-body img, .post-body .tr-caption-container padding: $(image.border.large.size);dengan kode:.post-body img, .post-body .tr-caption-container padding: 0;width:auto;max-width:100%;height:auto;4. Cari dan Ganti kode:dengan:5. Simpan kode berikut ini di atas kode @media screen and (max-width:1024px)body,.content-outer, .content-fauxcolumn-outer, .region-inner width: 100%!important;min-width:100%!important;padding:0!importantbody .navbar height: 0!important;.footer-inner padding: 30px 0px!important;@media screen and (max-width:800px).sidebar .widget,.sidebar .widget img width:100%#menu width: 95%;.main-inner .columns padding-left: 0px;padding-right: 240px;.main-inner .fauxcolumn-right-outer width: 230px;.main-inner .column-center-inner padding: 0;.main-inner .column-right-outer width: 250px;margin-right: -250px;@media screen and (max-width: 603px).main-inner .columns padding-right: 0!important;.main-inner .column-right-outer width: 100%!important;margin-right: 0!important;.content position: relative;word-wrap: break-word;width: 97%;margin: 0 5px;body background:#fff@media screen and (max-width:400px).main-inner .column-center-inner padding: 0 15px 0 0;.sidebar margin:10px 0 5pxKode Alternative (Recommended)@media only screen and (max-width:568px).postheight:auto;width:100%!important;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important.main-inner .column-right-outerwidth:100%!important;padding-bottom:50px!important;padding-top:50px@media only screen and (max-width:800px).main-inner .column-center-inner padding: 0px;.main-inner .columnspadding-left:0;padding-right:310px;width:100%!important;position:relative;right:0!important.main-inner .column-right-outerwidth:310px!important;margin-right:0!important;position:relative;right:10px!important.main-inner .column-right-outerpadding-top:50px!important;padding-bottom 50px!important@media only screen and (max-width:1010px) body .navbar height: 0px !important;bodymin-width:0!important;width:100%!important;padding:0!important.contentwidth:100%!important;min-width:0!important;overflow:hidden!important.header-outerwidth:100%.fauxborder-leftwidth:100%!importanthtml body .region-innermin-width:0!important;max-width:100%!important;width:100%!important;padding-left:0.header-inner .sectionmargin:0;width:100%!important.footer-outerwidth:100%!important.content-outer,.content-fauxcolumn-outer,.region-innermin-width:0!important;max-width:100%!important#sidebar-right-1width:100%!important.main-inner .column-right-outerwidth:45%!important;margin-right:-310px;position:relative;right:10px!important.main-inner .columnspadding-left:0;padding-right:310px;width:70%!important;position:relative;right:20px!important#sidebar-right-1 a imgmax-width:100%!important.post-body img, .post-body .tr-caption-container max-width: 100%;height: auto;6. Save. Simpan Template!Kini template blogger Anda sudah responsive. Lakukan langkah berikutnya dengan klik menu Tema (Themes) dan setting template mobile sebagaimana gambar berikut:Jika pilih "Yes", maka yang tampil di HP nanti masih template bawaan blogger. Makanya, pilih "No". Setting ini pula yang harus Anda lakukan jika menggunakan template blog yang sudah responsive lainnya.Sekarang, tes blog Anda di Mobile-Friendly TestSelesai!Lihat DEMOHasil Tes ResponsiveCara Membuat Template Blogger Jadi Responsive sudah selesai. Anda bisa berhenti di sini jika sudah merasa cukup.Namun, jika ingin lebih menjadikannya SEO Friendly, maka lakukan perubahan di Title Tags.Cara Membuat Template Blogger Lebih SEO Friendly1. Memasukkan Meta Tags SEO Friendly- Tema > Edit HTML- Cari dan Hapus Kode:Ganti dengan kode Title Tags SEO berikut ini: - Save! Simpan Template.Kini blog Anda sudah responsive sekaligus SEO Friendly.Namun, tampilannya masih standar bawaan blogger. Lakukan langkah berikutnya di bawah ini.1. Membuat Auto ReadmoreDengan memasang kode-kode di bawah ini, tampilan blog yang menggunakan template bawaan blogger akan menjadi berupa judul, gambar thumbnail, dan ringkasan yang diambil dari alinea pertama postingan blog.- Simpan kode berikut ini di atas kode ]]>.thumbnail-post width:100px !important; height:100px !important;float:left;margin:0px 10px 0px 0px;- Hapus dan ganti kode yang kedua dengan kode berikut ini:Simpan Template!2. Menampilkan Related Posts- Copy & Paste kode berikut ini di atas kode ]]>#related-postsfloat:left;width:100%;margin:10px;padding:1px 0 10px#related-posts .widget h2,#related-posts h3font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500#related-posts acolor:#0973CF;font:14px Arial,Sans-serif;#related-posts libackground:url( -EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px#related-posts a:hovercolor:#c00;text-decoration:none#related-posts .widgetmargin:0;padding:0#related-posts ullist-style:none;margin:0;padding:0- Copas kode berikut ini di atasnya kode var numposts = 5;var showpostthumbnails = false;var showpostdate = false;var relatedpoststitle="Related Posts";//1)document.write(""+relatedpoststitle+"")document.write("");while(b.breadcrumbs padding:5px 5px 5px 0; margin:0;font-size:90%; line-height:1.4em; border-bottom:1px solid #f1f1f1- Copas kode berikut ini di bawah kode atau Home » , » - Save Template!Selesai!Tambahan:Untuk menyembunyikan tanggal posting di atas judul, sekaligus menyembunyikan kode obeng dan tang (quickedit), copas kode berikut ini di atas kode ]]>.quickedit,.date-header display:noneAnda sudah Membuat Template Blogger Jadi Responsive dan Lebih SEO Friendly. Selamat! (www.komunikasipraktis.com).* 2ff7e9595c
Comments