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 :

Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
Klik Add a Gadget, pilih HTML/Java Script
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('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Daftar Isi'; }" 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&alt=json-in-script&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('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Daftar Isi'; }" 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&alt=json-in-script&callback=loadtoc"> </script>

</div></div></div></div></div></div></div>
Lalu klik Save.
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.

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 :

Masuk ke situs http://www.google.com/friendconnect/, dan Login menggunakan account gmail anda.
Pilih blog Sobat yang ingin di pasang widget Google Followers, lalu klik pada Tambahkan Gadget Anggota.
Atur lebar widget,font dan warnanya, sesuaikan dengan sidebar blog Anda.
Kalau sudah selesai, tekan tombol Buat Kode pada bagian bawah halaman.
Copy kode yang diberikan oleh Google Friend Connect tersebut.
Selanjutnya, Login ke blogger. pilih Design / Rancangan > Page Element.
Kemudian pilih Add a Gadget.
Pilih HTML/Javascript dan masukkan kode yang diberikan oleh Google Friend Connect tadi.
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 :

Login ke Blogger, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.
Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
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.
Terakhir klik Save / Simpan Template.

Perhatian, cara ini akan menghilangkan waktu / jam pada postigan secara permanen.

Sekian dan terima kasih...

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 :

Login ke blogger, klik Design > Edit HTML.
Beri tanda centang pada kotak Expand Template Widget.
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); }
Selanjutnya, carilah kode </body> dan letakkan kode berikut tepat di atasnya
<div id='floating-widget'>
Letakkan kode widget disini
</div>
Jika sudah selesai klik SAVE / SIMPAN TEMPLATE, dan lihat hasilnya.

Silakan dicoba dan Semoga berhasil...

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
Kemudian klik Edit pada Blog Posts
Beri centang pada Show Share Buttons
Klik Save dan cek apakah muncul tombol sharenya
Jika masih belum muncul silahkan ke tab menu Edit HTML
Beri centang pada Expand Widget Templates.
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 + "&target=email"' 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 + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' 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 + "&target=twitter"' 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 + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' 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 + "&target=orkut"' 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 + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' 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.

Selamat mencoba dan semoga bermanfaat...

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.
Pilih Widget Text, Drag ke Sidebar
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.

Selamat mencoba dan semoga berhasil...

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

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 :

Login ke Blogger. Masuk ke menu Rancangan >Edit HTML
Cari kode </head>
Letakkan kode berikut tepat diatas kode </head>
<style type='text/css'>HTML,BODY{cursor:url("http://cursors4.totallyfreecursors.com/thumbnails/bluemultiglit.gif"), auto;}</style>
Keterangan: Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url cursor yang ingin Sobat gunakan.
Setelah Itu Save Template Anda dan selesai...

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 :

Kunjungi http://www.totallyfreecursors.com
Lalu pilih salah satu cursor yang ingin Sobat gunakan.
Copy kode yang diberikan.
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.

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 :

Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
Klik Add a Gadget, pilih HTML/Java Script
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&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.
Lalu klik Save.
Selanjutnya, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.
Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
Cari kode <b:include name='quickedit'/>, dan hapus semua kode tersebut dari blog Anda.
Terakhir klik SIMPAN / SAVE TEMPLATE.

Recent comment ini sangat cepat update, jika ada komentar baru, lakukan refresh dan komentar akan langsung ditampilkan. Selamat mencoba...

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 :

Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
Klik Add a Gadget/Tambah Gadget.
Lalu pilih Popular Posts
Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.

Untuk Wordpress :

Login ke Dasboard wordpress Anda, klik pada menu Appearance > Widget.
Drag Top Posts & Pages dan letakkan pada Sidebar.
Selanjutnya atur tampilan widget seperti keinginan Anda. Lalu klik Save.

Semoga Bermanfaat...

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 :

Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
Klik Add a Gadget/Tambah Gadget.
Pilih pada menu Featured.
Lalu pilih Recent Comment
Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.

Untuk Wordpress :

Login ke Dasboard wordpress Anda, klik pada menu Appearance > Widget.
Drag Recent Comment dan letakkan pada Sidebar.
Selanjutnya atur tampilan widget seperti keinginan Anda. Terakhir klik Save.

The Best Of Article