Langsung ke konten utama

Cara membuat Read More Otomatis di Blog dengan efek Gambar Transisi

Gambar
Oleh

Read More Otomatis di Blog

Didalam posting artikel yang satu ini menjelaskan bagaimana Cara Membuat Auto Read More Otomatis Di Halaman Depan Blog. Ada beberapa cara untuk membuat Auto Read More otomatis, atau popular juga dengan sebutan Baca Selengkapnya. Biasanya Fitur otomatis posting artikel ini ditambahkan di bawah postingan artikel blog Di Homepage, Beranda atau halaman depan.

Fungsi dari Read More Otomatis itu sendiri merupakan salah satu cara untuk membuat halaman homepage lebih terlihat simple dan dinamis, dengan menampilkan judul, gambar yang mempunyai efek transisi dan uraian singkat yang dapat diatur panjangnya sehingga memudahkan pengunjung untuk membaca artikel yang diinginkan.


Namun kekurangannya bahwa gambar dan deskripsi singkat terbatas untuk dimodifikasi (namun tetap ideal). Sedangkan versi auto read more otomatis yang ini, ukuran gambar mempunyai efek transisi menarik serta panjang deskripsi dapat diatur sesuai kebutuhan. Sebaiknya Posting mempunyai gambar meskipun hanya 1, kalo tidak ada gambar nanti kosong tampilannya.

Untuk menambahkannya memerlukan waktu beberapa menit saja. Auto Read More di halaman depan Blog ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading cepat setelah versi sebelumnya ada yang tercepat, sehingga sangat baik bagi Mesin Pencari.

Auto Read more Artikel dapat di modifikasi sesuai kebutuhan, diuraikan di dalam keterangan.
Berikut langkah-langkah Cara Membuat Auto Read More Otomatis Di Blog. Perhatian: bagi yang sudah memasang read more otomatis yang ada sebelumnya harus dihapus terlebih dahulu. Versi Ini telah Direvisi.

1. Login Ke Blogger.
2. Klik Template, Backup template untuk jaga2 bila diperlukan,
atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode),
Dan cari kode berikut </head>
Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas </head>
<!--Auto Read More Mulai-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

Perhatian: Cobalah terlebih dahulu tanpa diedit.
Warna Biru untuk mengatur banyaknya kutipan dari artikel.
Warna Hijau adalah Pengaturan Lebar dan tinggi gambar

7. Kemudian Cari Kode <data:post.body/>
Kode tersebut diatas jumlahnya biasanya ada 2, Cari yang versi web,
biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.

8. Hapus Kode <data:post.body/> yang ke-2 dan Ganti dengan kode dibawah ini.
<!-- Auto read more Mulai -->
<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/>
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
Warna Biru Muda boleh dihapus boleh tidak, bedakan saja.
"Baca Selengkapnya" juga bisa diganti bebas.

Perhatian: Jika sudah menggunakan fitur read more otomatis sebelumnya, maka harus dihapus yang versi sebelumnya, dan mungkin jumlah pada langkah 7 bukan 2 tp mungkin 3 (mungkin juga script diatas pada langkah 6 berbeda.. ya harus dihapus jg script versi sebelumnya), anda harus dapat memperkirakan dari mana ke mana yang harus di hapus, contoh pada langkah 8 (petunjuknya warna Oranye - ini petunjuk bagi yg sdh pake versi lain)

9. Preview terlebih dahulu, kalo bagus ya terus Save Template, dan lihat hasilnya.

Demikian Tutorial Cara Membuat Auto Read More Otomatis Artikel Di Blog, mudah-mudahan bisa bermanfaat.

Artikel Terkait:

Kategori:

Komentar

Posting Komentar

Jangan lupa kirim kritik dan sarannya pada kolom komentar diatas ya!
Mari kita berdiskusi!
Note: Mohon untuk tidak spam ya!

Postingan Populer 7 Hari Terakhir:

HDiary 3: "Mulai Nulis Blog Lagi?"

