Showing posts with label Trik Blogger. Show all posts
Showing posts with label Trik Blogger. Show all posts

Saturday, April 9, 2011

Beberapa Hal Yang Perlu Dilakukan Setelah Membuat Blog di Blogspot

Setelah membuat sebuah blog, kita sudah bisa langsung menulis artikel lalu mempublikasikannya. Tapi sebelum itu, sebaiknya Blog yang baru di bikin dipersiapkan terlebih dahulu. Jika diumpakan dalam dunia nyata, Blog adalah sebuah rumah. Sebelum menempati dan memasukkan prabot RT kedalamnya, sebaiknya cat dulu bagian dalam rumah. Setelah bagian dalamnya dicat, kita sudah bisa memasukkan prabot sambil menegecat bagian luarnya.Demikian juga halnya dengan sebuah blog. Sebelum menerbitkan / memposting artikel di  blog, sebaiknya persipkan blog anda terlebih dahulu.

Pada dasarnya ada dua macam tujuan orang membuat blog.
Yang pertama...
Membuat sebuah blog lalu menulis artikel untuk dibaca sendiri atau untuk digunakan di kemudian hari. Misalnya, seorang mahasiswa menulis persiapan bahan skripsinya pada blog agar bahan skripsinya tidak hilang dan bisa diambil kapanpun dan dimanapun, yang penting ada koneksi internet.
Yang kedua....
Membuat sebuah blog lalu menulis artikel untuk di baca oleh orang lain.
Misalnya, saya menulis artikel tutorial blog agar dibaca dan bermanfaat bagi orang lain.

Jika anda membuat sebuat blog dengan tujuan yang PERTAMA, blog anda tidak perlu dipersiapkan terlebih dahulu. Soalnya, yang melihat blog dan membaca artikelnya anda sendiri. Yang anda butuhkan hanya isi / artikel blog, bukan keseluruhan blog anda. Tapi.... Jika anda membuat sebuah blog dengan tujuan KEDUA, sebaiknya persiapkan dulu blog sebelum mengisinya dengan artikel anda. Blog anda nantinya akan dilihat oleh orang lain. Dengan membuat blog jadi lebih menarik, artikelnya bermanfaat, dengan banyak fasilitas pendukung blog, maka blog akan ramai dikunjungi oleh orang lain.

Berikut ini beberapa hal yang sebaiknya dilakukan setelah membuat sebuah blog.

  • EDIT PENGATURAN BLOG
Pengaturan blog bisa anda jumpai pada Menu "PENGATURAN". Anda akan melihat beberapa Sub Menu Pengaturan yang terdiri dari DASAR, PUBLIKASIKAN, FORMAT, KOMENTAR, ARSIPKAN, FEED SITUS, E MAIL & SELULER, OPEN ID, dan IZIN. Mari kita bahas satu persatu.

1. DASAR
Tentukan judul blog anda. Judul blog ini sebaiknya berhubungan dengan artikel yang akan dibuat pada blog.
Isi kotak uraian dengan deskripsi / penjelasan singkat tentang isi / artikel blog.

2. PUBLIKASIKAN.
Tentukan URL Blog anda. URL adalah alamat sebuat blog. Buatlah URL yang singkat dan mudah di ingat oelh orang lain dan sebaiknya kata yang digunakan berhubungan dengan artikel yang akan di tulis pada blog.

3. KOMENTAR
Atur supaya setiap orang bisa memberi komentar ( Termasuk pengguna anonim )
Ganti moderasi komentar menjadi selalu untuk melihat setiap ada komentar sebelum mempublikasikannya. Tujuannya agar kita bisa langsung menghapus komentar spam dan melakukan komentar balik kepada blog orang yang memberi komentar.

Pengaturan lainnya silahkan ubah sesuai keinginan anda.

  • PILIH TEMPLATE
Template adalah model atau bentuk blog. Sebaiknya tentukan template yang ingin anda gunakan sebelum mulai blogging. Terlalu sering mengganti template Blog, bisa berpengaruh buruk bagi SEO blog.
Saran :
Gunakan template gratisan yang memiliki lebih banyak kelebihan dibandingkan template standar bawaan blogspot. Untuk melihat dan mengambil template gratisan tersebut anda bisa cari di http://blogtemplate4u.com/ . Untuk mengganti template blog anda silahkan baca tutorialnya DISINI

  • BUAT BLOG ANDA MENJADI BLOG DOFOLLOW
Penjelasan tentang Blog DOFOLLOW dan cara mengubah blog NoFollow menjadi DoFollow bisa anda baca tutorialnya DISINI


  • DAFTARKAN BLOG ANDA PADA SEARCH ENGINE / MESIN PENCARI
Segera daftarkan blog anda pada beberapa mesin pencari agar blog anda bisa terindex saat seseorang melakukan pencarian si Search Engine. Silahkan baca tutorial cara mendaftarkan blog  DISINI

  • BERTEMAN DENGAN BLOGGER LAIN
Ajak blogger lain berteman dengan anda dengan BERTUKAR LINK lalu saling mengunjungi blog satu sama lain. Jika ingin BERTUKAR LINK, anda harus mengetahui cara membuat LINK. Silahkan baca tutorial cara membuat link DISINI dan cara menyimpan link blog blogger lain DISINI
Beberapa hal di atas hanya sebagai dasar saat masih baru membuat Blog. Hal - hal lain yang mungkin dibutuhkan bisa anda lakukan sambil membuat artikel / blogging.

Sekian dulu sob, semoga bermanfaat.
Apabila ada yang kurang jelas, silahkan tanyakan di kotak komentar di bawah postingan ini.
Salam Blogger.................



Incoming search :
Setelah membuat blog, hal - hal yang dilakukan setelah membuat blog, mulai blogging, sebelum menulis artikel pada blog, pengaturan blog, cara mengatur blog

Tuesday, April 5, 2011

Cara Mendaftarkan / Submit Blog Blogspot ke 43 Blog Direktori

SEO.....
Banyak cara yang bisa dilakukan untuk mengoptimalkan SEO BLOG. Tujuannya tidak lain agar Blog Tampil di halaman Pertama Mesin Pencari / Search Engine. Dengan tampilnya blog di halaman pertama search engine, traffic / pengunjung blog juga akan semakin banyak. Percuma kan kalau punya blog tapi tidak punya pengunjung ??? hehe...

