Johny Magstore, Template Magazine untuk Toko Online

Template ini memenuhi permintaan dari beberapa teman blogger pada kotak komentar yang menginginkan ada tambahan untuk tampilan grid dan list style pada postingan di homepage. Saya membuat template toko online ini bukan karena banyak peminatnya tapi lebih karena memenuhi permintaan dari teman. Tanpa mereka juga blog saya ini tidak akan berkembang, untuk itu pada kesempatan ini saya pribadi mengucapkan terima kasih yang sebesar-besarnya kepada teman-teman blogger semua yang telah sudi mampir dan berkunjung ke blog saya ini, dan tak lupa juga untuk para pengguna template buatan saya, terima kasih sudah memberikan apresiasi yang begitu tinggi kepada saya. Kalau disuruh memilih, saya lebih suka membuat template biasa, karena disamping lebih mudah, tampilan bisa lebih variatif, beda sama template toko online yang tampilannya melulu berbentuk gallery produk. Terus terang untuk membuat template toko online diperlukan waktu yang lebih lama. Tapi saya jangan disuruh membuat atau convert template yang persis seperti situs-situs yang sudah jadi, maksudnya kemarin ada yang minta dibuatkan template yang seperti Mashable, kompas, dan lain-lain... ogah saya, serius

Sebenarnya template ini hanya modifikasi dari template toko online saya sebelumnya Johny Blackstore, tambahan fitur grid dan list disini saya memakai jQuery Cookies buatan Sebastian Sulinski dari SSD Tutorial (klik link untuk tutorial membuat grid and list view). Slider yang saya pakai disini juga masih sama hanya ukurannya lebih besar dan ada tambahan thumbnail untuk fungsi pagination.

Fitur yang terdapat dalam template Johny Magstore :

1. Shopping Cart dari wojodesign.com
2. Grid and list view dari SSD Tutorial
3. Simple Image Panner and Zoomer v1.1 dari Dynamicdrive

Posting Artikel

Dalam membuat postingan, perhatikan struktur kode di bawah ini :

<div class="product_image">
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:150px; height:150px;">
<img border="0" class="item_thumb" src="product_image.jpg" /></div>
<span class="item_price">$00.00</span> </div>
<div class="product_describe">
Descriptions... </div>

Keterangan :
Warna merah : masukkan url gambar produk anda pada kode warna merah diatas. Pilih gambar yang ukuran pixel nya sedang, antara 200 - 300 px.
Warna kuning : harga produk
Warna biru : deskripsi dari produk

Kode diatas adalah kode yang harus anda awali dalam membuat postingan terbaru, dan untuk memudahkan agar Anda tidak berulang kali copy paste kode tersebut sewaktu membuat artikel terbaru, masukkan kode tersebut pada kolom post template. Masuk ke setting, pilih posts and comments >> post template. Klik add, setelah itu masukkan kode diatas pada kotak kosong seperti gambar dibawah, terakhir save setting.

Shopping Cart

Fitur Shopping Cart masih menggunakan simplecart dari wojodesign.com. Dan hanya support untuk top currency, antara lain : Dollar, Poundsterling dan Euro. Untuk mengganti akun Paypal yang terdapat pada blog demo ini dengan akun Paypal Anda, cari kode dibawah ini :

<script type='text/javascript'>

simpleCart.email = &quot;johnytemplate@gmail.com&quot;;

simpleCart.checkoutTo = PayPal;

simpleCart.currency = USD;

simpleCart.taxRate  = 0.02;

simpleCart.shippingFlatRate = 3.25;

simpleCart.shippingQuantityRate = 1.00;

simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];

</script>

Ganti email warna merah diatas dengan email Anda (email yang sudah didaftarkan di Paypal).

Fitur Pendukung

Slider yang saya pasang pada template ini bekerja otomatis berdasarkan label yang Anda masukkan pada kotak HTML/Javascript. Perhatikan gambar di bawah ini :

Dari gambar diatas lihat kolom kotak merah, klik Edit pada widget featured content slider, setelah terbuka jendela baru masukkan atau ketik label yang ingin ditampilkan pada slider, lihat gambar di bawah ini :

Dari gambar diatas saya memasukkan label Electronic yang akan muncul pada slider, Anda bisa ganti sesuai keinginan. Untuk lebih jelasnya silahkan baca tutorial dalam membuat slider ini disini.

Dua navigasi pada template ini semuanya harus memasukkan manual, tidak seperti pada template sebelumnya terdapat satu navigasi khusus untuk halaman statis, meskipun begitu template ini sudah support dengan static page (halaman statis).

Untuk merubah simbol currency dari $ (dollar) menjadi Rp (rupiah) pada widget shopping cart :

1. Cari URL script ini di Edit HTML :
   

   http://kauman.googlecode.com/files/WojosimpleCart-USD.js

   Setelah ketemu ganti dengan URL script berikut :
   

   https://masolis-javascript.googlecode.com/svn/trunk/magstorecart-rupiah.js

2. Langkah selanjutnya, masih pada Edit HTML ganti USD pada kode ini :
   

   simpleCart.currency = USD;

   menjadi 

   simpleCart.currency = IDR;

Terakhir save templates, dan currency anda akan berubah menjadi rupiah. Tapi perlu diingat disini, itu hanya sekedar penggantian currency saja, tidak bisa untuk melakukan checkout atau pembayaran langsung lewat Paypal. Karena Paypal belum menerima Rupiah sebagai alat pembayaran.

Disini sudah saya siapkan dua tombol dibawah gambar produk di homepage yaitu add to cart dan view detail, jika tidak ingin memakai shopping cart sebagai alat transaksi. Anda tinggal rubah tombol add to cart menjadi order dan arahkan ke direct link halaman formulir order yang sudah anda buat, misalnya seperti ini (contoh form ini dibuat menggunakan docs google). Jika anda menggunakan form order untuk transaksi penjualan,  fitur shopping cart tidak terpakai, jadi hapus semua script CSS dan javascript untuk shopping cart pada template ini. Selamat mencoba dan semoga bermanfaat

Updates :

Dari beberapa komentar yang masuk, ada yang menginginkan untuk menampilkan nama barang yang ada di shopping cart, untuk itu silahkan di download ulang template ini sudah saya updates dengan menampilkan nama barang (lihat demo)

Template toko online Johny Blackstore
Dua template Toko Online tanpa shopping cart

Demo | Download

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Johny Blackstore, Template Toko Online Asal Jadi

Template ini adalah permintaan teman blogger via email, Abu Dzaky atau siapa ya? lupa saya namanya. Intinya dia meminta untuk dibuatkan sebuah template untuk jualan online. Sebenarnya saya tidak begitu bisa untuk membuat template toko online, disamping kesibukan saya di dunia nyata yang belakangan ini banyak menyita waktu juga karena keterbatasan kemampuan saya dalam membuat shopping cart untuk memudahkan transaksi online via Paypal. Template ini namanya Johny Blackstore, nggak cocok ya...? hehehehe. Bodo amat... yang penting ada store nya

Shopping cart yang saya gunakan disini adalah simplecart made in wojodesign.com. Sudah saya masukkan currency IDR atau rupiah pada script tersebut tapi tetap saja tidak bisa digunakan untuk transaksi langsung via paypal, karena Paypal belum menerima rupiah sebagai alat pembayaran. Jadi jika Anda ingin memakai template ini untuk jualan online, barangnya dinilai pakai dollar aja ya...??. Sekarang saya akan menjelaskan instalasi template dan beberapa fitur yang terdapat pada template ini :

