Cara mengetahui jumlah klik dengan MyblogLog

Cara mengetahui jumlah klik dengan MyblogLog. 
Ada seorang teman yang bertanya pada saya tentang bagaimana cara agar jumlah klik pengunjung di sebuah link bisa ditampilkan, contohnya coba teman-teman Tips Blogger mengarahkan kursor pada banner atau link yang ada pada sidebar blog saya ini. Memang cara tersebut cukup membuat kita bingung, tapi cukup simple kok. Hanya perlu melakukan beberapa langkah dan beres deh.

Ok bagaimana caranya untuk menampilkan jumlah klik tersebut?. Yang pertama tentunya kamu harus mempunyai account  mybloglog  terlebih dahulu. Apabila sudah silahkan pilih bagian add website (ada di sidebar kiri mybloglog), klik link tersebut kemudian masukkan data-data dari blog yang kamu miliki. Ingat jangan salah ketika memasukkan data-data yang ada. Apabila sudah, silahkan ikuti langkah-langkah selanjutnya di bawah ini...

Apabila sudah melakukan langkah-langkah diatas, lanjutkan dengan langkah-langkah ini....

- Kembali ke halaman akun anda di mybloglog

- Pilih blog yang sudah kita submit tadi (lihat di sidebar sebelah kiri), klik "setting".

- Apabila kamu sudah mengklik Setting, maka kamu akan di arahkan ke halaman setting,,,disana kamu akan melihat kode yang harus dipasang pada blog. Lihat pada bagian paling bawah.

- Pada kode tersebut pada html blog kamu (halaman template sebelum </body> )

- Apabila sudah memasang kode tersebut, kembali lihat halaman setting. Disana kamu akan melihat bagian "ClickTagging", nah itulah yang harus kita setting. Centang atau pilih bagian/gambar pertama. 

kemudian klik "save profile change", selesai...selamat mencoba.

Sumber

Cara Meningkatkan Trafik Blog Atau Website

Cara Meningkatkan Trafik Blog Atau Website, mencari uang di internet atau memasarkan produk di internet tentunya akan sangat berkaitan dengan trafik website atau blog yang kita miliki. Semakin tinggi trafik website atau blog yang kita miliki maka akan semakin terbuka pula peluang yang lebih besar untuk mendapatkan apa yang kita targetkan.

Yang menjadi pertanyaan saat ini adalah, bagaimana cara meningkatkan trafik blog atau website ini? apa saja yang harus kita lakukan agar trafik website atau blog kita menjadi tinggi?. Baik saya akan menjelaskan sedikit cara mengenai hal tersebut, silahkan dibaca secara perlahan ya hehe...

- Cara sederhana pertama yang bisa kita lakukan adalah dengan cara bersilaturahmi ke website atau blog lain, tinggalkan komentar disana dan ajak mereka untuk mengunjungi blog atau website kamu juga.

- Cara sederhana kedua adalah dengan cara mengajak teman-teman kamu untuk membuka website kamu dan membaca artikel-artikel yang ada di dalamnya.

Perlu diingat bahwa trafik akan semakin berkembang seiring jalannya waktu, oleh karena itu kamu harus membuat artikel yang bermanfaat dan menarik guna membuat para pengunjung yang telah mengunjungi website atau blog kamu kembali lagi nantinya.

- Cara yang ketiga adalah dengan cara memasarkan atau mempromosikan website atau blog yang kamu miliki di situs social media seperti facebook, twitter dan juga youtube. Untuk melakukan hal ini kamu tentunya harus terlebih dahulu membangun komunitas di akun-akun social media tersebut.

- Cara selanjutnya yang tergolong sangat efekif adalah dengan cara seo (search engine optimization). Pengunjung yang tertarget akan mengunjungi website atau blog yang kamu miliki, sehingga trafik yang dimiliki oleh blog kamu adalah trafik yang benar-benar berkualitas. Salah satu langkah dalam seo ini adalah memilih keyword yang tepat. Tapi apabila anda masih bingung mengenai seo ini, anda bisa menghubungi www.halamansatu.com sebagai penyedia jasa seoterpercaya.

Sumber

Penyebab Seorang Blogger Tidak Sukses

