Cara Mudah Memasang Google Analytics

Pertama Anda Masuk dulu ke Dashboard Google Analytics

Lalu pilih 'Buat Akun Baru'

Setelah itu Copy kan Kode yang kamu dapat ke Note, lalu Copy pada bagian id nya.


Misal  UA-113509692-1

lalu masuk ke Setelan Blogger, dan Pastekan Kode Analytic kedalam Kotak dibawah, kemudian Save.

Lalu anda bisa lihat Trafik Real Time anda dari sini

Cara Membuat Google Translate di Body Postingan

Pertama anda tambahkan dulu 'Google Translate' dari Add Gadget.

Anda harus meletakkannya pada Side sebelah kiri.  Jika pada Side sebelah Kanan, nanti jadi muncul 2 kolom. Saya pun tidak tau mengapa. Jadi harus sebelah kiri.


Kemudian setelah itu, cari Kode <data:post.body/>

Pilih yang nomor dua.

Kemudian letakkan kode ini diatasnya




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align: left;'><div id='google_translate_element'/><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: &#39;id&#39;
}, &#39;google_translate_element&#39;);
}
</script><script src='http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/></div>

</b:if>

Bagaimana Cara Membuat Artikel Terkait

Bagaimana Cara membuat Artikel Terkait-  Membuat post terkait atau artikel terkait adalah salah satu cara meningkatkan SEO yang baik bagi blog kita. Sebab dengan adanya artikel terkait, pengunjung blog kita akan menjadi lebih mudah mencari artikel yang masih berhubungan dengan topik yang sama. Dan kabar yang mengejutkan survey menunjukkan bahwa pengunjung lebih sering mengklik artikel terkait daripada daftar artikel yang lain, itu disebabkan topik itu masih hangat bagi mereka, jadi mereka ingin yang lebih lagi. Oke begini cara membuatnya.

1. Masuk ke akun Blogger anda
2. Klik Template >> Edit HTML >> centang Expand Widget Template >> tekan Ctrl+F pada keyboard
3. Cari kode </head>
4. Tambahkan kode berikut tepat diatas atau sebelum </head>

    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;}}}}
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];}}
    relatedTitles = tmp2;
    relatedUrls = tmp;}
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;}
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 7) {
    document.write('<li><a href="' + relatedUrls[r] + '">' +
    relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;}
    i++;}
    document.write('</ul>');}
    //]]>
    </script>

Anda perhatikan yang saya blok warna hijau diatas, jika anda ingin menentukan berapa jumlah artikel terkait yang akan anda sertakan, silahkan anda ganti nomor 7, menjadi berapapun yang anda mau.

Kemudian sorot dan copy kode ini.

    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>

    <b:if cond='data:blog.pageType == "item"'>
    <h4>Artikel Terkait</h4>
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if>

Lalu untuk posisi peletakkannya bisa anda pilih sesuai selera anda. 

1. Jika anda ingin posisinya tepat dibawah artikel, silahkan cari kode <data:post.body/>

kemudian letakkan kode diatas tadi dibawah <data:post.body/>

2. Jika anda ingin posisinya diatas kotak komentar, cari kode ini
<b:include data='post' name='iframe_comments'/>

diatasnya anda akan menemukan kode
  <b:if cond='data:post.forceIframeComments'>

tepatnya seperti ini
 <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>


Letakkan kode iklan anda diatas 
<b:if cond='data:post.forceIframeComments'>

Oke sekian dulu tutorial dari saya, lain kali akan saya bagikan tips-tips yang lebih menarik.  Ingat jangan lupa tinggalkan koment ya...!!!

Bagaimana Cara membuat Artikel Terkait

Bagaimana Cara Menghapus Blog Dari Control Panel Hosting

Bagaimana Cara Menghapus Blog Dari Control Panel Hosting-  Setelah beberapa waktu tidak pernah menulis diblog ini karna lagi galau.. :D, akhirnya saya kembali untuk ngepost lagi. Kali ini saya akan membahas bagaimana cara menghapus blog dari control panel hosting atau biasa disebut CPanel Hosting.

Icon - icon di Cpanel hosting memang begitu banyak, sehingga terkadang membuat kita bingung fungsi-fungsinya apa saja. Kedepan saya akan lebih banyak lagi mengulas tentang fungsi-fungsi setiap icon control panel. Dan kembali ketopik, bagaimana cara menghapus blog dari control panel, begini caranya.

1. Anda masuk dulu ke CPanel hosting anda tentunya

2. Anda pilih icon 'Legacy File Manager"

 lalu nanti akan muncul sebuah jendela 'Directory Selection', lalu anda pilih pada bagian 'Web Root (public_html/www)', atau yang ada globe warna biru.

3. Lalu dibawahnya ada sebuah kotak, silahkan anda pilih blog mana yang akan anda pilih, setelah anda memilihnya, kemungkinan pilihannya akan bergeser, jadi silahkan anda clik lagi pada bagian web root. kemudian clik Go.

4. Setelah itu anda akan dibawa kesebuah halaman baru, silahkan pilih salah satu yang mana akan anda hapus. Jika anda ingin menghapus blog sub domain, biasanya ada diurutan nomor 2.  lalu anda click linknya, kemudian akan muncul sebuah pilihan didinding sebelah kanan