Untuk itu, segera daftarkan Blog anda pada beberapa Blog Direktori untuk meningkatkan Traffic Blog anda. Konon kabarnya, salah satu cara agar blog bisa tampil pada halaman pertama Mesin Pencari ( Search Engine ) adalah dengan mendaftarkan blog ke beberapa Blog Direktori yang ada di internet tentunya hehe... ( masa' di hutan ).

Berikut ini Daftar beberapa Blog Direktori tempat submite blog. Silahkan daftarkan blog anda ke masing-masing Blog Direktori agar Blog anda menjadi lebih Search Engine Friendly.  GRATISS !!!

http://www.5starblogs.com/
http://www.aveblogs.com/
http://blogroll.net/
http://blogvillage.gotop100.com/
http://www.blogelites.com/
http://www.blogcatalog.com/
http://www.blogarama.com/
http://www.blogion.com/
http://www.bloggeries.com/
http://www.bloghop.com/
http://www.bloggingfusion.com/
http://www.blog-search.com/
http://www.blogpoint.com/
http://www.blogs-collection.com/
http://www.blogtoplist.com/
http://www.blogoriffic.com/
http://dir.blogflux.com/
http://www.blog-search.com/
http://www.bloghub.com/
http://www.bloggernity.com/
http://www.bloggernow.com/
http://www.blogtree.com/
http://www.bloggertalk.net/
http://www.bloggapedia.com/
http://www.blogshowoff.com/
http://www.eblogzilla.com/
http://www.fuelmyblog.com/
http://www.goblogz.com/
http://www.globeofblogs.com/
http://www.getblogs.com/
http://tracker.icerocket.com/
http://www.lsblogs.com/
http://www.myblog2u.com/
http://www.myblogdirectory.net/
http://www.mybloggingarea.com/
http://www.topbloglists.com/
http://technorati.com/
http://www.topblogarea.com/
http://www.topblogging.com/
http://www.search4blogs.com/
http://www.sgblog.com/
http://www.worldtopblogs.com/
http://www.weblog-index.com/

Saya tidak bisa menulis cara / tutorial mendaftar ke masing - masing Blog Direktori.  Soalnya Butuh waktu yang lama ( bahkan sangat lama hehe... ). 
Biasanya caranya kurang lebih sama seperti yang lain.
Hanya mendaftar menggunakan E Mail dan membuat Username dan Password.
Selanjutnya periksa Inbox E mail yang digunakan mendaftar.
Biasanya ada E Mail dari blog direktori. Buka E Mailnya lalu klik tautan didalamya untuk melengkapi proses pendaftaran.
Selanjutnya LOG IN dengan Username dan Password yang digunakan saat mendaftar lalu cari tombol untuk memasukkan nama blog, misalnya "ADD BLOG" atau semacamnya.

Oke sob, semoga bermanfaat.
Selamat mendaftar......

Monday, April 4, 2011

Cara Membuat Recent Comment / Komentar Terakhir Pada Blog Blogspot

Terlalu banyak ruang kosong di sidebar blog ??? Tambahkan saja WIDGET RECENT COMMENT. Widget Recent Comment adalah widget yang menampilkan komentar terakhir pada postingan blog. Adapun jumlah komentar yang ditampilkan bisa diatur sesuai keinginan kita.Masalahnya, terlalu banyak widget bisa membuat sebuah blog menjadi berat di load. Tapi kalau widgetnya bermanfaat, tentu saja keputusan terakhir ada pada Author Blog. hehe....

Saya sendiri menganggap sebuah widget yang menampilkan link ke artikel bisa sedikit berpengaruh terhadap SEO blog. Beberapa widget tersebut seperti MENU TAB VIEW yang menampilkan daftar isi Blog, Widget Recent Post yang menampilkan postingan terakhir, DAFTAR ISI OTOMATIS yang menampilkan daftar isi Blog secara otomatis, dan masih banyak yang lain termasuk WIDGET RECENT COMMENT.

Hal ini saya buktikan dengan memasang banyak widget pada Sidebar Blog BLOGGERBUGIS yang menampilkan link ke beberapa artikel BB. Template BB sendiri ( saat riset tersebut saya lakukan tidak tahu sekarang hehe...) hanya menggunakan META TAG biasa dan hanya terdaftar di beberapa mesin pencari (SE). Alhasil, beberapa Artikel BB saat itu tampil pada halaman pertama Dg. Gugel bahkan beberapa diantaranya menempati posisi pertama dan kedua di halaman pertama. hehe.....

Oce sob, jika anda ingin membuat Widget Recent Comment pada sidebar Blog anda, berikut tutorialnya :
OIA, Widget Recent Comment ini juga dilengkapi dengan BULLETS untuk mrmbuatnya lebih menarik. ( Tergantung Template Blog anda )

Untuk menambahkan Widget Recent Comment ini, anda cukup memasukkan kode berikut pada kotak HTML/JavaScript Blog anda. Jika anda belum mengetahui cara menambahkan widget sebaiknya baca dulu 1. CARA MENMBAHKAN WIDGET  pada artikel INI

Berikut Kodenya :

<script style="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/RecentComments4U.js"></script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<ul>
<script src="http://blogger-bugis.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>


Keterangan:

  • Ganti angka pada kode var numcomments = 5; untuk menampilkan lebih banyak atau lebih sedikit komentar terakhir yang ditampilkan WIDGET RECENT COMMENT.
  • Ganti kode http://blogger-bugis.blogspot.com dengan URL blog anda.


Semakin banyak Komentar Terakhir yang di tampilkan semakin baik bagi SEO BLOG. Masalahnya, widget akan menjadi terlalu panjang hingga merusak pemandangan pada sidebar blog. Untuk mengatasinya, tambahkan kotak dengan fungsi scroll pada Widget Recent Comment.Caranya :

Tambahkan kode berikut sebelum kode Recent Comment :

<div style="overflow:auto;width:358%px;height:300px;border:1px solid #0000000;padding:4px;margin:10px 0 0">

Lalu tambahkan kode berikut di akhir kode Recent Comment :

</div>

Jika anda ingin menambahkan bingkai seperti punya BLOGGERBUGIS,
langsung saja gunakan kode dibawah ini. Berikut kodenya :

<center><table border="2" cellpadding="3"><tbody><tr><td><div style="overflow:auto;width:358px;height:300px;border:1px solid #0000000;padding:4px;margin:10px 0 0"><script style="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/RecentComments4U.js"></script>
<script style="text/javascript">
var numcomments = 100;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<ul>
<script src="http://blogger-bugis.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul></div></td></tr></tbody></table></center>
<div style="font-size:11px; padding:4px 0px 0px 0px"><a
href="http://blogger-bugis.blogspot.com/2011/04/cara-membuat-recent-comment-komentar.html" target="_blank"> BloggerBugis</a></div>

Keterangan :
  •  Ganti angka pada kode width:358px untuk menyesuaikannya dengan lebar sidebar blog anda dan ganti angka pada kode height:300px untuk menyesuaikan widgetnya dengan tinggi kotak widget yang anda inginkan.
  • border:1px solid #0000000 artinya garis pinggir kotak widget setebal 1 pixel dengan warna hitam. Ganti angkanya menjadi lebih besar jika anda ingin membuat garis pinggir kotaknya menjadi lebih tebal dan ganti kode #0000000 dengan kode warna anda jika ingin menggunakan warna yg lain pada garis pinggir kotaknya. Untuk melihat kode warna, anda bisa lihat DISINI.
  • Ganti kode http://blogger-bugis.blogspot.com dengan URL Blog anda

Semoga bermanfaat. Salam Blogger.....

Thursday, March 31, 2011

Cara Memasukkan Daftar isi Blog Pada Menu Tab View blog Blogspot

Dari hasil survey yang saya lakukan sendiri, masih banyak sobat blogger yang kurang mengerti cara memasukkan daftar isi kedalam Menu Tab View dengan mengetikkan kata kunci CARA MEMASUKKAN DAFTAR ISI KE MENU BLOGSPOT. Jika anda termasuk salah satu dari sobat blogger blogspot yang sedang mencari tutorial cara mengedit dan memasukkan daftar isi blog pada menu tab view, berarti anda sedang membaca artikel yang anda cari hehe...

Pada artikel yang saya posting sebelumnya tentang cara membuat Menu Tab View Pada sidebar blog blogspot yaitu pada artikel INI, saya menuliskan kode seperti dibawah ini :

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
<ul>
<li>
DAFTAR ISI MENU 1.1
</li>


<li>
DAFTAR ISI MENU 1.2
</li>


<li>
DAFTAR ISI MENU 1.3 dst
</li>




</ul>
</div></div>

Untuk memasukkan Daftar isi blog ke dalam menu tab view, kode yang terlihat seperti gambar diatas yang harus diubah. Simak cara membingungkannya berikut ini :

Buka Artikel yang akan anda masukkan judulnya kedalam daftar isi Menu Tab View pada tab baru lalu Copy URLnya.
 
Buka kotak HTML/JavaScript Menu Tab View anda dengan mengklik EDIT jika anda mengubahnya dari halaman RANCANGAN.

atau anda juga bisa mengklik gambar TANG dan OBENG jika anda ingin mengeditnya langsung melalui blog anda.

Ganti tulisan DAFTAR ISI MENU 1.1 ( Kode yang berwarna merah ) pada contoh diatas dengan judul artikel blog anda. 


Selanjutnya HIGHLIGHT kalimat judul blog anda seperti gambar disamping tulisan ini.

Klik Gambar Buat link yang terlihat pada gambar di samping tulisan ini :

Saat muncul jendela baru untuk memasukkan URL, hapus tulisan http:// lalu paste URL artikel anda yang telah anda copy sebelumnya pada langkan pertama lalu klik OK.

Judul blog yang anda highlight sebelumnya akan berubah menjadi  seperti contoh dibawah ini :

Sebelum diberi link :

<li>
Cara Membuat Daftar Isi Blog dengan menggunakan Menu Tab VIew ( misalnya )
<li>

Setelah diberi link :
<li>
<a href="http://blogger-bugis.blogspot.com/2011/03/cara-membuat-daftar-isi-blog-dengan.html">Cara Membuat Daftar Isi Blog dengan menggunakan Menu Tab VIew</a>
</li>

Klik simpan pada kotak HTML/JavaScript Menu Tab View anda.


Untuk memasukkan daftar isi yang lain, lakukan hal yang sama pada kode DAFTAR ISI MENU 1.2 , 1.3, dan seterusnya.

Selesai.



Silahkan coba klik judul blog anda yang anda masukkan dalam Menu Tab View.
Jika anda ingin membuat linknya terbuka pada tab baru browser saat judul artikel dalam Menu Tab View di klik, silahkan baca panduan Complatenya di artikel INI

OK sob, semoga gampang dipahami. Kalau ada kelebihan mohon dimaafkan, kalau ada kekurangan sampaikan di kotak komentar......
Semoga hari anda menyenangkan dan Happy Blogging....

Cara Praktis Membuat Recent Post dengan Gambar Thumbnail pada Blog

Dengan adanya WIDGET RECENT POST atau POSTINGAN TERAKHIR pada sidebar blog, pengunjung akan dengan mudah untuk melihat artikel terbaru yang kita terbitkan pada blog.

Dengan membuka artikel ini, mungkin anda ingin membuat WIDGET tersebut pada sidebar Blog anda. Karena itu saya akan share TUTORIAL CARA MEMBUAT RECENT POST DENGAN GAMBAR THUMBNAIL atau POSTINGAN TERAKHIR pada sidebar blog blogspot kepada anda yang hasilnya kurang lebih seperti gambar disamping tulisan ini.
Demi SEO, saya harus sedikit basa basi terlebih dahulu untuk mencukupi jumlah karakter minimal agar artikel ini SEO FRIENDLY hehe....
Widget Recent Post ini  sedikit bergaya dibandingkan dengan Recent Post standard bawaan Daeng Gugel. Selain menampilkan beberapa Judul Artikel Terakhir yang diposting sesuai keinginan, Widget RECENT POST DENGAN THUMNBAIL ini juga menampilkan gambar di samping Judul Artikel. Menarik bukan ???
Gambar yang ditampilkan adalah gambar yang ada di dalam artikel yang diposting. Jika Postingan atau Artikel tidak memiliki gambar, maka Recent Post dengan Gambar Thumbnail ini akan menampilkan gambar default yang kita inginkan / tentukan. Selain itu, kita juga bisa mengatur ukurannya agar sesuai dengan lebar sidebar blog dan mengatur banyaknya postingan terakhir yang akan ditampilkan.

Untuk membuatnya, caranya sangat mudah. Hanya dengan menambahkan element baru pada sidebar lalu memasukkan kode berikut pada kotak HTML/JavaScript elemen Laman.
Jika anda belum tahu cara menambahkan widget pada blog, silahkan baca tutorialnya pada artikel INI ( Bagian A. Menmbahkan Wideget ).

Silahkan gunakan kode di bawah ini dengan mengCOPY PASTE pada kotak HTML/JavaScript anda.

Berikut kodenya :

<table border="2" cellpadding="3"><tbody><tr><td><script language="JavaScript">
imgr = new Array();
imgr[0] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";
imgr[1] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";
imgr[2] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";
imgr[3] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";
imgr[4] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";

showRandomImg = true;
boxwidth = 356;
cellspacing = 8;
borderColor = "#f2f2f2";
bgTD = "#ffffff";

thumbwidth = 40;
thumbheight = 40;


fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";

icon2 = " ";
numposts = 5;
home_page = "http://blogger-bugis.blogspot.com/";
</script>
<script src="https://sites.google.com/site/bloggerbugis/js/RecentPostThumbnailBloggerbugis4U.js" type="text/javascript"></script></td></tr></tbody></table>


KETERANGAN :

  • https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png adalah URL Gambar default yang akan ditampilkan Recent Post Thumbnail jika postingan tidak memiliki gambar. Jika ingin mengganti gambarnya, buatlah gambar anda sendiri dengan ukuran 120px X 120px ganti kode URL tersebut diatas dengan URL gambar anda. Jika tidak punya gambar, gunakan saja gambar milik BLOGGERBUGIS tersebut.
  • boxwidth = 356; adalah pengaturan lebar kotak Recent Post Thumbnail. Silahkan diganti untuk menyesuaikannya dengan lebar sidebar blog anda.
  • thumbwidth = 40 dan  thumbheight = 40; dalah pengaturan besar kecilnya gambar yang ditampilkan Recent Post Thumbnail silhkan diganti angkanya menjadi lebih besar untuk membuat gambarnya lebih besar atau sebaliknya.
  • numposts = 5; adalah pengaturan untuk jumlah postingan terakhir yang akan ditampilkan Recent Post Thumbnail. Ganti angkanya menjadi lebih besar untuk menampilkan lebih banyak postingan terakhir atau sebaliknya.
  • http://blogger-bugis.blogspot.com adalah URL Blog BLOGGERBUGIS. silahkan diganti dengan URL blog anda.

Setelah mengedit kode di atas anda akan memiliki tampilan Recent Post Thumbnail yang sedikit berbeda dari Recent Post Thumbnail blogger blogspot lain. Tapi, jika anda menginginkan lebih, anda masih bisa mengedit lagi kode yang lain sesuai dengan keinginan anda.

Saya tidak akan BASA BASI lebih banyak lagi agar anda tidak bosan membaca hehehe...
Jika anda mendapat kesulitan memasang widget Recent Post tersebut di atas pada blog anda, silahkan sampaikan melalui kotak komentar BLOGGERBUGIS.

Oce sob... Semoga tutorial ini bermanfaat. Happy Blogging....

Wednesday, March 30, 2011

Cara Membuat Daftar Isi Otomatis Pada Sidebar Blog Blogspot

 Daftar isi pada blog bertujuan untuk memudahkan pengunjung melihat daftar isi pada sebuah blog. Beberapa blogger membuat daftar isi blognya pada sidebar blog atau pada halaman postingannya. Cara yang dilakukan juga berbeda. Ada yang menggunkan cara manual ada juga yang menggunakan DAFTAR ISI OTOMATIS

Kali ini saya akan share cara membuat Daftar isi blog seacara otomatis yang dipasang di sidebar blog. Daftar isi Otomatis berarti setiap kita menerbitkan atau memposting sebuah artikel pada blog, maka Daftar Isi Otomatis akan langsung mendeteksinya lalu akan menyimpan judul artikel beserta link menuju postingan tersebut. Cara ini praktis jauh lebih praktis daripada cara manual yang mengharuskan kita mengedit daftar isi setiap selesai membuat dan menerbitkan / memposting sebuah artikel.

Jika anda berniat memasang WIDGET DAFTAR ISI OTOMATIS pada sidebar blog anda, berikut caranya :

Seperti biasa, anda harus masuk terlebih dahulu ke akun blog anda dengan memasukkan Username dan Password blog di blogger dot kom.
  • Pada halaman Dasbor Blog, klik "RANCANGAN".
  • Pada halaman RANCANGAN, klik "TAMBAH GADGET".
  • Pilih HTML/JavaScript pada jendela baru yang muncul dengan mengklik tanda plus (+) di samping tulisan HTML/JavaScript.
  • Copy kode dibawah ini :

<div style="background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRNDv_vCitr8caRAndLijXCR8SSveXHae2C3tkC1mB5ZUCY4i9PPlxVl3gZUv5oIy2m1i9EsxMqE_i61tmkuY0vF82jCEM1wlQn6lIv1f8JW8Xpw0PZ0yIHt2r8aYTJXOTOwtpC0YuLCNh/) no-repeat scroll 0 0; border:2px solid black; height:310px; overflow:auto; padding:10px; width:347px;">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 200;
</script>
<script src="https://sites.google.com/site/bloggerbugis/js/DaftarIsiOtomatis4U.js">

</script>
<script src="http://blogger-bugis.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">

</script></div>


  • Paste pada kotak HTML/JavaScript anda lalu klik simpan.

Hasil dari kode diatas akan terlihat seperti gambar dibawah ini.




Jika ingin mengdit tampilan DAFTAR ISI OTOMATIS blog anda, ikuti petunjuk di bawah ini.
  1. Jika anda ingin menggunakan background warnaGanti tulisan TRANSPARENT dengan kode warna lalu hapus tulisan http:// sekian sekian....( kode yang diberi warna merah ). Untuk melihat kode warna, silahkan klik tulisan KODE WARNA yang ada pada bagian atas blog ini. Tepatnya di samping kiri bawah logo BLOGGERBUGIS. 
  2. Apabila anda ingin menggunakan background atau Latar belakang gambar, silhkan ganti tulisan https://lh4.googleusercontent............ dan seterusnya dengan URL gambar anda. Ukuran gambarnya 360px X 330px. Jika tidak punya gambar, gunakan saja gambar tersebut diatasalias jangan mengganti URL Gambarnya. 
  3. border:2px solid black berarti garis pinggir kotak DAFTAR ISI OTOMAITIS berwarna merah dengan ketebalan 2px. silahkan diedit jika anda ingin menggantinya dengan warna lain tau menambah atau mengurangi tebal garis pinggirnya.
  4. Yang paling penting !!!! Anda harus mengganti URL blogger-bugis.blogspot.com dengan URL Blog anda.


Oce sob.... sekian dulu tutorialnya....
Semoga bermanfaat.......

Saturday, March 26, 2011

Beberapa Cara Membuat Tulisan Berjalan / Marquee

Teks atau Tulisan Berjalan adalah..... teks / tulisan yang berjalan tanpa menggunakan kaki. hehe....
Maksud saya ini :

TEKS BERJALAN TANPA MENGGUNAKAN KAKI

Teks atau Tulisan berjalan ini bisa di pasang di artikel blog, atau di Sidebar Blog. Saya sendiri menggunakannya untuk menyimpan Link Sahabat BLOGGERBUGIS di Sidebar blog ini.
Jika anda ingin membuatnya di blog anda, berikut ini saya share Beberapa Cara Membuat Efek Teks / Tulisan Berjalan di Blog....

  • TEKS / TULISAN BERJALAN EFEK BISA
Kodenya :
<marquee>TEKS / TULISAN BERJALAN EFEK BIASA</marquee>

Hasilnya :

TEKS / TULISAN BERJALAN EFEK BIASA


  • TEKS / TULISAN BERJALAN DENGAN MENGATUR KECEPATAN
Sama seperti efek teks berjalan diatas, bedanya penambahan kode  scrollamount="ANGKA" membuat teks / tulisan berjalan bisa diatur kecepatan berjalannnya. Semakin besar angka scrollamountnya, semakin cepat teks berjalan.
Berikut contoh beberapa kodenya dengan kecepatan berbeda :

<marquee scrollamount="2">TEKS / TULISAN BERJALAN (2)</marquee>
<marquee scrollamount="4">TEKS / TULISAN BERJALAN (4)</marquee>
<marquee scrollamount="6">TEKS / TULISAN BERJALAN (6)</marquee>
<marquee scrollamount="8">TEKS / TULISAN BERJALAN (8)</marquee>
<marquee scrollamount="10">TEKS / TULISAN BERJALAN (10)</marquee>

Hasilnya :

TEKS / TULISAN BERJALAN (2)

TEKS / TULISAN BERJALAN (4)

TEKS / TULISAN BERJALAN (6)

TEKS / TULISAN BERJALAN (8)

TEKS / TULISAN BERJALAN (10)


  • TEKS / TULISAN BERJALAN  KE KANAN, ATAS, dan BAWAH
Secara default, teks akan berjalan ke arah kiri. Untuk membuatnya berjalan ke arah sebaliknya tambahkan kode direction="right" seperti contoh di bawah ini :

<marquee scrollamount="2" direction="right">TEKS ATAU TULISAN BERJALAN KE KANAN</marquee>


Hasilnya :

TEKS ATAU TULISAN BERJALAN KE KANAN


Untuk membuatnya berjalan ke ATAS atau ke BAWAH, cukup ganti perintah RIGHT menjadi UP untuk berjalan ke atas, dan DOWN untuk berjalan ke bawah. Khusus untuk perintah Berjalan ke atas atau ke bawah, sebaiknya tambahkan pengaturan Lebar (WIDTH) dan Tinggi (HEIGHT) supaya TEKS ATAU TULISAN BERJALAN tidak berjalan terlalu tinggi atau terlalu pendek. Contoh kodenya seperti ini :

<marquee scrollamount="2" direction="up" width="100%" height="50">TEKS ATAU TULISAN BERJALAN KE ATAS / NAIK</marquee>
<marquee scrollamount="2" direction="down" width="100%" height="50">TEKS ATAU TULISAN BERJALAN KE BAWAH / TURUN</marquee>

Hasilnya :
Bergerak ke ATAS / NAIK

TEKS ATAU TULISAN BERJALAN KE ATAS / NAIK



Bergerak ke BAWAH / TURUN

TEKS ATAU TULISAN BERJALAN KE BAWAH / TURUN


  • TEKS / TULISAN BERJALAN MONDAR MANDIR
Untuk membuat Teks atau Tulisannya berjalan mondar mandir, kode yang ditambahkan adalah behavior="alternate". Contoh penambahan kodenya seperti ini :

<marquee behavior="alternate">TEKS / TULISAN BERJALAN MONDAR MANDIR</marquee>

Hasilnya :

TEKS / TULISAN BERJALAN MONDAR MANDIR


  • TEKS /TULISAN BERJALAN DAN BERHENTI
TEKS / TULISAN BERJALAN akan berhenti saat disentuh mouse / cursor dengan menaambahkan kode onmouseover="this.stop()"  dan akan berjalan lagi jika mouse / cursor dipindahkan dengan menambahkan kode onmouseover="this.start()" .

Contoh kodenya seperti ini :

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">TEKS / TULISAN MONDAR MANDIR LALU BERHENTI</marquee>

Hasilnya :

TEKS / TULISAN MONDAR MANDIR LALU BERHENTI

Silahkan sentuh tulisannya dengan anak panah / cursor mouse anda untuk melihat hasinya.
Jika ingin memberikan background atau latar warna pada TEKS ATAU TULISAN BERJALAN, cukup menmbahkan kode bgcolor="KODE WARNA"

Contoh kodenya seperti ini :

<marquee bgcolor="#00FF00"><b>TEKS / TULISAN BERJALAN</b></marquee>

Hasilnya :

TEKS / TULISAN BERJALAN


KODE #00FF00 adalah kode warna HIJAU.
Silahkan ganti kodenya dengan kode warna yang anda inginkan. Untuk melihat kode warna, silahkan klik tulisan "KODE WARNA"  yang terletak pada bagian atas ( header ) Blog ini. Tepatnya disamping kiri bawah logo BLOGGERBUGIS.

Jika ingin membuat WIDGET di sidebar anda berjalan, cukup ganti tulisan "TEKS / TULISAN BERJALAN" dengan KODE WIDGET ANDA.
Bagaimana SOB... Tutorial Membuat Teks atau Tulisan Berjalan BLOGGERBUGIS cukup jelas ???
Kalau kurang jelas, silhkan sampaikan di kotak komentar.
Semoga hari anda menyenangkan,.. HAPPY BLOGGING............

Friday, March 25, 2011

Cara Membuat Link Mulai dari Yang Biasa Sampai yang Luar Biasa

Membuat link di Artikel atau postingan blog sagatlah mudah. Cukup highlight kata atau kalimat yang ingin dijadikan link, lalu klik tombol link diatas postingan. Selanjutnya tinggal memasukkan halaman yang dituju pada pop up jendela yang muncul.

Lain halnya dengan membuat link di Sidebar, Tab Menu, dll. Kita harus membuat kode linknya secara manual.Cara gampangnya adalah dengan membuat linknya di halaman posting lalu mengcopy semua kode linknya pada mode EDIT HTML, tapi cara ini hanya bisa membuat link biasa. misalnya seperti ini :

<a href="http://blogger-bugis.blogspot.com/">BLOGGERBUGIS</a>

Hasilnya :


Kata "BLOGGERBUGIS" adalah link yang menuju ke  http://blogger-bugis.blogspot.com
Saat di klik, Link diatas akan langsung mengganti halaman menjadi halaman yang dituju linknya. Dalam hal ini  halaman http://blogger-bugis.blogspot.com.


Jika ingin membuat jenis link yang lain, kita harus menambahkan beberapa kode. Kode yang ditambahkan tersebut berbeda-beda tergantung dari jenis link yang kita inginkan.

Berikut ini beberapa cara membuat link dengan fungsinya masing - masing.

  • LINK YANG MEMBUKA TAB BARU
Saat pengunjung mengklik link jenis ini, halaman yang dituju link akan terbuka di tab baru browser. untuk membuatnya kita hanya perlu menambahkan kode target="_blank" setelah alamat url yang dituju link. Bisa juga menggunakan kode  target="_new" , dan bisa juga menggunakan kode target="_up".
Contoh kode yang digunakan seperti ini :

<a href="http://blogger-bugis.blogspot.com/" target="_blank">BLOGGERBUGIS</a>

Kode diatas akan membuat kata BLOGGERBUGIS menjadi link menuju ke halaman http://blogger-bugis.blogspot.com/ yang akan terbuka di tab baru browser. Kode link diatas akan menghasilkan link seperti ini :


Silahkan di klik untuk melihat hasilnya.

  • LINK YANG MEMBUKA 2 HALAMAN
Link jenis ini akan membuka 2 halaman sekaligus pada saat bersamaan saat linknya di klik
Contoh kode yang digunakan seperti ini :

<a href="http://blogger-bugis.blogspot.com" target="_blank"
onclick="window.open('http://www.situskerenku.co.cc')">MgM Community BLOGGERBUGIS</a>

Kode link diatas akan menghasilkan link di bawah ini :


Silahkan di klik untuk melihat hasilnya.

  • LINK YANG TERBUKA TANPA DI KLIK
Link jenis ini akan langsung terbuka tanpa di klik saat mouse menyentuh / melewati link.
Contoh kode yang digunakan seperti ini : 

<a href="http://blogger-bugis.blogspot.com" onmouseover="window.location=this.href">BLOGGERBUGIS</a> 

Hasil dari kode link diatas seperti ini :


Silahkan arahkan mouse anda pada link untuk melihat hasilnya.

  • MENGGUNKAN GAMBAR SEBAGAI LINK
Selain menggunakan kata atau kalimat, kita juga bisa menggunakan gambar sebagai link. Untuk jenis link yang satu ini kita membutuhkan sebuah gambar yang tersimpan pada imge hosting lalu menggunakan alamat URL Gambar tersebut. Misalnya kita akan menggunakan Gambar di bawah ini sebagai link


Gambar diatas tersimpan di PICASA dengan alamat URL https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyNbEcXWOTsioyFKH6_dDYeIPUOEqxeMYn3qmoh4OMhKL4ngMF5IigCPCt8xbSMlJSHWfA6diHfFxQMNHhEkviCQn75x0M50_IzI7lG6uaHYJH9Q6zYqDCnOiczk1S4T0e1_mEUGJNlNG/

Untuk membuat gambarnya menjadi link, Contoh kode yang digunakan seperti ini :

<a href="http://blogger-bugis.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyNbEcXWOTsioyFKH6_dDYeIPUOEqxeMYn3qmoh4OMhKL4ngMF5IigCPCt8xbSMlJSHWfA6diHfFxQMNHhEkviCQn75x0M50_IzI7lG6uaHYJH9Q6zYqDCnOiczk1S4T0e1_mEUGJNlNG/" border="0" /></a>

Hasilnya seperti ini :



Silahkan klik gambar diatas untuk melihat hasilnya

OK sob.... semoga cukup jelas cara saya menyampaikannya.
Beberapa Cara Membuat Link diatas semoga bermanfaat bagi anda. Happy blogging dan Salam Blogger.....

Thursday, March 24, 2011

Mau Tukeran Link dengan BLOGGERBUGIS ???

Salah satu cara membuat BLOG Menjadi SEARCH ENGINE FRIENDLY ( Cepat terindeks oleh Mesin Pencari ), adalah dengan menyebarkan link blog di internet. Untuk menyebarkannya, salah satu caranya adalah dengan bertukar link dengan Blogger lain.

Halaman ini saya buat khusus untuk anda yang ingin bertukar link dengan BLOGGERBUGIS. Silahkan simpan Link BB di blog anda lalu beritahu saya melalui kotak Google Friend Connect di bawah.
Jangan lupa tinggalkan link blog anda supaya saya bisa langsung megunjungi blog anda lalu memasang link blog anda di BB.

Hidup Blogger Indonesia..........
hehe...


Mau Tukeran Link ???
Copy Link BLOGGERBUGIS di bawah ini
lalu simpan di Blog Anda.
(Untuk mengcopy, Klik di dalam Text Area lalu tekan dan tahan
tombol CTRL pada keyboard anda) lalu tekan tombol C .
Jangan lupa beritahu saya bahwa anda sudah menyimpan link BLOGGERBUGIS di blog anda
pada KOTAK KONFIRMASI dibawah serta tinggalkan link ke BLOG anda.



...:::Link Q:::...






...:::KOTAK KONFIRMASI:::...






Cara Membuat Menu Tab View Pada Blog Tanpa Mengedit Kode HTML

Pada postingan saya sebelumnya "Cara Membuat Daftar Isi Blog Dengan Menu Tab View" sudah saya bahas tentang Menu Tab View dan fungsinya. Jika sobat masih kurang jelas dengan Menu Tab View, silahkan baca dulu artikel INI

Membuat Menu Tab View pada Blog membutuhkan banyak kode HTML. Pada artikel sebelumnya tentang cara membuat menu tab view, beberapa kode dipasang di Elemen Laman, dan yang lainnya di pasang di kode HTML Blog.
Jika cara membuat Menu Tab View pada postingan tersebut cukup membingunkan, silahkan coba Tutorial Membuat Menu Tab View tanpa Edit HTML Blog berikut.

Cara ini cukup mudah karena kode yang dipakai hanya diletakkan di Elemen Laman, berikut tutornya......

  • Log In dulu ke akun Blog anda
  • Pada halaman dasbor blog anda, Klik "RANCANGAN"
  • Klik "TAMBAH GADGET"
  • Klik tanda PLUS (+) pada "HTML/JavaScript"
  • COPAS kopi Copy Paste semua kode dibawah ini lalu paste pada kotak HTML/JavaScript anda. berikut kodenya :

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Trebuchet ms", verdana, Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);
  // ----- Tabs -----
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  var Tab = Tabs.firstChild;
  var i   = 0;
  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);
  // ----- Pages -----
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  var Page = Pages.firstChild;
  var i    = 0;
  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>MENU 1</a>