Penyebab Seorang Blogger Tidak Sukses, Blogger, itulah sebutan bagi mereka  yang memiliki sebuah website atau blog dan kemudian merawat website atau blog tersebut untuk kepentingannya. Ada 2 golongan dalam blogger, yaitu golongan idealis dan juga golongan matrealis. Golongan idealis adalah mereka yang memanfaatkan blog hanya untuk mengisi hari-harinya dan bertujuan agar orang lain membaca tulisannya. Sedangkan golongan matrealis adalah mereka yang memanfaatkan blog untuk mencari uang atau pengasilan tambahan. Nah kamu termasuk golongan yang mana? hehe...


Berikut adalah beberapa point yang menyebabkannya...

1. Terlalu banyak pikir

Nah saya rasa banyak diantara kita yang terlalu banyak pikir ketika bertindak, terlalu takut untuk melakukan sesuatu sehingga menutup semangat yang ada.

2. Tidak fokus dan sukanya ikut-ikutan

Banyak blogger yang saya lihat mereka hobinya ikut-ikutan saja, apa yang ramai itulah yang mereka ikuti. Sebenarnya hal tersebut sangat salah, biasakan diri kita untuk fokus melakukan sesuatu. Lambat laun kita akan semakin menguasai hal tersebut dan akan memudahkan kita dalam mencari pundi-pundi rupiah atau dollar :) .

3. Tidak mau modal, maunya gratisan saja and nyari yang instant

Wah ini nih penyakit kebanyakan para blogger, maunya gratisan doank and instant. Harus diingat bahwa kita harus menyiapkan planning sebelum bergerak. Hal ini bertujuan agar apa yang kita harapkan dapat tercapai secara maksimal, harus diingat juga bahwa tidak ada yang instant dalam mencari rezeki, hal tersebut berlaku untuk pekerjaan online dan juga offline.

4. Sedikit-sedikit menyerah, semangat hanya beberapa hari dan pasrah

Penyebab terakhir yang biasa saya temukan adalah terlalu gampang menyerah, semangat hanya seperti anak-anak yang sedang diajak jalan oleh kedua orang tuanya hehehe. Kalau terus seperti ini maka bisa dikatakan "sukses" akan sangat jauh dari kamu.


Nah dari beberapa point di atas, kamu masuk yang mana? haha...jika ada yang mau menambahkan, silahkan...

Cara Memasang Game Di Blog Terbaru

Oleh Muhammad Farhan

Farhan Share - memasang seru ya bila di blog kita ada game, yap tentu saja. sekarang saya mau nge-share nih tentang bagaimana cara memasang game pada blog kita, tentunya dengan ada game yang simple tapi menarik membuat pengunjung blog kita menjadi tidak bosan saat berkunjung ke blog kita, jadi merekan ada kegiatan "sampingan" selain membaca artikel-artikel di blog kita.

Langsung aja deh ini dia cara-caranya :


1. Login ke Blogger


2. Klik Tata letak


3. Tambah gadget.


4. Pilih HTML/JavaScript


5. Anda tinggal memilih salah satu game di bawah ini lalu copy scriptnya, dan paste-kan ke box yang
    bertuliskan "Konten".

• Chess

<object width='430' height='300'><param name='movie' value='http://www.proprofs.com/games/swf/logic-games/chess.swf' />

<param name='FlashVars' value='id=90' />

<param name='allowScriptAccess' value='always' />

<param name='quality' value='high' />

<embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/logic-games/chess.swf' FlashVars='id=90' width='430' height='300' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'>

<a href='http://www.proprofs.com/games/chess/' target='_blank' title='Chess'>Chess</a> » <a href='http://www.proprofs.com/games/' title='Brain Games' target='_blank'>Brain Games</a></div>

Previewnya :

Chess » Brain Games

• Sudoku

<object width='430' height='300'><param name='movie' value='http://www.proprofs.com/games/swf/sudoku/sudoku.swf' />

<param name='FlashVars' value='id=26' />

<param name='allowScriptAccess' value='always' />

<param name='quality' value='high' />

<embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/sudoku/sudoku.swf' FlashVars='id=26' width='430' height='300' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'>

<a href='http://www.proprofs.com/games/sudoku/' target='_blank' title='Sudoku'>Sudoku</a> » <a href='http://www.proprofs.com/games/' title='Puzzle games' target='_blank'>Puzzle games</a></div>

Previewnya:

Sudoku » Puzzle games

• Word Search

<object width='430' height='300'><param name='movie' value='http://www.proprofs.com/games/word-search/swf/wse_w.swf' />

