untuk tahap pertama adalah Login ke blog masuk ke Edit HTML cari code ]]></b:skin>
letakkan CSS berikut tepat diatasnya
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455.navi1 {
display:block;
height:72px;
margin:0 auto;
position:relative;
width:525px; }
.navi1 ul {
float:none;
list-style-image:none;
list-style-type:none;
margin:3px 0; }
.navi1 ul li {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA91U5KSceLKSJjDirYtJE6kqiA6323_Q0UwU5jGJdPko_8hH2yNLqGwk2wi6sFhn-jb2eLYx6mWuOto3m3KBsW0NecVv06iveMLMAGts-5A591MIWfJgaoPUZ1CXFRYqNsYR2b9KaYh2E/s1600/tab-3.png);
background-repeat:no-repeat;
float:left;
height:72px;
margin:0px;
padding-top:5px;
position:absolute; }
.navi1 ul li a {
display:block;
height:100%;
width:100%; }
.navi1 ul li.sm1 {
background-position:0 0;
left:0px;
width:125px; }
.navi1 ul li.sm2 {
background-position:-125px 0;
left:100px;
width:124px; }
.navi1 ul li.sm3 {
background-position:-249px 0;
left:200px;
width:124px; }
.navi1 ul li.sm4 {
background-position:-373px 0;
left:300px;
width:125px; }
.navi1 ul li.sm5 {
background-position:-498px 0;
left:400px;
width:126px; }
.navi1 ul li:hover {
z-index:1000; }
.navi1 ul li.sm1:hover {
background-position:0 -75px; }
.navi1 ul li.sm2:hover {
background-position:-125px -75px; }
.navi1 ul li.sm3:hover {
background-position:-249px -75px; }
.navi1 ul li.sm4:hover {
background-position:-373px -75px; }
.navi1 ul li.sm5:hover {
background-position:-498px -75px; }
dan langkah selanjutnya masukan Tag Divnya
di tag <body> atau di Gatget
123456789<div class="navi1">
<ul>
<li class="sm1"><a href="http://www.blogger.com/blogger.g?blogID=8475986184574925736#"></a></li>
<li class="sm2"><a href="http://www.blogger.com/blogger.g?blogID=8475986184574925736#"></a></li>
<li class="sm3"><a href="http://www.blogger.com/blogger.g?blogID=8475986184574925736#"></a></li>
<li class="sm4"><a href="http://www.blogger.com/blogger.g?blogID=8475986184574925736#"></a></li>
<li class="sm5"><a href="http://www.blogger.com/blogger.g?blogID=8475986184574925736#"></a></li>
</ul>
</div>
dan Simpan
semoga bermanfaat
Sample CSS Sprite Image DOWNLOAD DISINI
BUKU TAMU DISINI
About Budi Setiawan
kalau tutorial css sprite untuk menyatukan gambar ada gak bg?
ReplyDeletehttp://www.tugaselesai.com
Click emoticon copy-paste code
To insert emoticon you must added at least one space before the code.