<a>MENU 2</a>
<a>MENU 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>


Silahkan edit sendiri kodenya pada tanda keterangan yang berwarna merah untuk menyesuaikannya dengan sidebar Blog anda. Untuk melihat Kode Warna HTML, anda bisa lihat DISINI

Semoga bermanfaat, happy blogging..........


Wednesday, March 23, 2011

Cara Mengetahui Blog Dofollow dan Blog Nofollow dengan Pengaya Firefox

Dengan membuka artikel ini, berarti anda sudah mengetahui yang dimaksud dengan Blog yang DoFollow dan Blog yang NoFollow. Tapi jika belum, silahkan baca dulu artikel INI.

Jika memberi komentar Pada sebuah Blog dengan tujuan menjalin pertemanan, suka artikel, menyampaikan terima kasih kepada author atas artikel yang ditulisnya berguna bagi anda pada sebuah sebuah blog, atau semacamnya, kita tidak perlu mengetahui apakah blog tersebut blog yang DoFollow atau blog yang NoFollow. Tapi, jika memberi komentar dengan tujuan untuk mendapatkan BackLink dari blog yang dikomentari, kita perlu mengetahui apakah blog tersebut DoFollow atau No Follow. Karena apabila blog yang dikomentari adalah Blog yang NoFollow, jangan harap dapat BackLink...