Posting Artikel

Dalam membuat artikel baru, perhatikan struktur kode di bawah ini :

<div class="product_image">

<a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a>

<span class="item_price">$00.00</span></div>

<div class="product_describe">

Description your product.............
</div>

Keterangan :
Warna merah : masukkan url gambar produk anda pada kedua kode warna merah diatas. Usahakan gambar yang Anda upload ukuran panjang dan lebar sama, misalnya 300 x 300 px
Warna kuning : harga produk
Warna biru : deskripsi dari produk

Kode diatas adalah kode yang harus anda awali dalam membuat postingan terbaru, dan untuk memudahkan agar Anda tidak berulang kali copy paste kode tersebut sewaktu membuat artikel terbaru, masukkan kode tersebut pada kolom post template. Masuk ke setting, pilih posts and comments >> post template. Klik add, setelah itu masukkan kode diatas pada kotak kosong seperti gambar dibawah, terakhir save setting.

Shopping Cart

Fitur Shopping Cart disini digunakan untuk memudahkan pengelola toko online dalam transaksi via Paypal. Tapi karena Paypal belum menerima pembayaran Rupiah, jadi setting untuk currency masih dalam dollar. Untuk mengganti akun Paypal yang terdapat pada blog demo ini dengan akun Paypal Anda, cari kode dibawah ini :

<script type='text/javascript'>

simpleCart.email = &quot;johnytemplate@gmail.com&quot;;

simpleCart.checkoutTo = PayPal;

simpleCart.currency = USD;

simpleCart.taxRate  = 0.02;

simpleCart.shippingFlatRate = 3.25;

simpleCart.shippingQuantityRate = 1.00;

simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];

</script>

Ganti email warna merah diatas dengan email Anda (email yang sudah didaftarkan di Paypal)

Fitur Pendukung

1. Slider yang saya pasang disini bekerja otomatis, menampilkan artikel terbaru anda dengan jumlah 8 postingan. Jika Anda ingin menampilkan per kategori atau label, cari kode ini pada Edit HTML (jangan lupa centang expand widget templates) :
   

   <script>

   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>

   Ganti dengan kode berikut :
   

   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/your label?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script>

   Ganti kode warna biru dengan label yang ingin Anda tampilkan pada slider.
   
2. Untuk mengganti email berlangganan yang ada di bawah navigasi, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
   
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
   Keterangan :
   Warna biru : ganti dengan alamat feed anda.
   
3. Template ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, sekali lagi jangan lupa untuk centang kotak expand widget templates :
   

   <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2440873145683465163&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

   Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :
   
   
   
   
   
4. Widget popular post thumbnail, setting seperti pada gambar dibawah ini :
   
   
   
   
   Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda. Untuk lebih jelasnya silahkan baca tutorialnya disini.

Fitur yang lain saya kira mudah, seperti memasang Yahoo Messenger dan lain-lain. Template ini juga dilengkapi dengan efek zooming pada gambar jika Anda mengarahkan cursor pada gambar, gambar itu akan otomatis membesar sesuai dengan letak cursor. Mungkin hanya itu yang perlu saya jelaskan mengenai template ini, seperti biasa jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Showcase
Jika Anda ingin melihat blog yang sudah memakai template ini. bisa dilihat disini :
Toko Madu Mulia Alam Nusantara
Johny Online Store

Sangat disarankan :

1. Baca tutorial pemasangan template ini sampai selesai.
2. I suggest to upload gambar produk dengan ukuran panjang dan lebar sama, misalnya 300 x 300 px.
3. Agar hasil akhir dalam penggunaan template ini maksimal dan tata letak post teratur, judul post jangan terlalu panjang, karena akan menggeser gambar ke bawah.
4. Untuk mempercepat loading, simpan javascript yang ada pada template ini di tempat penyimpanan Google Code Anda. Bagi yang belum bisa cara menyimpan di Google Code bisa dibaca disini tutorialnya.

Update
Untuk merubah simbol currency dari $ (dollar) menjadi Rp (rupiah) pada shopping cart :

1. Cari URL script ini di Edit HTML :
   

   http://jagad.googlecode.com/files/WojosimpleCart-IDR.js

   Setelah ketemu ganti dengan URL script berikut :
   

   https://masolis-javascript.googlecode.com/svn/trunk/blackstorecart-rupiah.js

2. Langkah selanjutnya, masih pada Edit HTML ganti USD pada kode ini :
   

   simpleCart.currency = USD;

   menjadi 

   simpleCart.currency = IDR;

Terakhir save templates, dan currency anda akan berubah menjadi rupiah. Tapi perlu diingat disini, itu hanya sekedar penggantian currency saja, tidak bisa untuk melakukan checkout atau pembayaran langsung lewat Paypal. Karena Paypal belum menerima Rupiah sebagai alat pembayaran.

Updates :

Dari beberapa komentar yang masuk, ada yang menginginkan untuk menampilkan nama barang yang ada di shopping cart, untuk itu silahkan di download ulang template ini sudah saya updates dengan menampilkan nama barang (lihat demo)

Template toko online terbaru Johny Magstore
Dua template Toko Online tanpa shopping cart

Demo | Download

Update Templates

My Google Code was banned again, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Cara mengetahui posisi artikel di hasil pencarian

Cara Mengetahui Posisi artikel di SERP - Untuk melakukan optimasi SEO pada artikel blog, sangat penting untuk mengetahui artikel mana yang harus di optimasi terlebih dahulu. Artikel yang sudah duduk manis di halaman pertama SERP untuk sementara tidak perlu lagi di optimasi. Sebaiknya, dahulukan mengoptimasi artikel yang jauh dari halaman pertama. Lalu, bagaimana cara mengetahui posisi artikel di SERP ( Hasil Pencarian ) ???

Meskipun blog ini sudah berjalan beberapa tahun, saat ini Blogger Bugis bisa di katakan sebagai blog baru.  Semua artikel BB yang lama saya hapus karena sudah tidak cocok lagi di baca tahun ini mengingat tampilan blogger sudah dipermak google. Sebagai blog baru, saat ini saya hanya mulai memfokuskan artikel di Blogger Bugis bisa tampil pada halaman depan hasil pencarian search engine google terutama google indonesia. Untuk itu, saya hanya menggunakan Google SERP Checker untuk mengetahui posisi artikel di hasil pencarian google Indonesia.

Tools ini bisa anda temukan di http://easyseotracking.com/google-serp-checker.php ( blog baru tidak boleh banyak link keluar, jadi anda harus copy paste URLnya ). Sesuai dengan namanya, Google SERP Checker akan membantu kita cek posisi artikel di hasil pencarian Google dot com, google.co.id, .am, .as, dan dot dot google lainnya  sesuai dengan keyword yang kita tentukan.

Cara Menggunakan Google SERP Checker

Cara menggunakan tools ini sangat mudah dan praktis. Perhatikan gambar di bawah ini :

Gambar 1 : Cara Mengetahui Posisi Artikel di Hasil Pencarian Google

• Pilih target pengunjung, misalnya google.co.id untuk target pengunjung Indonesia.
• Masukkan keyword atau kata kunci yang di bidik pada hasil pencarian google, misalnya "Cara Membuat Blog"
• Berikutnya masukkan URL artikel yang ingin di ketahui posisinya di SERP, tentunya artikel yang sesuai dengan keyword yang di bidik sebelumnya.
• Klik check untuk mengetahui posisi artikel di SERP jika seseorang melakukan pencarian di google target pengunjung anda, lalu lihat hasilnya di bagian bawah tools tersebut.

