Showing posts with label blogger template. Show all posts
Showing posts with label blogger template. Show all posts

Wednesday, 21 March 2012

Cara Membuat Read More Otomatis di Blogger

UPdate! Trik Read mOre oToMaTiS tanpa jQuery,Sudah Direvisi! Dijamin Berhasil 100%


Read More Otomatis pada Template Blogger

Membuat Otomatis Read More - Auto Readmore Button.

Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.

Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D


Langkah Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript


Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.


Cara membuat readmore otomatis.
(1)

membuat read more baca selengkapnya otomatis.
(2)

otomatis read more.
(3)


Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

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>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>


Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>


Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>


Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya Membuat Read More Otomatis / Auto ReadMore di Blogger Selesai.

Sunday, 29 January 2012

YouTube Blogger Template - BloggerTube - YouTube Style Bloger Templete

Kelebihan BloggerTube - Youtube Style Blogger Template

Tidak meniru 100% dari template yang digunakan oleh YouTube,namun sekilas jika kita melihat dari segi performence-nya ada kesamaan face / tampilan design-nya.
Adalah BloggerTube Blogger Template mengusung blogger template Youtube Style,kita semua tahu hal ini tidak akan sampai melanggar hukum kecuali jika kita menerapkannya 100% seperti YouTube dan mengklaimnya sebagai hasil dan hak cipta sendiri apalagi memperdagangkannya.

Sedang di sini pun yang akan dibahas tidak 100% menjiplak dari YouTube,namun kelebihannya adalah lebih enak dilihat dan sangat pas diterapkan jika kontent blog berisi lebih banyak menggunakan streaming video.
Contoh fisiknya atau demonya,sobat bisa lihat di salah satu blog teman kami di SINI,dengan catatan jika dari pihak yang menciptakannya sudah menghapus file-file yang didalamnya (seperti javascriptnya,icon-nya,dll) maka template ini tidak akan bekerja dengan yang semestinya.

Bagaimana Cara Menginstall BloggerTube - YouTube Blogger Template?

Pertama,sama dengan langkah dan cara mengganti template blogger menjadi WikiPedia Style Blogger Template pada beberapa hari yang lalu,ikuti instruktur tersebut sampai dengan selesai.

Kedua,Setelah template blogger anda sudah berhasil dikonvert menjadi 'Youtube Style',modofikasilah beberapa nama-nama yang sekiranya anda tidak butuhkan,caranya dengan Pergi ke Tata Letak lalu pilih Edit Html dan contreng Expand Widget Templates lalu gunakan Ctrl+F pada keyboard untuk merubah nama mana yang akan sobat ganti.

Teknik merubah nama ini bisa gunakan trik seperti (ini hanya contoh merubah isi template aja ya gan):

-Lihat blog dan lihat nama mana yang ganjil dan akan sobat ganti:


youtube blogger template


-Pergi ke Tata Letak lalu pilih Edit Html dan contreng Expand Widget Templates lalu gunakan Ctrl+F pada keyboard untuk merubah nama mana yang akan sobat ganti tersebut.


youtube style blogger template

Di atas hanyalah trik cara mengganti isi template atau merubah tulisan pada template yang ingin kita rubah sesuai dengan keinginan kita masing-masing.

Ketiga,jika template sudah sesuai dengan keinginan,kini saatnya untuk mengatur agar hasil pencarian nanti dapat menampilkan screenshot videonya.

cara menggunakan template youtube

Caranya,setiap melakukan posting baru,pastikan sobat meletakkan kode berikut:
Misal sobat ingin meletakkan video dari youtube dengan url seperti dibawah ini (untuk cara meletakkan/memasang video youtube ke blog bisa sobat baca tutornya di sini)


cara memasang template youtube
gb.screenshot


Perhatikan ya gan url yang diberi tanda lingkar tersebut,itulah yang nantinya akan dimasukkan dalam posting kita.
Cara menerapkannya seperti ini:
1.Saya akan posting tentang video di url

http://www.youtube.com/watch?v=sLLCAmr8vjs

2.Saya akan meletakkan kode berikut untuk menampilkannya di blog

<embed src="http://www.youtube.com/v/sLLCAmr8vjs" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>

