28 May 2014

cara memasang menu Dropdown pada blog

Assalamu alaikum .... salam sejahtera untuk sahabat sahabat blogger semua ,

Dalam dunia blogger tentu banyak trik dan tips atau cara untuk mendesain blog agar supaya tampilan blog bagus dan menarik ,bagi blogger pemula termasuk saya tekadang sedikit bingung untuk memoles tampilan blog dengan berbagai macam pernak pernik warna atau memasang widget serta menu, berkaitan dengan bagaimana cara memasang menu Dropdown pada blog ,

nah kali ini saya akan berbagi trik bagaimana cara memasang menu Dropdown pada blog, cara ini memang sudah banyak beredar di kalangan blogger yang memposting bagaimana cara memasang menu Dropdown pada blog,

tapi tidak apa apalah untuk penyimpanan dokumen di blog, saya akirnya memposting artikel bagaimana cara memasang menu Dropdown pada blog

oky bagi sobat sobat yang ingin tahu cara memasang menu Dropdown pada blog
monggo ikuti beberapa langkah di bawah


pertama:
login ke akun Blogger anda
Masuk ke template anda dan pilih edit HTML.
Silahkan cari kode <header>
jika sobat menginginkan menu di atas header
letakan kode berikut ini tepat di bawah kode <header>


kemudian cari kode </header>
jika sobat menginginkan menu di bawah header
letakan kode berikut ini tepat di bawah </header>


<style>
#menu
{
width: 950px; 
margin: 0;
padding: 2px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 0px;
border-radius: 0px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#
04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='http://syarif-hidayatd.blogspot.com /'>Home</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='nofollow' target='_blank'>Drop menu</a>
<ul>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 2</a>
<ul>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a>
<ul>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='https://www.facebook.com/Asnaji' rel='dofollow' target='_blank'>faebook</a></li>
<li><a href='https://twitter.com/syarif_hyda' rel='dofollow' target='_blank'>twitter</a></li>
</ul>
</li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 3</a>
<ul>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://syarif-hidayatd.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul></li></ul>


catatan :
silahkan ganti kode angka yang berwarna merah sesuai lebar template sobat
atau bisa di ganti dengan tulisan auto

kemudian silah ganti url warna biru dengan url sobat

terakhir : klik simpan
cukup sampai disini penjelasan saya tentang pemasangan menu Dropdown pada blog ketemu lagi dengan artikel berikutnya...





25 May 2014

KUMPULAN KODE HTML




teks warna
<span style="color:#ff0066">Teks disini</span>

kode untuk merubah nama dan ukuran font

<div style="font-family:Oswald ;color:#3E383D ;font-size:20px;">
font Oswald besar warna</div>


hasilnya seperti ini:

font Oswald besar warna

<div style="font-family:Oswald;color:#FF0000;font-size:20px;text-align:center;">
font Oswald besar berwarna di tengah</div>

hasilnya seperti ini:

font Oswald besar berwarna di tengah

catatan:
nama jenis font: Oswald
kode warna font/teks : FF0000
ukuran font/teks :20
posisi font/teks :center

ubah nama kode ukuran dan posisi teks sesukamu
berikut nama-nama font yang sering di gunakan para blogger
Arial
Courier
Georgia
Times New Roman
Trebuchet
Verdana
Oswald
Arimo
italic
Corsiva
untuk pilihan warna lihat
di sini


Membuat paragraf baru: <p>

Membuat baris baru: <br/>

Teks tebal: <b>Teks disini</b>

Teks miring: <i>Teks disini</i>

Membuat baris baru: <br/>

Membuat paragraf baru: <p>

Teks tebal: <b>Teks disini</b>

Teks ketik: <tt>Teks disini</tt>

Teks bercoret: <s>Teks disini<s>

Teks garis bawah: <u>Teks disini</u>

Teks sup atas: <sup>Teks disini</sup>

Teks sub bawah: <sub>Teks disini</sub

Teks rata kiri:


Teks rata kanan:


Teks rata kanan kiri:


Teks berada di tengah:


Teks baris pertama menjorok ke dalam:


Teks menjorok ke dalam semua:


Teks berwarna:


Teks stabilo:


Membuat textarea:








Textarea huruf warna




Textarea dengan bingkai


Textarea dengan bingkai dan huruf berwarna


Textarea dengan background


Textarea dengan background dan bingkai


Textarea dengan background dan bingkai serta huruf berwarna


Textarea dashed


Textarea dotted


Membuat garis





Membuat garis warna




Mengatur ukuran garis




Garis sebelah kiri




Garis sebelah kanan




Membuat garis dengan background




Garis titik-titik



Garis putus-putus


Membuat daftar
Daftar 1
Daftar 2
Daftar 3


Menampilkan Link dengan teks


Menampilkan gambar gambar-1.jpg


Menampilkan URL gambar dengan Teks


Menampilkan link dengan gambar
follow-this-blog.gif


Menampilkan link dengan gambar dan teks



Merubah ukuran gambar kode-html.png


gambar-1.jpgMenampilkan gambar di samping post sebelah kiri
<img src="http://url-gambar" style="float:left;margin:0 3px 3px;">Teks disini

gambar-1.jpgMenampilkan gambar di samping post sebelah kanan
<img src="http://url-gambar" style="float:left;margin:0 3px 3px;">Teks disini

Membuat bingkai pada gambar
gambar-1.jpg
<img style="border:5px solid #0f0;" src="http://url-gambar"/>
untuk mengganti bingkai, "solid" ganti dengan; ridge, groove, double, dashed, dotted, inset, outset

Merubah warna background
<div style="background:#0f0">Teks disini</div>

Membuat background dengan bingkai
Posisi di kanan
<div style="background:#ccc; border:3px solid #000;padding: 3px;margin-right:20px">Teks disini</div>
Posisi di tengah
<div style="background:#ccc; border:3px solid #000;padding: 3px;margin:20px">Teks disini</div>
Posisi di kiri
<div style="background:#ccc; border:3px solid #000;padding:5px;margin-left:20px">Teks disini</div>
.