Membuat FB Like Box Melayang Slide Close

Membuat FB Like Box Melayang Slide Close

Pagi ini saya akan mencoba sharing sebuah widget facebook like box yang melayang dengan tombol close dengan efek slide ketika di tekan. Saya mencoba menggabungkan kode-kode script yang saya dapat dari bloger-bloger lain selama belajar blogging yang saya tekuni selama ini dan hasilnya menurut saya lumayan untuk diterapkan di blog. Bagi para master, tolong kasih masukan tentang widget ini kalau ada kesalahan. Widget ini lumayan simpel karena tidak perlu mengobok-obok HTML template blog Anda.

Bagi yang ingin mencoba menggunakannya di blog, silahkan ikuti caranya di bawah ini.

1. Seperti biasa silahkan login ke blog Anda.

2. Dashboard >> Layout >> add a gadget >> pilih HTML/JavaScript,kemudian copy kode di bawah ini.

<div style="display:scroll;position:fixed;top:50px;left:400px;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://kompiajaib.googlecode.com/files/slidefbnew.js" type="text/javascript">
</script>
<style>
#kompiajaib_slidefb2012{
font-family: "Consolas", "Courier New", Courier, mono, serif;
border: 1px solid;
width: 355px;
margin: 10px 0px;
padding:5px 0px 0px 5px;
background-repeat: no-repeat;
position:relative;
color: #00529B;
background-color: #000000;
}
</style>
<div id="kompiajaib_slidefb2012">
<a class="close"  href="#close" style='position:absolute;right:0px;top:0px;margin-right:-1px;margin-top:-1px;'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg80liGncvtyIQ10whltHY6V1pvidKcEq4gRqpQtbtQmxA6-4S342sX470_9887b1ApszUGvBxsFLq04vQEPrVTRAE93Igykcn4BB0iRLTyUwpJqJK1EnJHKgSuTN8BO8aEmcLZHa0ujSzW/s1600/popover-close-button.gif" /></a>
<div style='width:99%;padding:8px 0px;background-color:#737373;font-family:arial;text-align:center;'><div style='color:#FFF;font-size:13px;font-weight:bold;'>Like us and get updates</div></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Kompi-Ajaib/395526477133955&amp;width=350&amp;height=255&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%23FFFFFF&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:255px;" allowtransparency="false"></iframe><div style="border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;">Powered by <a href="http://kompiajaib.blogspot.com/" target="_blank">blogger widget</a></div>
</div></div>

Warna background widgetnya hitam atau dark.

#000000 adalah background widget, silahkan sesuaikan dengan template Anda. Untuk mengetahui kode warna silahkan masuk  

http://www.facebook.com/pages/Kompi-Ajaib/395526477133955 silahkan ganti dengan URL facebook Anda.

Jika background widgetnya terang, silahkan ganti dark dengan light. 

Demikin sharing Membuat FB Like Box Melayang Slide Close kali ini mudah-mudahan bermanfaat.

Broken link laporkan di sini

Read more: http://kompiajaib.blogspot.com/2012/05/membuat-fb-like-box-melayang-slide.html#ixzz1vM7P7urU

Read More

Cara Mudah Membuat Tab Menu Bar di Blogspot

Bagi yang menggunakan template bawaan dari Blogspot ini akan lebih mudah. Anda tidak perlu membuat elemen halaman baru di bawah header karena sudah tersedia yang bisa anda gunakan untuk memasang tab menu bar. Anda hanya tinggal memasukkan script nya saja.

Berikut script untuk cara mudah membuat tab menu bar di blogspot:
1. Masuk ke akun Blogger anda
2. Rancangan
3. Tambah Gadget
4. Javascript

1	<ul id='menubar'>

2	<li><a href='link/URL homepage blog disini'>Home</a></li>

3	<li><a href='link 1'>judul link 1</a></li>

4	<li><a href='link 2'>judul link 2</a></li>

5	<li><a href='link 3'>judul link 3</a></li>

6	<li><a href='link 4'>judul link 4</a></li>

