AndiNonymous: Blog

Hii !!

sekarang gue mau bikin artikel tentang tutorial blog lagi nih :D
ini cara emang bukan cara aku , tapi kodenya aku ubah abis-abisan ..
lanjut aja yok !!

contohnya

CSS

#AndiNonymous{-webkit-transition: all 1s ease-in-out;border: 0 none;top: 150px;height: autopx;width:90px;list-style-type: none;position: fixed;left: -30px;z-index: 10000;padding: 5px;background : #04a1d6;border : 1px solid #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}#AndiNonymous:hover{-webkit-transition: all 1s ease-in-out;background: #04a1d6;border : 1px solid #Fff;top: 150px;left: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

HTML

<div id='AndiNonymous' style='position:fixed;'>
<a href='http://andinonymous.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png'/></a>
<a href='http://andinonymous.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png'/></a>
<a href='http://andinonymous.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png'/></a>
<a href='http://andinonymous.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png'/></a>
<a href='http://andinonymous.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png'/></a>
<a href='http://andinonymous.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png'/></a>
<a href='http://andinonymous.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png'/></a>
<a href='http://andinonymous.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png'/></a>
<a href='http://andinonymous.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png'/></a></div>

Note :

Ubah Link "http://andinonymous.blogspot.com/" dengan Link yang ingin kamu pasang
Ubah Link gambar "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ZCaeDWI6t4Z-uZZ3t6rk9VvzjtYNPnxSanLher8gTnIRckhNyE_WFeKDng8Y3jrk4mIiV7A1SPGyWv4kvp75lCkNqRsxC6t7G9PK9yaOSL33VQRq2l_0RiYnYhp-hcwFez5JthQleJq/s88/Untitled-1+copy.png" dengan Link gambar yang ingin kamu pasang

How to put code

Put CSS on top code ]]></b:skin>
Put HTML on top code </body> or on bottom code <body>

hello gay !! *eh sorry ! maksud gue guys !!

sekarang gue mau ngasih trik jadul sebenernya , namun ada pepatah "old but gold" gak tau pepatah dari siapa yang penting itu lah :v .. Demo bisa diliat sendiri dibawah Footer blog ini ..

Css

#nav {

float:left;

width:100%;

overflow:hidden;

background: -moz-linear-gradient(top, #25272C 0%, black 99%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));}

#nav li{

float:left;

display:inline;

list-style:none;

line-height:13px;

margin-right:1px;

color:#ddd;}

#nav ul:hover, #nav li a {color: transparent;text-shadow: 0px 0px 3px white;}

#nav li a:hover, #nav li a.selected{

color:#fff;}

#nav li a {

float:left;

font-size:16px;

font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;

text-decoration:none;

text-shadow: 0px 0px 1px white;

padding:15px 15px 25px 15px;

-webkit-transition: all 0.5s ease-in-out;}

#nav li a span{

font-size:11px;

letter-spacing:2px;

font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;

text-shadow: 0px 0px 2px white;

-webkit-transition: all 0.6s ease-out;

-moz-transition: all 0.6s ease-out;}

#nav li a:hover span, #nav li a.selected span{

color:#9E1C16;

text-shadow: 0px 0px 2px #9E1C16;}

Html

<div id='nav'>

<ul>

<li><a href='http://#'>TRIK Blog CSS3</a></li>

<li><a href='http://#'>BRUSHER PHOTOSHOP</a></li>

<li><a href='http://#'>ANIME TEMPLATE Blogger</a></li>

<li><a href='http://#'>VIDEO NarutoShippuden</a></li>

<li><a href='http://#'>VIDEO Bleach</a></li>

<li><a href='http://#'>SOUNDTRACK Anime Music</a></li>

<li><a href='http://#'>J-Music Japan Music</a></li>

<li><a href='http://#'>K-Music Korean Music</a></li>

</ul>

</div>

Note :

Simpan Css diatas kode ]]></b:skin >
Simpan HTML diatas kode </body> atau dibawah kode <body> *jangan pernah bilang kalau kode <body> gak ada ! gue gaplok lo !
ganti warna sesukamu
dan jangan lupa ganti tanda # yang ada di kode HTML dengan Link mu

Sekian tutorial nya , semoga bermanfaat . dan terimakasih kepada bang jo !

Source : Blog Johanes

AndiNonymous

Cara buat tempat banner melayang

Simple Navbar on bottom Page with effect blur