Selamat bereksperimen...
Semoga bermanfaat.....

Cara Membuat Tulisan Berjalan

Cara Membuat Tulisan Berjalan - Setelah mengetahui cara membuat spoiler, trik Blogger Bugis berikutnya adalah membuat teks atau tulisan atau widget yang ada pada blog bergerak sendiri dengan menggunakan kode HTML. Teks atau tulisan bergerak ini biasa di sebut dengan tulisan berjalan, dalam kode HTML di kenal dengan perintah marquee.

Gambar 1 : Cara Membuat Tulisan Berjalan

Membuat tulisan berjalan akan memberikan tambahan variasi pada blog. Biasanya, tulisan berjalan atau widget berjalan pada blog di gunakan oleh blogger untuk menampilkan semua widget atau tulisan yang tersimpan di dalam kotak yang tidak menggunakan scroll. Kecepatan berjalan, arah gerakan dan variasi lain bisa di tambahkan pada teks atau tulisan berjalan untuk membuat tulisan atau teks berjalan bergerak atau berjalan sesuai dengan yang kita inginkan.

Cara Membuat tulisan berjalan

Kode HTML dasar yang di gunakan untuk membuat tulisan bergerak atau berjalan adalah :

<marquee>Tulisan Berjalan</marquee>

Kode tersebut akan membuat tulisan berjalan seperti di bawah ini :

Tulisan Berjalan

Cara Membuat Widget Berjalan

Membuat widget berjalan atau bergerak sama saja dengan cara membuat tulisan berjalan. Gunakan kode yang sama seperti kode di atas lalu ganti tulisan yang berwarna merah dengan kode widget yang ingin di buat bergerak atau berjalan sehingga kodenya seperti ini :

<marquee>Tulisan Berjalan</marquee>

Ubah kodenya menjadi seperti ini :

<marquee>Kode Widget</marquee>

Ganti kode yang berwarna merah dengan kode widget yang ingin di buat bergerak

Macam - Macam Tulisan Berjalan

Setelah mengetahui cara membuat tulisan dan widget berjalan, berikut saya jelaskan cara mengatur gerakan dan memberi variasi pada tulisan berjalan agar terlihat lebih menarik

1. Mengatur Kecepatan Gerakan

Tambahkan perintah scrollamount="angka kecepatan" untuk mengatur kecepatan gerakan tulisan berjalan sehingga kodenya menjadi seperti ini :

<marquee scrollamount="angka kecepatan">TULISAN BERJALAN</marquee>

Ganti kode berwarna biru dengan angka ( misalanya 2, 3, atau 4 dsb ) dan ganti Tulisan berjalan dengan teks atau tulisan atau kode widget yang ingin di buat berjalan atau bergerak.
Contohnya :

<marquee scrollamount="2">TULISAN BERJALAN</marquee>

<marquee scrollamount="3">TULISAN BERJALAN</marquee>

<marquee scrollamount="4">TULISAN BERJALAN</marquee>

Ke tiga kode diatas akan membuat tulisan berjalan dengan kcepatan berbeda yaitu 2, 3, dan 4. Kode di atas akan membuat tulisan berjalan seperti berikut ini :

TULISAN BERJALANTULISAN BERJALANTULISAN BERJALAN
Semakin besar angka scrollamount semakin cepat tulisannya berjalan.

2. Mengatur Arah Gerakan

Tambahkan perintah direction="arah gerakan" untuk menentukan arah gerakan tulisan berjalan. Adapun arah gerakan yang bisa di gunakan adalah :

right = arah gerakan ke kanan
up = arah gerakan ke atas
down = arah gerakan ke bawah

Penempatan kode arah gerakan sama dengan penempatan kode kecepatan gerakan. Contohnya seperti ini :

<marquee direction="right">TULISAN BERJALAN</marquee>

Jika kode kecepatan dan kode arah gerakan  di gabung, kodenya akan menjadi seperti ini :

<marquee scrollamount="2" direction="right">TULISAN BERJALAN</marquee>

<marquee scrollamount="2" direction="up">TULISAN BERJALAN</marquee>

<marquee scrollamount="2" direction="down">TULISAN BERJALAN</marquee> 

hasilnya :

TULISAN BERJALANTULISAN BERJALANTULISAN BERJALAN

Dengan memahami contoh di atas, anda sudah tahu bagaimana cara menambahkan perintah dan menggabung perintahnya untuk memberikan efek berbeda pada tulisan berjalannya. Sekarang saya akan memberikan beberapa kode perintah untuk tulisan berjalan. Anda tinggal menggabung kodenya jika anda menginginkan efek berbeda pada saat membuat tulisaan berjalan.

3. Tulisan Berjalan Bolak Balik

Membuat tulisan berjalan mondar mandir juga menarik. Untuk itu, berikut cara membuatnya versi Blogger Bugis. Kode yang di gunakan :

<marquee behavior="alternate">TULISAN BERJALAN BOLAK-BALIK</marquee>

Hasilnya :
TULISAN BERJALAN BOLAK-BALIK

4. Tulisan Berjalan dan Berhenti
Kode yang di gunakan :

<marquee onmouseover="this.stop()" onmouseout="this.start()">TULISAN BEJALAN dan BERHENTI</marquee>

Hasilnya :
TULISAN BEJALAN dan BERHENTI

Kode diatas akan membuat tulisan berhenti saat di sentuh mouse. Arahkan mouse anda pada tulisan berjalannya untuk melihat hasilnya.

5. Memberi background

Untuk memberi background dan warna pada tulisan berjalan kode yang di gunakan adalah sebagai berikut :

<marquee bgcolor="#FDEAE8">Tulisan Berjalan</marquee>

Hasilnya seperti ini :

Tulisan Berjalan

#FDEAE8 adalah kode warna background, untuk melihat lebih banyak kode warna, anda bisa lihat di artikel Blogger Bugis sebelumnya "Tools Untuk Melihat Kode Warna" 

6. Mengatur Lebar dan Tinggi Jarak Gerakan.

Untuk mengatur lebar dan gerakan tulisan berjalan, kode yang di gunakan adalah sebagai berikut :

<marquee scrollamount="2" direction="up" width="50px" height="70px">TULISAN BERJALAN</marquee>
<marquee scrollamount="2" direction="down" width="50px" height="70px">TULISAN BERJALAN</marquee>

Hasilnya :
TULISAN BERJALANTULISAN BERJALAN

Pengaturan tinggi gerakan biasanya di gunakan untuk tulisan berjalan yang bergerak ke atas dan ke bawah agar arah gerakan tidak terlalu naik tau terlalu ke bawah seperti pada contoh nomor 2 tulisan bergerak ke atas / bawah.

Width adalah lebar, sedangkan height adalah tinggi. Anda juga bisa menambah kode width saja atau height saja sesuai keinginan anda. Ganti angkanya dengan angka yang lebih besar atau lebih kecil jika ingin membuat lebar atau tinggi menjadi lebih lebar atau lebih tinggi atau sebaliknya. Semakin tinggi angka, maka akan semakin lebar atau semakin tinggi.