7	<li><a href='link 5'>judul link 5</a></li>

8	<li><a href='link 6'>judul link 6</a></li>

9

</ul>

Linknya bisa anda isi dengan link apa saja sesuai keinginan anda dan kalau masih kurang tinggal ditambah saja.
5. Save

Read More

5 Blog Blogging Terbaik Indonesia

Selama sebulan ini, saya melakukan riset online tentang blog terbaik di Indonesia yang membahas topik blogging (tips konten, tips trafik, tips monetisasi, dan informasi make money blogging). Dari beberapa blog yang ditelaah, saya akhirnya memilih 5 blog terbaik.

Kriteria penilaiannya berdasarkan page rank, traffic rank Alexa, jumlah pelanggan, dan authority rank Technorati dengan total skor 40. Silakan Anda simak dan kunjungi kelima blog terbaik ini.

No	Nama Blog	PR	Alexa	RSS	Tcrati	Skor
1	Blognya Kang Rohman	3	9	10	1	23
2	O-om	3	8	10	1	22
3	Blogger Indonesia	5	7	4	2	18
4	Isnaini dot com	4	7	2	1	14
5	Blogguebo	3	4	3	1	11

Sistem penilaiannya sebagai berikut:

Skor	PR	Alexa	Pelanggan	Authority
1	1	100rb-90rb	0-500	0-75
2	2	90rb-80rb	500-1000	75-150
3	3	80rb-70rb	1000-1500	150-225
4	4	70rb-60rb	1500-2000	225-300
5	5	60rb-50rb	2000-2500	300-375
6	6	50rb-40rb	2500-3000	375-450
7	7	40rb-30rb	3000-3500	450-525
8	8	30rb-20rb	3500-4000	525-600
9	9	20rb-10rb	4000-4500	600-675
10	10	<10rb	>4500	> 675

Sekadar catatan, authority rank Technorati menggunakan authority baru yang dikeluarkan oleh Technorati mulai 14 Oktober lalu.

Update: Ingin tahu blog terbaik lainnya? Silakan simak 5 Blogger Wanita Paling Ngetop di Dunia dan 8 Blog yang Menghasilkan Uang Milyaran Per Tahun.

Read More

Cara Membuat Readmore Otomatis di Blogspot

Sebenarnya banyak blogger yang mempostingkan Tips ini, saya menulis ini juga supaya saya tidak lupa

Langsung saja

1. Masuk Blogger pilih Template

2. Centang Expand Template Widget

3. Cari kode </head> Supaya cepat klik Ctrl F dan tuliskan </head>
4. Masukkan kode dibawah ini tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

5. cari kode <data:post.body/> dan Ganti 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'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan :

 

READ MORE : bisa diganti sesuai selera 

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar, bisa diganti sesuai selera
summary_img = 340; adalah tinggi potongan artikel dengan gambar, bisa diganti sesuai selera
img_thumb_height = 100; adalah ukuran tinggi thumbnail, bisa diganti sesuai selera
img_thumb_width = 120; adalah ukuran lebar thumbnail, bisa diganti sesuai selera

Save Template dan lihat hasilnya

Selamat mencoba

 

Read More

SkyDrive, Cara Mudah Menyimpan Data Online dan Sharing File

Untuk  anda pengguna MSN, Hotmail, tentunya sudah tidak asing lagi dengan SkyDrive ini. Yaitu salah satu  penyedia layanan solusi online untuk penyimpanan data atau lebih dikenal saat ini dengan Cloud Storage. 

SkyDrive saat ini memberikan space penyimpanan sebesar 25GB secara gratis, kapasitas yang lumayan besar dengan tampilan seperti Windows Explorer sehingga  lebih mudah  penggunaannya, cukup dengan drag & drop untuk proses uploading suatu file.

Untuk berbagi dengan orang lain kita bisa mensharing file kita,  dengan memberikan linknya.

Untuk melengkapi postingan atau artikel blog kita, bisa kita simpan di SkyDrive ini, lebihnya yaitu tidak ada iklan atau popup yang mengganggu sebagaimana umumnya layanan servis hosting gratis.

