Yang dimaksud dengan domain dan hosting

Internet bukanlah sesuatu yang asing lagi,dan sudah menjadi bagian dari kebutuhan.Semua orang diabad teknologi ini seolah haus informasi,dan internet adalah jawaban yang paling mudah untuk memenuhi kebutuhan tersebut.

Ini beda dengan beberapa tahun yang lalu dimana internet baru saja diperkenalkan,biaya fasilitas dan akses yang mahal dan terbatas.Saat itu hanya orang orang tertentu saja yang bisa memanfaatkan fasilitas fasilitas internet.Dikarenakan perangkat pendukung seperti komputer masih mahal,dan itupun tidak semudah sekarang penggunaannya.Untuk bisa berlangganan akses internet, paling tidak harus selalu menyediakan dana paling tidak 3 juta perbulan.

Sekarang semua itu bukan masalah lagi,siapapun baik tua ,muda ,anak-anak,intelektual,mahasiswa bahkan orang awam seperti saya.Dimana harga perangkat komputer semakin murah, selain itu teknologinyapun semakin canggih sehingga lebih mudah digunakan.Ditambah lagi dengan semakin murahnya biaya sambungan berlangganan internet.

Itulah alasan kenapa pengakses komputer semakin hari semakin pesat saja jumlahnya.

Internet adalah informasi,orang mengakses internet adalah para pencari informasi.Dan Hal ini telah dibaca oleh otak otak brilian, mereka berlomba untuk membangun bisnis yang berkaitan dengan informasi di internet.
Bermunculanlah bak jamur dimusim hujan tentang apa yang disebut dengan "Pebisnis Online",ya mereka menjual jasa dan informasi.
Jangan memandang dengan sebelah mata dengan bisnis internet ini,karena banyak perusahaan perusahaan besar yang lahir dari bisnis ini.

Apakah hanya untuk keperluan bisnis informasi sajakah di internet?...
Tidak juga demikian,saat ini internet juga digunakan sebagai media berpromosi atau presentasi bisnis agar usaha ataupun produknya cepat dikenal

Memiliki sebuah situs

Jaman dulu,membuat situs bukanlah sesuatu yang murah dan mudah.Paling tidak untuk bisa membangun sebuah situs sendiri haruslah memiliki pendidikan berlatar IT.Mahal karena harus memiliki serverweb sendiri dan harus menyediakan biaya untuk membeli server sendiri.Disamping itu biaya operasional dan maintenance nya  yang juga mahal pasti harus selalu dianggarkan.Hanya perusahaan besar saja yang mampu untuk memiliki sebuah situs.

Tapi tidak dengan sekarang,memiliki situs bukan hanya didominasi oleh perusahaan besar saja.Saat ini blog pribadi (micro blog) banyak bertebaran dimana mana.Bahkan individu yang mengelola sebuah blog pribadi, sudah ada yang mampu menghasilkan uang segar melebihi gaji seorang karyawan setingkat manajer. Dengan hanya mengeluarkan biaya hanya sekian ratus ribu saja pertahun untuk mengelola blog,dan itu sudah terbayarkan hanya dalam waktu kurang dari sehari.Hebatnya lagi,kegiatan tersebut dilakukan secara part time,hanya untuk mengisi waktu luangnya saja.

Memulai membuat blog

Apakah anda tertarik dengan pengelola microblog yang sudah sukses seperti diatas?....
Jangan hanya tertarik,andapun bisa mengikuti jejaklangkah mereka.Jika anda memiliki sebuah kemampuan khusus,dan anda juga merasa mampu menulis untuk berbagi pengalaman melalui internet.Anda pun bisa membuat blog sendiri untuk dimonetisasi sehingga menghasilkan pemasukkan tambahan bagi kas anda.Apakah anda mempunyai keahlian memasak?,,,,,desain dan konstruksi bangunan?,,,,fashion atau fotografi.Semua itu bisa menjadi bahan sebagai tulisan anda di blog pribadi anda.Siap siaplah untuk menghasilkan uang dari internet.