5. Anda pilih 'Delete this folder and files'.

Selesai, maka domain atau subdomain yang berisi sebelumnya akan menjadi kosong, dan anda bisa menginstalnya kembali sesuai dengan yang anda mau.

Okey, jangan lupa komentnya ya guyss...!!!

Bagaimana Cara Menghapus Blog Dari Control Panel Hosting

Cara Mengetahui Themes Website Orang Lain

Cara Mengetahui Themes Website orang Lain-  Tutorial yang saya paparkan kali ini adalah khusus untuk pengguna wordpress.  Terkadang ketika kita sedang blog walking, kita menemukan sebuah blog atau website yang membuat kita sangat terpesona, dan ingin memiliki template seperti itu. Template atau dalam wordpress disebut themes adalah tampilan lay out sebuah blog atau website. Nah kali ini anda akan mengetahui bagaimana cara mudah memiliki template indah seperti yang anda idamkan itu.

Anda cukup melihat disebelah kiri bawah jenis themesnya, sebab disana selalu tersaji nama pengarangnya. Setelah anda melihatnya, anda cukup mencarinya dan memakainya.

Tapi bagaimana jika tidak ada tulisan pada footer? karena sebagian bloger menghilangkan tulisan pada footer mereka yang juga secara tidak langsung menghilangkan link provider themesnya dengan berbagai alasan misalnya biar ga banyak link keluar atau masalah estetika aza? Jangan kuatir Anda tetap bisa melihat dan mengetahui nama themes yang digunakan pada blog tersebut.

Caranya cukup mudah, saya akan menunjukkannya pada anda, dan anda sama sekali tidak  perlu membutuhkan keahlian koding untuk melakukannya.

Pertama, buka blog yang ingin Anda ketahui nama themesnya, kemudian lihat halaman sourcenya dengan cara ketik ctrl+u 

Setelah itu ctrl+f  kemudian ketik wp-content/themes/ di area find. Dan tara...!nama themes yang Anda cari muncul.

Click aja http://www.namadomain.org/wp-content/themes/namathemes/style.css nanti disitu akan muncul nama dan link provider thema tersebut. Setelah ketemu cari di google atau kunjungi link providernya tersebut setelah itu download sepuasnya.

Akan menyenangkan jika themes teresbut free namun kita hanya bisa kecewa jika melihat ternyata themes tersbut premium alias berbayar, wah sebaiknya mulai gigit jari. hehe..

Jangan lupa komentnya ya guys...!!

Cara Mengetahui Themes Website orang Lain

Bagaimana cara Meletakkan Iklan Sejajar atau Berdampingan di Sidebar

Bagaimana cara Meletakkan Iklan Sejajar atau Berdampingan di Sidebar-  Lagi-lagi membahas tentang iklan. Yahh.. kali ini saya kembali lagi memberikan beberapa tips tentang peletakan iklan yang mungkin anda sukai. Kali ini yang ingin saya ajarkan pada anda adalah mengenai cara membuat iklan berdempet atau berdampingan disidebar. Oke agar tidak membuang-buang waktu anda yang udah kebelet kekamar mandi dari tadi ..: D   kita langsung saja ya...!!

Pertama anda login keblogger anda, lalu pilih rancangan tata letak, kemudian tambah gadget, pilih HTML.

Kemudian perhatikan kode dibawah ini, silahkan anda copypaste kan kedalam kolom gadet html anda.

<TABLE BORDER="0" BORDERCOLOR="#336699" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR>
<TD>

kode iklan 1
<TD>
<TD>

kode iklan 2

</TD>
</TR>
</TABLE>

Kemudian ganti tulisan berwarna hijau dengan script untuk iklan bagian kiri dan ganti tulisan berwarna biru untuk script iklan bagian kanan, save lalu lihat hasilnya.

Gimana cukup simple bukan...!!  jangan lupa beri koment ya, biar hati ini gak galau. hehe..,,

Berbagai Macam Posisi Meletakkan Iklan di Blog

Berbagai Macam Posisi Meletakkan Iklan di Blog-  Terkadang kita ingin meletakkan posisi iklan ataupun kode - kode khusus kita, namun ketika kita mencari tutorialnya dari google, informasi yang disediakan adalah standar dan rata-rata, padahal kita ingin ditempat - tempat yang kita sukai. Misalnya di Header, dibawah judul, didalam body postingan, dibawah postingan, diatas kotak komentar, didalam kotak catatan kaki, dibawah kotak catatan kaki, dll.  Nah, Jika anda ingin sesuatu yang baru, bersyukurlah karena anda menemukan iBlogle ini. Oke silahkan baca lebih lanjut.

Sebelumnya silahkan anda tekan Control F, untuk mempermudah pencarian. Lalu setelah kodenya ketemu, silahkan letakkan script iklan anda pada posisi yang telah saya beritahukan. Silahkan pilih posisi yang anda inginkan kemudian cari kodenya.

Posisi Dibawah Judul

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

Letakkan kode iklan anda dibawahnya



Posisi Diatas Read More (hanya tampil dihalaman homepage)

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

Letakkan kode iklan anda dibawahnya

Note: Jika anda pernah membuat tombol like facebook, lalu anda membuat script read more otomatis, Pastikan kode tombol facebook anda berada diatas script readmore otomatis anda.  Setelah susunannya pas, baru letakkan kode iklan anda diatas kode facebook like anda, atau tepat dibawah kode 
 <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>


 


