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.
   
2. Klik Add a Gadget, pilih HTML/Java Script
   
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.
   
   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.

Cara Menambah Widget Chatbox atau Buku Tamu Ke Halaman Blog

Senang dapat Berjumpa Lagi dengan sahabt-sahabat blogger Dapur Tutorial Blogspot. Pada Tutorial kali ini kita akam mempelajari bagaimana cara menambahkan buku tamu kehalaman blog anda dan manfaatnya bagi blog.

Widget chatbox atau buku tamu ini hapir semua pengguna Blogger memasang widget chatbox ini dihalaman blognya karena chatbox sangat banyak memberikan manfaat pada blog kita terutama selain dapat mempercantik tampilan blog, chatbox atau buku tamu ini dapat mendatangkan pengunjung kehalaman blog anda dan yang paling penting menurut Dapur Tutorial Blogspot yaitu sebagai saran untuk saling berkomunikasi dan silahturahmi antara pengunjung dengan admin blog.

Buku tamu yang sangat populer dan paling banyak digunakan yaitu CBox dan Shoutmix. karena Shoutmix akan menonaktifkan layanan Free atau gratisnya jadi disini Dapur Tutorial Blogspot Hanya akan menjelakan cara membat buku tamu menggunakan layanan gratis CBox

Berikut lankah-langkah untuk membuat Buku tamu pada halaman blog :

Langkah 1 : Mendapatkan kode buku tamu dari ChatBox

1. Kunjungi halaman resmi CBox disini  www.cbox.ws
2.  Klik Sign Up





3.  Setelah itu anda akan diminta untuk mengisi formulis pendaftaran seperti ini





4. Isi data yang diminta seperti gambar dibawah ini kemudian klik Create My Cbox





Klik gambar untuk memperbesar



5. Apabila data yang anda isi sudah benar akan ada pesan seperti berikut (lihat yang didalam kotak merah)





6. Kemudian buka Email yang anda gunakan untuk mendaftar Cbox Karena ada Email konfirmasi pendaftaran anda yang dikirim oleh Cbox
7. Klik Link konfirmasi tersebut untuk mengaktifkan akun Cbox anda





8. Setelah Email konfirmasi tersebut anda klik, anda akan mendapatkan pesan seperti berikut ini




Akun anda sekarang sudah aktif dan anda bisa masuk ke akun CBox anda


9. Sekarang Sign in Ke akun Cbox anda menggunakan Username dan Pasword yang sudah anda buat saat mendaftar tadi untuk mendapatkan Kode ChatBox atau bukutamu anda
10. Setelah anda masuk anda langsung dihadapkan ke halaman berikut 





11. Copy kode buku tamu yang diberikan

Sekarang anda sudah mendapatkan Kode buku tamu anda

NB :
Jika anda ingin melakukan pengaturan Seperti Lebar Kotak ChatBox Klik pada Bagian Look & Feel >> Layout Option kemudian untuk mengganti style cheatBox anda masuk ke Look & Feel >> Style Presents

Langkah 2 : Memasang kode kehalaman Blog

1. Silahkan anda masuk ke akun blogger anda
2. Pilih Tata Letak





3. Klik Tambah Gatget/Widget





4. Pilih HTLM/JavaScript





5. Paste Kode ChatBox tadi pada Box HTML/JavaScript yang tersedia





6. Klik Simpan
7. Selesai dan Lihat Hasilnya

Oh.......! Ternyata Yahoo Site Explorer Bergabung Dengan Bing Webmaster Tools

Oh.......! Ternyata Yahoo Site Explorer Bergabung Dengan Bing Webmaster Tools !. Ternyata Saya Melewatkan informasi ini. Informasi ini saya ketahui ketika saya mengakses Yahoo Explorer untuk submit sitemap blog ini  ke Search engin yahoo , duh....Muncul dah seperti ini.

Gambar diatas merupakan informasi tetang penggabungn Yahoo! Explorer dengan bing webmaster tools. Lengkapnya bisa anda ketahui lebih jelas di blog yahoo berikut ini :

http://www.ysearchblog.com/2011/09/14/site-explorer-transition-to-bing-webmaster-tools/

http://www.ysearchblog.com/2011/07/08/site-exploror-7-8-11/

 Dari pemberitaan tersebut saya mengutip kalimat berikut ini :

Yahoo explorer akan ditutup dan mulai menggunakan Bing Webmaster Tool agar situs/web mereka terus mendapatkan prioritas yang tinggi di search engine Bing dan Yahoo.

Dari ungkapan diatas saya menganalisa bahwa sistem index yahoo nantinya akan mengikuti sistem index bing. Jika demikian kita tidak perlu lagi untuk melakukan optimalisasi yang berbeda untuk Yahoo dan Bing. Kita cukup fokus optimalisasi pada bing karna hasilnya akan berdampak pada search engine yahoo juga.

Semoga saja dengan bergabungnya yahoo Explorer dan Bing Webmaster Tool ini , Web/Blog kita semua benar-benar mendapatkan prioritas yang tinggi dan banyak memberikan manfaat besar bagi masyarakat luas.

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.
   
3. Atur lebar widget,font dan warnanya, sesuaikan dengan sidebar blog Anda.
   
4. Kalau sudah selesai, tekan tombol Buat Kode pada bagian bawah halaman.
   
5. Copy kode yang diberikan oleh Google Friend Connect tersebut.
   
6. Selanjutnya, Login ke blogger. pilih Design / Rancangan > Page Element.
   
7. Kemudian pilih Add a Gadget.
   
8. Pilih HTML/Javascript dan masukkan kode yang diberikan oleh Google Friend Connect tadi.
   
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 Menambahkan Widget Like Box Facebook Pada Halaman Blog

Sebelumnya kita sudah membahas cara membuat halaman fans page Fecebook nah pada tutorial kali ini Dapur Tutorial BLogspot akan jelaskan tetang cara menambahkan like box Facebook. Sebelumnya sahabat blogger sudah tau belum seperti apa widget like bok Facebook ini ?.Hem....Pastinya udah pada tau dong !, karena sebagian besar pengguna blogger menambahkan widget ini kehalaman blognya.

Bagi yang belum tau seperti apa widget like box FB ini contohnya bisa anda ihat pada gambar disamping atau demonya yang ada di halaman blog Dapur Tutorial Blogspot. Widget ini selain dapat mempercantik tampilan blog juga akan memberikan kemudahan pada pengunjung blog untuk Menekan tombol like yang tampil pada blog anda.

Gak usah nunggu lama langsung saja kita bahas lankah-lankahnya :

Lankah 1 : Mendapatkan Code Like Box FB

1. Silahkan anda masuk ke akun facebook anda
2. Jika sudah kunjungi alamat berikut http://developers.facebook.com/docs/plugins/
3. Anda akan menjumpai Halaman dibawah ini kemudian klik Like Box 





4.  Berikutnya akan muncul pengaturan untuk widget like box seperti berikut 





Klik Gambar Untuk Memperbesar


Ket :
Facebook Page URL : Letekan URL Fans Page FB anda Disini
Width : Pengaturan untuk lebar kotak like box FB 
Height : Pengaturan Untuk Tinggi kotak Like box FB
Color Scheme : Pengaturan Background Like Box FB
Show Faces : Pengaturan apakah ingin menampilkan orang yang menyukai Fans Page anda
Border Color : Pengaturan untuk border Like Box FB anda


5. Selanjutnya Klik Get Code
6. Kemudian Copy Semua kode yang diberikan 

Sekarang anda sudah mendapatkan Kode untuk menampilkan Widget Like Box di blog anda sekarang lanjut ketahan berikutnyanya

Langkah 2 : Menambahkan Widget like Box kehalaman Blog

1. Silahkan anda masuk kehalaman blog anda
2. Pilih Tata Letak





3. Klik Tambah Gadget/Widget





4. Pilih HTML/JavaScript





5. Paste Code Like Box FB yang sudah anda Copy tadi Ke box HTML/JavaScript 





6. Trakhir Klik Simpan
7. Selesai

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.
   
2. Beri tanda centang pada Expand Template Widget.
   
   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.
   

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

Sekian dan terima kasih...

Tutorial Cara Membuat Halaman Fans Page/Penggemar Facebook

Halaman Fans Page/Penggemar Facebook sangat tidak asing lagi bagi kita. hampir semua komunitas, selebrity, marketing dll termasuk para blogger mania menggunakan halaman Fans Page/Penggemar Facebook sebagai tolak ukur seberapa banyak orang yang menggemari mereka.Nah kali ini kita akan membahas tetang cara membuat halaman Fans Page Facebook dan fungsinya untuk blog.

Salah satu Fungsinya untuk Blog seperti yang sudah disebutkan diatas yaitu sebagai salah satu tolak ukur seberapa banyak orang yang menyukai blog anda sedangkan fungsi lainnya yaitu kita dapat memperkenalkan Web/Blog kita di facebook dan blog anda juga akan mendapatkan Backlink nyata dari facebook dan fungsi yang terakhir menurut Dapur Tutoral Blogspot yaitu untuk sarana silaturahmi antara pemilik blog dengan pengunjung.

Berikut langkah-langkah untuk membuat halaman Fans/Penggemar Facebook :

1. Silahkan anda sign in menggunakan akun Facebook anda
2. Kunjungi halaman berikut ini http://www.facebook.com/pages/create.php
3. Anda akan dihadapkan pada halaman seperti dibawah. Pilih ktegori blog anda (disini Dapur Tutorial Blogspot memilih Perjungan dan komunitas)





4. Setelah anda Memilih anda akan diminta memasukan beberapa informasi seperti judul halaman Fans Facebook 




Selahkan isi informasi yang diminta setelah selesai klik Mulai


