Cara membuat read more pada blog
Cara membuat read more di blog tidak lah sulit, tinggal kitanya mau yang mudah atau yang sulit, kalau mau yang mudah tinggal paste jadi, hehehe. Pada kesempatan kali ini saya akan berbagi sedikit tips atau cara membuat read more di blog. Sebelumnya kita perlu tau apa itu read more, Read more merupakan penggalan dalam sebuah artikel, diaman pada penggalan artikel tersebut menampilkan beberapa kalimat atau beberapa paragrap kemudian ada penggalan artikelnya dengan dibatasi dengan kata seperti "Read More","Selengkapnya","Selanjutnya" Dll.Setelah kita tau apa itu read more, kira-kira kita sudah bisa mengetahui kegunaannya seperti apa dan dimana. Manfaat read more itu adalah untuk mempersingkat atau merapikan artikel yang memiliki isi yang panjang, sehingga apabila tidak menggunakan read more maka tampilanya pada blog akan lebih rapi dan dapat menampilkan beberapa artikel lainnya.
Selanjut coba kita praktekkanya, untuk memperaktekannya ikuti saja langkah-langkah berikut ini:
- Masuk dulu ke blognya dengan cara login sesuai dengan akunnya
- Setelah masuk pilih template,selanjutnya Pilih EDIT
- Cari Kode
- Copy paste aja kode dibawah ini tepat diatas kode
- Save Template/ Simpan Template Sahabat
- Setelah tersimpan,kemudian sahabat cari kebawah kode sperti dibawah ini:
Ket: Jika sahabat kesulitan dalam mencarinya, tenang sahabat, sahabat tinggal tekan CTRL F, Selanjutnya ketik "BLOG POST/POSTINGAN BLOG". - setelah tanda panah kecil sahabat klik, maka akan ditampilkan seperti gambar berikut:
- Kemudian sahabat cari kode yang ditandai dengan kotak hitam, yang tulisannya "POST' VAR='POST'",http://amalsalehku.blogspot.com/2014/03/cara-membuat-read-more-otomatis-pada.html
- Setelah sahabat menemukan Kode tersebut sahabat klik lagi tanda panah hitam yang lurus dengan kode tersebut
- Setelah ketemu hapus kode diatas dan sahabat ganti dengan kode dibawah ini
- Klik SAVE / SIMPAN dan Lihat hasilnya Setelah dipraktekkan apakah anda berhasil, jika belum berhasil coba dicek lagi kode programnya, ini memang terlihat sulit bagi anda yang baru memulai belajar blog dan bagi yang sudah terbiasa mengotak-atik blog, anda tidak akan mengalami kesulitan. Baik sekian dulu tips yang saya bagikan tentang bagaimana membuat READ MORE YANG OTOMATIS pada Blog,
<!--ReadMore http://trikseosimple.blogspot.com-->
<b:if cond="data:blog.pageType != "static_page"">
<b:if cond="data:blog.pageType != "item"">
<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:250px;margin-right: 20px
margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style> <script type="text/javascript">
var thumbnail_mode = "yes"; //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 = 250;
</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-->
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='read-more'>
<a expr:href='data:post.url'>Baca Selengkapnya »</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='read-more'>
<a expr:href='data:post.url'>Baca Selengkapnya »</a>
</div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
- Semoga postingan ini bisa bermanfaat pada ada yang sdang belajar.
- Referensi : http://trikseosimple.blogspot.com/