Hosting dan Domain

Jika anda tertarik untuk membuat sebuah blog dan sudah siap untuk monetisasi dan menghasilkan uang,kinilah saatnya.
Hal pertama yang perlu untuk anda ketahui adalah domain dan hosting.Karena kedua istilah tersebut berkaitan erat dengan sebuah blog/situs yang akan anda buat.
Domain: adalah rangkaian sebuah kata untuk menggantikan sebuah alamat IP dari webserver situs milik anda.Jika hanya menggunakan alamat IP untuk megakses sebuah situs,tentu hal ini akan sulit diingat orang karena terdiri dari rangkaian angka, eg 112.075.001.233 . Untuk memudahkan manusia mengingat alamat situs anda maka diperlukan pengganti yaitu nama domain.Domain itu sendiri saat ini tersedia dalam ekstensi .org,.net,.com,.biz,.co,.co.id,.gof,.mil dsb.Untuk bisa mendapatkan sebuah nama domain bagi situs anda maka anda harus mendaftarkan nama tersebut kepada panitia penyelenggara nama domain.Anda bisa mendaftarkan nama pilihan anda sendiri beserta ekstensi domain yang anda inginkan.Contohnya namablogsaya.com.,namablogsaya.net etc.
Kesimpulannya:Nama domain adalah alamat yang digunakan untuk mengakses sebuah situs melalui browser internet.Baca juga: Cara mendaftarkan domain [do]t co [dot] id

Hosting: terdiri dari server yang diletakkan didatacenter sehingga bisa terhubung dengan jaringan internet diseluruh dunia.Server tersebut disebut webserver ,sama dengan komputer rumah milik anda.Webserver juga mempunyai penyimpan data (hardisk) dan sistem operasi.Didalam webserver itulah tempat file situs kita diinstal sehingga kontent kita bisa diakses dari browser internet melalui nama domain.
Hosting sudah dilengkapi fasilitas fasilitas yang memudahkan kita untuk meletakkan dan menginstal aplikasi web serta melakukan konfigurasi yang diperlukan.
Untuk bisa mendapatkan hosting kita bisa menyewa kepada pegelola webserver (jasa hosting) lengkap satu paket dengan domain.Mereka melakukan jasanya sekaligus mengkonfigurasikannya dengan nama domain yang kita pilih.Dengan melalui jasa hosting,kita hanya perlu mendaftarkan nama,alamat,membayar biaya yang dibutuhkan.
Setelah Proses tersebut kita penuhi sesuai dengan yang ditunjukkan  penyelenggara hosting,maka kita sudah akan mendapatkan akses kedalam webserver kita untuk melakukan pekerjaan webmaster (mengelola situs)

Mudah bukan?....

Ada beberapa jenis dan fasilitas webserver yang disediakan hosting:

Untuk permulaan ,kita ketahui dulu yang paling umum yaitu Shared hosting dan VPS .

Shared hosting
Satu webserver yang dibagi kecil kecil  untuk banyak situs,perumpamaannya dalam satu kompleks rumah susun yang dibagi menjadi banyak ruang untuk banyak keluarga.
Kelemahanya,jika ada salah satu situs yang overload maka semua situs yang berada didalam satu server tersebut akan ikut terganggu.
Kelebihannya,sewanya murah dan cara menggunakan shared hosting lebih mudah.

VPS (Virtual private Server)
Satu server yang hanya untuk ditempati oleh situs anda pribadi saja.Perumpamaanya,satu rumah yang sebenarnya cukup untuk sebuah ruma susun namun anda tempati sendirian.
Kelemahannya,sewanya lebih mahal dari shared hosting.Untuk melakukan konfigurasi, anda juga perlu untuk mengenal jaringan.
Kelebihannya,Situs anda relatif lebih stabil karena tidak akan terganggu oleh situs tetangga seperti yang ada pada shared hosting.

Biaya untuk menyewa hosting dan domain