Beberapa contoh tulisan berjalan di atas saya rasa sudah cukup. Anda bisa memberikan variasi lain dengan menggabungkan kodenya. Jika anda ingin membuat link di berjalan, ganti kode "Tulisan Berjalan" dengan kode html link anda. Jika anda belum tahu bagaimana cara membuat kode HTML link, klik "Cara Membuat Link".

Selamat membuat blog anda lebih ramai dengan menambahkan Tulisan Berjalan. Jika masih ada pertanyaan tentang cara membuat tulisan berjalan di blogspot, sampaikan melalui kotak komentar di bawah artikel ini.
Semoga bermanfaat......

Cara Membuat Spoiler

Cara membuat spoiler - Spoiler adalah sebuah tombol yang akan menyembunyikan widget / gadget atau tulisan. Jika tombol spoiler di klik, maka tulisan atau widget yang tersembunyi akan di tampilkan. Jika di klik lagi maka widget atau tulisan tersebut akan di sembunyikan kembali. Artikel ini tidak berhubungan dengan postingan BB sebelumnya yaitu "Cara Menghapus Broken Link". Agar tidak terlalu tegang menghapus link rusak, saya tulis artkel untuk mempercantik blog yaitu "Cara Membuat Spoiler di blog"

Gambar 1 : Cara Membuat Spoiler

Contoh / Live Demo tombol spoiler di blog yang terpasang di postingan atau di dalam artikel blog, bisa anda lihat di artikel "Cara Membuat Daftar Isi Blog Otomatis". Untuk melihat contoh Spoiler yang lain, anda bis lihat di bagian paling bawah blog ini, tepatnya di bagian komentar blog ( Selama template BLOGGER BUGIS belum di edit / berubah ).

Cara Membuat Spoiler

Untuk membuat spoiler, kode yang digunakan adalah :

<div style="font-family: verdana; margin-top: 5px; text-align: center;">
<input onclick="if  (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display  != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display  = ''; this.innerText = ''; this.value = 'Tutup'; } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display  = 'none'; this.innerText = ''; this.value = 'Buka Kembali'; }" style="font-size: 12px; margin: 0px; padding: 3px 5px;" type="button" value="Buka" /></div>
<div style="margin: 0px; padding: 1px;">
<div style="display: none;">
www.bloggerbugis.com
</div>
</div>

Keterangan :

• Verdana = Jenis Huruf tulisan pada tombol Spoiler. Ganti dengan Trebuchet ms, georgia, arial, atau jenis huruf lain yang anda inginkan
• 5 = Jarak tombol dari objek di atasnya. Ganti dengan angka yang lebih besar untuk membuatnya lebih jauh dari objek yang ada di atasnya atau sebaliknya
• center = Posisi / Letak tombol spoiler. Center berarti posisi tombol berada di tengah. Jika ingin membuat tombolnya berada di sebelah kiri, ganti center dengan Left, untuk sebelah kanan, ganti dengan right.
• Tutup = Tulisan pada tombol spoiler saat spoiler menampilkan widget atau tulisan yang di sembunyikan.
• Buka Kembali = Tulisan pada tombol spoiler saat widget atau tulisan tersembunyi tapi sebelumnya sudah pernah di buka / di tampilkan spoiler
• Buka = Tulisan pada tombol spoiler saat tulisan atau widget masih di sembunyikan oleh spoiler
• www.bloggerbugis.com adalah tulisan yang di sembunyikan oleh spoiler. Ganti dengan tulisan yang ingin anda sembunyikan dengan spoiler atau ganti dengan kode widget jika anda ingin menyembunyikan widget dengan spoiler

Untuk memasang Spoiler pada postingan atau artikel blog, anda harus memasang kode spoiler pada mode HTML ( Kecuali anda menggunakan "Tafsirkan HTML yang di ketik" pada menu pilihan yang ada di post editor blogspot ).

Sampai baris ini, tutorial cara membuat spoiler selesai. Sampai jumpa di artikel tips dan trik Blogger Bugis berikutnya. Salam Blogger......

Tutorial Cara Menghapus Broken Link di Blog

Cara menghapus broken link -Broken link adalah bahasa Bugis , dalam bahasa Indonesia artinya Link Rusak. Broken Link atau link rusak pada blog akan sangat merugikan blog seperti yang telah saya bahas di artikel sebelumnya "Mengatasi Error 404". Karena merokok dapat merugikan kesehatan blog, kita harus segera menghapus broken link yang ada di blog. Dengan menghapus link rusak / broken link akan buat blog maksud saya membuat blog lebih mudah bersaing di hasil pencarian search engine google dan bing bahkan di 50 search engine lainnya.

Cara Menghapus Broken Link

Banyak cara untuk menghapus broken link pada blog. Dari banyak cara tersebut, saya hanya akan share cara terbaik menghapus broken link versi Blogger Bugis. Caranya yaitu dengan menggunakan bantuan brockenlinkchecker dot com.

Dengan bantuannya, kita bisa cek broken link yang ada di blog. Setelah menampilkan link yang rusak, brockenlinkchecker akan menunjukkan lokasi brokenlink tersebut, baik brocken link yang ada template, artikel maupun brocken link yang ada di widget blog. Powerfull...

Dengan demikian, kita tidak perlu repot mencari linknya. Kita bisa langsung menghapus link yang rusak dan masalah broken Link langsung teratasi. Agar anda tidak tambah penasaran, saya langsung saja menunjukkan cara menghapus link rusak di blog :

• Kunjungi "http://www.brokenlinkcheck.com/"
• Masukkan URL blog anda tanpa http:// pada kotak putih lalu klik "Find Broken Links"

Gambar 1 : Cara menghapus broken Link di Blog

• Masukkan security Code pada opsi nomor 2 sesuai dengan kode yang anda lihat di sampingnya lalu klik tombol "Find Broken Links Now".

Gambar 2 : Cara menghapus broken Link di Blog

• Tunggu beberapa saat sampai pencarian Link Rusak yang ada di blog selesai.
• Klik tulisan SRC yang berkedip / blink di sebelah kanan url yang rusak.

Gambar 3 : Cara menghapus broken Link di Blog

• Anda akan melihat lokasi / posisi / tempat atau terserah anda menyebutnya apa Brocken Link yang ada di blog.

Gambar 4 : Cara menghapus broken Link di Blog

• Hapus atau ganti atau perbaiki link yang rusak tersebut.
• Selesai...

Penyebab Broken Link 

Broken Link biasanya karena kesalahan penulisan pada url tujuan link. Penyebab lain Broken Link di blog adalah karena url tujuan link sudah tidak ada, misalnya link menuju ke sebuah artikel tapi artikelnya telah di hapus. Apabila anda menemukan Brocken Link di Blog anda karena penyebab kedua, berarti anda mempunyai masalah lain, yaitu ERROR 404 atau halaman tidak ditemukan. Segera atasi masalahnya dengan trik Blogger Bugis sebelumnya "Mengatasi Error 404" lalu baca juga artikel "Cara menghapus Link dari Indeks Google" yang akan saya jelaskan pada tutorial berikutnya....

Semoga hari anda menyenangkan....
Salam Blogger.......

Cara Terbaik Mengatasi Error 404

Cara Terbaik Mengatasi Error 404 - Page Not Found atau halaman tidak di temukan adalah penyebab ERROR 404. Error ini termasuk salah satu masalah serius pada blog yang harus segera di atasi. Jika anda ingin membuat breadcrumbs lebih cepat terindeks, mengatasi Error 404 adalah prioritas utama. Apabila anda ingin tampil dan bertahan di halaman depan hasil pencarian, ERROR 404 harus segera di atasi.

