Membuat Text Box Dengan Efek Hover dengan CSS 3

Setelah beberapa hari gak posting karena baru pengisian jadwal baru untuk semester 4 yang merepotkan dikarenakan dalam masa transisi kurikulum baru dan Pada kesempatan kali ini saya akan posting mengenai Membuat Text Box Dengan Efek Hover dengan CSS 3 Ok ngak perlu panjang lebar langsung saja simak  Seperti biasa Login ke Akun Blogger sobat Klik Template >> Klik Edit HTML >> Jangan Lupa Centang Expand Widget Template >> Cari kode ]]></b:skin> dan letakan kode CSS dibawah...

Read more →

Cara Membuat Daftar Link Teman Berjalan

Login ke Blogger Pergi Ke Tata Letak  >> Tambah Gaget >> HTML/Java Script Copy Kode Di Bawah Ini lalu Pastekan ke kotak script yg tersedia. <marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="210"> <a href="URL Blog Teman" rel="dofollow">Link1</a> <br /><a href="URL Blog Teman" rel="dofollow">Link2</a> <br /><a href="URL Blog Teman" rel="dofollow">Link3</a> <br /><a href="URL Blog Teman"...

Read more →

Cara Mudah Membuat Gambar Berdampingan atau Sejajar di Blog

Bagi Kamu yang bingung bagaimana cara Membuat Gambar Berdampingan atau Sejajar di Blog? nah kali ini Saya akan share caranya. Membuat Gambar Berdampingan atau Sejajar di Blog sangat diperlukan di blog karena dapat mempercantik blog dan juga dapat menghemat ruang di blog, Kamu bisa menempatkan gambar tersebut di sidebar maupun diposting ataupun disebuah laman, dan Kamu juga bisa menempatkan sebuah widget berdampingan, seperti rank alexa blog Saya dan Histats Saya letaknya berdampingan atau sejajar. Untuk caranya ikuti tutorial dibawah...

Read more →

Berbagai kode Scrollbox untuk Posting

Pemanfaatan ruang posting mejadi satu faktor yang harus diperhatikan oleh blogger, terutama apabila posting artikel sangat panjang. Bentuk posting yang terlalu panjang selain tidak effektif dalam pemanfaatan halaman blog, dampak negatifnya adalah sering membuat pengunjung blog menjadi "malas" untuk melihat atau bahkan membaca hingga tuntas. Untuk mengatasi permasalahan seperti ini scrollbox menjadi satu solusi paling tepat. Sebenarnya scrollbox bisa dibuat dalam berbagai macam variasi, terutama berkaitan dengan imporovisasi warna, seperti halnya...

Read more →

Kolom Posting dg Background Transparan

Untuk menciptakan dinamisasi halaman blog, mungkin kolom/boks transparan bisa menjadi salah satu alternatif. Boks dengan effek transparansi mempunyai sebuah background image yang tertutup oleh background color transparan hingga background image tetap terlihat secara samar-samar. Anda bisa memanfaatkan boks dengan background-nya sebagai boks posting. Akan lebih cantik jika setiap materi posting disesuaikan dengan background image yang digunakan. Sebagai contoh saat anda menuliskan sebuah artikel tentang mobil maka yang ditampilkan sebagai...

Read more →

Show and Hide Image With Effect

This summary is not available. Please click here to view the po...

Read more →

Desember CSS Gallery Spesial

CSS Image Gallery didesain untuk memuat 10 buah image. Controll gallery berupa thumbnail serta button next dan previous. Untuk menampilkan setiap image dalam gallery dilakukan dengan meng-klik thumbnail contoll yang menampilkan 5 buah thumbnail dalam bentuk deret horizontal. Thumbnail controll sendiri sebenarnya berisikan 10 thumbnail, sehingga agar setiap thumbnail dapat terlihat maka pergeseran thumbnail dilakukan melalui button prev dan next. Kode CSS : #album{ width:750px; height:1025px; margin:0 auto; ...

Read more →

Buat box teks di ruang posting