Khusus untuk domain paling murah biasanya antara Rp 70 ribu/pertahun sampai Rp 250 ribu/tahun.tergantung dari ekstensi domain yang anda pilih.
Dan biaya hosting Ishared hosting)  saja bisa dibayar perbulan atau ditotal bayar pertahun.
Biaya shared hosting ada yang mulai Dari mulai hanya Rp 1000 rupiah perbulan hingga ratusan ribu perbulan.Tergantung spesifikasi dan fitur webserver yang di order,seperti kapasitas penyimpanan dan bandwidth.

• Cara memilih webhosting yang bagus

Yok tunggu apalagi,jika merasa sudah siap dengan situs pertama ,,mulailah sekarang juga!!
Untuk Cara menginstall situs,step step nanti kita bahas pada artikel berikutnya.

Membuat NavBar dropdown menu dengan CSS

Navigasi blog yang akan kita buat berikut adalah navigasi horizontal menu dropdown dengan hanya menggunakan CSS.
Karena hanya dengan menggunakan CSS,cara memasangnya pun menjadi cukup simpel.Disamping itu menu dropdown horizontal ini tidak akan memberatkan loading blog kamu.

Jika kamu membutuhkan navigasi lebih banyak untuk beberapa halaman,menu dropdown adalah solusi yang tepat untuk menghemat tempat.

Apa keistimewaan NavBar dropdown berikut?..

• Desain yang bagus
• Mudah memasangnya untuk blogger
• Bekerja baik pada sebagian besar browser
• Mudah dicustomisasi
• Menampung banyak link untuk navigasi

Cara memasang NavBar dropdown menu dengan CSS untuk blogger:

1.Buka dashboard blog -> template -> Edit HTML -> temukan tag ]]</:b skin>
Kemudian pastekan code CSS berikut diatasnya:

/* Start Code Dropdown Menu*/
#pad {height:100px;}
#hmenu {padding:0; margin:0; list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#hmenu li {float:left; margin-right:1px;}
#hmenu li a {display:block; float:left; height:30px; line-height:30px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold;

padding:0 25px 0 10px;}


#hmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#hmenu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}
#hmenu li:hover {position:relative; z-index:200;}

#hmenu li:hover > a {
color:#fff;/* Menu Font Color */
background:#840; /* Menu mouse over Color */
}

#hmenu li:hover > a.sub {
color:#fff; /* Drop down item mouse over font Color */
background-color:#840; /* Drop down item mouse over background Color */
}
*/
#hmenu li.current a {color:#fff; background:#840;}


#hmenu li a.sub {
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiukJNxNekpO_Yt6Udf6e6J2kyZ7CH7ggs0ji6P6koSqotdXERSSutH0o9hIkDcS2aZqYeWY65e4cnxNhAdFdNQY_mY8feW5ql8QTqfXDWpyF19uqQsYjZVgFJ9BT3PauC5EdTnVXIbOSI/) /* Down arrow image */
no-repeat right center;
}

#hmenu :hover ul {left:0; top:30px; width:120px; background:#444;}

/* keep the 'next' level invisible by placing it off screen. */
#hmenu ul,
#hmenu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#hmenu :hover ul :hover ul
{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}

#hmenu :hover ul li {margin:0; border-top:1px solid #666;}
#hmenu :hover ul li a {
width:120px; /* Width of sub menu item */
padding:0; text-indent:10px;
background:#333; /* Drop down background color */
color:#ccc; /* Drop down item font Color */
height:30px; line-height:30px;}
#hmenu :hover ul li a.fly {background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53uSZWR9r3tOi_7wM-Vk_R42Yt0YRdBeVbN2jUpuZEIlp1jXr4dvy7TH2zj5tPhs3aUCCm6u9ZHoUWrdZ4krKf1MJDmuUZOaE61aZmTtOwWyH8q7HK-Sa5uoq4EBNuKulcF_LtmFxh2s/) no-repeat right
center;}

#hmenu :hover ul :hover {background-color:#c60; color:#fff;}
#hmenu :hover ul :hover a.fly {background-color:#c60; color:#fff;}

