Cara Membuat Kolom Widget di Bawah Header Blog

Template yang sobat gunakan tidak menyediakan kolom widget yang sesuai dengan keinginan sobat? Kolom widget di bawah header blog sobat hanya tersedia satu kolom sedangkan sobat membutuhkan yang tiga kolom? Tenang, bisa sobat buat dengan cara ini.

Kolom widget di bawah header ini bisa dibuat dengan mudah. Jumlahnya bisa 1, 2, atau 3 pilih sesuai keinginan sobat, atau mau pasang ketiga-tiganya juga tidak apa-apa. Untuk ukuran juga bisa diatur dengan mudah jika sobat ingin mengganti ukuran yang saya tetapkan.
Oke, tak usah panjang lebar. Mari sobat simak langkah-langkahnya.

Cara Membuat Kolom Widget di Bawah Header pada Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Cari kode ]]></b:skin>. Gunakan Tombol ctrl+F
4. Masukan kode berikut diatas kode ]]></b:skin>.

#underheader { clear:both; } .underheader-widget {
padding:0px 10px 10px 10px; }

5. Kemudian cari kode <div id='main-wrapper'> atau <div id='main-wpr'> atau sejenisnya. Setiap template memiliki elemen yang berbeda. Namun pada umumnya ditulis dengan kode <div id='main-wrapper'>. Sobat harus berusaha mencari elemen ini jika memang kode elemen pada template sobat berbeda  dengan kode elemen yang saya contohkan.
6. Pilihlah beberapa kode di bawah ini dan kemudian letakan di atas kode <div id='main-wrapper'> atau <div id='main-wpr'>.

• Satu Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 100%; float: left;
margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes'
style='float:left;'/>
</div>
</div>

• Dua Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
</div>

• Tiga Kolom Widget.

<div id='underheader'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='col3' preferred='yes' style='float:left;'/>
</div>
</div>

#Keterangan, untuk ukuran sobat bisa ubah pada nilai "width".

7. Klik simpan, selesai dan sobat lihat hasilnya.
Contoh hasil pemasangan dua kolom widget.

Read more

Cara Membuat Widget Bergerak di Blog

Sobat memiliki widget bagus dan pengunjung harus mengetahui keberadaan widget tersebut? Dengan Membuat Widget yang bergerak dapat menarik perhatian para pengunjung Blog untuk melihat widget tersebut. Atau sobat memiliki widget yang memakan banyak tempat namun hanya ingin memberikan tempat yang minim pada widget tersebut? Dengan membuat widget yang bergerak widget tersebut dapat menggunakan tempat yang minim namun isi pada widget itu bergerak secara otomatis sehingga seluruh isi widget dapat dilihat pengunjung.
Untuk membuatnya sangat mudah, hanya dengan menyisipkan kode widget dari Marquee pada HTML widget yang akan sobat berikan efek bergerak. Jadi, cara ini tidak dapat diterapkan pada widget tanpa kode HTML.
Dengan cara ini ada beberapa pilihan efek bergerak. Dan ketika widget bergerak, widget akan berhenti bergerak saat disentuh cursor. Jadi tidak menyulitkan pengunjung jika ingin meng-klik salah satu isi pada widget.

OK, langsung saja. Cara Membuat Widget pada Blog Bergerak:
1. Login ke Akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambah gadget pada posisi yang sobat inginkan.
4. Pilih HTML/Javascript.
5. Masukan kode widget sobat dengan menyisipkan kode efek bergerak. Berikut beberapa pilihan kode efek bergerak:

• Gerak Bolak-Balik.

a. Gerak Horizontal.

<marquee behavior='alternate' align='center' direction='right' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Hasil:
Masukan Teks atau Script widget Disini

b. Gerak Vertikal.

<marquee behavior='alternate' align='center' direction='up' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Hasil:
Masukan Teks atau Script widget Disini

• Gerak Berulang-ulang.

a. Dari kanan ke kiri atau sebaliknya.

<marquee behavior='scroll' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Hasil:

Masukan Teks atau Script widget Disini
b. Dari bawah ke atas atau sebaliknya.

<marquee behavior='scroll' align='center' direction='up' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukan Teks atau Script widget Disini</marquee>

Hasil:

Masukan Teks atau Script widget Disini

Keterangan:

Ubah tulisan berwarna biru dengan teks atau kode Widget yang sobat inginkan.
Dan sobat dapat mengubah kode berwarna merah sesuai dengan yang diinginkan.

6. Klik Simpan, dan Selesai.

Read more

Cara Membuat Kolom Widget di Bawah Blog

Ada kalanya sobat Blogger membutuhkan kolom widget baru untuk Blog sobat yang posisi, ukuran dan jumlahnya sesuai dengan keinginan sobat.
Kali ini saya dapat masalah, yaitu kolom widget pada blog saya tersedia sebanyak 3 kolom. Sedangkan saya membutuhkan kolom baru yang menyediakan 2 kolom untuk widget.
Setelah saya cari cara untuk menambahkan kolom widget akhirnya cara tersebut ditemukan.
Berikut Cara Membuat Kolom Widget Baru di Bawah Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Klik Edit HTML.
4. Centang "Expand Template Widget".
5. Cari kode ]]></b:skin>.
6. Masukan kode berikut di atas kode ]]></b:skin>.

#footer-column-container {clear:both;
}
.footer-column {padding: 10px;
}

7. Cari kode <div id='footer'> atau kode <div id='footer-wrapper'> atau kode <div id='credits'>.
8. Letakan kode berikut dibawah kode <div id='footer'> atau <div id='footer-wrapper'>. Untuk alternatif, letakan kode berikut diatas/dibawah kode <div id='credits'>. (dengan cara ini, kolom widget akan terdapat dibawah footer).

Untuk 1 kolom Widget

<div id='footer-column-container'>
<div id='footer2' style='width: 100%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
</div>

Untuk 2 kolom widget

<div id='footer-column-container'>
<div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:right;'/>
</div>
</div>

Untuk 3 Kolom Widget

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>

9. Klik simpan dan selesai, sobat lihat hasilnya.
Contoh hasil pembuatan 2 kolom Widget.

Sekarang sobat dapat menambahkan widget pada kolom yang baru dibuat.

Read more

Cara Membuat Permalink di Blog

Permalink adalah link permanen yang terdapat pada suatu website/blog. Permalink ini dapat selalu muncul pada setiap akhir posting atau posisi lain yang ditentukan oleh pemilik blog. Permalink juga dipercaya dapat menaikan Page Rank dan Seo pada Blog kita.
Disini kita akan membuat permalink yang bagus yang dilengkapi dengan foto dan pesan-pesan pada permalink. Seperti punya saya ini yang menampilkan pesan-pesan agar artikel tidak di coppy dan disebarluaskan dengan sembarangan. Jika sobat membuat permalink dengan cara yang saya ulas ini, hasilnya akan seperti berikut.

Ok, kita mulai ke pembahasan. Cara Membuat Permalink di Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Klik Edit HTML.
4. Centang "Expand Template Widget".
5. Cari kode ]]></b:skin>, agar lebih mudah gunakan tombol ctrl+F.
6. Letakan kode berikut diatas kode ]]></b:skin>.

.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

Pada kode diatas terdapat kode-kode warna yang tidak bisa saya tandai semua, bisa sobat ubah.

7. Cari kode <data:post.body/>, dalam template saya terdapat beberapa kode tersebut. Jika sobat mengalami hal yang sama, cobalah satu-persatu kode tersebut.
8. Masukan kode berikut tepat dibawah kode <data:post.body/>.

<!-- Permalink -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Game, Software, Blogging, Information</h4>
<div class='kontainer'>
<img alt='RegiBrader' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9HUTNhw40eebz65TKu9b2fOUwAzWHGLKwBNglDeD5uuF8lWggbGfJIT8U5RXFx1LnUGGyZzMcmFZhOxKa0ReNOnnH1eLTNHfGAGt77O8qXwa3WvWdburFVnx0O7p8Fgo3pWCjMNslXGA/s1600/168557_615786695102730_1951750680_n.jpg'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Saling menghargai kreatifitas sobat Blogger.
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://regibrader-free.blogspot.com/2013/03/cara-membuat-permalink-di-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink -->

