Trik >> Buat FB Fan Page dan Like Box On Blog

Buatlah Facebook Fan Page dan Like Box di blog/website merupakan hal yang dianjurkan pada setiap bloger/websiter. Ada sejumlah trik untuk mengdesain tampilan box mantap, diantaranya :

I. Bila Anda belum memiliki FB Page, buatlah halaman tersebut

• Login Akun FB anda
• Klik Tampilan "Buat Halaman" yang terdapat dibawah Page atau Klik Apply disini
• Pilih/klik opsi "Brand or Product"
• Pilih opsi "Website" dan isikan nama Page sesuai keinginan anda (jangan lupa centang "agreement") kemudia Klik "Get Started"
• Selanjutnya masuk ke halaman Facebook Page yang telah dibuat, lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalkan : upload foto/gambar, mengedit informasi, dan lain sebagainya untuk Facebook Page anda 
• Kemudian Buat Facebook Like Box yang nantinya dapat dipasang di blog/website (Ikuti Penjelasan kemudian)

II. Bila anda yang telah memiliki FB Fan Page, ikuti petunjuk selanjutnya dibawah ini:

1. Buka halaman FB Like Box disini
2. Selanjutnya setting FB Like Box dasar seperti gambar disamping
3. Jika settingan dahh beres, klik "get code". Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, iFrame dan XFBML, pilih salah satu dan copy kodenya. (Untuk Blogger, di sarankan gunakan HTML 5)
4. Setelah itu, Copi dan pastekan di Blog anda : Login>>Dasboard>>Desing/Rancangn>>add gadget>>Pastekan Kode Script tadi ke dalam gadget anda.
5. Save

Kini anda sudah memiliki FB Fan Page di Blog anda. Selamat Mencoba

Tambahan TIPS: Sembunyikan FB Fan Page di Blogspot 

Berikut caranya :
1. Masuk rancangan >tambah gadget>HTML/javascript
2. Copy kode di bawah ke html/javascript

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoIAGwEy2J3G8GThel7GzxndBrrgBxtFIOasdIbx2jzxI1JkYvr311fJsZfVLkUMkb7tCSPJfLu0NORGjjvNk0jWEeZQtyyoEe8WYD9g6OC2Suewwzy9DNRFP66e7NWNGBV9oQdIE8vVw/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/PapuaBengkelMusic&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href=" http://semoga-bermanfaaat.blogspot.com/2012/04/cara-membuat-like-box-fb-tersembunyi_18.html " target="_blank">+ Get This</a></span></div></div>

ganti tulisan yg berwarna Merah dengan ID fb fanspage anda

5. simpan.

Selanjutnya :

6. Rancangan >> edit HTML
7. Cari kode </head> lalu masukan kode di bawah ini tepat di atas </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>

8. Save Tempelate, Kemudian lihat hasilnya.

 

Tips Buat Menu Horisontal di Blog Anda

Hallo Sobat Blogger, Kali ini saya akan share tentang cara membuat Menu Horizontal Dropdown pada blog. dan kelebihan pada menu dropdown ini adalah terdapat search engine di samping menu yg memudah kan para pengunjung mencari informasi di blog anda
Contoh :

Berikut Tutorialnya :

1.) Seperti biasa, pertama-tama kita harus login ke account Blogger terlebih dahulu
2.) Masuk ke Dashboard, Template
3.) Pilih Edit HTML, lalu ceklis "Expand Template Widget"
4.) Cari kode ]]></b:skin> (tekan ctrl+f untuk mempermudah pencarian)
5.) bila sudah, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRwt7iK0N3clLEV4lFp0N_9rTTFHjLiAICNSSVCl8ymbBpHQMAS99EyTMkpZvimjf18HwMXD5CX47fJcnS0UucbHaomzpJfl5Xf9kweKLRwYbqGyFXqXFwARCKbz3xeliqE4Np55-LfE/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0UBlD9L2PBZP8OXUZiJ_pZHSK4FtiNjIlCgnLmtR5LEVsDGX3zmHWdkDKz546XscO_BPbrFUAedKQ3ztEWDa0I0eTRlK2XKKdQ0MEOrIulCAShWs33k-CdItaLK3BhE0Zo1eOReM00NY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

