Sabtu, 31 Desember 2011

Membuat Menu Melayang

Membuat Menu Melayang | Tutorial Blog

Menu melayang disini maksudnya menu yang tetap pada posisinya walaupun blog di geser keatas dan kebawah.
Berikut cara Membuat Menu Melayang :
  • Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Membuat Menu Melayang
  • Beri tanda centang pada Expand Template Widget.
    Membuat Menu Melayang
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  • Selanjutnya cari kode </head>,dan letakan kode berikut diatasnya :
    <style>
    div.floating-menu {
    position: fixed;
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#666));
    background: -moz-linear-gradient(top, #000, #666);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#000000&#39;, endColorstr=&#39;#999999&#39;);
     border: 1px solid #000;
     width: 150px;
     z-index: 500;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border:none;
    padding:10px 10px 10px 10px;
     }
    div.floating-menu a, div.floating-menu h4 {
    display: block;
    margin: 0 0.5em;
    color:#FFF; }
    div.floating-menu a:hover {
    color:#0000FF;
    background: -webkit-gradient(linear, left top, left bottom, from(#0088ff), to(#bbddff));
    background: -moz-linear-gradient(top, #0088ff, #bbddff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0088ff&#39;, endColorstr=&#39;#bbddff&#39;);
    color:#FFF;
    cursor: pointer;
    text-decoration: none;
    padding: 5px 5px 5px 5px;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);  
    }
      </style>
  • Setelah itu sobat cari kode  <body> dan masukan kode di bawah ini di bawah <body>.
    <div class="floating-menu">
    <h4>Menu</h4>
    <a href="http://alamat-url/">Anchor Text</a>
    <a href="http://alamat-url/">Anchor Text</a>
    <a href="http://alamat-url/">Anchor Text</a>
    <a href="http://alamat-url/">Anchor Text</a>
    </div> 
    Ganti http://alamat-url/ dan Anchor Text,
  • Terakhir klik Save / Simpan Template.
    Membuat Menu Melayang
Selamat mencoba dan semoga berhasil Membuat Menu Melayang.

Jumat, 30 Desember 2011

Membuat Widget Daftar Isi Tersembunyi

Membuat Widget Daftar Isi Tersembunyi | Tutorial Blog

Sebelumnya saya pernah posting tentang Membuat Daftar Isi Blog, pada tutorial kali ini daftar isi tersebut akan kita pasang pada widget di sidebar blog dengan mode Show Hide.
Buat yang ingin mencobanya, silakan ikuti tutorial berikut :
  1. Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
    Membuat Widget Daftar Isi Tersembunyi
  2. Klik Add a Gadget, pilih HTML/Java Script
    Membuat Widget Daftar Isi Tersembunyi
  3. Lalu masukkan kode berikut :
    <div class="widget-content">
    <div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input 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;TUTUP&#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;Daftar Isi&#39;; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">

    <script src="http://post-xml.googlecode.com/files/feeds-labels.js"></script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>

    </div></div></div></div></div></div></div>
    Keterangan :
    blue : warna background, silakan ganti sesuai keinginan Anda.
    width: 270px; height: 200px; : Ukuran lebar dan tinggi widget, sesuaikan dengan sidebar Anda.
    alamatblog.com : Ganti dengan alamat blog Sobat.
    Widget diatas daftar isi berdasarkan label, untuk Daftar Isi Berdasarkan Tanggal berikut kodenya :
    <div class="widget-content">
    <div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input 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;TUTUP&#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;Daftar Isi&#39;; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">

    <script src="http://post-xml.googlecode.com/files/feed-dates.js"> </script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script>

    </div></div></div></div></div></div></div>
  4. Lalu klik Save.
    Membuat Widget Daftar Isi Tersembunyi
    hasilnya akan seperti ini, silakan di klik.

    Daftar Isi

    • Judul Postingan
    • Judul Postingan
    • Judul Postingan
    • Judul Postingan
    • Dan Seterusnya
Sekian tutorial tentang Membuat Widget Daftar Isi Tersembunyi.

Kamis, 29 Desember 2011

Widget Google Followers Valid XHTML

Widget Google Followers Valid XHTML | Tutorial Blog

Dari hasil Tes Valid XHTML lewat validator.w3.org, widget Follower default dari blogger dinyatakan tidak valid. Widget ini mengandung error. Pada tutorial kali ini kita bahas cara memasang widget Google Followers yang Valid XHTML, caranya kita gunakan kode asli dari google friend connect.
Berikut Tutorialnya :
  1. Masuk ke situs http://www.google.com/friendconnect/, dan Login menggunakan account gmail anda.
  2. Pilih blog Sobat yang ingin di pasang widget Google Followers, lalu klik pada Tambahkan Gadget Anggota.
    Widget Google Followers
  3. Atur lebar widget,font dan warnanya, sesuaikan dengan sidebar blog Anda.
    Widget Google Followers
  4. Kalau sudah selesai, tekan tombol Buat Kode pada bagian bawah halaman.
    Widget Google Followers
  5. Copy kode yang diberikan oleh Google Friend Connect tersebut.
    Widget Google Followers
  6. Selanjutnya, Login ke blogger. pilih Design / Rancangan > Page Element.
    Design Page Element
  7. Kemudian pilih Add a Gadget.
    Add Gadget
  8. Pilih HTML/Javascript dan masukkan kode yang diberikan oleh Google Friend Connect tadi.
    Html JavaScript
  9. Lalu klik Save. Selesai...
Supaya benar-benar valid, Masuk ke menu Edit HTML, dan beri tanda centang pada box Expand Widget Template, Cari kode <b:include name='quickedit'/>, dan hapus semua kode tersebut dari template anda.
Selanjutnya akan saya buat tutorial tentang Widget Google Followers Hide Show.
Sekian tutorial tentang memasang Widget Google Followers Valid XHTML.

Cara Menghapus Waktu Postingan

Cara Menghapus Waktu Postingan | Tutorial Blog

Settingan waktu / jam secara default pada blogspot akan muncul di setiap postingan, beberapa blogger tidak senang dengan adanya waktu / jam postingan tersebut, pada tutorial kali ini saya akan berbagi cara menghilangkan waktu / jam postingan tersebut secara permanen.
Berikut langkah-langkahnya :
  1. Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Cara Menghapus Waktu Postingan
  2. Beri tanda centang pada Expand Template Widget.
    Cara Menghapus Waktu Postingan
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  3. Kemudian cari kode di bawah ini :
    <span class='post-timestamp'>
    <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
    <a class='timestamp-link' expr:href='data:post.url'
    rel='bookmark' title='permanent link'><abbr class='published'
    expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></
    a>
    </b:if>
    </b:if>
    </span>
    Akan lebih mudah untuk menemukan kode di atas dengan menggunakan fungsi Ctrl+F (find) dan cari kode <span class="post-timestamp">, Jika sudah ketemu, delete kode yang ada di dalam kotak berwarna biru diatas.
  4. Terakhir klik Save / Simpan Template.
    Cara Menghapus Waktu Postingan
Perhatian, cara ini akan menghilangkan waktu / jam pada postigan secara permanen.
Sekian dan terima kasih...

Selasa, 27 Desember 2011

Membuat Widget Melayang di Blogger

Membuat Widget Melayang di Blogger | Tutorial Blog

Sebelumnya saya pernah posting tentang Membuat Widget Melayang di Wordpress.com, untuk kali ini Membuat Widget Melayang di Blogger / Blogspot.
Ok Sob , berikut caranya :
  1. Login ke blogger, klik Design > Edit HTML.
    Membuat Widget Melayang di Blogger
  2. Beri tanda centang pada kotak Expand Template Widget.
    Membuat Widget Melayang di Blogger
  3. Cari kode ]]></b:skin> dan kalau sudah ketemu, letakkan kode berikut tepat di atasnya.
    #floating-widget { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  4. Selanjutnya, carilah kode </body> dan letakkan kode berikut tepat di atasnya
    <div id='floating-widget'>
    Letakkan kode widget disini
    </div>
  5. Jika sudah selesai klik SAVE / SIMPAN TEMPLATE, dan lihat hasilnya.
    Membuat Widget Melayang di Blogger
Silakan dicoba dan Semoga berhasil...

Senin, 26 Desember 2011

Cara Menampilkan Share Button

Cara Menampilkan Share Button | Tutorial Blog

Bagi sobat blogger yang sudah pernah atau sering gonta ganti template yang diambil dari penyedia template mungkin tidak bisa memakai fitur Share Button. karena kode Share botton pada design template tersebut mungkin fiturnya tidak ada, jadi Share botton-nya tidak muncul.
Berikut Cara Memunculkan Share Button di Blogger :
  • Masuk ke blogger, klik Design > Page Element
    Cara Menampilkan Share Button
  • Kemudian klik Edit pada Blog Posts
    Cara Menampilkan Share Button
  • Beri centang pada Show Share Buttons
    Cara Menampilkan Share Button
  • Klik Save dan cek apakah muncul tombol sharenya
    Cara Menampilkan Share Button
  • Jika masih belum muncul silahkan ke tab menu Edit HTML
    Cara Menampilkan Share Button
  • Beri centang pada Expand Widget Templates.
    Cara Menampilkan Share Button
  • Cari kode <b:includable id='backlinks' var='post'>.
  • Letakkan kode berikut diatas kode <b:includable id='backlinks' var='post'>.
    <b:includable id='shareButtons' var='post'>
      <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
          <span class='share-button-link-text'><data:top.emailThisMsg/></span>
      </a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
          <span class='share-button-link-text'><data:top.blogThisMsg/></span>
      </a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
          <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
      </a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
          <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
      </a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
          <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
      </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
          <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
      </a></b:if>
      <b:if cond='data:top.showDummy'>
        <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
      </b:if>
    </b:includable>
  • Selanjutnya cari kode <div class='post-footer'> atau di posisi line 2, line 3,misalnya line 3 : <div class='post-footer-line post-footer-line-3'>.
  • Lalu letakkan kode berikut di bawah kode tersebut.
    <div class='post-share-buttons goog-inline-block'>
            <b:if cond='data:post.sharePostUrl'>
              <b:include data='post' name='shareButtons'/>
            </b:if>
          </div>
  • Klik Save Template dan lihat hasilnya.
    Cara Menampilkan Share Button
Selamat mencoba dan semoga bermanfaat...

Minggu, 25 Desember 2011

Membuat Widget Melayang di Wordpress.com

Membuat Widget Melayang di Wordpress.com | Tutorial Blog

Widget melayang (Floating Widget) mungkin dapat Sobat gunakan untuk mempercantik tampilan blog, cara memasangnya mudah saja, namun tidak semua widget dapat di pasang menggunakan trik ini.
Langsung saja Sob, berikut caranya :
  • Login ke Wordpess Anda, Klik Appearance > Widgets.
    Membuat Widget Melayang
  • Pilih Widget Text, Drag ke Sidebar
    Membuat Widget Melayang
  • Lalu letakkan kode berikut ;
    <div style='display:scroll;position:fixed;top:5px;right:5px;'>
    Kode Widget
    </div>
    Sebagai contoh saya gunakan kode pagerank
    <div style='display:scroll;position:fixed;top:5px;right:5px;'>
    <a href="http://www.getrank.org" target="_blank"><img title="Pagerank" src="http://www.getrank.org/prbutton/pagerank-display.php?s=17" alt="PageRank Checker" border="0px" /></a>
    </div>
    Keterangan :
    top:5px;right:5px; : kode yang berwarna merah merupakan posisi widget yang akan Anda pasang, seperti contoh diatas. top right menunjukkan posisinya di atas bagian kanan dengan jarak 5 pixel dari pinggir layar monitor Anda. Bila ingin merubah posisinya di atas kiri, maka codenya menjadi ; top:5px;left:5px  posisi bawah kiri : bottom:5px;left:5px dan posisi dibawah kanan ganti codenya dengan bottom:5px;right:5px
  • Terakhir klik Save.
    Membuat Widget Melayang
Selamat mencoba dan semoga berhasil...

Sabtu, 24 Desember 2011

Black Hat Seo

Black Hat Seo | Tutorial Blog

Black hat seo adalah cara curang / kotor dalam melakukan teknik optimasi untuk mendapatkan rangking terbaik di search engine. Teknik seperti ini memang terbukti berhasil membawa sebuah halaman blog bisa tampil pada halaman depan google namun hanya bertahan singkat, setelah itu halaman tersebut akan hilang atau bahkan blog, situs ataupun web tersebut akan dibanned sama mbah google. Cara mencek apakah situs kita dibanned atau tidak sama google adalah dengan mengetikkan site:namasitus.com di kolom pencarian google. Jika gak ada hasil yang muncul padahal sebelumnya ada maka jelas sudah blog situs ataupun web tersebut kena banned oleh google, silakan baca Cara Mengetahui Blog Kena Banned.
Teknik Black Hat SEO yang saya tahu ada 5 jenis yaitu :
  • Teknik Black Hat SEO Link Farming
    Teknik Black Hat SEO Link Farming adalah sebuah teknik mengumpulkan link di satu halaman blog maupun situs. Maksudnya di satu halaman cuma berisi daftar link yang jumlahnya sangat banyak bisa sampai ratusan atau bahkan ribuan link.
  • Teknik Black Hat SEO keyword Stuffing
    Teknik Black Hat SEO keyword stuffing adalah penerapan keyword yang berkelebihan atau menembak keyword secara membabi buta, dimana sebuah halaman web yang berisi sebuah kata yang berulang - ulang atau tidak wajar.
  • Teknik Black Hat SEO Cloaking Page doorway page
    Untuk teknik Black Hat SEO cloaking page atau doorway page adalah cara dimana mencari jalan untuk membuat sebuah halaman web agar terus dilihat atau terus dikunjungi. Teknik seperti ini bisa dilakukan di blog bersangkutan ataupun di blog lain dengan cara menyisipkan sebuah kode bisa javascript dan bisa php yang gunanya adalah pemanggilan untuk sebuah halaman yang ingin dioptimasi. Cara simpelnya adalah mengunakan pop up, yaitu sebuah teknik membuka halaman web yang tidak ingin kita kunjungi terbuka di jendela baru, Jadi mau tidak mau halaman tersebut tetap terbuka web lain. Cara lain dari door way page ini adalah membuat kode refresh atau redirect ke halaman web tertentu yang ingin di redirect. Tentunya halaman yang punya trafik bagus misalnya traffiknya ribuan maka otomatis pengunjung yang ribuan diredirect ke halaman web yang akan dioptimasi. Cara lainnya dari doorway page ini adalah memanfaatkan url redirect dari hasil pencarian google.
  • Teknik Black Hat SEO Invisible Text (Teks Tidak Terlihat)
    Untuk Teknik Black Hat SEO Invisible Text (Teks Tidak Terlihat) adalah suatu teknik menyembunyikan kata sebuah keyword di dalam blog yang kata tersebut tidak akan tampak secara kasat mata. Caranya dengan menyamakan warna tulisan kata tersebut dengan latar belakang atau background template. misal kalau template kita hitam maka buat warna text kata tersebut berwarna hitam. Tulisan yang tidak nampak tersebut dengan mata telanjang bisa dilihat dengan cara memblock semua halaman dengan cara select + all gunanya untuk menghighlights atau menandai seluruh tulisan. Cara yang membutuhkan waktu lama adalah dengan memperhatikan page source halaman web bersangkutan. Cara ekstrem untuk melakukan teks yang tak terlihat ini namun dapat terlihat oleh robot adalah dengan menerapkan kode berikut ke template : <!--keyword-->
  • Teknik Black Hat SEO Iteration title
    Untuk Teknik Black Hat SEO Iteration title adalah teknik perulangan judul, maksudnya isi postingannya cuma pengulangan dari judul. Caranya mudah saja, buat postingan misal judulnya teknik seo lalu isinya cuma pengulangan dari judul tersebut yaitu teknik seo, gak usah ditambah tulisan yang lain lagi, itu saja sudah cukup. Biasanya teknik seperti ini berlaku untuk keyword baru yang ada di google atau baru muncul di google.
Semoga Bermanfaat...

Jumat, 23 Desember 2011

Cara Merubah Cursor Blog

Cara Merubah Cursor Blog | Tutorial Blog

Bagi Sobat yang ingin mengganti tampilan cursor di blog, itu sangat mudah, bagi yang sudah tau, bagi yang belum tau pasti tidak mudah. hehe...
Sebelumnya saya pernah posting tentang Membuat Efek Bintang Pada Kursor, kali ini saya akan berbagi tentang cara untuk merubah tampilan cursor blog, berikut caranya :
  1. Login ke Blogger. Masuk ke menu Rancangan >Edit HTML
    Cara Merubah Cursor Blog
  2. Cari kode </head>
  3. Letakkan kode berikut tepat diatas kode </head>
    <style type='text/css'>HTML,BODY{cursor:url(&quot;http://cursors4.totallyfreecursors.com/thumbnails/bluemultiglit.gif&quot;), auto;}</style>
    Keterangan: Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url cursor yang ingin Sobat gunakan.
  4. Setelah Itu Save Template Anda dan selesai...
    Cara Merubah Cursor Blog
Jika sobat tidak memiliki icon kursor, silakan kunjungi http://www.totallyfreecursors.com situs tersebut menyediakan ribuan icon cursor,pilih icon yang sobat mau..
Dan Sobat juga dapat langsung memasangnya melalui widget HTML/Javascript, berikut caranya :
  1. Kunjungi http://www.totallyfreecursors.com
  2. Lalu pilih salah satu cursor yang ingin Sobat gunakan.
    Cara Merubah Cursor Blog
  3. Copy kode yang diberikan.
    Cara Merubah Cursor Blog
  4. Lalu pasang pada widget HTML/Javascript blog sobat. jika belum bisa memasang widget silakan baca Memasang Widget / Gadget di Blogspot
Semoga tutorial ini bisa membantu sobat yang ingin Merubah Cursor Blog.

Kamis, 22 Desember 2011

Widget Recent Comment Valid XHTML

Widget Recent Comment Valid XHTML | Tutorial Blog

Sebelumnya saya pernah posting tentang Widget Recent Post Valid XHTML. Pada tutorial kali ini saya berbagi tentang Widget Recent Comment Valid XHTML.
Berikut cara Memasang Widget Recent Comment Valid XHTML :
  1. Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
    Widget Recent Comment Valid XHTML
  2. Klik Add a Gadget, pilih HTML/Java Script
    Widget Recent Comment Valid XHTML
  3. Lalu isikan kode berikut :
    <div style="height: 250px; overflow: auto; padding: 3px; text-align: left;"><script type="text/javascript" src="http://wadah-tutorial.googlecode.com/files/comments.js"></script>
    <script type="text/javascript">
    var numcomments = 10;
    var showcommentdate = false;var
    showposttitle = true;var
    numchars = 100;var
    standardstyling = true;var
    showfooter = true;
    </script>
    <script type="text/javascript" src="http://alamatblog.com/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments"></script></div>
    Ganti alamatblog.com dengan Alamat blog Sobat.
    Keterangan:
    numcomments: jumlah koment terakhir yg ditampilkan
    showcommentdate: false menunjukkan tanggal tidak ditampilkan, jika ingin menampilkan ganti dengan true
    showcommenttitle: true menunjukkan judul artikel ditampilkan, ganti false jika tidak ingin menampilkan.
    Numchars: Maksimal karakter yang tampil pada setiap list coment terakhir.
  4. Lalu klik Save.
    Widget Recent Comment Valid XHTML
  5. Selanjutnya, Klik Design/Rancangan > Edit HTML.
    Widget Recent Comment Valid XHTML
  6. Beri tanda centang pada Expand Template Widget.
    Widget Recent Comment Valid XHTML
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  7. Cari kode <b:include name='quickedit'/>, dan hapus semua kode tersebut dari blog Anda.
  8. Terakhir klik SIMPAN / SAVE TEMPLATE.
    Widget Recent Comment Valid XHTML
Recent comment ini sangat cepat update, jika ada komentar baru, lakukan refresh dan komentar akan langsung ditampilkan. Selamat mencoba...

Rabu, 21 Desember 2011

Memasang Widget Popular Posts

Memasang Widget Popular Posts | Tutorial Blog

Sebelumnya saya pernah posting tentang Memasang Widget Recent Post, untuk kali ini Memasang Widget Popular Posts. Widget ini berfungsi untuk menampilkan postingan yang sering di baca pengunjung pada blog Anda.
Berikut cara Memasang Widget Popular Posts :
  • Untuk Blogspot :
  1. Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
    Memasang Widget Popular Posts
  2. Klik Add a Gadget/Tambah Gadget.
    Memasang Widget Popular Posts
  3. Lalu pilih Popular Posts
    Memasang Widget Popular Posts
  4. Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.
    Memasang Widget Popular Posts
  • Untuk Wordpress :
  1. Login ke Dasboard wordpress Anda, klik pada menu Appearance > Widget.
    Memasang Widget Popular Posts
  2. Drag Top Posts & Pages dan letakkan pada Sidebar.
    Memasang Widget Popular Posts
  3. Selanjutnya atur tampilan widget seperti keinginan Anda. Lalu klik Save.
    Memasang Widget Popular Posts
Semoga Bermanfaat...

Selasa, 20 Desember 2011

Memasang Widget Recent Comment

Memasang Widget Recent Comment | Tutorial Blog

Sebelumnya saya posting tentang Memasang Widget Recent Post, untuk kali ini Memasang Widget Recent Comment. Widget ini berfungsi untuk menampilkan komentar terbaru pada blog Anda.
Berikut cara Memasang Widget Recent Comment :
  • Untuk Blogspot :
  1. Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
    Memasang Widget Recent Comment
  2. Klik Add a Gadget/Tambah Gadget.
    Memasang Widget Recent Comment
  3. Pilih pada menu Featured.
    Memasang Widget Recent Comment
  4. Lalu pilih Recent Comment
    Memasang Widget Recent Comment
  5. Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.
    Memasang Widget Recent Comment
  • Untuk Wordpress :
  1. Login ke Dasboard wordpress Anda, klik pada menu Appearance > Widget.
    Memasang Widget Recent Comment
  2. Drag Recent Comment dan letakkan pada Sidebar.
    Memasang Widget Recent Comment
  3. Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.
    Memasang Widget Recent Comment
Semoga Bermanfaat...