Archive for Mei 2012

Cara dan Fungsi Overflow Pada Blog

cara membuat overflow di blog ,Cara dan Fungsi Overflow Pada Blog sangat bagus dan efektif, apalagi kalau daftar link teman misalnya yang panjangnya sampai kebawah, nah dengan menggunakan fungsi overflow maka tampilannya akan terlihat lebih rapi.

Overflow biasa digunakan dalam desain blog supaya widget memiliki ukuran dan tampilan yg lebih rapi.

Syntax yang bisa digunakan untuk overflow adalah:

- visible = standar

- hidden = tidak memiliki fungsi scroll / The overflow is clipped, and the rest of the content will be invisible

- scroll = memiliki fungsi scroll / The overflow is clipped, but a scroll-bar is added to see the rest of the content

- auto = fungsi scroll otomatis

Costum Style Overflow biasanya dibarengi dengan Costum "height"(ukuran tinggi konten).

Script membuat kotak sidebar/widget baru

Scriptnya:<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

sumber:http://www.krtutorplus.com/

Membuat Jam ( Real Time ) Di Bagian Navbar

sulaeman16

Udah Lumayan lama ga Posting disini karna ga adanya bahan postingan, akan tetapi Alhamdulillah kali ini saya dapat ide lagi Postingan berkat teman di blog.

Untuk Postingan kali ini saya akan coba Posting Cara Membuat Jam Di Navbar, memang dulu saya pernah Posting juga tentang jam ini akan tetapi postingan yang sekarang berbeda dengan Cara Memasang Jam Di Blogspot, bedanya adalah yang dulu saya menggunakan system dari http://www.clocklink.com tapi sekarang saya coba pake Kode HTML yang saya dapat dari http://creatingwebsite-maskolis.blogspot.com/ alhasil hasilnya lumayan bagus juga seperti yang terlihat diatas blog ini.

Untuk membuat Jam diatas caranya cukup sederhana, kita hanya menambahkan sedikit Kode HTML, nah kalo Sahabat tertarik silahkan sahabat ikuti caranya di bawah ini :