Di SkyDrive ini juga dilengkapi Ms.Office web Application, memungkinkan kita untuk create atau edit dokumen word, exel, atau Power Point secara online.

Kalau anda tertarik silakan create account Windows Live ID  di www.skydrive.com www.live.com ,  www.hotmail.com bisa masuk lewat mana saja karena semuanya sudah terintegrasi. Dengan 1 Account Windows Live ID anda sudah mendapatkan   Satu alamat e-mail @hotmail.com atau @live.com, Messenger, SkyDrive, dan Layanan dari Microsoft lainnnya.

Contoh langkah untuk sharing sebuah file di SkyDrive

• Beri ceklist / centang pada file atau folder yang akan disharing

• Klik pada Menu Sharing di sebelah kanan

• Pilih Get a link

Semoga bermanfaat  

Read More

Panji Sang Penakluk Tewas Dicabik Komodo

Berita tentang tewasnya Panji Sang Penakluk masih belum jelas kebenarannya. Berita ini juga saya dengar dari teman saya. Saya pun penasaran dan mencarinya di internet, pas saya ketik "Panji Sang Penakluk Tewas", busyett ternyata berita ini sudah cukup heboh di internet. Wah.. kalo berita ini benar, kasihan juga yaa Panji. Ya udah para ABC (Andatahuuu.blogspot.com) inilah berita tentang kematian Panji, cekitdot...



Kegagalan Panji sang penakluk untuk melawan kebuasan kadal raksasa itu harus ditebus dengan nyawanya. Pada saat pengambilan gambar aksinya “menaklukan” kadal raksasa itu tanpa di duga, sang komodo yang tampak gusar karena merasa terganggu, mengamuk dan menyerang panji secara membabi buta.

Aksi panji dengan gaya-gaya nya yang terbilang nekad dan rusuh itu, saat ia berusaha menaklukan komodo berukuran 2,5 meter dengan cara menarik narik ekor komodo tersebut secara kasar, sang komodo kelihatan enggan melayani aksinya dan mencoba lari ke semak semak.

Melihat sang komodo itu tampak enggan melayani aksinya dan mencoba lari ke semak membuat  panji makin kasar dan brutal dengan cara memaksa menarik ekornya, hingga pada satu titik hewan peninggalan prasejarah itu benar-benar tidak bisa menahan amarahnya, akhirnya sang penakluk ini di kejarnya hingga beberapa puluh meter, panji pun yang sama sekali tidak menduga respon komodo tsb lari kalang kabut, pontang panting.

Pada saat lari menghindar dari amarah binatang tersebut Panji sempat melemparkan tasnya ke arah komodo, dengan maksud mengalihkan perhatian binatang itu, tapi ternyata komodo sudah tidak mampu menahan amarahnya yang ia tahu hanya ingin mengejar panji (bukantas), hanya dengan satu terkaman khasnya yang kuat seperti ketika mencabik sapi yang sering dimangsa, rontoklah tangan kanan panji di sambar kadal raksasa itu,

Detik selanjutnya makin parah karena sang komodo benar2 melampiaskan kemarahan dan laparnya, setelah di cabik cabik, tampak isi perut panji di lalap habis… oh Tuhan malang benar nasib pemuda ini.

Kameraman yang mengambil gambar tak bisa berbuat apa apa, tapi ia tak ada pilihan lain kecuali terus mengarahkan kamera pada adegan mengerikan itu, jeritan panji yang memilukan minta tolong pun sontak hilang saat kuku tajam komodo tsb menggasak lehernya, crottt… srettt srett.. darah mengalir deras, Ya… hidup memang kejam, kalau kita tidak mampu menempatkan diri pada tempat yang seharusnya.

Nah, gimana tuh menurut kalian, benarkah berita tersebut?

