Memberi & Membuat Efek Animasi|Warna|Background Menu Blog

Memberi & Membuat Efek Animasi|Warna|Background Menu Blog

Salam Super. Kali ini npgprogram akan memposting tentang cara memberi atau membuat efek animasi pada blog blog. Mungkin bagi para blogger yang sundah handal mungkin sangat mudah tetapi untuk para newbe pasti mengalami kesulitan. Kesulitan ini disebabkan kita harus merubah kode HTML pada blog sehingga blog dapat berubah tampilan. Langsung saja kecaranya dibawah ini.

• Masuk ke akun blogger sobat
• Klik Template
• Klik Edit Html
• Klik expand widget templates
• Tekan ctrl+F cari kode ]]></b:skin>
• Copy kode dibawah ini tepat diatas kode ]]></b:skin>

Code CSS

ul#css3menu1,ul#css3menu1 ul{

margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

ul#css3menu1 ul{

display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}

ul#css3menu1 li:hover>*{

display:block;}

ul#css3menu1 li{

position:relative;display:block;white-space:nowrap;font-size:0;float:left;}

ul#css3menu1 li:hover{

z-index:1;}

ul#css3menu1 ul ul{

position:absolute;left:100%;top:0;}

ul#css3menu1{

font-size:0;width:100%;z-index:999;position:relative;display:inline-block;zoom:1;padding:0 0%;margin:0 0%;

*display:inline;*padding-right:1.03%;}

* html ul#css3menu1 li a{

display:inline-block;}

ul#css3menu1>li{

margin:0;width:33%;}

ul#css3menu1 li.toplast{

width:34%;}

body:first-of-type ul#css3menu1{

display:inline-table;border-spacing:0px 0;}

body:first-of-type ul#css3menu1>li{

display:table-cell;float:none;}

ul#css3menu1 a:active, ul#css3menu1 a:focus{

outline-style:none;}

ul#css3menu1 a{

display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px "Lucida Console",Monaco,monospace;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#55aa00;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}

ul#css3menu1 ul li{

float:none;margin:10px 0 0;}

ul#css3menu1 ul a{

text-align:left;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 11px "Trebuchet MS",Helvetica,sans-serif;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}

ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{

background-color:#0000ff;border-color:#C0C0C0;border-style:solid;color:#ffffff;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}

ul#css3menu1 img{

border:none;vertical-align:middle;margin-right:10px;}

ul#css3menu1 span{

display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}

ul#css3menu1 ul span{

background-image:url("arrowsub.png");padding-right:8px;}

ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{

background-color:#55ff00;background-image:none;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 0;}

ul#css3menu1 li.topfirst>a{

border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}

ul#css3menu1 li.topmenu>a{

-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}

ul#css3menu1 li.toplast>a{

border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}

ul#css3menu1>li:nth-child(1){width:42%}ul#css3menu1>li:nth-child(3){width:25%}

@-moz-document url-prefix(){body:first-of-type ul#css3menu1{display:inline-block} body:first-of-type ul#css3menu1>li{display:block;float:left !important;}}

@media only screen and (max-width:291px),only screen and (max-device-width:291px){

ul#css3menu1>li:nth-child(1){width:56%}ul#css3menu1>li:nth-child(2){width:44%}ul#css3menu1>li:nth-child(3){width:100%}body:first-of-type ul#css3menu1{display:inline-block} body:first-of-type ul#css3menu1>li{display:block;float:left !important;}}

@media only screen and (max-width:219px),only screen and (max-device-width:219px){

ul#css3menu1>li:nth-child(1){width:100%}ul#css3menu1>li:nth-child(2){width:100%}ul#css3menu1>li:nth-child(3){width:100%}}

• Tekan ctrl+F cari kode </header>
• Copy kode dibawah ini tepat dibawah kode </header>

Code HTML

<!-- Start npgprogram.blogspot.com BODY section -->

<ul id="css3menu1" class="topmenu">

<li class="topfirst"><a href="#" style="height:62px;line-height:62px;"><span><img src="1_files/css3menu1/smile1.png" alt=""/>TIPS N TRIK</span></a>

<ul>

<li><a href="http://npgprogram.blogspot.com/search/label/Tutorial"><img src="1_files/css3menu1/blue_circle - light.png" alt=""/>Tutorial</a></li>

<li><a href="http://npgprogram.blogspot.com/search/label/Tutorial%20Blog"><img src="1_files/css3menu1/blue_circle - light1.png" alt=""/>Tutorial Blog</a></li>

</ul></li>

<li class="topmenu"><a href="#" style="height:62px;line-height:62px;"><span><img src="1_files/css3menu1/btour.png" alt=""/>KATEGORI</span></a>

<ul>

<li><a href="#"><span><img src="1_files/css3menu1/256base-open.png" alt=""/>Download</span></a>

<ul>

<li><a href="http://npgprogram.blogspot.com/search/label/Software"><img src="1_files/css3menu1/bregister1.png" alt=""/>Software</a></li>

<li><a href="http://npgprogram.blogspot.com/search/label/Anti%20Virus"><img src="1_files/css3menu1/bregister2.png" alt=""/>Anti Virus</a></li>

<li><a href="http://npgprogram.blogspot.com/search/label/Hacking%20Tools"><img src="1_files/css3menu1/bregister3.png" alt=""/>Hacking Tools</a></li>

</ul></li>

<li><a href="http://npgprogram.blogspot.com/search/label/Information"><img src="1_files/css3menu1/green-menu-32.png" alt=""/>Information</a></li>

<li><a href="http://npgprogram.blogspot.com/search/label/Kumpulan%20Program"><img src="1_files/css3menu1/bservice.png" alt=""/>Kumpulan Program</a></li>

<li><a href="http://npgprogram.blogspot.com/search/label/RPP"><img src="1_files/css3menu1/bnews.png" alt=""/>RPP</a></li>

</ul></li>

<li class="toplast"><a href="http://npgprogram.blogspot.com/" style="height:62px;line-height:62px;"><img src="1_files/css3menu1/icon181.png" alt=""/>Iklan</a></li>

</ul>

<!-- End npgprogram.blogspot.com BODY section -->

• Ganti kode yang warna biru sesuai alamat icot sobat 1_files/css3menu1/icon181.png
• Ganti kode yang warna merah sesuai alamt url sobat http://npgprogram.blogspot.com/
• Catatan Perlu di perhatikan jika  code HTML diatas tidak bisa di gunakan maka sobat harus encoder HTML baru bisa di gunakan. Encoder & Decoder HTML

Semoga artikel ini dapat bermanfaat bagi semua orang dan jangan lupa untuk mengisi buku tamu yang ada di pojok kanan atas serta jangan lupa untuk berkomentar demi kemajuan blog ini. Silakan copas artikel ini tetapi jangan lupa menyertakan alamat judul posting ini sebagai berikut :http://npgprogram.blogspot.com/2013/01/memberi-membuat-efek.html. Untuk Sumber Artikel. Dan juga sobat semua harus hati-hati karena blog ini sudah terlindungi DCMA jadi kalu mau COPAS harus menyertakan alamat sumbernya.

Selamat menikmati.

ttd

npgprogram.blogspot.com