Home Design and Ideas

Membuat variasi dalam blogger memang menyenangkan, salah satunya adalah membuat  Float Image ( gambar melayang ) dan teks pada Blogger. Sebenarnya caranya mudah dan sederhana, trik ini sudah banyak dimuat dalam banyak blog tapi tidak ada salahnya aku coba posting kembali agar blog ini infonya jadi lebih lengkap. Keuntungan dari trik ini kamu bisa pakai selain sebagai variasi juga sebagai media promosi karena bisa kamu isi dengan berbagai kode script advertise selain image dan teks. Langkah selanjutnya Klik Page Element Klik Add Gadget   Klik plus button (+) for HTML/JavaScript. (img) Copy and paste kode dibawah ini <style type="text/css"> #gb{ position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;} } * html #gb{position:relative;} .gbcontent{ float:right; border:0px solid red; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/animation/indonesIAFLAG.gif) no-repeat ; p...

Script effek Neon Boks ( menyala ) pada teks merupakan kode HTML yang berfungsi untuk membuat teks menyala secara bertahap dengan warna tertentu, penggunaan cara ini cukup mudah dan sederhana. Langkah pertama Klik Page Element Klik Add Gadget   Klik plus button (+) for HTML/JavaScript. (img) Copy and paste kode dibawah ini <h3> <script language="JavaScript1.2"> var message=" Selamat Datang " var neonbasecolor=" black " var neontextcolor=" yellow " var flashspeed= 50 //in milliseconds ///No need to edit below this line///// var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>') } else document.write(...