Keterangan: Tulisan berwarna Hijau adalah deskripsi Blog sobat, Tulisan berwarna Ungu adalah alt gambar, URL berwarna merah adalah gambar yang akan sobat tampilkan di permalink, Tulisan berwarna Biru adalah pesan-pesan yang akan sobat tampilkan di permalink.

9. Ubah deskripsi blog, alt gambar, gambar, dan pesan-pesan yang akan sobat tampilkan di permalink sesuai dengan yang sobat inginkan.
10. Klik Simpan Template.

Selesai, permalink telah terpasang di Blog sobat.

Read more

Cara Menghapus Broken Link pada Blog

Broken Link adalah link yang rusak atau URL yang sudah tidak berfungsi lagi. Jika pada Website/Blog sobat terdapat Broken Link tersebut, tentunya akan sangat berpengaruh buruk pada Blog sobat. Google atau search engine lainya akan menganggap Blog sobat sebagai spam. Dan tentunya akan membuat page rank Blog sobat semakin merosot.
Maka dari itu, sobat segera lah cek apakah di Blog sobat terdapat Broken Link. Jika memang ada Broken Link di Blog sobat janganlah dibiarkan, segeralah untuk menghapusnya.


Berikut adalah salah satu cara mengecek dan menghapus Broken Link pada Blog:

1. Masuk dan Login ke Google Webmaster Tools.
2. Pilih dan klik pada nama Blog yang akan sobat hapus Broken Link-nya.
3. Perhatikan pada menu bagian kiri, Klik Kesehatan/Health dan pilih Kesalahan Perayapan/Crawl Error.

4. Klik pada kotak yang menampilkan adanya kesalahan, disini contohnya pada Tidak Ditemukan/Not Found.

5. Akan tampil daftar URL yang rusak. Karena URL pada daftar itu belum lengkap (sebagian URL tidak dituliskan), maka sobat unduh dahulu URL tersebut dengan cara, centang semua URL dan  klik Unduh/Download. (Pengunduhan dengan Mode CSV)

6. Klik menu Pengoptimalan dan pilih Hapus URL.

7. Buka URL hasil Pengunduhan. Coppy URL yang menjadi Broken Link.

8. Klik Buat Permintaan Penghapusan Baru/ Create a New Removal Request. Pastekan URL Broken Link disini dan klik Terus/Continue.

9. Akan terbuka halaman baru dan klik Kirim Permintaan/ Submit Request.

10. Lakukan langkah 7-9 berulang kali untuk menghapus Broken Link satu persatu.
Akan ada status "tertunda". Karena sobat hanya mengirimkan permintaan penghapusan Broken Link, pihak Google tidak langsung memproses penghapusan tersebut. Jadi membutuhkan waktu sob.

Jika Broken Link telah berhasil dihapus, kembali ke menu Kesehatan/Health dan pilih Kesalahan Perayapan/Crawl Errors. Klik Tidak Ditemukan/Not Found. Centang Semua URL Broken Link yang telah dihapus dan Klik Tandai Sebagai Telah Diperbaiki/Mark As Fixed. Hal ini dilakukan untuk menandai Broken Link yang telah diperbaiki, agar sobat tidak bingung ketika muncul Broken Link baru.

Demikian pembahasan Tentang Menghapus Broken Link pada Blog, Semoga bermanfaat, dan Semoga Website/Blog sobat terbebas dari Broken Link.

Read more

Cara Membuat Gambar Berputar pada Widget Popular Posts

Gambar pada Widget Popular Posts mempunyai efek berputar, akan mempercantik tampilan Blog. Ketika cursor disentuhkan pada gambar di widget popular posts, gambar tersebut akan berputar. Mudah-mudahan dengan ini dapat mengurangi kejenuhan pada tampilan Blog sobat.
Memang tampilan pada blog tidak terlalu dipentingkan. Yang penting itu kerapihan, konten-konten yang berkualitas, dan SEO yang baik. Namun tidak ada salahnya untuk mempercantik tampilan blog. Asalkan tidak memasang widget yang tidak perlu dan malah memberatkan Blog sobat ketika dimuat.
Ok, jika sobat ingin membuat gambar pada widget popular posts berputar, beginilah langkah-langkahnya:
1. Login ke akun Blogger sobat.
2. Pastikan widget popular posts telah terpasang di Blog sobat. Jika belum pasanglah terlebih dahulu. Saya yakin hal tersebut gampang dan tidak perlu panduan khusus.
3. Jika telah terpasang, sobat masuk pada bagian template.
4. Klik Edit Template.
5. Cari kode ]]></b:skin> , agar lebih mudah gunakan tombol ctrl+F.
6. Masukan kode berikut diatas kode ]]></b:skin>.

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

7. Klik simpan.

Selesai, silakan lihat hasilnya. Gampang sekali kan sob.

Read more

Cara Mengganti Favicon/Logo Blog di Tab Browser

Pada awalnya logo Blog sobat di Tab Browser adalah logo bawaan dari Blogger. Namun sobat ingin menggantinya dengan logo lain agar beda dari Blog-Blog lain dan memiliki kekhasan tersendiri. Apakah logo Blog sobat di tab browser bisa diganti? Bisa kok...
Pertama, sobat harus menyiapkan dahulu  gambar yang akan dijadikan ikon Blog. Jika gambar sobat ingin berbentuk logo, sobat bisa membuat logo tersebut pada software AAA Logo.  Upload gambar tersebut pada situs penyimpanan gambar seperti photobucket. Hal ini dilakukan untuk memperoleh URL gambar. Namun, menurut saya tidak perlu situs lain untuk hal seperti ini. Dengan Blogger pun masih bisa.
Berikut cara untuk mengetahui URL gambar:
-Sobat insert gambar pada laman>>laman baru atau entri>>entru baru dengan mode compose.
-Lalu sobat periksa pada mode html, maka URL gambar akan diketahui.

Setelah URL gambar ditemukan, maka penggantian logo dapat dilakukan.
Berikut langkah-langkah Mengganti Logo Blog di Tab Browser:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode </head>, gunakan tombol ctrl+F.
5. Masukan kode berikut di atas kode </head>.

    <link href='MASUKAN URL GAMBAR' rel='shortcut icon'/>

Masukan URL gambar yang akan dibuat logo pada tulisan berwarna merah.
6. Klik Simpan. Selesai, lihat hasilnya.

Read more

Cara Memasang Widget Readers by Feedburner di Blog

Readers by Feedburner adalah aplikasi dari Feedburner yang berfungsi untuk menghitung jumlah pembaca Blog yang dikirim ke e-Mail mereka (subscribers) melalui Feedburner.
Aplikasi ini juga dapat dijadikan widget di Blog sobat untuk mempermudah sobat mengetahui jumlah pembaca Artikel Blog sobat di Feedburner. Namun sebelum sobat memperoleh Widgetnya, terlebih dahulu sobat harus mendaftarkan Blog sobat ke Google Feedburner. Silakan Baca Cara Mendaftarkan Website/Blog di Google Feedburner.
Jika sobat telah mendaftarkan Blog sobat ke Google Feedburner, maka sobat dapat mengikuti langkah-langkah untuk memperoleh widget Readers by Feedburner.
1. Login ke akun http://feedburner.google.com/.
2. Pilih dan klik Blog yang sobat perlukan untuk Widget Readers by Feedburner.

3. Masuk pada tab "publicize", pilih "Feedcount", kemudian atur warna body dan text widget, setelah selesai klik "Activate".

4. Sobat akan diberikan kode HTML dari Feedburner. Coppy kode tersebut.

5. Login pada akun Blogger sobat.
6. Masuk pada bagian Tata Letak.
7. Klik Tambah gadget di posisi yang akan dipasang Widget Readers by Feedburner.
8. Pilih HTML/Javascript.
9. Pastekan kode HTML dari Feedburner.
10. Klik Simpan.

Selesai, widget telah terpasang di Blog sobat.

Read more

Cara Mendaftarkan Website/Blog di Google Feedburner

Google Feedburner merupakan layanan umpan web dari Google. Feedburner terdiri dari RSS feed dan alat pengelola untuk Blogger dan Podcaster, dan aplikasi publikasi lain yang merupakan website. Feedburner menyediakan analisis lalu lintas pengunjung dan sistem periklanan.
Pendaftaran Blog ke Google Feedburner sangat bermanfaat untuk membantu sobat menganalisis lalu lintas pengunjung pada Blog sobat. Berikut tahapan-tahapan mendaftarkan blog/membuat akun di Google Feedburner.
1. Masuk ke halaman http://feedburner.google.com/.
2. Masukan URL Blog sobat, centang pada kotak "i am a podcaster" dan klik next.

3. Pada halaman selanjutnya, pilih opsi pertama dan klik next.

4. Langkah berikutnya, Masukan Feed Title (Judul Umpan) dan Feed Address (Alamat Umpan). Lalu klik next.

5. Pada halaman berikutnya akan tampil tulisan "Congrats! Your FeedBurner feed is now live. Want to dress it up a little?", klik next.

6. Selanjutnya sobat akan diminta untuk memilih dan memasukan info-info tentang blog sobat. Isi sesuai keinginan sobat. Jika telah selesai klik next.

7. Tahap berikutnya sobat akan diminta untuk mencentang kelengkapan Feedburner. Centang sesuai dengan yang sobat butuhkan. Klik next jika telah selesai.

Pendaftaran Blog/pembuatan akun di Google Feedburner telah selesai. Sobat dapat mendapatkan berbagai informasi dari Feedburner.

Read more

Cara Mendaftarkan Website/Blog ke Alexa.com

Alexa rank merupakan sebuah metode peringkat yang akan memantau perkembangan blog sobat dari analisa traffic, keyword dan memberikan Rangking pada Blog sobat menurut alexa.com. Situs Alexa ini juga merupakan yang paling popular dan banyak digunakan para Blogger untuk memantau Website/Blog mereka.
Kali ini saya akan membahas tahapan-tahapan membuat akun/mendaftarkan website/blog di Alexa.com

• Membuat akun/mendaftarkan Blog ke Alexa Rank.

1. Masuk ke situs http://www.alexa.com/.
2. Pilih dan klik tulisan create an account.

3. Isi e-Mail sobat dan Nickname, setelah itu klik register.

4. Periksa e-Mail sobat, dan konfirmasi registrasi dari Alexa. Klik link yang diberikan Alexa.

5. Tentukan Password akun Alexa sobat. Klik submit Password.

6. Akan muncul tampilan berikut tanda sobat telah dapat me-manage akun Alexa sobat.

7. Masuk kembali ke Home Alexa. Masukan URL blog sobat pada kotak yang disediakan dan klik ikon search.

8. Selanjutnya akan muncul tampilan berikut, klik get detail.

Pembuatan akun selesai, sobat akan diberikan info detail dari Alexa tentang Blog sobat.

Setelah sobat terhubung dengan Alexa, baiknya sobat memasang Alexa Toolbar untuk membantu meningkatkan Alexa rank Blog sobat dan mempermudah sobat untuk memantau perkembangan Alexa rank Blog sobat. Kunjungi http://www.alexa.com/toolbar.

Read more

Cara Memasang Widget Alexa Rank di Blog

Alexa rank merupakan sebuah metode peringkat yang akan memantau perkembangan blog sobat dari analisa traffic, keyword dan memberikan Rangking pada Blog sobat menurut alexa.com. Situs Alexa ini juga merupakan yang paling popular dan banyak digunakan para Blogger untuk memantau Website/Blog mereka.
Alexa juga menyediakan widget Alexa Rank untuk dipasang di Blog sobat agar mempermudah sobat melihat hasil pantauan Alexa Rank terhadap Blog sobat. Sebelum sobat memasang widget ini, terlebih dahulu sobat harus mendaftarkan Blog sobat di Alexa.com. Baca Cara Mendaftarkan Website/Blog ke Alexa.com.
Setelah sobat telah mendaftarkan Blog sobat ke Alexa.com., maka kita bisa memulai membahas langkah-langkah memasang Widget Alexa Rank di Blog:

• Memasang widget Alexa Rank di Blog.

1. Masuk ke Halaman Alexa Site Widget, http://www.alexa.com/siteowners/widgets.
2. Sobat akan diberikan beberapa pilihan kolom. Masukan URL Blog sobat pada salah satu kolom yang sobat inginkan dan klik Build Widget.

3.Sobat akan diberikan beberapa kode Widget. Pilih salah satu kode Widget yang sobat inginkan dan coppy kode tersebut.

4. Login ke akun Blogger sobat.
5. Masuk pada bagian Tata Letak.
6. Klik Tambah Gadget di posisi yang sobat inginkan.
7. Pilih HTML/Javascript.
8. Pastekan kode Widget dari Alexa disini.

Nah, selesai sob. Semoga bermanfaat...

Read more

Cara Membuat Tab Multi Widget di Blog

Tab Multi Widget adalah penggabungan beberapa Widget pada satu kolom dengan Tab. Tab Multi widget ini sangat berguna jika Blog sobat mempunyai terlalu banyak widget. Sobat bisa menggabungkan widget-widget tersebut pada satu kolom dengan Tab diatasnya. Jadi sobat tidak perlu menyediakan area yang luas untuk widget yang banyak.
Oke langsung saja ke langkah-langkah pembuatanya.

• Widget tanpa kode HTML/Javascript.

1. Login ke kaun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> , di atas kode </head>.
6. Klik simpan Template.
7. Selanjutnya masuk ke bagian Tata Letak.
8. Klik Tambah Gacget di posisi yang sobat inginkan.
9. Pilih HTML/Javascript.
10. Masukan kode berikut.

<style type="text/css">

        .blogtabs {padding: 0px !important;border: 0 solid #bbb;}

        .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}

        html .blogtabs h2.active {background: #fff;}

        .blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}

        .btab, #showtabs {display:none;}

        </style>

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

        <script type="text/javascript" src="http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>

        <script type="text/javascript">

        $(document).ready(function() {

        $('#showtabs').simpleBlogTab ({organictabs: 3});

        });

        </script>

        <div id="showtabs"></div>

Keterangan, kode berwarna biru adalah kode-kode warna, kode berwarna hijau adalah kode-kode ukuran yang bisa sobat ubah. Sedangkan kode ({organictabs: 3}) adalah jumlah tab yang akan digabungkan dan sobat bisa sesuaikan.

11. Klik Simpan.
12. Letakan widget-widget yang akan digabungkan tepat di bawah widget yang baru saja dibuat.

Selesai, sobat dapat lihat hasilnya.

• Widget dengan kode HTML/Javascript.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode berikut diatas kode </head> .

<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>