3.Saya akan menempatkan kode berikut setelah kode diatas (kode berikut berfungsi untuk memperlihatkan screenshot video yang bersangkutan seperti gb.screenshot diatas:

<img src="http://i2.ytimg.com/vi/6chUPd4XSrw/default.jpg" />

Ket:kode sLLCAmr8vjs saya ambil dari sumber video tersebut.

Bagaimana sob,penasaran ingin mencoba template tersebut? klik di SINI ya untuk download file.Semoga bermanfaat dan sampaikan saran dan kritik sobat di Facebook Fan Page kami ya :D

Thursday, 29 December 2011

Wiki - Wikipedia Style Blogger Template

Blogger Template yang Simple,Hemat dan Berkesan Profesional

Saya sudah mencoba menerapkan blogger template dengan style (baca:gaya) wikipedia yang seperti sudah kita semua tahu.Dan ternyata memang memberi kesan yang lebih sejuk dan terlihat lebih profesional :D

Sobat bisa langsung download filenya di SINI.
Nah untuk langkah singkat cara mengganti template di blogger sekalian saya juga akan share di sini.Ini karena ada beberapa agan-agan yang belum begitu mengerti cara mengganti template dari hasil download di internet.Jika pada blogger dalam mengganti template hanya dengan klik saja (seperti tutorial lau dalam mengubah blogger template menjadi dynamic)namun berbeda saat kita akan mengganti template dari hasil download seperti kali ini.Nah,biar sobat yang belum mengerti benar bagaiamana cara mengganti template,disini saya akan menjabarkan dengan cara manual namun sangat efektif.

Cara Mengganti Template Blogger dengan Wiki - Wikipedia Style


1.Sobat download filenya,silakan klik di Sini,dan file nantinya akan sobat simpan dalam komputer sobat (terserah mau ditempatkan dimana)

blogger template wikipedia.


2.Extract hasil download dan buka folder lalu cari file WikiWP.xml buka file tersebut menggunakan Wordpad,lihat Gambar:

cara mengganti blogger template wikipedia.


3.Selanjutnya sobat tekan Ctrl+A setelah itu klik 'Copy' untuk mengcopy semua data di wordpad tersebut,lihat gambar:

cara cepat mengganti dan merubah template menjadi template wikipedia.


4.Pergilah ke Dashboard lalu pilih Tata Letak kemudian tab Edit Html selanjutnya (PENTING)jangan lupa contreng checkbox Expand Widget Templates.

cara mengubah template blogger.


5.Ctrl+A dalam area templates,delete alias hapus semua kode template yang lama dan ganti dengan kode template wiki yang baru saja kita copy dari Wordpad tadi (lihat langkah 3 diatas) lalu kita paste ke area ini,lihat gambar:

cara download template wikipedia.


6.Simpan Templates.Selesai.

Tambahan:Jika setelah menyimpan template ada notif seperti gambar cara mengunduh template dan mengganti blogger templete wikipedia. ,teserah sobat saja,jika mau mempertahankan widget yang sudah ada tinggal klik 'pertahankan widget' namun jika ingin tampilan baru maka klik 'delete widget'.

Tuesday, 13 December 2011

Mengaktifkan Dynamic Template Blogger Tanpa Merubah Template Asli

Cara Menerapkan / Menggunakan Dynamic Blogger Template

Sebenarnya tutorial ini sudah agak basi ya sob,masalahnya sejak oktober 2011 lalu sudah banyak agan-agan yang juga share masalah merubah template blogger menjadi dynamic template.
Masalahnya,pada tutorial-tutorial yang sudah teman-teman bagikan adalah merubah secara default menjadi dynamic template,dan hal ini saya kira sangat merugikan teman-teman karena template yang sudah kita patenkan menjadi dynamic template sudah tak dapat kita vermak sedemikian rupa lagi.
Hal ini karena blogger menonaktifkan pengaturan pada template jika kita sudah telanjur menggunakan dynamic template tersebut menjadi default template pada blog yang kita miliki.

Tapi perlu sobat ketahui,bahwa dynamic template ini tercipta adalah dengan mengambil dari screenshot feed blog kamu,jadi jika feed yang sobat miliki belum dirubah menjadi 'Full' atau 'Penuh' maka dynamic template ini tidak dapat bekerja,dan justru yang akan terjadi nantinya sobat akan melihat notif seperti ini:

Feed Dynamic Blogger Templates.


Untuk itu,sebelum sobat menggunakan trik ini,terlebih dahulu atur feed blog sobat menjadi 'Penuh' atau 'Full',caranya (untuk tpilan baru -beta-) ikuti langkah berikut:

Pergi ke Dashboard lalu pilih Settings(gb1) dan kemudian pilih Other(gb2),Selanjutnya rubah feed menjadi Full atau Penuh(gb3) dan simpan.

Cara mengaktifkan Dynamic Views untuk Blogger.
gb1


Cara Mengubah Dynamic View Menjadi Halaman Utama Blogspot.
gb2


Tips Membuat Tampilan Dynamic View Blogger.
gb3


Nah sebenarnya cukup mudah untuk menggunakan / menerapkan / mengaktifkan dynamic template yang disediakan blogger tanpa kita harus mengubah template aslinya.
Yup,cukup mengubah url sesuai dengan dinamik templete yang sobat inginkan,mengingat blogger menyediakan dalam beberapa pilihan.
Diantaranya adalah :

1.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Magazine,
Tambahkan pada url sobat dengan view/magazine,
contoh : http://google.blogspot.com/view/magazine
*google.blogspot.com rubah sesuai dengan alamat blog sobat*

Hasilnya untuk blog ini akan seperti gambar berikut sob:

1.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Magazine

Dynamic Template dengan tampilan Magazine.


Klik di sini untuk melihat demo.

2.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Flipcard

Dynamic Template dengan tampilan Flipcard.


Klik di sini untuk melihat demo.

3.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Classic

Dynamic Template dengan tampilan Classic.


Klik di sini untuk melihat demo.

4.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Mosaic

Dynamic Template dengan tampilan Mosaic.


Klik di sini untuk melihat demo.

5.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Sidebar

Dynamic Template dengan tampilan Sidebar.


Klik di sini untuk melihat demo.

6.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Snapshot

Dynamic Template dengan tampilan Snapshot.


Klik di sini untuk melihat demo.

7.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Timeslide

Dynamic Template dengan tampilan Timeslide.


Klik di sini untuk melihat demo.

Semua tinggal selera kamu deh sob,semoga bermanfaat ya,keep post gan!!!

Monday, 13 June 2011

Teknik Seo Blogger Template ( Bag.2 ) - Cara Agar Breadcrumb Dapat Terindex

Rahasia Teknik Seo dalam Cara Ampuh Agar Breadcrumbs Dapat Terindex Google



Disaat google sedang pelit dalam mengindex blogspot akhir-akhir ini,sobat pasti mencari teknik seo agar blogger yang sobat miliki masih bertahan untuk dapat terindex di paman Google ini.
Pasalnya,tahun 2011 ini paman kita gugel sangat berhati-hati dengan flatform blogspot.

Seakan iri melihat blog-blog master seo yang memiliki breadcrumb/breadcrumbs yang dapat terindex di Google.

Lihat screenshot gambar dari blog sahabat saya yang breadcrumb-nya dapat terindex google berikut ini:

seo blogger template.


Di blog teknik seo blogger ini sendiri memang sulit meiliki breadcrumb yang dapat terindex seperti itu,tapi setelah posting ini mudah-mudahan breadcrumb pada blog tutorial ini dapat cepat terindex.

Nah,dalam kiat seo blogger template kali ini,kita akan ngbahas masalah ini sob,yup! bagaimana trik dan teknik agar blogger templates yang kita miliki seo friendly dengan optimasi dari breadcrumb.



Cara Membuat Breadcrumb Seo Friendly



Bagi sobat yang belum membuat breadcrums sebaiknya sobat bikin dulu ya,dan beruntung jika sobat belum membuatnya,karena breadcrumb seo friendly ini,akan kita ciptakan sore hari ini.

Pertama,pastikan anda sudah membuat label pada blog.
Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):



]]></b:skin>