6. Cari kode </head>, kode tersebut biasanya terdapat dua, kamu cari kode yang kedua

7. bila sudah ketemu, letakkan kode berikut tepat dibawah kode </head> 

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://boma-internet.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDE9QTT8J6LB4y-UCVCGLyREpAV0Z1rLNxJjHOjEdZo8Zl9LrCYvuXVHzy_StSF1TIJ1rU0prEnhsM2hGq_PuPvrzhsK6Tw28dhyphenhyphen-efoPDIEh3Xo4-YvKvL3j2OISI3JzTeCjVgTsIMPI/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8vEYdYlsaPQ_KIMmRBTn22YaxOIwTx4vDIPxhHA8N4ALkMyNZHJEKXFGKV_u4U-zTCQ03VmCGfCrWLKWDWhQMCCAP0xXO50-TDsABn83kwkU1QL7H-zlyP8v_kvFnF0WRZ_bSrYdyLkU/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div> 

Keterangan :

• Yang warna merah adalah link yang akan dituju 
• Yang warna biru adalah judul dari Menu dropdownnya
• Yang warna ungu, ganti dengan url blog kamu

8.) Sebelum menyimpan template, sebaiknya klik pratinjau/preview terlebih dahulu, supaya bisa melihat apakah widgetnya sudah benar atau tidak
9.) bila sudah, klik Simpan template.

Semoga bermanfaat.

Buat News Stiker Online di Blog Anda

Langsung aja kita masuk pada tutorial kali ini dengan tips membuat News Stiker Online pada blog anda, seperti langkah-langkah dibawah ini:

1. Login ke Blogspot/ Wordpress anda
2. Masuk ke pengaturan, pilihlah menu Tata Letak dan pilih new Widget
3. Copy dan Pastekan Kode Source di bawah ini pada New HTM yang anda buat
   <style>
   #topmenu {
   border:0px solid #fff;
   position: fixed;
   z-index: +1000;
   bottom: 0px;
   margin: 0 auto;
   width: 100%;
   height: 25px;
   left: 0px;
   background: black;
   }
   .news {
   width:100%;
   float:left;
   margin:2px;
   _top:expression(document.documentElement.scrollTop+
   document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
   }
   </style>
   <div id="topmenu">
   <div class="news">
   <iframe allowtransparency="true" frameborder="0" height="20" id="NewsWindow" marginheight="0" marginwidth="0" scrolling="no" src="http://laci.akupapua.com/beritapapua.htm" style="background-color: transparent;" width="100%"></iframe></div></div>
4. Setelah itu Simpan Widget anda dan lihat hasilnya.

Selamat Mencoba.

Cara Register Domain Gratis blogspot ke com

Pada kesempatan kali ini saya mau share cara register domain gratis atau bagai mana cara register domain gratis .com .info. net. biz gratis, Mungkin di antara blogger - blogger semua sudah pada tahu bagai mana cara membuat costum domain gratis tanpa harus bayar, sebelum anda ingin membuat domain gratis siapkan dulu email, kalau sudah punya email lewati saja langkah ini .

disini saya akan jelaskan bagai mana cara, mendapatkan cara register domain gratis untuk blogspot.

Berikut langkah langkah Cara register Domain .com .info. net. biz gratis

Pertama buka web ini untuk register domain nya http://goo.gl/e6vKi isi semua yang di minta centeng I accept the following selanjutnya klik continue tunggu loading nya kemudian klik Choose a domain (www.yourname.com) for your website masukan domain nya kemudian check, apabila tulisan yang keluar Your domain is available! Continue to register your domain, cara buat domain gratis anda siap untuk di register kemudian klik get doamain selanjutnya isi lagi smua datanya seperti Phone Number * dll , kalau ada tanda * di ujung nya berarti itu wajib di isi klik save n continue.

selanjut nya di cara buat domain gratis register Domain .com .info. net. biz gratis kalau sudah di bagian atas anda akan dibawa ke bagian order domain . nah yg perlu diperhatikan ialah tanda centeng nya . hapus centeng Domain Privacy dan centeng I agree to the Terms of Service kalau sudah klik submit tunggu sampai proses selesai

nanti akan di bawa ke halaman Please Enter Your Billing Information , dan isi sema yang di minta di bagian yang ada tanda bintang nya itu wajib di isi .

pada kolom Card Type isi dengan visa trus pada Credit Card Number: isi dengan 4067424205414109 pada Expiration Date: isi dengan 02/13 pada bagian Card Security Number isi dengan 145 kemudian kelik purhcase, tunggu lagi .. 

Jika sampai langkah di atas cara buat domain gratis register Domain .com .info. net. biz gratis berhasil, maka akan nunggu paling lama 24 jam, kalau domain anda sudah jadi silahkan login lagi di https://websites.intuit.com/~site/Login/index.ffhtml sebelumnya cek dulu domain anda atau tunggu 24 jam baru anda login dan Masuk ke domain manager klik "edit" akan muncul DNS editor pada form A Records, Tambahkan menjadi empat form caranya klik "add a new a records" Pada bagian kolom HOST isi dengan @ semua jadi ada 4 nanti @ nya dan isikan point to sebagai berikut: 216.239.32.21 | 216.239.34.21 | 216.239.36.21 | 216.239.38.21 Pada kolom CNAMES ubah isi host menjadi www dan pada POINTS TO isikan ghs.google.com klik centeng delete untuk setting asli dari bawaan nya, sehingga nanti akan tampak seperti gambar di bawah selanjutnya setting di blogspot nya , untuk pengguna blogspot, untuk pengguna wap dan wp, tunggu postingan selanjutnya.

Bagaimana setting di blogspot

Klik Setelan > Penerbitan > Beralih ke setelan lanjut > Isi alamat domain yang baru di buat tadi > isi chapta > Simpan.

Demikan tutorial singkat tentang cara register domain gratis
kali ini, untuk demo cara register domain gratis bisa di lihat disini dan disini

Cara Mudah Membuat Toko Online dengan Joomla dan Virtuemart

Kesempatan kali ini, saya akan menjelaskan tentang bagaimana membuat website e-commerce menggunakan joomla. Yang dimaksud dengan website e-commerce adalah website yang mengandung unsur bisnis didalamnya.

Perdagangan elektronik atau e-dagang (bahasa Inggris: Electronic commerce, juga e-commerce) adalah penyebaran, pembelian, penjualan, pemasaranbarang dan jasa melalui sistem elektronik seperti internet atau televisi, www, atau jaringan komputer lainnya. E-dagang dapat melibatkan transfer dana elektronik, pertukaran data elektronik, sistem manajemen inventori otomatis, dan sistem pengumpulan data otomatis.

Modul paket yang saya gunakan untuk mengubah website joomla menjadi website e-commerce adalah VirtueMart.

VirtueMart adalah modul #1 untuk kustomisasi website joomla menjadi website toko online pada saat ini.

Ada beberapa tahap yang harus diperhatikan dalam mengubah website joomla kita menjadi website e-commerce. 

Langkah 1:

• Downloadlah modul VirtueMart dari sini
• Setelah berhasil mendownload arsip virtuemart extractlah dan perhatikan isinya terdapat 2 buah file dan 2 buah folder masing-masing adalah folder plugins dan folder modules.

Langkah 2:

• Setelah mengekstrak arsip virtuemart, selanjutnya kita login ke admin panel website joomla kita sebagai contoh : http://localhost/joomla/administrator 
• lalu kita pilih extensions - install/uninstall

Setelah masuk ke dalam Extensions Manager, kita pilih Upload Package File lalu arahkan ke file hasil ekstrakan arsip virtuemart yang bernama “com_virtuemart_1.1.4.j15.zip”

Setelah itu tekan tombol upload file dan install maka instalasi modul virtuemart akan diproses.

Setelah proses instalasi modul virtuemart selesai, akan tampak tampilan instalasi sukses seperti ini:

Untuk pemula, silahkan pilih “Install Sample Data“. Dengan menekan tombol ini, maka virtuemart akan menambahkan beberapa contoh product, category contoh terlebih dahulu, sehingga kita tidak perlu mulai dari awal (kosong).

Namun apabila anda ingin menginstall virtuemart dari awal (kosong) maka pilihlah “Go directly to the Shop”.

Pada tutorial ini saya akan pilih “Install Sample Data“.

Setelah itu maka proses instalasi telah selesai.

Langkah 3:

• Setelah proses instalasi selesai, maka anda dapat melihat admin panel kusus untuk virtuemart. 
• Untuk mengaksesnya secara manual adalah dengan masuk ke admin panel joomla ( http://localhost/joomla/administrator ) 
• lalu menu yang harus dipilih adalah Components - VirtueMart.

Tampilan admin panel untuk virtuemart akan tampak seperti ini:

Kemudian yang harus dilakukan adalah mengubah setting tentang toko online anda.

Untuk melakukan hal ini, pilihlah menu pada navigasi pada sebelah kiri Store - Edit Store

Pada halaman Store Information, ubahlah informasi seperti yang diinginkan. Seperti Logo, currency information, nama toko, dan lain sebagainya.

Setelah semua informasi mengenai toko anda telah diperbaharui, maka tekan “Save” pada pojok kanan atas.

Langkah 4:

Pada langkah ini kita akan mengatur menu pada tampilan website joomla kita, agar toko online kita bisa diakses.

Untuk melakukan ini, anda harus masuk ke admin panel, lalu pilih Menus – Menu Manager - New

Setelah menu My Shop sudah terbentuk, pilihlah menu Menus - My Shop – New. Lalu pilih lah VirtueMart pada saat Select Menu Item Type.

Lalu pilihlah judul untuk menu anda.

Pada contoh ini akan saya buat judul menu Papua Bengkel Musik Mart

Perhatikan gambar berikut agar lebih jelas.

Setelah selesai, menu yang telah dibuat (Papua Bengkel Musik Mart) masih belum akan tampil pada website, kita harus mengatur modul menu terlebih dahulu.

Untuk mengatur modul, maka pilihlah menu Extensions - Module Manager – New, Lalu pilihlah Menu lalu tekan tombol Next. Perhatikan gambar berikut agar lebih jelas.

Setelah itu akan muncul tampilan informasi tentang modul menu. Aturlah nama modul sebagai contoh : My Shop lalu hal yang penting adalah menu name pada parameter pilihlah menu virtuemart kita : shop Perhatikan gambar disamping.

Setelah itu cek lah website joomla dengan mengakses http://localhost/joomla/

Maka akan muncul menu baru My Shop yang berisikan Papua Bengkel Musik Mart didalamnya berisikan kategori produk-produk barang yang kita tawarkan.

Langkah 5:

Pada langkah ini, saya akan menjelaskan cara mengubah atau mengedit produk dan kategori produk.

Pertama, masuklah ke admin panel joomla http://localhost/joomla/administrator/

Setelah itu pilihlah menu Components - VirtueMart lalu pada bagian sebelah kiri, terdapat panel Product

Disana anda dapat mengatur daftar produk yang anda jual, besar discount, kategori produk , dan lain-lain.

Setelah pengaturan produk dan kategori produk, maka toko online kita telah siap di akses oleh pengunjung website kita.

Langkah 6:

Lalu bagaimana cara pembayaran yang digunakan? VirtueMart telah dilengkapi dengan fasilitas beberapa payment gateway, untuk mengaktif/non-aktifkannya bisa melalui menu Store - List Payment Method Anda juga dapat menambahkan payment method anda sendiri.

Selamat, toko online anda telah siap dipublikasikan ke kalayak ramai

Tips Memilih Tablet Android Murah dan Berkualitas

Mau membeli tablet android namun kantong tidak memeadai, jangan kahawatir sekarang sudah banyak produsen ponsel yang menjual tablet android murah namun biasanya barang murah tidak memiliki kualitas bagus sehinga orang jarang mau membelinya. Nah bagi kamu yang saat ini mau membeli tablet android murah namun berkualitas tinggi, berikut ini ada beberapa cara memilih tablet android, murah dan berkualitas. Simak 5 Cara Memilih Tablet Android Murah dan Berkualitas berikut ini:

1. Display

Saat ini banyak tablet generik asal China yang menawarkan fitur capacitive display yang serupa dengan tablet di pasaran pada layarnya. Ingat! Teknologi capacitive itu menjadi pondasi dasar sensitivitas layar ketika disentuh. Jika setiap sentuhan dan sapuan jari direspon dengan lambat, sebaiknya pertimbangkan kembali untuk membeli tablet tersebut.

2. Resolusi Layar

Untuk tablet berukuran 7 inch sebaiknya kamu memilih yang beresolusi 1.024 x 768 untuk tampilan gambar yang lebih jelas. Sementara untuk tablet dengan resolusi 800 x 480 saat ini sudah tidak memadai untuk kenikmatan mata, sekalipun dalam layar smartphone yang lebih kecil.

3. Performa

Jika ada tablet yang menawarkan performa prosesor di bawah 1 GHz, sebaiknya urungkan niat kamu untuk memilikinya. Pasalnya, beberapa aplikasi Android saat ini sudah sangat ‘rakus’ tenaga. Untuk RAM saja, setidaknya sebuah tablet itu harus memiliki dapur pacu 1GB untuk bisa berjalan di OS Android 4.0 Ice Cream Sandwich. Jika tidak, performa tablet akan ‘terseok-seok’ ketika digunakan.

4. Ketersediaan Update

Jika memungkinkan, pastikan tablet yang akan kamu beli memiliki ketersediaan update di masa mendatang. Dengan begitu, kamu tidak akan stuck dengan jenis OS tertentu selama menggunakannya.

5. Konektivitas

Demi memangkas harga jual, banyak tablet di pasaran meniadakan fitur koneksi 3G dan hanya mengandalkan WiFi. Bahkan, vendor sekelas Apple pun memberlakukannya di varian iPad. Hal ini dikembalikan lagi kepada kebutuhan kamu, apakah selamanya ingin bergantung kepada jaringan hotspot sekitar atau leluasa dengan jaringan 3G operator.

Sebagai tambahan selain melihat 5 hal diatas sebaiknya kamu juga menilai dari sisi purna jual kembali sehinga suatu saat kamu ingin menjualnya kembali kamu akan mendapatkan harga yang wajar ketika kamu membeli baru. Nah itulah beberapa cara memilih tablet android murah namun berkualitas bagus.

Buat Read More Otomatis di Blog (dengan label gambar)

Read More dapat diartikan baca selanjutnya atau selengkapnya atau berikutnya, yang tentunya berfungsi untuk menyekat atau memotong postingan agar tidak tampil semuanya di halaman depan atau beranda. Untuk menggunakan readmore, anda bisa melakukannya secara manual atau bisa secara otomatis, dan tentu saja kita ingin yang otomatis karena lebih praktis. Sebenarnya kita tidak perlu susah-susah membuat Read More Otomatis atau auto read more di blogspot karena ketika anda menggunakan template yang sudah anda download di beberapa situs penyedia template blogspot, kebanyakan sudah terpasang auto readmore. Namun bagi anda yang masih setia dengan template bawaan blogspot atau bagi anda yang ingin menambah wawasan dan pengetahuan, simak tutorial lengkap cara membuat auto readmore di blogspot berikut ini:

Cara I

1. Pertama Login blog anda  >> lalu pilih rancangan >> Pilih Edit HTML (jangan lupa centang Expand Template Widget)
2. Lalu cari kode </head>  untuk mempermudah pencarian tekan F3.
3. Masukan kode berikut tepat ditas </head>
   

   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(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>

4. Kemudian cari dan gantilah kode : <data:post.body/> dengan :

<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 class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

Ganti Read more dengan pesan anda dan Save pengaturan, kemudian lihat hasilnya ...

Cara II

1. Cari kode </head>
2. Kemudian copy paste kode di bawah ini sebelum kode tersebut.
   
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <script type='text/javascript'>
   var thumbnail_mode = &quot;float&quot; ;
   summary_noimg = 450;
   summary_img =300;
   img_thumb_height = 110;
   img_thumb_width = 130;
   </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(img.length>=1) {
   imgtag = '<span style="float:left; padding:0;margin:0 10px 0 0"><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>
   </b:if>
3. Lalu cari dan hapus kode di antara <div class='post-header-line-1'/></div> hingga <b:if cond='data:post.hasJumpLink'> dan Ganti dengan kode di bawah:
   
       <div class='post-body entry-content'>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <data:post.body/>
   <b:else/>
   <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 class='rmlink' style='float:right;padding-top:5px;'><a expr:href='data:post.url'>Readmore &#8594;</a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>
   </b:if>
   </b:if>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>
4. Simpan Tempelate dan lihat hasilnya