Blogger Ponorogo
Headlines News :

Latest News

Memasang Kotak Search di dalam Menu Bar

Merupakan sebuah tools yang dapat mempemudah pengunjung dalam menemukan artikel yang ingin di baca. Oleh karena itu, Tutorial blog yang akan disampaikan adalah tentang Cara Membuat Kotak Pencarian yang berada pada Menu Bar di blog anda.
Kotak pencarian yang di tawarkan hari ini, memiliki tampilan yang sangat simple atau sederhana.
Mungkin karena memiliki tampilan yang sangat sederhana inilah sehingga banyak para blogger memasang kotak pencarian ini.
Jika ingin melakukan ini anda terlebih dahulu harus mempunyai menu bar, jika belum ada silahkan bikin dulu ya…..

Jika sudah punya sekarang tinggal tambahkan search box-nya :

1. Login ke Blog > Layout (tata letak) >> Edit HTML >>> Cari kode ]]></b:skin>

2. Copy paste kode ini di atas kode ]]></b:skin>

#navright {
width: 220px;
background: #FF1202;
font-size: 11px;
float: right;
padding-top:0px;
margin: -4px;
}

Save

3. buka link menu bar milik anda dan copy paste kode ini

<div id='navright'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' value='Cari Artikel Disini'/><input id='search-btn' src='http://4.bp.blogspot.com/-vWpkVR2h76c/TfcpyhyWM-I/AAAAAAAADM0/dD_RRIYxTC0/s1600/magnifier.png' style='margin-left: 5px; margin: 1px 15px 0px 13px;' type='image' value='Search'/></form> </div>

Contoh milik saya (PERHATIKAN PENEMPATANNYA):

<!-- Tab Menu Mulai -->
<table border='0' style='background:url(http://4.bp.blogspot.com/_R-xZQxI1ao8/S65G1yo8FfI/AAAAAAAAAAk/_snLvwy3OjI/s400/title.jpg) repeat-x; margin-top: 10px; margin-bottom: 10px;' width='100%'>

<tr><td align='left' id='menu'>
<a href='#'>Menu1</a> |
<a href='#'>Menu2</a> |
<a href='#'>Menu3</a> |
<a href='#'>Menu4</a> |
<a href='#'>Menu5</a> |
<a href='#'>Menu6</a> |
<a href='#'>Menu7</a> |
<a href='#'>Menu8</a> |
<a href='#'>Menu9</a> |
<a href='#'>Menu10</a>

<div id='navright'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' value='Cari Artikel Disini'/><input id='search-btn' src='http://4.bp.blogspot.com/-vWpkVR2h76c/TfcpyhyWM-I/AAAAAAAADM0/dD_RRIYxTC0/s1600/magnifier.png' style='margin-left: 5px; margin: 1px 15px 0px 13px;' type='image' value='Search'/></form>
</div>

</td></tr>
</table>
<!-- Tab Menu Selesai -->

Gampang kan….. Semoga Membantu.

Membuat Background Pada Judul Sidebar

Untuk lebih mempercantik halaman depan blog ada satu lagi yang bisa dilakukan yaitu dengan membuat background pada judul sidebar. Template bawaan blogger pada bagian judul sidebar biasanya masih polos, nah anda bisa sedikit lakukan modifikasi dengan cara membuatkan backgroundnya. Mudah dalam hitungan menitan udah siap, yang penting cermat soalnya melalui edit html, bagi yang sudah biasa edit html ga sampai 5 menit selesai.


Berikut langkahnya:
1. Login ke blogger
2. Di dasbor klik rancangan atau template
3. Masuklah ke area Edit html, sebelum menambahkan kode klik full download template untuk antisipasi error karena kesalahan kode.
4. Di area edit html temukan kode .sidebar h2 akan terdapat sederetan kode kurang lebih seperti ini :

sidebar h2
{
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;
repeat-x top left;
}

Nah anda cukup menambahkan kode: background:#2200CC
Untuk #2200CC yaitu kode warna anda dapat meilih sesuai selera anda.

diantara deretan kode tersebut misal sebelum : color: #ffffff
Jika anda ingin menampilkan background baerupa gambar atau border cantik sesuai pilihan sendiri anda dapat menggati kode warna dengan url gambar anda di tinypic atau photobucket sehingga menjadi: background:url('URL gambar').

Sebelum disimpan ada baiknya klik pratinjau dulu, kalau sudah sesuai keinginan ya tinggal klik simpan template.

Selamat memodifikasi background judul sidebar, semoga membantu.

Berapa Orang Yang Online di Blog Kita?

Who's amung us adalah layanan online yang bermanfaat untuk mengetahui berapa jumlah user yang sedang online di blog kita pada saat kita browsing pada blog kita sendiri.

Berikut ini adalah caranya :
1. Buka url http://whos.amung.us/colorwheel
2. Pada "Already have a map, or our widget?", klik atau pilih "No"
3. Pilih kombinasi warna yang anda pilih, sebaiknya pilihlah warna yang sesuai dengan blog anda.
4. Copy paste scriptnya
5. Jika sudah kembalilah ke blogger
6. Klik Tata Letak lalu pilih tambah widget pilih HTML/Javascript
7. Pasang script yang anda copy tadi di HTML/Javascript
8. Klik simpan dan selesai

Meletakkan Video kedalam Blog