Setelah ketemu,letakkan kode berikut tepat diatasnya:

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}


Nah,setelah itu,sobat cari lagi kode seperti ini (ketik aja di Ctrl+F)

<div class='post hentry

Nah nanti sobat akan temukan barisan kode seperti:

<div class='post hentry uncustomized-post-template'>

Nah,tepat dibawah kode tersebut,sobat letakkan kode ini:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>


Setelah itu simpan templates sobat.

Tips Agar Breadcrumbs Terindeks di Google



Berikut tips dan trik agar breadcrumbs dapat diindex mesin pencari google:

  1. Buatlah label blog yang tidak terlalu banyak (buatlah 1 atau 2 nama label saja)
  2. Cantumkan label entry pada sidebar atau bagian footer blog (karena ini akan memungkinkan traffik dari link ini)
  3. Nama label usahakan tidak jauh dari tema posting (misal posting tentang 'belajar seo' maka nama label usahakan seperti nama 'tutorial belajar seo',dll)
  4. Intinya,buatlah posting yang sangat bermanfaat dan tidak bersifat menipu pengunjung
  5. Buatlah pengunjung sangat tertarik dengan isi dari nama label yang ingin sobat shoot
  6. Berdo'a :D


Semoga saja,dalam Teknik Seo Blogger Template ( Bag.2 ) - Cara Agar Breadcrumb Dapat Terindex posting kali ini,sedikit dapat membantu dan memberi harapan sobat blogger yang mulai terkikis rasa percaya dirinya dari langkah yang diambil Google terhadap blogspot.
Keep Post!

Wednesday, 1 June 2011

Teknik Seo Blogger Template ( Bag.1 )

Menyisipkan Keyword di Sebelum Judul Posting


Bicara masalah teknik seo blogger template,pada dasarnya sudah diberikan oleh para master seo kita meskipun tidak diberikan secara terang-terangan.

Kita lihat apa yang sudah blog tutorial blog dan seo ini mengutak-atik template untuk menyisipkan / meletakkan keyword secara otomatis pada setiap posting baru.

Jika sobat perhatikan,blog belajar seo blogspot ini didalam judul posting tidaklah berarti apa-apa,lihat gambar:

teknik blogger seo.


Namun saat browser tidak mengaktifkan gambar,maka akan tampil seperti ini (dan ini juga apa yang ditampilkan oleh search engine Google):

teknik seo blogger blogspot.


Betul sob,kita dapat menciptakan atau menyisipkan keywod secara otomatis pada saat setiap posting baru.
Nah,caranya ternyata sangat mudah,pada Teknik Seo Blogger Template ( Bag.1 ) ini akan sharing seputar masalah menyisipkan kata kunci ini sob :D

Langkah Teknik Modifikasi Blogger Template agar Seo Friendly


Pertama,coba sobat pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

membuat menu navigasi.
(1)


menu navigasi kwick jquery.
(2)


kwicks jquery navigasi menu blogger.
(3)


Setelah itu coba sobat cari kode :

<a expr:href='data:post.url'><data:post.title/></a>
(gunakan Ctrl+F di keyboard sob),setelah ketemu rubahlah menjadi seperti berikut:

<a expr:href='data:post.url'>
<img alt='Belajar Seo Blogspot' height='50' src='http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif' width='50'/>
<data:post.title/></a>


Untuk:
-kode warna hijau http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif,rubahlah url image/gambar milik sobat.
-kode warna hijau 'belajar seo blogspot' rubahlah kata kunci atau keyword sobat yang ingin disipkan yang nantinya akan secara otomatis tampil sebelum judul posting.


Semoga berhasil ya gan!!!

Friday, 15 April 2011

Membuat Read More Otomatis / Auto ReadMore di Blogger

UPdate! Trik Read mOre oToMaTiS tanpa jQuery,Sudah Direvisi! Dijamin Berhasil 100%
(mohon maklum ya sob,ada kode yang ketinggalan,hihihi)


Read More Otomatis pada Template Blogger

Membuat Otomatis Read More - Auto Readmore Button.

Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.

Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D


Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript


Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.


Cara membuat readmore otomatis.
(1)

membuat read more baca selengkapnya otomatis.
(2)

otomatis read more.
(3)


Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

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>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>


Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>


Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>


Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya Membuat Read More Otomatis / Auto ReadMore di Blogger Selesai.