#hmenu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#333; /* Dropdown Sub Menu background color */
color:#ccc; /* Dropdown Sub Menu font color */
}
#hmenu :hover ul :hover ul :hover {
background-color:#c60; /* Dropdown Sub Menu mouse over color */
color:#fff;/* Dropdown Sub Menu mouse over font color */
}

/* End code dropdown menu */

2.Memasang kerangka navbar dorpdown bisa diletakkan di bawah header melalui EDIT TEMPLATE ,atau secara langsung dari dalam template.Bisa juga dipasang melalui widget dibawah header (jika ada preferensinya),yaitu Add new widget ->  HTML/Javascript dan tambahkan code kerangka dari navbar dropdown berikut:

<ul id="hmenu">
<li class="current"><a href=""><b>Home</b></a></li>
<li><a href="About Us"><b>About Us</b></a></li>

<li><a class="sub" href="#"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="sub"><a class="fly" href="#url">Dropdown two<!--[if gte IE

7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 2.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 2.3</a></li>
<li><a href="#url">Dropdown 2.4</a></li>
<li><a href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 5.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="#"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown one</a></li>
<li><a href="#url">Dropdown two</a></li>
<li><a href="#url">Dropdown three</a></li>
<li><a href="#url">Dropdown four</a></li>
<li><a href="#url">Dropdown five</a></li>
<li><a href="#url">Dropdown six</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li id="support"><a href="#"><b>Menu</b></a></li>
</ul>


Silahkan menambahkan link link navigasi milik kamu dengan cara mengganti link/URL pada kerangka diatas sesuai dengan keinginan.

3.Simpan template - Selesai.

Cara Mengatasi terjadinya Duplikat Content pada blogger

SEO dasar yang paling penting untuk optimasi search engine adalah meminimalisir terjadinya duplikat konten.Semakin banyak duplikat kontent yang terjadi,maka harapan untuk semakin memperamping alexa adalah sulit.Yang ada hanya semakin menggendutnya alexa rank blog,dimana hal ini posisi SERP blog akan semakin terperosok kebawah.
Mau ingin bukti?,,,,,biarkan saja hal ini terjadi untuk beberapa lama dan silahakan pantau alexa rank blog kamu di alexa[dot]com.

Semakin banyak error 404 pada webmaster tools juga bisa semakin mempersulit untuk merampingkan alexa rank.Error 404 bisa terjadi karena berbagai sebab, namun masah error 404 saya bahas dipostingan berikut :Cara mengatasi error 404 di webmaster tools

Sekarang kita kembali kepada masalah duplikat konten.Apa yang dimaksud dengan duplikat konten dan penyebabnya?..

1.Duplikat konten yang pertama adalah adanya dua atau lebih artikel yang sama untuk web yang berbeda pada hasil pencarian search engine.Namun untuk yang ini tidak terdeteksi pada webmaster tools google.Hal ini terjadi karena tindakan copypaste artikel ,sehingga mesin pencari menemukan dua atau lebih artikel dengan konten dan judul yang sama.Untuk duplikat konten yang ini,tidak bisa kita atasi sendirian karena bisa dilakukan oleh pemilik blog yang berbeda.Yang diperlukan hanyalah kesadaran masing masing blogger untuk menciptakan artikel sendiri yang unik.Saya kira penjelasan untuk duplikat kontent yang ini hanya sampai disini saja.

2.Duplikat kontent yang kedua adalah adanya dua atau lebih konten yang dianggap sama pada satu alamat blog dan terindex oleh mesin pencari.
Penyebabnya bukan hanya adanya dua atau lebih artikel yang sama pada satu alamat blog.Namun dua atau lebih judul serta deskripsi blog yang sama bisa walaupun artikelnya berbeda dideteksi sebagai duplikasi konten.Untuk yang ini bisa kita ketahui melalui alat webmaster atau webmaster tools google.

Kategori duplikat kontent pada webmaster tools.

1.Penggandaan title
Ada dua atau lebih title yang sama pada halaman halaman blog.Hal ini terjadi karena halaman halaman tersebut terindex semua oleh mesin pencari google.Semakin banyak jumlah halaman yang memiliki title yang sama,akan tidak baik dan harus segera diatasi.

2.penggandaan deskripsi
Terjadi dua atau lebih halaman halaman blog yang memiliki deskripsi sama.Dan halaman dengan deskripsi sama tersebut terindex oleh mesin pencari google.

Penyebab dan Cara mengatasi terjadinya duplikat kontent pada blogger.

#Penyebab pertama,khusus untuk template blogger biasanya halaman index, arsip dan halaman kategory otomatis akan menghasilkan title dan deskripsi yang sama.

Cara mengatatasinya
1.Menambahkan canonical,yang bertujuan hanya mengizinkan robot untuk mengindex halaman item saja.
Pasang canonical berikut setelah tag <head>
<link expr:href='data:blog.url' rel='canonical'/>

Khusus untuk halaman Arsip,coba dengan membatasi pengindexan dengan tag meta khusus,pasang setelah code <head>:

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex,follow' name='robots'/>
<meta content='noindex,follow' name='googlebot'/>
</b:if>

2.Membatasi URL pengindexan robot dengan  memasang robots.txt (lihat cara membuat robots.txt blogger dibawah).

#Penyebab yang kedua karena menambahkan tag meta deskripsi yang sama untuk seluruh halaman dan item blog.

Solusinya,kamu tidak perlu menambahkan tag meta deskripsi sendiri pada template,karena fitur blogger yang baru sudah dilengkapi meta deskripsi secara otomatis.Dan untuk menambahkan deskripsi masing masing item bisa dilakukan secara manual pada saat melakukan posting.

Jika template kamu masih da tag meta seperti:

<meta content='ini adalah deskripsi dari blog' name='description'/>

Buang saja tag meta diatas dan manfaatkan fitur terbaru blogger untuk membuat meta deskripsi.Caranya aktifkan dulu melalui dasboard blogger -> Setelan -> Preferensi penelusuran.

Aktifkan deskripsi penelusuran pilih ya,dan isi Deskripsi sesuai dengan niche blog kamu.Simpan perubahan.

Terakhir tambahkan Code berikut sebelum tag <head> jika belum ada pada template blog kamu:

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Setelah kamu melakukan pengaktifan tag meta diatas,maka setiap kali kamu posting bisa menambahkan deskripsi pada tiap tiap posting.Liha tamplan posting blog sebelah kanan:

Penambahan meta deskripsi pada setiap postingan blog bukan saja menghindari duplikat kontent,tetapi juga membantu robot search engine untuk mengindek postingan sesuai dengan kata kunci yang spesifik.


#Penyebab duplicat content yang lainnya pada blogger adalah adanya tampilan dinamis dan tampilan mobile yang terindex.Hal ini bisa diatasi dengan menggunakan robots.txt
Caranya: dasboard -> Setelan -> Preferensi penelusuran -> aktifkan robots.txt khusus -> masukkan code robot txt berikut:

User-agent: Googlebot
Allow: /
Disallow: /search
Disallow: /?m=0
Disallow:/view/*

User-agent:*
Allow: /
Disallow: /search
Disallow: /?m=0
Disallow:/view/*

Sitemap: http://www.blogkamu.blogspot.com/feeds/posts/default?orderby=updated

Gambar:

Semoga upaya mengatasi duplicat content diatas berhasil,paling tidak untuk meminimalisir.Rajinlah mengecek kesehatan situs kamu di webmaster tools google agar lebih cepat bertindak.

Happy Blogging

Membuat multitab Sidebar dengan JQuery

Kamu ingin menambah navigasi diblog kamu agar pengunjung tidak kesulitan menjelajahi fitur yang ada.Namun masalahnya kamu juga ingin menghemat tempat di sidebar agar tidak terlalu memanjang kebawah.Kalau begitu yang kamu pikirkan maka  multitab Sidebar ini adalah sebuah solusinya.

Jika kamu ingin menghemat tempat untuk widget di sidebar kamu,silahkan ikuti instruksi berikut untuk mendapatkannya.

Hal ini sebenarnya cukup sederhana dan tidak terlalu ribet memasangnya karena menggunakan jQuery.
Silahkan kamu coba untuk diterapkan kedalam blog kamu jika masih mementingkan navigasi sekaligus menghemat ruang.

Sebelumnya lihat dulu screenshoot berikut supaya lebih jelas apa itu multi tab sidebar:

Cara Memasang sidebar multi tab untuk blogger:
Pertama seperti biasa,login dashboard blogger -> Template -> Edit HTML -> Centeng Expand Template Widget.
Cari tag ]]</b:skin> kemudian pastekan code CSS berikut diatasnya:

/*--------Start Tabber CSS-------------------------*/
.tabber
{}
.tab_container {
border: 1px solid #0080FF;/*--Set Border Color  Tab Container--*/
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff; /*--Set The BackGround Color Tab Container--*/
}
.tab_content {
padding: 10px;
font-size: 1.1em;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height tabs--*/
border-bottom: 1px solid #0080FF;/*Bottom Border Color Tab Menu */
width: 100%;
}
ul.tabs li {
float: left;
margin-right:5px;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-bottom:1px solid #0080FF;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0; /*Set Background color Tab menu*/
}
ul.tabs li a {
text-decoration: none;
color: #000; /*Set tab warna link*/
display: block;
font-size: 1.1em;
padding: 0 5px;
border: 1px solid #fff; /*--Berikan warna dan bordr sesuai selera--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;/* Set Tab Mousehover Background Color */
}
ul.tabs li.active{
background: #fff;/* Set Active Tab Background Color */
color:#0080FF;
border:1px solid #0080FF;
border-bottom: 1px solid #fff; /*--Tab aktife yang terlihat--*/
}
ul.tabs li.active a:hover /*--Set the active tab mouse hover properties--*/
{
background: #fff; /* Set active Tab Mouse over Background Color */
}
/*----------Tabber CSS Code End--------------*/

Kamu bisa merubah style atau warna background sesuai dengan warna template kamu dengan mengedit CSS diatas.Isi deklarasi dari .tabber jika ingin membuat background yang berbeda,atau style yang kamu inginkan.

2.Paste code jQuery berikut sebelum tag </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
/*----------Start Tabber Script--------------*/
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
/*----------End Tabber Script--------------*/

Catatan: Jika template Kamu sudah ada script jQuery Library <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js' type='text/javascript'/> ,maka yang ada didalam code diatas dihapus saja.Mungkin hanya versinya yang berbeda,dan itu boleh diganti dengan versi yang lebih baru.

3.Sekarang carilah ID elemen <div id='sidebar-wrapper'> atau mungkin <div id='sidebar'> ,code diatas adalah ID elemen dan mungkin saja webmaster perancang template kamu tidak menggunakan nama ID seperti diatas.Akan tetapi kebanyakan perancang menggunakan nama seperti <div id='sidebar'> atau yang mirip.

Jika kamu sudah memastikan menemukan ID seperti diatas,pastekan code berikut setelahnya:

<div id='tabber'>
<ul class='tabs'>
<li><a href='#tab1'>Recent Post</a></li>
<li><a href='#tab2'>Statistic</a></li>
<li><a href='#tab3'>Subscribe</a></li>
</ul>

<div class='tab_container'>
<div class='tab_content' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
</div>

Diatas adalah kerangka dari tabber sidebar.Edit nama widget sesuai dengan kebutuhan kamu,lihat yang warna merah.

4.Simpan template blog kamu,sekarang beralihlah kedalam -> penyetelan -> Tata letak.
Tambahkan widget baru kedalam tabber sidebar berikut,atau kamu juga bisa menyeret widget yang sudah ada.Lihat Gambar berikut.

5.Selesai.

Smooth Scrolling Dengan JQuery

Fitur ini merupakan bagian dari fitur navigasi blog,dimana berguna bagi pengunjung untuk memudahkan dalam menjelajahi artikel di blog kita.
Jika dalam sebuah artikel didalam blog kita terlalu panjang kebawah,dengan Smoth Scrolling ini pengunjung akan dengan mudah terbantu untuk kembali ke top page dengan cara klik tombol.
Namanya Smooth Scrolling atau lebih tepat diartikan memutar dengan halus ke atas,efek "smooth" ini karena fungsi animasi yang dibuat dengan jQuery.

Fungsi scrolling ini sebenarnya sudah tidak asing lagi,namun jika ingin menggunakan efek scroll yang halus berikut caranya.

Langkah pertama tentu saja kamu harus login kedalam dashboard blogger -> Template -> Edit HTML.
Carilah Tag ]]</b:skin> dan pastekan code CSS berikut ini diatas Tag ]]</b:skin>:

#go-to-top {
padding:1px;
position:fixed;
bottom:0px;right:0px;
cursor:pointer;
}
#go-to-top img
{
height:40px;
width:35px;
border:none;
padding-right:5px;
}

Langkah ke 2 ,temukan tag </head> dan pastekan code berikut sebelum/diatas tag </head>
Catatan: Jika Code <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> sudah terdapat didalam template Blog Kamu,maka tidak perlu dipasang lagi.Jadi kamu hapus saja yang terdapat didalam code berikut.

/*----------Start Smooth Scrolling Script--------------*/
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script language='javascript' type='text/javascript'>
$(document).ready(function(){

    // hide
    $(&quot;#go-to-top&quot;).hide();
  
    // fade in
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() &gt; 100) {
                $(&#39;#go-to-top&#39;).fadeIn();
            } else {
                $(&#39;#go-to-top&#39;).fadeOut();
            }
        });

        // scroll to top
        $(&#39;#go-to-top img&#39;).click(function () {
            $(&#39;body,html&#39;).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});

</script>

Masih dihalaman EDIT HTML, sekarang langkah ke 3 temukan tag </body>,pastekan code berikut sebelum atau diatas tag </body>

 <a href='#' id='go-to-top'><img alt='Back to Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqtd5j6LeLprMQnCkCoSDKdp_EvpuKq3HAlfnYXelwFcI7un92YWPS1dxtvtA3ktWV3W90uvCnpjJKSoDIgywHBfOO_0gwD6Stn_G5lBHA5BnGFOB4si6wQNroqOqjEqVr3giw87YgfNii/'/></a>



Terakhir simpan template Kamu,dan lihatlah hasilnya.


Happy Blogging!

Cara mendaftarkan blog ke google Addurl

Mendaftarkan blog yang baru dibuat kedalam index Google search engine diperlukan agar mesin perayap mereka segera menemukan blog yang baru saja anda buat.Untuk kemudian mereka akan memasukkan kedalam database dan akan memunculkan pada hasil pencarian.Nantinya pengguna akan menemukan blog anda dari google search engine dengan katakunci yang sesuai dengan tujuan blog anda.
Ini adalah langkah pokok setelah sebuah blog selesai dibuat,jika anda menginginkan blog agar segera dirayapi  mesin telusur dan memperoleh pengunjung dari google.

Caranya anda cukup mengirimkan URL lengkap dari domain tingkat atas dari blog anda saja yang perlu dikirimkan di google add url.Dengan sendirinya googleboot nanti akan menemukan  URL yang menuju dokumen HTML/halaman lain dari blog anda pada saat merayapi index blog.Jadi anda tidak perlu mengirimkan semua URL yang meliputi masing masing dari halaman yang ada pada domain anda.Kirimkan domain utama/halaman index blog lengkap dengan http:// ,contohnya http://www.spiderbeat.com/ melalui form yang disediakan serta boleh mengisi tanggapan yang berisi materi atau katakunci dari blog anda.

Add Url blog baru anda pada Google di http://www.google.co.id/add_url.html