Archive for 2013

TEGAR

Selasa, 28 Mei 2013
Posted by joko ipa3
BAGI TEMEN2 ATAU BAPAK2 YANG MAU DONLOAD LIRIK LAGU DAN KUNCI GITARNYA TEGAR.... SILAHKAN DOWNLOAD DISINI
Posted by joko ipa3

PIJKHNK

Posted by joko ipa3


membuat menu blog

Posted by joko ipa3
Tag :
Bagi sobat yang tertarik untuk membuat menu horisontal di blog,silahkan ikuti tutorial berikut.


1. Log in dulu ke akun blog sobat.
2. Klik Rancangan --> edit html
3. Cari kode ]]></b:skin> ( Gunakan Ctrl + F untuk memudahkan percarian)
4. Letakkan kode berikut di atasnya.


#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwJSXWgzpZ1PK26XFM7igfQFY9k_zXpNbSeFI6Ch_PL-GPxxYHsu9stF47mIXSe9bxb0kycfRE79d7A7sGyPqfh6kPU1DvNkdB_IkPsaquhZmYm2380yeAeVygMsBhiF8CBaOM7c-IR00f/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#tejas{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwJSXWgzpZ1PK26XFM7igfQFY9k_zXpNbSeFI6Ch_PL-GPxxYHsu9stF47mIXSe9bxb0kycfRE79d7A7sGyPqfh6kPU1DvNkdB_IkPsaquhZmYm2380yeAeVygMsBhiF8CBaOM7c-IR00f/) repeat-x;
height:33px;
}

#tejas ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li a, #tejas li a:link, #tejas li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#tejas li a:hover, #tejas li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgixHJ3bYh1x6e5NZfowWMuyqpbQ8Rh_z5D0nMQI_eMJY112vpxh_om4cWWs1wmZGIxR5aLwFglJ90EdCCMZNHmMoF3xdiqgG-P87JbFulPiYb6lJKGecjsxUfDn74GXnBG8H8m31n66DsK/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#tejas li li a, #tejas li li a:link, #tejas li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}

#tejas li li a:hover, #tejas li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgixHJ3bYh1x6e5NZfowWMuyqpbQ8Rh_z5D0nMQI_eMJY112vpxh_om4cWWs1wmZGIxR5aLwFglJ90EdCCMZNHmMoF3xdiqgG-P87JbFulPiYb6lJKGecjsxUfDn74GXnBG8H8m31n66DsK/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#tejas li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#tejas li li {
}

#tejas li ul a {
width: 140px;
}

#tejas li ul a:hover, #tejas li ul a:active {
}

#tejas li ul ul {
margin: -34px 0 0 170px;
}

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

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

#tejas li:hover, #tejas li.sfhover {
position: static;
}

tambahan :
  • Modifikasi kode di atas terutama ukuran lebar dan tinggi yang harus di sesuaikan dengan ukuran template blog sobat.
  • Hampir semua bagian dari kode di atas bisa di edit,  tapi kalo menurut saya sih tampilannya sudah pas tinggal tinggi dan lebarnya saja... terserah sobat..

5. Letakkan kode berikut di bawah kode <div id='content-wrapper'> ( cari dengan Ctrl+F )

<div id='tejahtc'>
<div id='tejas'>

<ul>
<li><a href='http://christiantatelu.blogspot.com/'>Home</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href=Link sobat di sini!' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-8</a></li>
</ul>

</div>
</div>


<div class='clear'/>

  • Ganti tulisan yang berwarna biru dengan link dari kategori atau bisa juga dengan link posting.
contoh link kategori atau label, modelnya seperti ini.
http://christiantatelu.blogspot.com/search/label/BLOG

sedangkan link posting seperti ini .
http://christiantatelu.blogspot.com/2012/01/membuat-link-terbuka-di-tab-baru.html
  • Ganti tulisan berwarna ungu dengan url blog sobat.
  • Ganti link name dengan judul kategori atau judul posting atau apapun yang penting menarik untuk di klik. untuk link title samakan saja dengan link name.

6. Save template..

Semoga cara membuat menu horisontal di atas bisa membantu sobat blogger. 
Welcome to My Blog

SLIDE

BUKU TAMU

Popular Post

Pengunjung

Artikel

NavBar

Visitor

Slide Background

Diberdayakan oleh Blogger.

Search This Blog

background

Function

- Copyright © joko saja -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -