Pada Kesempatan ini bagi para pengguna Blogger pasti mengenal namanya Kode warna HTML adalah salah satu pelengkap untuk mempercantik blog atau websitenya guna menarik dan menjadi sorotan dari para penikmat informasi blogger dan internet pada umumnya.
Sehingga web atau blog anda akan menjadi lebih baik secara seo atau secara kasat mata baha kasarnya enak dilihat.... maka digunakan teknik untuk memoleh dan menambah warna pada baik itu header atau di sidebar untuk penggunakan kolom iklan sehingga mendapat kan warna yang di cari oleh orang karena mencolok dari akibat warna yang menonjol sehingga menarik perhatian pengunjung.
untuk menggunakan warna ini digunakan dengan HTML dengan kode-kode tertentu disini guna memperlancar dan mempermudah pencarian warna dan kode-kode yang memusingkan, sehingga menjadi bingung ini ada kolom warna dan kode yang di inginkan oleh pengguna.
silahkan dicoba smoga menjadi bermanfaat....
Showing posts with label Tips and Trik. Show all posts
Showing posts with label Tips and Trik. Show all posts
Oct 29, 2015
Oct 19, 2011
Tips and Trik
AKTUAL NEWS ONLINE
4:47 AM
Sesuatu yang baru tentunya perlu dipelajari dengan sungguh - sungguh , utamanya bagi seorang Blogger yang notabene adalah penulis Online yang siap bersaing dengan berbagai penulis lainnya di dunia Maya .
Hal ini juga perlu diperhatikan oleh Internet Marketer yang tentu saja harus memperhatikan 'kata kunci' produk yang akan dipasarkannya . Oleh karena itu kita harus mempelajari Algoritma dari Google itu sendiri .
Berdasarkan penuturan teman dari sahabat saya , kali ini Google merubah Algoritma menjadi sesuatu yang unik dan tidak sembarang unik sehingga banyak yang menyebutnya Algoritma si Panda .
Ada beberapa point yang dapat memberikan kita pemahaman tentang Algoritma si Panda atau Google tersebut, seperti:
10 Hal Tentang Algoritma "Si Panda" Google
1. Algoritma baru Google berganti ke sistem lain , dari sistem semulanya deIndex . Algoritma baru Google ini anti terhadap "content farm".
2. Sebagai dampak dari Algoritma baru ini , index dari content farm ditekan hingga ke pencarian akhir , akibatnya banyak konten yang dianggap hilang oleh ownernya padahal karena kebanyakan mereka tersingkir dari halaman pencarian teratas . Akibatnya trafik / pengunjung dari search engine menurun bahkan drastis , kondisi ini disebut sebagai Google adalah 'de-ranked'.
3. Kebanyakan analisator mengatakan , kesempatan ini adalah kesempatan emas buat original content untuk menjadi posisi teratas atau halaman pertama . Namun dari analisis teman saya , disini adalah masalah utama , karena algoritma baru Google ini akan mengutamakan situs - situs yang resmi atau yang kita kenal denga "authoritative site".
4. Apa itu authoritative site? Kalau dahulu hasil pencarian dari Wikipedia merajalela di halaman pertama , sekarang adalah zaman keemasan untuk situs dengan akhiran *.gov di laman pertama pencarian. Jika diibaratkan , algoritma baru ini lebih senang dengan situs 'plat merah' dibanding 'plat hitam'.
5. Untuk kondisi ini kita mengumpamakan Algoritma ini bersifat umum untuk semua situs , untuk situs - situs auto , robot , copy-paste , dan de-index jangan berkecil hati dulu . Karena belum tentu Algoritma Google akan langsung mendepak konten-konten kalian di mesin pencari . Jika dilihat dari pengalaman , Google juga mencari situs - situs yang sesuai dengan Algoritma-nya dan tidak suka dengan yang ribet .
6. Dari pendapat teman saya lagi , kalau blog kawan - kawan diperingatkan oleh Google , hal itu bsia jadi karena selama ini terlalu 'dekat' dengan situs atau web dengan content farm . Kalau artikel maupun direktori di 'cap merah' oleh Google sebaiknya anda menjauhi situs - situs content farm tersebut . Kalau diumpamakan situs tersebut 'underseeing' dari Google , maka segala aktivitasnya akan direkam oleh Google.
7. Sedangkan kabar tidak mengenakkan dari algoritma baru ini , kabarnya algoritma baru ini baru rolling 12% database google terutama untuk Amerika. Jadi waspadalah kepada konten - konten di luar Amerika tinggal menunggu giliran saja .
8. Hal yang banyak didiskusikan sekarang ini adalah masa depan SEO -Search Engine Optimalization- yang selama ini diandalkan oleh para Blogger untuk meraih posisi teratas . Sedangkan algoritma baru Google lebih condong ke "authoritative site . Apakah backlink masih mendongkrak SERP ? Masih pertanyaan besar .
9. Apa motif dibalik kebijakan algoritma baru ini ? Hal ini disebabkan karena Google sekarang lebih condong ke Bisnis Internet dibanding Edukasi dan Pencarian Akurat , menurut rilis pendapatan Google tahun 2010 sebanyak 30 milliar dolar adalah pendapatan dari Google yang lebih dari 90% berasal dari Google Adword.
10. Lalu bagaimana dengan nasib kita ? Para Blogger yang kebanyakan mengandalkan kebaikan hati dari Google , apakah kita harus pindah ke lain hati ? , maksud saya ke mesin pencari lainnya ?. Padahal seperti kita tahu kita sudah sehidup semati dengan Google . Menurut saya hanya ada dua pilihan , apakah anda berkoalisi ataukah anda beroposisi dnegan Google . Ibarat dalam pemerintahan , kita lebih condong kepada empunya mesin pencari atau bahkan membuat tandingannya .
Dengan demikian tentu sudah dapat menalarkan motif sebenarnya dari Algoritma terbaru Google ini , bukan ?
baca juga : Situs yang terkena dampak Algoritma baru GoogleHal ini juga perlu diperhatikan oleh Internet Marketer yang tentu saja harus memperhatikan 'kata kunci' produk yang akan dipasarkannya . Oleh karena itu kita harus mempelajari Algoritma dari Google itu sendiri .
Berdasarkan penuturan teman dari sahabat saya , kali ini Google merubah Algoritma menjadi sesuatu yang unik dan tidak sembarang unik sehingga banyak yang menyebutnya Algoritma si Panda .
Ada beberapa point yang dapat memberikan kita pemahaman tentang Algoritma si Panda atau Google tersebut, seperti:
10 Hal Tentang Algoritma "Si Panda" Google
1. Algoritma baru Google berganti ke sistem lain , dari sistem semulanya deIndex . Algoritma baru Google ini anti terhadap "content farm".
2. Sebagai dampak dari Algoritma baru ini , index dari content farm ditekan hingga ke pencarian akhir , akibatnya banyak konten yang dianggap hilang oleh ownernya padahal karena kebanyakan mereka tersingkir dari halaman pencarian teratas . Akibatnya trafik / pengunjung dari search engine menurun bahkan drastis , kondisi ini disebut sebagai Google adalah 'de-ranked'.
3. Kebanyakan analisator mengatakan , kesempatan ini adalah kesempatan emas buat original content untuk menjadi posisi teratas atau halaman pertama . Namun dari analisis teman saya , disini adalah masalah utama , karena algoritma baru Google ini akan mengutamakan situs - situs yang resmi atau yang kita kenal denga "authoritative site".
4. Apa itu authoritative site? Kalau dahulu hasil pencarian dari Wikipedia merajalela di halaman pertama , sekarang adalah zaman keemasan untuk situs dengan akhiran *.gov di laman pertama pencarian. Jika diibaratkan , algoritma baru ini lebih senang dengan situs 'plat merah' dibanding 'plat hitam'.
5. Untuk kondisi ini kita mengumpamakan Algoritma ini bersifat umum untuk semua situs , untuk situs - situs auto , robot , copy-paste , dan de-index jangan berkecil hati dulu . Karena belum tentu Algoritma Google akan langsung mendepak konten-konten kalian di mesin pencari . Jika dilihat dari pengalaman , Google juga mencari situs - situs yang sesuai dengan Algoritma-nya dan tidak suka dengan yang ribet .
6. Dari pendapat teman saya lagi , kalau blog kawan - kawan diperingatkan oleh Google , hal itu bsia jadi karena selama ini terlalu 'dekat' dengan situs atau web dengan content farm . Kalau artikel maupun direktori di 'cap merah' oleh Google sebaiknya anda menjauhi situs - situs content farm tersebut . Kalau diumpamakan situs tersebut 'underseeing' dari Google , maka segala aktivitasnya akan direkam oleh Google.
7. Sedangkan kabar tidak mengenakkan dari algoritma baru ini , kabarnya algoritma baru ini baru rolling 12% database google terutama untuk Amerika. Jadi waspadalah kepada konten - konten di luar Amerika tinggal menunggu giliran saja .
8. Hal yang banyak didiskusikan sekarang ini adalah masa depan SEO -Search Engine Optimalization- yang selama ini diandalkan oleh para Blogger untuk meraih posisi teratas . Sedangkan algoritma baru Google lebih condong ke "authoritative site . Apakah backlink masih mendongkrak SERP ? Masih pertanyaan besar .
9. Apa motif dibalik kebijakan algoritma baru ini ? Hal ini disebabkan karena Google sekarang lebih condong ke Bisnis Internet dibanding Edukasi dan Pencarian Akurat , menurut rilis pendapatan Google tahun 2010 sebanyak 30 milliar dolar adalah pendapatan dari Google yang lebih dari 90% berasal dari Google Adword.
10. Lalu bagaimana dengan nasib kita ? Para Blogger yang kebanyakan mengandalkan kebaikan hati dari Google , apakah kita harus pindah ke lain hati ? , maksud saya ke mesin pencari lainnya ?. Padahal seperti kita tahu kita sudah sehidup semati dengan Google . Menurut saya hanya ada dua pilihan , apakah anda berkoalisi ataukah anda beroposisi dnegan Google . Ibarat dalam pemerintahan , kita lebih condong kepada empunya mesin pencari atau bahkan membuat tandingannya .
Dengan demikian tentu sudah dapat menalarkan motif sebenarnya dari Algoritma terbaru Google ini , bukan ?
Oct 18, 2011
Tips and Trik
AKTUAL NEWS ONLINE
3:48 PM
Dengan sedikit berbekal Informasi yang ada, berita bahwa Wordpress mudah di serang Oleh Hacker yang jahat. Dengan ini saya mengantisipasinya dengan beberapa trik, sehingga orang yang mengerti tentang teknik khusus ini tidak bisa masuk dan mengotak-atik wordpress atau blog yang ada..
Teknik khusus seperti apa mas ?.
Teknik seperti SQL Injection, RFI, Spaw upload dll.
Nah jika kalian sudah pernah merasakan ulah dari hacker ini dan belum mengetahui cara mencegahnya. Saya akan memberitahukan cara mencegahnya.
Salah satunya dengan memasang plugin di wordpress kita agar cpanel kita tidak di ciduk oleh parah hacker.
Berikut adalah beberapa plugin untuk mengamankan wordpress anda :
1. Login LockDown » http://www.bad-neighborhood.com/login-lockdown.html
Plugin ini berfungsi memblokir suatu IP-Address yang telah salah login (/wp-login.php) setelah beberapa kesempatan, tergantung konfigurasi anda
2.WP Security Scan » http://wordpress.org/extend/plugins/wp-security-scan/
Fungsinya scanner, bisa SQL-Scanner, File Inclusion Scanner dll sehingga serangan hacker bisa terpantau dan bisa ditolak.
3.Wordpress Firewall » http://wordpress.org/extend/plugins/wordpress-firewall/
Fungsinya menyelidiki setiap permintaan dengan simple WordPress-specific heuristics untuk mengidentifikasi dan menghentikan serangan.
Nah sudah kan..
Diatas adalah beberapa plugin yang mungkin bisa mengamankan Wordpress anda.
Tapi sih menurut saya lebih baik Blogger dari pada Wordpress karena Wordpress mudah di serang hacker, tetapi kalo Blogger sudah pasti aman.
Mau tau kenapa ?. Karena Blogger adalah produk dari sebuah situs ternaman GOOGLE.COM .
Jadi kalian pilih mana Blogger Or Wordpress ?
Sekian dulu ya..dan semoga ada manfaat untuk sobat bloger...!!!
Teknik khusus seperti apa mas ?.
Teknik seperti SQL Injection, RFI, Spaw upload dll.
Nah jika kalian sudah pernah merasakan ulah dari hacker ini dan belum mengetahui cara mencegahnya. Saya akan memberitahukan cara mencegahnya.
Salah satunya dengan memasang plugin di wordpress kita agar cpanel kita tidak di ciduk oleh parah hacker.
Berikut adalah beberapa plugin untuk mengamankan wordpress anda :
1. Login LockDown » http://www.bad-neighborhood.com/login-lockdown.html
Plugin ini berfungsi memblokir suatu IP-Address yang telah salah login (/wp-login.php) setelah beberapa kesempatan, tergantung konfigurasi anda
2.WP Security Scan » http://wordpress.org/extend/plugins/wp-security-scan/
Fungsinya scanner, bisa SQL-Scanner, File Inclusion Scanner dll sehingga serangan hacker bisa terpantau dan bisa ditolak.
3.Wordpress Firewall » http://wordpress.org/extend/plugins/wordpress-firewall/
Fungsinya menyelidiki setiap permintaan dengan simple WordPress-specific heuristics untuk mengidentifikasi dan menghentikan serangan.
Nah sudah kan..
Diatas adalah beberapa plugin yang mungkin bisa mengamankan Wordpress anda.
Tapi sih menurut saya lebih baik Blogger dari pada Wordpress karena Wordpress mudah di serang hacker, tetapi kalo Blogger sudah pasti aman.
Mau tau kenapa ?. Karena Blogger adalah produk dari sebuah situs ternaman GOOGLE.COM .
Jadi kalian pilih mana Blogger Or Wordpress ?
Sekian dulu ya..dan semoga ada manfaat untuk sobat bloger...!!!
Tips and Trik
AKTUAL NEWS ONLINE
2:00 PM
Kemarin ketika saya ingin mengedit salah satu widget HTML/Javascript tanpa judul, saya mengalami masalah dimana saat saya tekan tombol Save muncul pesan error yang menyatakan saya harus memberi judul pada kolom title.
Hal ini juga terjadi saat saya ingin menambah widget HTML/javascript baru. Padahal sebelumnya saya dapat melakukannya tanpa memberi judul.
Awalnya saya pikir mungkin template blog ini yang error lalu saya coba di blog lain ternyata hasilnya juga sama. Saya pun mencoba untuk mencari tahu masalah ini lewat Googling tapi tidak ada satupun yang membahasnya.
Dengan rasa was-was saya pun mencoba untuk bertanya ke beberapa blogger lainnya. Ternyata mereka juga mengalami hal serupa. Tenang sudah hati saya karena memang blogger.com sendiri yang mengubah sistemnya bukan karena akun saya yang bermasalah
Saya tidak tahu mengapa blogger.com melakukan hal ini karena menurut saya jadi kurang fleksibel. Bagaimana menurut anda? Btw, sebagai pengguna saya hanya bisa menerima saja :(
Lalu adakah cara agar title widget ini tidak muncul? Yup setelah cek dan ricek akhirnya saya menemukan salah satu cara agar titlenya tidak muncul di halaman blog yaitu dengan menghapus kode title dari widget tersebut. Hasilnya sama persis dengan tampilan lama.
Bagi anda yang ingin menambah widget HTML/javascript tanpa beri judul. Berikut caranya:
1. Buat terlebih dahulu widget HTML/Javasript yang ingin anda tambahkan pada blog anda denga judul apa saja terserah.
2. Kalau sudah, masuk ke menu Design -> Edit HTML. Beri centang pada "Expand Widget Templates". Agar lebih aman backup template anda setelah itu cari judul widget yang anda buat tadi misalnya anda memberi judul "iklan banner" maka cari kata tersebut pada template anda.
3. Agar lebih mudah, gunakan kotak Find untuk mencarinya. Tekan Ctrl+F dan masukkan kata kunci tersebut lalu tekan Next.
4. Kalau sudah ketemu cari kode <h2 class='title'><data:title/></h2> yang terletak beberapa baris dibawahnya. Perhatikan gambar dibawah (klik untuk memperbesar).
5. Hapus kode tersebut lalu tekan Save Template. Selesai.
Jika suatu saat anda ingin memunculkan kembali titlenya tinggal tambahkan saja kode <h2 class='title'><data:title/></h2> pada tempat semula atau hapus widget tersebut lalu buat yang baru lagi. Gampangkan? Semoga bermanfaat.
Bagi anda yang mempunyai cara lain yang lebih efektif bisa share disini. thanks
Hal ini juga terjadi saat saya ingin menambah widget HTML/javascript baru. Padahal sebelumnya saya dapat melakukannya tanpa memberi judul.
Awalnya saya pikir mungkin template blog ini yang error lalu saya coba di blog lain ternyata hasilnya juga sama. Saya pun mencoba untuk mencari tahu masalah ini lewat Googling tapi tidak ada satupun yang membahasnya.
Dengan rasa was-was saya pun mencoba untuk bertanya ke beberapa blogger lainnya. Ternyata mereka juga mengalami hal serupa. Tenang sudah hati saya karena memang blogger.com sendiri yang mengubah sistemnya bukan karena akun saya yang bermasalah
Saya tidak tahu mengapa blogger.com melakukan hal ini karena menurut saya jadi kurang fleksibel. Bagaimana menurut anda? Btw, sebagai pengguna saya hanya bisa menerima saja :(
Lalu adakah cara agar title widget ini tidak muncul? Yup setelah cek dan ricek akhirnya saya menemukan salah satu cara agar titlenya tidak muncul di halaman blog yaitu dengan menghapus kode title dari widget tersebut. Hasilnya sama persis dengan tampilan lama.
Bagi anda yang ingin menambah widget HTML/javascript tanpa beri judul. Berikut caranya:
1. Buat terlebih dahulu widget HTML/Javasript yang ingin anda tambahkan pada blog anda denga judul apa saja terserah.
2. Kalau sudah, masuk ke menu Design -> Edit HTML. Beri centang pada "Expand Widget Templates". Agar lebih aman backup template anda setelah itu cari judul widget yang anda buat tadi misalnya anda memberi judul "iklan banner" maka cari kata tersebut pada template anda.
3. Agar lebih mudah, gunakan kotak Find untuk mencarinya. Tekan Ctrl+F dan masukkan kata kunci tersebut lalu tekan Next.
4. Kalau sudah ketemu cari kode <h2 class='title'><data:title/></h2> yang terletak beberapa baris dibawahnya. Perhatikan gambar dibawah (klik untuk memperbesar).
5. Hapus kode tersebut lalu tekan Save Template. Selesai.
Jika suatu saat anda ingin memunculkan kembali titlenya tinggal tambahkan saja kode <h2 class='title'><data:title/></h2> pada tempat semula atau hapus widget tersebut lalu buat yang baru lagi. Gampangkan? Semoga bermanfaat.
Bagi anda yang mempunyai cara lain yang lebih efektif bisa share disini. thanks
Oct 16, 2011
Tips and Trik
AKTUAL NEWS ONLINE
8:46 PM
Template Anda tidak dapat di Well-formed. harap Pastikan semua element XML.ditutup dengan benar.Pesan Error XML. The entity name must immediately Follow the '&' in the entily reference.
Pesan error seperti ini terkadang muncul apabila kita menambahkan kode javascript di blogspot bagaimana cara mengatasinya?
1. Cara yang pertama adalah dengan menggunakan external file, upload kode javascript kamu terlebih dahulu ke pihak ke tiga 9hosting), kemudian kodenya di blog biasa, contoh kode :
2. cara Kedua, dengan, menambahkan beberapa baris kode seperti contoh dibawah ini :
3. cara ketiga adalah dengan mem-parsing kode ter;enbih dahulu, contoh :
bisa gunakan tool html umtuk memparsing kodenya, silahkan cari di mbah google.
setelah itu taruh kode javascriptnya sepertia biasa tepat diatas baris </head>
selamat mencoba dan sukses.....!!!
Pesan error seperti ini terkadang muncul apabila kita menambahkan kode javascript di blogspot bagaimana cara mengatasinya?
1. Cara yang pertama adalah dengan menggunakan external file, upload kode javascript kamu terlebih dahulu ke pihak ke tiga 9hosting), kemudian kodenya di blog biasa, contoh kode :
2. cara Kedua, dengan, menambahkan beberapa baris kode seperti contoh dibawah ini :
3. cara ketiga adalah dengan mem-parsing kode ter;enbih dahulu, contoh :
bisa gunakan tool html umtuk memparsing kodenya, silahkan cari di mbah google.
setelah itu taruh kode javascriptnya sepertia biasa tepat diatas baris </head>
selamat mencoba dan sukses.....!!!
Tips and Trik
AKTUAL NEWS ONLINE
8:33 PM
Blogspot menyediakan mode WYSIWYG untuk melakukan edit posting sebelum anda postingnya. Mode WYSIWYG ini memudahkan pengguna, dalam proses edit dan input text, karena apa yang diketik oleh user akan selalu sama dengan hasilnya setelah diposting ke blog. WYSIWYG adalah singkatan dari What You See What You Get. Jadi apa yang anda lakukan dan anda buat di mode ini, maka itulah yang akan tampil sebagai hasil akhirnya. Setiap menginput text di sini, maka setiap detik input yang anda masukkan akan otomatis tersimpan sebagai draft di blogspot. Gunanya apabila sewaktu-waktu terjadi eror, maka hasil text terakhir yang tersimpan tersebut dapat dimunculkan kembali melalui edit post pada blogspot anda. Pesan eror yang sering terjadi adalah An error occurred while saving.
An error occurred while saving adalah pesan yang muncul ketika anda input text untuk posting dalam mode WYSIWYG yang ternyata di dalamnya mengandung code-code html atau javascript. Karena secara default, blogspot tidak bisa melakukan penyimpanan (saving) jika terdapat kode seperti itu. Maka muncullah pesan “An error occurred while saving“ . Dalam istilah webmaster parse html.
Bagaimana mengatasi pesan An error occurred while saving. Cara mengatasinya dengan melakukan unformated text anda. Seleksi semua text yang ada, atau tekan Ctrl+A kemudian anda tekan tombol remove formating. Sebelum anda melakukan ini, sebaiknya kode html yang ada anda hapus. Untuk memasukkan kode html pada blogspot, silahkan baca Memasukkan Code Html Ketika Posting Artikel Blogspot
An error occurred while saving adalah pesan yang muncul ketika anda input text untuk posting dalam mode WYSIWYG yang ternyata di dalamnya mengandung code-code html atau javascript. Karena secara default, blogspot tidak bisa melakukan penyimpanan (saving) jika terdapat kode seperti itu. Maka muncullah pesan “An error occurred while saving“ . Dalam istilah webmaster parse html.
Bagaimana mengatasi pesan An error occurred while saving. Cara mengatasinya dengan melakukan unformated text anda. Seleksi semua text yang ada, atau tekan Ctrl+A kemudian anda tekan tombol remove formating. Sebelum anda melakukan ini, sebaiknya kode html yang ada anda hapus. Untuk memasukkan kode html pada blogspot, silahkan baca Memasukkan Code Html Ketika Posting Artikel Blogspot
Jika Anda suka dengan artikel Mengatasi Pesan An error occurred while saving Ketika Posting Artikel
Tolong share dengan yang lainnya. Bantu dan dukung bloggerafif juga
untuk ikut kontes seo dengan share artikel Pulauweb Web Hosting Murah Indonesia dan Bejubel Market Place Terbaik Indonesia
Tolong share dengan yang lainnya. Bantu dan dukung bloggerafif juga
untuk ikut kontes seo dengan share artikel Pulauweb Web Hosting Murah Indonesia dan Bejubel Market Place Terbaik Indonesia
silahakan anda coba dan perhatikan hasilnya....
Tips and Trik
senoga ada manfaatnya bagi para blogger...!!!
AKTUAL NEWS ONLINE
8:25 PM
Pasang javascript memang gampang-gampang susah,mudah-mudahan dengan sedikit berbekal trik untuk dapat mempermudah pemasangan Javascript. Dengan begitu kesal mangkel dan jengkel kalau pemsangan javascript ada yang error dan kita kurang teliti hanya kurang koma atas aja jadi gak bisa save dan gak jalan programnya.
Yah … emang begitu kasus yang sering kita alami dengan javascript. Kalau kebetulan kode javascriptnya cocok di blog, wus …. langsung bisa jalan tanpa perlu coba-sini coba-sana, semua bagai kentut tanpa dihalangi. Pasang javascript memang nggak banyak kendala bila dilakukan terhadap javascript yang sebelumnya telah diupload. Begitu juga pemasangan javascript melalui penambahan widget. Hampir bisa dikatakan 100% tak akan menemui kendala sama sekali. Permasalahan yang muncul biasanya hanya terjadi pada masalah ke-kompatibelan javascript tersebut terhadap browser atau blog yang kita kelola.
Permasalahan pemasangan javascript yang akan kita bicarakan di sini adalah ketika sebuah javascript akan kita pasang di antara tag <body> dan </body> atau di antara tag <head> dan </head> di dalam template (nggak lewat penambahan widget). Beberapa javascript sama sekali tak dapat disimpan dengan pernyataan penolakan yang disampaikan blogger karena berbagai alasan. Bagaimana cara mengatasi masalah seperti ini? Ada satu cara termudah yang dapat kita lakukan untuk menetralisir penolakan blogger tersebut. Tambahkan seikit kode baru seperti di bawah ini, maka dengan penambahan javascript akan membawa perubahan dan menyatu dengan template dan blog sampeyan.
Cara Mengatasi Pemasangan Javascript yang Bandel di Template Blog
Di bawah ini adalah contoh bentuk kode javascript yang akan di pasang di blog :
<script type="text/javascript">
if(
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = '';
this.value = 'Close !;
}
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '';
this.value = 'Please ..., Open!';
}
</script>
Jadikan bentuk javascript menjadi seperti ini :
<script type="text/javascript">Sehingga apabila diterapkan pada javascript di atas bentuknya menjadi seperti di bawah ini :
//<![CDATA[
Di sini Javascript di tuliskan!
//]]>
</script>
<script type="text/javascript">Yap … hanya seperti itu saja! nggak ada lagi yang lain. Tapi mengapa bisa jadi bisa di simpan, ya? Hoo … hooo … Tanya saja sama si Bejo nyang misih ndilosor atau datanglah ke ladang pak Sakimin kemudian tanya pada jagung yang bergoyang,
//<![CDATA[
if(
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
this.innerText = '';
this.value = 'Close !;
}
else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = '';
this.value = 'Please ..., Open!';
}
//]]>
</script>
senoga ada manfaatnya bagi para blogger...!!!
Oct 15, 2011
Tips and Trik
AKTUAL NEWS ONLINE
9:10 AM
Share Kali ini saya akan mengajarkan caranya membuat gambar di pojokan seperti punya saya untuk
gambar pojokan di 3 sudut sekaligus ya....antara lain kanan bawah,kiri bawah,dan kiri atas.
Sebelum kode ]]></b:skin>
kita masukan script di atas dalam tiga formasi,contohnya di bawah ini :
(Tulisan yang merah ga usah di copy cz itu cuma keterangan)
klik pratinjau atau langsung saved bila udah.
selamat berkarya...
gambar pojokan di 3 sudut sekaligus ya....antara lain kanan bawah,kiri bawah,dan kiri atas.
Sebelum kode ]]></b:skin>
kita masukan script di atas dalam tiga formasi,contohnya di bawah ini :
#gambar_pojokan {lalu cari kode </body> pastekan kode berikut di atas kode tersebut :
position:fixed;_position:absolute;bottom:0px; left:0px; (gambar kiri bawah)
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#gambar_pojokan1 {
position:fixed;_position:absolute;bottom:0px; right:0px; (gambar kanan bawah)
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#gambar_pojokan2 {
position:fixed;_position:absolute;top:0px; left:0px; (gambar kiri atas)
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
<div id="gambar_pojokan">
<a href="url blog kamu/">
<img src="url gambar 1" border="0" /></a> (kiri bawah)
</div>
<div id="gambar_pojokan1">
<a href="url blog kamu/">
<img src="url gambar 2" border="0" /></a> (kanan bawah)
</div>
<div id="gambar_pojokan2">
<a href="url blog kamu/">
<img src="url gambar 3" border="0" /></a> (kiri atas)
</div>
(Tulisan yang merah ga usah di copy cz itu cuma keterangan)
klik pratinjau atau langsung saved bila udah.
selamat berkarya...
Oct 11, 2011
Tips and Trik
Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.
Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.
Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :
Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.
Sumber:http://miscah.blogspot.com/2009/11/menampilkan-artikel-terkait-di-sidebar.html
Semoga menjadi referensi bagi bloger mania... terus berkarya....
AKTUAL NEWS ONLINE
5:16 AM
Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.
Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.
Safari 3.1 (Mac/Win) | yes, but no multiple shadows |
Safari 4 (Mac/Win) | yes, full support |
Opera 9.5 (Mac/Win/Lin) | yes, full support |
Firefox 2/3 (Mac/Win/Lin) | no |
Firefox 3.1/3.5 (Mac/Win/Lin) | yes, full support |
Google Chrome 1 (Win) | no |
Google Chrome 2 (Win) | yes, full support |
IE 7/8 (Win) | no |
Shiira (Mac) | yes, but no multiple shadows |
Safari on iPhone | yes, but no multiple shadows |
Opera Mini 4.1 | yes, no blur radius |
Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :
color: #000;
background: #fff;
text-shadow: 1px 1px 1px #424242;
- color : #000 adalah warna dasar tulisan
- background: #fff adalah warna latar
- 1px 1px 1px #424242 untuk warna bayangannya (shadow)
Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.
Semoga menjadi referensi bagi bloger mania... terus berkarya....
Oct 10, 2011
Tips and Trik
Mungkin Banyak juga bloger pemula yang artikel nya hasil COPAS oleh karena itu untuk antisipasi di copas dengan cara sumber penulisnya tidak di tulis. Ada solusinya yaitu dengan
Biasa kita memakai script dari tynt.com untuk menghindari COPASSER Tersebut tapi ini berbeda dan bukan dari tynt.com .
Langsung saja To teh ( kok teh puasa euy ) The Point
Langkah - langkah nya adalah :
Login Blogger Dengan Google Akun Anda
Jika sudah di dashboard Pergi Ke Rancangan » Edit HTML
Masukkan script berikut di bawah kode :
Setelah itu simpan template .
Selesai .
Jika anda melakukan langkah-langkah di atas dengan benar maka coba tes di blog anda copy artikel anda sendiri terus taruh di notepad apa yang terjadi ada url blog kamu di artikel tersebut pada bagian Bawahnya .
Sumber: http://kolom-tutorial.blogspot.com/2011/08/script-memberikan-judul-artikel-ketika.html
AKTUAL NEWS ONLINE
9:11 AM
Mungkin Banyak juga bloger pemula yang artikel nya hasil COPAS oleh karena itu untuk antisipasi di copas dengan cara sumber penulisnya tidak di tulis. Ada solusinya yaitu dengan
Biasa kita memakai script dari tynt.com untuk menghindari COPASSER Tersebut tapi ini berbeda dan bukan dari tynt.com .
Langsung saja To teh ( kok teh puasa euy ) The Point
Langkah - langkah nya adalah :
Login Blogger Dengan Google Akun Anda
Jika sudah di dashboard Pergi Ke Rancangan » Edit HTML
Masukkan script berikut di bawah kode :
<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br/><br/> Read more at:
<a href='"+document.location.href+"'>"+document.location.href+"</a><br/>
Copyright Fachrulakberr.blogspot.com Under Common Share Alike Atribution";
// change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>
Ganti url Rilexnet.blogspot.com pada script dengan url blog Kamu .
Setelah itu simpan template .
Selesai .
Jika anda melakukan langkah-langkah di atas dengan benar maka coba tes di blog anda copy artikel anda sendiri terus taruh di notepad apa yang terjadi ada url blog kamu di artikel tersebut pada bagian Bawahnya .
Sumber: http://kolom-tutorial.blogspot.com/2011/08/script-memberikan-judul-artikel-ketika.html
Oct 8, 2011
Tips and Trik
AKTUAL NEWS ONLINE
12:52 PM
Kemarin setelah mengganti salah satu domain dengan co.cc ada sedikit masalah yaitu tidak bisa di akses tanpa www. sempat bingung sih karena saya sudah kasih tanda cek pada tulisan "arahkan domain.co.cc ke www.domain.co.cc" tetapi masih tetap belum bisa diakses tanpa www. untung ada temanku yang tau permasalahannya ternyata mudah saja, jika kamu pernah mengalaminya bisa ikuti cara berikut!
- Langkah pertama, Kita harus mengetahui alamat IP Address blog tersebut, mudah saja bagi yang menggunakan OS Windows : klik menu Start >> klik Run >> ketik CMD dan tekan enter, maka jendela command promt akan muncul, setelah itu ketikkan "ping www.domainkamu.co.cc" dan tekan enter. contoh "ping www.usupblog.co.cc", lalu lihat nomor IP yang terdapat dalam kurung, itu adalah nomor IP Address blog kamu, copy atau dicatat.
- Di atas sudah di jelaskan
- Selanjutnya, login ke www.co.cc pilih domainyang hendak disetting.
- Klik SET UP dan pilih Zone Record.
- Isi HOST nya dengan nama domain yang sedang kamu setting, tapi tanpa menggunakan www, contoh "usupblog.co.cc"
- Pada kolom TTL pilih 1D.
- Pada kolom TYPE pilih A.
- Isikan VALUE dengan nomor IP Address blog kamu yang dicatat tadi.
- Terakhir, klik SET UP. selesai
sumber: http://u-sup.blogspot.com/2010/05/cara-setting-domain-cocc-agar-bisa.html
Tips and Trik
AKTUAL NEWS ONLINE
12:14 PM
Sebelum saya menunjukkan bagaimana cara membuat link saya jelaskan sedikit apa itu link? Menurut Wikipedia Link / tautan adalah
"Pranala/Tautan atau link (juga hyperlink) adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau sumber lain. Seperti halnya suatu kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan, nah itu secara pengertian menurut Wikipedia".
Maka hasilnya :
Link terbuka dihalaman baru / Link new window :
Cara 2
-Login ke blogger >>
-Klik Entri baru >>
-Pada saat anda posting artikel HighLigh atau block tulisan yang akan dijadikan sebuah link kemudian klik menu yang bertuliskan Link di bagian atas tab posting lihat gambar dibawah :
-Kemudian akan muncul seperti halaman dibawah ini.
Text to display : Teks yang ingin ditampilkan untuk bisa di klik contoh : "klik disini"
Link to : pilih saja web address dan isikan URL yang ingin ditautkan atau yang dijadikan sebuah link contoh: "www.google.com"
-Dan klik Ok!
-Sekarang klik Edit HTML untuk melihat kodenya!
-Jika sudah selesai jangan lupa klik Terbitkan Entri
-Login ke blogger
-Klik Rancangan
-Klik Tambah Gadget
-Kemudian cari dan klik tulisan Daftar Link
-Akan muncul form seperti gambar dibawah :
Judul : isikan terserah anda
Jumlah tautan yang akan diperlihatkan dalam daftar : Kosongkan saja
Menyortir : Silahkan pilih sesuka anda
URL Situs Baru : Isikan dengan URL yang akan dijadikan Link
Nama Situs Baru : Isikan teks link yang akan ditampilkan
Setiap memasukkan link jangan lupa klik "Tambahkan Tautan"
-Jika sudah selesai memasukkan link klik Simpan!
Sampai disitu cara membuat link sudah selesai untuk jenis-jenis lain membuat link akan saya ulas dipostingan yang berikutnya!
"Pranala/Tautan atau link (juga hyperlink) adalah sebuah acuan dalam dokumen hiperteks (hypertext) ke dokumen yang lain atau sumber lain. Seperti halnya suatu kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan, nah itu secara pengertian menurut Wikipedia".
Namun secara sederhana Link/tautan yaitu sebuah teks/gambar yang apabila di klik akan mengarahkan kita ke suatu halaman tertentu yang telah ditentukan, namun link juga bisa dibuat dengan menggunakan gambar, Link terbagi dalam berbagai macam jenis link diantaranya Link teks, Link gambar, Link window, Link popup dll, tapi disini saya akan menunjukkan cara membuat link yang sederhana yaitu link teks biasa!
Perhatikan dibawah ini :
Dalam contoh ini saya akan membuat sebuah link yang akan mengarahkan ke halaman blog halaman saya http://u-sup.blogspot.com tag yang digunakan untuk membuat sebuah link adalah <a untuk tag pembuka , dan untuk tag penutup adalah </a> kedua tag tersebut harus selalu ada pada awal dan akhir sebuah link!
-Login ke blogger >>
-Klik Entri baru >>
-Sekarang klik Edit HTML
-Masukkan kode seperti dibawah ini
Perhatikan dibawah ini :
Dalam contoh ini saya akan membuat sebuah link yang akan mengarahkan ke halaman blog halaman saya http://u-sup.blogspot.com tag yang digunakan untuk membuat sebuah link adalah <a untuk tag pembuka , dan untuk tag penutup adalah </a> kedua tag tersebut harus selalu ada pada awal dan akhir sebuah link!
*Membuat Link pada artikel/postingan
Cara 1-Login ke blogger >>
-Klik Entri baru >>
-Sekarang klik Edit HTML
-Masukkan kode seperti dibawah ini
<a href="http://Rilexnet.blogspot.com/">Blog tutorial</a>
Maka hasilnya :
Link terbuka dihalaman baru / Link new window :
Cara ini bisa anda lakukan apabila anda khawatir pengunjung pergi dari halaman blog anda jadi anda bisa menambahkan embel-embel target="new" atau target="_blank" maka jika diklik akan terbuka dihalaman baru dan halaman anda sebelumnya tidak akan tertutup, lihat dibawah ini!
<a href="http://Rilexnet.blogspot.com/" target="new" >Klik disini</a>
Teks Hijau : Kode tag HTML pembuka dan penutup untuk sebuah link
Teks merah : URL target link yang dikehendaki
Teks biru : Anchor teks "teks yang akan ditampilkan untuk dapat diklik" anda dapat membuat sesuka hati misalnya klik disini, masuk kesini dll"
Cara 2
-Login ke blogger >>
-Klik Entri baru >>
-Pada saat anda posting artikel HighLigh atau block tulisan yang akan dijadikan sebuah link kemudian klik menu yang bertuliskan Link di bagian atas tab posting lihat gambar dibawah :
-Kemudian akan muncul seperti halaman dibawah ini.
Text to display : Teks yang ingin ditampilkan untuk bisa di klik contoh : "klik disini"
Link to : pilih saja web address dan isikan URL yang ingin ditautkan atau yang dijadikan sebuah link contoh: "www.google.com"
-Dan klik Ok!
-Sekarang klik Edit HTML untuk melihat kodenya!
-Jika sudah selesai jangan lupa klik Terbitkan Entri
*Membuat Link di sidebar / Blogroll:
Caranya sama saja cuma perbedaannya pada bagian menunya saja ikuti langkah berikut!-Login ke blogger
-Klik Rancangan
-Klik Tambah Gadget
-Kemudian cari dan klik tulisan Daftar Link
-Akan muncul form seperti gambar dibawah :
Judul : isikan terserah anda
Jumlah tautan yang akan diperlihatkan dalam daftar : Kosongkan saja
Menyortir : Silahkan pilih sesuka anda
URL Situs Baru : Isikan dengan URL yang akan dijadikan Link
Nama Situs Baru : Isikan teks link yang akan ditampilkan
Setiap memasukkan link jangan lupa klik "Tambahkan Tautan"
-Jika sudah selesai memasukkan link klik Simpan!
Sampai disitu cara membuat link sudah selesai untuk jenis-jenis lain membuat link akan saya ulas dipostingan yang berikutnya!
Semoga bermanfaat...Sumber :http://u-sup.blogspot.com/2010/03/cara-membuat-link-tautan.html
Tips and Trik
AKTUAL NEWS ONLINE
12:05 PM
Sobat bloger mungkin salah satu penunjang untuk melancarkan dalam dunia bloger kita wajib dan harus untuk memberikan judul blog / Title blog yang cukup di kenal dan di ingat para bloger. Juga ada hal lain yang perlu di perhatikan Seperti Judul title blog terlalu panjang sehingga para pengunjung tidak mengingat nama blog karena terlalu panjang. timbul pertanyyan bagaimana cara merubah judul yang terlalu panjang ini dia caranya :
Nah untuk merubahnya kita mungkin perlu untuk memodifikasi sedikit berikut langkah-langkahnya :
Nah untuk merubahnya kita mungkin perlu untuk memodifikasi sedikit berikut langkah-langkahnya :
1. Login ke blogger
2. Klik Design atau Rancangan
3. Edit HTML dan jangan lupa beru tanda centang pada "expand widget"
4. Cari kode seperti dibawah ini
<title><data:blog.pageTitle/></title>
- biasanya berada di antara <head>
5. Jika sudah ketemu hapus dan ganti kode tersebut dengan kode dibawah ini!
<!-- Rilexnet.blogspot.com Start Changing the Blogger Title Tag -->
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<!-- End Changing the Blogger Title Tag -->
6. Dan simpan template kamu
Sekarang kamu sudah berhasil merubahnya yang lebih bersahabat dengan SEO
Moga sukses.....
Moga sukses.....
Tips and Trik
AKTUAL NEWS ONLINE
11:50 AM
Menyembunyikan widget tertentu pada halaman posting ini maksudnya widget tidak akan muncul pada halaman posting melainkan widget hanya akan muncul pada halaman utama saja, jadi trik ini juga dapat membantu meringankan loading halaman pada blog kamu. trus bagaimana untuk menyembunyikan widget pada halaman utama tutorialnya bisa dibaca disini :
2. Pilih Rancangan >> Edit HTML,
3. Carilah kode ]]></b:skin> kemudian letakkan kode berikut ini di bawah kode ]]></b:skin>
untuk mengetahui ID/kode widget ikuti cara dibawah ini:
5. Jika sudah Klik save template
Sekarang dicek dulu apakah widget sudah tersembunyi atau belum!
Adapun cara Menyembunyikan widget tertentu pada halaman posting dibawah ini :
1. Login dulu ke Account Blogspot.2. Pilih Rancangan >> Edit HTML,
3. Carilah kode ]]></b:skin> kemudian letakkan kode berikut ini di bawah kode ]]></b:skin>
<b:if cond='data:blog.pageType == "item"'>4. Rubahlah tulisan berwarna merah dengan ID widget yang mau disembunyikan pada halaman posting. perlu diketahui bahwa kode widget memiliki sifat yang unik!
<style>
#HTML1,#Feed1,#Label1,#HTML9,#Followers1 {display:none;}
</style>
</b:if>
untuk mengetahui ID/kode widget ikuti cara dibawah ini:
- Menuju ke Element Laman / tata letak
- Arahkan mouse pada tulisan "Edit" dan lihatlah URL dibagian bawah browser akan terlihat widget ID yang dimaksud kode bisa HTML1, HTML2, Label1, Feed1, Followers1 dan sebagainya. Lihat gambar dibawah ini!
5. Jika sudah Klik save template
Sekarang dicek dulu apakah widget sudah tersembunyi atau belum!
kalau belum di periksa lagi ada scrip yang tertinggal atau kelebihan...
Oct 6, 2011
Tips and Trik
AKTUAL NEWS ONLINE
3:45 AM
Mungkin anda suatu ketika melihat search box punya website orang lain dari yang lain tidka lain tidak membosankan untuk kotak yag satu ini menjadi syarat wajib para bloger. disini dengan berbagai sumber dari teman kita KODE BLOGER saya mengutipnya mudah-mudahan ada manfaat bagi teman-teman lainnya.
Search Box Simpel dan Keren Untuk Blogspot, dari judulnya saja sobat pasti sudah tahu apa yang kiranya akan saya share kali ini. Setelah kemarin saya posting tentang Cara Membuat Link Nudging Dengan jQuery, saya melanjutkan untuk melengkapi koleksi tips dan trik di blog saya ini. Search Box (kotak pencarian di blogspot) pastinya sobat sudah tidak asing lagi mendengarnya, jadi saya rasa tidak perlu panjang lebar saya menjelasakan kembali tentang apa dan fungsi dari Search Box/kotak pencarian di blogspot ini. Oia, dibilang simpel karena kita hanya menggunakan kode CSS saja dalam membuatnya, pastinya gak ribet deh.
Dan agar lebih jelasnya saya sertakan juga contoh demo/screenshot dibawah ini:
1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Page Element/Elemen Laman
4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini:
Sip... Search Box Simpel dan Keren Untuk Blogspot diatas hanyalah beberapa saja yang bisa saya share, pastinya ada lebih banyak lagi diluar sana.
Semoga Bermanfaat.
Sumber http://kode-blogger.blogspot.com/2011/08/search-box-simpel-dan-keren-untuk.html
Search Box Simpel dan Keren Untuk Blogspot, dari judulnya saja sobat pasti sudah tahu apa yang kiranya akan saya share kali ini. Setelah kemarin saya posting tentang Cara Membuat Link Nudging Dengan jQuery, saya melanjutkan untuk melengkapi koleksi tips dan trik di blog saya ini. Search Box (kotak pencarian di blogspot) pastinya sobat sudah tidak asing lagi mendengarnya, jadi saya rasa tidak perlu panjang lebar saya menjelasakan kembali tentang apa dan fungsi dari Search Box/kotak pencarian di blogspot ini. Oia, dibilang simpel karena kita hanya menggunakan kode CSS saja dalam membuatnya, pastinya gak ribet deh.
Dan agar lebih jelasnya saya sertakan juga contoh demo/screenshot dibawah ini:
Langsnung ke TKP, dan simak langkah-langkah cara membuat Search Box Simpel dan Keren Untuk Blogspot:
1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Page Element/Elemen Laman
4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini:
Style 1
><style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixs27s8eRyG5FavbG2sKzFKBsx36RPfPn0flKKdayF8adGnk_4yYETn90mZjbdOwYmaP1zI09f8rhLiFhIvcoLHAByqUvcsA4jF4qbTVTDvpVY8f2iwhCfQv1YwBRDTnFeKTqBZAgwVmE/s320/kode-blogger_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 2
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuGx3Pn4vypRvpurHyYZdhNPsaSzeIIN8CkijM_UxtGJh3V-CXi-MNFZQuZ-UworgBneFm-9GXbOY97-jwBTv3VWJ17MMY_l-Wyo2ygW1IxD4LWOWpklyRv486zrp-gxq4oXCqIltV04o/s1600/kode-blogger_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 3
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn4zMNwkQfeMn4S1-skMUlRi1nj44VGcEFUGAmSi39fVTxEQV4uOb4NfA9h5UFzZr8zguVd7K82FjUe1WftzPputeImZ1s30wz4viPgUH_mvurtvAPURVBWHj30WAilYJeZUdn86zyFfc/s1600/kode-blogger_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 4
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjxTxlr8N0PdBmmw5SZkZ67ONEsZMD3fn5hXmGBlKOlDN3iUvQBw9Kd_By2qICpJHKXrfRnnOM6XbX94-CiOvWCoHxSMNMqJ85ZMvhyphenhyphenmRuimUuzk_BFW0YkwCGxuLHbTRnkea6XJm58x0/s1600/kode-blogger_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 5
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUqD1hjQIdopttLO8oQlc2CXeJpP7MPZ3dTZ4kFnTRxvtgdy-P74MMZImGCGxQnLlCNgEKe1w-3GGTbTUTwiItQaa3XrDCFy7cuhMiXgzu4g5TED0toxXQ87VA65ZnZLf0XB0TBBLNg1o/s1600/kode-blogger_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 6
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOClcU_19Oyiu1kATVTfVDLYaSkD9xMgxqyoc2zldut_gQyxoeDbzAgSoo3zRUJIVCuIi89pDYG5DAMOMQkGtGWckQbohrdcrT-x10wcOQQPH7eQcbpah4kDHGLhb-j7QU4FxsAoxYt7Q/s1600/kode-blogger_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Sip... Search Box Simpel dan Keren Untuk Blogspot diatas hanyalah beberapa saja yang bisa saya share, pastinya ada lebih banyak lagi diluar sana.
Semoga Bermanfaat.
Sumber http://kode-blogger.blogspot.com/2011/08/search-box-simpel-dan-keren-untuk.html
Subscribe to:
Posts (Atom)