Sebenarnya banyak cara yang bisa dilakukan untuk mengetahui Blog Do Follow atau No Follow. Cara ini juga berbeda tergantung dari jenis browser yang digunakan. Dari sekian banyak "CARA" itu, saya hanya akan menulis tentang Cara Mengetahui Sebuah Blog DoFollow atau NoFollow dengan menggunakan ADD ONS atau Pengaya Mozilla Firefox. Alasannya karena cara inilah yang paling baik ( menurut saya ) dan cara inilah yang saya pakai saat ini.

Oce sob... kita langsung saja ke Tutorial Cara Mengetahui Blog yang DoFollow dan Blog yang NoFollow...

Karena tool yang akan digunakan adalah ADD ONS atau Pengaya Mozilla Firefox, berarti browser yang digunakan harus Mozilla Firefox. Kalau belum menggunkan browser Mozilla, anda bisa Download terlebih dahulu di http://www.mozilla.com/en-US/firefox/all-older.html


Saya anggap anda sudah menggunakan browser Mozilla.
Silahkan langsung klik DISINI
  • Saat melihat tampilan pengaya Mozilla seperti gambar dibawah ini, klik "Add To Firefox" atau Download Now.




  • Klik "IZINKAN" yang letaknya pada sudut KANAN ATAS halaman



  • Klik "PASANG"



  • Tunggu beberapa saat hingga pengaya NoDoFollow terpasang.