1. Login Ke Blogger dengan memakai Akun Sahabat
2. Klik Tab Rancangan
3. Klik Tab Edit HTML
4. Ceklist Expand Template Widget
5. Jangan lupa untuk Download Template Lengkap ( jaga jaga apabila ada kesalahan dalam penempatan Kode

Nah sekarang coba sahabat cari Kode seperti dibawah ini dengan menggunakan Ctrl+F.

<ul>

………………………………………………………………………….

</ul>

Simpan Kode HTML untuk jam tepat ditulisan ini

</div>

</ul>

</div>

</div><div style='clear:both;'/>

</div>

<div id='header-wrapper'>

6. Lalu kalo sudah ketemu, Kode untuk jam tersebut ya seperti di bawah ini :

Today :

<!--

var currentTime = new Date()

var hours = currentTime.getHours()

var minutes = currentTime.getMinutes()

if (minutes < 10){ minutes = "0" + minutes }

document.write(hours + ":" + minutes + " ")

if(hours > 11){ document.write("PM") } else { document.write("AM") }

//-->

</script>

</div>

</ul>

Jadi Sahabat hanya menempatkan Kode HTML diatas mengganti Tulisan yang saya kasih warna merah dan untuk kode diatas yang saya kasih warna biru, itu bisa diganti dengan Tulisan yang sahabat mau misalkan menjadi Hari Ini atau Poe ieu sperti di blog Ki Sunda Ngalalana.

7. Terakhir Save, lihat hasilnya... pasti Jam Realtime yang sahabat harapkan sudah ada di Blog Sahabat.

Ok... mungkin Sahabat saya anggap udah mengerti dan paham, dan sebenarnya Kode HTML untuk Jam tersebut bisa dipasang dimana saja tergantung kesukaan sahabat

Mudah-mudahan Postingan ini dapat berguna bagi sahabat dan mudah-mudahan pula Sahabat bisa mempraktekannya.

Petunjuk Mengganti Tombol "Search" Pencarian di Blogger

Pada versi standarnya tombol pencarian "search" di blog menurut sebagian para blogger kadang terlihat kurang menarik. Untuk blog ini, tombol "search" telah saya modifikasi dengan menggantinya dengan sebuah gambar.

Sobat dapat melihat tombol "Search" di bawah "menu" blog ini.
Untuk membuat tombol "search" seperti itu, kita lakukan dengan cara masuk pada menu "Edit HTML" pada blogger dan temukan kode

type='submit' value='Cari'

segera setelah itu ganti dengan

src='url gambar sobat' type='image' value='Cari'

Simpan template.

Cara buat Search Box atau Kotak Pencarian Pada Blog

Banyak Template / Tema blog yang sudah mendukung Box Search atau sudah langsung tersedia Box Searchnya, namun ada beberapa Tempalte / tema blog yang belum tersedia Box Search ini di blognya, maka saya akan memberikan cara membuat Search Box pada blog.

Ada dua cara buat Search Box / kotak pencarian di blog, Berikut cara Membuat Search Box Pada Blog :

Cara Satu : Yaitu Search Box yang sudah disediakan oleh Blogger :

1. Login ke akun Blogger anda

2. Klik Menu Layout

3. Klik Tab Page Element

4. Klik Pada Add a Gadget

5. Lalu Pilih "Kotak Penelusuran"

6. Nah disitu ada beberapa pilihan, silahkan sesuaikan dengan kebutuhan Anda.

7. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog anda.

Cara Dua [ HTML KODE ]

1. Login ke akun Blogger anda

2. Klik Menu Layout

3. Klik Tab Page Element

4. Klik Pada Add a Gadget

5. Lalu Klik HTML/Javascript

6. Dan Pastekan Kode berikut kedalam kotak yang disediakan :

<form action="http://fadjarnugraha.blogspot.com/search" method="get">
<input class="textinput" name="q" size="40" type="text" /> <input class="buttonsubmit" name="submit" type="submit" value="search" /></form>

Keterangan:
Ganti http://fadjarnugraha.blogspot.com/ dengan nama blog Anda.
Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya

7. Lalu Save, dan Lihat blog Anda
Dan kira-kira hasilnya akan seperti ini .

Semoga bermanfaat

Membuat Menu Dropdown Sederhana

Kali ini kita akan mencoba membuat menu dropdown sederhana dengan menggunakan CSS. Menu dropdown ini berfungsi ketika kita membutuhkan sebuah sub menu untuk menu utama. Kira-kira seperti ini menu dropdown yang akan dibuat.

Pertama kita membutuhkan sebuah file CSS dengan nama style.css. Isi file-nya sebagai berikut:

ul{

margin: 0;

padding: 0;

list-style: none;

}

ul li{

position: relative;

float: left;

width: 120px;

}

li ul{

position: absolute;

top: 30px;

display: none;

}

ul li a{

display: block;

text-decoration: none;

line-height: 20px;

color: #FFFFFF;

padding: 5px;

background: #000000;

margin: 0;

text-align: center;

font-family: Arial, Helvetica, sans-serif;

}

ul li a:hover{

background: #b5001f;

}

li:hover ul, li.hover ul{

display: block; 

}

Dapat dilihat pada kode diatas, ada beberapa format CSS yang mengatur tampilan tag <ul> dan <li>, dimana tag-tag tersebut berfungsi untuk mengatur tampilan list menu.

Setelah itu buat sebuah buat sebuah file html dengan nama menu-dropdown.html untuk menampilan style menu pada file CSS yang tadi dibuat. Isi file-nya sebagai berikut:

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>

<ul>

<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a>

<ul>

<li><a href="#">Submenu 2A</a></li>

<li><a href="#">Submenu 2B</a></li>

</ul>

</li>

<li><a href="#">Menu 3</a>

<ul>

<li><a href="#">Submenu 3A</a></li>

<li><a href="#">Submenu 3B</a></li>

<li><a href="#">Submenu 3C</a></li>

</ul>

</li>

<li><a href="#">Menu 4</a>

<ul>

<li><a href="#">Submenu 4A</a></li>

<li><a href="#">Submenu 4B</a></li>

<li><a href="#">Submenu 4C</a></li>

<li><a href="#">Submenu 4D</a></li>

</ul>

</li>

</ul>

</body>

</html>

membuat link pelangi dengan java scrypt

1 add gadget
2html/javascrypt
3masukkan kode di bawah ini

<script type="text/javascript" src="http://yourjavascript.com/756461253/rainbow.js"></script>

4save
5lihat hasilnya