Membuat Homepage Dengan Halaman Statis Blogger

ED BY : ADMINS

Setelah di postingan sebelumnya gw share cara biar postingan tertentu selalu di halaman depan tutorialnya klik disini , sekarang gw mw share cara buat home page dengan halaman statis.

Setiap pengunjung buka home page loe yang muncul cuma 1 halaman doank gak ada jejeran postingan jadi lebih rapi. Gak perlu repot cari cara buat ngilangin link older post atau newer post gan. Selain itu blog loe jadi keliatan lebih profesional gan.

Langsung aja disimak gan cara buat home page dengan halaman statis.

Cara Membuat Homepage Dengan Halaman Statis Blogger

• Pertama masuk ke Blogger pilih Pages lalu klik New page lanjut Blank page gan. Sekarang tinggal buat isi home page terserah kalian. tapi sekarang buat awur dulu gan entar di edit belakangan. Kalo udah beres tinggal di Publish gan.

 

• Kalian sudah buat home pagenya sekarang gimana caranya biar halaman statis yang tadi loe buat ada di Home bawaanya Blogger gan. Caranya dengan ngeredirect halaman statis yang baru ntu ke url home blog loe.

 

• Sekarang buat ngeredirectnya loe pilih Settings lalu klik Search preferences gan.

 

• Lanjut klik Edit di Custom Redirects gan. Isi From dengan garis miring ato slash / terus To isi dengan url home page yang baru tadi loe buat misal /p/home-page/html gan. Inget jangan sampe salah ngisi dan pastiin garis miringnya di isi gan. Lalu centang Permanent terus klik Save dan terakhir Save changes.

 

• Sekarang buka blog kalian gan, pasti halaman depannya jadi home page yang kalian buat dari halaman statis tadi.

 

• Tab home pagenya gak muncul ya gan? ( Lupa gan balik lagi ke Pages klik Don,t show terus pilih Top tabs ato Slide links terserah kalian tabsnya mau dimunculin dimana ).

• Tapi tabs homenya jadi ada 2 gan kan gak asyik tu di liat, maka dari itu loe harus sembunyiin tab Home bawaanya Blogger gan. Caranya pilih Layout terus pilih Pages dan klik Edit gan.

 

• Di pop up edit loe ilangin tanda centang di Home buat nyembunyiin tab homenya gan, lalu Save. Sekarang tab homenya cuman1 di blog loe gan.

 

• Sekarang blog loe udah ada home pagenya gan, tapi postingan loe jadi gak keliatan donk. Pengen postingan blog punya halaman khusus atau tab juga gan?. 

• Ok sekarang gw kasi tau caranya biar semua postingan loe tetep bisa di akses dengan mudah sama pengunjung blog memalui tab. Pertama pergi ke Pages klik New page lalu pilih Web address. Terus isi page title misal Isi Blog lalu di Web address (URL) ketik alamat blog loe plus index.html di belakangnya. Contoh : http://seociyus.blogspot.com/index.html lalu save gan.

Beres semua, sekarang blog loe udah punya home page plus halaman khusus postingan sendiri, mantap gak gan. Tinggal di edit aja sekarang isi home pagenya gan.


Sekian dulu tips dari gw semoga bermanfaat buat kalian semua yang pengen buat homepage pake halaman statis dan juga halaman khusus buat postingan sendiri, jangan lupa cuap-cuap gan disini.

Sumber: http://seociyus.blogspot.com/2012/12/cara-membuat-home-page-dengan-halaman-statis.html

MEMBUAT MENU DAN SUB MENU BLOGSPOT

CARA MEMBUAT SUB MENU PADA MENU UTAMA DI BLOGSPOT

Sub Menu

Salam luar biasa…

Sekarang banyak sekali informasi tentang caramenambah /membuat sub menuuntuk menu utama di internet. Kita bisa dengan mudah mencari informasi tersebut hanya dengan mengetikkan kata tertentu sesuai maksud yang diinginkan pada salah satu mesin pencari (search engine) seperti google.com , maka akan tertera informasi yang kita inginkan.

Berdasarkan pengalaman saya, dari beberapa informasi yang kita maksud, terkadang kurang jelas cara atau langkah-langkah yang mesti dilakukan. Apalagi seperti saya yang masih awam dengan pengetahuan tentang blogger ini. 

Karena itu, saya akan membagi pengalaman saya tentang suatu informasi yaitucara membuat sub menu pada menu utama di blogspot”.

Sebelumnya, saya sangat berterima kasih kepada Mas Ahmad Rifai (http://blog.ahmadrifai.net/2012/03/membuat-menu-serta-sub-menu-tanpa.html) walaupun kita belum saling mengenal satu sama lain.

Berikut ini langkah-langkah yang harus dilakukan :

1. Klik Menu Desain 

2. Pilih Menu Template lalu pilih menu Edit HTML 

3. Pilih/klik menu Lanjutkan

4. Pilih/klik menu Expand Template Widget

5. <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>

   Cari scrift berikut :

Agar lebih mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :

div class='main-outer'>.

Bisa jadi beda dengan template yang lain…

Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi : 

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>

PENJELASAN :

• Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
• Contoh : http://pandawalimamedan.blogspot.com/search/label/Kesehatan. Maka ini menjadi link Submenu utama dan juga sebagai label.
• Contoh : http://pandawalimamedan.blogspot.com/2012/08/cara-membuat-sub-menu-pada-menu-utama.html. Maka ini menjadi link isi submenu.
• Ganti Tulisan warna biru dengan menu dan sub menu yang anda inginkan.
• Contoh : Kesehatan. Ini menjadi Judul Submenu
• Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan. 

7. Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . Lalu simpanlah/save. Dan tutup edit HTML tersebut.

Saran : back up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas.

8. Untuk menghilangkan tampilan tampilan dabel dengan Laman Utama, 
Maka ikutilah saran berikut :

• Masuk ke Menu Laman 
• Lalu pilih tampilan halaman dengan memilih "jangan tampilkan"
• Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.

Blog sudah bisa dipublikasikan...

Semoga sharing yang saya buat ini bisa bermanfaat dan menambah khazanah pengetahuan kita semua.

SUMBER :http://pandawalimamedan.blogspot.com/2012/08/cara-membuat-sub-menu-pada-menu-utama.html

Cara Membuat Menu Bar di Blog (V2)

Cara membuat menu bar di blog (V2) – Sebelum melanjutkan menulis, saya ingin mengucapkan selamat Natal bagi Anda yang merayakannya. Beberapa waktu yang lalu saya sempat membagikan tips mengenai cara mudah memasang atau membuat menu bar di blog. Dimana, menu bar tersebut dapat Anda buat dan pasang di blog Anda tanpa perlu melakukan edit HTML. Namun, menu bar tersebut memiliki kelemahan. Dimana, menu bar tersebut tidak dapat ditambahkan sub menu (anak menu). Jika Anda tidak mengetahui apa itu sub menu, silahkan lihat gambar dibawah :

Dari screenshot diatas, terlihat menu Lainnya… memiliki 3 sub menu, yaitu Tukar Link,Sitemap dan About Me. Nah, dalam tutorial kali ini, saya akan membahas cara memasang menu bar seperti menu bar pada gambar screenshot diatas. Jika Anda ingin melakuan migrasi dari menu bar terdahulu, silahkan lihat posting sebelumnya untuk mengetahui bagian mana saja yang dihapus.

Oke, seperti biasa, to the point. Berikut ini cara membuat atau memasang menu bar V2 di blog :

1.     Pertama, buka Blogger, dan langsung masuk ke menu Template.

2.     Backup template blog Anda, dan klik tombol Edit HTML.

3.     Cari kode ]]></b:skin> (seperti biasa, gunakan tombol sakti CTRL + F), dan pastekan kode berikut tepat Diatas/sebelumnya.

#navbarmenu{width:auto; float:left; font-size:12px; background:#fff; font-weight:bold; margin:0 auto; padding:0 auto} #nav{margin:0; padding:0} #nav ul{float:left; list-style:none; margin:0; padding:0} #nav li{list-style:none; margin:0; padding:0; background:none} #nav li a, #nav li a:link, #nav li a:visited{color:#000000; display:block; font-weight:normal; text-transform:normal; margin:0; padding:5px 15px 5px} #nav li a:hover{background:#99FF00; color:#FFF; margin:0; -moz-border-radius:8px; padding:5px 15px 5px; text-decoration:none} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#FFF; -moz-border-radius:8px; width:150px; color:#00000; font-weight:normal; text-transform:normal; float:none; margin:0; padding:5px 10px 5px 15px; border-bottom:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff} #nav li li a:hover{background: #99ff00; color:#FFF; padding:5px 10px 5px 15px} #nav li{float:left; padding:0} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0} #nav li ul a{width:140px} #nav li ul ul{margin:-25px 0 0 171px} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto} #nav li:hover, #nav li.sfhover{position:static}

Catatan :

Jika Anda ingin melakukan kustomisasi, Anda dapat mengubah warna latar menubar. Caranya, ganti tulisan #fff dengan kode warna lainnya. Lihat pada HEX Color Generatoruntuk mengubah warna kesukaan Anda menjadi kode HTML, sehingga Anda dapat menggunakannya pada menu bar ini.

4.     Klik Simpan template.

5.     Selesai? Hampir. Sekarang, masuk ke bagian Tata Letak, dan pilih Tambahkan Gadget pada header atas (dibawah [Judul Blog Anda] Header).

6.     Cari dan pilih HTML/Javascript.

7.     Pastekan kode berikut (kosongkan isian Judul).

<div id='menu'>

<div id='menu-wrap'>

<div id='navbarmenu'>

<ul id='nav'>