Saat muncul perintah pada pengaya untuk merestart Firefox, klik "RESTART" (Saya lupa capture gambarnya) atau bisa juga anda close / tutup Browser Firefox anda lalu buka kembali.

Setelah merestart Firefox, pengaya anda telah terpasang seperti terlihat pada gambar dibawah ini:




Selanjutnya menggunakan Pengaya NoDoFollow firefox untuk mengetahui sebuah blog DoFollow atau NoFollow.

  • Buka artikel blog yang akan anda lihat DoFollow tidaknya (Buka artikel yang sudah ada komentarnya).
  • Klik ALAT / TOOL pada menu Firefox. Letaknya di bagian paling atas Kiri Broser Firefox
  • Pilih NoDoFollow
  • Scroll halaman Blog ke bawah hingga tampil kotak komentar.
Apabila Backgound Nama Komentator berwarna BIRU MUDA / UNGU MUDA, berarti blog tersebut DoFollow. Contohnya bisa anda lihat pada gambar di bawah yang diberi lingkaran MEARAH




Jika nama Komentator berwarna MERAH MUDA / PINK, berarti blog tersebut NoFollow seperti contoh pada gambar di bawah ini :



Jika inign mencoba melihat Blog NoFollow, buka beberapa blog orag lain lalu periksa. kalau mau yang gampang, buat blog baru dengan akun blog anda sekarang. Buat artikel sembarang lalu komentari sendiri, baik via Akun Blogger anda, maupun via Name /URL. lalu praktekkan tutornya. setelah melihat blog NoFollow anda, anda bisa langsung menghapus blog tersebut.

