Hai semua!!!
Kali ini aku posting cara meletakan kode HTML lain di atas kode </head>, </body>, dan semacamnya..
Nah misalkan kalian ingin membuat Menubar di blog, kalian bingung karena harus meletakkan Kode HTML yang panjangnya minta ampun.. Hehe..
Nah begini caranya....
Misalkan kode di bawah harus di letakan di atas kode </head>
<style type='text/css'>
#tabs28 { float:left; width:100%; background:#fff; font-size:93%; line-height:normal; border-bottom:1px solid #DD740B; }
#tabs28 ul { margin:0; padding:10px 10px 0 50px; list-style:none; }
#tabs28 li { display:inline; margin:0; padding:0; }
#tabs28 a { float:left; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixGfAYtnB8DlWZHz4L9vwK-ipUkfN6i1NRXhojEqn9FOlUCDMz6XLM5IxvOlxo-9wYAy6KYDV9p3JQEsIUANZchrKRyjRI5mXQvEwGZ4IansaTvYu904d2LMQjq8uE-KrohemLFbaOEG6L/s1600/slide-left.gif") no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; }
#tabs28 a span { float:left; display:block; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu2UQ9JeVjVd7N7vqqsfPwRWkfqayKZnW5SVsGX2xHsaeAJx4mdmT_ApfddIp-D1J2h0XxYFR5ontOS8nA_nUXzgDJ0RjkXJS9vZ7ujnPVejmu0C7iM0s6ZnihP7pnd_23On_PUA5jsBkB/s1600/side-right.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }
#tabs28 a span {float:none;} #tabsI a:hover span { color:#FFF; } #tabs28 a:hover { background-position:0% -42px; }
#tabs28 a:hover span { background-position:100% -42px; }</style>
Cukup Panjang kan kodenya? :D
- Nah sekarang kita buka Dashboard, lalu Template
- Cari kode </head> Menggunakan tombol Ctrl + F
- Jika sudah ketemu, tekan tombol "Enter" di Kode yang di lingkari
- Nanti akan muncul Paragraf kosong seperti ini
- Pastekan Kode Tadi di sana, hasilnya seperti ini
- Klik simpan.
Jika di suruh meletakkan Kode lainnya misalnya:
<div id="tabs28"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> <li><a href="#"><span>Link 8</span></a></li> </ul> </div>
Tinggal tambahkan saja ^^
Caranya:
- Ke "Tata Letak"
- Tambahkan Gadged, dan......
- Pilih HTML/Javasript
Isi kode di bawah di Kolom "Konten"
<div id="tabs28"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> <li><a href="#"><span>Link 8</span></a></li> </ul> </div>
<div id="tabs28">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
<li><a href="#"><span>Link 8</span></a></li>
</ul>
</div>
- See more at:
http://ev-tutorial.blogspot.com/2014/04/cara-membuat-menubar-di-blog-dengan-dan.html#sthash.XgUAkIVY.dpuf
<div id="tabs28">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
<li><a href="#"><span>Link 8</span></a></li>
</ul>
</div>
- See more at:
http://ev-tutorial.blogspot.com/2014/04/cara-membuat-menubar-di-blog-dengan-dan.html#sthash.XgUAkIVY.dpuf
<div id="tabs28">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
<li><a href="#"><span>Link 8</span></a></li>
</ul>
</div>
- See more at:
http://ev-tutorial.blogspot.com/2014/04/cara-membuat-menubar-di-blog-dengan-dan.html#sthash.XgUAkIVY.dpuf
NB: Tanda "#" di ganti dengan link yang di tuju
Contoh:
<div id="tabs28"> <ul> <li><a href="http://ev-tutorial.blogspot.com"><span>Home</span></a></li> <li><a href="https://facebook.com/evaedgina.pamela"><span>Facebook
Klik simpan dan "Lihat Blog"
Gimana?? Berhasilkan? :D
NB2: Kalau membuat Menubar, dan di suruh untuk melengkapi Kodenya dengan cara Menambahkan Gadged, Tambahkan yang di bawah Hearder (Lihat gambar di bawah)
Lalu, jika di suruh meletakan kodenya di bawah, lakukan cara yang sama, tapi tekan "Enternya" Di samping kode tersebut misal: </body> tepat di sebelah tanda ">" tekan enter lalu nanti keluar "Alinea" / "Paragraf" Baru, dan pastekan Kode yang ingin di letakan di Paragraf tersebut.
Contoh:
Sekian, Terimakasih ^_^
Semoga bermanfaat ya!! :3
0 komentar:
Posting Komentar