<param name='FlashVars' value='id=259&wordscount=6&gametime=3600' />

<param name='allowScriptAccess' value='always' />

<param name='quality' value='high' />

<embed name='proprofs_flashGame' src='http://www.proprofs.com/games/word-search/swf/wse_w.swf' FlashVars='id=259&wordscount=6&gametime=3600' width='430' height='300' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'>

<a href='http://www.proprofs.com/games/word-search/color-word-search/' target='_blank' title='Color Word Search game'>Color Word Search game</a> » <a href='http://www.proprofs.com/games/word-search/' title='play word search' target='_blank'>play word search</a></div>

Previewnya :

Color Word Search game » play word search

• Super Hangman

<object width='430' height='300'><param name='movie' value='http://www.proprofs.com/games/swf/word-games/supreme-hangman.swf' />

<param name='FlashVars' value='id=86' />

<param name='allowScriptAccess' value='always' />

<param name='quality' value='high' />

<embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/word-games/supreme-hangman.swf' FlashVars='id=86' width='430' height='300' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'>

<a href='http://www.proprofs.com/games/supreme-hangman/' target='_blank' title='Supreme Hangman'>Supreme Hangman</a> » <a href='http://www.proprofs.com/games/' title='Brain Games' target='_blank'>Brain Games</a></div>

Previewnya :

Supreme Hangman » Brain Games

• World Scramble

<object width='430' height='300'><param name='movie' value='http://www.proprofs.com/games/swf/word-games/word-scramble.swf' />

<param name='FlashVars' value='id=62' />

<param name='allowScriptAccess' value='always' />

<param name='quality' value='high' />

<embed name='proprofs_flashGame' src='http://www.proprofs.com/games/swf/word-games/word-scramble.swf' FlashVars='id=62' width='430' height='300' allowScriptAccess='always' quality='high' type='application/x-shockwave-flash'></embed></object><div style='font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#000;'>

<a href='http://www.proprofs.com/games/word-scramble/' target='_blank' title='Word Scramble'>Word Scramble</a> » <a href='http://www.proprofs.com/games/' title='free puzzles' target='_blank'>free puzzles</a></div>


Previewnya :

Word Scramble » free puzzles

6. Beri judul "Games" atau "Permainan"

7. Klik "Save" dan selesai.

Selamat mencoba, bila ada pertanyaan Comment di bawah..

Sumber

Cara Memasang Game Online di Blog

Cara Pasang Game di Blogspot - Kadang kala ada saja faktor yang membuat kita malas ngeblog, ada yang karena bosen, karena nggak mood dan macem - macem deh... Sebenarnya rasa bosen tu terjadi di berbagai kegiatan bukan hanya ngeblog, kali ini saya akan kasih tutorial cara mensiasati kebosanan ngeblog.
Mengawali pagi yang indah ini, saya akan memulai postingan saya yang berjudul Cara Meletakkan Game Onlien di Blog yang nantinya bisa sobat maenkan langsung di blog sobat sendiri. Setelah sebelumnya berhasil memposting cara memasang TV di Blog, Cara Bikin Blog, dan lainnya, kali ini akan saya kasih tutorial lengkap cara pasang permainan di blogspot entah sobat pasang di sidebar ataupun di halaman posting. Sobat yang tertarik, silahkan ikuti tutorial berikut.

1. Silahkan menuju ke http://www.khemer.com, disitu sobat akan melihat tampilan seperti berikut.

2. Pilih game yang di inginkan, kemudian ambil embed kode nya.

Cara Pemasangan :
Cara pemasang di sini terbagi 2 yaitu di pasang di halamn postingan ( artikel ) dan di sidebar sebagai widget. Mari kita lihat tutorialnya.

A. Memasang Game Online di Postingan Blog
1. Log in ke akun blogger sobat
2. Buat entri baru dengan meng-klik tulisan Entri Baru
3. Masukkan Embed Code di Edit HTML di form penulisan artikel. Lihat Gambar

4. Setelah itu, klik tulisan Terbitkan Entri yang menadakan entri sobat sudah terposting.
B. Memasang Game Online di Sidebar Blog
1. Klik Rancangan --> Elemen laman --> Tambah gadget --> Pilih HTML/Javascript
2. Masukkan embed kode kedalam kotak yang di sediakan.
3. Klik Save / Simpan

