Tutorial menambahkan Kursor di blog

          

 Baiklah, sobat kali ini saya akan sharing tentang cara memasukan kursor di blog Sebelum lebih jauh mengenal kursor coba kita baca dulu definisi dari kursor itu sendiri menurut yang saya baca di Wikipedia adalah  Dalam teknologi komputasi, kursor adalah suatu petunjuk atau indikator posisi pada monitor petunjuk  atau peranti tampilan lain yang akan merespons masukan dari suatu masukan teks atau peranti petunjuk. Kursor secara umum dapat dibagi menjadi dua jenis: kursor teks dan kursor tetikus. Kursor teks adalah petunjuk pada antar muka baris (CLI) atau editor teks yang menunjukkan tempat teks akan diletakkan sewaktu dimasukkan (titik penyisipan) dan biasanya berupa garis bawah, segi empat, atau garis vertikal yang dapat berkedip atau stabil. Kursor tetikus adalah petunjuk sekunder yang ditambahkan oleh tetikus atau peranti penunjuk komputer lain untuk menunjukkan posisi penunjuk tersebut yang bisa berbentuk seperti tanda panah pada sistem GUI atau kotak pada sistem CLI.

Baiklah, sobat kita langsung aja menuju Tutorial

1. Login  ke blogger.

2. Masuk ke dasbor > template.

3. Edit HTML. Centang Expand widget.

4. Cari kode </head> dengan menggunakan Ctrl+F.

5. Copy dan paste kode di bawah ini tepat di atas kode head\ Javascript

Catatan: sobat bisa juga menambahkan langsung pada  HTML \ Javascript

