Showing posts with label HTML-CSS Tricks. Show all posts
Showing posts with label HTML-CSS Tricks. Show all posts

Tuesday, July 21, 2015

Menambahkan & Menampilkan Snippet Twitter Cards Untuk Blogger




Twitter Cards diperkenalkan Twitter di Awal 2012 lalu. Sudah banyak yang menggunakan sehingga banyak pula yang mendapatkan keuntungan dari Twitter Cards ini. Memahami Twitter Cards hampir sama dengan memahami Schema yang selama ini kita gunakan untuk mengoptimasi tampilan snippet konten di search engine (rich snippets). Sosial media lain seperti Facebook dan Google+ misalnya, telah lebih dulu

Monday, January 12, 2015

Cara Menggunakan Font Awesome Icons di Blogger






Trend desain website dan blog terus berkembang. Di antaranya trend flat design, yang mensyaratkan sebuah website/blog tampil secara elegan tanpa elemen yang menonjol dan berjejal. Website yang biasanya dihiasi dengan berbagai gambar ikon juga beralih ke penggunaan ikon berbasis font, sebut saja Glyphicons, Foundation Icon Fonts, IcoMoon, Fontello, dll. Yang terakhir, yang lagi ngetrend: Font

Friday, December 19, 2014

Menyembunyikan Elemen dengan CSS yang SEO Friendly






I'm back, sobat. Sudah sekian lama blog ini tidak diupdate dengan artikel-artikel bermanfaat. Jadi sekarang saatnya saya sedikit berbagi hal kecil, tapi berefek besar, khususnya bagi perkembangan SEO blog sobat.



Seperti umumnya diketahui, kita bisa menyembunyikan elemen dengan bantuan CSS, dan bahkan javascript. Tujuannya adalah agar suatu elemen tertentu, misalnya yang dinaungi oleh

Friday, February 21, 2014

Cara Menambahkan Syntax Highlighter di Blogger





Syntax Highlighter cukup dikenal oleh berbagai platform, misalnya WordPress, Apache, Mozilla, Yahoo, Aptana, dan banyak lainnya. Apa itu Syntax Highlighter? Kita para blogger seringkali berbagi script/kode untuk blogger atau siapapun yang membutuhkannya untuk pengembangan web/blog. Kebanyakan dari kita menggunakan blockquote sebagai "wadah" dari script/kode tersebut dan menandai dengan

Wednesday, January 22, 2014

Cara Membuat Auto ReadMore (Thumbnails) Blogger V2 + Button (Updated 2014)







Ini adalah post lama yang saya update kembali dan saya sesuaikan dengan beberapa hal, terutama masalah editing template yang berbeda dengan template lama. Selain itu, masih banyak sobat blogger yang menyimak cara membuat auto readmore versi satu yang kurang sempurna, dan artikel ini sebenarnya adalah penyempurnaannya, tapi mungkin karena artikel ini masih kalah di pencarian SE (di bawah

Monday, January 13, 2014

Cara Memasang Facebook Comment Box di Blogger (XFBML/HTML5)




Ada banyak sobat Blogger yang bertanya mengenai bagaimana menambahkan widget Facebook Comment Box di Blogger. Sebenarnya ada banyak tutorial yang sudah membahas ini. Tapi jika memang dibutuhkan yang lebih detil, dalam kesempatan ini saya akan coba bicarakan tentang itu. :)






LiveDemo
komentar



Perlu diketahui karena sama sekali belum ada plugin Comment Box siap pasang untuk Blogger (

Thursday, January 9, 2014

Pasang Blogger Contact Form di Halaman Statis dan Kostumisasi Dasarnya


Sudah cukup lama sejak Blogger resmi merilis Contact Form untuk pengguna platform Blogger. Fitur ini berupa widget/gadget. Sayangnya, widget ini jarang nongol di blog-blog pengguna Blogger. Sebagian besar masih mengandalkan layanan contact form gratis yang tersedia di jagat web. Mungkin karena fitur-fiturnya lebih canggih, dan, yang pasti, banyak yang tidak ingin menyediakan contact form dalam

Wednesday, October 23, 2013

Cara Membuat Tabel HTML via MS Word & Memindahkan ke Posting Blog







Membuat tabel dalam format HTML memang gampang-gampang susah. Selain dibutuhkan ketelitian saat membuatnya secara manual, juga perlu perhatian lebih terhadap desainnya. Dulu, lebih dari 2 tahun yang lalu, saya pernah menyajikan tips membuat tabel HTML mudah di blog menggunakan online tool untuk mempermudah proses penyusunan tabel. Tapi dalam hal desain (layout, CSS), butuh usaha ekstra

Thursday, October 17, 2013

5 Situs Terbaik untuk Belajar HTML & CSS Bagi Blogger Pemula




HTML intinya adalah elemen/struktur web, dan CSS adalah "penghias" serta penyusun layout hingga sebuah halaman web memiliki interface yang unik dan indah. Jika anda adalah blogger pemula, baik dalam konteks baru saja membangun blog, atau bagi anda yang mulai risih dengan berbagai kode-kode yang belum dimengerti padahal harus berurusan dengan utak-atik template, inilah saatnya anda mulai

Wednesday, July 31, 2013

Membuat Tampilan Iklan Google Adsense Responsif (CSS Media Queries)




Masih bicara masalah responsive nih, ceritanya. Karena sekarang sudah jamannya responsif, maka Google akhirnya secara resmi mengeluarkan satu fitur baru lagi sebagai salah satu opsi/pilihan kode yang bisa di set di dashboard Google Adsense. Beberapa waktu lalu, Google meluncurkan asynchronous code untuk memperbaiki performa website yang menampilkan iklan Adsense, iklan tampil lebih cepat dan

Sunday, July 21, 2013

Cara Membuat Facebook Comment Box & Like Box Responsif




Halo sobat semua, rasanya seperti sudah bertahun-tahun tidak update buka-rahasia.blogspot.com. Yah, memang alasannya cukup klise, kesibukan dunia offline, tapi memang itu kenyataannya. :) Bahkan untuk approve dan menjawab ribuan komentar baru pun belum bisa dilakukan sepenuhnya. Jadi buat anda yang komentarnya belum diterbitkan dan dijawab - khususnya komentar penting yang berisi pertanyaan