Penyebab dan cara Mengatasi Error 404

Penyebab utama ERROR 404 ini adalah postingan atau artikel yang telah terindeks oleh google lalu kita hapus dari blog. Ketika seseorang menemukan artikelnya di hasil pencarian, linknya akan menuju ke blog tapi halaman tidak di temukan karena Artikelnya sudah di hapus.

Gambar 1 : Cara Terbaik Mengatasi Error 404 Pada Blog

Link error berikutnya berasal dari artikel lain yang di blog yang telah bemberi link ke halaman artikel yang telah di hapus. Selain itu, bisa saja blogger lain telah membuta link dari blognya menuju ke halaman artikel yang telah terhapus tersebut.

Artinya, ada 1 penyebab utama dan 3 sumber datangnya error 404 pada blog. Penyebabnya adalah Artikel yang telah di hapus, dan sumber datangnya error yaitu:

1. Dari hasil pencarian karena artikel terlanjur terindeks
2. Dari artikel lain yang memberi link ke artikel yang telah di hapus
3. Dari blog lain yang memberi link ke artikel yang telah di hapus

Mengatasi Error 404

Untuk mengatasi sebuah masalah, cara terbaik adalah langsung dari sumbernya, betul ???
Sumber utama datangnya error 404 ada 3, berarti setidaknya diperlukan 3 cara untuk mengatasinya.

1. Sumber error 404 yang pertama harus diatasi dengan menghapus setiap url artikel dari indeks serach engine google dan Bing. Semakin banyak artikel yang telah di hapus dari blog, semakin banyak juga URL terindeks yang harus segera di hapus. Ini adalah cara terbaik yang harus di lakukan agar Blog kembali sehat bugar. Masasalahnya, cara ini butuh waktu paling cepat 3 - 4 hari. Selain itu tutorialnya harus saya bahas di artikel lain agar artikel ini tidak terlalu panjang.
2. Sumber error 404 kedua juga bisa di atasi dengan trik dari Blogger Bugis. Waktu yang di butuhkan untuk mengatasi sumber error kedua ini sedikit lebih cepat dari sumber error pertama. Tutorial selengkapnya akan saya tulis di artikel lain.
3. Sumber Error 404 ke tiga merupakan sumber error yang paling susah karena kita tidak bisa menghapus link di Blog milik orang lain yang mengarah ke artikel blog kita yang telah di hapus. Karena tidak bisa di hapus, cara terbaik adalah dengan mengalihkan tujuan link.

Cara ini terbukti ampuh, cepat, dan praktis bahkan bisa mengatasi sumber error pertama dan kedua. Dengan mengalihkan tujuan link yang artikelnya telah di hapus, maka tidak ada lagi error 404 di blog. Pengunjung juga tidak akan terlalu kecewa karena tidak menemukan artikel yang di cari karena kemungkinan akan menemukan artikel lain yang lebih menarik.

Meskipun demikian, untuk kepertingan Optimasi SEO, sumber error pertama dan kedua tetap harus di atasi dengan caranya masing masing. Sebagai langkah awal, cara ketiga harus segera di lakukan agar tidak ada lagi error 404 pada blog.

Caranya :

Gambar 2 : Cara Terbaik Mengatasi Error 404 Pada Blog

• Masuk ke dasbord blog lalu klik tanda panah hitam kecil mengarah ke bawah yang ada di sebelah kiri tombol "Lihat Blog".
• Pilih "Setting / Setelan"
• Klik "Preferensi Penelusuran"
• Klik Edit pada bagian "Pesan Ubahsuaian untuk Laman Tidak Ditemukan"
• Masukkan kode di bawah ini pada kotak yang tersedia :

<script type="text/JavaScript">
location.replace('http://www.bloggerbugis.com/');
</script>
<a href='http://www.bloggerbugis.com'>Click Disini</a>

• Klik "Simpan Perubahan".
• Selesai.

Jangan lupa mengganti kode yang berwarna merah dengan URL blog anda !!!
3 baris kode pertama akan mengalihkan error 404 ke halaman beranda blog.
Kode baris terakhir akan menjadi link ke halaman utama jika pengunjung tidak mengaktifkan JavaScript browsernya.

Dengan cara ini, maka tidak ada lagi error 404. Semua artikel yang tidak di temukan akan langsung di alihkan ke halaman utama blog.
Semoga Trik mengatasi Error 404 dari Blogger Bugis ini bermanfaat....
Sampai jumpa di artikel trik berikutnya...

Serial Petualangan Tiga Pendekar Kenthir

Tulisan ini hanya iseng nggak ada hubungannya dengan blogging, maksudnya biar kita refreshing dikit lah. Masa mau ngutak-atik blog mulu tiap hari. Lagian saya juga lagi tumpul nggak ada ide mau bikin apa. Tulisan ini juga saya tulis di blog planetkenthir.com blog komunitas saya bersama teman-teman yang tiap hari selalu dipenuhi dengan tawa dan canda, mentertawakan jaman yang sepertinya sudah diatur oleh orang-orang yang mempunyai wewenang, mengekang kita dalam berekspresi membuat manusia yang pada dasarnya lahir sebagai makluk Tuhan yang bebas menjadi dibatasi daya kreativitasnya.

Sudah lama saya sudah meninggalkan mereka untuk kegiatan blogging, mereka adalah keluarga saya di dunia maya. Kenapa mesti dinamakan kenthir? Kenthir lebih banyak untuk menekankan kegilaan daripada kengawuran. Kenapa kita mau dibilang kenthir?? Hemmm, jawabannya sangat sederhana karena hari-hari kita selalu penuh tawa, ditertawakan, mentertawakan, dan membuat ketawa, kadang ada sebagian yang ketawa sendirian……….. hahahahahahaha bukankah itu edan?? Kalau edan dan gendheng yang artinya juga gila, masih bisa diasosiasikan dengan kenekatan atau keberanian, tapi kenthir enggak. Kenthir merupakan perilaku antisosial, atau setidaknya menabrak pakem atau aturan umum yang berlaku. Tapi benarkah kita ini sepenuhnya sehat, “sane” atau waras?

Saya akan buat satu contoh cerita kenthir, cerita ini sangat panjang dan bersambung pula. Bagi yang belum baca seri sebelumnya bisa dibaca disini. Berikut cerita selengkapnya semoga dibaca sampai selesai, jangan seperti anak muda jaman sekarang yang lebih senang melihat gambar atau video daripada membaca. Kalau saya bisa, pasti sudah saya visualisasikan cerita ini lewat gambar atau video.

Setelah sekian lama tertunda, akhirnya sekuel petualangan 3 pendekar kenthir akan saya lanjutkan lagi. Sebenarnya ini karena banyak sekali permintaan dari penggemar yang dikirim lewat surat kaleng krupuk maupun ke PO BOX 012345678910. Pada cerita sebelumnya, pendekar Spiderte sedang bertarung melawan pendekar Andreaneda untuk memperebutkan Princess, terpaksa dihentikan karena princess ngantuk dan penulisnya capek setelah seharian menjadi kuli panggul di pasar. Pertarungan yang sangat sengit dan belum pernah terjadi di dunia persilatan. Selama dua hari dua malam belum ada tanda-tanda siapa yang bakal menjadi pemenang. Kedua pendekar kenthir itu mengerahkan semua jurus andalannya, spiderte dengan jurus andalannya bernafas dalam lendir dan pendekar Andreaneda dengan jurus joroknya menerobos semak-semak.

