Modifikasi Search Box Auto Hide Dengan Background

Memasang kotak pencarian atau search box di blogger akan memberikan kemudahan bagi pengunjung untuk mencari dan melihat postingan di blog anda. Dan untuk kali ini saya coba memposting cara membuat search box menggunakan Auto Hide denga menambahkan backkground warna ataupun background image.

Untuk Auto Hide tentunya anda sudah jadi saya tidak perlu menjelaskan lagi. Untuk search box sebenarnya dari blogger sendiri sudah menyediakanya. namun kita tidak bisa meng custom tampilan dari search box tersebut ataupun merubahnya. Tapi dengan cara di bawah ini anda bisa merubah tampilan dari search box di blog anda.

Contoh search box auto hide seperti di bawah ini

Langsung saja pada pokok bahasan membuat atau me – modifikasi search box auto show hide.

Masuk ke Blogger
Pilih Tata Letak (Rancangan) – Tambah Gadget – HTML/JavaScript
Masukan Kode HTML di Bawah ini.

#searchboxo{
background:#f3f3f3;
border:1px solid #6B7171 ;
width:240px;
height:25px;
margin:0px;
padding:4px;
}

#searchboxo form input.searchinput{
float:left;
padding:2px;
padding-top:2px;
margin-left:2px;
width:140px;
height:19px;
color:#000;
font-size:14px;
border:1px solid #6B7171;
background:#fff;
}

#searchboxo form input.submitbutton{
float:right;
width:85px;
height:25px;
margin-right:2px;
padding-bottom:4px;
font-variant:small-caps;
text-align:center ;
cursor:pointer;
border:1px solid #6B7171;
background-color:#6B7171;
color:#FFFFFF;
font-weight:bold;
font-size:12px}

Jika sudah klik simpan.

Anda bisa meng custom tampilan dari search box auto hide ini. Saya coba menjelaskan sedikit kode HTML diatas.

#searchboxo{
ini kode paling dasar untuk background search box.

#searchboxo form input.searchinput{
Ini adalah kode dimana teks muncul pada kotak pencarian.

#searchboxo form input.submitbutton{
Ini adalah kode dimana pointer atau menyentuh kotak SEARCH.

Anda bisa mengganti ukuran lebarnya sesuai dengan blog anda. dan anda juga bisa mengganti background dengan warna lain ataupun dengan backgroung image.
Jika anda memahami kode HTML tentunya ini bukan hal sulit. Selamat mencoba.

Full Size Pada Image Posting

Untuk menampilkan gambar ukuran full size atau besar pada postingan, kita harus merubah kode HTML dari gambar yang telah kita upload tersebut. Gambar yang anda upload pada postingan, gambar tersebut muncul dengan ukuran tidak full, tentunya ini tidak sesuai dengan harapan anda yang menginginkan gambar bisa full pada postingan. misalkan postingan anda ukuran lebarnya 500px. tapi gambar yang muncul lebarnya hanya 400px.

Untuk merubah ukuran gambar supaya bisa kita atur ukurannya caranya cukup mudah.
silahkan anda ikuti langkahnya di bawah ini.

• Pertama upload gambar yang ingin di masukan.
• Pilih ukuram gambar – Besar
• Sebagai contoh saya meng upload gambar Batman dengan ukuran yang sebenarnya yaitu 500px x 283px.
• Setelah gambar muncul di postingan anda pilih Edit HTML dan anda akan melihat kode gambar seperti berikut.

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 226px;” src=”http://3.bp.blogspot.com/_lh4qH1cW0XQ/TA4yS_CH4xI/AAAAAAAABpY/cpSIihRRA9w/s400/Batman_logo.jpg” border=”0″ alt=””id=”BLOGGER_PHOTO_ID_5480373098295845650″ />

Gambar yang telah di upload tadi, hanya menampilkan ukuran widht 400px dan hight 226px.

Ukuran gambar dari default blogger 400px x 226px.

Untuk menampilkan ukuran asli dari gambar tersebut kita rubah kodenya seperti berikut :

• Ganti teks warna merah menjadi width: 500px dan height: 283px sesuai ukuran asli gambar.
• Ganti teks yang warna biru menjadi s600.

Hasil gambar yang telah dirubah kodenya.

Ukuran asli gambar 510px x 293px.
Gimana cukup mudah bukan selamat mencoba.
Gambar di ambil di www.wallpaper4xp.blogspot.com Banyak koleksi wallpaper cantik dan menarik disana yang bisa anda sedot secara gratis.

Cara Cepat Menambah Dan Menghapus Label Pada Postingan

Sudah lama blog ini tidak nulis postingan seputar blogger, kayanya materi untuk blogger udah habis atau belum muncul yang baru ya…!!! Tapi tak apalah sekedar update dan share aja , kali ini saya akan memberikan tips cara cepat menambah dan menghapus label pada postingan tanpa membuka postingan.

Mungkin postingan seperti ini udah ada yang posting, jadi yang udah tahu ga perlu lanjutin bacanya. tapi yang belum tahu silahkan lanjutin bacanya.

Langsung saja pada tutorialnya.

Langkah pertama masuk pada Dashbor Blog anda.
Lalu klik Edit Entri seperti gambar di bawah ini.

Maka anda akan melihat tampilan judul dari blog anda seperti gambar di bawah ini.

Jika Aksi Label anda klik anda akan melihat label dari semua postingan blog anda

Untuk menambah atau menghapus label dari postingan caranya cukup mudah, Anda tinggal mencentang kotak disamping Tulisan Edit, Lalu anda klik Aksi label maka di bagian bawah akan terdapat tulisan Hapus label.

jika anda ingin menghapusnya silahkan klik label tersebut. Maka secara otomatis Label yang anda klik akan terhapus dari postingan anda.

Dan sebaliknya jika anda ingin menambahkan label baru anda cukup mengklik tulisan Label baru, Maka akan muncul box untuk menambahkan label, silahkan anda isi kotak box tersebut dengan label baru.

Jika sudah klik ok, maka secara otomatis label baru pun akan berada pada judul posting yang tadi anda ceklist.
Gimana cukup mudah bukan… Jadi anda tidak perlu membuka postingan satu persatu untuk menambah atau menghapus label.. selamat mencoba.

Mengganti Judul posting Dengan Text Shadow

Untuk kali ini sya mencoba memberikan tips atau cara membuat teks shadow pada judul posting, mungkin blogger semua sudah mengenal atau mengetahui penggunaan teks shadow ini jadi saya cuma melengkapi saja. Langsung saja :

Text shadow Pada Judul posting

Langkah pertama masuk pada blog anda
lanjukan pada Tata Letak – Edit HTML
Cari kode seperti ini .post h3{
Lalu masukan kode text shadow di bawah ini di bawah kode .post h3{

text-shadow: 2px 1px 7px ;

hasil Text nya akan seperti ini.

Text shadow Pada Judul posting

Di bawah ada beberapa jenis atau model dari text shadow yang bisa anda gunakan.

text-shadow: 2px -2px 4px;

hasil Text nya akan seperti ini.

Text shadow pada Judul posting

text-shadow: 2px 2px 0px;

hasil Text nya akan seperti ini.

Text shadow pada Judul posting

text-shadow: -1px -1px white, 1px 1px #333;

hasil Text nya akan seperti ini.

Text shadow pada Judul posting

Silahkan anda pilih beberapa jenis teks shadow yang ada di atas. Anda juga bisa Mengcustomize dari jenis text shadow sesuai keinginan anda. Trima kasaih

Membuat Navbar Menu Secara Online Dengan Graphic Navbar Generator

Navbar atau Navigasi Bar adalah sebuah Navigasi atau Menu yang di gunakan untuk menyimpan Link Link Menu pokok atau penting di Blog atau Website. Navigasi ini bisa berbentuk Vertical ataupun Horizontal. Navigasi Bar ini bisa dibuat dengan menggunakan image ataupun background warna saja dengan berbagai macam variasi.

Di Postingan sebelumnya saya pernah membahas bagaimana Cara Membuat Menu Horizontal Yang Simple dan Cantik.
silahkan di baca baca dulu untuk flash back memory anda. Kalau sudah silahkan lanjukan bacanya.

Untuk kali ini saya akan memberikan informasi cara membuat Navbar atau Menu Navigasi ini secara online, yaitu dengan menggunakan Pasilitas dari Graphic navbar Generator.

Graphic Navbar Generator ini menyediakan pasilitas pembuatan Navbar secara online, Sehingga Anda tidak perlu repot repot untuk membuat sebuah Navbar Menu. Baik Navbar verical maupun horizontal.

Anda tinggal memilih Navbar yang sudah disediakan dengan banyak pilihan yang menarik, lihat screen shoot gambar diatas yang di ambil dari situsnya langsung, kita juga bisa memodifikasi Tampilan Navbar ini sesuai selera anda.

Dan Untuk penggunaannya sangat mudah anda tinggal memilih navbar yang disediakan, Terus Mengisi alamat Link nya, Judul Link nya dan anda tinggal klik Create untuk mengambil kodenya Cukup mudah saya rasa.

Gimana Anda tertarik untuk membuat Navbar Menu secra Online, silahkan saja kunjungi situsnya langsung di http://www.free-webmaster-tools.com/toolbar-generator-gui.htm Silahkan klik saja linknya untuk nyampe di TKP.

Selamat mencoba.

Modifikasi Tampilan Template Dengan Ronded Corner

Membuat ronded corner pada template mungkin akan mempercantik tempilan dari blog itu sendiri di bandingkan hanya dengan menggunakan Kotak persegi saja tapi tentunya bukan berarti template yang menggunakan kotak persegi jelek , Untuk selera dan penilaian setiap orang tentunya berbeda-beda.
Ok langsung saja pada pokok pembahasan, kali ini saya akan memberikan tips cara merubah tampilan template anda dengan menggunakan ronded corner. Sebagai conton anda bisa lihat blog saya yang ini www.chulection.blogspot.com .

Sebelumnya Sebagai tambahan saya akan menjelaskan sedikit tentang bagian-bagian dasar dari template itu sendiri.

Bagian Bagian Dasar dari Template :

• Yang pertama Background : Ini merupakan lapisan paling bawah dari sebuah template.

• Yang kedua Outer Wraper : Ini merupakan lapisan kedua di atas background.

• yang ketiga Header – Main Wraper – Sidebar – Dan Footer : Ini merupakan lapisan paling atas dari sebuah template.

Header mempunyai posisi di bagian atas .
Main wraper mempunyai posisi di Bagian tengan untuk posting .
Side bar Biasanya disamping kiri atau kanan atau juga kiri dan kanan.
Dan fotter Ditempatkan paling bawah.

Untuk Tips kali ini saya mencoba memberikan tips membuat ronded corner pada bagian outer-wraper atau bagian diatas background dan di bawah main wraper .

Sekarang buka blog anda.
Masuk pada Tata Letak dan pilih Edit HTML.
Sekarang anda cari Kode html di bawah ini.

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
background:#fff;
border:1px solid #04B4AE;
width: 660px;
margin:15px auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}

Kode diatas merupakan kode standar dari template minima. sekarang anda ganti kode di atas dengan kode di bawah ini.

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
background:#fff;
border:8px solid #04B4AE;
-moz-background-clip:-moz-initial; -moz-background-origin:-moz-initial; -moz-background-inline-policy:-moz-initial; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px;
width: 660px;
margin:15px auto;
padding:15px;
text-align:$startSide;
font: $bodyfont;
}

Sekarang coba previwe atau pratinjau terlebih dahulu, Kalau sudah cocock silahkan di simpan.
Anda bisa merubah lebar atau widht-y , warna background ataupun border nya sesuai keinginan anda.Selamat mencoba.

Back To Top Dari Blogger

Membuat Back to Top atau tombol link yang yang menuju ke atas posting. back to top ini di maksudkan ketika anda membaca postingan yang banyak sampai bawah anda tidak perlu lagi menggunakan scroll untuk menuju ke bagian atas posting cukup dengan mengklik tombol link back to top anda akan di bawa langsung ke bagian atas posting.

sebenarnya banyak cara untuk membuat back to top ini tapi kali ini saya akan memberikan tips cara membuat back to top ala blogger.

Silahkan ikuti caranya di bawah ini :

1. Masuk ke blog Anda
2. pilih Tata Letak – Element halaman
3. Tambah Gadget – Pilih HTML/JavaScript
4. Lalu masukan kode di bawah ini :

.backtotop a:hover {background:none;}

<img style="border:0;" src="http://1.bp.blogspot.com/_u4gySN2ZgqE/SukYqBahTkI/AAAAAAAABCc/QVxl3cG5_90/s400/back-to-top.gif” />

Jika sudah Silahkan di simpan.
Tombol Back to top ini akan secara otomatis ada di bagian kanan bawah blog anda.

NB : Anda bisa mengganti tombol Back to top ini dengan tombol yang anda buat Silahkan anda ganti kode warna merah dengan alamat penyimpanan gambar anda.

Script Anti Iframe

Penulis : Kolom Tutorial (Kang Rohman)
Update : 08 Apr 2010 07:20 AM PDT

Dulu, kang Rohman pernah menulis tentang Iframe pada artikel Mengenal perintah IFRAME, dengan iframe kita bisa menampilkan isi dari website yang lain didalam website atau blog milik kita. Ini tentunya bisa menguntungkan bagi yang memasang iframe, namun sebaliknya bagi pemilik website yang dipasang iframe sangat merugikan karena tidak mendapatkan jumlah kunjungan yang sebenarnya dan dapat mengambil jatah bandwidth website tersebut ( apabila hosting sendiri).

Untuk yang blognya di host di blogger tentu tidak ada masalah karena bandwidth blogger boleh di katakan tidak terbatas, namun bagi yang sewa hosting sendiri ini sangatlah merugikan. Walaupun demikian untuk pengguna blogger juga dirasa sedikit kurang menguntungkan karena mendapatkan sebuah kunjungan palsu. Bagaimana cara untuk menghindari agar orang lain tidak bisa memasang iframe untuk blog kita? caranya sangat mudah, dengan hanya memasang sebuah script sederhana, anda dapat menghindari pencurian dari kode iframe.

Langkah sederhana yang bisa anda lakukan adalah dengan memasang script berikut pada bagian header template anda.

<!– Hide Script
if (top.location != self.location) {
top.location = self.location
}
//End Hide Script–>

atau bisa juga memakai script berikut :

<!–
if (parent.frames.length > 0) { parent.location.href = location.href; }
–>

Jika script diatas terpasang pada kode template website atau blog anda, maka apabila ada yang memasang iframe terhadap blog anda maka secara otomatis akan di redirect ke website anda.

Bagi yang masih merasa sedikit kebingungan tentang pemasangan script diatas, berikut langkah-langkahnya.

Untuk blogger :

* Silahkan login ke blogger dengan ID anda.
* Klik Tata Letak.
* Klik tab Edit HTML.
* Carilah kode ;
* Copy paste kode berikut persis diatas kode

<!– Hide Script
if (top.location != self.location) {
top.location = self.location
}
//End Hide Script–>

* Klik tombol SIMPAN TEMPLATE.
* Selesai

Untuk pengguna WordPress.org, pada theme umumnya ada file yang bernama header.php, bukalah file tersebut lalu cari kode , lalu copy paste script yang tadi tepat diatas kode . Namun, jika anda ingin praktis, anda bisa menggunakan plugin break out of frame.