Meskipun blogger sudah menyediakan upload untuk video, tapi gak ada salahnya kan kalau kita mencoba masukin kode buat menempatkan sebuah video dengan kode yang lain.
Hasilnya kurang lebih seperti di bawah ini, klik untuk memutar Video :


Jika anda ingin meletakkan video dari Youtube, anda hanya mengisi alamat/URL video tersebut pada kode.
Untuk kode, copy di bawah ini:

Modifikasi Blockquote di Blogspot

Apa ya Blogquote itu ? Fungsinya untuk apa sih ?
Untuk lebih jelasnya liat aja contoh tampilannya dibawah ini
Contoh tampilannya :




Contoh ini adalah Blockquote hasil modifikasi dari template aslinya

Cara Membuatnya Sebagai berikut :
1. Login ke akun Blogger Sobat
2. Masuk Tata Letak
3. Edit HTML
4. Beri centang pada "Expand template widget"
5. BackUp template sobat dulu, dengan cara klik "download template lengkap"
6. Cari kode Berikut : blockquote { atau .post blockquote { atau cari aja "blockquote" soalnya tiap template beda-beda

Script Blockquote :
.post blockquote { background: #024981 url(http://i1068.photobucket.com/albums/u449/ponorogoweb/green-red-side.jpg) ; background-position:; background-repeat:repeat-y; margin: 0 40px; padding: 20px 20px 20px 30px; color:#EFCDF8; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"} .post blockquote p { margin: 0; padding-top: 5px;} margin:1em 20px; }

Cara Membuat 3 Kolom Elemen Di Atas Footer

Sobat blogger pemula yang ingin membuat 3 Kolom Elemen di Atas Footer.
Silahkan ikuti langkah-langkah berikut :

Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
Beri tanda centang pada kotak di samping tulisan Expand Template Widget, kemudian cari kode seperti dibawah
Untuk mempercepat pencarian, sobat gunakan tombol (F3)

#footer{
background:#F0F5FA;
width:960px;
height:32px;
margin:0px;
padding: 0px;
float:left;
}

Jika sudah ketemu tambahkan kode berikut di atasnya :

#bottom{
background:#F0F5FA;
width:100%;
position:relative;
clear:both;
margin:0px auto 0px;
color:#000000;
float:left;
padding:10px 0;
}

#bottom h2{
color:#000000;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 8px 0px;
padding: 0px;
letter-spacing:0em;
text-transform:capitalize;
}

#bottom ul{
padding:0px;
margin:0px;
}

#bottom ul li{
line-height:26px;
list-style-type:none;
border-bottom:1px dashed #031c5d;
}

#bottom_1{
width:300px;
float:left;
margin:0px;
padding:0px;
}

#bottom_2{
width:300px;
float:left;
margin-left:15px;
padding:0px;
}

#bottom_3{
width:300px;
float:left;
margin-left:15px;
padding:0px;
}

Untuk membuat elemen di atas footer.
Cari kode seperti dibawah ini :



Jika sudah ketemu tambahkan kode berikut di atasnya :



Sesuaikan ukuran lebar width footer dengan template dan lebar elemen yang akan ditambahkan.
Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya.

Selamat mencoba dan Semoga membantu.

Membuat Background Transparan

Kali ini, kita akan membahas tentang penggunaan opacity pada template blog yang mungkin lebih tepatnya penggunaan background transparan ( tembus pandang ) pada template blog.
Tutorial kali ini saya khususkan untuk blog dengan background image atau gambar, tidak terlalu bagus untuk backround warna karna hanya akan menghasilkan perpaduan ke 2 warnanya saja. Misalnya sobat menggunakan background berwarna hitam dengan warna outer-wrapper berwarna putih, maka hasil perpaduannya akan memunculkan warna abu-abu.. jadi nggak berguna dong efek tranparantnya...

berikut kode yang di gunakan untuk membuat background transparan :

filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.6;
-khtml-opacity: 0.0;


Untuk penerapannya sobat tinggal menyisipkan kode tadi sesudah kode warna seperti berikut :

#outer-wrapper{
width:980px;
margin:0 auto;
padding:5px;
background:#f2f2f2;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.6;
-khtml-opacity: 0.0;

border:1px solid $bordercolor;
text-align:$startSide;
font:$bodyfont
}

Tambahan :
1. Berlaku juga untuk wrapper lainnya seperti header, main, sidebar dan footer, namun saran saya untuk tidak menerapkannya di wrapper lain jika sudah di pasang di outer-wrapper, karena outer-wrapper sudah mencakup semua bagian wrappernya.
2. Edit angka yang berwarna merah hingga sesuai dengan keinginan.

Buku Tamu Auto Hide di Blogspot

Kali ini saya memposting cara membuat buku tamu auto hide di blog dengan versi yang berbeda seperti contoh yang tampak di sidebar blog ini.

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( hanya di lewati pointer mouse ), kali ini beda sedikit dengan buku tamu show / hide terdahulu.
Jika sobat tertarik memasang dan mencoba widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.



Caranya :
1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save

Tambahan :
Sisipkan kode SCRIPT CBOX SOBAT dengan kode buku tamu milik sobat. Sobat yang belum punya Auto Hide Buku Tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) atau pada penyedia chatbox gratisan lainnya.

Salam dan semoga membantu.
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Blogger Ponorogo - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger