Tips Blog | Tutorial Blog | Belajar Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Translate Blog Keren Dengan Microsoft Translator Widget

Microsoft Translator Widget - kutu-blogspot.blogspot.com
SynasMedseo - Berikut ini adalah widget translator dari Microsoft, untuk menerjemahkan halaman web ke dalam berbagai bahasa secara real-time. Pengguna dapat melihat halaman Anda dalam bahasa mereka sendiri, tanpa harus pergi secara terpisah ke sebuah situs web penterjemah. Melalui widget ini, pengguna dapat berbagi halaman Anda dengan teman-teman mereka dalam berbagai bahasa.

Widget ini bisa dijadikan salah satu alternatif selain goggle translate atau widget translate dari Gtranslate.  Selain tampilannya yang uniq, script Microsof Translator Widget ini lebih ringan, dapat dicustomize menyesuaikan dengan layout blog Anda, baik tampilan warna maupun ukuran.  Anda dapat melihat penampakkan widget ini pada side bar blog ini.

Untuk instalasi widget cukup mudah, Anda hanya perlu menambahkan sebuah gadget HTM/javascript dan masukkan script Microsoft Translator Widget yang telah di generated sebelumnya ke dalam content widget, agar lebih terinci berikut cara menambahkan widget ini secara berurutan.
  • Masukkan URL Address atau alamat situs Anda pada bagian Site Info
    Microsoft Translator Widget - kutu-blogspot.blogspot.com

      •  Pilih bahasa default yang digunakan oleh blog atau situs Anda
      Microsoft Translator Widget - kutu-blogspot.blogspot.com
      • Lakukan pengaturan pada bagian Option, pilih warna yang dinginkan, lebar widget serta opsi translator, sesuaikan dengan layout blog atau situs Anda.
      Microsoft Translator Widget - kutu-blogspot.blogspot.com
      Generate Widget
      • Login ke blogger dengan ID Anda, pergi ke Layout/Tata Letak dan tambahkan sebuah gadget type HTML/Javascript, kemudian masukkan kode Microsof Translator Widget hasil generate ke dalamnya.
      Add a gadget
      • Atur penempatan widget pada side bar blog dan klik tombol Save arrangement.
        • Langkah penutup, periksa blog Anda dan Selesai

        Cara Mengatasi dan Melindungi Blog dari Komentar SPAM

        Komentar SPAM
        Synasmedseo - Ada berbagai bentuk komentar spam sering kita jumpai, ditempelkan visitor pada sebuah posting yang diterbitkan, mulai dari ajakan berkunjung ke blog mereka atau hanya sekedar meninggalkan jejak dengan tujuan untuk mengalirkan back link ke blog mereka serta komentar yang sama sekali tidak relevan dengan materi postingan, yang lebih memprihatinkan, ada pengunjung yang sengaja menempelkan sederatan link hidup berupa promosi bisnis online.  Bahkan yang lebih parah beberapa pengunjung telah menempelkan link yang mengarah ke situs dewasa dan link judi online, "caaapeek deech".

        Untuk melindungi bagian komentar blog dari tindakan spaming, Anda dapat melakukan trik blogger seperti berikut ini :
        • Login ke blogger dengan ID Anda
        • Pada halaman dashboard blogger pilih menu Settings > Posts and comments seperti gambar di bawah ini 

          blogger comments
          • Lakukan pengaturan pada bagian Who can comment  untuk mengizinkan siapa saja yang dapat memberikan komentar di blog Anda, saya menyarankan untuk menggunakan opsi User with Google Accounts, agar visitor yang dapat memberikan komentar, hanya visitor yang memiliki Account Google.
          • Atur bagian Comment Moderation, menggunakan opsi Always agar setiap komentar yang diberikan oleh pengunjung, baru akan terbit setelah di setujui oleh Author Blog
          • Anda harus mengaktifkan Show word verification menjadi Yes, untuk mengaktifkan kode chaptca saat pengunjung memberikan komentarnya.
          • Untuk memblokir link hidup yang mungkin ditempelkan oleh pengunjung pergi ke Template > Edit HTML kemudian tempelkan kode berikut ini di atas kode </body>, simpan perubahan pada template Anda dengan menekan tombol Save templates

            <script type='text/javascript'>
            $(function() {
                $('#comment-holder p').find('a').remove();
            });
            </script>

          • Atau Anda dapat menggunakan kode CSS berikut ini, agar link hidup yang ditempelkan di bagian komentar blog akan disembunyikan (tidak ditampilkan), saya lebih menyarankan Anda untuk menggunakan cara ini.  Caranya pergi ke menu Template > Edit HTML tempatkan kode berikut di atas kode ]]></b:skin> simpan perubahan pada template Anda dengan menekan tombol Save templates
          • #comment-holder p a {display:none;}

          Sampai di sini pekerjaan anda Melindungi Blog dari Komentar SPAM telah selesai.

          Semoga Bermanfaat

          Cara Memperbaiki Duplicate Title Tags di Google Webmaster Tools

          duplicate title tags
          Synasmedseo - Seperti halnya duplicate meta description, maka duplicate title tags pun akan mempengaruhi relevansi pada hasil pencarian di search engine, bahkan halaman Anda bisa dianggap sebagai duplicate content.  Tentu ini akan sangat merugikan dari sisi SEO, dan akan berdampak pada rating hasil pencarian oleh search engine sesuai kata kunci yang dimasukaan oleh pengguna.

          Duplicate title tags ini dapat Anda lihat melalui Google Webmaster Tools. Silahkan login ke Google Webmaster Tools, masukkan user ID serta password Anda. Kemudian pada halaman dashboard pilih menu Optimization yang berada pada sidebar sebelah kiri dan klik link HTML Improvements.  Pada halaman ini akan terdapat parameter yang menunjukan adanya indikasi duplicate title tags yang ditemukan oleh crawler search engine saat merayapi situs atau blog Anda.

          title tags


          Jika link duplicate title tags ini dibuka maka akan terlihat postingan mana saja yang terindikasi sebagai duplicate title tags. Anda dapat melihat dua URL terbentuk untuk setiap postingan jika icon panah warna hitam disebelah kiri postingan ini di expand. Ada satu bentuk URL yang saya sendiri belum mengetahui asal-usulnya, URL ini sama seperti URL postingan pada umumnya namun ada penambahan karakter unik ?m=0.

          Cara Memperbaiki Duplicate Title Tags

          Ada beberapa tutorial hasil browsing yang saya temukan untuk memperbaiki duplicate title tags ini di antaranya :


          1. Menambahkan rel='canonical'

          Jika menggunakan cara ini maka Anda harus menambahkan elemen rel='canonical' pada URL halaman Anda yang terindikasi sebagai duplicate title tags, seperti di bawah ini, pada bagian head postingan dalam mode HTML.

          <link rel="canonical" href="http://kutu-blogspot.blogspot.com/2013/03/cara-membuat-spoiler-atau-tombol.html>

          Tentu saja hal ini akan sangat merepotkan jika postingan yang terdeksi sebagai title tags banyak, seperti yang saya alami terdapat 88 duplicate title tags, kemudian harus menambahkannya satu persatu pada setiap halaman tersebut, sungguh ini suatu pekerjaan yang membosankan.


          2. Mengatur URL Parameters

          Solusi kedua adalah mengatur URL Parameters di Google Webmaster Tools. Pada halaman dashboard, pilih menu Configuration, di bawah menu ini terdapat menu URL Parameters, pilih menu ini dan lihat apakah ada parameter m di dalamnya. Pada bagian parameter m ini klik link Edit di sebelah kanan dan atur setingan menjadi No: Doesn't affect page content (ex: track usage) seperti gambar di bawah ini. Jika Anda tidak menemukan parameter m ini, maka Anda dapat menambahkannya melalui tombol Add parameter.

          URL parameters



          3. Menambahkan parameter pada robots.txt

          Jika kedua cara di atas belum dapat mengatasi duplicate title tags, maka Anda dapat menambahkan baris perintah pada pengaturan parameter robots.txt yang tidak mengizinkan robot mesin pencari untuk mengcrawl url unik yang berakhiran ?m=0, bentuk baris perintah yang ditambahkan pada pengaturan parameter robots.txt adalah seperti di bawah ini

          Disallow: /?m=0
          Disallow: /?m=1
          Disallow: /*/*/*.html?m=0
          Disallow: /*/*/*.html?m=1

          Jika Anda punya pengalaman lain, saya mengajak Anda untuk berbagi informasi pada bagian komentar blog ini, agar pengetahuan kita menjadi bertambah, sukses untuk Anda dan happy bloging.

          Cara Membuat Spoiler atau tombol Show/Hide Pada artikel Blog

          Spoiler atau tombol Show/Hide Pada artikel Blog 

          Cara Membuat Spoiler atau tombol Show/Hide Pada artikel Blog - Spoiler, hampir sama dengan menempatkan sebuah gambar atau text anda di wadah bingkai yang sering lihat di web atau blog yang gambar pada artikel nya di sembunyikan dan kalau kita ingin melihat gambar nya kita di suruh klik pada suatu tombol..kira-kira begitu deh ,mungkin sobat lebih paham apa yang di maksud dengan spoiler ,di bawah ini ada beberapa kode pembuatan spoiler yang mungkin dapat menghemat tempat postingan kita baik gambar maupun teks dan juga tidak mengganggu loading web kita,Seperti yang Sobat - sobat lihat gambar disamping itulah contoh SPOILER atau tombol Show / hide  . oke sebelum kita mulai silahkan lihat tutorial nya dibawah ini

          Ikuti langkah - langkah dibawah ini :

          1. Login ke blogger masing - masing
          2. setelah itu buatlah Entri baru terlebih dahulu .
          3. klik Edit html yang ada disebelah Compose
          4. letakkan kode - kode dibawah ini sesuai keinginan tulisan anda .



          <div>

          <input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>
          <div class="alt2">
          <div style="display: none;">
          <div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
          Masukkan text-nya disini. Gambar juga bisa.
          </div>
          </div>
          </div>

          NB :
          • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata yang lain yang anda sukai.
          • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar




          <div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != ''){ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
          DISINI LETAK KONTENT ANDA</div></div></div></div></div>

          NB :
          • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
          • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar


          <div><div style="margin: 5px;">
          <div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" />
          </div>
          <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
          <div style="display: none;">
          ISI SPOILER
          </div></div></div>

          NB :
          • Huruf warna putih (judul spoiler) bisa di ganti dengan kata yang lain nya.
          • Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
          • Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar 

          Semoga Bermanfaat..

          Cara Dan Tutorial Optimasi Blog Blogspot Terbaru

          Optimasi Blog Blogspot Terbaru
          Kali ini saya akan berbagi Cara dan Tutorial Optimasi Blog Blogspot Terbaru. Silahkan anda perhatikan  kode-kode di bawah ini adalah sebuah kode yang tidak asing di Mata para blogger, mungkin anda akan beranggapan kode itu banyak di Google.., memang ini sebernarnya kalau di cari di Google banyak sekali Tapi perlu anda ketahui ini adalah sebuah hasil modifikasi yang sedikit disesuaikan dengan SEO yang ada di WP.


          Langsung saja disimak caranya berikut ini:

          Submit Sitemap di Webmaster Google - (Perlu di Perhatikan)

          // Gunakan ini jika Postingan anda di bawah 500 //
          atom.xml?redirect=false&start-index=1&max-results=500

          //Gunakan ini Untuk Blog dengan posting kurang dari 1000 //
          atom.xml?redirect=false&start-index=1&max-results=500
          atom.xml?redirect=false&start-index=501&max-results=500

          //Gunakan ini untuk Blog dengan postingan kurang dari 1500, tapi lebih 1000 //
          atom.xml?redirect=false&start-index=1&max-results=500
          atom.xml?redirect=false&start-index=501&max-results=500
          atom.xml?redirect=false&start-index=1001&max-results=500
          Sekarang Masuk ke HTML Blog.  Perhatikanlah kode-kode di bawah ini, jika anda tertarik untuk menggunakannya, maka tinggal sesuaikan, mana yang perlu anda ganti.

          Letakkan Kode di bawah ini tepat di Bawah kode <head>

          <meta content='Kode Verifikasi Google' name='google-site-verification'/>
          <meta content='Kode Verifikasi' name='msvalidate.01'/>
          <meta content='Kode Verifikasi Alexa' name='alexaVerifyID'/>
          <meta content='Kode Verifikasi Technorati ' name='TechnoratiVerifyID'/>
          <meta content='Kode Verifikasi Bing' name='y_key'/>
          <meta content='Kode Verifikasi Markosweb' name='markosweb.com/validation'/>
          <link href='https://plus.google.com/id_google+ anda' rel='author'/>
          <link href='http://www.nama-blog-anda.com/p/sitemap_2836.html' rel='contents'/>

          <b:include data='blog' name='all-head-content'/>
          <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <b:if cond='data:blog.url == &quot;http://www.nama-blog-amda.com/&quot;'>
          <title><data:blog.title/></title>
          <b:else/>
          <title><data:blog.pageName/></title>
          </b:if>
          // ----------------------------------------------------------------------------------------------//
          <meta content='Deskripsi Blog' name='Description'/>
          <meta content='Keywords 1, - Keywords 15' name='keywords'/></b:if>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <title><data:blog.pageName/></title>
          <meta content='index,follow,noodp,noydir' name='robots'/>
          <meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
          <meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>

          <link expr:href='data:blog.url' rel='canonical'/>
          </b:if>
          // ----------------------------------------------------------------------------------------------//
          <meta content='all' name='robots'/> diganti <meta content='index,follow' name='robots'/> // recommend
          <meta content='all' name='googlebot'/>
          <meta content='all' name='Googlebot-Image'/>
          <meta content='all' name='Webcrawlers'/>
          <meta content='all' name='msnbot'/>
          <meta content='all' name='Slurp'/>
          <meta content='all' name='ZyBorg'/>
          <meta content='all' name='Spiders'/>
          <meta content='all' name='audience'/>
          <meta content='all,index,follow' name='alexabot'/>
          <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
          <meta content='English' name='Language'/>
          <meta content='document' name='resource-type'/>
          <meta content='Global' name='Distribution'/>
          <meta content='true' name='MSSmartTagsPreventParsing'/>
          <meta content='no-cache' http-equiv='cache-control'/>
          <meta content='no-cache' http-equiv='pragma'/>
          <meta content='general' name='rating'/>
          <meta content='global' name='target'/>
          <meta content='United States' name='geo.placename'/>
          <meta content='usa' name='geo.region'/>

          Keterangan:
          Kode yang saya berikan warna Merah:

          Pertama:
          Saya Menyarankan anda untuk memasukkan Keywords hanya: 15 keywords ( ke-15 keywords tersebut benar-benar sudah Mantap di jadikan "Kata Kunci"

          Kenapa harus 15 ??
          Karena jika lebih dari 15 maka status "keywords tersebut" tidak valid -- Cara mengetahuinya adalah
          1. Instal Add-ons "SeoQuake" di Mozilla --
          2. Buka Blog anda lewat Mozilla
          3. Perhatikan di bagian Add-Ons SeoQuake disana ada pilihan DIAGNOSIS . Maka anda bisa melihat hasilnya, apa saja yang sudah valid sama yang belum valid.

          Ke-dua:
          <meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
          <meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>

          Disini saya membuang kode: data:blog.pageName + &quot;, &quot; +
          Sehingga menjadi:
          <meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
          <meta expr:content='data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>


          Alasannya adalah: Agar tidak terjadi Duplicat Tittle dan Cepat Masuk Index !
          karena hal ini nanti jika di lihat souce code nya, maka title blog akan berdampingan dengan judul Postingan

          Untuk yang Warna Hijau:
          Anda  hanya mengganti dengan nama blog anda masing-masing dan kode-kode verifikasi, jika belum mendapatkan kode verifikasi, saya sarankan silahkan di daftarkan agar mendapatkan kodenya.

          Semoga Artikel Cara atau Tutorial Optimasi Blog Blogspot Terbaru ini dapat bermanfaat.

          Cara membuat Read More otomatis di Blog

          Cara membuat Read More otomatis di Blog - dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot. Fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blog.


          Langkah-langkah cara membuat Read More Otomatis di Blogspot :
          • Login ke Blogger Masing- masing
          • Buka halaman design >> Edit HTML >> centang Expand template widget
          • Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
          • Paste kode berikut tepat dibawah </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 src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>
          • Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
          • Jika sudah ketemu silahkan anda ganti kode tersebut 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'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
          </b:if>
          <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
          • Finish simpan template dan lihat hasilnya

          Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :
          1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
          2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
          3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
          4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
          5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

          Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.

          Cara Membuat Menu Multi Kolom di Blog

          Membuat Menu Multi Kolom di Blog 

          Cara Membuat Menu Multi Kolom di Blog - Berawal dari lihat-lihat blog sohib-sohib yang mempunyai menu multi kolom di blognya, kemudian saya langsung terpikat melihatnya karena berfungsi sebagai penghemat penggunaan tempat di sidebar blog sobat agar tidak terlalu penuh dengan widget, sehingga blog sobat lebih rapi dan loadingnya lebih cepat. Mungkin bagi sobat yang masih newbie masih bingung dengan menu multi kolom??? Bagi sobat yang masih bingun bisa lihat contoh gambar di atas atau bisa dilihat di sidebar sebelah kanan blog saya yang bertuliskan �KATEGORY | STATISTIK | KOMENTAR�. 

          Cara kerjanyapun mirip dengan tab view pada office 2007. Mari kita cari tahu cara membuat menu multi kolom di blog,

          • Pertama seperti biasa sobat harus login dulu ke blog sobat.
          • Lalu masuk dasbor pilih tata letak/rancangan => Edit HTML.
          • Agar tidak terjadi hal-hal yang tidak di inginkan sobat download dulu templatenya.
          • Centang �expand widget template�
          • Cari kode ]]></b:skin> biar mudah mencarinya gunakan Ctrl F.
          • Copy kode berikut ini, lalu pasang diatas ]]></b:skin>

           div.TabView div.Tabs
          {
          height: 24px;
          overflow: hidden;
          }
          div.TabView div.Tabs a
          {
          float: left;
          display: block;
          width: 84px; /* Lebar Menu Utama Atas */
          text-align: center;
          height: 24px; /* Tinggi Menu Utama Atas */
          padding-top: 3px;
          vertical-align: middle;
          border: 1px solid #999999; /* Warna border Menu Atas */
          border-bottom-width: 0;
          text-decoration: none;
          font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
          font-weight: 900;
          color: #1E62B6; /* Warna Font Menu Utama Atas */
          }
          div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
          {
          background-color: #FFFFFF; /* Warna background Menu Utama Atas */
          }
          div.TabView div.Pages
          {
          clear: both;
          border: 1px solid #999999; /* Warna border Kotak Utama */
          overflow: hidden;
          background-color: #FFFFFF; /* 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;
          }
          Sobat bisa lihat teks yang berwarna merah, itu bisa di ganti sesuka hati kalian.
          Cari kode <head/>
          Copy kode berikut ini, lalu pasang diatas

          <script type='text/javascript'>
          function tabview_aux(TabViewId, id)
          {
          var TabView = document.getElementById(TabViewId);

          // ----- Tabs -----

          var Tabs = TabView.firstChild;
          while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

          var Tab = Tabs.firstChild;
          var i = 0;

          do
          {
          if (Tab.tagName == &quot;A&quot;)
          {
          i++;
          Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
          Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
          Tab.blur();
          }
          }
          while (Tab = Tab.nextSibling);

          // ----- Pages -----

          var Pages = TabView.firstChild;
          while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

          var Page = Pages.firstChild;
          var i = 0;

          do
          {
          if (Page.className == &#39;Page&#39;)
          {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
          Page.style.overflow = &quot;auto&quot;;
          Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
          }
          }
          while (Page = Page.nextSibling);
          }

          // ----- Functions -------------------------------------------------------------

          function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

          function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
          </script>

          • Kemudian simpan
          • Lalu masuk ke �page elements�
          • Kemudian pilih tambah gadget dan pilih HTML/Java script.
          • Masukkan atau copy paste  kode dibawah ini kedalamnya.

          <form action="tabview.html" method="get">
          <div class="TabView" id="TabView">
          <div class="Tabs" style="width: 260px;">
          <a href=�#�>Tab 1</a>
          <a href=�#�>Tab 2</a>
          <a href=�#�>Tab 3</a>
          </div>
          <div class="Pages" style="width: 256px; height: 270px;">

          <div class="Page">
          <div class="Pad">
          MASUKAN TEKS DISINI UNTUK TAB 1
          </div>
          </div>

          <div class="Page">
          <div class="Pad">
          MASUKAN TEKS DISINI UNTUK TAB 2
          </div>
          </div>

          <div class="Page">
          <div class="Pad">
          MASUKAN TEKS DISINI UNTUK TAB 2
          </div>
          </div>

          </div>
          </div>
          </form>

          <script type="text/javascript">
          tabview_initialize('TabView');
          </script><noscript><a href="http://kutu-blogspot.blogspot.com/" title="Synasmedseo Blog"><strong>Tips Trik Blog -Tutorial - Widget - SEO - Backlink - Alexa
          </strong></a></noscript>

          • lalu simpan


          Keterangan : 
          • - Tulisan warna biru, untuk �judul tab�.
          • - Tulisan warna orange, untuk memasukkan isi tab. 

          Semoga Artikel Tentang  Cara Membuat Menu Multi Kolom di Blog ini Dapat Bermanfaat.

          Cara membuat Scroll Pada Arsip Blog

          Cara membuat Scroll Pada Arsip Blog
          Sekarang saya akan membahas tentang cara membuat atau memasang scroll pada archive blog, namun kali ini sedikit berbeda, tips cara memasang scroll ini dapat diaplikasikan pada widget-widget lain diblogspot, seperti scroll untuk label, daftar link, archive, dan juga widget lainnya

          Mungkin jika Anda mempunyai banyak postingan di bulan ini maka tampilan arsip blog akan bertambah panjang ke bawah. Untuk menghemat tempat dan agar lebih praktis maka Anda bisa membuat scroolbar di bagian arsip blog seperti pada tampilan blog ini yang judulnya sudah di ubah menjadi Artikel Terbaru.

          Oke langsung saja ya, soalnya saya juga g hobi ngoceh panjang-panjang, lagian masih banyak kerjaan ;) . Ingat Cara Mudah Membuat Scroll Pada Archive Blogspot ini hanya untuk pengguna blogspot, dan baca baik-baik caranya berikut ini


          cara membuat atau memasang scroll pada archive blog ini tidak jauh beda dengan membuat scroll pada gadget blogger/blogspot yang lain, yaitu sebagai berikut:

          1. Log in ke blogger
          2. Masuk ke Rancangan
          3. Edit HTML (centang kotak expand widget template)Cari yang mirip dengan kode diatas
          4. Setelah ketemu sobat pasang kode dibawah ini tepat diatas kode ]]></b:skin>
          #BlogArchive1 .widget-content{
          height:200px;
          width:auto;
          overflow:auto;
          }
          5. Simpan template dan silahkan sobat lihat hasilnya

          Catatan : height:200px; adalah untuk tingginya, jadi silahkan sobat sesuaikan sendiri sesuai dengan kebutuhan