Pagi-pagi sekali kedua pendekar kenthir sudah berada di halaman kerajaan, mereka telah siap untuk bertarung kembali demi memperebutkan sang putri. Terlihat pendekar Spiderte sedang giat melatih jurus andalannya, sedangkan pendekar Andreaneda hanya duduk-duduk dan sesekali buang air kecil dan kentut. Tiba-tiba pendekar Andreaneda mendatangi spiderte, “Eh… pendekar bau, elu kagak bakal menang dah lawan gua. Mending nyerah aja, balik lagi ke kandang ngurusin kambing tuh udah pada mau beranak.”

Pendekar spiderte menghentikan latihannya, “Mana bisa, jurus jorok nggak mungkin bisa menang lawan jurus lendir gua. Elu yang mesti pulang tuh urusin onta udah pada minta kawin.”

Terjadi adu mulut antara kedua pendekar kenthir, karena merasa tidak bisa mengintimidasi, akhirnya pendekar Andreaneda berjalan kembali ke arah tempat duduknya. Setelah itu dia mengambil handphone beri-berinya, handphone kesayangannya hadiah waktu menang lomba balap kambing (lomba balapan sama kambing). Kemudian dia memencet tombol tett… toottt, tak berapa lama terdengar suara di HP nya, “Halo… ada apa ya, saya lagi sibuk nulis cerita nih.” Ternyata pendekar Andreaneda menghubungi penulis cerita ini.

“Wooii… bro, ini nanti siapa yang menang sih?” tanya pendekar Andreaneda.

“Yee… rahasia dunk. Masa gua kasih tau, ketahuan lu ya kalo ujian suka nyogok sama guru.” Kata penulis.

“Yah bro masa gitu aja kagak mau kasih tau sih? Gua buru-buru nih soalnya onta di rumah udah pada minta kawin. Udah gini aja, menangin gua deh, ntar lu gua kasih satu ekor anak onta.” Pendekar Andreaneda sedikit agak kesal.

“Wah sorry ya gua nggak terima sogokan, tapi kalo elu punya adik, kakak atau tetangga cewek yang cakep, gua pertimbangin dah.” penulis memberikan penawaran.

Pendekar Andreaneda berpikir sejenak, “Wah nggak ada bro, ada juga janda sama nenek-nenek langganan gua tiap malem, Itu juga udah 3 bulan gua belum bayar.”

“Ya udah kalau gitu, mendingan elu berlatih yang tekun dan rajin deh biar menang. Udah ya, gua mau nerusin cerita lagi.” Kata penulis sambil menutup telpon. Sedangkan pendekar Andreneda kesel bukan main,”Somprett…. dasar penulis mata keranjang, kagak mau diajak kerja sama. Awas lu ya kalo gua menang jadi mantu raja, gua blokir akunnya biar nggak bisa nulis lagi disini.”

Tak lama kemudian sang raja Ajinatha bersama princess dan rombongan tiba di pelataran kerajaan. Tak ketinggalan pula hulubalang dongo Mas Mus dan pengawal Andee. Mereka semua bersiap untuk menyaksikan pertarungan terakhir hingga titik lendir penghabisan kedua pendekar sakti memperebutkan princess, putri raja Ajinatha. Penonton juga sudah mulai berdatangan dari seluruh pelosok kerajaan menyaksikan siapa yang bakal jadi mantu kerajaan. Mulai dari bapak-bapak, ibu-ibu, anak-anak, nenek-nenek bahkan kambing dan onta kedua pendekar pun juga datang untuk memberikan support kepada kedua pendekar ini.

Raja Ajinatha kemudian menyuruh kedua pendekar itu untuk segera melanjutkan pertandingan. Kedua pendekar sudah bersiap, pertandingan kali ini dipimpin oleh seorang wasit, kebetulan yang terpilih menjadi wasit adalah dayang Minche. Hal ini dilakukan karena banyak sekali terjadi kecurangan pada pertandingan sebelumnya dan dayang Minche sudah terbiasa memimpin pertandingan catur antar dayang di kerajaan. Genderang pun ditabuh, kedua pendekar tersebut masuk ke dalam arena. Mereka beradu pandang kemudian saling cium.. eh saling meledek. Pertandinganun dimulai, pendekar Spiderte sangat bernafsu memenangkan pertandingan ini, belum apa-apa dia sudah berjongkok sambil nungging mengeluarkan jurus andalannya bernafas dalam lendir.

“Pendekar jorok rasakan jurus andalanku ini…” Sambill nungging pendekar Spiderte maju ke depan menyerang pendekar Andreaneda dengan pedang. Untung pendekar Andreaneda segera menghindar. Dia kemudian membalas dengan menusukkan pedangnya kearah lawan, dan berhasil masuk kedalam selangkangan pendekar Spiderte. Kemudian berusaha menusukan pedangnya ke arah biji Spiderte (kelemahan Spiderte terletak pada bijinya). Terdengar suara “Tiingg…” ternyata pendekar Spiderte memakai sempak baja, gagal usaha pertama pendekar Andreaneda kali ini.

Pertarungan berlangsung cukup alot dan seimbang. Sorak sorai penonton semakin menambah seru pertarungan. Tanpa terasa sudah 10 jam pertarungan itu berlangsung, Princess bosan juga melihatnya tanpa ada kepastian siapa yang bakal menang, kemudian dia berkata kepada ayahnya, “Ayahanda, saya bosan ingin jalan-jalan dulu cari angin, siapa tau nanti setelah saya pulang pemenangnya sudah ada.” Raja lalu memanggil hulubalang Mas Mus memerintahkan untuk menjaga princess. “Nggak usah dikawal ayahanda, saya mau jalan-jalan sendiri, saya hanya mau ke taman istana.“ Princess menjelaskan kepada ayahnya.

Singkat cerita princess sudah berada di taman istana melihat keindahan bunga-bunga sambil sesekali berdendang. Tidak ada satu orangpun di taman selain Princess, karena semua abdi kerajaan sedang menyaksikan sayembara pertarungan final dua pendekar sakti. Tanpa disadari, sejak keluar dari arena pertarungan, princess sudah diikuti oleh pendekar kolor ijo alias Geboy. Kali ini dia tidak sendiri, pendekar kolor ijo membawa kedua temannya yaitu pendekar sarap Wepe dan satu lagi bekas hulubalang istana Herry. Herry dulunya adalah seorang hulubalang raja, tetapi karena dia membocorkan rahasia raja akhirnya dia dipecat sebagai hulubalang. Kesalahan hulubalang Herry waktu itu adalah dia mengatakan ke seluruh pejabat istana bahwa raja Ajinatha memakai rambut palsu (Pak Aji nggak boleh marah, kalo marah gede sebelah… hahahaha), padahal itu sangat rahasia buat raja dan akhirnya diapun dipecat. Hulubalang Herry merasa sakit hati kemudian dia bergabung dengan pendekar kolor ijo untuk menculik princess.