Tambahan :
Embed Code yang sobat ambil, kira - kira seperti berikut.

<object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object>

Tambahkan kode <center></center> agar game online ditampilkan di tengah halaman. Hasilnya seperti berikut. 

<center><object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object></center>

Berikut Contoh Game Onlinenya.. Silahkan di mainkan...

Sumber 

Pasang Statistik dan Tracker

Salah satu blog tool sekaligus sebagai aksesori blog yang sering di gunakan oleh para blogger yakni memasang statistik dan tracker. Dengan adanya statistik blog, maka kita yang mpunya blog ataupun yang berkunjung pun dapat mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita. selain itu juga bisa sekaligus sebagai tracker yakni kita bisa mengetahui para pengunjung blog kita datang dari mana, apakah dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.

Sekarang bagaimana caranya kita membuat statistik tersebut? cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com. Berikut adalah contoh tool yang bisa kita pilih :

Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :

1. Silahkan kunjungi situs http://www.sitemeter.com.



2. klik tulisan Sign Up untuk melakukan pendaftaran



3. klik tombol bertuliskan Next



4. Klik tombol Next lagi



5. Isi semua tabel yang ada lalu klik tombol Next lagi



6. Isi lagi tabel yang ada, lalu klik tombol Next lagi



7. klik tombol Next lagi



8. klik tombol Next lagi ( cape dech next..next melulu    )



9. Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan



10. Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com



11. Silahkan login dengan id anda



12. Bila sudah login, Klik menu Manager



13. Klik Menu Meter Style untuk memilih gaya dari site meter anda



14. Pilih style yang anda sukai, kemudian klik tombol Select



15. Klik menu HTML Code



16. Klik tulisan Adding site Meter to a Blogger.com Site



17. copy semua kode HTML yang di berikan lalu paste pada Notepad



18. Klik menu Logout untuk keluar dari situs tersebut



19. Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita
    
    
    

Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :

khusus blog dengan template klasik :

1. Sign in di blogger dengan id anda



2. Klik menu TEMPLATE



3. Klik Edit HTML



4. Klik Edit (yang ada pada bar menu browser anda)



5. Klik Find (on this page)... ⇒ untuk mempercepat pencarian



6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find



7. Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi



8. Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode <center> ...kode site meter... </center>


Untuk blog dengan Template baru :

1. Login di blogger dengan ID anda



2. Klik menu layout



3. Klik Elemen Halaman



4. Klik Tambahkan sebuah Elemen Halaman



5. Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript



6. Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)



7. Copy & paste kode Site meter pada kolom isian



8. Klik tombol Simpan Perubahan



9. Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)



10. Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan



11. Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN



12. Selesai

Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya pasti ketemu....     


Selamat mencoba.

Memasang Template Blogger.com

Sebelum kita memulai untuk membahas bagaimana memasang atau mengganti templet (template: Ingg) di blogger.com, akan menjadi lebih baik jika kita tahu dulu apa itu templet. Templet adalah desain tampilan suatu web atau blog, jadi ketika teman-teman sekarang sedang melihat tampilan blog ini, nah itulah yang namanya template, ya singkatnya adalah desain tampilan.

Desain tampilan atau templet juga termasuk suatu hal yang penting bagi blog kita, karena templet yang kita gunakan tersebut mencerminkan atau mewakili isi dari blog kita. Contohnya saja blognya teman-teman membahas tentang Flora dan Fauna, maka akan terasa lebih hidup apabila desain tampilan/ templet yang digunakan oleh teman-teman berlatarkan tumbuh-tumbuhan dan hewan, nah...seperti itulah templet.

Langkah-langkah untuk memulai memasang/ mengganti templet di blogger.com adalah sebagai berikut:

1. LogIn/ masuk ke akun Blogger milik anda.

2. Apabila sudah sampai di halaman Dasbor, Klik Tata Letak.


3. Dan sekarang anda telah masuk di halaman Tata Letak, silahkan untuk meng-klik Edit HTML untuk memulai memasang/ mengganti templet.


4. Selanjutnya, klik Download Template Lengkap. hal ini dilakukan untuk menghindari kegagalan dalam memasang templet baru. Jadi kalau hal tersebut terjadi, maka tidak akan menjadi masalah karena anda telah menyimpan Back-Up/ cadangannya.

5. Selanjutnya Klik Kotak Expand Template Widget, yang bertujuan agar proses peng-upload-an menjadi lebih lancar.