<li><a href=‘http://xxpc123xx.blogspot.com’>Home</a></li>

<li><a href='http://xxpc123xx.blogspot.com/search/label/tips%20trik%20blogging'>Tips Trik Blogging</a></li>

<li><a href='http://xxpc123xx.blogspot.com/search/label/desain'>Desain</a></li>

<li><a href='http://xxpc123xx.blogspot.com/search/label/Blog%20Tools'>Blog Tools</a></li>

<li><a href=‘http://xxpc123xx.blogspot.com/search/label/SEO’>SEO</a></li>

<li><a href=‘#’>Lainnya ...</a>

<ul>

<li><a href=‘http://xxpc123xx.blogspot.com/p/blog-page.html>Tukar Link</a></li>

<li><a href=‘http://xxpc123xx.blogspot.com/p/sitemap_18.html’>Sitemap</a></li>

<li><a href='http://xxpc123xx.blogspot.com/p/blog-page_1.html'>About Me</a></li>

</ul>

</li>

<li><a href='http://www.facebook.com/tipsseoblogpc123'>Fanspage</a></li>

<li><a href='http://www.twitter.com/blog_ananda'>Twitter</a></li>

</ul>

Keterangan :

Tulisan yang berwarna merah merupakan url yang akan dituju apabila menu bar diklik. Ganti dengan url yang diinginkan, semisal url menuju fanpage, link menuju suatu posting, dll.

Tulisan yang berwarna ungu merupakan tulisan yang ditampilkan pada menu bar. Gantilah sesuai dengan keinginan Anda. Misalnya Home untuk menu bar yang jika di-klik akan membawa pengunjung blog menuju homepage blog.

Anda juga dapat menambahkan menu baru. Caranya, tambahkan <li><a href=‘url-anda’>Judul Menu</a></li> diatas </ul>.

8.     Terakhir, klik Simpan.

Buka blog Anda untuk melihat previewnya.

Tips Tambahan : Membuat Sub Menu pada Menu Bar.

Jika Anda ingin menambah atau membuat sebuah sub menu pada sebuah menu, coba perhatikan contoh berikut. Secara default, kode menu bar pada langkah nomor 7 akan memiliki 3 buah sub menu. Perhatikan gambar dibawah:

Nah, seandainya saya ingin membuat sub menu pada menu Blog Tools, dimana saya menginginkan sub menunya berisi  menu HTML Parser dan HEX Color Generator, bagaimana caranya? Perhatikan screenshot preview menu bar yang telah saya ubah berikut:

Terlihat pada menu Blog Tools akan memiliki sub menu HEX Color Generator dan HTML Parser. Caranya? Perhatikan sekali lagi kode HTML menu bar diatas (terutama untuk baris yang saya beri stabilo oranye, nomor 7). Pada kode pertama, kodenya hanya :

<li><a href='http://xxpc123xx.blogspot.com/search/label/Blog%20Tools'>Blog Tools</a></li>

Kemudian, saya menekan enter, sehingga kode </li> terakhir berpindah ke baris selanjutnya. Lalu saya menambahkan kode <ul> diatas kode </li>, dan mulai membuat sub menu dari menu Blog Tools tersebut. Sebagai penutup, saya menambahkan kode </ul> diatas kode </li>. Sehingga kodenya akan menjadi :

<li><a href='http://xxpc123xx.blogspot.com/search/label/Blog%20Tools'>Blog Tools</a>

<ul>

<li><a href='http://xxpc123xx.blogspot.com/2013/12/html-parser-tool-untuk-parse.html'>HTML Parser</a></li>

<li><a href='http://xxpc123xx.blogspot.com/2013/01/hex-color-generator-for-blog.html'>HEX Color Generator</a></li>

</ul>

</li>

Kode yang saya tebalkan merupakan kode penutup. Intinya, pindahkan </li> dan buat kode <ul> dan </ul> diatasnya, lalu sisipkan kode <li><a href='http://url-anda'>Judul Menu</a></li> diantara keduanya (kode <ul> dan </ul>). Memang terasa agak susah, tetapi percayalah, saya yakin Anda pasti akan mengerti dan bisa melakukannya.

Selamat mencoba! Jika pemasangan menu bar ini terasa membuat loading blog Anda menjadi lambat, coba compress kode nomor 3 dengan tool CSS Compressor. Atau, jika masih terasa lambat, coba ganti menu bar Anda dengan menu bar yang pernah saya bahas sebelumnya. Tolong berikan artikel ini Google +, dan tolong share artikel ini. Terima kasih, dan salam blogger!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

sumber : http://xxpc123xx.blogspot.com/2013/12/cara-membuat-menu-bar-diblog-dengan-submenu.html

Membuat Read More Otomatis Versi Loading Cepat

DEMO

Versi sebelumnya Membuat Read More Otomatis Versi Loading Cepat

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>




DEMO


Versi sebelumnya Membuat Read More Otomatis Versi Loading Cepat

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.