OK Sob.... semoga bermanfaat dan selamat berkomentar di Blog DoFollow untuk mendapatkan BackLink. Happy blogging......

Tuesday, March 22, 2011

Trik Cara Mengganti Favicon Pada Blog Blogger

Trik Bloggerbugis kali ini adalah cara mengganti Favicon blog blogger. Sebenarnya sudah banyak blogger yang membuat artikel tentang cara tutorial mengganti Favicon Blog. Tapi saya rasa tidak ada salahnya untuk membuat tutorial mengganti Favicon di blog ini, soalnya semakin hari semakin banyak orang yang membuat blog dan tentunya membutuhkan banyak tutorial untuk mengedit template blognya. Salah satunya ya... mengganti Favicon blog. Selain itu, saya hanya punya sedikit waktu untuk mengupdate artikel blog BLOGGERBUGIS, jadi saya pilih saja menulis tutorial yang singkat demi blog saya yang lebih lebih  akrab dengan mesin pencari.

Blog Favicon eh.. Favicon Blog (Bagi yang belum tahu) adalah Gambar atau icon kecil yang berada pada samping alamat blog. Gambar ini bisa berupa foto pemilik blog, bisa juga berupa logo. Baik yang berekstensi dot ico, jpg, png, tiff, ataupun jenis gambar lainnya.
Untuk lebih jelasnya, perhatikan contoh Favicon Blog pada gambar di bawah ini :



Semua yang diberi lingkaran merah adalah gambar Favicon pada masing - masing situs / blog.
Secara default, saat membuat Blog di Blogspot, gambar Favicon Blog berupa gambar huruf B seperti yang terlihat pada gambar diatas. Perhatikan lingkaran merah yang kedua dari kiri.

Haruskah kita "Mengganti Favicon Blog pada Blog" ?
Saya tidak tahu bagaimana menurut anda, tapi menurut saya, mengganti Favicon Blog itu sangat penting. Alasannya.....
Favicon Blog merupakan Ciri Khas, Logo, Lambang, atau sejenisnya pada sebuah Blog. Kadang kita mengenali sebuah blog hanya dengan mengingat Favicon Blognya.

Mau mengganti Favicon blog anda ??? simak cara membuat / mengganti Favicon berikut ini.

Peratama tama, anda harus membuat Gambar Favicon anda dengan ukuran 100px X 100px, atau 24px X 24px agar lebih ringan (yang penting jangan ditambah batu). Bisa dilakukan di Corel Draw, Photoshop, atau software edit gambar yang anda kuasai. Tapi kalau anda tidak menguasai software edit gambar apapun, anda bisa membuat gambar Favicon anda di http://www.favicongenerator.com.

Jika sudah punya gambarnya, silahkan upload gambar anda ke image hosting anda. Tidak punya Image Hosting ??? Pakai saja PICASA WEB ALBUM. Ruang penyimpanan besar, Ringan, dan yang paling penting GRATISSS hehe... Kalau sudah, lakukan langkah seribu berikut:

  • Seperti biasa, masuk dulu ke akun Blog anda.
  • Pada halaman Dasbor, klik "RANCANGAN".
  • Selanjutnya, pada halaman rancangan klik "EDIT HTML".
  • Cari kode </head> pada template Blog anda. Tekan F3 untuk melakukan pencarian cepat.
  • COPAS / simpan kode FAVICON berikut DI ATAS kode </head>

