Menambahkan Facebook ke blog

Facebook sudah umum sekarang ini, banyak sekali kegunaannya terutama fungsi sosialisasi. Para blogger mestinya tidak ketinggalan untuk mempunyai akun di facebook agar mudah terhubung dengan teman, saudara atau bahkan pengunjung blog mereka.

Tidak kalah penting bagi blogger untuk memasang lencana facebook mereka pada blog agar pembaca setia blog bisa berkomunikasi dengan pemilik blog untuk sharing. Baerikut cara-cara untuk memasang facebook badges ke dalam blog:

1. Pertama jangan lupa untuk loggin ke blogger.com dan ke akun facebook anda.
2. Setelah itu pada halaman akun facebook anda, silahkan anda ganti web address yang tadinya hanya http://facebook.com/ dengan http://facebook.com/badges. Akan muncul seperti ini.
3.  
4. Setelah itu pilih menu LENCANA PROFIL. Akan muncul seperti ini.
5. Pada bagian "Pilih tempat menambahkan lencana" pilih Blogger. Apabila anda ingin menambahkan pada wordpress, maka pilih Other.
6. Anda akan dituntun ke halaman blooger (apabila tadi anda telah login ke Blogger.com). Pilih Blog tempat anda ingin menaruh widged, dan ketikkan judulnya. Setelah itu, klik Tambah Widged.
7. Anda akan dituntun ke halaman Rancangan. Setelah itu klik Simpan. Lencana facebook anda telah selesai dibuat. :)

Read More

Cara Membuat Menu Vertikal

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal . Contohnya seperti gambar dibawah ini:



Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna biru muda (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Pilihan Warna menu vertikal :

blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-blog-nyaman.blogspot.com">Trik Blog</a></li>
<li><a href="http://trik-nyaman.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna biru muda adalah linknya dan yg warna kuning adalah teks yang ditampilkan.

Read More