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

Beautiful CSS3 Scrollbar for Blogger

Scrollbar berfungsi untuk mengscroll halaman. Scrollbar tampak beda pada setiap sistem operasi. Jika anda menggunakan sistem operasi Windows XP, maka scrollbar akan tampak berwarna biru muda. Mungkin style scrollbar bawaan OS komputer anda sangat membosankan.

Nah, kali ini saya akan memberi tutorial "beautiful CSS3 Scrollbar for Blogger". Jadi buanglah rasa jenuh anda sekarang! Blog anda akan terlihat lebih stylist jika dipasang CSS3 custom scrollbar. Oke, tak usah berlama-lama lagi, mari kita lihat tutorialnya!

View Demo

Compatibility

Scrollbar ini hanya bekerja pada browser yang mendukung Webkit seperti salahsatunya browser Google Chrome. Anda dapat mendownload browser Google Chrome disini :

Download Google Chrome

Menambahkan Kode CSS

1. Login ke akun Blogger anda.

2. Masuk ke Template > Edit HTML
3. Cari kode ]]></b:skin> . Lalu taruh kode dibawah ini tepat diatas kode tersebut.

/* Custom Scrollbar - Tutorial by Bloggingforstyling
-----------------------------------------------------*/
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}

::-webkit-scrollbar {
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
 background-color: #0ae;
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
                    color-stop(.5, rgba(255, 255, 255, .2)),
             color-stop(.5, transparent), to(transparent));
}

4. Klik Save Template

More Style

Terakhir, saya ingin berterima kasih kepada Tim Holman yang telah membuat kode dari CSS3 scrollbar ini. Ia telah membuat 14 vertical scrollbar yang salahsatu dari keempat belas tersebut adalah scrollbar ini. Untuk melihat 13+ scrollbar lainnya anda bisa klik disini. Terima Kasih.

Read More

Meta Tag Generator

Apa itu Meta Tag? Sebuah meta tag adalah tag tersembunyi yang tinggal di <head> dokumen HTML. Hal ini digunakan untuk memberikan informasi tambahan tentang dokumen HTML. Mungkin jenis-jenis meta tag ada tiga, yaitu content, http-equiv, dan name. Meta tag selalu memberikan informasi dalam pasangan nama/nilai. Sebuah name, http-equiv dan content memberikan informasi nama dan content provides informasi nilai. Meta tag tidak memiliki tag penutup.

Advanced Meta Tag Generator

Title: Author: Subject: Description: Keywords: Generator: Language: Expires: Abstract: Copyright: Designer: Publisher: Revisit-After: Distribution: Select One 1. Global 2. Local 3. Intern Use Robots: Select One 1. All 2. None 3. Index 4. No Index 5. Follow 6. No Follow

Read More

HEX Color Code Generator

Web color adalah warna yang digunakan untuk mendesain web. Format warna yang sering digunakan adalah Hexadecimal atau disingkat menjadi HEX. Untuk menulis kode warna HEX diawali dengan huruf pagar "#". Karena warna HEX beratus-ratusan jumlahnya, maka untuk mempermudah pemilihan warnanya adalah menggunakan HEX Color Code Generator ini. HEX color code generator ini adalah tools berupa roda berputar. Sebelum memakainya, jelas kita harus melihat petunjuk penggunaannya :

Petunjuk Penggunaan

1. Klik pada salahsatu warna yang anda inginkan.
2. Setelah diklik akan ada variasi warna di sebelah kanan tools.
3. Copy kode HEX nya disamping warna yang anda pilih.
4. Klik paste pada suatu tempat dimana tempat tersebut akan anda taruh kode HEX tersebut.

Petunjuk Penggunaan Generator #2 

1. Pilih salahsatu warna yang anda inginkan.
2. Copy code yang berada disamping tulisan "HEX #"
3. Karena kode warna yang anda copy belum termasuk hashtag nya, maka beri hashtag (#) tepat sebelum kode warna tersebut.

Petunjuk Penggunaan Generator #3

1. Caranya hampir sama dengan generator yang kedua, pilih warna yang anda inginkan.
2. Pada kolom yang bertuliskan "HEX" terdapat kode warna, copy kode warna tersebut.

Ingin generator yang satu ini? Copy kode dibawah ini dan taruh diblogmu!

<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"><param name="movie" value="http://www.2createawebsite.com/build/color.swf" />
<param name="quality" value="High" />
<embed type="application/x-shockwave-flash" width="485" height="485" src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" name="obj1" quality="High"></embed></object><br />
<a href="http://bloggingforstyling.blogspot.com">Blogging for Styling</a>

Read More

Menghilangkan Tulisan Langganan Entri (Atom)

Tulisan "langganan entri atom" biasanya berada dibawah postingan. Sepertinya tulisan langganan entri atom itu sangat mengganggu penampilan blog anda. Jadi jika tulisan langganan entri atom itu dihapus, wajar-wajar saja. Bagi anda yang memang tidak nyaman dengan keberadaan tulisan ini, anda dapat menghilangkannya dengan cara yang mudah. Bagaimana caranya?

Menghilangkan Tulisan Langganan Entri Atom

1. Login ke akun Blogger anda.

2. Masuk ke Template > Edit HTML

3. Cari kode ]]></b:skin>. Tambahkan kode dibawah ini tepat diatas kode tersebut.

.feed-links {display:none;}

4. Klik Save Template

Semoga artikelnya bermanfaat! Jangan lupa subscribe blog ini dengan cara mengisi email dan nama anda pada kolom yang berada di sidebar paling atas. Terima kasih!

Read More

Speech Bubble Threaded Comment for Blogger

Style threaded comment blogger mungkin terlalu kudet/jadul. Coba threaded comment yang satu ini. Tampilannya lebih stylish! Seperti pada postingan sebelumnya, anda hanya perlu menambahkan kode CSS. Tetapi untuk mempermudah proses, anda menambahkan kode CSS melalui Template Designer Blogger. Jadi tidak perlu lagi klik edit html dahulu. Oh, iya! Sebelum memulai, mari kita lihat preview/demo nya dahulu!

Live Demo

Cara Memasang Speech Bubble Threaded Comment

1. Login ke akun Blogger anda.

2. Masuk ke Template > Customization (IDN: Template > Sesuaikan)

3. Pilih tab Advanced lalu pilih Add CSS.

4. Masukkan kode dibawah ini pada kolom Add CSS.

/* Threaded Comment - Bloggingforstyling.blogspot.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYW9oHMwHTuU_0mtSmZlcnBJRtiVSEDjaN5Xy-bIVpezfXw0W4_scoJPa6qms8usbC1gMAcQOwmfz9MYZdSC5RwbXuNcacCzC42okDeiFm_P4Ft2P8nVhpa8JNczpTiCyxbUDWfhKB20/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

5. Klik Apply to Blog

Caption untuk nomor 3 dan 4

Read More

Merubah "Showing Post With Label" di Blogger

Hi! Kalau anda buka halaman label, pasti akan ada tulisan "showing post with label..." atau "tampilkan posting dengan label...". Warna kotak nya abu-abu, itu merupakan style default dari blogger. Sob, mari kita buat kotak "showing post with label" itu menjadi lebih stylish dan tidak kuno. Caranya sangat mudah, anda hanya menaruh kode CSS dibagian template blog anda.

Live Demo

Menambahkan Kode CSS

1. Login ke akun Blogger anda.

2. Masuk ke Template > Edit HTML

3. Cari kode ]]></b:skin> . Ganti kode tersebut dengan kode dibawah ini.

/* Status Message - Tutorial by bloggingforstyling
---------------------------------------------------------------------*/
#main .status-msg-wrap {
position: relative;
margin-bottom: 10px;
border-radius: 3px;
padding: 10px 10px 10px 32px;
}
#main .status-msg-body {
font-size:80%;
text-align:left;
padding:5px 5px 0px 30px;
width:auto;
}
#main .status-msg-border {border: 1px solid;border-color: #f5c558;}
#main .status-msg-bg {
background-color: #fae7a2;
background-repeat: no-repeat;
background-position: 10px 11px;
}

]]></b:skin>

4. Klik Save Template

Gimana? Keren bukan? 

Read More

Merubah Warna Text Selection dengan CSS

Bosan dengan warna text selection yang berwarna biru? Warna biru itu terlalu kuno, coba dengan warna lain yang lebih menarik. Bisa warna pink, biru, abu-abu, sesuai kesukaan anda. Nah, cara mengganti warna text selection, saya menggunakan trik CSS. Disini saya menggunakan atribut ::selection.  Hampir semua browser compatible dengan atribut selection. Berikut ini merupakan browser yang support dengan ::selection.

Oke, disini hanya ada satu langkah untuk mengubah warna text selection. Yaitu anda hanya perlu menambahkan kode css ke bagian template blog anda. Bagaimana caranya?

1. Login ke akun Blogger.

2. Masuk ke Template > Edit HTML

3. Cari kode ]]></b:skin>. Taruh kode dibawah ini tepat diatas kode ]]></b:skin>.

/* Text Selection - BFS
------------------------------------------------------------ */
::-moz-selection {
    background-color: #dd2020;
    color: #fff;
}

::selection {
    background-color: #dd2020;
    color: #fff;
}

4. Klik Save Template

Customization

• Pada garis keempat terdapat kode #dd2020. Ganti kode #dd2020 dengan kode warna text selection.
• Begitu juga dengan garis kesembilan. Kode pada garis keempat dan kesembilan harus sama! 

Caranya sangat simpel! Mungkin warna text selection-nya lebih bagus jika warnanya masuk/matching dengan tema warna blog anda. Saya mengucapkan terima kasih! Kalau ada masalah, silahkan tanya di kotak komentar.

Read More

Floating Social Sharing Bar for Blogger

Beberapa waktu lalu, saya browsing dan menemukan widget ini. Jadi kerja widget ini adalah saat anda meng-scroll page kebawah, akan muncul kotak berwarna oranye transparan dan berisi tombol-tombol untuk mengeshare postingan yang sedang visitor lihat. Widget ini menggunakan jQuery. Jadi, anda harus menambahkan plugin jQuery dahulu. Widget ini tampak lebih keren karena warna dasarnya (background) sedikit transparan. 

Disini anda hanya perlu melakukan 3 langkah, yakni :

1. Memasang plugin jQuery 1.8.2 (bagi yang belum memasang).
2. Menambahkan "Marker".
3. Memasang widget.

Memasang Plugin jQuery 1.8.2

1. Seperti biasa, login ke akun blogger anda.
2. Masuk ke Template > Edit HTML
3. Cari kode </head>, lalu diatas kode tersebut tambahkan kode dibawah ini.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 

Menambahkan "Marker"

1. Tetap di HTML Editor.

2. Cari kode <data:post.body/> (kalau anda menemukan kode ini lebih dari 3 kali, maka anda pilih yang kedua). Lalu tambahkan kode berikut dibawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>

Memasang Widget

1. Cari kode </body>. Tambahkan kode berikut ini setelah kode </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://makingdifferent.github.com/blogger-widgets/Floating%20Social%20sharing%20Horizontal%20Bar.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=155934781145405&amp;xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>         
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

2. Klik Preview, apakah ada masalah atau tidak. Kalau tidak ada masalah, lanjut ke langkah ketiga. Kalau ada masalah, coba bahas masalah anda di kotak komentar.

3. Klik Save Template

3. Lihat hasilnya!

Thankyou!

Read More

Customize Blogger Lightbox

Apa sih lightbox pada blogger itu? Lightbox bisa anda jumpai saat anda mengeklik gambar diatas. Akan muncul seperti popup yang berupa gambar. Lightbox pada aslinya, backgroundnya berwarna hitam transparant. Tetapi disini anda lihat warnanya putih? Mengapa? Karena saya sudah merubah model lightbox yang lama jadi lightbox yang baru! Nah, caranya bakalan saya terangkan kali ini.