6. Cari kode ]]></b:skin>,  agar lebih mudah gunakan tombol ctrl+F.
7. Masukan kode berikut di atas kode  ]]></b:skin>.

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Atas */
text-align: center;
height: 30px; /* Tinggi Menu Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "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: 3px 5px;
}

8. Klik Simpan Template.
9. Selanjutnya, Masuk ke bagian Tata Letak.
10. Klik Tambah gadget di posisi yang sobat inginkan.
11. Pilih HTML/Javascript.
12. Masukan kode berikut.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Letakkan konten menu 1 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 2 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 3 disini</div></div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterengan, kode warna merah adalah kode-kode ukuran, kode warna biru adalah kode-kode warna yang bisa sobat ubah. Masukan judul Tab pada tulisan berwaana hijau. Dan masukan kode HTML widget pada tulisan warna ungu.

Selesai, sobat dapat lihat hasilnya.

Demikian pembahasan tentang Membuat Tab Multi Widget di Blog. Semoga memberikan manfaat untuk sobat-sobat sekallian.

Read more

Cara Menghapus Widget pada Blog yang Sulit Dihapus

Pada Blog sobat terdapat widget yang sulit untuk dihapus? Sobat ingin menghilangkan widget tersebut atau ingin menggantinya dengan widget lain namun widget tersebut tetap bandel tidak mau hilang. Widget tersebut sobat anggap tidak berguna hanya membuat Blog sobat seakan menjadi sempit, segeralah menghapusnya.
Sedikit penjelasn dulu ni, agar jangan asal mengikuti langkahnya. Lebih baik lagi kalau disertai pemahaman. Pada bagian Tata Letak terdapat gadget yang tidak dapat dihapus contohnya widget Header, yang jika kita klik edit tidak ada pilihan hapus. Maka sobat harus edit HTML dulu agar gadget dapat dihapus.
1. Login pada akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Sentuhkan Cursor pada tulisan Edit di widget yang tidak dapat dihapus. Saya berikan contoh dibawah ini adalah pada Header Blog. Hal ini dilakukan untuk mengetahui nama Widget dalam script.

4. Nama widget telah diketahui yaitu, Header1.
5. Masuk pada bagian Template.
6. Pilih dan klik Edit HTML. 
7. Cari kode 'Header1', agar lebih mudah gunakan tombol ctrl+F. Pada lanjutan kode tersebut akan terdapat kode <b:widget id='Header1' locked='true'.
8. Ubah kode true menjadi false.
9. Simpan Template
Belum selesai nih sob. Sekarang gadget headernya sudah dapat dihapus.
10. Masuk pada bagian Tata Letak.
11. Klik Edit pada header yang akan dihapus.
12. Klik hapus pada gadget header tersebut.
Selesai, Lihat hasilnya.

Read more

Cara Verifikasi Website/Blog di Google

Verifikasi Website/Blog adalah cara agar Website/Blog sobat memiliki kepemilikan yang sah di mata search engine/mesin pencari. Verifikasi Website/Blog tentunya sangat bermanfaat bagi Blog sobat, diantaranya Blog sobat akan terindex dengan maksimal oleh mensin pencari.
Verifikasi Website/Blog ini sangat dianjurkan. Karena Blog sobat cepat terindex, maka Blog sobat dapat bersaing dengan sekian banyak Website/Blog yang ada.
Kali ini saya hanya membahas tentang cara verifikasi Website/Blog di mesin pencari Google. Pada google, hal ini dilakukan dengan alat Google Webmaster Tools. Simaklah langkah-langkah salah satu cara verifikasi Website/Blog di Google berikut:
1. Masuk terlebih dahulu ke akun Blog sobat.
2. Masuk ke Google Webmaster Tools dengan Tabs/Jendela baru.
3. Sobat akan diminta memasukan username dan password, maka isi sesuai dengan akun Google.
4. Setelah Login, maka biasanya akan tampil daftar Blog sobat. Jika ada Blog yang belum ditampilkan, maka klik Tambahkan Situs.

5. Setelah Blog sobat telah berhasil ditambahkan, maka kali ini mulai verifikasi-nya. Sobat gunakan cara yang paling mudah yaitu dengan metode copy paste meta tag. Sobat kembali ke halaman awal Google Webmaster Tools.
6. Pilih Blog yang akan diverifikasi, klik Kelola Situs dan pilih Tambahkan atau Hapus Pengguna.

7. Pada laman selanjutnya, Sentuhkan kursor pada box yang bertulisakan Pemilik. Akan muncul menu dropdown dan klik laman verifikasi pemilik.

8. Pilih Verifikasikan dengan menggunakan metode yang berbeda.

9. Klik pada Tag HTML, Tambahkan tag meta ke beranda situs Anda.

 10. Sobat akan diberi kode HTML, Copy kode tersebut.

11. Masuk ke akun Blogger sobat.
12. Masuk pada bagian Template dan pilih Edit HTML.
13. Paste kode meta tag tepat di bawah kode <head>. #Cari kode <head> dengan tombol ctrl+F. Setelah selesai, klik simpan Template.
14. Kembali ke halaman tempat meng-copy kode meta tag dan Klik Verifikasi.

15. Jika sobat melakukan langkah-langkah diatas dengan benar, maka akan muncul keterangan Success.

Demikian langkah-langkah verifikasi Website/Blog di Google dengan Google Webmaster Tools. Untuk Informasi lebih lanjut silakan cari Informasi tentang Cara Menggunakan Google Webmaster Tools di Mesin Pencari.
Terimakasih...

Read more