Menu horizontal/vertikal memang dibutuhkan karena bisa membuat blog kamu menjadi tampak lebih proffesional dan salah satu alternatif dimana kamu bisa menghemat tempat dengan menampilkan label atau link URL kamu sesuai dengan tema / label blog kamu. Disini kamu bisa membuat menu dengan langkah sederhana dan sudah tentu hasilnya juga sederhana, tapi dengan sedikit kreativitas kamu bisa membuat menu ini jadi tampil lebih bagus. Nah..! kalau kamu pingin ikuti langkah2 berikut : Langkah Pertama Login ke akun Blogger kamu. Dari halaman dashboard , pilih Edit HTML . Pada halaman Edit HTML , cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya. Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.. /* Menu Horizontal ----------------------------------------------- */ .menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;} .menuhorisontal ul{margin:0; padding:0; padding...

Permasalahan yang paling banyak terjadi pada Blogger adalah penggunaan widget yang cukup banyak sehingga loading menjadi berat dan blog menjadi penuh baik berupa scrip atau image. Untuk itu ada cara untuk mengatasi hal tersebut yaitu :   Dengan cara mengatur widget agar sebagian tampil pada halaman utama dan sebagian pada sub halaman . Kita langsung ke TKP saja biar jelas Langkah Pertama Login ke akun Blogger kamu. Dari halaman dashboard, pilih Edit HTML. Pada halaman Edit HTML, centang "Expand Template Widget", cari kode bawah ini <b:widget id='HTML17' locked='false' title=' My favorite ' type='HTML'> <b:includable id='main'> Kode 1 sisipkan di sini   <!-- only display title if it's non-empty -->   <b:if cond='data:title != &quot;&quot;'>     <h2 class='title'><data:title/></h2>   </b:if>   <div class='widget-content'>     <data:co...

Marquee merupakan kode HTML yang berfungsi untuk membuat teks berjalan, penggunaan cara ini cukup mudah dan sederhana. Langkah pertama Klik Page Element Klik Add Gadget   Klik plus button (+) for HTML/JavaScript. (img) Copy and paste kode dibawah ini Kode Script 1 bergerak ke arah kanan <MARQUEE align="center" direction="right" height="50" scrollamount="2" width="100%">ISI TEKS KAMU</MARQUEE> Hasilnya : ISI TEKS KAMU Kode Script 2 bergerak ke arah kiri <MARQUEE align="center" direction="left" height="50" scrollamount="2" width="100%">ISI TEKS KAMU</MARQUEE> Hasilnya : ISI TEKS KAMU Kode Script 3 bergerak ke arah kanan dan kiri bolak Balik <MARQUEE align="center" direction="left" height="50" scrollamount="2" width="100%" behavior="alternate...

Kadang kita ingin menambah tampilan blog kita tapi kolom widget yang ada kurang sesuai dengan keinginan kita, ada 2 cara untuk mengatasi hal ini : Mengganti Template yang lebih sesuai Menambah Kolom widget Berikut trik blogger menambah widget kolom Langkah Pertama Login ke akun Blogger kamu. Dari halaman dashboard , pilih Edit HTML . Pada halaman Edit HTML , centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya. Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.. Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula. Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. M...

Tukar link adalah salah satu sarana agar blog kita bisa cepat dapat dikenal dan juga sebagai sarana menjalin komunikasi serta persahabatan antara sesama blogger. kita akan membahas gimana caranya bisa punya blog dengan link exhange yang keren, seperti di blog punya -ku ini, keren khan... Nah..! saya kira kita langsung ke TKP biar tidak bingung.   Ikuti langkah berikut untuk lebih jelasnya : Dari halaman Dashboard blog kamu pilih Tata Letak (Layout). Setelah masuk ke Elemen Halaman, klik Tambah Gadget. Setelah itu pilih HTML/JavaScript. Masukan kode script berikut :  <h>Tukar Link dan Promosi Website</h> <div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; background: transparent url(http://lh4.ggpht.com/_wC8_9aR_6uE/Sq_Qzv061nI/AAAAAAAABU4/CP87mCZ0DZA/s128/SLEEPING%20KOALA.jpg) no-repeat scroll center; font-size: 80%; padding: 10px; text-align: justify;"> <h class=...

Cara Membuat background untuk posting kode html telah kita bahas beberapa waktu yang lalu, kebetulan ada teman blogger S D A yang bertanya  gimana kalau backgroundnya berupa gambar.. ? sekarang saya akan coba bahas mengenai cara membuat posting dengan variasi background salah satunya adalah dengan backgroud gambar, seperti contohnya dibawah ini : <div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background: transparent url(http://lh4.ggpht.com/_wC8_9aR_6uE/SpqssB0hGEI/AAAAAAAABOI/7DSe25HalOg/Superb%20Fairy-wren3.jpg) no-repeat scroll center; border: 0px solid rgb(204, 204, 204); height: 500px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: center; width: auto;"> ISI POSTING ( KODE HTML / NON HTML ) </div> Cara ...

Membuat posting dengan menarik adalah salah satu cara untuk membuat blog kita banyak di kunjungi, tapi tentu harus dengan isi posting yang menarik dan berkualitas serta berisi hal - hal yang populer, informatif, singkat, padat, jelas, sesuai dengan tema yang kamu punya. Posting kali ini atas pertanyaan teman blogger mengenai cara bikin background untuk posting kode html, seperti contohnya dibawah ini : <div style="-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-color: #ddf2fc; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: left ; width: auto;"> KODE HTML KAMU / ISI POSTING YANG LAIN </div> Cara membuat tampilan posting diatas sebenarnya cukup mudah dan sederhana. Kalau kamu pingin kamu tinggal copy paste kode di atas pada posting kamu. Ikuti langkah berikut untuk lebih jelasnya : Dar...

Ingin mengganti warna blog dengan warna yang kita inginkan, tentunya tidak sulit tinggal kita memasukkan kode warna yang kita inginkan. Unsur warna bukan hanya dilakukan pada background blog tetapi lebih banyak lagi fungsi serta manfaat lain yang bisa kamu eksplorasi, seperti : pewarnaan teks, background, pewarnaan link, highlight, dan sebagainya Tapi karena saking banyaknya kode yang ada tentu kita kesulitan untuk menghafalkan ( kalau bisa berarti kamu "JENIUS"...), namun bagaimana kalau menggunakan alat bantu. Cara kerjanya kamu tinggal meng-klik warna, kemudian kode-nya akan muncul. Dan langkah selanjutnya tinggal copas kode tersebut dalam kode HTML blog kamu Dengan HTML color codes kamu bisa merubah background, warna text, dll berikut contoh penggunaan HTML color codes untuk background color : <body style="background:#80BFFF" > HTML color codes utuk setting font/text color : <span > HTML color codes untuk table background color...

Bagaimana bila k ita ingin menampilkan kode HTML dalam posting ?. Menampilkan kode HTML dalam postingan tidak seperti menulis kode biasa. Jika dalam postingan kamu memasukkan kode originalnya, maka yang tampil dalam postingan adalah hasil terjemahan bahasa HTML dari kode tersebut. Untuk menampilkan kode HTML dalam posting ada 2 cara :   Pertama : cara manual, yaitu merubah karakter-karakter kode tertentu. Mari kita lihat karakter-karakter yang perlu diganti : Kode Ganti Kode dengan < &lt; > &gt; " &quot;     Kedua :  Memparse kode HTML yang akan kamu masukkan dengan menggunakan layanan situs online Centricle.com (http://www.centricle.com/tools/html-entities) Masukkan kode yang akan kamu parse, kemudian tekan "Encode" atau jika ingin mengembalikan ke kode semula tekan "Decode". Copy paste kode hasil Encode yang telah ada ke posting kamu Blogcrowds (http://www.blogcrowds.com/resources/parse_html.php) Masukkan kode yang akan ...

Read more merupakan salah satu cara agar kita dapat membuat variasi posting dengan tidak menampilkan secara keseluruhan tapi hanya sebagian sehingga bisa lebih hemat tempat dan menarik. Berikut langkah yang harus dilakukan : Login ke account blogger kamu. Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget". Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula. Login ke blogger.com Klik Tata Letak --> Edit HTML. Copy kode di bawah ini dan paste di atas kode </head> <script type='text/javascript'> var thumbnail_mode = " float " ; summary_noimg = 450 ; summary_img = 450 ; img_thumb_height = 120 ; img_thumb_width = 120 ; </script> ...

Favicon adalah kependekan dari Favorites icon, di website wikipedia Favicon diterjemahkan sebagai an icon associated with a particular website or webpage atau bahasa Indonesia kurang lebih adalah sebuah icon yang mewakili dari wajah web tersebut. Favicon dapat ditampilkan pada Internet Explorer, Mozilla, Opera dan biasanya nampak pada Address Bar. Saat kita Bookmarks suatu web, Favicon dapat mewakili karakter dari web tersebut. Icon dapat dibuat dari bagian web tersebut atau membuat sendiri dengan bentuk lambang atau logo yang bisa mewakili web tersebut. Berikut ini adalah cara membuat, dan memasukkan Favicon ke web anda. Pertama pastikan dulu Icon/Image mana yang akan anda jadikan Favicon, usahakan membuat Icon sekecil mungkin, sedetail dan sejelas mungkin, Ini berguna saat icon tersebut di generate agar sesuai hasilnya dengan yang anda harapkan. Sedangkan cara memasang favicon di blogger.com adalah sebagai berikut : Login ke blogger.com Klik Tata Letak --> Edit HTML. Co...

Bila kita ingin bertukar link atau banner tentu kita harus punya kode script, teks area ini adalah salah satu yang biasanya dipakai untuk mempermudah apabila kita ingin menempatkan kode script baik link / banner / lainnya ada beberapa jenis teks area yang bisa kita gunakan. Sekarang kita akan mencoba membuat beberapa jenis teks area yang bisa kita lakukan... Pembuatan teks area standar / default <kode script="contohtextarea"> <textarea rows="5" cols="25" style="display: inline;" name="txt"> Text/Script Anda Disini </textarea> </contohtextarea> rows = tinggi cols = lebar Hasilnya akan nampak seperti dibawah ini   Text/Script Anda Disini Pembuatan text area dengan button / tombol higtlight Untuk yang ini, adalah memudahkan pengunjung blog anda untuk memberi tanda hightlight <kode script="contohtextarea"> <center><form name="copy"><input value="Klik Tandai" o...