Membuat widget multi tab

 Membuat widget multi tab

Dari Sekian banyak tutorial yang saya baca, cara Membuat Multi Tab View yang paling srek di hati saya adalah totorial milik blog angga. Multi tab view ini diartikan sebagai widget tab menu dengan tiga kolom.

Oleh karena itu setelah saya praktekkan 3 hari ini, maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang bagaimana Cara Membuat Tab View Menu 3 Kolom di Blog atau multi tab view.
hasilnya seperti di bawah ini:

Sesuai judulnya Multi Tab View Menu 3 Kolom, berarti dalam satu tampilan sidebar widget akan ada 3 buah widget (bisa apa saja, contoh: Buku Tamu, script Top Post atau Komentar, Kumpulan Banner dan sebagainya), cara ini juga akan membuat blog sedikit lebih rapi dan tidak banyak menguras tempat.

Ok, buat teman-teman yang ingin membuat Multi Tab View Menu 3 Kolom ini, silahkan ikuti langkah-langkah di bawah ini:

Cara pertamax :
1. Login ke akun Blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode berikut: ]]></b:skin>
4. Lalu copy kode di bawah ini dan taruh persis berada di atas kode tadi:

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

5. Jika sudah maka lanjutkan dengan mencari kode ini: </head>
6. Lalu copy kode di bawah ini dan pastekan di atas kode tadi:

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

7. Save templates dan lanjutkan ke langkah selanjutnya,

8. Klik Design/Rancangan >> Page Element >> Add a Gadget >> HTML/Javascript,

9. Copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript lalu atur (edit) sesuai dengan keterangan masing-masing:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

10. Jika dirasa sudah benar, lalu Save. (Jika dilakukan dengan benar maka hasilnya akan seperti milik saya).



Cara ke-2 Bagi sobat yang tidak mau otak-atik html, cukup tambah gadget, berikut solusinya :
Cara Membuat Multi Halaman atau multi tab view tanpa edit html
 
Pergilah ke Dashboard, lalu pilih Tata Letak,kemudian pilih Add New Widget/Tambah Gadget/Element Baru,pilih HTML/Javascript.

Letakkan kode berikut:

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://scriptforyou.googlecode.com/files/tabview.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

Seperti itulah Cara Membuat Multi Tab View Menu 3 Kolom di Blog, dari sejuta trik blogger semoga bisa bermanfaat dan selamat mencoba. Apabila sudah membuat widget multi tab view atau menu tiga kolom ini ingin dihilangkan pada halaman posting, atau hanya menampilkan pada halaman home page saja, buka posting terdahulu saya di
http://www.uki-cool.blogspot.com/2011/03/cara-membuat-widget.html

Modifikasi Link Judul Posting Dengan Keterangan

 Modifikasi Link Judul Posting Dengan Keterangan

Sebenarnya masih banyak tutorial tentang modifikasi judul link. Tanpa basa basi langsung saja trik modifikasi link judul posting dengan keterangan. 


Klik Rancangan/Design kemudian Edit Html dan klik kotak kecil Expand Template Widget

Cari kode dibawah ini

<a expr:href='data:post.link'><data:post.title/></a>

Silahkan hapus dan ganti dengan kode ini

<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

Lanjut dengan mencari kode dibawah ini

<a expr:href='data:post.url'><data:post.title/></a>

Hapus dan ganti dengan kode ini

<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>

Simpan Template. (Contoh : Letakkan kursor mouse sobat di halaman judul di atas. Tunggu beberapa detik maka akan muncul keterangan sesuai judulnya)

Kata para master modifikasi link judul posting dengan keterangan akan memperkuat seo blog kita. Dengan adanya keterangan pada judul posting blog kita tentunya menjadi no 1 di google akan semakin cepat! So, selamat berbloging.

teknik seo

Apasih SEO itu? berikut penjelasan dari wikipedia.

Optimisasi mesin pencari (bahasa Inggris: Search Engine Optimization, biasa disingkat SEO) adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.

Sejalan dengan makin berkembangnya pemanfaatan jaringan internet sebagai media bisnis, kebutuhan atas SEO juga semakin meningkat. Berada pada posisi teratas hasil pencarian akan meningkatkan peluang sebuah perusahaan pemasaran berbasis web untuk mendapatkan pelanggan baru. Peluang ini dimanfaatkan sejumlah pihak untuk menawarkan jasa optimisasi mesin pencari bagi perusahaan-perusahaan yang memiliki basis usaha di internet.

Ada dilema atau kebimbangan tentang SEO itu sendiri. Nah berikut ini adalah cara yang sering dilakukan dan berakibat buruk bagi blog. Berikut ini cara SEO Ala Sejuta Trik Blogger.

1. Tukar Link.

Tukar link merupakan cara pling mudah mendapat backlink dari blog berkualitas lain. Namun perlu diperhatikan jika blog yang kita tukaran link banyak spamnya, itu juga berpengaruh dengan blog kita.

2. Komentar Spam di Blog Lain.

Ada banyak sekali kerugian melakukan spam comment dengan blog lain. Untuk lebih jelasnya silakan cari tahu di google.

3. Validasi HTML

Ada 2 blog yang saya tau sudah valid xhtml yaitu deconstructioncode dan blognya milik hendroprayitno. Bukan maksud apa apa sih, dikarenakan blog mereka sudah tidak bisa dibuka lagi dan muncul pesan hanya undangan yang boleh membuka situs ini. Wah artinya valid template tidak menjamin blog jadi sukses dan berumur panjang. Beberapa layanan google memang tidak valid, tapi apakah ini sebuah jalan SEO agar tampil jadi no1? kalau saya sih menganggap validasi HTML itu adalah bagian dari keprofesionalan seorang SEO itu sendiri dalam mengedit HTML. Dengan maksud HTML blog tersebut tersusun dengan benar. Ya ga?

4. Menyewa Jasa SEO

Cara yang paling mudah namun berbayar yaitu dengan menyewa jasa master SEO yang menawarkan mempromosikan blog kita dan berada di peringkat no.1 Google. Seperti yang saya baca di google webmaster help. Google tidak menjamin website dari hasil jasa SEO. Apalagi yang bersifat fiktif. Artinya apakah kamu semua mendapat penjelasan dari cara mereka membuat web kita berada di peringkat atas google? Belum lagi jika google selalu update tentang alogaritmanya. Nah dari pada uang kamu terbuang percuma, mending usaha yang gratis2 aja.

5. Back Link
Back link berarti timbal balik antara link blog kita dengan beberapa situs. Semisal untuk pencarian "hotel di Indonesia" google akan memprioritaskan atau mementingkan blog yang mempunyai timbal balik dengan blog tersebut. Google juga akan mempertimbangkan dengan google map, google palace dll. Jadi sahabat tahukan bagaimana mengoptimalkan blog kita?ya kita harus mendaftar di beberapa layanan google tersebut untuk mendapat back link.

Nah itulah sedikit pengertian dan cara SEO Ala Sejuta Trik Blogger. Semoga sahabat2 bisa memahaminya.