Posisi Dibawah Read More (diatas kotak catatan kaki)

 <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>

Letakkan kode iklan anda diatasnya

Posisi Dikotak Catatan Kaki (diatas semua item)

    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>


Letakkan kode iklan anda diatasnya

Posisi Dikotak Catatan Kaki (dibawah semua item)

 <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

Letakkan kode iklan anda dibawahnya




Posisi Dibawah Kotak Catatan Kaki (tampil dihomepage dan halaman post)

            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>
    </div>
  </div>

Letakkan kode iklan anda dibawahnya


Posisi Dibawah Kotak Catatan Kaki (tampil hanya dihalaman post)

<b:include data='post' name='iframe_comments'/>

diatasnya anda akan menemukan kode
  <b:if cond='data:post.forceIframeComments'>

tepatnya seperti ini
 <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>


Letakkan kode iklan anda diatas  
<b:if cond='data:post.forceIframeComments'>



Gimana....!!!  Dahsyat tidak...!!!!

Berhubung saya bekerja keras membuat artikel ini, mohon jangan lakukan Copy paste ya...!! tidak perlulah harus diancam-ancam seperti blogger lain, yang akan melaporkan pelanggaran hak copyright, bagi yang mencopas artikelnya, saling menjaga aja sesama tetangga diblogger.

Tapi jika memang anda merasa artikel ini harus ada diblog anda, mohon sertakan sumbernya
 <a href="http://www.iblogle.com/">Sumber: www.iblogle.com</a>

Berbagai Macam Posisi Meletakkan Iklan di Blog

Bagaimana Cara Meletakkan Iklan Diatas Kotak Komentar

Bagaimana Cara Meletakkan Iklan Diatas Kotak Komentar-  Sebenarnya masalah peletakkan iklan yang baik dan benar adalah tergantung masing-masing individu, artinya masalah selera.  Namun sebagai IM Guru, saya coba berikan sedikit anda masukan, yah bisa anda terima, bisa tidak diterima.

Begini, berhentilah menekan pengunjung blog anda dengan iklan yang berseliweran disana-sini.  Sering sekali saya lihat para blogger sangat bernafsu untuk mendapatkan clik dari pengunjungnya, dengan meletakkan iklan disana sini, di header, dibawah header, dipertengahan posting, dan lainnya sebagainya.

Itu adalah sifat tamak yang sia-sia, sebab pada kenyataannya walaupun sudah dibuat begitu, tetap saja iklan mereka tidak diklik. Jadi berikanlah pengunjung kebebasan untuk mengclik atau tidak iklan anda.  Toh walaupun anda meletakkannya diseluruh area postingan anda, mereka takkan tertipu, sebab para blogger bukanlah orang-orang yang bodoh.

Mungkin anda berkata, 'lha.. kalau tidak dibuat begitu, bagaimana dong saya akan mendapatkan clik mereka?'.

Jawabannya, kalau mereka memang tertarik pada iklan anda, mereka akan mengcliknya, dimanapun areanya anda meletakkan iklan itu.  Saya biasanya lebih suka meletakkan iklan dibawah postingan, artinya saya membiarkan pengunjung untuk menikmati hidangan artikel yang saya sediakan tanpa terganggu sedikitpun oleh iklan.  

Dan setelah mereka selesai membaca, mereka bebas memilih apakah akan mengclik iklan saya atau menutupnya, itu terserah mereka, yang penting mereka telah puas mendapatkan jamuan saya tanpa terganggu iklan, dan lain kali mereka akan berkunjung lagi sebagai bukti respek mereka, terhadap blog yang telah memperlakukan mereka dengan hormat.

So jika anda berniat ingin mengikuti saya, meletakkan iklan anda dibawah atau diatas kotak komentar, begini caranya.

1. Iklan anda harus diparse terlebih dahulu, jadi silahkan masuk ke sini

    Lalu anda copy pastekan iklan anda pada kotak yang disediakan, kemudian tekan 'Convert'.

    Setelah itu silahkan anda copy iklan yang telah diparse tadi.

2. Seperti biasa, masuk kepengaturan template anda,
    Edit HTML, jangan lupa centang 'Expand TemplateWidget'

    Cari kode <p><data:blogCommentMessage/></p>

    Tekan control F, untuk mempermudah pencarian.

    Perhatikan...!!  Anda akan menemukan kode seperti diatas 3 - 4 buah atau lebih.
    Jadi cari dan letakkan pada kode nomor 2

3. Setelah ketemu, silahkan letakkan kode iklan yang telah diparse tadi, seperti dibawah ini

<p>Kode iklan anda letakkan disini<data:blogCommentMessage/></p>

Kemudian save. Oke...!!

Sekian dulu tutorial dari saya, kita akan bertemu kembali diartikel yang pastinya lebih keren. Dan tolong jangan lupa kasi komentarnya ya...!!!

Bagaimana Cara Meletakkan Iklan Diatas Kotak Komentar

Bagaimana Cara Mengoptimasi SEO dengan Mengganti Judul Halaman