Bagian-Bagian Lightbox

Cara Mengubah Background dan Style Lightbox

1. Login ke akun Blogger anda.

2. Masuk ke Template > Edit HTML

3. Cari kode ]]></b:skin> . Lalu tambahkan kode ini tepat sebelum kode ]]></b:skin>.

/* Blogger Lightbox
----------------------------------------------- */

/* Warna Dasar */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Border Gambar */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Tombol Close */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(alamat-gambar-tombol-close) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}

/* Warna Teks */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

4. Klik Save Template

Tara...!! Lihat perubahannya! 

Read More

Mengaktifkan Infinite Scroll pada Blogger

Infinite scroll bisa anda lihat pada blogger dynamic view template. Anda tidak perlu lagi menekan tombol next, tetapi dengan adanya infinite scroll di blog anda, postingan yang ada di homepage akan me-load sendiri. Ciri khas nya yaitu gambar "loading". Itu merupakan kelebihan dari infinite scroll. Cara memasang infinite scroll ini sangat mudah, tinggal menekan tombol "Add to Blogger" saja!

Live Demo

How to Add Infinite Scroll Instantly

1. Klik tombol Add to Blogger
2. Tidak usah isi kolom Judul
3. Taruh Widget di bagian bawah Postingan

How to Add Infinite Scroll Only Homepage, Label Pages,  and Archive Pages

1. Klik tombol Add to Blogger
2. Tidak usah isi kolom Judul
3. Taruh Widget di bagian bawah Postingan.

Read More

Memasang Tombol "Add to Blogger"

Tahukah anda tombol add widget? Tombol ini merupakan jalan pintas  untuk menambahkan widget ke blog anda tanpa harus membuka-buka dasbor blog anda terlebih dahulu. Buat anda yang mempunyai blog seputar tutorial blogging seperti Bloggerstyle ini, tools ini sangat berguna buat anda loh! Nah, kalau misalnya anda punya tutorial tentang widget, tidak perlu nulis-nulis kode widgetnya. Hanya dengan satu tombol widget akan terinstall otomatis ke blog si pembaca.

Cara memakai tools ini :

1. Isi judul widget, url profil, alamat web dan yang paling penting kode widgetnya.
2. Klik tombol generate
3. Copy-paste kode yang ada di kotak dibawah ke postingan tutorial anda. 
4. Kalau anda mau membuat 2 tombol, klik reset 
5. Lalu lakukan langkah seperti langkah 1-3.

Add Widget Button Generator

Judul Widget
Blog Url / Profile URL
URL Logo Blog
Script Widget

Copy this code

Read More

Menghilangkan Tulisan Powered by Blogger

Gak enak rasanya kalau ada tulisan "Powered by Blogger" atau mungkin "Diberdayakan oleh Blogger". Kalau anda ingin membuat design credit sendiri, tulisan tersebut harus dihilangkan dulu nih! Tapi problemnya gak bisa diremove? Untuk mengatasi masalah tersebut perlu mengubah salahsatu kode pada bagian template anda agar bisa menghapus/menghilangkan tulisan "Powered by Blogger" di blog anda.

Menghilangkan Tulisan Powered by Blogger

1. Login ke akun blogger anda 
2. Masuk ke  dashboard > template > edit HTML
3. Klik Proceed / Lanjutkan 
4. Centang Expand Template Widget 
5. Cari (CTRL+F) kode <b:widget id='Attribution1' locked='true' title='' type='Attribution'>
6. Ganti true dengan false.
7. Klik Save Template 

Menghilangkannya Melalui Halaman Layout

1. Masuk ke Design > Page Elements 
2. Klik Edit pada widget yang berjudul Attribution.

3. Lalu klik tombol Remove seperti pada gambar dibawah ini :

Read More