Informasi umum

Tampilkan postingan dengan label membuat. Tampilkan semua postingan

Jumat, 06 Desember 2013

Cara Membuat Blogroll Model Scrollbar

Membuat Link Blogroll Model Scroll atau Dropdown Scrollbar, membuat scrollbar blogroll.

Blogroll adalah daftar link blog eksternal yang dipasang dalam suatu blog. Link-link blog eksternal yang dipasang biasanya adalah daftar atau list anggota tukar link yang sama-sama salingmemasang link di masing-masing blognya atau juga bisa dikatakan sebagai daftar link sahabat danlink-link pavourite.

Blogroll ada yang dipasang sebagai widget di sidebar, bottombar, dan di halaman posting tertentumisalnya di halaman tukar link. Blogroll yang dipasang pada halaman tertentu atau halaman tukar link biasanya dilakukan apabila jumlah link yang terpasang sudah terlalu banyak dengan alasan

agar tidak mengganggu atau memberatkan loading halaman hompage bersangkutan.

Pada panduan dan tutorial gratis kali ini akan membahas cara membuat blogroll atau cara pasangblogroll dengan model scrollbar yang bisa dipasang pada sidebar atau bottombar homepage blogyang juga bisa dipasang pada halaman posting atau terserah pengguna.

Jika Anda ingin membuat blogroll model scrollbar silakan ikuti panduan berikut:

1. Copy kode berikut ini:

<ul>

<li><a href="http://diarykudiblog.blogspot.com">Panduan Dan Tutorial Gratis</a></li>

<li><a href="Edit">Judul Blog Anda</a></li>

</ul>

</div>

Jika Anda ingin link blogroll Anda terbuka di tab baru ketika di klik (open in new tab or in newwindow), silakan copy-paste kode yang ini saja:

<ul>

<li><a href="http://diarykudiblog.blogspot.com" target="new">Panduan Dan Tutorial Gratis</a></li>

<li><a href="Edit" target="new">Judul Link Anda</a></li>

</ul>

</div>

2. Login ke blogger.com-->klik design
3. Pilih gadget di sidebar yang masih kosong dengan cara klik Add a Gadget, kemudian pilih HTML/Javascript
4. Letakan kode yang tadi Anda copy diatas pada kotak kosong yang tersedia, beri judul/title: BlogRoll atau Link Sahabat
5. Ganti tulisan Edit dengan alamat url/link yang ingin Anda pasang. Save dan lihat hasilnya.

Jika dipasang pada halaman posting, letakkan saja kode diatas pada halaman posting tukar link blog Anda, jika belum ada halaman tukar link silakan membuat entri baru atau posting baru terlebih dahulu dan letakkan kodenya di entri baru tersebut.

Rabu, 20 November 2013

Cara Membuat Menu Navigation Vertikal

clip_image003 Jika pada postingan sebelumnya saya telah membahas bagaimana cara membuat menu navigation Horizontal maka pada postingan kali saya akan membahas bagaimana cara membuat menu navigation vertikal.

Jika sobat berminat untuk memasangnya di blog sobat ikuti langkah-langkah di bawah ini.

1. Login ke blogger atau klik disini
2. Pilih template >> Edit Html >> Lanjutkan
3. Jangan lupa centang Expand widget template
4. Copy script di bawah ini dan letakkan di atas code ]]></b:skin>

/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}

Catatan:

Perhatikan tulisan yan berwarna merah atur sesuai dengan fungsinya

5. Kemudian simpan.

6. Kemudian kembali ke dashboard dan pilih tata letak >> tambah gadget >> Html/JavaScript
7.Copy paste script di bawah ini.

<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://junedalbughisy.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://bankloe.blogspot.com">» Bisnis Online</a></li>
<li><a href="http://by-template.blogspot.com">» Free Template</a></li>
<li><a href="http://zonahandphone.blogspot.com">» Handphone</a></li>
<li><a href="http://praktis-triktips.blogspot.com">» Komputer</a></li>
</ul>

Catatan:

Tulisan yang berwarna orange dapat sobat ganti dengan Link Url yang sobat inginkan.

8. Dan yang terakhir simpan.

Selamat mencoba, Happy blogging Smile