Pasang Dropdown Menu v.1 di Blogger

Dropdown menu hampir mirip dengan horizontal menu. Cuma kalau dropdown menu, menunya tidak cuma satu baris, tapi ada juga menu yang menurun. Nah, jika ada menu yang menurun, itu disebut dropdown menu. Secara jenis kode penyusunnya, dropdown menu ada yang dibuat dengan javascript, jQuery, dan CSS. Dropdown menu yang dibuat menggunakan CSS biasanya dibuat menggunakan css3, karena dapat ditambahkan animasi, gradiasi warna, transisi, dll.

Nah, dropdown menu yang kali ini bakal kita pasang dibuat dengan css. Dropdown menu ini ada dua tema warna. Ada merah hitam dan merah abu-abu. Kedua tema warna tersebut sangat bagus. Anda tinggal memilih mana yang lebih bagus menurut anda antara kedua tema warna dropdown menu tersebut.

Preview

Merah Hitam    Merah Abu-Abu

Instalasi Widget

Dropdown Menu Merah Abu-Abu

Dropdown Menu Merah Hitam

Mengedit Link

<a href="#"><span>About</span></a>

• Kode yang diberi warna merah adalah link dari menu.
• Kode yang diberi warna ungu adalah teks yang muncul di menu.

Semoga bermanfaat, salam blogger!

Read More

Menaruh Polling di Postingan

Polling merupakan media untuk mengambil suara dari pembaca. Polling menyuruh pembaca untuk menjawab pertanyaan yang ditanya oleh penulis blog melalui polling. Polling dapat berbentuk pertanyaan tentang keindahan, kerapihan, kegunaan, dan lainnya.

Contoh pertanyaannya adalah apakah artikel ini membantu anda?. Jawaban dari pertanyaan itu beragam, pembaca hanya memilih salahsatu jawaban dari berbagai jawaban dan men-submitnya. Seperti kita menjawab soal pilihan ganda saat ujian, jika sudah selesai, maka kita memberikan kertas ujian kita ke guru kita. Tidak lain tujuan penulis blog membuat polling adalah untuk mengumpulkan pendapat.

Sebagian bloggers bertanya, "Apakah polling bisa ditaruh dipostingan?". Karena pada dasarnya, polling blogger hanya dapat ditaruh di bagian kolom widget saja, sedangkan belum ada fitur untuk memasang polling di postingan blog. Oleh karena itu, saya ingin mengajarkan kepada anda bagaimana cara menaruh polling blogger di postingan blog kita!

Live Preview Original Tutorial

Menambahkan Gadget Polling

1. Login ke akun Blogger anda masing-masing. Lalu masuk ke Dasbor > Tata Letak > Add Gadget. Saat muncul window baru, pilih gadget Polling. Klik tanda + (plus) yang ada disamping pojok atas.

3. Isi judul polling beserta daftar jawabannya. 
4. Klik Simpan, sehingga tampilan editor seperti ini.

5. Berikut merupakan lebih detailnya. 

Tampilan Polling pada Sidebar

Mengambil Kode Iframe dari Polling

1. Pastikan sebelum memasuki langkah kedua dalam mengambil kode iframe ini, anda sudah dapat melihat widget polling di blog anda terpasang seperti pada gambar diatas.

Klik View Source (Chrome)

2. Klik kanan, lalu pilih View Source (pada google chrome). Untuk pengguna browser selain Google Chrome, lakukan prosedur seperti yang sudah dijelaskan dibawah ini :

• IE : View > Source
• Firefox dan Netscape : CTRL + U / View > Page Source
• Opera : View > Source / CTRL + F3

3. Setelah terbuka halaman source, tekan CTRL+F. Jika tidak bisa, coba anda cari di internet bagaimana cara mencari kata pada browser yang anda gunakan, karena fungsi ctrl+f disini adalah untuk mencari kata.

4. Untuk pengguna Google Chrome, akan muncul kotak pencarian dibagian kanan pojok atas. Ketik judul polling anda pada kotak pencarian.