Princess kaget melihat disitu ternyata sudah ada tiga orang, satu diantaranya adalah pendekar kolor ijo yang dulu pernah menculiknya. “Hahahahahaha…. mau lari kemana kau, manis? Sekarang nggak ada yang bisa menolongmu,” pendekar kolor ijo berkata sambil menyeringai. Mereka berdua akhirnya menangkap Princess dan membawa lari keluar istana dengan menunggang kuda. Belom jauh mereka membawa Princess, di tengah jalan dihadang seorang pendekar yang sangat rupawan, ya pendekar itu adalah pendekar Maskolis menghadang ketiga orang yang membawa princess dengan pedang di tangan. Pendekar Maskolis adalah satu diantara 3 pendekar kenthir, seorang pendekar yang tampan, manis, berwibawa, baik hati, gagah perkasa, suka menolong… apa lagi ya? Pokoknya yang baik-baik semua ada di dia.

“Dasar pendekar sesat, belom kapok juga menculik princess he?” Pendekar Maskolis langsung menyerang ketiga penculik Princess. Terjadilah pertarungan 3 lawan satu, pertarungan yang tidak seimbang, biasanya yang satu orang pasti kalah, tapi karena pendekar Maskolis sangat sakti banget ketiga penculik princess dapat dikalahkan. Ketiga penculik princess kabur lari tunggang langgang, akhirnya Princess dibawa kembali ke istana. Begitu sampai di istana princess menceritakan kejadian tentang penculikan yang baru saja menimpa dirinya kepada raja. Princess meminta raja menghentikan sayembara, dia lebih memilih pendekar Maskolis untuk mendampingi hidupnya daripada kedua pendekar yang sedang bertarung tak kunjung selesai itu. Raja kemudian memerintahkan hulubalang Mas Mus untuk menghentikan sayembara. Hulubalang Mas Mus segera melaksanakan perintah raja, belum jauh keluar istana hulubalang Mas Mus yang terkenal dengan penyakit pelupa akutnya, bukannya menghentikan sayembara tapi malah langsung menuju ke kamar terus tidur mendengkur sampai pagi.

Walaupun princess sudah mendapatkan jodoh, tapi bertarungan antara pendekar spiderte melawan pendekar Andreaneda masih berlangsung. Saking asyiknya bertarung mereka berdua tidak sadar bahwa sudah tidak ada lagi penonton dan aparat kerajaan yang menyaksikan pertarungan mereka. Yang ada hanya mereka berdua dan dayang Minche yang dari tadi masih setia menjadi wasit. Karena kesal dengan kedongoan kedua pendekar ini, penulis turun tangan, “Wooii… kalian berdua ngapain sih, tuh princess udah dapet jodoh kenapa masih bertarung juga?” tanya penulis. Mereka berdua menghentikan pertarungan, baru sadar kalau arena pertandingan kosong tidak ada siapapun. Kemudian pendekar Spiderte berkata, “Lah… pada kemane nih orang-orang, kita kan belom selesai berantemnya koq udah bubar semua?”

“Orang-orang udah pada pergi, princess udah dapet jodoh. Udah kalian berdua pulang aja ditungguin emak tuh.” Jawab penulis.

“Lha trus sayembaranya gimana, katanya yang menang jadi mantu raja?” pendekar Andreaneda juga bingung.

“Makanya kalo mau berantem jangan lama-lama hadiahnya keburu diambil sama orang lain, lagian kalian nggak ada yang mau ngalah. Mestinya yang tua ngalah kasih kesempatan yang muda, jadinya kan nggak kek gini.” Jawab penulis lagi.

“ Terus ini gimana, mau dilanjut kagak ne..??” mereka berdua serempak bertanya.

“Meneketehe, tuh kalo mau lanjut hadiahnya dayang Minche aja, mauuu…??” sambil jawab begitu penulis langsung ngacir lari secepat kuda Arab.

“Somprett….. dasar penulis stresss. Kalo bikin cerita yang bener dunk..!!!” pendekar Andreaneda menjawab kesal.

Itu tadi cerita hiburan dari planet kenthir lebih asyik kalau baca cerita sebelumnya, semoga terhibur dan mohon maaf kalau pertanyaan yang masuk ke kotak komentar belum bisa saya balas, mau libur dulu sampai hari minggu.

Tutorial Cara Membuat Breadcrumbs Langsung Terindeks

Di artikel sebelumnya, saya sudah menulis tutorial cara membuat menu navigasi breadcrums di blog. Bagi anda yang membaca artikel ini tapi masih belum tahu tentang menu Navigasi Breadcrumbs, silahkan klik "Cara Membuat Breadcrumbs di Blog" untuk membaca penjelasan lengkap tentang breadcrumbs.

Membuat breadcrumbs di blog dengan mengikuti tutorial pada artikel tersebut, akan membuat breadcrumbs lama terindeks oleh mesin pencari terutama google. Biasanya hanya blog dengan PR minimal 3 yang akan breadcrumbsnya terindeks oleh google. Karena itu, saya akan memberikan tutorial gratis bagaimana agar breadcrumbs cepat terindex bahkan langsung terindeks.

Anda tidak perlu memiliki PR minimal 3 atau ratusan artikel. Anda hanya perlu memasang kode breadcrumbs pada template blog dan silahkan langsung buktikan hasilnya setelah membuat artikel baru atau memeriksa hasil serp artikel anda yang telah terindeks mesin pencari.

Gambar 1 : Cara Membuat Breadcrums Terindeks

Cara Membuat Breadcrumbs Terindeks

Untuk membuat menu navigasi breadcrumbs terindeks, anda cukup menggunakan kode breadcrumbs yang telah di edit. Berikut tutorial dan kode breadcrumbs terindeks :

• Apabila anda telah membuat breadcrumbs biasa dengan mengikuti tutorial di blogger Bugis, klik "Cara Membuat Breadcrumbs". Jika anda telah membuat breadcrumbs dengan mengikuti tutorial dari blogger  lain, cara memasangnya biasanya sama.
• Masuk ke halaman kode template anda. Jika belum tahu caranya, klik "Cara Mengedit Template"
• Hapus semua kode yang di pasang pada template di artikel tersebut lalu simpan template anda.
• Cari kode  <b:includable id='main' var='top'>
• Hapus kode tersebut dan ganti dengan kode berikut :

<b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == &quot;true&quot;'>
     &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </b:if>
    </b:loop>
     &#187; <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
    </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
<b:includable id='main' var='top'>
    <b:include data='posts' name='breadcrumb'/> 

Selanjutnya.........

• Cari kode ]]></b:skin> 
• Letakkan kode CSS breadcrumbs terindeks berikut ini di atas kode tersebut :

