Membuat Chat Facebook Di Blog

Hai sobat blogger posting kali ini adalah tentang membuat chat  facebook di blog blog kali ini telah membuat chating sendiri ternyata yang memiliki fasilitas chating tidak hanya facebook dan mesengger tetapi blog juga sudah punya sendiri berikut gambarnya


Cara pasang chat facebook di blog
1. login ke blogger
2. rancangan => elemen halaman
3. pada kolom footer klik tambahkan gadget
4. pilih html/js
5. masukan kode berikut taruh pada kotak yang disediakan
<script type="text/javascript" src="http://www.footerchat.com/chat/cons.js"></script><br /><script type="text/javascript"> autoLogin('Username');</script>
6. Jika sudah save template

Membuat Menu Horizontal Blackred

Hai sobat kali ini adalah posting tentang Membuat Menu Horizontal Blackred bagaimana sobat sudah tau bukan dengan tema hari ini adalah tentang membuat menu horizontal berwarna merah dan hitam ini menurut saya sih sudah keren ini dia screenshotnya

caranya
1. login ke blogger
2. rancangan => edit html
3. cari kode ]]></b:skin> letakkan kod berikut diatas kode tadi

#topbar{;border: 1px solid #222;background-color: #111;background-image: -moz-linear-gradient(#444, #111);background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));width:100%;border-top:1px solid #000;margin:0 auto;padding:0 auto;border-top:5px solid #e30c0c;}
#top-wrapper{width:100%;height:30px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;color:#fff;padding:6px 10px 8px;border-left:1px solid #ccc}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW417E4yXE7ado13M5bf2lJbx2Gf9ypF-D-Z84UMmtIjD4RJ3_WmOTpljQuu9imF7wh4TXSTMhmOjpCpNQrNZFsRKnNxTdSS0AkHemIgacTxv27OhVVrlkBv0h9rj61DJff1La3Va30w4/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:6px 24px 8px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:160px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:4px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#4c4c4c;padding-bottom:0;}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background:#e30c0c;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#e30c0c!important;color:#fff!important;text-decoration:none}
4. cari kode
 <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Greyghost (Header)' type='Header'/>
</b:section>
  </div>
5. kemudian letakkan kode berikut dibawah kode tadi
 <div id='topbar'>
<div id='top-wrapper'>
<ul id='top'>
<li><a href='http://eko-tipsntrick.blogspot.com' style='background:#e30c0c;'>Home</a></li>
<li><a href='http://eko-tipsntrick.blogspot.com/2012/04/daftar-isi.html'>Sitemap</a></li>
<li><a class='arrow' href='#'>Contact Us</a>
<ul>
<li><a href='http://www.blogger.com/profile/17408571515369499460'>Contact on Blogger</a></li>
<li class='hr'/>
<li><a href='http://www.facebook.com/ggkjy'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='http://www.twitter.com/eko_boement25'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='arrow' href='#'>Category</a>
<ul>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/blogging'>NgeBlog</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/cinta'>Love</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/Download'>Download</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/Games'>Games</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/info'>Info</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/pantun'>Pantun</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/tips%20n%20trick'>Tips Trik</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/ilmu%20alam'>Ilmu alam</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/internet%20gratis'>Internet Gr4tiz</a></li>
<li class='hr'/>
<li><a href='http://eko-tipsntrick.blogspot.com/search/label/kata%20mutiara'>Kata mutiara</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='arrow' href='#'>Design</a>
<ul>
<li><a href='#'>Art</a></li>
<li class='hr'/>
<li><a href='#'>Blog</a></li>
<li class='hr'/>
<li><a href='#'>Website</a></li>
</ul>
</li>
<li><a class='arrow' href='#' style='background:#e30c0c;'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
 Ket :
    Yang berwarna merah adalah URL sobat
    Yang berwarna biru adalah judul sobat
6. kemudian simpan template dan lihat hasilnya

Mengganti Emoticon Pada Cbox

Hai sobat kali ini saya akan memberikan tips tentang mengganti emoticon pada cbox cara menggantinya sangatlah mudah. Caranya ada dibawah ini
1. login ke cbox



2. jika sudah pilih options => smilies
3. pada use smilies set kamu ganti dengan custom kemudian apply




4. kemudian kamu ganti url gambarnya kalo menurut saya sih emoticonnya lebih keren di addemoticons.com
5. jika sudah selesai kamu save changes






Sudah selesai sobat kalo tidak percaya silahkan dicek semoga bermanfaat

Pasang Buku Tamu Tersembunyi Di Blogger

Kali ini saya akan menuliskan bagaimana cara pasang buku tamu di blogger, namun pada artikel ini saya akan menuliskan tutorial cara pasang buku tamu Tersembunyi / Hidden.

Buku tamu merupakan salah satu hal yang tidak wajib ada di blog kita, namun buku tamu bisa mempercantik blog kita. Selain itu pengunjung blog kita bisa dengan mudah menyapa kita sebagai admin (atau pengunjung lainnya), walau cuma sebatas kalimat (mampir gan, malam, kunjungi blog saya juga ya, dsb...)

Buku tamu tersembunyi juga baru saya pasang di sidebar blog ini. Setelah niat untuk pasang buku tamu tersembunyi di blog ini akhirnya timbullah niat untuk menuliskan bagaimana cara memasang buku tamu tersembunyi di sidebar blogger.
Ok ga perlu panjang lebar, langsung saja ke topik utama kita.


Pertama-tama silakan buat akun di www.cbox.ws atau di situs penyedia script buku tamu gratis yang teman suka.

Kemudian ambil script yang sudah di sediakan (kopi kodenya).

Sekarang mari kita ke blogger. Jika belum login silakan login dulu. Jika sudah login silakan klik Rancangan/Design/Tata Letak dan Klik Tambah Gadget/Add Gadget.
Pilih html/javascript dan silakan paste kode di bawah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzSHPNY02-gyK8QLG0lehx1aPpOjoNK3wnbARMeyhGHjK7Tc9Ec4XaWI1cDLUz2auA5JUs9A_sychVmDcjbFuEU-ta5rJ2owDyQSTUkRJvs17zV3bB5QBNo9lrUd65gh2CS65DMvtBSKE/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
Silakan Paste Kode Buku Tamu yang sudah di kopi tadi Di Sini

<div style="text-align:right">
<a href="http://eko-tipsntrick.blogspot.com/2012/04/pasang-buku-tamu-tersembunyi-di-blogger.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

 Bagi teman-teman yang faham bahasa css atau html silahkan di atur sendiri tampilannya sesuai selera, jika sudah selesai silakan di Simpan dan Selesai

Template Dragon Ball


jika sobat ingin mendownload klik disini