<link rel="shortcut icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLdzgF503xVpGt21L7KBJ0przNdO145LKAJ3r9BuTlWQhipL9C3P8wKPFXzQm8EoVYRqYVlvmA-fn4ukcVJFLnJssjNFIsGFsTU6JoTd9nJ3UgX4Rv1W73jBKI_xvWBAuzeNhPCTcxSqyl/"/>

  • Klik "PRATINJAU" untuk melihat hasilnya. Kalau sudah sesuai dengan harapan anda, klik "SIMPAN TEMPLATE".
  • Selesai...

Catatan :
Kode yang berwarna merah adalah URL Favicon Firefox yang saya buat di  FAVICON GENERATOR. Silahkan ganti kode yang berwarna merah dengan URL gambar atau Favicon anda. (kalau pakai Favicon firefox tsb juga boleh...)

Selamat mecoba.....

Monday, March 21, 2011

Cara Menonaktifkan Fungsi Klik Kanan pada Blog untuk menghindari COPAS

Takut artikel anda DICOPAS orang lain ???

Gampang...................
Matikan / Nonaktifkan saja fungsi klik kanan pada blog anda.
Untuk melakukannya, ada 2 cara yang bisa anda terapkan di blog anda.

CARA PERTAMA
  • Masuk ke akun blog anda.
  • Klik "RANCANGAN"
  • Klik "EDIT HTML"
  • Cari kode  <body> pada tempalate anda (Untuk pencarian cepat, gunakan tombol F3 pada keyboard)
  • Copy kode berikut, lalu paste dibawah kode  <body>

oncontextmenu='return false'
onmousedown='return false'
onselectstart='return false'
onkeypress='return false'

Kode baris pertama gunanya untuk Mematikan / Menonaktifkan klik kanan mouse
Kode baris kedua gunanya untuk Mematikan / Menonaktifkan klik blok ke bawah
Kode baris ke tiga gunanya untuk Mematikan / Menonaktifkan seleksi blok
Kode baris keempat gunanya untuk Mematikan / Menonaktifkan tombol keyboard

Anda bisa menggunakan semua kode tersebut, atau hanya sebagian saja sesuai dengan yg anda butuhkan.

Mau yang lebih menarik ??? Gunakan..........



CARA KEDUA

Matikan fungsi klik kanan blog dan memberikan pesan pada pengunjung saat melakukan klik kanan di blog. Cara ini lebih menarik, tetapi pengunjung tetap bisa melakukan COPAS dengan menggunakan tombol CRTL+C pada keyboard untuk mengcopy dan menggunakan tombol CTRL lalu mengklik link jika ingin membuka link di tab baru. Suka dengan cara ini ??? Gunakan kode dibawah ini.
Sama seperti kode sebelumnya, kodenya diletakkan dibawah kode <body> template. Berikut kodenya :

<script language='JavaScript'>
var message="GANTI TULISAN INI";

function clickIE4(){
if (event.button==2){
alert(message);
return false;
}}

function clickNS4(e){
if (document.layers||document.getElementById&amp;&amp;!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}}}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&amp;&amp;!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")
</script>


Ganti tulisan "GANTI TULISAN INI" dengan pesan yang ingin anda tampilkan saat pengunjung melakukan klik kanan. Misalnya, Dilarang melakukan COPAS !!!! atau kalimat lain yang anda inginkan.


Semoga bermanfaat, dan selamat ber XPerimen..........

Sunday, March 20, 2011

Cara Membuat Artikel Terkait atau Related Post di blog

Untuk memudahkan pengunjung mencari artikel lain di blog, seorang blogger biasanya menyediakan kotak search atau cari di dalam blog. Ada juga yang menyediakan Link menuju ke Daftar isi Blognya. Saya sendiri menggunakan Menu Tab View untuk menampilkan Judul artikel blog BLOGGERBUGIS di sidebar ( Kalau saya Belum Ganti Template ).  Semua cara diatas bisa memudahkan pengunjung blog untuk mencari artikel di blog.

Dibandingkan dengan beberapa cara diatas, cara yang paling ampuh  adalah dengan membuat Artikel Terkait atau Related Post di bawah artikel blog. Dengan cara ini, pengunjung akan langsung melihat daftar isi blog sesuai dengan Label Artikel yang dicari / sedang dibaca.

Jika anda ingin memasang Related Post atau Artikel Terkait di bawah postingan blog anda berikut saya share caranya. Tapi sebelumnya, supaya related post bekerja sesuai dengan yang diharapkan, berikan Label pada setiap artikel anda. Baik artikel yang baru mau di posting, maupun artikel yang sudah di posting tapi tidak berLABEL. Berikut cara membuat Related Post atau Artikel Terkait :

  • Seperti biasa, masuk dulu ke Akun blog anda.
  • Pada halaman Dasbor, cari kata "RANCANGAN" lalu klik
  • Pada halaman Rancangan, klik tombol "EDIT HTML"
  • Sebaiknya simpan dulu template anda dengan mengklik tombol "DOWNLOAD TEMPLATE LENGKAP".
  • Beri tanda CHECKLIST pada kotak kecil yg ada di depan tulisan Expand Template Wdget yang terletak diatas kotak kode HTML template blog anda
  • Cari kode ]]></b:skin> (Gunakan tombol F3 pada keyboard untuk melakukan pencarian cepat).