.breadcrumbs{padding:8px 5px 5px 0;margin:10px 0 0px;font:normal 11px georgia; border-bottom:1px dashed #ccc;font-weight:normal}

• Simpan Template anda
• Selesai...

Anda mungkin akan lebih yakin dengan breadcrums yang cepat terindeks jika melihat gambar. Karena itu saya sertakan gambar screenshoot hasil serp artikel ini yang saya ambil beberapa menit setelah artikel ini saya posting lalu saya edit kembali untuk memasukkan gambarnya :

Gambar 2 : Cara Membuat Breadcrums Terindeks

Dengan membuat breadcrumbs cepat terindex, setidaknya salah satu optimasi seo blogspot telah di lakukan. Semoga setelah memasang breadcrumbs yang cepat terindeks oleh google ini akan membuat blog anda lebih cepat tampil di halaman depan hasil pencarian sehingga trafik pengunjung akan lebih banyak dari biasanya. Amien...

Semoga bermanfaat...
Have a nice day..

Trik Mudah Cara Membuat Daftar isi blog

Cara Membuat daftar Isi Blog - Beberapa artikel terakhir yang saya posting di blog seperti Cara Memasang Tracking ID kode Google analystics di blog dan artikel sebelumnya berhubungan dengan SEO. Agar tidak terlalu banyak di pusingkan dengan Optimasi SEO saya akan selingi artikel SEO di BB dengan artikel tentang cara menghias dan mempercantik blog.

Widget daftar isi blog otomatis.

Saya memilih menulis artikel tentang widget daftar isi blog sebagai selingan artikel SEO Blogger Bugis. Alasannya, karena Widget Daftar isi Blog akan membuat pengunjung lebih mudah mencari artikel di dalam blog.Tampilannya yang menarik tidak akan membuat pengunjung bosan berlama lama nongkrong di blog.

Selain itu, Cara Membuat Daftar isi blog yang akan saya share di artikel ini akan bekerja secara otomatis tanpa perlu memasukkan link artikel satu persatu ke dalammya. Yang membuatnya lebih menarik, gadget Daftar Isi Blog ini di lengkapi dengan menu drop down untuk memudahkan pengunjung memilih jenis artikel yang akan di tampilkan oleh daftar isi blog keren ini.

Pengunjung bisa memilih melihat daftar isi Blog berdasarkan tanggal posting, dan bisa juga berdasarkan label artikel. Saya juga menambahkan Kotak dengan Fungsi Scroll agar widgetnya tidak terlalu panjang ke bawah jika settingan widget memuat ratusan artikel sehingga membuat widget ini lebih menarik. Untuk melengkapi tampilannya, saya juga menambahkan efek shadow inset atau efek bayangan ke dalam box widget, artinya, anda bisa menyebut widget ini dengan "Widget daftar isi blog otomatis dengan scroll efek shadow"

Agar anda lebih tertarik untuk memasang widget daftar isi Blog otomatis ini di blog anda, silahkan lihat gambar di bawah ini :

Tidak puas dengan gambar ?
Klik tombol spoiler di bawah ini untuk melihat Live Demonya :

Masih loading bro... sabar ya...

Widget by Blogger Bugis

Untuk membuat daftar isi blog otomatis seperti di atas, kode yang digunakan adalah sebagai berikut :

<div style="background: #f2f2f2; width: 320px; color: #000; float: center; font: normal 13px verdana; height: 350px; margin: 10px auto; overflow: auto; padding: 10px; text-align: left; text-shadow: 1px 1px 2px #fff; border:4px double #ccc; -moz-box-shadow: inset 2px 2px 2px #404040; -webkit-box-shadow: inset 2px 2px 2px #404040;box-shadow: inset 2px 2px 2px #404040">
<div id="cl_option">
Masih loading bro... sabar ya... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan =200;
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugisdotkom/javascript/Dafatar_isi_Biasa_Bloggerbugis.js">
</script>
<script type="text/javascript" src="http://www.bloggerbugis.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">
</script>
<div style="float:right;font:normal 10px verdana; color:#ccc;text-align:right;padding:5px 0px;text-shadow:1px 1px 1px #000">
Widget by <a href="http://www.bloggerbugis.com">Blogger Bugis</a></div>
</div>

Kode di atas bisa di edit untuk menyesuaikan tampilannya dengan tema blog anda.
Perhatikan kode yang berwarna merah !!!

• f2f2f2 adalah kode warna background ( Warna Latar Belakang ) yaitu Abu - Abu. Ganti kode tersebut dengan kode warna yang anda inginkan untuk mengganti warna background widget Daftar Isi Otomatis.Untuk melihat kode warna HTML, silahkan klik "Daftar Kode Warna HTML".
• 320px adalah Kode lebar widget. Ganti dengan angka yang lebih besar untuk membuat widgetnya lebih lebar atau ganti dengan angka yang lebih kecil untuk membuat widgetnya lebih sempit. Misalnya 300px atau 350px.
• 000 adalah kode warna tulisan yaitu hitam. Silahkan ganti dengan warna yang anda inginkan. Adapun warna Link yang ada di dalam widget, tergantung dari pengaturan CSS template anda.
• 4px double adalah kode ketebalan garis pinggir widget, yaitu garis pinggir ganda ( double ) dengan ketebalan 4 piksel ( 4px ) . Ganti dengan angka 4 yang lebih besar atau lebih kecil. untuk membuat hanya 1 garis pinggir, ganti double dengan solid, untuk membuat garis pinggir putus - putus, ganti dengan dashed
• ccc adalah kode warna garis pinggir, ganti dengan kode warna yang anda inginkan.
• Masih loading bro... Sabar ya.... adalah kalimat yang di tampilkan jika widgetnya belum terbuka karena halaman masih loading. Silahkan ganti dengan kalimat yang anda inginkan.
• 500 adalah jumlah maksimal judul artikel yang akan di tampilkan di dalam widget daftar isi otomatis. Ganti dengan angka yang lebih besar atau lebih kecil. Pada live demo yang anda lihat di atas, saya hanya menggunakan 15.
• Yang terakhir dan paling penting adalah kode http://www.bloggerbugis.com. Ganti kode tersebut dengan URL / Alamat blog anda

Dengan mengedit semua kode di atas, anda akan memiliki daftar isi blog yang sesuai dengan tema warna blog anda. Silahkan pasang widgetnya pada sidebar blog atau laman atau halaman artikel blog anda, jika belum tahu caranya, simak tutorialnya berikut ini :

Cara Memasang Widget Daftar Isi Blog Otomatis

Ada 2 cara yang bisa di lakukan untuk memasang widget daftar isi tersebut di dalam blog. Yang pertama adalah memasang daftar isi blog otomatisnya pada sidebar blog, dan yang kedua memasang daftar isi otomatis tersebut pada halaman artikel atau laman blog. Berikut masing masing panduan cara memasang daftar isi blog otomatis :

1. Pasang Daftar Isi Blog Otomatis di Laman atau Halaman Artikel

Untuk memasang daftar isi otomatis pada Laman Baru atau Halaman Posting ( artikel ), silahkan masuk ke Post Editor blogspot sama seperti jika ingin membuat artikel. Pada halaman Post Editor, pilih mode HTML lalau paste kode Daftar Isi Blog Otomatis.

Untuk membuat widgetnya berada di tengah halaman, tambahkan kode <center> sebelum kode Daftar Isi lalau tambahkan kode </center> di bawah kode daftar isi sehingga kodenya akan terlihat seperti ini :

<center>

Kode Daftar Isi Blog Otomatis

</center>

Setelah selesai, jangan lupa publish / terbitkan seperti artikel biasa.

2. Pasang Daftar Isi Blog Otomatis Pada Sidebar Blog 

Untu memasang daftar Isi Blog Otomatis pada sidebar blog, silahkan masuk ke halaman TATA LETAK >>> Klik Tambah Gadeget >>> Pilih HTML/JavaScript >>> Copy Paste kode Daftar Isi ke kotak HTML/JavaScript >>> Klik Simpan.

Penjelasan lengkap tentang cara memasukkan widget daftar isi Blog pada sidebar blog, klik "Cara Menambahkan Widget di Blog" untuk membaca tutorialnya yang di lengkapi dengan gambar

Semoga artikel Blogger Bugis tentang Cara Membuat Daftar Isi blog ini bermanfaat. Jika anda kurang suka dengan widget ini, saya akan membuat artikel lagi tentang widget daftar isi di blog dengan tampilan berbeda

Happy Blogging.......