Tips Trik Blog: Cara Mudah Membuat Kotak Komentar Facebook Di Blog

Dengan memasang Kotak komentar Facebook di blog adalah satu cara untuk menarik dan juga menambahkan percakapan di blog sobat, saat ini Facebook telah meluncurkan banyak sekali social plugins untuk Blogger dan Web developer, dan tentunya salah satunya adalah Kotak Komentar Facebook ini.
Jika sobat ingin mencoba bagaimana cara mengaplikasikan kotak komentar facebook ini di blog sobat, silahkan baca terus artikel ini.

Yang pertama harus dilakukan adalah sobat harus mendaftar di Facebook developer page.
 berikut adalah tampilannya:

kemudian sobat masukan nama, dan site URL sobat, lalu klik buat aplikasi.
setelah itu sobat akan mendapatkan yang dinamankan APP ID

Selanjutnya, sobat login kedalam akun blogger sobat, lalu masuk ke menu rancangan - pilih edit HTML dan ceklis Expand Templates Widgets,
sobat cari (CTRL + F) <data:post.body/> atau <div class=’post-header-line-1′/>
intinya sobat cari <data:post.body/> yang urutan kedua (Jika ada dua).
Lalu copy dan pastekan kode berikut tepat dibawah <data:post.body/> atau <div class=’post-header-line-1′/>

Klik disini[kode HTML] :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <p align='left'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpZddWSfFTqqiewA1EuMk-XZZXdFwKg_s5yPs3loKT8KWGpslsO9g_Rg7lX_YU6UIC2Cl9P1U2WP3vYZgUuuCSwB7qO8394lh_2ar6a9EcyAp1E_LDZJ2ENmfFw0dJ71_lFmek1tX2CWN/s1600/cmds.png'/></p> <div id='fb-root'/> <script> window.fbAsyncInit = function() { FB.init({appId: &#39;APPID&#39;, status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement(&#39;script&#39;); e.async = true; e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;; e.async = true; document.getElementById(&#39;fb-root&#39;).appendChild(e); }()); </script> <fb:comments/> </b:if>

Ubah APP ID dari kode diatas tadi dengan APP ID yang sobat dapatkan.
Setelah itu save template sobat.

yang terakhir adalah pengaturan menghilangkan/menyembunyikan kotak komentar BLOG sobat.
caranya:
pergi ke menu setting - Pilih Comment - lalu pada tulisan comment (komentar) pilih yang Hide untuk menyembunyikan, setelah itu simpan..
sekarang lihat blog sobat..

Read More

Tips Trik Blog: Membuat Menu Bar Horizontal pada Template Blog

Selamat Datang di Tips Trik Blogs, Blog yang isinya Tips Trik Blog | Free Blogger Widgets | Informasi Menarik Di Bidang Teknologi dan IT.
Tips Trik Blog kali ini akan membahas mengenai bagaimana cara Membuat Menu Bar Horizontal pada Template Blog.
Menu bar merupakan sebuah Menu horizontal yang terletak dibawah Header Blog dimana berisi mengenai Link-link yang saling berhubungan.
Jika sobat belum mengerti apa itu Menu Bar, sobat bisa lihat gambar dibawah ini.

Cara membuatnya:
pertama Login ke akun Blogger sobat
pada Menu Rancangan - Pilih Edit HTML
jangan lupa untuk mencentang Expand Widget Templates
Cari Kode Berikut: ]]></b:skin>
Setelah ketemu, masukkan kode berikut di atas kode  ]]></b:skin>

Klik Disini [klik buat liat kodenya] :