Box teks di ruang posting bisa dipergunakan untuk tempat meletakkan teks yang bersifat khusus sehingga terpisah dari teks lainnya. Ada berbagai style box yang bisa disesuaikan dengan seberapa besar box yang ingin digunakan. Pada beberapa posting dengan teks yang sangat panjang, box yang dilengkapi dengan scroller juga sangat bermanfaat untuk effisiensi ruang. Agar box kelihatan lebih menarik, box bisa dilengkapi dengan border style, background dan border radius serta beberapa properi css yang lain. 1. Box sederhana : Tinggi box akan bertambah...

Read more →

Original Size Image on Mouseover

Tidak harus menggunakan javascript untuk menciptakan sebuah effect pada sebuah gambar atau photo. Original Size Image on Mouseover menjadi salah satu bukti penciptaan effect yang sangat menarik meskipun murni hanya menggunakan KODE CSS. Gambar atau photo akan ditampilkan dalam bentuk yang lebih kecil, namun ketika cursor menyentuhnya maka gambar dengan ukuran aslinya akan spontan ditampilkan di halaman blog. Penggunaan CSS yang yang relatif kecil ini tentu saja akan sangat bermanfaat kala diterapkan dalam blog karena loading menjadi relatif...

Read more →

Buat posting Image Cantik dg Border Radius

Gambar gambar di bawah ini hanyalah sebagian kecil dari begitu banyaknya kemungkinan lengkungan yang dapat dibuat. Silahkan anda kembangkan lagi menjadi benruk-bentuk lain yang jauh lebih menarik. Kode CSS: .GRphotoku{ padding:1%; background:#eee; box-shadow:0 0 6px #444; margin:15px auto; display:block; text-align:center; } Kode CSS di atas digunakan jika semua gambar akan diposisikan ditengah-tengah. Jika menginginkan posisi gambar lebih feksibel (bisa kanan, kiri & tengah) gunakan kode CSS yang ada...

Read more →

Buat Cursor Animasi ndul Gondal Gandul

Jika image cursor nggak cocock atau sesuai selera, silahkan ganti imagenya dengan mengganti URL image yang ada di javascript (lihat javascript di bawah!). Beberapa variabel juga bisa diatur untuk memperoleh bentuk paling ideal. Ya,... selera orang khan macam-macam. Ada yang suka kurus kecil hitam, ada yang suka kurus tinggi rambut warna pink dan ada pula yang suka badan tinggi besar plus suka kasih pukulan! He ... he ... iya, nggak?! Pengaturan dapat dilakukan pada ukuran cursor (image), jarak setiap image cursor, jumlah image cursor, efek...

Read more →

Cara Membuat Widget Recent Post Dengan Gambar .

Judulnya panjang yah. Tidak apa-apa yah. Biar lebih paham saja. Dan langsung melihat contohnya. Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial ini sebenarnya bertujuan untuk mempercantik blog saja. Biar terlihat rapi. Kalau kawan-kawan suka, boleh deh mencobanya. Inilah Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial 1. Buka akun blogger kawan sendiri 2. Masuk Elemen Tata Letak 3. Pilih Add Widget atau Tambah Gadget 4. Apabila kotak baru muncul lalu pilih HTML/Javascript 5. Copy atau salin kode script di bawah ini <div...

Read more →

Membuat/Menampilkan Related post (artikel Terkait)

Fungsi dari related posts adalah menampilkan artikel yang berkaitan yang ada dalam blog kita. Masih belum paham..? misalnya sobat memposting artikel dengan label ikan bandeng, blogger tutorial, desain blogger, atau apa aja deh maka jika pengunjung mengklik artikel kita yang misalnya berlabel tutorial blog maka akan muncul menu dibawah postingan kita yang menyajikan artikel-artikel yang berlabel tutorial blogger. Dibawah ini Priview tampilan dari related posts nya : Membuat/Menampilkan Related post (artikel Terkait) A.Kode...

Read more →

Cara Membuat Artikel Terkait Bergambar Bergeser di Bawah Postingan

Membuat Artikel Terkait / Related Post Dengan Thumbnail Bergeser Di Bawah Postingan Membuat Artikel Terkait atau Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya...

Read more →