6. Kemudian Klik tombol Browse, untuk mengambil templet blog baru anda di Komputer anda yang kemudian diikuti dengan mengklik tombol Unggah untuk memulai proses peng-upload-an.

"Tunggu Beberapa saat sampai proses pengunggahan telah selesai..."

7. Apabila proses pengunggahan telah selesai, silahkan untuk meng-klik tombol Simpan Template.


8. Selesai.




Nb:

Untuk mencari templet, teman-teman bisa mengunjungi website-website yang menyediakan templet gratis untuk blogger.com berikut ini:

1. www.blogspottemplate.com

Menyediakan lebih dari 80 template gratis buat blogger, dijamin gak nyesel. Dan di sana nantinya anda bisa men-download template tersebut secara cuma2 alias gratis.

2. www.blogtemplate4u.com

Menyediakan template blogger gratis untuk anda, tersedia banyak pilihan seperti template jenis apa yang anda inginkan. Selain itu anda juga bisa memilih jumlah kolom (template berkolom) dan di web ini tersedia 2-4 kolom (template berbasis kolom), dan masih banyak lagi pilihan2 dan kategori2 lainnya. Bikinan org Indo lho...itu lho yang familiar. Kang Rohman, tahu kan?

3. www.btemplates.com

Situs ini menyediakan template dengan kategori komplit. Banyak macamnya juga, yang berkolom, juga ada yang berbasis Magazine, Elegant Style dan juga sekarang sudah banyak template dengan versi Web 2.0. Pokoknya gak nyesal dah.

4. www.themelib.com

Kalau yang ini menyediakan template yang unik lho. Ya...seperti template i-phone, dengan kata lain nanti tampilannya kayak i-phone. Selain itu di themelib juga menyediakan beberapa tutorial mengenai Blog.

5. www.eblog-templates.com

Menyediakan jumlah template yang tidak kalah dengan yang lainnya juga. Selain itu di eblog-templates.com anda bisa mengikuti program afiliasi penjualan template yang ditawarkan oleh pihak eblog-templates.com, ini kesempatan lho...buat nambah2 sangu hehehe

6. www.pyzam.com

Template yang disediakan memiliki warna yang segar/ fresh, pokoknya warnanya bagus2 dah. Yaaa...dengan kata lain ahli dalam memadukan warna.

7. www.blogcatalog.com

Kalau yang ini anda pasti akan tertarik dengan gaya templatenya. Juga sudah tersedia template yang secara otomatis membuat tulisan anda menjadi Read More... lho, tertarikkan? nih contohnya: klik.

8. www.finalsense.com
Situs ini gak kalah pentingnya juga lho, memiliki bentuk2 template yang unik. Mungkin anda ingin memiliki blog yang bentuknya laptop, ya' templatenya ada di situs ini, buruan.


Untuk selebihnya teman-teman bisa mencari templet gratisan lainnya. Untuk mempermudah pencarian, teman-teman bisa menggunakan jasa Om Google. Cukup sekian...


Semoga Bermanfaat []

Cara Memasang Read More Otomatis [UPDATE]

Cara Memasang Read More Otomatis ini mungkin agak sedikit ribet oleh karena itu sahabat harus teliti dan hati hati untuk Memasang Read More Otomatis ini supaya tidak terjadi eror pada template.

Baiklah sekarang kita akan mencoba mengatasi masalah Read More Otomatis pada halaman statis, silahkan sahabat baca langkah langkah dibawah ini :

1. Login ke Blogger

2. Pilih Rancangan

3. Pilih Edit HTML

4. Jangan lupa centang Expand Widget Template, dan download terlebih dahulu template sahabat, supaya apabila terjadi eror template asli bisa dikembalikan.

5. Apabila sahabat sebelumnya sudah memasang Read More otomatis, maka silahkan sahabat hapus terlebih dahulu, untuk panduannya sahabat bisa membaca artikel Cara Memasang Read More Otomatis Disini. dan setelah itu hapus terlebih dahulu kode Read More Otomatis tersebut.

6. Selanjutnya silahkan sahabat cari kode </head> dan letakan kode dibawah ini tepat dibawah kode </head>

<!-- Read More Otomatis script -http://www.sundaboy.com -Start-->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {  
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Read More Otomatis script -http://www.sundaboy.com -End-->

NB : Sahabat dapat mengganti tulisan yang berwarna biru sesuai dengan keinginan sahabat

7. Selanutnya silahkan sahabat cari kode <data:post.body/> kalau sudah ketemu silahkan sahabat ganti kode tersebut dengan kode dibawah ini :

<!-- Read More Otomatis script -http://www.sundaboy.com -Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More...</a>
</b:if>
</b:if>
<!-- Read More Otomatis script -http://www.sundaboy.com -End-->

8. Sekarang silahkan sahabat simpan template dan lihatlah hasilnya

Nah itulah Cara Memasang Read More Otomatis, untuk mengatasi masalah pada Cara Memasang Read More Otomatis sebelumnya. mungkin itu dulu yang dapat  share mohon maaf bila ada kekurangan. sekian dan terimakasih.

Cara mengatur Custom robots header tags blogger yang baik

Cara mengatur Custom robots header tags yang baik. Beberapa bulan ini Blogger terus mengembangkan fitur-fitur baru yang di antaranya sangat berkaitan dengan SEO. Ini artinya Blogger sudah mulai memberi perhatian lebih untuk para penggunanya mengenai masalah SEO. Jika kemarin kita telah membahas tentang Cara mengaktifkan Custom robots.txt yang baik, maka kali ini kita membahas tentang Custom robots header tags.

Baik Custom robots.txt maupun Custom robots header tags, keduanya sangat penting dalam memberi dampak SEO blog kita. Untuk memaksimalkan penggunaan dua pengaturan tersebut, kita harus tahu cara pengaturan yang baik dan benar. Tujuan pengaturan Custom robots header tags sebenarnya adalah untuk memberi perintah kepada robot search engine, mana yang harus di-crawl/dirayapi dan mana yang harus tidak dirayapi. Dengan demikian, perayapan Search engine pada blog kita akan menjadi teratur, permasalahan yang berkaitan dengan duplicate content, dsb pun bisa kita selesaikan dengan gampang.

Berikut Cara mengatur Custom robots header tags blogger yang baik

1. Silahkan login ke blogger

2. Klik menu settings

3. Pilih search preferences

4. Alihkan perhatian sobat di Crawlers and indexing

5. Klik Edit pada Custom robots header tags

6. Enable custom robots header tags? Pilih YES

Ikuti screenshot untuk melakukan pengaturan!

Klik save. Selesai!!!

Sekarang sobat telah berhasil melakukan pengatur Custom robots header tags blogger. semoga bermanfaat

Cara Membuat Menu Dropdown horizontal Floating Keren di Blog

   Kenal dengan Menu Dropdown kan ?, Menu Navigasi ini memang banyak digemari oleh para blogger karena dapat menghemat tempat dengan mengelompokan beberapa kategri dalam satu wadah.
Contoh Menu navigasi yang akan kita buat bisa sobat lihat dibawah ini. jika ingin melihat Demonya Klik saja pada Teks Link Demo dibawah gambar

Nah gimana keren kan ?. Bagai mana caranya, langsung saja ikuti langkah-langkah berikut ini :

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Jika semua sudah sekarang Cari Kode ]]></b:skin> Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode
5. Jika kode sudah ketemu,, Copy kode berikut dan letakan diatas kode ]]></b:skin> 

/* Horyzontal Droupdown menu
----------------------------------------------- */
#top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLYJ6v7rF57H-p7d2l2VTMmsnLm8nVsGz6iSnv7x-I5TfHBKQRoo7jplsoUZlyqo62m7CtcB0NOWA-DWJJYsSBrlXgOa9Iz8Lj-XLyFb8EQafT_p_gTPev_eejyjQpTWDp5Sr6g1WWmKS/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkK2t_CRR3jPqKYkA_ZAE6b3h50w5sq0DTW0wgWabJOkmTMJjAJ80kiQHTRARLCCkBOr1XdLwuioFWmLMvVqcrMTzwGQZl4nJa9wwEzXiEHk34B-IsMETdq_r0lnZUHMgcBJDtK1HB7cQ/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

6. Kode Warna Biru diatas adalah ukuran panjang menu
7. Kalau sudah, langkah selanjutnya cari salah satu kode berikut :

<div id='header-wrapper'>  
(disini nanti letak kode menu dropdown)
</b:section>
    </div>

Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

<div class='header-outer'>
   (disini nanti posisi kode menu dropdown)
</b:section>
    </div>