#NavbarMenu{background:#005094;border-top: 1px solid #3373a9;border-bottom: 1px solid #3373a9;width:968px;height:32px;color:#FFF;font:bold 8px Arial, Tahoma, Verdana;clear:both;margin:0 auto;padding:0}
#NavbarMenuleft{width:758px;float:left;margin:0;padding:0}#search{width:210px;font-size:11px;float:right;margin:0;padding:0}
#nav li{list-style:none;float:left;background:#005094;border-left:1px solid #3373a9;border-right:1px solid #003867;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{color:#fff;display:block;text-transform:capitalize;font:normal 12px Georgia, Times New Roman;margin:0;padding:10px 9px 6px}
#nav li a:hover,#nav li a:active{background:#1a4c76;color:#red;text-decoration:none;margin:0;}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:#005094;width:200px;color:#fff;text-transform:capitalize;float:none;border-bottom:1px solid #3373a9;border-top:1px solid #003867;font:normal 11px Georgia, Times New Roman;margin:0;padding:7px 10px}
#nav li li a:hover,#nav li li a:active{background:#1a4c76;color:#fff;padding:7px 10px}
#nav li a.enclose,#nav li a.enclose:visited{border-bottom: 1px solid #000;}#nav li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0}
#nav li ul a{width:140px}
#nav li ul ul{margin:-75px 0 0 171px}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul{left:-999em}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul{left:auto}
#nav li:hover,#nav li.sfhover{position:static}#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#searchbox{background:#ddd;margin:0;padding:0}#search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}#search .btn{width:auto;border:0;margin:7px 0 0;padding:0}
#subnavbar{background:#004313;width:962px;height:24px;color:#FFF;margin:0;padding:0}
#subnav li a,#subnav li a:link,#subnav li a:visited{color:#f9fc01;display:block;font-size:11px;text-transform:capitalize;margin:0 5px 0 0;padding:3px 13px}
#subnav li a:hover,#subnav li a:active{color:#DCD900;display:block;text-decoration:none;margin:0 5px 0 0;padding:3px 13px}
#nav ul,#subnav ul,#subnav li{float:left;list-style:none;margin:0;padding:0}*,#nav,#subnav{margin:0;padding:0}

Nah, lanjut lagi gan clo dah selesai..

sekarang cari kode:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:section class='headerright' id='headerright' preferred='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

clo bingung alias gak ketemu, sobat cari tag HTML bagian <div id='header-wrapper'> atau <div id='header
nah terus cari sampai ketemu tag HTML

</b:section>
</div>

Terus Masukkan kode berikut ini dibawah kode tadi.

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Home</a></li>
<li><a href='#'>News</a>
 <ul>
  <li><a href='#'>edit</a></li>
  <li><a href='#'>edit</a></li>
  <li><a href='#'>edit</a></li>
 </ul></li>
<li><a href='#' title='edit'>Belajar Pemrograman</a>
 <ul>
  <li><a href='#'>edit</a></li>
  <li><a href='#'>edit</a></li>
 </ul></li>
<li><a href='#' title='edit'>Tips N Trik</a></li>
<li><a href='#'>Download Center</a></li>
</ul></div>
</div>

Ganti kata-katanya sesuka hati sobat.
clo udah tinggal sobat Save.
dan lihat hasilnya sekarang..
clo masi bingung bisa koment dibawah ini.
Salam Blogger. .

Read More

Tips Trik Blog: Cara Buat Spoiler Ala Kaskus Di BLog

Jika agan-agan tau Kaskus, pastinya agan sering dong lihat bentuk kotak berikut?

Click Here [BB++] :

[Hayoo.. Mau Liat Apa?]

Yup, bentuk diatas namanya Spoiler.
Apa sih gunanya Spoiler itu sendiri?
Spoiler biasa dipakai atau digunakan untuk menyembunyikan suatu tulisan yang sangat panjang ataupun gambar.

Terus bagaimana cara membuat spoiler ini di BLOG?
cara membuat Spoiler Ala Kaskus Di BLog adalah sebagai berikut.

masuk ke akun Blogger agan-agan semua.
pilih Menu Postingan untuk membuat Postingan baru.
nah pilih edit Html, trus masukin kode html berikut:

Judul Spoiler [Judul yang miring] :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler <em>[Judul yang miring]</em></b> : <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;">[ISI SPOILER]</div></div></div>

Gampang kan?
selamat bereksperimen..
jangan lupa kasi cendolnya yah gan..

Read More

Tips Trik Blog: Membuat Kotak Chat atau Chat Box

Selamat Datang di Tips Trik Blogs, Blog yang isinya Tips Trik Blog | Free Blogger Widgets | Informasi Menarik Di Bidang Teknologi dan IT.
Tips Trik Blog kali ini akan membahas mengenai bagaimana cara untuk membuat kotak chat atau yang biasa dikenal dengan nama Chat Box, karena masih banyak yang tidak mengetahui bagaimana cara untuk membuatnya dan memasangnya di site ataupun Blog sobat.