Oleh
Halo, kawan kawan! Udah lama banget kayanya aku ga buat postingan pribadi di HDiary ini ya? Haha. Dari jaman sekolah sampe udah kerja sekarang. Sekedar info aja, HDiary adalah kategori yang pernah aku buat jaman baheula dulu, Wkwk. Isinya cuma Cerita Harianku aja. Ya, iseng iseng ada yang mau nambahin saran di kolom komentar gitu, walaupun ujung ujungnya aku tutup kolom komentarnya. Karena isinya komenan absurd temen temenku dulu, Haha. Semenjak masuk dunia kerja yang sesungguhnya, aku udah vakum dari dunia perBlogan. Bener bener ga ada waktu buat ngurus blog ini. Apalagi aku sendiri kerja di luar kota yang bikin aku jadi ngekost dan ga bisa bawa PC. Jadi, aku cuma bisa fokus sama kerjaan utama aku disini. Aku kadang sempet sih sekali kali ngecek blog ini di tahun tahun kemarin. Tapi aku ngecek cuma buat melihat traffic yang makin turun drastis, wkwk. Maklumlah ya, orang udah semakin ga keurus. Ga ada post baru, siapa juga yang mau mantengin blog kecil kaya gini :( Selama 6 tahun ga ng...
1 komentar
Baca Selengkapnya

Fakta Unik tentang Dunia Musik

Oleh
REPUBLIKA.CO.ID, Nada Perkembangan dunia musik di industri musik dunia sudah dikenal hampir 1,5 abad silam. Ada banyak fakta tentang musik di dunia dan ini adalah 11 di antaranya, dilansir dari Did You Know , Senin (6/4). 1. Musik itu dikenal pertama kalinya pada 1876, pada tahun yang sama ketika telepon diciptakan. 2. Untuk meraih Golden Disc, sebuah album harus menjual lebih dari 100 ribu kopi di Inggris dan 500 ribu kopi di Amerika Serikat. 3. CD pertama kali dikembangkan oleh Philips dan Sony pada 1980. 4. Sebanyak 40 miliar lagu diunduh secara ilegal setiap tahunnya, dan sekitar 90 persen di antaranya berasal dari situs download musik. 5. Industri musik menghasilkan sekitar empat miliar dolar AS untuk musik online ilegal, namun kerugian yang diterima dari peredaran musik yang diunduh secara ilegal mencapai 40 miliar dolar AS. 6. Sebuah album musik biasanya terjual minimal 20 juta kopi sebelum munculnya pembajakan online. Namun, setelah banyak pembajak muncul, pen...
1 komentar
Baca Selengkapnya

Rahasia di balik Sidik Jari manusia!

Oleh
Sidik jari merupakan identitas pribadi yang tak mungkin ada yang menyamainya. Jika di dunia ini hidup 6 miliar orang, maka ada 6 miliar pola sidik jari yang ada dan belum ditemukan seseorang yang memiliki sidik jari yang sama dengan lainnya. Karena keunikannya tersebut, sidik jari dipakai oleh kepolisian dalam penyidikan sebuah kasus kejahatan (forensik). Makanya pada saat terjadi sebuah kejahatan, TKP akan diclear up dan dilarang bagi siapa saja untuk masuk karena dikhawatirkan akan merusak sidik jari penjahat yang mungkin tertinggal di barang bukti yang ada di TKP. Ada tiga jenis sidik jari yaitu Whorl (lingkaran), Loop (sangkutan) dan Arch (busur). Sifat-sifat atau karakteristik yang dimiliki oleh sidik jari adalah parennial nature yaitu guratan-guratan pada sidik jari yang melekat pada manusia seumur hidup, immutability yang berarti bahwa sidik jari seseorang tak akan pernah berubah kecuali sebuah kondisi yaitu terjadi kecelakaan yang serius sehingga mengub...
Posting Komentar
Baca Selengkapnya

Robot Pemburu Pluto Bangkit Lagi

Oleh
Sebuah robot besar menjadi hiasan pada Restoran Robot di Tokyo, Jepang, 29 Juni 2014. Restoran yang dibuka pada dua tahun lalu di Kabukicho ini telah menghabiskan dana sekitar 10 juta dolar AS. (Photo by Chris McGrath/Getty Images) Cape Canaveral  - Wahana robot New Horizons milik Badan Antariksa Amerika Serikat (NASA) akhirnya "bangkit" dari tidur panjangnya. Robot itu telah menempuh perjalanan berjarak 4,8 miliar kilometer selama sembilan tahun. NASA memulai kembali program New Horizons memburu planet Pluto yang berada di Sabuk Kuiper dan mempelajari permukaannya yang dipenuhi es.  Alarm yang dipasang di tubuh New Horizons menyala dan membangunkan robot itu pada pukul tiga sore, Sabtu, 6 November lalu. Namun para operator di Bumi tidak menerima sinyal konfirmasi hingga pukul 09.30 malam. Lokasi New Horizons sekarang begitu jauh, sehingga radio sinyal dengan kecepatan suara dari robot itu memerlukan waktu 4 jam 25 menit untuk sampai ke stasiun di Bumi.  Pluto terl...
Posting Komentar
Baca Selengkapnya