Favicon

Hallo syang sekalian !!
Wah.. sekarang nisa mau berbagi tutorial Facivon nihh !!
Udah tau blum apa  "Favicon" itu ??
ahaaa...
yang ituh tuhh .. pake tanda panah merah !!!

Favicon ituh ikon kecil yang muncul di pojok kiri address bar dan pojok kiri tab. Secara default  favicon blog berbasis blogger/blogspot adalah simbol B dengan background jingga.
Tentunya sobat ingin punya favicon sendiri untuk branding blog anda kan? Bagaimana cara membuat favicon yang gampang, lalu menampilkannya di blog?

Ini dia caranya :


1. Sobat harus punya gambar untuk favicon . Bagi sobat yang mempunyai software grafis , bisa membuat logo dengan Adobe Photoshop , Coreldraw, atau software apapun yang sobat kuasai.
Lalu ekspor ke gif, png atau jpg. Jika sobat tidak menguasai software grafis, bisa menggunakan icon gratis dengan googling atau bahkan foto yang ada di harddisk sobat.

2. Lalu upload file tersebut ke website FavIcon from Pics dengan menekan Browse. Contreng pilihan "Animate Favicon" jika anda menginginkan favicon animasi. Lalu klik "Generate Favicon.ico".

 3.Selanjutnya download favicon yang dihasilkan dengan mengklik tombol "Download Favicon".

 Extract file zip yang dihasilkan. Lalu upload favicon.ico dan animated_favicon1.gif (favicon animasi) ke file hosting gratis seperti Google Pages, Photobucket.

4.Sekarang, login ke Blogger. Pilih Template -> Edit HTML.

•  Copy kode di bawah ini:
  

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="animated_favicon1.gif" type="image/gif" />

•  Lalu paste persis di bawah baris kode berikut:
  

<b:include data="blog" name="all-head-content"/>

5.Sekarang sobat ubah alamat URL favicon dengan URL tempat sobat menyimpan file favicon di file hosting. Lihat gambar di atas. Perhatikan, bagian yang dihighlight adalah contoh URL yang telah diubah. Ubah juga alamat URL favicon animasi (animated_favicon1.gif) jika sobat memang menginginkannya. Periksa lagi apakah alamat URL sudah benar.

6.Simpan Template. Lihat hasilnya. Jika favicon belum muncul, refresh browser. okeh okehh

Selamat mencoba!

»»  read more...

Cara Membuat Menu dan Sub Menu pada Blog

Kali ini nisa berbagi info bagus dan fakta bagus tentang cara membuat menu dan sub menu bar di blog. Menu dan sub menu sangat penting pada blog , karna dengan itu pengunjung dengan mudah mencari hal yang bersangkutan dengan menu nya , juga untuk mempercantik tampilan blog sobat semua.


Ok,, setelah berbasa-basi ,,Let's check it out ...


Ini dia langkah-langkah nya :
1. Login ke www.blogger.com sobat
2.Pilih menu rancangan , pilih template kemudian pilih edit HTML
cari kode berikut :

<div class='main-outer'> atau
<div id='main-wrapper'> atau <div id='main'>

agar lebih mudah , klik saja F3 pada keyboard, lau pilih salah satu scrip di atas.
misalnya :

div class='main -outer'>.

3.Setelah dapat , copas scrip di bawah ini tepat diatas scrip yang di cari tadi :

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>

Penjelasan :

• Ganti tanda '#' ( warna biru ) dengan url/link postingan yang sobat inginkan
• Ganti tulisan yang warna biru  dengan menu atau sub menu yang sobat inginkan.
• Setiap menu atau sub menu bisa di tambah atau di kurangi sesuai dengan yang di inginkan

4.Kemudian klik Pratinjau untuk memastikan scrip sudah benar atau belum .
5.Lalu simpanlah

>>Semoga bermamfaat<<

»»  read more...

Cara Memasukkan Link ke Menu atau Sub Menu

Hai hai sobat blogger. Gimana kabar nya ?? Semoga baik-baik saja, dan masih dalam lindungan tuhan , Aminn..

Pada postingan kali ini saya mau berbagi ilmu nih tentang " Cara Memasukkan Link ke Menu atau Sub Menu". Perhatikan !! ini untuk yang sudah ada menu atau sub menu nya..

 Gini dia cara nya :

1. Login dulu ke www.blogger.com
2. Pilih rancangan kemudian pilih template kemudian edit HTML
3.Cari menu yang terdapat di blogger anda , misalnya di template anda "HOME" , disana ada tanda "#" itu artinya belum ada link maupun postingan di dalam menunya.

untuk lebih jelasnya , seperti ini dia contohnya :
<li><a href='#'>Home</a></li>

nah buka blog anda , lalu pilih postingan yang ingin di masukin ke menu HOME nya , kemudian copy link nya dan hapus tanda "#" kemudian paste kan link tersebut .

Rumusan: <li><a href='Masukkan linknya'>Profil(bisa diganti)</a></li>

4. Simpan template dan lihat hasilnya :)

>>Selamat Mencoba Sobat<<

»»  read more...