Dari berita ini, kita bisa mengambil suatu pelajaran bahwa biarlah hewan hidup dengan tenang, hidup dengan cara mereka dialam sana. seandainya kita menganggunya maka akibatnya begitu fatal. kita ambil contoh saja, seandainya kita diganggu pasti kita akan merasa kesal dan bahkan ingin memukul orang yang menggangu kita. Begitu pun hewan, hewan juga dapat merasakan itu, apalagi hewan yg digangu adalah hewan buas. wahh.. wassalam deh klo gitu.

Kurang Puas? Baca aja di Anda Tahu?: Panji Sang Penakluk Tewas Dicabik Komodo http://andatahuuu.blogspot.com/2012/02/panji-sang-penakluk-tewas-dicabik.html#ixzz1uiAcZ9mf
Anda Tahu?

Read More

Cara Membuat Daftar Isi/Recent Post Secara Otomatis di WordPress

Mungkin bagi anda yang sudah lama berkecimpung di bunia perblogan sudah tidak asing lagi saat mendengar postingan saya yang satu ini, mungkin ini terbilang cukup mudah bagi para blogger lama tetapi bagaimana dengan para blogger newbie lainnya? Seiring banyaknya para blogger baru tak kala mereka sering bingung ingin memulai blog mereka dari mana, tapi saran saya sebaiknya awali segala sesuatu dengan langkah-langkah sederhana terlebih dahulu, nah kalo yang sederhana sudah bisa barulah coba yang lebih dari yang sebelumnya. Oke saya ga bakal ngoceh lama-lama koq, kali ini saya mau mencoba untuk share sedikit pengetahuan saya seputar tutorial WordPress. Judulnya adalah “Cara Membuat Daftar Isi/Recent Post Secara Otomatis di WordPress“. Fitur ini merupakan fitur sederhana yang terbilang lebih dinamis ketimbang kita menggunakan widgets yang sudah di sediakan oleh WordpRess karena dengan fitur yang satu ini kita bisa mengatur waktu Recent Posting kita serta jumlah yang kita inginkan. Dan berikut ini langkah-langkah sederhananya :

- Coba anda buka halaman/tulisan/widget teks baru (pilih sesuai opsi yang anda inginkan)

- Dalam penulisan Code ini format teks harus dalam HTML (Wajib)

- Berikut ini code HTML untuk Recent Post Biasa (Tanpa ada jumlah yang kita inginkan).

[/archives]

- Untuk code HTML di bawah ini kita bisa mengatur berapa jumlah Recent Post yang kita inginkan (Sebagai contoh saya mencoba 20 tulisan terakhir yang saya buat).

[/archives limit=20]

- Untuk code HTML di bawah ini adalah Recent Post sesuai perbulannya :

[/archives monthly=10] bila anda ingin menampilkan beberapa Recent Post saja silahkan diubah menjadi seperti ini [/archives monthly=10 limit=20] jumlah 20 yang terdapat pada limit bisa anda ubah sesuai yang anda inginkan.

- Untuk code HTML di bawah ini adalah Recent Post sesuai perminggunya :

[/archives weekly=10] bila anda ingin menampilkan beberapa Recent Post saja silahkan diubah menjadi seperti ini [/archives weekly=10 limit=20] jumlah 20 yang terdapat pada limit bisa anda ubah sesuai yang anda inginkan.

Keterangan : Untuk tanda / silahkan di hapus agar code tersebut bisa berjalan dengan benar.!

Gimana setelah ngeliat carnya? Caranya cukup mudahkan?

Silahkan di coba dan semoga bermanfaat.

Kalau ada yang bingung atau masih belum mengerti silahkan bertanya di form komentar yang tersedia.

Terima kasih.

——————————————————————————————————————————————————————-

Berikut ini contoh penggunaan code [/archives limit=5]

• Perintah-Perintah Pada Command Prompt


• 5 Penyebab Mengapa Wanita Takut Putus Cinta


• Mitos dan Fakta Seputar Penyakit Stroke


• Cara Membuat Fitur Hubungi Saya (Contact Person) di WordPress


• Cara Membuat Daftar Isi/Recent Post Secara Otomatis di WordPress

Sumber > http://clickyudhaqirana.wordpress.co

Lihat Juga  :

[archives kategori limit=10]

Read More