<style type='text/css'> HTML,BODY{cursor: url(&quot;http://downloads.totallyfreecursors.com/thumbnails/sweden.gif&quot;), auto;} </style> 

6. Simpan dan lihat hasilnya.

Atau lebih jelasnya sobat dapat meihat gambar di bawah

Dan sobat juga dapat mengunjungi situs gratis kursor http://www.totallyfreecursors.com

Atau  http://situsalfi.blogspot.com/2012/11/kumpulan-cursor-untuk-blog.html

Catatan: bagi Sobat yang menginginkan Kursor di bawah ini atau Kursor lain silakan kunjungi WWW.tutorialkamu.blogspot.com

 <style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_cur1027.gif"), auto;}
</style> <br>


<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_sym144.gif"), auto;}
</style> <br>




<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_hol512.gif"), auto;}
</style> <br>



<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_oth829.gif"), auto;}
</style> <br>



<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_sym142.gif"), auto;}
</style> <br>



<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_nat1000.png"), auto;}
</style> <br>




<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_oth561.png"), auto;}
</style> <br>



<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_cur1016.gif"), auto;}
</style> <br>



<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_hol268.gif"), auto;}
</style> <br>



<style type="text/css">
HTML,BODY{cursor: url("http://i1210.photobucket.com/albums/cc417/kusanagiblog/th_spe114.gif"), auto;}
</style> <br>

  kalau yang di bawah ini langsung aja ke HTML/JavaScript

 

  <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Black Glitter Pointer Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/blackglitter.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/blackglitter.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Blue Multi Glitter Pointer Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/bluemultiglit.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/bluemultiglit.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free BlackGray Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/blackgray1.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/blackgray1.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Colorful Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/colorful1.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/colorful1.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Diamond Blue Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/diamondblue.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/diamondblue.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Star 6 Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/star6.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/star6.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Star 3 Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/star3.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/star3.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Star 7 Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/star7.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/star7.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Star ani Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/starani2.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/starani2.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Star Purple Green Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/starpurplegreen3.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/starpurplegreen3.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Star Blue Green Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/starbluegreen21.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/starbluegreen21.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Star Blue Brown Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/starbluebrown1.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/starbluebrown1.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Star Red Blue Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/starredblue1.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/starredblue1.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Star Green Brown Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/stargreenbrown1.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/stargreenbrown1.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Sun Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/sun.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/sun.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Stripe Wave Rainbow Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/1pointer39.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/1pointer39.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free White Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/white1.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/white1.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Wood Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/wood.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/wood.gif"), auto;}</style>

 <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Yellow Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/yellow1.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/yellow1.gif"), auto;}</style>

  <div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Yellow Glitter Pointer Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/yellowglitter.ani"), 

url("http://downloads.totallyfreecursors.com/thumbnails/yellowglitter.gif"), auto;}</style>

Gold

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth561.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/02/16/ruby-9.html" target="_blank" title="Ruby"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Ruby" style="position:absolute; top: 0px; right: 0px;" /></a>

Superman

<style type="text/css">body, a:hover {cursor: url(http://safir85.ucoz.com/24work-blogspot/mouse-cursor/SUPERMAN_LOGO_POINTER-www.24work.blogspot.com-.cur), progress;}</style><a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>

Blue Cool

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Angry Birds

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-14/gam1324.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/10/14/angry-birds-15.html" target="_blank" title="Angry Birds"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Angry Birds" style="position:absolute; top: 0px; right: 0px;" /></a>

Pensil

<style type="text/css">body, a:hover {cursor: url(http://safir85.ucoz.com/24work-blogspot/mouse-cursor/WORLD_OF_WARCRAFT_14-www.24work.blogspot.com-.cur), progress;}</style><a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a>

Read more: http://riefsaz.blogspot.com/2012/12/kumpulan-kursor-keren-untuk-blog.html#ixzz2N6vO2aN8

Cara Membuat Anti Copy Paste

      Blog selain sebagai sumber artikel dan informasi blog juga dapat digunakan sebagai tempat penyimpanan data-data pribadi seperti Foto, video dan data-data kuliah atau sekolah.

Namun yang dikhawatirakan adalah banyak orang yang salah menggunakan data-data tersebuat. Dikhawatirkan data yang kita miliki malah menjadi fitnak oleh orang tertentu. Membuat blog menjadi anti Copy Paste merupakan salah satu cara menjaga keamanan/privasi blog kita. Selain blog, kita juga bisa bisa memproteksi elemen-elemen atau widget-widget blog kita dari orang-orang jahil,

Baiklah, sobat kita langsung aja menuju tutorial.

Login ke akun Blogger sobat.

1. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
2. Cari kode </head> (gunakan Ctrl+F).
3. Copy paste script berikut tepat di bawah kode nomor 3 tadi

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>

4. Save template dan lihatlah hasilnya.

Catatan Penting: 

Gunakan script ini jika konten blog sobat memang mengandung hak cipta atau bersifat pribadi yang tidak ingin di copy paste

Cara Membuat Link Download

Baiklah, sobat pada kesempatan kali ini saya akan sharing kepada Anda cara membuat Link Download. Dalam dunia blog selain artikel ada juga yang di sebut link, link sebagaimana kita ketahui adalah tautan yang menghubungkan antara halaman satu dengan halaman lain, satu situs dengan situs lain termasuk link download, yang tentuhnya mengarah ke situs File Sharing di bawah ini adalah contoh link download.

1.      Link Download Biasa

<a href=" http://www.mediafire.com/?3ztb7z31r6e5g7b " target="_blank"><b>DOWNLOAD</b></a>
Hasilnya :

DOWNLOAD

2. Link Download Dengan  menggunakan gambar Gambar

<a href=" http://www.mediafire.com/?3ztb7z31r6e5g7b" target="_blank"><img alt="Download Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEvC9rxhXP70E4G65_XHeH3md5jszNMIm5qPZCN_bia2t-X3UjlvUMW4QJLh0R-DmwHU7-lR06s_1oyE3No-z_lY9aGk_-xn-XL_6CcpNlXcksPTHBLDc_Rf7o0757t0nhfTCqRigK04x/s320/download.gif.png" /></a>

Hasilnya:

Pada kesempatan kali ini saya akan Sharing link download dengan mengunakan MediaFire.

Yaitu dalah salah satu Media Upload File dan Sharing File.

·        Yang pertama yang harus sobat lakukan dalah ketik di mesin pencarian dengan kata Mediafire, maka kemudian akan meuncul di mesin pencarian seperti gambar di bawah ini sobat.

Cara membuat tulisan berjalan di blog atau scrolling text

Baiklah, sobat kali ini kita akan sharing tentang bagaimana cara membuat Scrolling text blog.Tulisan berjalan atau lebih tepatnya lagi Scrolling text adalah salah satu Widget yang jangan orang pasang di blog, namun kali ini saya akan sedikit berbagi ilmu kepada sobat tentang bagaiman cara membuat Scrolling text di blog.

Selain sebagai pengumuman, ataupun ucapan Welome yang biasa sering orang tulis di Scrolling text widget.Scrolling text juga dapat bermanfaat untuk menarik minat pengunjung untuk terus mengunjungi blog sobat karena biasanya pengunjung lebih tertatik dengan tampilan blog kita dan apa lagi disertai dengan artikel dan konten menarik di blog kita. Oke, kita langsung aja menuju tutorial.

Berikut adalah tutorial untuk cara membuat scrolling text di blog. .

1. kode dasar untuk tulisan bergerak dari kiri ke kanan

  <marquee>TULISAN YANG SOBAT INGINKAN</marquee>

2. Mengubah arah pergerakan tulisan 

Penambahan kode berikut diperlukan kedalam kode dasar.

direction="left"
direction="right"
direction="up"
direction="down"

Berikut contoh kode untuk pegerakan dari kanan ke kiri

<marquee direction="right" >TULISAN YANG SOBAT INGINKAN </marquee>

3.Mengubah warna background pada tulisan yang bergerak

Untuk mengubah background, perlu diletakkan kode berikut

bgcolor="#KODE WARNA YANG SOBAT INGINKAN"
Contoh: kode yang diletakkan background

<marquee direction="right" bgcolor="#99CCFF">TULISAN ANDA</marquee>

4. Membuat tulisan bergerak bolak balik
Penambahan kode berikut.

behavior="alternate"

contoh kode yang diletakkan trick ini.

<marquee behavior="alternate" bgcolor="#99CCFF">TULISAN YANG SOBAT INGINKAN </marquee>

Catatan:  #99CCFF Kode ini adalah kode warna pada scrolling text sobat adapun kalau sobat ingin mengganti warna sobat bisa browsing di google dengan mengetik kata code warna dan kemudaian kalau sudah ketemu sobat langsung bisa mengcopy pastekan ke scrolling text sobat.

direction="left"    Arah menuju sebelah kiri
direction="right"  Arah menuju sebelah kanan
direction="up"      Arah menuju ke atas
direction="down"  Arah menuju ke bawah

Cara menambahkan Widget Fan like di blog

      Menambahkan Facebook sebagai Widget di blog kita adalah salah satu nilai Plus yang di miliki oleh blog kita, karena selain blog kita secara langsung dapat berhubungan dengan Visitor yaitu dengan Jejaring sosial tadi. Blog kita juga dapa dengan mudah diingat oleh Visitor, karena kemungkina Visitor tidak hanya sekali mengunjungi blog kita dan apa lagi dengan selalu UP TO DATE postingan dengan mudah Visitor mencari informasi di blog kita.

Baiklah , sobat kali ini saya akan sharing kepada anda semuanya bagaimana cara membuat atau menambahkan Widget Fan atau Like di blog.

Sebelunya saya mohon maaf sobat kalau sobat mengetik ulang code sebanyak ini maka itu akan sangat memberatkan sobat.

Tetapi dengan Zaman yang Modern ini sobat jangan khawatir sobat dapat mengunjungi blog saya yang sudah tersedia di sana code seperti ini dan kemudaian tinggal sobat Copy Paste saja.

www.tutorialkamu.blogspot.com

Berikut adalah beberapa panduanya:

Sebelumnya saya mohon maaf saya tidak bia menjelaskaan begitu detail namun saya akan berbagi kepada sobat tentang tahapan-tahapanya saja.

1.      Tetunya, sobat sudah memiliki latar belakang atau judul dari blog sobat misalkan tema music, hiburan, dll. Maka, dari judul blog sobat atau judul lain yang nantinya di jadikan FAN bagi jutaan Visitor.

2.      Maaf sebelumnya sobat harus mengunjugi Page Fb di http://www.facebook.com/pages/create  atau cara yang lebih mudah sobat bisa cari di penaturan kemudian klik tambah halaman.

3.      Kalau sudah ketemu halaman seperti di bawah ini maka sobat hanya perlu membuat  halaman yang sesuai dengan tema blog sobat saja.

Catatan : isi dengan lengkap data-data yang sesuai dengan blog sobat.

1.      Kemudian buka halam baru  http://developers.facebook.com/docs/plugins/ maka akan muncul halam seperti di bawah ini. Dan silakan pilih dengan tampilan yang sobat inginkan.

 

Setelah sobat pilih dan sobat kilik maka akan muncul halaman seperti di bawah ini.

Isi dengan data-data yang sesuai sobat inginkan ukuran tinggi dan lebar.

Perhatikan tanda panah merah URL yang di maksud adalah URL dari Fan Fb sobat seperti berikut ini. Kemudian Copy dan Pastekan di kolom yang terdapat tanda panah merah di bawah.

Nah, sobat maka akan muncul tampilan seperti ini. Dan kemudian blok dan Copy code HTML yang berada di bawah.

Dan kemudian sobat Pastekad di code bawah ini, tapi satu hal yang harus diketahui bersama, dalam meletakan code HTML kita harus berhati-hati jangan sampai salah letak, karena kalau kita salah letak maka hasinya akan berbeda dengan apa yang kita inginkan.

 

<style type="text/css">
#topbar{
position:absolute;
padding-left:1px;
background-color: transparancy;
width: 238px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 10 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopright=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopright()", 10);
}
ftlObj = ml("topbar");
stayTopright();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)

window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivMax4_hAd2Wy2MnQ4hEstBWb6EVO9JFDS8tJISSRUcm9bTQZ5_Jres-0K33tPMjpKyT7wWPu8oGoQvy-ljP8zVWmH6Cw3bafCQgmIu6F41-_PyjBKR0vmzQ9_lBCPiX6fdCjw1OdhMtuM/s1600/closanku.png" /></a></div>
<center>
<div style="background: #fff;">

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FPundiOnline&amp;width=238&amp;height=360&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:238px; height:360px;" allowtransparency="true"></iframe>
</div>
</center>
</div>

Keterangan: Ganti kode sript iframe warna biru  diatas dengan kode iframe fans page group sobat.
 Simpan perubahan dan lihat hasilnya. Cukup menarik buakn? Selamat mencoba.