Copy kode dibawah ini, lalu paste DIATAS kode ]]><b/skin> berikut kodenya :


        /*-- Related Post dari BLOGGERBUGIS--*/

        .rbbox{border: 1px solid #000000;padding: 5px;

        background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}

        .rbbox:hover{background-color: #EFFBEF;}



  • Selanjutnya, Copy kode yang ada di dalam Text Area di bawah ini, lalu letakkan / paste di BAWAH kode  <data:post.body/> template anda.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>



  • Lakukan pratinjau untuk melihat hasilnya.
  • Jika sudah sesuai, silahkan klik tulisan "SIMPAN TEMPALATE" untuk menyimpan hasil kerja anda.
Jika belum sesuai dengan yang diharapkan dan ingin mengubah warna / tampilan kotak Related Post, silahkan simak petunjuk berikut ini :

Anda bisa mengganti warna dan tebal garis pinggir kotak Related Post anda dengan mengganti angka dan kode warna yang berwarna merah pada kode pertama baris pertama.
Untuk melihat kode warna, silahkan sklik tulisan "KODE WARNA" yang ada diatas / header blog ini.

Jika ingin mengganti warna background kotaknya, ganti kode warna ( #F2F2F2 ) pada kode pertama baris kedua.

Kode pertama baris ketiga ( .rbbox:hover ) adalah warna background kotak jika mouse menyentuh kotak Related Post. Silahkan Ganti kode Warnanya sesuai dengan warna yang anda inginkan.


Anda Juga bisa mengganti Tulisan "Artikel Lainnya" dengan kata yang anda inginkan. Silahkan Ganti Tulisan Artikel Lainnya pada kode kedua ( kode yang ada didalam Text Area ).

Oke sob, selamat melakukan Copy Paste....
Happy Blogging...

Panduan Cara Membuat Meta Tag yang Baik Tag di Blog

Salah satu cara membuat Blog jadi Search Engine Friendly adalah dengan membuat META TAG di Blog. Bgi anda yang mungkin masih kurang familiar dengan kata META TAG, berikut sedikit deskripsinya versi BLOGGERBUGIS.

Meta Tag adalah Adalah salah satu hal yang sangat penting agar blog cepat terindex di mesin pencari / Search engine. Dalam hal ini google, MSN, Yahoo, dll. Meta Tag adalah beberapa kode yang disipkan pada template blog. Saat Mesin Pencari melakukan tugasnya mencari artikel, maka SE juga akan membaca META TAG yg disipkan.

Anda sudah memasang Meta Tag ??? Sudah baguskah META TAG yang anda pasang ???

Meta Tag Sebaiknya :

Title Tag tidak lebih dari 60 karakter.
Semua mesin pencari tidak sama, ( tentu saja.... namanya saja beda - beda hehe...) Tapi mereka memiliki kesamaan yaitu hanya akan membaca title blog kurang lebih 60 karakter saja.

Meta Deskripsi Blog sebaiknya jangan melebihi 150 karakter.
Tidak semua Mesin Pencari menampilkan Meta Tag Deskription. Kalaupun ditampilkan, jumlah karakter maksimum adalah 150.

Meta Keyword  jangan lebih dari 874 karakter.
Mesin Pencari hanya mampu menyimpan meta Keyword sebanyak 874 karakter. Jika keyword lebih dari 874 karakter, maka keyword akan sia - sia. Carilah kata terbaik untuk keyword blog yg tidak melebihi 874 karakter.

Jika anda belum measang Meta Tag di Blog anda, sebaiknya lakukan sekarang. Cara Memasang Meta Tag di Blog sangat gampang, berikut caranya :

Seperti biasa aku tak sanggup berjanji Log In dulu ke Akun Blog anda dengan Username dan Password anda. Setelah masuk, anda akan berada di Halaman DASBOR blog anda. Dihalaman DASBOR, cari kata "RANCANGAN" lalu klik. Setelah berada di Halaman Rancangan, klik tombol "EDIT HTML".

Copy kode dibawah ini, lalu simpan dibawah kode <head> template anda.

Silahkan pilih salah satu dari 3 kode yang biasa dipakai blogger  berikut ini:

KODE PERATAMA :

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>JUDUL BLOG ANDA</title>
<meta http-equiv="Content-Language" content="id">
<meta name="description" content="DESKRIPSI BLOG ANDA">
<meta name="keywords" content="KEYWORD BLOG ANDA,">



KODE KEDUA :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle + &quot; - DESKRIPSI BLOG ANDA&quot;' name='description'/>
<meta expr:content='data:blog.pageTitle + &quot;  KEYWORD BLOG ANDA,&quot;' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - DESKRIPSI BLOG ANDA&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot; KEYWORD BLOG ANDA,&quot;' name='keywords'/> </b:if>



KODE KETIGA :

<meta content='DESKRIPSI BLOG ANDA' name='description'/>
<meta content='KEYWORD BLOG ANDA' name='keywords'/>
<meta content='INDEX,FOLLOW, all' name='robots'/>
<meta content='index, follow' name='googlebot'/>                                             
<meta content='NAMA ANDA ' name='author'/>



KETERANGAN :

Ganti ganti semua tulisan yang berwarna merah sesuai petunjuk dibawah ini
JUDUL BLOG ANDA Ganti dengan judul blog anda
DESKRIPSI BLOG ANDA Ganti dengan Deskripsi blog anda. Misalanya Download Gratis MP3 terbaik.
KEYWORD BLOG ANDA Ganti dengan keyword blog anda yang dipisahkan dengan koma ( , ). Misalnya : Tutorial Blog, Panduan Blogger, Tips Blog, SEO.

Penting !!!!!
Gantilah dengan kata - kata atau  kalimat yang sesuai dengan konten atau isi yang sesuai dengan blog anda.
Misalnya : isi blog anda tentang TUTORIAL BLOG. Lalu ada mengisi judul meta tag dengan judul PUSAT DOWNLOAD, deskripsi anda isi dengan JUAL BARANG BEKAS BERKUALIS DENGAN HARGA TERJANGKAU, lalu Keyword anda isi dengan AYAM, KAMBING, SAPI, PETERNAKAN, MAKANAN HEWAN, Kan ga'lucu hehehe....


Semoga artikel singkat ini bermanfaat dan Salam Blogger......

Saturday, March 19, 2011

Muat Ulang / Refresh di Blog Secara Otomatis

Jika menggunakan Browser Mozilla Firefox, unutk merefresh atau muat ulang sebuah halaman Blog atau Website, kita tinggal membuka Halaman Blog atau Website yang akan di muat ulang lalu tekan F5 pada keyboard.

Mengapa harus merefresh sebuah halaman blog atau web ???

Saat mengunjungi sebuah Blog (misalnya) kita melihat widget Whoes Amung Us yang menunjukkan jumlah pengunjung di blog. Saat pertama kali masuk ke Blog tersebut, widget ini menunjukkan ada orang lain yang juga sedang membuka blog tersebut. Anggap saja 1 orang. Sebagai blogger yang baik kita menyapa orang lain tersebut di Chat Box atau yang lebih dikenal BUKU TAMU. Setelah menulis pesan salam, kita tentunya menunggu jawaban dari orang tersebut. Setelah menunggu 5 menit, kita mungkin berfikir, " mungkin dia sedang asyik membaca hingga tidak melihat pesan saya". Waktu berjalan 10 menit dan belum juga ada jawaban. Saat itu, kita mungkin berfikir "Orang ini mungkin tidak bisa mengetik hingga tidak balas menyapa".

Sebenarnya ada beberapa kemungkinan. Anggap saja orang itu malas membalas pesan, atau dia tidak melihat pesan di buku tamu. Tapi, bisa saja orang tersebut sudah meninggalkan atau menutup halaman blog. Mungkin karena tidak melihat apa yang sedang ia cari. Lalu kenapa Widget Whoes Amung Us masih menunjukkan angka 2 ??? Apakah widget tersebut berbohong ???

Jawabannya jelas TIDAK !!! karena widget tersebut tidak bisa bicara hehehe......
Hal ini terjadi karena kita membuka halaman tersebut pada saat ada orang lain yang juga membukanya. Tapi pada saat orang lain tersebut pergi, Whoes Amung Us akan tetap menunjukkan angka 2 karena halaman tidak dimuat ulang atau di refresh.

Saya pernah mengalami hal ini di blog saya (jadi malu).. karena penasaran orang tersebut tidak balas menyapa, saya muat ulang halaman blog saya. Ternyata, Whoes Amung Us sudah menunjukkan angka 1 yang artinya orang tersebut sudah pergi tanpa saya ketahui.

Jika anda tidak ingin mengalami hal serupa, atau orang lain yang mengalami hal serupa di blog anda, sebaiknya buat Blog anda meREFRESH atau meMUAT ULANG HALAMAN secara otomatis dalam jangka waktu sesuai keinginan anda. Caranya :

Pasang sedikit kode di template blog anda. Untuk melakukannya tentu saja anda harus masuk dulu ke akun blog anda. Setelah masuk, anda akan berada di Halaman Dasbor Blog. Cari kata "RANCANGAN" lalu klik. Selanjutnya klik tombol "EDIT HTML".

Cari kode <head> template anda. Gunakan tombol   F3 pada keyboard untuk melakukan pencarian cepat.

Sudah dapat kodenya ????

Kopi Copy kode dibawah teh ini (Gunakan CTRL + C) lalu paste dibawah kode <head> tersebut.
ini kodenya :
 

<meta http-equiv="refresh" content="300"/>

SIMPAN TEMPLATE anda.

Selesai......
(Intronya ternyata 10 kali lebih banyak dari pada tutorialnya hehehe....)

Keterangan :
Angka 300 menandakan jumlah waktu yang akan me-reload atau refresh secara otomatis dalam hitungan detik. Yang artimya Blog akan merefresh otomatis dalam 5 menit. Jika anda ingin membuatnya lebih lama, tambah saja angkanya atau kurangi jika ingin mereload halaman lebih cepat.


Jika blog anda berat di untuk di load, sebaiknya jangan gunakan waktu terlalu cepat karena pengunjung akan kaget, jengkel, dan kemungkinan meninggalkan blog anda jika sedang asyik membaca tita - tiba halaman di muat ulang secara otomatis. 


Semoga bermanfaat. happy blogging......