Kotak Chat atau Chat Box merupakan salah satu dari widgets di Blog yang wajib ada, karena selain untuk menuliskan jejak bagi visitor atau pengunjung yang datang ke blog kita juga sebagai sarana untuk berchatingan selain memberikan komentar.

lanjut ke bawah,
bagaimana membuat Membuat Kotak Chat menggunakan Cbox.

1. untuk membuat kotak chat menggunakan aplikasi Cbox maka sobat perlu mendaftar dilink dibawah ini..

http://www.cbox.ws/

2. Setelah dikirim, bukalah akun email yang sobat daftarkan Cboxnya, lihat apakah ada kode verifikasinya? jika ada kliklah untuk melanjutkan membuat kotak chatnya.

3. setelah itu sobat akan mendapatkan sebuah kode HTML chat box yang harus sobat taruh di blog sobat,

4. taruh kode HTML kotak chat sobat ditempat yang kira-kira cukup strategis di blog sobat..
so, kotak blog sobat sudah selesai dibuat..

Sekian Tips Trik Blog saya kali ini, terima kasih sudah menyimak, dan jangan lupa untuk memberikan komentar yang positif demi kemajuan blog ini.
Jika ingin melihat lebih banyak Tips Trik Blog lebih banyak lagi, bisa kunjungi Tips Trik Blogs, disana juga terdapat Free Blogger Widgets alias widgets blog gratis yang bisa anda terapkan untuk mempercantik tampilan Blog anda.

Read More

Cara Hilangin Tanda Bajakan Plus Register Anti Virus Smadav Pake Nama Sendiri (KeyGenerator)

Berikut ini adalah artikel singkat bagaimana cara untuk menghilangkan tanda bajakan pada Anti Virus Smadav dan cara untuk meregisternya dengan nama sobat sendiri .

Jika sobat memiliki anti virus Smadav yang berwarna Hitam, berarti itu tandanya anti virus Smadav sobat sudah di Black List oleh Smadav. akibat dari Black List ini adalah anti virus smadav sobat itu tidak dapat bekerja maksimal untuk menghalau virus-virus yang menyerang komputer sobat.
Terus Bagaimana cara menjadikannya Normal Kembali tanpa harus mendownload anti virus Smadav yang baru?

sobat buka dulu Smadavnya terus ke menu Setting, di kolom nama isiin "anti-bajakan", di kolom key dikosongin aja, terus klik register.. dan Woilaaa.. anti virus sobat sudah jadi ijo lagi..

clo sobat mw register anti Virus Smadav sobat pake nama sobat sendiri sobat bisa download Key Generator Anti Virus Smadavnya disini..
bisa juga buat smadav versi 8.4. .
clo dah pakai key generator itu, sobat bisa Meregister Smadav pake nama sobat sendiri lho..

Read More

Tips Trik Blog: Cara Mudah Merubah Icon Blogger

Welcome Back in Tips Trik Blog.. Tempatnya Share Tips dan Trik ngeBlog di Blogspot.
Tips Trik Blog kali ini saya akan membahas bagaimana cara untuk merubah icon blogger,
Icon Blogger bisa sobat lihat di samping kiri pada address bar di bagian atas.

langkah-langkahnya adalah:
1. sobat Login dulu ke akun Blogger sobat.
2. Masuk ke menu Rancangan - PIlih Edit HTML (contreng expand templates widgets)
3. lalu cari (Ctrl + F) kata-kata "rel='SHORTCUT ICON'/> ", clo versi aslinya nanti kayak gini.
<link href='link alamat icon blog sobat' rel='SHORTCUT ICON'/>
biasanya sih letaknya sebelum tag html ( </head> )
4. Nah, clo dah ketemu, sobat bisa ganti tuh "link alamat icon blog sobat" dengan alamat ikon yang sobat pilih, Ingat.. hanya link alamatnya.. usahakan ukuran iconnya tidak terlalu besar.

dibawah ini adalah contoh dari icon yang saya pakai..

<link href='http://www.websmileys.com/sm/cool/049.gif' rel='Shortcut Icon' >

 
5. clo sudah, sobat save..


selesai deh.. gampang kan..
buat referensi iconnya bisa sobat cari di google..

selamat mencoba Cara Mudah Merubah Icon Blogger.. 

Read More