
Lama gak nge-blog dan memberi tutorial segar yg bisa membuat blog anda lebih mantap.
Dan pada kesempatan kaliini saya akan memberikan tutorial blog,
yaitu cara membuat read more otomatis dengan ditambahi gambar.
JIka anda tertarik dengan ini, anda bisa mencoba tutorial ini.
Trik ini sangat mudah. Langsung aja ya..!!
1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Centang Expand Template Widget
4. Cari kode </head>
5. Copy kode di bawah ini,dan letakkan di atas </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Chasavan
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
6. Lalu cari kode <data:post.body/>
7. Ganti kode tersebut dengan kode di bawah ini..
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj807bLbmFE3SzUBfQMysd0gXK6fDqQGhaIf1ikeQbToyF30XnRAeGwLGnKRxJaxIB2kgfLERP7VhOK7iu3bI4tW5PmFakstnTl69f7BHNj0ySXLgqNRam1uSc71g9Of2kMpMi-ubqNLKS/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
NB:
Gambar readmore bisa diganti, dengan cara ganti URL gambar(yg warna merah)8. Simpan
Semoga bermanfaat.. Artikel Terkait di Bawah posting
Read More
- Automatic Read More with Thumbnail for Blogger
- Mengganti Link Read More dengan Icon Gambar
- Customisasi Tampilan Read more
- Cara Mengganti Tulisan ReadMore Dengan Image Gif
- Mengganti Link Read More dengan Icon Gambar
- Cara pasang Auto Read More terbaru
- Pasang Auto Read More di Blogger Posts
- Koleksi gambar readmore
Tips N Triks
- Tips & Trik Jumper | Teknik Jumper Keypad Handphone
- Blackberry Software Solution By Kenny ic3
- Tips mempertahankan baterai laptop agar bertahan lama I Battery Care | Hausgame software center
- cara menggabungkan dan memotong video
- membuat poster animasi gokil abis dengan photobie
- Pengalaman membasmi virus shortcut, W32 Ramnit
- Perbaiki Safe Mode bermasalah dengan Safe Mode Fixer
- BlackBerry 8520 Curve usb solution
- Nokia E63 E71 E72 SMPS Jumper
- Hardware pack For Nokia X6 16GB Latest Software
- Nokia x6 16gb hardware solution
- Nokia X5 Hardwere Solution One Exe
- Nokia x5
- Nokia X6 32GB solution
- Nokia C1-00 All Hardware Latest Solution Pack
- Nokia X2 Soution
- x6 Nokia ALL UseFull Hardware Repair Solution Pack
- Nokia X3 all Hardware Tested Solution
- NOKIA x6 All Solution Here (Setup File v-4)
- Nokia X5 All Hardware Latest Solution
- Nokia X7-00 charging way
- Nokia E 71 Hardware Solution
- Nokia 1616 Display
- nokiaE7-00 power key way
- Nokia C,E,N,X series All hardware solution exe
Blogger
- Kamus Nama bagus
- Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
- Merubah Lebar Template Blog
- Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
- Cara Memasang Yahoo Messenger Di Blogger
- Cara membuat browser bergetar saat klik kanan
- Cara Membuat Sitemap di Blogspot
- Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
- Cara Pasang Buku Tamu Facebook di Blog
- Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
- Mengganti Tulisan Newer Post Older Post Dengan Gambar
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Memasang Radio Online atau MP3 di Blog
- SEXY BOOKMARKS V2 FOR BLOGGER
- Show Comment Bubble at Top Right of each Blogger Posts
- Automatic Read More with Thumbnail for Blogger
- Social Bookmarking Widget for Blogger with auto scrolling function
- CARA MEMBUAT EXPLORER D-TREE...
- Cara Pasang Tag Meta Robot Blogspot
- Cara Membuat Drop Caps Otomatis di Posting Blog
- Koleksi banner blog dofollow
- Cara mengecek kecepatan Blog
- Membuat Link Terbuka Pada Halaman Baru
- Memasang Feedjit Pada Blogger
- Membuat Gradient Effect dengan CSS
0 komentar:
Posting Komentar