Bagaimana Cara Mengoptimasi SEO dengan Mengganti Judul Halaman-   Tidak bisa dipungkiri untuk masalah template, produknya google memang masih kalah dengan wordpress terutama dalam masalah SEO.  Karena itu kita perlu melakukan banyak setingan untuk memperbaikinya. Kali ini iBlogle akan mengajak anda mencari tahu bagaimana meningkatkan seo blog anda dengan mengganti judul halamannya.

Berkaitan dengan masalah judul, ada 2 hal yang akan kita lakukan kali ini, yaitu:

1. Mengubah Page Title

2. Mengubah Tag Heading

1. Mengubah Page Title

Biasanya format page title dari blogger kan seperti ini : JUDUL BLOG : JUDUL POSTING.

Nah agar blog kita lebih disukai oleh google sehingga ujung-ujungnya blog kita jadi rame, kita harus merubah format page title standart itu menjadi seperti ini : JUDUL POSTING | JUDUL BLOG.

Caranya cari kode berikut di EDIT HTML 

<title><data:blog.pageTitle/></title>

Gunakan Control F, untuk mempermudah pencarian. Lalu setelah anda dapat kodenya hapus dan gantikan dengan kode dibawah ini.

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Atau anda bisa juga menambahkan beberapa kata kunci ( keyword ) :

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Kata kunci anda | Kata kunci anda </title>
</b:if>

Setelah itu save. Dan anda akan melihat bahwa page title anda akan berubah formatnya.

2. Mengubah Tag Heading

Google lebih menyukai jika blog itu memiliki format penulisan judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting anda dengan tag H1. Caranya cari kode berikut :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Kode yang dicetak berwarna hijau, anda dihapus dan ubah dari h3 (atau pada beberapa template menggunakan h2)  menjadi h1. 

Setelah itu tambahkan kode berikut dibawah kode ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Nah dengan kedua cara ini niscaya google akan lebih menyukai blog anda. Dan banyak-banyak berdoa gan, biar bisa diangkat google masuk halaman pertamanya. hem....!!

Jangan lupa kasi komentar ya gan...!!!

Bagaimana Cara Mengoptimasi SEO dengan Mengganti Judul Halaman

Bagaimana Cara Membuat Read More Otomatis di Blogspot

Bagaimana Cara Membuat Read More Otomatis di Blogspot-  Membuat read more ataupun baca selengkapnya diblog memang sudah menjadi hal wajib yang harus kita lakukan untuk membuat blog kita kelihatan efisien, rapi dan indah. Namun terkadang kita sering merasa repot juga jika harus selalu memenggal postingan kita secara manual, atau mungkin sebagian lagi sering lalai melakukannya.  Nah kali ini saya akan mengajak anda mengetahui bagaimana cara membuat read more otomatis untuk mempermudah pekerjaan anda, berikut adalah caranya.

Pertama anda masuk dasbord blogger >> lalu pilih rancangan >> Pilih Edit HTML.
Jangan lupa centang Expand Template Widget.

Lalu anda cari kode </head> 

Untuk mempermudah pencarian tekan F3 atau boleh juga dengan menekan Control + F