Selain itu, script anti iframe juga untuk menghindari pemasangan iframe oleh google image ataupun digg, sehingga akan berpeluang mendapatkan jumlah kunjungan yang lebih banyak. Salah satu contoh website yang mengimplementasikan kode diatas adalah http://fliptextgenerator.com. Untuk membuktikan bahwa script diatas bekerja dengan baik, silahkan anda pasang kode iframe dibawah ini pada sidebar blog anda.

Setelah script diatas dipasang, lalu silahkan buka halaman blog anda dan lihat apa yang terjadi?

Modifikasi Vertical Menu Dengan Ronded Corner

Tutorial Kali ini saya akan membahas cara membuat Vertical Menu dengan Modifikasi menggunakan Ronded Corner, Mungkin Vertical Menu ini pernah saya bahas pada postingan sebelumnya bisa di lihat disini. Sebagai tambahan saja buat teman teman blogger yang ingin merubah atau mengganti link Menu Vertical dengan Ronded Corner silahkan ikuti caranya dibawah ini.

seperti biasa saya membuat menu ini tanpa harus membuka EDIT HTML template anda cukup dengan menambahkan Widget HTML/Java Sript di sidebar atau di bagian footer seperti menu vertical yang ada di blog ini. Langsung saja :

1. Masuk ke Blog anda.
2. Pilih Tata Letak di lanjutkan dengan memilih Element halaman.
3. Tambah Gadget – Lalu pilih HTML/JavaScript.
4. Masukan Kode HTML di bawah ini :

/* vertikal vertikal merah di mulai
—————————————- */

/*Credits: CSS Library */
/*URL: http://css-lybrary.blogspot.com */

#vertikal-merah{

border-bottom-width: 0;
}

#vertikal-merah ul{
margin: 0px;
padding:0px;
font: normal 100% ‘georgia; /*pemilihan bentuk huruf */
}

#vertikal-merah a{
display: block;
padding: 4px;
padding-left: 10px;
border:1px solid #ccc;
-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
text-decoration: none; /*agar link tidak bergaris bawah */
color: black;
border-top:1px solid #f3f3f3;
border-bottom:1px solid #f3f3f3;
border-right:1px solid #f3f3f3;
background-color: #fff;
border-left: 10px solid #ccc;
}

#vertikal-merah a:hover {
background-color: #f2f2f2;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:10px solid #ccc;
color: #cc0000;
}

Bisnis Online
Desain Grafis
Tutorial Flash 8
Tutorial Blog
Komputer Internet
Tips N Trik
Free Artikle

Ganti Link nya dengan link yang ingin anda gunakan.
Berikan judul untuk widget ini misalnya Menu Vertical atau apa saja terserah anda.
Jika sudah Simpan.

Tentunya anda sudah paham untuk merubah warna background ataupun warna teks jika kode di atas tidak sesuai dengan keinginan anda silahkan anda menggantinya….!!
Selamat mencoba.

Google Translate Dengan Navbar Untuk Blogger

Kali ini saya akan memberi informasi cara memasang Google translate bahasa dengan menggunakan Navbar yang terletak pada bagian atas. Sebagai contoh bisa dilihat gambar di atas, ataupun pada blogger blogger lain yang menggunakan translator bahasa model Navbar seperti ini. Jika anda tertarik untuk memasangnya silahkan ikuti caranya di bawah ini.

Untuk memasang Google Translate Model Navbar ini cukup simple, anda hanya memasang Script yang ada di bawah ini,atau klik disini untuk mengambil dari Om Google. Setelah itu anda tinggal meletakannya pada bagian widget blog anda jadi tidak perlu memasukannya di bagian Edit HTML. Dan secara otomatis akan langsung muncul pada bagian Atas seperti Navbar Blogger.

Silahkan Copy Paste Script Google Translator bahasa dengan Navbar di bawah ini dan pasang pada widget anda. Anda bisa menaruhnya pada bagian sidebar, footer maupun header.

function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: ‘id’
}, ‘google_translate_element’);
}