Monday, June 10, 2013

Tentang rel="nofollow" dan Salah Kaprah rel="dofollow"




Salah satu elemen HTML yang paling banyak memiliki atribut adalah tag a (). Dua tahun yang lalu saya pernah menyinggung sedikit beberapa atribut link di dalam HTML Link dan Atribut-atribut Pentingnya. Selain atribut-atribut esensial seperti href, title, target, dan rel, ada  atribut lain, yang juga bisa digunakan di berbagai tag HTML, seperti id, class, dan style (untuk menyatakan CSS/

Wednesday, February 20, 2013

Cara Menyembunyikan Pesan Status di Halaman Label/Search Blogger




Selamat malam, pagi, siang dan sore buat yang baca. :) Artikel ini adalah post request oleh seorang sobat Blogger yang ingin sekali menghapus, menghilangkan atau menyembunyikan pesan status (status message) yang biasanya muncul di atas halaman label blog atau halaman hasil pencarian Blogger. Istilah dari Blogger nih, "Status Message Bar". Mungkin memang tampak kurang elegan dan menarik apabila

Monday, February 11, 2013

Tutorial Bidvertiser: Cara Buat Template dan Pasang Iklan di Blogger






Jauh, sekitar 2 tahun yang lalu, saya pernah membahas tentang mendapatkan uang dari blog melalui Bidvertiser, sebuah network iklan PPC alternatif Adsense yang cukup banyak digunakan juga oleh Blogger Indonesia. Meskipun nilai klik jauh lebih kecil dari Adsense, namun saya sudah 3 kali merasakan payout dari jaringan iklan global ini. Lumayanlah buat biaya hosting blog-blog saya dan juga buat

Friday, February 1, 2013

Cara Memasang Facebook Activity Feed Widget di Blogger


Background Tips



Jika sebuah widget blog bermanfaat besar dalam meningkatkan jumlah pageview sehingga jumlah traffic semakin naik, apakah anda akan menolak memasangnya? :) Tentu tidak. Tidak ada orang yang tidak memiliki akun Facebook (mungkin ada ya, tapi kecil), sehingga seluruh plugin Facebook memiliki fungsi besar dalam menampilkan hal-hal yang personalized di dalam blog. Dengan demikian,

Friday, November 9, 2012

Nofollow-kan Comment Permalink Blogger Agar Tidak Diindeks Google




Hi, all. Let's talk about Blogger SEO again. :), and today let me talk about Blogger Comment Permalinks, how it affects your SEO, and how to resolve the SEO problem caused by them.




Background


Dalam template blogger, ada satu tag yang digunakan sebagai generator dari permalink comment, sehingga masing-masing komentar blog sebenarnya memiliki permalink unik yang apabila di-klik akan

Monday, October 15, 2012

Tambahkan Widget AddThis Sharing Buttons Terbaru di Blogmu!




Sobat mungkin sudah tahu dan menggunakan AddThis Sharing Buttons yang cukup terkenal ini. Google Pagerank-nya saja 10, dan Alexa Ranknya sekitar 158 (apa hubungannya ya?). AddThis Social Sharing buttons (begitu nama lengkapnya :)) adalah widget penting bagi para blogger dan webmaster. Alat ini tidak saja menyediakan berbagai macam sharing buttons milik berbagai macam social media, tapi juga

Friday, October 5, 2012

Cara Menampilkan Widget Hanya di Homepage/Halaman Posting



Ketika melakukan setting desain blog, terkadang kita terkendala dengan banyaknya widget yang ditampilkan, sehingga widget tampak berdesakan dan halaman menjadi begitu panjang. Dalam kasus lain lagi, terkadang kita hanya ingin widget tertentu hanya muncul di halaman spesifik, baik homepage, halaman statis, maupun halaman posting saja. Dulu saya pernah berbicara mengenai bagaimana menyembunyikan

Friday, June 8, 2012

Cara Membuat Kotak Permalink di Bawah Posting Blog




Halo sobat! Setelah agak lama tidak share tips-trik blogger di blog ini karena persentase fokus lebih besar untuk mengembangkan tautweb.com, di posting ini saya membagi lagi satu widget/elemen fungsional untuk posting blog.



Sudah pernah melihat kotak permalink, bukan? Salah satu elemen blog yang berfungsi untuk memberikan kemudahan bagi blog/web lain membuat tautan/linkback ke salah satu

Monday, April 23, 2012

Cara Pasang Widget Sharing Is Caring/Sexy di Blogger




Share posting ke beberapa social bookmark maupun social media lain merupakan hal penting untuk promosi blog dan artikel blog. Menyediakan tool untuk pengunjung agar lebih mudah melakukan sharing membuat mereka mudah melakukannya. Salah satu bookmarking widget yang cukup menjadi favorit adalah "Sharing is caring/sexy bookmarking widget", karena tampak atraktif dan animatif sehingga dapat