Kemudian, masukan kode berikut tepat ditas </head>

    <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(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>


Lalu setelah itu, anda cari kode <data:post.body/>
Kemudian anda hapus kode itu, dan ganti dengan kode dibawah ini

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
    <span class='rmlink' style='float:right;padding-top:20px;'>
    <a expr:href='data:post.url'> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
    </b:if>

Lalu anda save.

Kemudian silahkan buat artikel baru, jangan lupa... biarkan saja seperti itu ketika anda publikasikan, jangan diberi penggalan read more manual seperti yang biasa anda lakukan, sebab kita ingin membuktikan hasilnya.

Dan setelah itu, silahkan lihat hasilnya. Mantapp bukan...!!!

Nah silahkan berikan koment sebagai ucapan terimakasih pada iBlogle, hehe..

Bagaimana Cara Membuat Read More Otomatis di Blogspot

Bagaimana Cara Membuat Blog di Blogspot

Bagaimana cara membuat blog di blogspot-  Sudah bisa dipastikan jika anda mencari tutorial ini, berarti anda adalah seorang newbie atau pendatang baru didunia internet blogger, jadi karena itu saya ucapkan Selamat Datang, dan selamat bergabung, pacu terus semangat anda untuk menimba ilmu internet dari tutorial-tutorial yang iBlogle berikan. Untuk memulainya, perlu kiranya anda ketahui 2 jenis situs di Internet, yaitu Website dan Blog. 

Website hampir sama dengan blog, hanya saja bedanya, website itu statis, artinya anda hanya akan menampilkan satu halaman utama dibagian depan, dengan bahasa-bahasa baku dan resmi. Sementara blog itu selalu uptodate atau dinamis, anda bisa mengclip-clip artikel anda dengan Read More. Kedepan kami akan memberikan tutorial mengenai 'Bagaimana cara membuat efek tulisan dengan css text shadow', yang tentunya akan membuat website atau blog anda menjadi kelihatan lebih keren.

Sejak bloggger di luncurkan pada tahun 1999, blog mengubah bentuk web, dimana mempengaruhi politik , mengguncang jurnalisme, dan memungkinkan jutaan orang untuk memiliki suara dan terhubung dengan orang lain.

Meskipun banyak program yang disediakan di internet untuk blogging namun kali ini sesuai dengan judul artikel saya ingin mencoba berbagi bagaimana cara membuat blog pertama kali di blogger .

Mempersiapkan Blog untuk pertama kali.

Catatan: di bawah ini langkah-langkah memnuat blog di blogger dengan menggunakan bahasa indonesia.bagi anda yang browsernya masih berbahasa inggris (asing) dan ingin merubahnya kebahasa indonesia ! Pilih penganturan bahasa dan ganti menjadi bahasa indonesia ( dibagian kanan bawah pada browser anda Lihat gambar di bawah pada nomer 2 yang di beri tanda panah merah no 2)

1. Dalam rangka untuk membuat blog gratis pada layanan blogging Google hosting, Anda akan perlu memiliki account pada blogger.com .

2. Untuk membuat akun Google baru, pergi ke http://www.blogger.com .setelah itu cari tombol Sign up (daftar) yang ada di pojok kanan atas, seperti gambar di bawah ini( diberi tanda panah merah no 1).

Kemudian anda akan menemui, form pendaftaran seperti ini

3. Isi kotak form diatas 

* Dua kolom nama : isi dengan nama anda
* pada kolom nama pengguna : masukan nama sesuai yang anda inginkan dan akan menjadi email Gmail kamu
* masukan sebuah pasword : isiakan kanta kunci (minimal 8 karakter, (bisa huruf bisa angka)
* ketikan ulang sandi : masukan lagi pasword yang telah kamu masukan sama dengan yang di atas
* Pada kolom Gender : pilih jenis kelaminkamu.
* pada kolom Ponsel : Masukan no Hp kamu.
* Pada kolom alamat email anda saat ini : anda bisa mengisinya jika sudah memiliki atau mengosongkanya jika belum punya.
* Di bawah tulissan Buktikan Bahwa Anda Bukan Robot Ada kotak kecil anda bisa mencentangnya untuk verifikasi lewat Hpatau membiarkanya kosong.Dan isi kotak kolom dibawahnya dengan tulisan diatasnya (untuk verifikasi langsung).
* Pilih lokasi anda.
* Dibawah kolom lokasi anda akan mendapati dua kotak kecil dan centang keduanya .

4. Setelah semua terisi klik Tombol tulisan langkah berikutnya (berwarna biru lihat gambar diatas no 3),dan akan muncul halaman berikutnya (Lihat gambar dibawah). 

5. Klik Tombol bertuliskan langkah berikutnya (berwarna biru pada gambar diatas) maka akan muncul gambar seperti di bawah ini

 6. Gambar diatas menunjukan bahwa anda sudah berhasil dan selesai mendaftar di blogger. Klik tombol biru diatas (Kembali ke blogger) untuk selanjutnya menuju kepembuatan blog.denagn mengkilik tombol tadi anda akan masuk ke halaman berikutnya lihat gambar di bawah ini

7. Gambar diatas menunjukan bahwa anda telah terdaftar di blogger,selanjutnya klik Tombol Lanjutkan Ke blogger (gambar yang berwarna orange pada gambar diatas).dan akan tampil halaman seperti gambar di bawah ini

8.Klik tombol Blog baru (yang diberi tanda merah pd gambar diatas) untuk memulai membuat blog.dan akan tampil seperti gambar dibawah ini.

 

* Isi Kolom judul dengan Judul blog yang anda inginkan (no 1).
* Isi Kolom Alamat Sesuai dengan alamat blog yang anda inginkan (no 2 ).
* Pilih templete sesuai denagn yang anda inginkan.

9. Setelah terisi Klik tombol Buat Blog ( no 3 ) dan selesailah sudah langkah langkah membuat blog.

Oke selamat mencoba ya gan...!! good luck..!

 Bagaimana cara membuat blog di blogspot

Bagaimana Cara Membuat Random Posts

Bagaimana Cara Membuat Random Posts- Random Posts adalah judul postingan atau artikel yang tampil secara acak di blog kita. Biasanya kita menampilkan recent posts atau artikel terakhir pada blog, tapi hal itu kurang efektif karena, recent posts hanya menampilkan postingan terkahir saja, biasanya 5 post sampai 10 post. Sedangkan random posts menampilkan postingan kita secara acak, bahkan postingan kita terdahulu bisa muncul dalam daftar random posts ini.

Selain dengan random post, anda bisa juga membuat slide gambar diblog anda, yang tentunya akan membuat blog atau website anda kelihatan lebih profesional, silahkan anda baca artikel kami sebelumnya "Bagaimana cara membuat slideshow di blogspot'.

Baik kita kembali kepokok bahasan, sebenarnya cara membuat random post ini  sangat mudah, hanya memerlukan sedikit kode script. Baiklah, langsung tuju blogger dan masuk dengan ID sobat.


- Kemudian klik Tata letak

- Tuju Elemen Halaman.

- Klik Tambah Gadget

- Pilih yang HTML / Javascript

- Kemudian masukkan kode script berikut ini :

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ac99ebe0691031008a48d750fdbeaa67&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script>

• Untuk tulisan yang saya tandai dengan warna merah, sobat ganti dengan alamat blog sobat, dan yang berwarna biru adalah jumlah post.

Good luck Gan..!!

 Bagaimana Cara Membuat Random Posts

Bagaimana Cara Membuat Blog 3 Kolom

Bagaimana Cara Membuat Blog 3 Kolom-   Kali ini saya mengajak anda untuk mengetahui bagaimana cara membuat kolom di blog kita menjadi 3 kolom. Sebenarnya sudah banyak tutorial seperti ini di google, namun saya yakin masih banyak diantara anda yang belum mengetahuinya.

Ini adalah lanjutan dari tutorial kami sebelumnya, 'Bagaimana cara membuat blog di blogspot'

Dan disini saya akan mencoba tambahkan kode UL LI pada kolom, sehingga jika sobat menggunakan kode ini, maka akan secara otomatis membentuk tulisan yang disertai garis putus � putus dibawah tulisan dan icon cantik yang mengawali tulisan.


Kali ini saya akan gunakan template yang lebarnya 1000px sehingga saya menggunakan lebar kolom 990px. Baiklah, langsung praktek aja ya biar tau.

1. Klik Tata Letak
2. Pilih Edit HTML dan centang Expand Template Widget
3. Tambahkan kode berikut tepat diatas kode ]]></b:skin>

#bottom {
width: 990px;
position: relative;
clear:both;
margin: 0 auto;
color:#000;
float: center;
background:transparent;
padding: 15px 0 15px 0; }

#bottom h2 {
padding-left: 5px;
margin: 0 0 10px 0;
background:#0B3B0B;
color:#fff;
font-size: 18px;
letter-spacing: 1px;
border-bottom: 1px solid #000; }

#bottom ul{padding:0; margin:0; color:#333}

#bottom ul li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PZOaQaj1gwv_WDbvTCo8Kk37ECQQI9KTCNtb4l6OtUvdWfBanGVoTibkX4X_r5bdUfRPmYbTK1sXh_0MCuBiGHUk3ZBZ37o6ZYQT4-0EmBLjzbaVtn6_aW4B4cKC7NvRDIU3OlgQR5lG/s320/d3.gif') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

#bottom li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PZOaQaj1gwv_WDbvTCo8Kk37ECQQI9KTCNtb4l6OtUvdWfBanGVoTibkX4X_r5bdUfRPmYbTK1sXh_0MCuBiGHUk3ZBZ37o6ZYQT4-0EmBLjzbaVtn6_aW4B4cKC7NvRDIU3OlgQR5lG/s320/d3.gif') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }
 
#bottom ul li a:hover {
background: #B1ACB1;}

#left-bottom { /* kolom kiri */
background:#ffffff; width: 300px;
float: left;
margin-left:10px;
padding:5px; /* Jarak antara text dengan garis pinggir */
Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px; }

#center-bottom { /* kolom tengah */
background:#ffffff; width: 300px;
float: left;
margin-left:10px;
padding:5px; /* Jarak antara text dengan garis pinggir */
Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px; }

#right-bottom { /* kolom kanan */
background:#ffffff; width: 300px;
float: left;
margin: 0 5px 0 10px;
padding:5px; /* Jarak antara text dengan garis pinggir */
Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px}

4 . Sekarang tuju bagian body atau bagian bawah template, lalu cari kode yang mirip dengan kode berikut :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

5.  Letakkan kode berikut ini tepat sebelum kode diatas :
<div id='bottom'>
<b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>

6. Kemudian simpan Template anda.

Sekarang agan bisa lihat hasilnya, jika tidak sesuai, silahkan sobat ganti sesuai keinginan sobat.

Keterangan :

• #bottom { width: 990px
  --> lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.
  
• background:#0B3B0B
  --> latar belakang (background kolom).
  
• color:#fff
  --> warna tulisan judul
  
• #left-bottom { /* kolom kiri */ width: 300px

--> lebar kolom kiri.

-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
--> garis melengkung pada setiap ujung kolom, semakin besar angkanya maka akan semakin lebar garis lengkungnya. Jika sobat enggan membuat kolom melengkung, ganti saja angka 5px dan ganti dengan 0px. Atau hapus semua kode �moz-border-radius tersebut.

Border-top: 2px solid #1B2A0A
Border-bottom: 2px solid #1B2A0A
Border-left: 2px solid #1B2A0A
Border-right: 2px solid #1B2A0A
--> untuk ketebalan garis pinggir masing � masing kolom, semakin besar angkanya maka akan semakin tebal garisnya. Jika sobat tidak mau memakai garis pinggir, sobat ganti saja angka 2px dengan 0px. Dan kode #1B2A0A adalah warna border / garis pinggir kolom.