5. Anda akan dibawa ke langkah 1
   


Unggah Gambar : Untuk Upload Foto profil halaman Fans Page anda


6. Setelah selesai unggah poto klik Lanjutkan untuk ke lankah berikutnya





7. Pada langkah Dua diatas merupakan informasi apakah anda ingin mengundang teman anda untuk bergabung dengan halaman anda sekarang atau tidak dan apakah anda ingin membagikan halaman ini di didinding facebook anda atau tidak. Jika tidak anda juga langsung bisa klik lanjutkan untuk ke langkah brikutnya
8. Berikutnya anda akan dibawa ke lankah terakhir seperti gambar dibawah




Situs Web : Masukan URL Blog anda
Tetang : Berikan Informasi Mengenai Halaman Fans Page Facebook anda


9. Jika semua sudah anda isi klik Lanjutkan , bila berhasil anda akan langsung dibawa kehalaman fans Page Facebook anda seperti gambar berikut





10. Untuk melakukan pengaturan lebih lanjut pada halaman fans Page Facebook anda silahkan klik tobol Suting Halaman yang ada pojok atas sebelah kanan halaman Fans pade Facebook anda
11. Selesai

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.
   
2. Beri tanda centang pada kotak Expand Template Widget.
   
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.
   

Silakan dicoba dan Semoga berhasil...

Cara Menambah Widget Label (Kategori) Pada Halaman Blog

Sebenarnya tutorial kali ini berkaitan dengan tutorial sebelumnya tetang Cara Untuk Mengisi Label (Kategori) Pada Sebuah Artikel Blog. bedanya dengan tutorial sekarang dengan sebelumnya yaitu kita menambahkan widget label kehalaman blog supaya judul lebel yang sudah anda buat dapat ditampilkan pada halaman blog anda seperti pada gambar dibawah ini pada sisi kanan yang ditunjuk oleh anak panah berwarna merah

Buat sahabat yang belum tau apa yang dimaksut dengan label bisa baca pengertiannya di tutorial minggu lalau tetang Pengaruh Judul Label Atau Kategori Terhadap SEO

Lankah-lankah untuk menambahkan widget label adalah sebagai berikut :

1. Silahkan anda masuk ke akun blogspot/blogger anda
2. Klik Tata Letak





3. Klik Tambah Gadget/widget





4. Pilih Label.
   



5.  Klik Simpan





6. Selesai

Cara Untuk Mengisi Label (Kategori) Pada Sebuah Artikel Blog

Label atau lebih banyak dikenal oleh orang dengan kategori yang fungsinya untuk mengelompokan postingan artikel dengan artikel-artikel yang sama atau satu pembahasan. Label juga memiliki pengaruh terhadap SEO blog Seperti yang sudah dibahas Dapur Tutorial Blogspot pada tutorial sebelumnya tetang pengaruh judul label (kategori) terhadap SEO blog.

Mengisi label atau kategori pada sebuah artikel sangatlah mudah tapi lain halnya dengan pemula besar kemungkinannya dia tidak tau cara mengisi lebel tersebut pada sebuah artikel, untuk itu jangan sampai hal terkecil ini terlewatkan Dapur Tutorial Blogspot akan sampaikan caranya mengisi label (kategori) pada sebuah artikel.

lankah-lakah yang perlu anda lakukan adalah sebagai berikut :

1. Pastikan anda sudah sign in ke akun blogger anda
2. Klik pada tombol Entri Baru untuk membuat artikel baru pada blog anda





3. Buat tulisan baru pada halaman entri baru





4. Selesai menulis artikel lihat kesisikanan Klik Label





5. Akan mucul kotak untuk membuat judul label. Tulis judul lebel yang anda inginkan (disini diambul contoh judul label yaitu "Tutorial Blog" dan klik Selesai





6. Selanjutnya posting artikel blog anda dengan mengklik Publikasikan





7. Selesai lebel pada blog anda sekarang sudah ditambahkan.

Untuk memastikan apakah label pada postingan artikel anda sudah ditambahkan silahkan anda lihat di list artikel anda. Jika pada ujung artikel anda terdapat tulisan label yang anda buat tadi seperti gambar dibawah ini berarti anda sudah benar dan berhasil menambahkan label pada artikel blog anda.

Terus bagaimana menambahkan lebel pada artikel blog yang sudah diposting sebelumnya ?

Mudah berikut langkah-langkahnya :

1. Silahkan anda masuk ke list postingan artikel blog anda
2. Centang artikel yang ingin anda beri lebel





3. Perhatikan gambar dibawah. klik pada pada tempat yang ditunjuk oleh anak panah





4. Buat judul label yang anda inginkan kemudian klik OK





5. Selesai

Demikian tutorial kali ini. Yang baik silahkan diambil yang jelek mohon diperbaiki. Kesempurnaan hanya milik Allah SWT dan kita hanya terus berusaha jangan sampai menyerah.Semoga bermanfaat dan terimakasih.........!