5. Kemudian, jika browser berhasil menemukan judul polling anda, maka judul polling anda akan terhighlight seperti pada gambar.

6. Disekitar judul polling anda, akan ada kode yang dimulai dari <iframe> dan diakhiri dengan </iframe>. Nah, itu yang disebut kode iframe dari polling. Lalu Copy kode tersebut.

Menaruh di Postingan

1. Masuk ke Dasbor > Posting > Tambahkan Posting (atau mirip)

2. Klik tab HTML, lalu paste kode yang sudah dicopy tadi.

3. Tambahkan kode <br/><h3>Apakah artikel ini membantu anda?</h3> tepat sebelum kode iframe polling. Ganti kode yang berwarna oranye dengan judul polling anda.

4. Klik Publikasikan.

Jika anda telah memasang polling di postingan, hapus widget polling yang di sidebar. Karena polling yang di sidebar tidak akan bekerja apabila polling yang di sidebar dan di postingan sama.

Gimana? Berhasil kan? Kalau anda ada masalah atau kesulitan silahkan bertanya di bagian komentar. Mohon maaf apabila ada kesalahan, jika ada kesalahan, anda juga dapat menyampaikannya di bagian komentar. Secepatnya akan saya update artikel ini. 

Read More

bMinify : Tool Baru "Meminimalkan" Kode CSS

Terinspirasi dari tools-tools di website yaitu css compressor dan css minify. Fungsi css minify untuk mengecilkan ukuran css itu sehingga tidak terlalu besar. Selain itu juga dapat melindungi style (css) blog anda dari cloner (penjiplak template). Kalau saya lihat css compressor lebih banyak mengkompres ukuran css dibanding menggunakan minify. Karena css compressor ikut serta mengoptimiskan kode css yang anda kompres. CSS Minify hanya menghilangkan spasi dan line break yang tidak penting.

Tool ini merupakan tool simpel. Cara kerja tool ini adalah menghilangkan line break. Saya teliti lumayan bisa menghemat ukuran file css hingga 100 kb bahkan lebih, tergantung berapa kilo byte(s) ukuran file css anda. Walaupun cara kerjanya simpel, tapi saya harap tool ini dapat membantu anda.

Penggunaan

1. Masukkan kode yang akan di minimal-kan.
2. Klik tombol Minify 
3. Klik Select All untuk menyeleksi kode, dan Clear All untuk menghapus.

Read More

Mini Social Icon Dengan CSS Sprite

Baru blogwalking ke blog-blog lain. Kali ini yang saya kunjungi adalah blog Spiceupyourblog. Tahu kan blog spiceupyourblog? Pasti kalau anda penggemar Google dan suka googling, sengaja tidak sengaja pasti anda menemukan spiceupyourblog dalam list google search. Nah, lagi kunjungan tidak sengaja menemukan widget mini social icon ini. Mini social icon ini menggunakan teknik CSS Sprite.

Apa sih CSS Sprite? Jadi CSS Sprite itu adalah suatu teknik dalam dunia CSS yang menggunakan satu gambar saja untuk menciptakan efek hover. Menggunakan teknik ini, membuat loading blog anda lebih cepat dan efeknya lebih smooth. Teknik ini memainkan atribut background-position pada pseudo class :hover. Tetapi bukan berarti hanya background-position saja yang anda tulis. Anda juga dapat menambahkan kode CSS lainnya, namun dasarnya hanya menggunakan background-position saja.

Live Demo

Menambahkan Widget 

1. Login ke akun Blogger anda.

2. Masuk ke Dasbor > Tata Letak > Add Gadget (anda dapat meletakkan pada sidebar, footer, dll.)

3. Pilih HTML/Javascript.

4. Isi dengan kode dibawah ini : 

<ul class="social-sprite">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.social-sprite{float:right}ul.social-sprite li{float:left;list-style:none outside none;border:0}ul.social-sprite li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8VljJ3vseY3PKTFVhhxW7OFxnPumiGSgSnwHfyw-Akl_NYjLca1ztDYH8b0qr_Fz0BfqFedzspoLdsVysfPuDAiliR7IRE_R2VC0N4d1l7PDqIffHsiLDHQJWEFjnDxTjKfaIKkNIr0rZ/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:#fff;direction:ltr;display:block;height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all .2s ease 0s;width:32px}.ie7 ul.social-sprite li a,.ie8 ul.social-sprite li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8VljJ3vseY3PKTFVhhxW7OFxnPumiGSgSnwHfyw-Akl_NYjLca1ztDYH8b0qr_Fz0BfqFedzspoLdsVysfPuDAiliR7IRE_R2VC0N4d1l7PDqIffHsiLDHQJWEFjnDxTjKfaIKkNIr0rZ/s1600/spice-social-gadget-sprite.png' )}ul.social-sprite li.facebook a{background-position:0 0}ul.social-sprite li.flickr a{background-position:-32px 0}ul.social-sprite li.dribbble a{background-position:-64px 0}ul.social-sprite li.googleplus a{background-position:-96px 0}ul.social-sprite li.linkedin a{background-position:-128px 0}ul.social-sprite li.pinterest a{background-position:-160px 0}ul.social-sprite li.rss a{background-position:-192px 0}ul.social-sprite li.skype a{background-position:-224px 0}ul.social-sprite li.twitter a{background-position:-256px 0}ul.social-sprite li.vimeo a{background-position:-288px 0}ul.social-sprite li.youtube a{background-position:-320px 0}ul.social-sprite li.facebook a:hover,#sidebar ul.social-sprite li.facebook a:hover{background-position:0 -32px}ul.social-sprite li.flickr a:hover,#sidebar ul.social-sprite li.flickr a:hover{background-position:-32px -32px}ul.social-sprite li.dribbble a:hover,#sidebar ul.social-sprite li.dribbble a:hover{background-position:-64px -32px}ul.social-sprite li.googleplus a:hover,#sidebar ul.social-sprite li.googleplus a:hover{background-position:-96px -32px}ul.social-sprite li.linkedin a:hover,#sidebar ul.social-sprite li.linkedin a:hover{background-position:-128px -32px}ul.social-sprite li.pinterest a:hover,#sidebar ul.social-sprite li.pinterest a:hover{background-position:-160px -32px}ul.social-sprite li.rss a:hover,#sidebar ul.social-sprite li.rss a:hover{background-position:-192px -32px}ul.social-sprite li.skype a:hover,#sidebar ul.social-sprite li.skype a:hover{background-position:-224px -32px}ul.social-sprite li.twitter a:hover,#sidebar ul.social-sprite li.twitter a:hover{background-position:-256px -32px}ul.social-sprite li.vimeo a:hover,#sidebar ul.social-sprite li.vimeo a:hover{background-position:-288px -32px}ul.social-sprite li.youtube a:hover,#sidebar ul.social-sprite li.youtube a:hover{background-position:-320px -32px}
 </style>

5. Klik Simpan dan lihat hasilnya!

Catatan : 

• Setiap icon ada alamatnya misalnya http://twitter.com/ . Nah, anda ganti link tersebut sesuai dengan alamat twitter anda. Begitupun juga dengan Vimeo, Youtube, Facebook, dll.
• Jika anda tidak ingin menampilkan salahsatu icon social media, anda hanya menghapusnya mulai dari <li class="....."> sampai </li>. Misalnya anda tidak ingin menampilkan Vimeo. Maka yang anda hapus adalah <li class="vimeo"><a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"></a></li>.

Read More

Pasang Widget Dynamic Social Bookmark

Sosial media adalah tempat kita bersosialisasi menggunakan internet. Tentunya agar kita mendapat followers yang banyak atau teman yang banyak, kita dapat bahkan setidaknya ada widget sosial ini. Baik itu yang melayang, yang ada di postingan, di sidebar, atau lainnya. Sekarang saya akan membahas tentang cara memasang widget dynamic social bookmark ke Blogger. Nampak seperti apa sih widget Dynamic Social Bookmark ini?

Live Demo

Menambahkan Script jQuery

1. Login ke akun Blogger anda.

2. Masuk ke Dasbor > Template > Edit HTML

3. Cari kode </head> .

    Catatan : Pertama klik pada kode apa saja yang ada di editor, lalu tekan CTRL+F untuk mencari.

4. Taruh kode ini tepat sebelum kode </head> . Untuk kode yang di highlight, jika kode tersebut sudah ada di bagian template anda, maka tidak perlu ditambahkan lagi ke template anda.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

<script language='javascript'> 
var name = &quot;#floatMenu&quot;;
var menuYloc = null;
$(document).ready(function(){menuYloc = 
parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css 
(&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;$(name).animate({top:offset},{duration:1000,queue:false});});}); 
</script>

Menambahkan Kode CSS

1. Cari kode ]]></b:skin>

    Catatan : Pertama klik pada kode apa saja yang ada di editor, lalu tekan CTRL+F untuk mencari.

2. Setelah ketemu, letakkan kode dibawah ini tepat sebelum kode tersebut.

#floatMenu {position:absolute;top:150px;float:left;width:45px;}
#floatMenu ul {list-style: none;}
#floatMenu ul li a {-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.8;}
#floatMenu ul li a:hover {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);opacity: 1;}

Menambahkan HTML

1. Cari kode </body>.

    Catatan : Pertama klik pada kode apa saja yang ada di editor, lalu tekan CTRL+F untuk mencari.

2. Letakkan kode ini tepat sebelum kode tersebut.

<div id='floatMenu'>
<ul>
<li><a href='http://facebook.com/bloggingforstyling' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lj7uyJYdbgjy1dPxY_fmxcVp1bXo-tyT-cVgUyVws6pHk_OIgcWW4rBKQLIpn8LJxmH7CplI3tb6decT-Af9De7mzpMUSTW7KFy8mZ0EkQ0uyOB_e8ofUr1DsbYgZWLvPI6DMXT39bM/s1600/btrix-facebook.png' style='margin-bottom: 3px;' title='Follow Me On  Facebook'/></a></li>
<li><a href='http://twitter.com/bloggingforstyling' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTd3xSlqAGJQDAzmrqHkv0UBDQjDL3TD0TZNn8JyrRcIZH7Ed25A2X8PHjE0de95V0yhVMdCmbfXMXSm4eg9G7kq1qKQZ86a_zXRbkIBLTGVQk3Ws4dOVyIwGeMWUuzVP3AzLr3Ea0Vgs/s1600/btrix-twitter.png' style='margin-bottom: 3px;' title='Follow Me On  Twitter'/></a></li>
<li><a href='http://pinterest.com/bloggingforstyling/' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSvdoR2qczxTnuAC8o-IvSZWyZDJQ2X3ErchYtLUFMGRl8tSxcr71cguyDNrzTP8Svq2w6oWceiyd3_bkR1ov7751tDEIVaCSH-GyI0ObhpWzAeyXsNv2uvW8FmbFP37OPU7VVvSm7dc/s1600/btrix-pinterest.png' style='margin-bottom: 3px;' title='Follow Me On  Pinterest'/></a></li>
<li><a href='https://plus.google.com/GOOGLEPLUSID' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRnMGNWJA6LqpMJtYtU3NP62ZOMu0QTy8LsaoSfaXWI4LgTfVkhZlx2VAk3_UPzjP6MoTyZBssu8GRhqI-YqLqyCBRkVUahQVNaVvIHGJpuACNBEPsyFyh9QfqaNXxhsEyAt0VG8SWvg/s1600/btrix-googleplus.png' style='margin-bottom: 3px;' title='Add Me your Circle'/></a></li>
</ul></div>

Catatan :

• Ubah http://facebook.com/bloggingforstyling dengan alamat Facebook anda.
• Ganti http://twitter.com/bloggingforstyling dengan alamat Twitter anda.
• Ganti http://pinterest.com/bloggingforstyling/ dengan alamat Pinterest anda.
• Terakhir, ganti GOOGLEPLUSID dengan ID Google Plus anda.

Langkah terakhir, Klik Simpan Template!

Read More