Sedangkan kode yang berwarna merah adalah icon untuk kode ul li, saya punya beberapa gambar berserta url nya dibawah ini, sesuaikan dengan keinginan sobat. Pilih salah satu, dan copas pada kode yang berwarna merah.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnmz7HGF2lcVxpeVAcaB-vaTywrmE3bOLrkoelLZWBCQcu8cODOuWY4NCWeBdBXAxVolBAtJ9mVmsk3q_ZhmqySnzDRWwSE6Q4PhAZACok9folQ8JLq1SzcYN-61Vyc4EjS1HgA2B0qGFG/s320/z3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMyTfg7yDPrg3hjtD6DKfvCgRuZKaLftiQam4ECyzEW3N4G49WvQ85zV5gsIyMk40c8_tMckdDNxQD5CZRIfEbspHYALfD-OWDUJwcuUJLRHb7JHkysBO0kXJLf2L0xOjmqVmOw0PudYB/s320/z2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lEp_qfVTJw6FpcBNjUvrZNgRYOToSyYn0hJAxoweRMHaaXtA8JkcVOELhN3qVGeempT2MdJ5hIYPCyApGm-WDzvzCpqUgKgPPsaQJqj6ofc25ehXOSI1TawHUcB9_Om4tmNpeg_7Pt_C/s320/z1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3rPaqHVhHv-xC2iFaV3aXcA5LBV7fOSu3idA_w7V4MFK4gT3fNXCWJl5eYvY5dZ3hLzftPIZzqyL3k4lZmiMe8IMSBHrS65JkeYor_jBtMeCVLjB7i7YDH2LzJ426bNCVqwjjgW5415Ny/s320/d1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFOMOYh698TxlcrCrQcC82vf9n33nbiqs8Psr-_WiS2UeT4hShr2t4y2bQKd_rVPUVp9M7UETbphRwDmCO2EyjhPLqgkKF173NLfTO6LVq3swVgVqrauyP5MMiG1s1vJxptQE2WhcuCFNe/s320/d2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PZOaQaj1gwv_WDbvTCo8Kk37ECQQI9KTCNtb4l6OtUvdWfBanGVoTibkX4X_r5bdUfRPmYbTK1sXh_0MCuBiGHUk3ZBZ37o6ZYQT4-0EmBLjzbaVtn6_aW4B4cKC7NvRDIU3OlgQR5lG/s320/d3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONFi_ohw9BOUutOJvupzbjnpapi6XhxaFAER9uJ8_WwNhbt8CTcMIYd5Nu5EIZ5WewTYHNggD5_s-mRzkWKHMx35Ykkvi45DBDJOacPobYoMiEQN4s6fU2WGlK8hdnzUsrGOO9BypCfbc/s320/c1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XHws-l_IO6Iqq8FcSicKIyl3rwR3mmHHHxYVkLBtLSYdaOfJhBsqenwwWSxT7aUK9qf8fmaicHHmrSAMy4IpraXnqHfmSO5o5hEoSxUmHiB2i56od5WC9aYjCGu-_lvFtlsQ1jVIB4r3/s320/c2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiML1KttucfcHPB2Mf0_GQyAp2Rtp_aMCSQu57Nme1fklvhPNeIz9yiHgQ0rz5sMCT1CE6BbmvemVZjUXKOdRfD7CYFuGMh1_6GKd6mfrrYtbamk6-RSeW8PqnLSoJk-lGgG8uP6BXF28aG/s320/c3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOTCWQMqTsu3u1QentDMeKD5OwZVrQY5OF7tvXwX7uS4NchUQQHk-vCams10R5r7QjculAR7oyh0whxFKuK8V3Mc9bliyVMhkZTd29lIfrmT9bZS9Z9cT2fXz1XTad1ivMu1G5vDdYRvg/s320/a1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKrpAssXgcimjuY4PRI435k-MNjQlK4ARJ__hBZvjR1XLX4lyzmQPGhcwykQCsAxWF2Hv6svUtXFHS6Ux1bmKdsUp0Vifz9B9Pt4aThkRsTudDYQylvJJTJZvTz9C5goE1Pn114YS0IMcC/s320/a2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZebzcKAZI0w6Vm7dhv28Vcf1vdajVpCzQnZP2t7Ga1-CFXNOeW_uLuG-mE1JX9OKNFqkxwylWPcLZzv0-qBkNGC9TBhn_4j19VlliVuL_92CqbxxLcOjMWAzQm07ojlO7kV8RAMsBKil/s320/a3.gif

Untuk melihat hasilnya, silahkan sobat pasang recent posts atau recent comments pada kolom tersebut, maka akan terlihat bentuk icon pilihan sobat.

Good Luck, ya gan..!!

Bagaimana Cara Membuat Blog 3 Kolom

Bagaimana Cara Membuat Gambar Favicon Blog

Bagaimana Cara Membuat Gambar Favicon Blog-  Favicon memang menjadi sebuah faktor penting bagi blog atau website kita. Sebab bukan saja favicon ini membuat blog kita menjadi indah, tetapi favicon ini juga menjadi brand atau simbol kebesaran nama bisnis, website, atau blog kita. Berikut adalah cara membuatnya

Artikel ini adalah kelanjutan dari tutorial blogger sebelumnya, yaitu 'Bagaimana cara membuat random post'.  Sebenarnya ada 2 cara untuk membuat favicon ini, dan saya akan membahas kedua hal ini untuk anda.



1. Dengan cara URL

Untuk membuatnya, anda harus punya gambar yang akan dipakai untuk membuat faviconnya. Jika sudah punya, simak baik - baik caranya berikut ini.

I. Buka browser agan dan arahkan ke alamat www.genfavicon.com

1. klik Browse dan cari gambarnya di komputer sobat. Kemudian klik Upload Image
   
   
   
2. Atur sendiri gambarnya, tarik kotak view sampai penuh (besar).
   
   
   
3. Klik ukuran yang sobat inginkan kemudian Klik Capture & Preview. Pilih ukuran yang paling kecil saja. 
   
   
4. Selanjutnya klik Download: jpg dan simpan gambarnya di komputer sobat. 
   
   
   
