DUNIA REMAJA: BERITA

Sabtu, 14 April 2012

Cara Membuat SubMenu di Blogger

di 04.09 Label:TUTORIAL BERITA, BLOG, UNIK

- Klik Tata Letak

-Klik Edit HTML

-Cari kode: ]]></b:skin>

-Tambahkan kode berikut ini di atas kode ]]></b:skin>

/* ----- NAVBAR MENU ----- */

#NavbarMenu {

width: 875px;

height: 35px;

background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;

color: #ffffff

margin: 0 auto 0;

padding: 0;

font: bold 11px Arial, Tahoma, Verdana;

border-top: 1px solid #ffffff;

border-bottom: 1px solid #ffffff;

}

#NavbarMenuleft {

width: 680px;

float: left;

margin: 0;

padding: 0;

}

#nav {

margin: 0;

padding: 0;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav li {

list-style: none;

margin: 0;

padding: 0;

}

#nav li a, #nav li a:link, #nav li a:visited {

color: #ffffff;

display: block;

text-transform: capitalize;

margin: 0;

padding: 9px 15px 8px;

font: normal 15px Georgia, Times New Roman;

}

#nav li a:hover, #nav li a:active {

background:#FF6600;

color: #ffffff;

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;

width: 150px;

color: #ffffff;

text-transform: lowercase;

float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #ffffff;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

font: normal 14px Georgia, Times New Roman;

}

#nav li li a:hover, #nav li li a:active {

background: #FF6600;

color: #ffffff;

padding: 7px 10px;

}

#nav li {

float: left;

padding: 0;

}

#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0;

padding: 0;

}

#nav li ul a {

width: 140px;

}

#nav li ul ul {

margin: -32px 0 0 171px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

position: static;

}

cari kode ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>

</b:section>

</div>

Tambahkan kode berikut ini di bawah kode no. 6

<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>

<ul>

<li><a href='#'>SubMenu-1-1</a></li>

<li><a href='# '> SubMenu-1-2</a></li>

</ul>

</li>

<ul>

<li><a href='#'>SubMenu-2-1</a></li>

<li><a href='#'> SubMenu-2-2</a></li>

</ul>

</li>

<ul>

<li><a href='#'>SubMenu-3-1</a></li>

<li><a href='# '> SubMenu-3-2</a></li>

<li><a href='#'> SubMenu-3-3</a></li>

</ul>

</li>

</ul>

</div>

</div>

Simpan

Cara Membuat Menu di Blogspot dengan List-O-Matic

di 04.04 Label:TUTORIAL BERITA, BLOG, UNIK

Membuat postingan dengan Judul/Title: Depan, Tentang, dan Portofolio, dengan demikian kita akan mempunya 3 halaman dengan url http://nama.blogspot.com/depan.html, http://nama.blogspot.com/tentang.html dan http://nama.blogspot.com/portofolio.html. Selanjutnya ikuti langkah-langkah pembuatan menu secara otomatis menggunakan List-O-Matic. Setelah semua langkah di lakukan, kamu akan di beri 2 jenis kode yaitu HTML dan CSS.
Here is the HTML for this list:

<div id="navcontainer">

<ul id="navlist">

<li><a href="http://nama.blogspot.com/depan.html">Depan</a></li>

<li><a href="http://nama.blogspot.com/tentang.html">Tentang</a></li>

<li><a href="http://nama.blogspot.com/portofolio.html">Portofolio</a></li>

</ul>

</div>

Copy kode HTML dan masukkan lewat Add a Page Element – HTML/JavaScript dan letakkan dimana kamu pengen menunya muncul.
Here is the CSS for this list:

#navlist ul

{

margin-left: 0;

padding-left: 0;

white-space: nowrap;

}

#navlist li

{

display: inline;

list-style-type: none;

}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited

{

color: #fff;

background-color: #036;

text-decoration: none;

}

#navlist a:hover

{

color: #fff;

background-color: #369;

text-decoration: none;

}

Sedangkan untuk kode CSS harus di copy dan di letakkan dalam kode template. Di halaman template blog kamu, pilih Edit HTML, letakkan kode CSS dari List-O-Matic tadi sebelum kode ]]></b:skin> dan save template.

IP Tracker Pada Blog

di 03.58 Label:TUTORIAL BERITA, BLOG, UNIK

Sesuai namanya, IP tracker atau pelacak alamat IP, tool ini berfungsi untuk melacak alamat IP (Internet Protocol) pengunjung blog anda. Pelacak alamat IP ini juga bisa melacak browser serta operating system yang dipakai oleh pengunjung.

Alamat IP adalah alamat komputer anda dalam jaringan LAN (Local Area Network) maupun WAN (Wide Area Network). Yang dimaksud dengan LAN adalah jaringan komputer yang mencakup wilayah kecil, seperti di kampus, rumah. Sedangkan WAN adalah jaringan komputer yang mencakup area yang lebih besar, seperti jaringan komputer antar wilayah, kota, atau bahkan negara.
Salah satu penyedia tool pelacak IP adalah www.ipnow.org, gratis Tampilannya di blog seperti gambar di bawah ini:
1. Kunjungi situs www.ipnow.org.

Pada halaman muka, lihat pada bagian Custom Images. Terdapat beberapa pilihan bentuk tampilan yang bisa disesuaikan dengan blog anda. Lalu akan tampil halaman untuk mengatur warna latar belakang (background color) dan warna font (text color). Setelah itu klik pada tombol Create My Image.

Setelah anda mendapatkan kodenya, selanjutnya anda tinggal menempelkannya di blog anda. Caranya adalah sebagai berikut:
@. Masuk dan login ke www.blogger.com.
@. Masuklah pada halaman Dasbor.
@. Klik menu Tata Letak.
@. Klik menu Tambah Gadget.
@. Klik pada link menu HTML/JavaScript.
@. Pada bagian Judul, ketikkan judul menu yang dibuat. Misal : IP Anda.
@. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda dapatkan di atas dan tempel (Ctrl+V) di sini.
@. Klik tombol Simpan jika sudah selesai.
@. Lihat blog anda untuk melihat hasilnya.

MEMASANG KOTAK PENCARIAN

di 03.50 Label:TUTORIAL BERITA, BLOG, UNIK

Adanya kotak pencarian pada blog, akan mempermudah pengunjung menemukan artikel yang dibutuhkan. Berikut ini langkah-langkah untuk memasang kotak pencarian:

Masuk ke halaman dashboard, pilih layout (tata letak)

Lalu klik Add Gadget (Tambah Gadget)

Lalu pilih HTML/JavaScript.

Pada kotak Content (Konten) masukkan kode berikut: <form action="http://NamaBlogAnda.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti NamaBlogAnda dalam kode di atas dengan nama blog anda. Angka 30 setelah kode size dapat anda ubah sesuai panjang kotak yang diinginkan. Semakin besar angka semakin panjang kotak.