8. Jika Sudah ketemu salah satu kode diatas letakan Kode dibawah ini dibawah salah satu kode Diatas

<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5</a></li>
</ul>
</li>

</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>

9. Sehingga susunannya menjadi seperti ini

<div class='header-outer'>

<div id='fixed'>
<div id='fixedinner'>
<div id='top-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
</ul>
</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
<ul>
<li><a href='#'>Sub menu 1</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 2</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 3</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 4</a></li>
<li class='hr'/>
<li><a href='#'>Sub menu 5</a></li>
</ul>
</li>

</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
</div></div>

</b:section>
    </div>

10. Sekarang Klik Simpan Template 
11. Selesai dan Lihat hasilnya

Demikianlah cara Cara Membuat Menu Dropdown horizontal Floating Keren di Blog semoga bisa bermanfaat bagi para blogger.

Cara Mendaftarkan Blog di Google Analytics

Mungkin bagi Blogger yang memanfaatkan Blog-nya hanya untuk kesenangan saja hal ini tidak penting. Namun untuk para Blogger yang menggunakan Blog-nya lebih serius, pendaftaran Blog di Google Analytics jelas sangat penting. Selain Untuk meningkatkan nilai SEO Blogspot, juga dapat digunakan untuk memantau perkembangan Blogspot. Google telah sedikit merubah cara untuk mendaftarkan Website/Blog di Google Analytics. Jadi inilah cara ter-update mendaftarkan Website/Blog di Google Analytics.
Sebelumnya, sobat terlebih dahulu harus mengatur kepemilikan Blog di Google. Silakan sobat baca Cara Verifikasi Website/Blog di Google. Setelah Blog memiliki kepemilikan yang sah di mata Google, sobat bisa mendaftarkan Blog ke Google Analytics.
Berikut langkah-langkah mendaftarkan Blog ke Google Analytics.
1. Login ke Akun Blogger sobat.
2. Masuk ke Google Webmaster Tools dengan Tab Baru.
3. Klik Kelola Situs di bagian kanan pada Blog yang akan didaftarkan ke Google Analytics. Lalu pilih Properti Google Analytics.

4. Akan muncul tampilan baru. Klik Buat Akun Google Analytics.

5. Akan muncul pemberitahuan bahwa anda harus kembali ke halaman ini jika telah selesai membuat akun Google Analytics. Klik OK.

6. Jika terbuka jendela baru meminta sobat untuk sign up, maka lakukanlah sign up.
7. Buatlah akun Baru pada Google Analytics. Hal ini mudah buatlah seperti biasa dalam membuat akun.
Jika sobat telah memiliki akun, maka klik admin, pilih akun sobat dan klik + Properti (web atau apl)

8. Dalam penambahan properti, Pastikan opsi yang sobat pilih adalah Situs Web. Pilih jenis Analytics, apakah classic atau universal. Saya sarankan agar memilih yang Universal Analytics agar analisis pada Blog lebih menyeluruh.

9. Isikan Nama Website/Blog, URL Blog (pilih http://), Kategori Industri (konten Blog sobat), dan zona waktu.

10.Pada akun Baru, Masukan nama Akun sesuka sobat, centang opsi yang sobat perlukan, lalu klik Dapatkan ID Pelacakan.

 11. Akan muncul jendela baru berisikan ketentuan dari Google Analytics. Pilih ketentuan pada negara sobat, jika perlu baca terlebih dahulu ketentuan tersebut dan klik Saya Setuju.

12. Jika sobat telah menyetujui ketentuan tersebut, sobat akan masuk pada halaman dimana sobat akan diberi ID pelacakan dan kode pelacakan oleh Google Analytics. Coppy semua kode pelacakan tersebut.

13. Masuk pada akun Blogger sobat.
14. Pilih blognya dan Masuk pada bagian Template.
15. Klik Edit Temlate.
16. Cari kode </head>, gunakan tombol ctrl+F.
17. Paste kode pelacakan tepat di atas kode </head>.
18. Klik Simpan Template.
19. Kembali pada halaman Google Webmaster Tools tempat sobat menambahkan akun Google Analytics. Refresh halaman tersebut dan akan muncul akun yang baru dibuat. Klik untuk menandai akun yang baru dibuat dan klik Simpan.

20. Masuk ke halaman awal Google Webmaster Tools. Klik kelola situs pada Blog yang telah dihubungkan dengan Google Analytics, pilih tambahkan atau hapus pengguna, klik pada kotak pemilik, muncul menu dropdown dan klik laman verifikasi pemilik, klik verifikasi dengan menggunakan metode yang berbeda, klik pada Google Analytics dan klik Verifikasi. Blog sobat akan terverifikasi dengan Google Analytics.

Selesai, Jika sobat melakukanya dengan benar maka akan ada pesan pada Google Webmaster Tools tentang Blog sobat yang telah memasang Google Analytics. Sekarang sobat dapat menerima info analisis tentang Website/Blog sobat yang mendetail dari Google Analytics.

 

Sumber 

Cara Mendaftarkan Website/Blog ke Alexa.com

Cara Mendaftarkan Website/Blog ke Alexa.comAlexa 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.

Cara Membuat Tanda Admin pada Komentar Blog

 

 

Jangan bosan, mulai Blogging lagi para Blogger. Saya baru kepikiran bagaimana cara menandakan komentar pada Blog yang ditulis oleh admin pada posting yang memiliki banyak komentar. Hal ini mungkin perlu sobat, maka kali ini saya akan membahas Cara Membuat Tanda Admin pada Komentar Blog.
Saya mengunjungi Blog milik teman saya yang pada salah satu posting-nya memiliki banyak komentar. Bingung juga melihat komentar-komentar yang jumlahnya sampai ratusan, mana yang ditulis admin dan mana yang ditulis pengunjung Blog. Tanda komentar admin ini mungkin perlu sobat, salah satunya ketika pengunjung bertanya pada Admin, pengunjung tidak bingung siapa yang menjawab pertanyaanya.
OK, jika ada sobat Blogger yang menganggap hal ini perlu, silakan simak cara pembuatanya di bawah ini.
1. Login ke Akun Blogger sobat.
2. Masuk ke bagian Template.
3. Klik Edit Html.
4. Cari kode </body> dengan tombol ctrl + F.
5. Masukan kode berikut diatas kode </body>.

<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- Komentar admin by Brader Blog start -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrvdMJIE7i-SqK3ZN2PY-ZWmag8Ijb83NYISfubAqwRYB0sLQKxLIenDLuYAV32wXA2aPpeGvB8S6KnHRdZNKFg7l6-nNdvlleNOutRCWI2FBb86KmUqtiuk6vikRwPQMAwAT2kg5mPUI/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- Komentar admin ends -->

>>Sobat bisa ubah kode berwarna merah muda untuk warna garis pembatas. Kode berwana biru untuk warna background komentar. Dan URL berwarna merah untuk gambar/Tulisan "Admin" jika sobat punya atau yang telah saya sediakan di bawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrvdMJIE7i-SqK3ZN2PY-ZWmag8Ijb83NYISfubAqwRYB0sLQKxLIenDLuYAV32wXA2aPpeGvB8S6KnHRdZNKFg7l6-nNdvlleNOutRCWI2FBb86KmUqtiuk6vikRwPQMAwAT2kg5mPUI/s1600/admin2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEYk42hCl4jxso3wApYNpd9ezwkU_Abwl1YRPRwAocbECnwVmWVkrXN_JSLHRaG-QUnZ0ixv-2SlEAZ6XBS91mbt3rrPZeB-Tt0KXGNn-_57Yi5JZVBSPnVNj2d6YhyphenhyphenyCxJOgYaGv1mVpc/s79/admin.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinXgABB0gfje0k9zmSu0UYf2KKIoOzC2rmj_AKHg1eKddagaf1clXrVwtQtEazhFj3F7oAqR49iqMWnfkY3tsXGhx3d6QiSk9TiMfGWANUofKWTw9FYTaKHGBNsCGU_y5TL2x5dcNp6K0/s288/logo_admin.gif
https://d592ae48-a-62cb3a1a-s-sites.googlegroups.com/site/rakasajmk/home/page-3/Admin.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3Ky5SJy9_venXlqrTsMdKCh-jUs7a9w6LwQBJ5b6Zr3XnD8wr11lGP1TCOPVQqd-SNMdX2jmtuUSYlLCoKAJkc0XtwAFnslfvC_COxd4noAIm2bcOHiWbYuTkzVPDaRqvbrt_vkOEmg/s1600/Untitled3.png

6. Jika telah selesai, klik Simpan.

Selesai, singkat dan mudah yaah.

 

Sumber 

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.

Sumber