5. Langkah selanjutnya adalah sobat harus mengupload gambar tersebut ke tempat penyimpanan online, contoh adalah ke http://photobucket.com/ atau http://sites.google.com/
6. Sekarang anggap saja sobat sudah menyimpan gambar sobat di tempat penyimpanan online, seperti ini contoh gambar yang telah saya simpan di google sites :
   
   
   http://sites.google.com/site/hendra/image/RSS-Blue.png

II. Buka Blogger, masuk menggunakan ID sobat.

1. Pilih Tata Letak.
   
2. Klik Edit HTML.
   
3. Pada halaman HTML, sobat harus mengganti tulisan yang saya tandai dengan warna ungu dengan alamat url favicon sobat :
   
   
   <link href='http://sites.google.com/site/hendra/image/RSS-Blue.png' rel='shotcut icon'/>
4. Kemudian letakkan halaman url baru sobat diatas kode </head>
   
5. Kemudian Save Template,    

2. Dengan cara langsung 

Sebenarnya sekarang caranya sudah lebih mudah, cukup anda design logo anda dari photoshop, setelah itu anda masuk dari pengaturan tata letak, kemudian dibagian layout itu anda akan menemukan kolom favicon dibagian kiri atas, anda tinggal masukkan dari situ. tunggu beberapa saat atau satu, dua hari, favicon anda akan berubah.

Jangan lupa komentnya ya gan..!! 

Bagaimana Cara Membuat Gambar Favicon Blog

Cara Membuat Menu Bertingkat Pengganti Navbar

Cara membuat menu bertingkat pengganti navbar- Kali ini iBlogle akan mengajak anda mempelajari bagaimana cara mengganti menu navbar dengan menu buatan sendiri dengan gaya drop down atau bertingkat. Seperti kita tahu bersama, pertama kali kita membuat blogspot, pada template bawaan akan ada navbar diatas header.

Sebelum anda memonetize kan blog anda, dengan mencari-cari artikel 'Bagaimana cara membuat akun paypal', ada baiknya anda menyelesaikan masalah template blog anda dahulu, misalnya seperti tutorial ini, yaitu cara menghilangkan navbar dan menggantinya dengan menu buatan sendiri, plus dropdownnya.  

Dulu para blogger berusaha menghilangkannya dengan mengedit HTML, tapi kini blogger sudah mempermudahnya, dengan membuat pilihan 'Off' dari pengaturan layout navbar.

 Berikut adalah kira-kira tampilan menu yang akan kita buat.

Oke, kita mulai saja..

Langkah Pertama

Silahkan anda off kan navbar blog anda terlebih dahulu, dari pengaturan layout

Langkah Kedua

Anda masuk kepengaturan Template, edit HTML. Jangan lupa centang 'Expand Template Widget"

lalu anda cari kode  ]]></b:skin>   (Silahkan aktivkan pencarian, dengan menekan Control + F)

Kemudian anda letakkan kode dibawah ini, keatas kode  ]]></b:skin>

 .menu {
background:#000;
border-bottom:3px solid #111;
box-shadow:0 0 5px white;
-moz-box-shadow:0 0 5px white;
-webkit-box-shadow:0 0 5px white;
-khtml-box-shadow:0 0 5px white;
z-index:100;
top:0;
left:0;
width:100%;
position:fixed;
z-index:10000;
opacity:.9;
filter:alpha(opacity:90);
font-size:13px;
text-align:center;
}

.menu ul {
background:#000;
height:2px;
list-style:none;
margin:0;
padding:0;
}

.menu li {
float:left;
padding:0px;
}

.menu li a {
background:#000;
color:#fff;
display:block;
font-weight:normal;
line-height:27px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
background:#212121;
color:#00ff00;
text-decoration:none;
}

.menu li ul{
background:#000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:100px;
z-index:200;
/*top:1em;/*left:0;*/
}

.menu li:hover ul {
display:block;
}

.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:100px;
}

.menu li:hover li a {
background:none;
}

.menu li ul a {
display:block;
height:27px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a {
background:#212121 center left no-repeat;
border:0px;
color:#fff;
text-decoration:none;
}
.menu p {
clear:left;
}

Langkah Ketiga

Anda cari kode <body      (sengaja tidak ditutup kurung, karna ada sambungannya)

Lalu anda letakkan kode berikut ini, dibawah kode <body

<div class='menu'><ul>
<li><a href='Url Anda'>Internet</a></li>
<li><a href='Url Anda'>Editing</a></li>
<li><a href='Url Anda'>Games</a></li>
<li><a href='Url Anda'>Lainnya</a><ul>
<li><a href='Url Anda'>News</a></li>
<li><a href='Url Anda'>Request</a></li>
<li><a href='Url Anda'>Tips Trik</a></li></ul></li>
<li style='float:right;margin-right:5px;'><a href='http://www.iblogle.com'>Homepage</a></li></ul></div>

Silahkan anda ganti dengan Url Anda.

Jika anda ingin menambahkan link baru, silahkan anda sisipkan kode berikut ini, diantaranya

<li><a href='Url Anda'>Nama Halamannya</a></li>

Silahkan anda Save. Moga sukses ya gan..!

Cara membuat menu bertingkat pengganti navbar