Cara membuat kotak like facebook melayang di blog (floating facebook likebox)

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBTyvmtvz1FDzuol5ckeNRLBUCBkpiqMiOy622zi3wE5i5L1t1yNfZjuLQ63wq-e2EM2AObExGupSSRwBSv5-CD0fcKaFUbvRuIQHCStVUn7D5licFFA94bQngPboJJ2x5LO0rmoJVkE2n/s1600/face+book.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBTyvmtvz1FDzuol5ckeNRLBUCBkpiqMiOy622zi3wE5i5L1t1yNfZjuLQ63wq-e2EM2AObExGupSSRwBSv5-CD0fcKaFUbvRuIQHCStVUn7D5licFFA94bQngPboJJ2x5LO0rmoJVkE2n/s1600/face+book.jpg" /></a></div>
 
 Ini dia salah satu widget yang sangat menakjubkan. 
 
Dimana orang-orang selama bertahun-tahun hanya menggunakan  tombol facebook like saja di blog, akan tetapi hari ini saya ingin memperkenalkan dan share ke Anda Cara membuat kotak like facebook melayang di blog (floating facebook likebox). 
 
Floating facebook likebox adalah sebuah slider yang menyembunyikan Likebox di dalam wadah dan ketika visitor (pengunjung) mengarahkan crusor ke tombol  maka akan terbuka kotak Facebook likenya. 
 
Langkah-langkahnya sebagai berikut: 
 
LANGKAH 1. Menambahkan Plugin JQuery ke Blog Anda : 
<ol style="text-align: left;">
<li>Masuk ke Dashboard Anda> klik Design (rancangan)> Edit HTML.</li>
<li>Cari kode </head> Gunakan Control + f untuk memudahkan pencarian, kemudian pastekan kode jquery  berikut sebelum kode </head></li>
<li>(Abaikan langkah ini jika Anda telah menambahkan Plugin JQuery ke blog)</li>
</ol>
<blockquote class="tr_bq">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/> </blockquote>
<ol style="text-align: left;">
</ol>
<ol style="text-align: left;">
</ol>
     4. Save (simpan) template. 
 
LANGKAH 2. Tambahkan floating likebox ke blog Anda : 
<ol style="text-align: left;">
<li> Buka halaman Tata Letak</li>
<li>Klik tambah gadget > pilih tambah HTML/Javascript</li>
<li>copy dan pastekan kode script dibawah ini : </li>
</ol>
<blockquote class="tr_bq">
<script type="text/javascript"> // </script> 
<style type="text/css"> 
.w2bslikebox{background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgKp6cyCV_S85RqQZqNtmvuMjgrcoO2ymhBfxVTI3lqbk9Lr_2L-mrVLnBM2YINIiVIcSidITY727ZaDTbZN-2HzcSxGww-83zpe8OpqtjoUqKEdKb5yWcrPrS1n_bws_c68PPOerDIf2/s1600/facebook1.png")
 no-repeat scroll left center transparent !important;display: 
block;float: right;height: 270px;padding: 0 5px 0 46px;width: 
245px;z-index: 99999;position:fixed;right:-250px;top:20%;} 
.w2bslikebox div{border:none;position:relative;display:block;} 
.w2bslikebox span{bottom: 10px;font: 9px "lucida 
grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 
6px;text-align: right;z-index: 99999;} 
.w2bslikebox span a{color: #FF9D00;text-decoration:none;} 
.w2bslikebox span a:hover{text-decoration:underline;} 
</style><div class="w2bslikebox" style=""><div> 
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http:///www.facebook.com/pages/Eyang-anom/427305383989192&amp; 
width=245&amp;colorscheme=light&amp;show_faces=true&amp; 
connections=8&amp;stream=false&amp;header=false&amp;height=330"
 scrolling="no" frameborder="0" scrolling="no" style="border: medium 
none; overflow: hidden; height: 330px; width: 
245px;background:#fff;"></iframe>Widget by:<a 
href="http:/sijalupangna.blogspot.com">Tips dan trik, science dan bisnis</a></div></div></blockquote>
 
<div style="text-align: justify;">
Anda bisa mengganti "url fans page facebook Anda" dengan alamat url  fans page facebook Anda sendiri</div>
<div>
<div style="text-align: justify;">
contoh fans page facebook blog ini : http:///www.facebook.com/pages/Eyang-anom/427305383989192.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Sedangkan untuk gambar logo facebooknya seperti "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgKp6cyCV_S85RqQZqNtmvuMjgrcoO2ymhBfxVTI3lqbk9Lr_2L-mrVLnBM2YINIiVIcSidITY727ZaDTbZN-2HzcSxGww-83zpe8OpqtjoUqKEdKb5yWcrPrS1n_bws_c68PPOerDIf2/s1600/facebook1.png", bisa  diganti dengan koleksi  gambar logo facebook Anda sendiri.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Save template, selesai sudah Cara membuat kotak like facebook melayang di blog (floating facebook likebox).</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Semoga bermanfa'at.  
 
Sumber: http://problogiz.blogspot.com  </div>
</div>
<a href="http://problogiz.blogspot.com/2012/09/pasang-widget-fans-page-facebook.html">Pasang Widget Fans Page Facebook Melayang</a>
</div>

Ini dia salah satu widget yang sangat menakjubkan . Dimana orang-orang selama bertahun-tahun hanya menggunakan tombol facebook li...

Baca selengkapnya...

31 Komentar

jalupangna Label: widget 02.13 31 komentar

Cara membuat berbagai macam variasi blockquote di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Sebagaimana kita ketahui bahwasanya <a href="http://sijalupangna.blogspot.com/" target="_blank">Blockquote</a> adalah tanda yang digunakan untuk menandai suatu tulisan yang
 penting, sehingga tampak berbeda dari tulisan yang lainnya. Oke, kali ini saya akan share dan posting ke anda tentang berbagai macam variasi <a href="http://sijalupangna.blogspot.com/" target="_blank">blockquote</a> di blog. 
 
Di bawah ini ada beberapa macam  variasi <a href="http://sijalupangna.blogspot.com/" target="_blank">blockquote</a> berikut kode-kodenya: 
 
Blockquote Dengan Border  dan Gambar burung hantu: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQY3qlSdYPhKvWIJLn39_p2pghuCkBwEeUQjkYRSLhLW5OLeqGD06ohqumwu-D_VobVsqu46KUPMeSOBoP5_QzlxsKwKkViyNjRdnWyTtTv_vsi64nJtIW2CTCjhSxQa0FmqJjGxzu9AA7/s1600/owl2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQY3qlSdYPhKvWIJLn39_p2pghuCkBwEeUQjkYRSLhLW5OLeqGD06ohqumwu-D_VobVsqu46KUPMeSOBoP5_QzlxsKwKkViyNjRdnWyTtTv_vsi64nJtIW2CTCjhSxQa0FmqJjGxzu9AA7/s320/owl2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
 
 
 
Kode blockquote: 
 
<blockquote class="tr_bq">
blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background
 : #F1F8FE 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9i1lvlDptFQt5QyIoRi5rtz2Fed0jh4w-NMEOFW5WptkRk3hpwaXeSRo65Zb5KEXIXuFc7StDxrkg7qa0VEhn2_DiZFSQCGDjwcAEQlKHAuszUdJaPtXxJXkdFssL3FxI5nQOYCATG50/s400/owl.png)
 no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; 
 } blockquote p { margin: 0; padding-top:10px; } </blockquote>
 
Blockquote dengan label di pojok kiri atas dan border di bawah dengan warna ungu: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH8OO2OsvRE_oXpFg2Ss5ffy7EBEUwdh57tFE8Gemmg_9PBPCfqVcQhmJsOo-detjaycTQf3dYOrqtVUnNzgMixBbmpMWhJPsNQk4Sun9c7Goq5x0LpnDm7L43Qofpnhk-EBT6hMVZWFF/s1600/PurpleScannedCopy2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH8OO2OsvRE_oXpFg2Ss5ffy7EBEUwdh57tFE8Gemmg_9PBPCfqVcQhmJsOo-detjaycTQf3dYOrqtVUnNzgMixBbmpMWhJPsNQk4Sun9c7Goq5x0LpnDm7L43Qofpnhk-EBT6hMVZWFF/s320/PurpleScannedCopy2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 Kode blockquote: 
 
<blockquote class="tr_bq">
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background
 : #E4EAFE 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvAnb8ezAgp1jkJLtSLI6yzhgQL-3XQ85xdQcwr3Tn_MLH0bgC8VkOqHZhlxRmma_TOqwrHwkNM8Z96LzcfvvAFOacvPwS6sTFZwC-el0iYmMNVBcmiyiOuI4Ai2448ujlY4Q65Mc00Y/s400/angular-purple.gif)
 no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } 
 .post blockquote p { margin: 0; padding-top:10px; }</blockquote>
 
Jigsaw (seperti gergaji ukir) Blockquote Dengan tulisan copyrighted coding Pada Pojok Kanan bawah: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7kCvfwyKxs-DWFFLdBjjlonx-mOZHTR4BT_gE3Tnir66rq4GD-qPB7nB9ZKj8z5_WNDMMprMiprQeBqkUP1M10ogTQeaEMYm-AdclfLfJXjTeyuHSnJKHrnxx-kTz5py9pRnee8HWrAnk/s1600/jigsaw2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7kCvfwyKxs-DWFFLdBjjlonx-mOZHTR4BT_gE3Tnir66rq4GD-qPB7nB9ZKj8z5_WNDMMprMiprQeBqkUP1M10ogTQeaEMYm-AdclfLfJXjTeyuHSnJKHrnxx-kTz5py9pRnee8HWrAnk/s320/jigsaw2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
   
Kode blockquote: 
 
<blockquote class="tr_bq">
.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background
 : #9FCFFF 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyz_sn4Ee6XqNHKSVm8nmu5KjVAXq3tbSVADRBBJ9e93H9GMKlBec8da1A-o_sF33RYlV5qhNmOWfKClcKR_ifVpyC0e_Es1xgWWhmq_cFppxnd_i-SE4982H1n9JZ0RjQsXfMFLaMIr0/s400/block22.gif)
 no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } 
 .post blockquote p { margin: 0; padding-top:10px; }</blockquote>
 
Blockquote dengan border klasik border di samping kiri : 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQRgtCTmXiS8LH0EnM_9YzCc5xVSnabnWAaaLV9G43mNF3aSvyPkd3gnz0D5H9vF-a8YUXU1AiWjE0owD7mhyWiiiJBGcrg9E5-2QUY9W5WgFFZ7mqDX69r7zgR-dZBbXz94KhxlBv9rM/s1600/leftsidedbrownish2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQRgtCTmXiS8LH0EnM_9YzCc5xVSnabnWAaaLV9G43mNF3aSvyPkd3gnz0D5H9vF-a8YUXU1AiWjE0owD7mhyWiiiJBGcrg9E5-2QUY9W5WgFFZ7mqDX69r7zgR-dZBbXz94KhxlBv9rM/s320/leftsidedbrownish2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
 
 
 
   
Kode blockquote: 
 
<blockquote class="tr_bq">
.post blockquote { background: #F3F3F1 url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpQ-GWypvYG8uVlzKG8wo8_-oOsB8Va9WRywjyYNHu1_Zxlij0QnviIpAwKDI9dv67kxAGlCMw7HLVb2a-N5SqnybvoYX6MZdgGrJoOPFH4_NeCdPw-ixaQ7COVIKhEfh7Mraop6PMxHw/s1600/comma-side-orange1.gif">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpQ-GWypvYG8uVlzKG8wo8_-oOsB8Va9WRywjyYNHu1_Zxlij0QnviIpAwKDI9dv67kxAGlCMw7HLVb2a-N5SqnybvoYX6MZdgGrJoOPFH4_NeCdPw-ixaQ7COVIKhEfh7Mraop6PMxHw/s1600/comma-side-orange1.gif</a>) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; } </blockquote>
 
atau blockquote klasik lainnya: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7o2N3jjotjn6xKmyYWe3MuNqxuROiQvpeZ9SeAg8L37yMEgw96yfuefqfyVNQbTroKl2f-_sU7K_T3QD1Gu9S61AmewsSENYRoaQZFsFiImfqgBF4rzmzi6hnvCZPAhNr-qxsN1xqzc2Z/s1600/leftsidedgreenblack2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7o2N3jjotjn6xKmyYWe3MuNqxuROiQvpeZ9SeAg8L37yMEgw96yfuefqfyVNQbTroKl2f-_sU7K_T3QD1Gu9S61AmewsSENYRoaQZFsFiImfqgBF4rzmzi6hnvCZPAhNr-qxsN1xqzc2Z/s320/leftsidedgreenblack2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
kode blockquote: 
 
<blockquote class="tr_bq">
blockquote { background: #484B52 url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9NE3rvTEo5WZvuhpZ3c7mixEB1SoMzep9ytFhyphenhyphenjq5Tn6x6Aw4MDMqkCRb-jnt-EGCLp3io4myLXCIWWhI-tuQAZ9OM-RmWM0X7XpZagO09Z77a21wOd-Qm5CGWfYhHFXQcWmZHhoK2M/s1600/green-black-side.gif">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9NE3rvTEo5WZvuhpZ3c7mixEB1SoMzep9ytFhyphenhyphenjq5Tn6x6Aw4MDMqkCRb-jnt-EGCLp3io4myLXCIWWhI-tuQAZ9OM-RmWM0X7XpZagO09Z77a21wOd-Qm5CGWfYhHFXQcWmZHhoK2M/s1600/green-black-side.gif</a>) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; } </blockquote>
 
Blockquote dengan dengan Label warna di pojok kanan bawah: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSB4vitUhisxjk8Plunin-RLiDWf6y23awOr_S0E51WLpLFoHgEJ4REjWeKxqvyixloiwMyxngcKrbXW2IAo6w1-fWzqWj4U1wgixSpjyy9Hem7enER1go9vrfx7Z8GHTgxlnL29Q-6Bf/s1600/Brown-Scanned-copy%5B2%5D.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSB4vitUhisxjk8Plunin-RLiDWf6y23awOr_S0E51WLpLFoHgEJ4REjWeKxqvyixloiwMyxngcKrbXW2IAo6w1-fWzqWj4U1wgixSpjyy9Hem7enER1go9vrfx7Z8GHTgxlnL29Q-6Bf/s320/Brown-Scanned-copy%5B2%5D.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 kode blockquote: 
 
<blockquote class="tr_bq">
.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background
 : #FEE4E3 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7cBUsaZ_11QyTN6EVIxKfwcBM3ryA7cS9PpjNHlv5YPQ2N73LtNGQGOXY7SWlu_wOizsSYCH-cnbXODR_jlmNhmExBQjtNdzo01RRlOHLOm0HB_v9hMAgbEanNmFI0WfM9-5TADKS2c/s400/angular-right.gif)
 no-repeat bottom right; font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } 
 .post blockquote p { margin: 0; padding-top:10px; } </blockquote>
 
Blockquotes dengan tanda koma terbalik: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnHbkdq1tkTNK74jExlBEv3lNV5Q4JMxS28IngnRUgJl4Ek3p3VHObO6PjvT7ICoPt4d2LhKuw6N1LwbD25uZZfP8dJnnvD53eSgao7FQXjieBxehyfDo5EiWwTowalClP8aoX21c0C3oY/s1600/commasnavyblue2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnHbkdq1tkTNK74jExlBEv3lNV5Q4JMxS28IngnRUgJl4Ek3p3VHObO6PjvT7ICoPt4d2LhKuw6N1LwbD25uZZfP8dJnnvD53eSgao7FQXjieBxehyfDo5EiWwTowalClP8aoX21c0C3oY/s320/commasnavyblue2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
 
 kode blockquote:  
 
<blockquote class="tr_bq">
.post blockquote {   font: 18px normal Tahoma, sans-serif;   padding-top: 10px;   margin: 5px;  
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrq9yCfGLWW0e0-yMVUdbZuFrxNWL-JvOPAyYNCaKpSPVXRqtWE1DVVg68G26SwGJNS6M1UKTsvjySkPWI_0hxnPMAr1GZDBHMtdftAESHFBjYH_0Dp9e7nJfasZHnwRfNRqieIjoJTo/s400/comma-left.gif)
 no-repeat top left;   text-indent: 65px;   }   .post blockquote div {     display: block;    
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzIDVUrRU8H6Iql7LpjxjFUzoiZLzeYyhs6MJqLtN37obL9eprj9yTmAxm4ZPr8Y0y1_xoD_1vM5ZrHJrfbcOGiwIv-uGW1IEukEcDvqlqWogn7ucmnuma9Y1jtRCYDPAtRQh42uiImY/s400/comma-right.gif)
 no-repeat bottom right; padding-bottom:10px; } 
 .post blockquote p { margin: 0; padding-top:10px; } </blockquote>
 
Atau tanda koma yang berwarna orange:  
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJ09TZsN1BqnvDNCFmrZd2yAONcRZpyqcGeLvVsWiCLkR0aPoCywSWxo06wWFecHKXpclJuPFuzJFhCkzMf6cIER4iDtYxcoR1-Hb8S3amyj4eHBhqzfPf6X7H-u-T948l7c7AFJBbOkx/s1600/commasorange2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJ09TZsN1BqnvDNCFmrZd2yAONcRZpyqcGeLvVsWiCLkR0aPoCywSWxo06wWFecHKXpclJuPFuzJFhCkzMf6cIER4iDtYxcoR1-Hb8S3amyj4eHBhqzfPf6X7H-u-T948l7c7AFJBbOkx/s320/commasorange2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
kode blockquote:  
 
<blockquote class="tr_bq">
.post blockquote {   font: 18px normal Tahoma, sans-serif;   padding-top: 10px;   margin: 5px;  
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIPonQFQRIvsL3j1TXR1IV-9KEYwf1R4Rg5dPjSo3As_O5Q59_mHOqQ2Trx_IGdx30VOmzoa25F3ea_4yaoW4kP0dgm3FR1eKDLLZvMKIo2hJTat9kUpS5ZQHx7CSS7VowVFy1q5qBCKc/s400/comma1-left.gif)
 no-repeat top left;   text-indent: 65px;   }   .post blockquote div {     display: block;    
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Vp3QI6QhYQirHGAyH-iswxSiJ6jVmFv82ivfo_nS4AdPimnFe7sLd2xOsL8Zf9WbR_Z1lYMsk48_UECHX5B67IhpplgacHMwn_CxM84s7exbAM5nk59ziJ1ofj5f8-VzOX2Kyou9y2I/s400/comma1-right.gif)
 no-repeat bottom right; padding-bottom:10px; } 
 .post blockquote p { margin: 0; padding-top:10px; } </blockquote>
 
Atau variasi  dengan tanda lima jari tangan: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY8FgQpB28GcePK1vrsTWkPZaJ109DGbnOn6y-iUJv6g6Wed-_OVxoMnZVhfFjKFlnhLZ-oqUH_JWIYrkSPqygsIYkbVSvuEIKL2WR84V3r9wUOkWfXhhczJokXA-605rmLbMAgF4waz-x/s1600/commashands2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY8FgQpB28GcePK1vrsTWkPZaJ109DGbnOn6y-iUJv6g6Wed-_OVxoMnZVhfFjKFlnhLZ-oqUH_JWIYrkSPqygsIYkbVSvuEIKL2WR84V3r9wUOkWfXhhczJokXA-605rmLbMAgF4waz-x/s320/commashands2.gif" width="320" /></a></div>
 
 
   
 
 
 
 
 
 
 
kode blockquote: 
 
<blockquote class="tr_bq">
.post blockquote {   font:bold italic .9em  "comic sans ms", Tahoma, sans-serif;   padding-top: 25px;   margin: 5px;  
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOULrhUr5Y5uQQSiOke1EY2PZVLdye-NCd1LuN2lQ8SZM9RQBT3NgHhwjbrBtk6_VYbYqX-cjGPk6Pz1UMATIrIQmPVG3VxeoRQsITezlbXlK6bfBRxpRLXIUsahw6BjRnCwTQ4F4FJD8/s400/left.gif)
 no-repeat top left;   text-indent: 65px; color:#6299E4;   }   .post blockquote div {     display: block;    
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ267Kko5IDu4vciojKsPCUAnATwoAjunz782ytb0xiq1XYoyFD53PT-PT5tJCvJonwhUHBe1rPGMshg1ta4Pfv46AzZWdoCg2RDSfauHRwfygJPgVeGlTTkoO2YABeeTD2B7xgWkF-7w/s400/right.gif)
 no-repeat bottom right; padding-bottom:30px; } 
 .post blockquote p { margin: 0; padding-top:10px; }  </blockquote>
 
Blockquote dengan gambar copyrighted coding diatas:  
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij42JCFULwVFF8fdrDPhYnMQ52jO0EvA_a06rNPPfyjWlTX5-2w0-Vra8WeIPVwqifBawfX5qJY1fTxSz32O9I5L0YopTBu6E4LaxiOQ8-UZVGtCmAzqaRS-_xGOedcidvkOM5YQldE8hA/s1600/Copyrightedred2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij42JCFULwVFF8fdrDPhYnMQ52jO0EvA_a06rNPPfyjWlTX5-2w0-Vra8WeIPVwqifBawfX5qJY1fTxSz32O9I5L0YopTBu6E4LaxiOQ8-UZVGtCmAzqaRS-_xGOedcidvkOM5YQldE8hA/s320/Copyrightedred2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
 
 
   
 
kode blockquote:  
 
<blockquote class="tr_bq">
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm35C3SqgG6PaYJtMCc2mVx3xBzNTxavUxprBNS5qJvwrFHKlHP9SHmGl1r9ItpSDH5AoaBQ2EHaPUSVfaBJnOdj7ko9JRcATC9CRPvRhTvsagniJ309Hbb24qjX4k4m9Vs1oBt9s4TFI/s1600/block333.gif">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm35C3SqgG6PaYJtMCc2mVx3xBzNTxavUxprBNS5qJvwrFHKlHP9SHmGl1r9ItpSDH5AoaBQ2EHaPUSVfaBJnOdj7ko9JRcATC9CRPvRhTvsagniJ309Hbb24qjX4k4m9Vs1oBt9s4TFI/s1600/block333.gif</a>) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } 
 .post blockquote p { margin: 0; padding-top:10px; } </blockquote>
 
Blockquote dengan gambar Tirai  di atas dan bawah: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYwSqJhIm_VonUtAGM6ke5oN69qwuvRZoQ-RF3ARF6OYSha7mqGOJ1A4vRyIcCJm2idbxCtLNnOR0lXL9ZNkDP40cbF8I0_g2SOUTmQdakdghg8zpgtcK_3nF8-uxsr0H1ltAhrXIgofW/s1600/attopandbottom2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYwSqJhIm_VonUtAGM6ke5oN69qwuvRZoQ-RF3ARF6OYSha7mqGOJ1A4vRyIcCJm2idbxCtLNnOR0lXL9ZNkDP40cbF8I0_g2SOUTmQdakdghg8zpgtcK_3nF8-uxsr0H1ltAhrXIgofW/s320/attopandbottom2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
kode blockquote: 
 
<blockquote class="tr_bq">
.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background
 : #FFF 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZXGPOZstNyS8RlWGkPrkv-HFkhpFD7I_GGASDM1N5Biefabl9J6qYoONUlH9Jc5VzM3kmtdOUXZR3dj5NM0Pdnha5kUKG0csPvY5iDIUNv9O_lE80HlkIpJ99Y5-SsXAZE4Pvp6neFaw/s1600/BLOCK1-TOP.gif)
 no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } 
 .post blockquote div{ background
 : #FFF 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdLbH1RroJhv0a6lIO0ESyyCyDIYve5TRAMYYPEbMGzEMNbmjC4vZoKapYu711ugmSxEorRzwG1JvGVDf7j3IWgunXUxKUDAUIsW0QlTWcuK2ylu06yvPvMnsVct9xRAf_1MyehS8xfVE/s1600/BLOCK1-BOTTOM.gif)
 no-repeat bottom; padding-bottom: 50px; } 
 .post blockquote p { margin: 0; padding-top:10px; } </blockquote>
   
Gaya blockquote kotak dikelilingi oleh borders: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNMIH85KpbXk7FOdXkzK2BLomb-_VvzbxECLOHlE_dOxDXjHmi6jMCAOQ3mB4pe2nuGS7ubdQMQNnu1nQKimTR0h_g6GzdR_AfAnQehn02LWSPRUHJI3zhkxstEkmb88ONt9Gzw_IHfF_/s1600/Copyrightedorange2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNMIH85KpbXk7FOdXkzK2BLomb-_VvzbxECLOHlE_dOxDXjHmi6jMCAOQ3mB4pe2nuGS7ubdQMQNnu1nQKimTR0h_g6GzdR_AfAnQehn02LWSPRUHJI3zhkxstEkmb88ONt9Gzw_IHfF_/s320/Copyrightedorange2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
 
 
kode blockquote:  
 
<blockquote class="tr_bq">
.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background
 : #E7E5DC 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaFP3PYyqNKr0_8ivhcxihEhLqMi_gYzXYz60NqWA9D6hEqAgTejxEE3liR2MbpYUjV3iNJQgdPHQc-WVvQC5D7bpoiGyoIV4ALdZfZMNKsPj66N90dt03tJGYKZ8mtOUOdGepKFGRpL8/s400/block3331.gif)
 no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; } .post blockquote p { margin: 0; padding-top:10px; }</blockquote>
 
The Monkey Man Blockquote : 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEIDTf0TO-f3GPkO_YFVNCW2D9C7r-yV4MtNJJewFLf0xc2lfi4Jq5JOPHXybXBhyphenhyphenoT71de9lXrCp6qCle8dpre22Lu7NqIYNkor6Kus6yz0XiqKqwPng43uITm4E04dUqPYPVOG3LzG2/s1600/monkeyman2.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEIDTf0TO-f3GPkO_YFVNCW2D9C7r-yV4MtNJJewFLf0xc2lfi4Jq5JOPHXybXBhyphenhyphenoT71de9lXrCp6qCle8dpre22Lu7NqIYNkor6Kus6yz0XiqKqwPng43uITm4E04dUqPYPVOG3LzG2/s320/monkeyman2.gif" width="320" /></a></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
kode blockquote: 
 
<blockquote class="tr_bq">
.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background
 : #E6F1FA 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLMw0HOvK-fAtQQ-nUjpRpMYgt3GSMZmWqqpLwTpMFCbclrQ9VDDWkpSNfrHRCC07nk5YYDAXaFIERIIe50fJI5CmOXIr66hWwb9J9xf5oRFct0Jbd7ykgJzGIat8zJNUjp-DEzsUrRXQ/s400/head2.gif)
 no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } 
 .post blockquote div{ background
 : #E6F1FA 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBuNwSddfs3aRpxkCxjk3OI6ySWgkMrLMvaT_uxBaEiixw2ZWMh5xWJcmEs50h9ff66xNkJ0DgSVOf8_c5cahHkLFv6KYI0BliDPKaKE9rhY9aDiRh0JKvGH_20t8LPKeafvAKWK_ZOY/s400/head-bottom3.gif)
 no-repeat bottom; padding-bottom: 50px; } 
 .post blockquote p { margin: 0; padding: 20px; } </blockquote>
 
Penerapan dan penyesuiannya di blog:  
 
Sekarang Untuk menambahkan Salah satu blockquotes keren dan unik untuk blog Anda, lakukan hal berikut: 
<ul style="text-align: justify;">
<li>Pertama masuk ke akun blogger kita.</li>
<li>Klik fitur rancangan.</li>
<li>Klik edit HTML.</li>
<li>Cari kode blockquote misalnya .post-body blockquote { line-height:1.3em; }atau .post blockquote{...........}dalam kode HTML template blog kita tersebut. </li>
<li>Hapus kode blockquote tersebut, kemudian ganti dengan memasukan kode HTML blockquote yang kita inginkan.</li>
<li>Klik simpan template.</li>
</ul>
<div style="text-align: justify;">
<div style="text-align: justify;">
Keterangan :</div>
<ul style="text-align: justify;">
<li>Untuk mempermudah pencarian kode HTML yang dimaksud, klik tombol Ctrl + F pada keyboard kita.</li>
<li>Selalu biasakan untuk download template blog kita terlebih dahulu 
sebelum melakukan edit, untuk back up sebagai antisipasi saat kita 
mengalami kegagalan sewaktu proses editing berlangsung.</li>
</ul>
</div>
 
 Semoga bermanfa'at... 
  </div>

Sebagaimana kita ketahui bahwasanya Blockquote adalah tanda yang digunakan untuk menandai suatu tulisan yang penting, sehingga tampak ber...

Baca selengkapnya...

13 Komentar

jalupangna Label: tips dan triks blogger 00.53 13 komentar

Cara membuat menu penuh warna dengan effect jquery di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Menu ini merupakan menu yang spesial buat blog anda. Dengan warna yang 
berbeda-beda dan menu drop down yang memanjang, karena itulah menu ini 
diberi nama Colorful JQuery Menu (menu jquery penuh warna). Menu ini didapatkan dari Mybloggertrick, dan semoga dengan menu ini tampilan blog anda lebih profesional. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Da7Dby2E-B9otfjCkhFO5tlcjsbmxUoavRlWZskt1hUVieF-CKeZ9cxXJUPws8_Kp1PYZJrJqfxnnNXsX7g5xpm7XCAuKdD-z0EeoaNYXHC1gQr6Mdb9T0Zqhz4zfd92MkBp_7jjicTK/s1600/colourful-menu_thumb4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="44" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Da7Dby2E-B9otfjCkhFO5tlcjsbmxUoavRlWZskt1hUVieF-CKeZ9cxXJUPws8_Kp1PYZJrJqfxnnNXsX7g5xpm7XCAuKdD-z0EeoaNYXHC1gQr6Mdb9T0Zqhz4zfd92MkBp_7jjicTK/s320/colourful-menu_thumb4.gif" width="320" /></a></div>
 
1. Login ke blog kamu. 
2. Pilih Rancangan > Edit HTML > Cari Kode <head> 
3. Letakan kode di bawah ini tepat di bawah kode <head> 
<blockquote class="tr_bq">
<script src='http://mybloggertricks.googlecode.com/files/jquery-pack-colourful.js' type='text/javascript'></script> 
    <script 
src='http://mybloggertricks.googlecode.com/files/jcarousel-colourful.js'
 type='text/javascript'> </script> 
    <script src='http://mybloggertricks.googlecode.com/files/mt-colourful.js' type='text/javascript'></script></blockquote>
4. Selanjutnya cari kode: 
<blockquote class="tr_bq">
body { 

---- 

--- 

)  </blockquote>
 
5. Tambahkan kode berikut: 
<blockquote class="tr_bq">
body { 

margin:0px 

padding:0px; 

--- 

--- 

}   </blockquote>
6. Jika tidak ada kode body {  letakan saja kode yang nomor 5 tepat di atas ]]></b:skin> 
7. Selanjutnya cari kode <body> atau <body expr:class='&quot;loading&     quotdata:blog.mobileClass'> 
8. Setelah ketemu letakan kode Menu dan CSS nya di bawah ini tepat di bawah kode nomor 6. 
 
<blockquote class="tr_bq">
<style> 
.MBT-Nav-container { 
border: 1px solid #cfcfcf; 
   
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9vR4G0R3tXaW-bvOtbe1GPhtCFENLXGii0SKn_IU8y0ZY25egAa28F_9ljgf0cSo2SdBXvG2kB-T3an72jrvcPMA0arMZ36siVc1KmygX2BTE4G-4lzT8LVW42_Kp9-8mEiYjUNgxA/s400/menu-bgd.png)
 bottom left repeat-x; 
    position: relative; 
      margin: 0;  padding: 0; 
border: 1px solid #cfcfcf; 
} 
ul#nav { 
    border-left: 1px solid #cfcfcf; 
        border-right: 0px solid #cfcfcf; 
   
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwt9vR4G0R3tXaW-bvOtbe1GPhtCFENLXGii0SKn_IU8y0ZY25egAa28F_9ljgf0cSo2SdBXvG2kB-T3an72jrvcPMA0arMZ36siVc1KmygX2BTE4G-4lzT8LVW42_Kp9-8mEiYjUNgxA/s400/menu-bgd.png)
 bottom left repeat-x; 
    position: relative; 
    font-size: 12px; font-family: helvetica, arial, sans-serif; 
    list-style: none;  margin: 0 auto;  padding: 0; 
    width: 960px; 
} 
#nav ul { 
     margin: 0; 
   
} 
:focus { 
    outline: 0; 
} 
*html ul#nav { clear: both; height: 1%; } 
ul#nav li a { 
    display: block; 
    float: left; 
    text-transform: uppercase; 
    font-weight: bold; 
    line-height: 33px; 
    padding: 0 13px 0 10px; 
    color: #333; 
    text-decoration: none; 
   
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSmYzTpIJqGJlF4x4_wMUTaROj1GrPykJu6ElKf9ikcymA0HMv-UZ4fSjyAXP5UV6Q8LdTNX8fSI37WpN1Fms0rT22KHNYbePs5sWIKw8aDM4LVvDHs0JJSpUr3jM-6KuleAMatXRt8g/s400/menu-rule.png)
 right 2px no-repeat; 
} 
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; } 
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; } 
ul#nav li a:hover, ul#nav li a.open { color: #fff; } 
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; } 
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; } 
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; } 
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; } 
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; } 
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; } 
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; } 
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; } 
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; } 
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; } 
 
ul#nav li#link-home a { 
    padding: 0 33px 0 10px; 
    text-indent: -9999px; 
   
 background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSlyEVy6LmsS-upjQzscMoRd3nmDe4m7kNbiYvjzhbaJe-QkuiOZ7wom4wathhgw2H-WAeDUXx7iPgO2Ez4EVAUtr41rdExOH6PUmLq8kYz1mCc8r8iEN6ycIPa5d4DelZiOuCysRsySI/s400/home-icon.png)
 right 0px no-repeat; 
} 
*html ul#nav li#link-home a { padding: 0; width: 43px; } 
ul#nav
 li#link-home a:hover { background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSlyEVy6LmsS-upjQzscMoRd3nmDe4m7kNbiYvjzhbaJe-QkuiOZ7wom4wathhgw2H-WAeDUXx7iPgO2Ez4EVAUtr41rdExOH6PUmLq8kYz1mCc8r8iEN6ycIPa5d4DelZiOuCysRsySI/s400/home-icon.png)
 right -33px no-repeat; } 
/* Sub-Vertical Navigation */ 
ul.sub-nav { 
    position: absolute; 
    top: 33px; 
    left: -1px; 
    overflow: hidden; 
    width: 960px; 
    display: none; 
    z-index: 999; 
list-style: none; 
  padding-left:0px; 
} 
ul#nav
 li#mbt ul.sub-nav { background: #6f7987 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpk00H3ermP3hzRD_3sFlXjLMB6_ksDbi31xseFywAqLSjJVAyNBVIsghKPiKbBg_COJ7Hl8Y2uR1M3wgVb2QHYuOsxfyEkgDGmeQECt5kOvvSNl0c-hzr-zEWSDV_jjsT5H_W16siig/s400/business-subnav-bgd.png)
 top left repeat-x; } 
ul#nav li#link-entertainment ul.sub-nav { 
background: #d46b8e 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeeSXm1DexdmDiDKDJLMtCoTZQgwO-MsSUmDebo5NGIWuXta8yuJ0askd_cb-3Jzdbwkg4OWSEATNhE54zewGHE9CiJ3QYk7Xk-YIVboSvR6-Q4n1eTK1O6o46JtYFkIMUtXliP-DjlA4/s400/entertainment-subnav-bgd.png)
 top left repeat-x; } 
ul#nav li#link-news ul.sub-nav { background: 
#e28a67 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJKS5jMCgjg5z1chCawEJh88mE1Xg7OHGPJ-U3rssRN_8n_6s2nbzpzGNcRP5bqOeHToMZ8basDg3WOWqN9NlAN6k_-carTu7vxwkKnizDDXh5WuTYZWGv35T9ZvoKY9Z8LhAhJW2xG68/s400/news-subnav-bgd.png)
 top left repeat-x; } 
ul#nav li#link-life ul.sub-nav { background: 
#aa8eac 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht00emnL1Erpe4EsS0gB6F6TadYRqTmUS24qWZ6U3Ejt4O5HKMRtRqPJk1P4kJcKOq7KBxlWBrTw-doMG76LzfyBGTjOval-gq0kt_r7Wf1eTa5OLNmSY4RCXH3d3OJHWayEwpwdpNznY/s400/life-subnav-bgd.png)
 top left repeat-x; } 
ul#nav li#link-technology ul.sub-nav { 
background: #67d0e2 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIxHV7NX7bd3oN3EfFMM-6XembV9GylqQJumPdEIMPNHN7sa_UPPGk61LzoHvkNP0SqbZfhNEA7E_IOonUPA2HuLzyraaOFtZOtic2vJszf6maJP-9r_zu83y0ZFMVsc5PquecjWSCmWk/s400/technology-subnav-bgd.png)
 top left repeat-x; } 
ul#nav li ul.sub-nav li { float: left;   } 
ul#nav li ul.sub-nav li a { 
    float: none; 
    background: none; 
    font-size: 11px; 
    text-transform: none; 
    color: #fff; 
    line-height: 25px; 
} 
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; } 
ul#nav
 li#link-entertainment ul.sub-nav li a:hover, ul#nav 
li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 
!important; } 
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; } 
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; } 
ul#nav
 li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology 
ul.sub-nav li a.active-cat { background: #02b0cf !important; } 
</style> 
<div class='MBT-Nav-container'> 
<ul id='nav'> 
               
              
 <li class='non-vertical-link top-link' id='link-home'><a 
class='open' 
href='http://blazerracing.blogspot.com/'>Home</a></li> 
 
                <li class='top-link' id='mbt'><a href='#'>TAB 1</a> 
                    <ul class='sub-nav'> 
                    <li><a href='#'>SUB TAB 1.1</a></li> 
                    <li><a href='#'>SUB TAB 1.2</a></li> 
                    <li><a href='#'>SUB TAB 1.3</a></li> 
                    <li><a href='#'>SUB TAB 1.4</a></li> 
                    </ul> 
                </li> 
 
                <li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a> 
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 2.1</a></li> 
                    <li><a href='#'>SUB TAB 2.2</a></li> 
                    <li><a href='#'>SUB TAB 2.3</a></li> 
                    <li><a href='#'>SUB TAB 2.4</a></li> 
                    <li><a href='#'>SUB TAB 2.5</a></li> 
                    </ul> 
                </li> 
 
                <li class='top-link' id='link-news'><a href='#'>TAB 3</a> 
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 3.1</a></li> 
                    <li><a href='#'>SUB TAB 3.2</a></li> 
                    <li><a href='#'>SUB TAB 3.3</a></li> 
                    <li><a href='#'>SUB TAB 3.4</a></li> 
                    </ul> 
                </li> 
 
                <li class='top-link' id='link-life'><a href='#'>TAB 4</a> 
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 4.1</a></li> 
                    <li><a href='#'>SUB TAB 4.2</a></li> 
                    <li><a href='#'>SUB TAB 4.3</a></li> 
                    <li><a href='#'>SUB TAB 4.4</a></li> 
                    <li><a href='#'>SUB TAB 4.5</a></li> 
                    <li><a href='#'>SUB TAB 4.6</a></li> 
                    <li><a href='#'>SUB TAB 4.7</a></li> 
                    </ul> 
                </li> 
 
                <li class='top-link' id='link-technology'><a href='#'>TAB 5</a> 
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 5.1</a></li> 
                    <li><a href='#'>SUB TAB 5.2</a></li> 
                    <li><a href='#'>SUB TAB 5.3</a></li> 
                    <li><a href='#'>SUB TAB 5.4</a></li> 
                    <li><a href='#'>SUB TAB 5.5</a></li> 
                    </ul> 
                </li> 
 
<li
 class='non-vertical-link top-link' id='link-top10'><a 
href='http://blazerracing.blogspot.com/'>TAB 6</a></li> 
 
 
 
 
 
               
 
                  <li style='clear: both;'/> 
            </ul> 
</div> </blockquote>
 
Klik dulu pratinjau dan setelah berhasil baru Simpan Template. 
 
Sumber: Blazzer Blog </div>

Menu ini merupakan menu yang spesial buat blog anda. Dengan warna yang berbeda-beda dan menu drop down yang memanjang, karena itulah menu ...

Baca selengkapnya...

6 Komentar

jalupangna Label: tips dan triks blogger 22.27 6 komentar

Cara mudah membuat tombol button to top up dengan effect jquery

<div dir="ltr" style="text-align: left;" trbidi="on">
Tombol back to top berfungsi untuk mengembalikan posisi dari bawah 
kembali lagi ke atas dalam sebuah website / blog. Sehingga memudahkan 
pengunjung suatu website / blog untuk kembali ke atas tanpa menggunakan 
scroll. Saya juga menerapkannya di blog karena simple, cantik dan keren. Lihat screen shot nya di bawah ini: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWFGigUcp6JzrGYi0wvgsNRMCkBwvTt5pNB0JQw-Ogt5xGpz5G6rLO7upZwHBQVMlcnzMy40bKYv_e-x_CMZ682aRian_Zetx5Thk45rTuAqGigToBUPD_mmdd7ccWJvbilsixVbKSrTz/s1600/screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWFGigUcp6JzrGYi0wvgsNRMCkBwvTt5pNB0JQw-Ogt5xGpz5G6rLO7upZwHBQVMlcnzMy40bKYv_e-x_CMZ682aRian_Zetx5Thk45rTuAqGigToBUPD_mmdd7ccWJvbilsixVbKSrTz/s320/screen.png" width="320" /></a></div>
 
 
Langsung saja tanpa basa basi menuju TKP :) 
1. Login ke blog kamu. 
2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini. 
 
<blockquote class="tr_bq">
<script 
src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' 
type='text/javascript'></script><script 
type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return
 false})});</script><a id='noop-top' style='display: none; 
position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px 
arial;'>^</a><style 
type="text/css">#noop-top span{-moz-transition:all .3s ease-in 
0s;-webkit-transition:all .3s;-o-transition:all 
.3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799
 0,#2989d8 50%,#207cca 51%,#7db9e8 
100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799
 0,#2989d8 50%,#207cca 51%,#7db9e8 
100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 
51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 
50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 
0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid 
#fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px 
cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px
 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 
49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 
#fff;text-decoration:none}</style> </blockquote>
 
 3. Simpan dan lihat hasilnya. 
 
Semoga bermanfa'at... </div>

Tombol back to top berfungsi untuk mengembalikan posisi dari bawah kembali lagi ke atas dalam sebuah website / blog. Sehingga memudahkan ...

Baca selengkapnya...

27 Komentar

jalupangna Label: tips dan triks blogger 21.39 27 komentar

Cara praktis dan mudah membuat Effect Page Peel di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHuHSWi16tbfitjOu3WBUD4W4c4WY4Lf77xvTQJ_iC96D_uDY0ufiI1cyFhoAtOd7xTSmADkCzD7PTIQrIdT4swf3mC1c0XLZ-5CbptL2cSFB4zvDmC3Dj7exuUMHwsUypQIRXnS1f0vq/s1600/page+peel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHuHSWi16tbfitjOu3WBUD4W4c4WY4Lf77xvTQJ_iC96D_uDY0ufiI1cyFhoAtOd7xTSmADkCzD7PTIQrIdT4swf3mC1c0XLZ-5CbptL2cSFB4zvDmC3Dj7exuUMHwsUypQIRXnS1f0vq/s1600/page+peel.jpg" /></a></div>
 
 Banyak cara untuk membuat blog kita tampil cantik dan bagus, sehingga 
akan menarik simpati pengunjung dari blog sobat, salah satunya dengan 
cara ini, yaitu <a href="http://sijalupangna.blogspot.com/2012/12/cara-praktis-dan-mudah-membuat-effect.html" target="_blank">cara membuat halaman bisa melipat</a> layaknya seperti buku tulis. hehe :)   
 
Kalau kita mengarahkan <a href="http://sijalupangna.blogspot.com/" target="_blank">kursor mouse</a> kita di bagian pojok kanan atas halaman blog, maka halaman tersebut akan kelipat atau kebuka. 
 
Namun hanya sebagian kecil saja dan di dalamnya terdapat gambar (yang 
disesuaikan oleh pemilik blog) yang biasanya kalau di klik <a href="http://sijalupangna.blogspot.com/" target="_blank">akan diarahkan ke suatu halaman lain</a> seperti halaman RSS blog, Fans page Facebook ataupun bisa berupa halaman lainnya. 
 
 
Nah, untuk cara membuatnya ikuti langkah - langkah di bawah ini : 
 1. kalian masuk ke akun blogger kalian. 2. Rancangan => edit html 3. cari kode </head> 4. Kemudian anda copy kan kode di bawah ini tepat di atas kode </head> 
 
<blockquote class="tr_bq">
<script type='text/javascript'>var tujuan =&#39;http://www.facebook.com/pages/Eyang-anom/427305383989192&#39;</script> <script
 
src='http://nazuafreedotblogspotdotcom.googlecode.com/files/pagepeeleffectnazuafreedotblogspotdotcom.js/'
 type='text/javascript'/></blockquote>
 
5. ganti tulisan yang berwarna merah dengan alamat fan page blog anda 6. kemudian simpan template dan refresh blog anda , dan lihat hasilnya.   
Sekian tutorial dari saya jika ada kesalahan saya mohon maaf, semoga bermanfa'at. 
 
 
 </div>

Banyak cara untuk membuat blog kita tampil cantik dan bagus, sehingga akan menarik simpati pengunjung dari blog sobat, salah satunya d...

Baca selengkapnya...

7 Komentar

jalupangna Label: tips dan triks blogger 13.29 7 komentar

Cara Membuat Blockquote dengan menggunakan CSS3 di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmouVTADpQLu1hTbV6iiQ7lJVlbUgjPLqHRKK94bVRMR6aXk3FrvUCk-4km6Ku9hFs4oAQqscw8zvuvcM-J2van2V8xv104_1gUhZdjcbqdO_4ETZ1taa9c4yiLxYBbQKkEcIoCI748FmO/s1600/css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmouVTADpQLu1hTbV6iiQ7lJVlbUgjPLqHRKK94bVRMR6aXk3FrvUCk-4km6Ku9hFs4oAQqscw8zvuvcM-J2van2V8xv104_1gUhZdjcbqdO_4ETZ1taa9c4yiLxYBbQKkEcIoCI748FmO/s1600/css.jpg" /></a></div>
 
Blockquote yang lain daripada yang lain ini dibangun dengan melibatkan 
CSS3 transition, CSS3 transformation, CSS3 border radius, CSS3 text 
shadow dan 3 (tiga) buah background image untuk background blockquote 
dan dua tag span yang kita manfaatkan. Bagaimana cara membuat blockquote
 yang benar-benar lain dari pada yang lain ini? Cocokkah untuk blog Anda ? Adakah manfaatnya? 
 
Blockquote bukanlah "gadis yang 
jelek" atau "gadis kaya raya" yang tak layak dipinang untuk melengkapi 
blog. Aku juga heran kenapa jarang sekali blogger yang memanfaatkan tag 
spesial yang sebenarnya amat pantas dipakai ini, ya? atau 
barangkali tak begitu kenal dengan blockquote? Atau kalian merasa 
antipati terlebih dahulu? Ataukah  Anda ketularan blogger lain yang 
jarang menggunakan blockquote? Coba rasakan betapa mudah 
dan pentingnya memanfaatkan "si gadis jelita ini". Dia bisa digunakan 
untuk wadah teks-teks tertentu yang perlu ditonjolkan di posting !  Anda tak perlu membuat tag baru untuk melakukan itu. Cukup 
blockquote! 
 
 
<div class="gray">
Cara Membuat Blockquote dengan CSS3</div>
<a href="https://www.blogger.com/blogger.g?blogID=2280420673319463854" name="more"></a>Kode CSS: 
 
<blockquote class="tr_bq">
blockquote {          padding: 10px;          margin: 10px 0 10px 20px;          background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);          font: 13px/17px Serif, Times, Helvetica;          font-style: italic;          color: #FFCC99;  /* original code: gubhugreyot.blogspot.com */          text-shadow: 1px 1px 1px #000;          border: 1px ridge  #0099FF;          border-radius: 20px 10px 20px 10px;         -moz-border-radius: 20px 10px 20px 10px;         -webkit-border-radius: 20px 10px 20px 10px;         -o-transition: all 1.2s ease-in;         -moz-transition: all 1.2s ease-in;         -webkit-transition: all 1.2s ease-in; } blockquote:hover {          color: #eee;         -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);         -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);         -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);} blockquote span.bbuka, blockquote span.btutup {          float: left;          margin-right: 5px;          height: 17px;          width: 22px;          background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;         -o-transition: all 1.2s ease-in;         -moz-transition: all 1.2s ease-in;         -webkit-transition: all 1.2s ease-in; } blockquote span.bbtutup {          float: right;          margin-left: 5px;          margin-right: 0;          background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat; } blockquote:hover span.bbuka, blockquote:hover span.btutup {         -o-transform: rotate(1090deg) scale(1.1);         -moz-transform: rotate(1090deg) scale(1.1);         -webkit-transform: rotate(1090deg) scale(1.1); }</blockquote>
 
Cara Menyimpan Kode CSS: 
 
<ol>
<li>Login : Login kee Blogger.<ul class="dua">
<li class="dua">Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".</li>
<li class="dua">Tuliskan "Password (Sandi)".</li>
<li class="dua">KLIK "Login".</li>
</ul>
</li>
<li>Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..</li>
<li>Design/Rancangan : Cari dan klik link Edit HTML.</li>
<li>Cari kode ]]></b:skin>. Letakkan dan simpan semua kode CSS tepat di atasnya.</li>
<li>KLIK SAVE Templates/Simpan Template.</li>
<li>KLIK link Posting.</li>
<li>KLIK Entri Baru/New Entry.</li>
<li>Gunakan blockquote untuk melakukan posting. Anda bisa menggunakan contoh di bawah ini.</li>
<li>Buka hasil posting di halaman blog untuk melihat hasilnya.</li>
</ol>
Contoh bentuk kode untuk posting 
 
Silahkan di copy untuk percobaan! 
 
<blockquote class="tr_bq">
Brazil will expect another commanding performance from Thiago Silva when they take on Ukraine at Derby's Pride Park in an international friendly on Monday.<blockquote> Before today you might not ever interested in using the blockquote, but from now maybe you can change your mind after seeing the beautiful blockquote built using CSS3. A blockquote charming with animation that fits perfectly with your own blog. Built with a simple way of utilizing rounded Corners (CSS3 border radius), CSS3 text-shadow, CSS3 transition, transformation and 3 pieces of CSS3 background-image. Take a look below! Is not this a very interesting blockquote?!<blockquote> The 26-year-old Milan defender was in fine form in last Thursday's 3-0 win over Iran - especially important as his centre-back partner David Luiz had a poor game, obliging Thiago Silva to show off his excellent sense of cover. In the World Cup, Thiago Silva was a reserve to the old firm of Juan and Lucio. Just three months later, he is the rock on which Brazil's defence is based, highlighting the speed of the generational change taking place under new coach Mano Menezes.</blockquote>
 
Catatan: 
 
<ol>
<li>Bila dalam template  Anda sebelumnya sudah ada tag blockquote bawaan template asli, sebaiknya dihapus saja. Cari menggunakan Ctrl+F.</li>
<li>Jika merasa ada kesulitan untuk mencari kode atau yang lain, coba buka Special Tutorials
 (menu di kiri). Di dalamnya terdapat beberapa tutorial penting 
berkaitan dengan modifikasi template termasuk cara cepat cari kode HTML.</li>
<li>Untuk menggunakan blockquote,  Anda harus memasukkan kodenya melalui posting mode "Edit HTML" (ada dua mode: mode Compose dan Edit HTML).</li>
</ol>
 
 
 
</div>

Blockquote yang lain daripada yang lain ini dibangun dengan melibatkan CSS3 transition, CSS3 transformation, CSS3 border radius, CSS3 t...

Baca selengkapnya...

14 Komentar

jalupangna Label: tips dan triks blogger 10.10 14 komentar

Cara membuat textarea indah, cantik dan mempesona di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qvRPAapeHPB3LeNt6gty2VSP4K7iKQrVpRm23Pb01_cSSMrY8AzYPqejCaqHGmpLevizhZsmru97600CAvGjleSOxUj1l4xRvzVvYFVirKQBpz_FK07Q9Qon65S-9eNeFrFzx_Nq3p6B/s1600/textarea.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qvRPAapeHPB3LeNt6gty2VSP4K7iKQrVpRm23Pb01_cSSMrY8AzYPqejCaqHGmpLevizhZsmru97600CAvGjleSOxUj1l4xRvzVvYFVirKQBpz_FK07Q9Qon65S-9eNeFrFzx_Nq3p6B/s320/textarea.jpg" width="320" /></a></div>
 
Textarea bukan sebuah box sederhana saja yang sekedar tampil apa adanya 
untuk wadah link exchange, banner exchange atau kode html dan teks yang 
lain. Dengan sedikit polesan bedak berupa kode CSS dan CSS3, tak 
seorangpun akan menduga bahwa yang mereka lihat adalah sebuah textarea. 
Anda dapat menggunakan textarea penuh gaya ini di blog untuk wadah baru 
yang tampil indah, cantik dan mempesona. 
 
Menghilangkan border bawaan yang berupa warna border dan tebal border, 
serta menghilangkan outline menjadi kunci hingga textarea menampilkan 
diri dalam perwujudan yang berbeda. Tentu saja itu tak cukup. Kode CSS 
dan CSS3 menejadi baju baru yang menjadikan textarea seakan baru keluar 
dari salon dengan dandanan yang serba"wah" dan penampilan "elegan, 
manis dan cantik. 
Kita akan gunakan CSS3 border-radius, CSS3 drop shadow (box shadow), 
CSS3 text-shadow, CSS3 text-shadow, CSS3 Transition serta beberapa kode 
CSS seperti margin, padding, border dan outline. Mengapa kita gunakan 
"outline"? 
 
Outline: none; berfungsi untuk melenyapkan border yang muncul ketika 
bagian di textarea "di klik", baik untuk copy code ataupun sekedar 
sebuah "klik" tak sengaja. Tanpa menghilangkaan "outline" tentu saja 
bagi beberapa yang tahu kode html akan segera sadar bahwa apa yang di 
hadapannya adalah sebuah textarea. Sampeyan bisa tambahkan atau rubah 
beberapa kode CSS yang disertakan di sini bila ingin membuat textarea 
ini tampil dengan gaya yang berbeda. 
 
<div class="gray">
Cara Membuat textarea indah, cantik dan mempesona:</div>
<ol>
<li>Login to blogger.</li>
<li>KLIK link "Design (Rancangan)".</li>
<li>KLIK link "Edit HTML".</li>
<li>Cari kode ]]></b:skin> .</li>
<li>Copy dan patekan kode CSS textarea di atas kode ]]></b:skin>.</li>
<li>KLIK "SAVE Templates (Simpan Template)".</li>
<li>Lanjutkan dengan cara menggunakan xHTML textarea.</li>
</ol>
<div class="gray">
Kode CSS textarea indah, cantik dan mempesona: 
</div>
<div class="gray">
</div>
<div class="gray">
<blockquote class="tr_bq">
 textarea.GRetarea { 
       font-size: 14px; 
       font-family: Arial, Tahoma, Helvetica; 
       border: 0px solid transparent; 
       outline: none; 
       border: 5px solid; 
       border-color: #ccc #aaa #aaa #ccc; 
       border-radius: 12px; 
      -moz-border-radius: 12px; 
      -webkit-border-radius: 12px;       
       background: #eee; 
       box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;   
      -moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555; 
      -webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555; 
       text-shadow: 1px 1px 1px #666; 
       padding: 5px 5px 2px; 
       color: #625F3C; 
       margin: 15px 5px; 
      -o-transition: all 1s ease-out; 
      -moz-transition: all 1s ease-out; 
      -webkit-transition: all 1s ease-out;     
} 
textarea.GRetarea:hover { 
       border-color: #aaa #888 #888 #aaa; 
       border-radius: 8px; 
      -moz-border-radius: 8px; 
      -webkit-border-radius: 8px;       
       background: #fff; 
       color: #111; 
       text-shadow: 1px 1px 1px #aaa; 
       box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;   
      -moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222; 
      -webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222; 
}</blockquote>
 
Cara menggunakan textarea indah, cantik dan mempesona: 
 
Gunakan kode HTML berikut saat digunakan di halaman posting. 
 
<blockquote class="tr_bq">
<textarea class="GReterea" row="6" cols="60"> 
Tuliskan Teks atau Kode HTML di sini !</blockquote>
 
Catatan :
 
<ol>
<li>Textarea berfungsi sebagai wadah 
teks dimana semua bentuk teks akan di tampilkan apa adanya, termasuk 
kode HTML. Jadi bila sampeyan menuliskan kode berbentuk seperti ini : 
<style typt="text/CSS"> maka dalam box textarea akan terlihat 
seperti itu juga (ditampilkan apa adanya sesuai yang dituliskan).</li>
<li>row="6" adalah ukuran tinggi textarea. Rubah nilainya untuk merubah ketinggian textarea ;Semakin kecil akan semakin pendek, sedang apabila diperbesar akan semakin tinggi.</li>
<li>cols="60" adalah ukuran lebar. Semakin besar semakin lebar dan sebaliknya bila diperkecil maka akan semakin berkurang lebarnya.</li>
<li>Ukuran text dapat dirubah dengan merubah nilai pada : font-size: 14px;</li>
</ol>
Semoga bermanfaat... 
 
 </div>
</div>

Textarea bukan sebuah box sederhana saja yang sekedar tampil apa adanya untuk wadah link exchange, banner exchange atau kode html dan t...

Baca selengkapnya...

3 Komentar

jalupangna Label: tips dan triks blogger 09.55 3 komentar

Cara membuat saving mode CSS3 keren dan cantik di blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyGQWT6N-2emgdAmcybD46aa_Khl6ejM2HwygHXFd-uE1C2iafiF9-9H5xM-Wy-PPlKJtoyghexkxtsKn1lhdZNyzFQkQIZxx7KvSPADyvZW818jlOLXMIU5qN7Zf8K-0Ukqt8OGQROkx/s1600/saving+mode.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyGQWT6N-2emgdAmcybD46aa_Khl6ejM2HwygHXFd-uE1C2iafiF9-9H5xM-Wy-PPlKJtoyghexkxtsKn1lhdZNyzFQkQIZxx7KvSPADyvZW818jlOLXMIU5qN7Zf8K-0Ukqt8OGQROkx/s1600/saving+mode.jpg" /></a></div>
 
Setelah beberapa kali penulis blog walking di tetangga sebelah, akhirnya
 penulis menemukan artikel menarik berkaitang dengan postingan membuat 
saving mode dengan CSS3. Dan penulis berinisiatif untuk memposting 
kembali di blog penulis, maklum saja penulis masih newbie di dunia 
blogger dan masih dalam tahap belajar. 
 
 
Hebohnya Energy Saving Mode yang di release 2009 lalu benar-benar 
membuat banyak blogger penasaran dan tertarik untuk ikut menggunakannya 
di blog. Bagi beberapa sobat blogger yang sebelumnya telah menggunakan 
jQuery.1.3.2.js atau jQuery.1.3.2.min.js adalah sebuah keberuntungan 
karena pemanfaatan jquery.1.3.2.min.js dalam desain energy saving mode 
sekaligus dapat digunakan untuk meng-cover kebutuhan blog akan 
jquery.1.3.2.js. 
 
Hal sebaliknya akan terjadi pada blogger yang selama ini blognya sama 
sekali tidak menggunakan jQuery.1.3.2.min.js atau jquery.1.3.2.js untuk 
berbagai fungsi/fasilitas blog. Pemaksaan untuk menggunakan Energy Saving Mode justru bukan sebuah tindakan yang menguntungkan sekaligus
 bukan suatu langkah sebagai cerminan maksud dan tujuan dibuatnya energy
 saving mode. Ya ..., karena jelas-jelas beban blog akan bertambah 
dengan sebuah jQuery.1.3.2.min.js. Sekalipun jquery.1.3.2.min.js tidak 
akan menjadi beban tambahan yang fatal, namun setidaknya beban loading 
pasti akan cukup meningkat. Diluar hal ini "kemubaziran" akan 
terjadi. Yah jika memang tak satupun fungsi lain terdukung dengan 
digunakannya jQuery.1.3.2.min.js yang terdapat di desain Energy Saving 
Mode, trus apa ya nggak rugi jika jQuery.min.1.3.2.min.js yang jelas-jelas menambah beban dan loading blog ini hanya dimanfaatkan "untuk sekedar bisa menggunakan Energy Saving Mode?" 
 
Menyikapi trend baru yang banyak menghanyutkan "nafsu" dan "keinginan" 
untuk ikut-ikutan menggunakan Energy Saving Mode tanpa melihat untung 
ruginya ini (karena bagi yang blognya tidak menggunakan jQuery.1.3.2.min.js jelas bikin kerugian),
 satu desain menarik Energy Saving Mode yang hanya menggunakan kode CSS 
telah coba aku buat. Energy Saving Mode hasil produksi anak negeri yang 
asli dalam negeri ini merupakan wujud kepedulian terhadap sementara 
blogger yang sebenarnya tidak membutuhkan jQuery.1.3.2.min.js dalam 
desain blognya, akan tetapi ingin menggunakan dan memasang Energy Saving
 Mode sebagai upaya mempercantik blog sekaligus untuk ikut mendukung 
upaya penghematan energy bagi dunia. Jika mungkin sampeyan tertarik dan 
ingin melihat seperti apa, sih, Energy Saving Mode tanpa 
jQuery.1.3.2.min.js, cantik atau buruk rupakah dia? Kira-kira cocok atau
 tidakkah buat blog anda? 
 
<div class="blue">
Perbandingan Energy Saving Mode Menggunakan JQuery dan CSS3</div>
<a href="https://www.blogger.com/blogger.g?blogID=2280420673319463854" name="more"></a> 
Energy Saving Mode Menggunakan jQuery.1.3.2.min.js 
<ol>
<li>Kode yang digunakan: Javascipt: 2 kbyte, jquery.1.3.2.min.js: 56 kbyte, kode CSS: 1 kbyte</li>
<li>Energy Saving Mode bekerja secara rutin tiap 10000s (bisa di atur). 
Energy Saving Mode bahkan selalu aktif/bekerja saat pengunjung masih 
menikmati posting (cenderung mengganggu!).</li>
<li>Energy Saving Mode bekerja saat pengunjung meninggalkan blog/web 
selama durasi yang ditentukan (10000s dan bisa diatur durasinya).</li>
<li>Menggunakan animasi gerak dan opacity.</li>
<li>Harus memanfaatkan file Hosting (javascript dan jQuery.1.3.2.min.js).</li>
<li>Efek penggunaan Energy Saving Mode hanya terlihat di halaman blog.</li>
<li>Bekerja dengan sempurna di semua browser meskipun bentuk animasi terjadi pergeseran tempat (saat mulai aktif).</li>
</ol>
Energy Saving Mode Menggunakan CSS3 
<ol>
<li>Kode yang digunakan: Kode CSS: 4 kbyte (super irit).</li>
<li>Energy Saving Mode bekerja secara rutin tiap 10s (bisa di atur). 
Energy Saving Mode Using CSS3 hanya bekerja ketika cursor berada di luar
 halaman blog. Selama cursor di atas halaman blog maka Energy Saving 
Mode tidak akan aktif sehingga seluruh aktifitas pengunjung/pembaca 
tidak akan terganggu..</li>
<li>Menggunakan animasi gerak dan opacity dan beberapa efek lain seperti background color.</li>
<li>Tidak perlu diupload di file Hosting (langsung simpan di template alias praktis).</li>
<li>Efek penggunaan Energy Saving Mode akan terlihat di Halaman Blog dan
 di Page Elemen/Elemen Laman (tidak mengganggu karena saat Elemen Laman 
tersentuh cursor maka teks yang tertulis dalam Energy Saving Mode akan 
terbang melenyapkan diri!).</li>
<li>Bekerja dengan baik di semua browser. Animasi hanya bekerja di 
browser yang mendukung CSS3 (Opera 1063, Mozilla 4 beta 0 ke atas , 
Google Chrome dan Safari serta beberapa browser lain). 
nb: mulai sekarang gunakan selalu browser yang sudah mendukung CSS3 karena blog menjadi lebih enak untuk dijelajahi dan dinikmati</li>
</ol>
Dari perbandingan di atas, kiranya anda bisa menentukan sendiri kira-kira lebih nyaman menggunakan yang mana. 
 
Kode CSS Energi Saving Mode Menggunakan CSS3: 
 
<blockquote class="tr_bq">
* { margin:0; padding: 0; } 
#navbar-iframe { 
       height: 0; 
       opacity: 0.0; 
       -o-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
       -moz-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
       -webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
} 
body:hover #navbar-iframe { 
       height: 30px; 
       opacity: 1.0; 
       -o-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
       -moz-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
       -webkit-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
} 
body .bgsGR_esm { 
       position: fixed; 
       width: 100%; 
       top: 0; 
       height: 100%; 
       opacity: 0.97; 
       filter: alpha(opacity=97); 
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)"; 
       background: #000; 
       border-bottom: 3px solid transparent; 
       z-index: 99999999; 
       -o-transition: all 3s ease-in-out 10s; 
       -moz-transition: all 3s ease-in-out 10s; 
       -webkit-transition: all 3s ease-in-out 10s; 
} 
body:hover .bgsGR_esm { 
       opacity: 0.0; 
       height: 0.001%; 
       filter: alpha(opacity=0); 
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
       background: #0a7f01; 
       border-bottom: 5px solid #333; 
       -o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s; 
       -moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s; 
       -webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s; 
} 
body .bgsGR_esm p.esm1 { 
       margin: 0; 
       padding: 0; 
       width: 92%; 
       background: transparent; 
       font-size: 100px; 
       font-family: "Serif", Times New Roman; 
       color: #333; /* original code by: gubhugreyot.blogspot.com */ 
       text-shadow: 1px 1px 2px #ccc; 
       position: relative; 
       margin-top: 200px; 
       line-height: 20px; 
       font-weight: bold; 
       text-align: center; 
       border: 30px solid transparent; 
       border-radius: 20px; 
       -o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s; 
       -moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s; 
       -webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s; 
} 
body:hover .bgsGR_esm p.esm1{ 
       font-size: 10px; 
       color: red; 
       width: 25%; 
       margin: 340px 0 0 300px; 
       padding: 25px; 
       background: #aaa; 
       border: 20px solid #888; 
       border-radius: 170px; 
       -o-transform:translate(600px,-500px) rotate(360deg) scale(0.2); 
       -moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2); 
       -webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2); 
       -o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in; 
       -moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in; 
       -webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in; 
} 
.bgsGR_esm p span.esm2 { 
       font-size: 18px; 
       opacity: 0.5; 
       filter: alpha(opacity=50); 
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
       display: block; /* original code by: gubhugreyot.blogspot.com */ 
       text-align: center; 
       width: 300px; 
       margin: -10px auto; 
       font-weight: normal; 
       padding: 2px 8px; 
       background: #000; 
       border: 1px solid #333; 
       border-radius: 0; 
       color: #0000FF; 
       text-shadow: none; 
       font-family: Arial, Helvetica, sans-serif; 
       -o-transition: 1s ease-out; 
       -moz-transition: 1s ease-out; 
       -webkit-transition: 1s ease-out; 
} 
.bgsGR_esm:hover p span.esm2{ 
       font-size: 10px; 
       width: 200px; /* original code by: gubhugreyot.blogspot.com */ 
       padding: 0; 
} 
.bgsGR_esm p span.esm3{ 
       color: #ccc; 
       font-family: "Tahoma", Arial, Helvetica; 
       display: block; 
       margin:10px auto; 
       background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/ESM3H2V70.png) left center repeat-x; 
       background: -moz-linear-gradient(top,#666,#111); 
       background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666)); 
       opacity: 0.6; 
       filter: alpha(opacity=60); 
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
       width: 250px; 
       text-shadow: 1px 1px 1px #000; 
       border: 1px solid #333; 
       border-radius: 4px; 
       padding:2px 10px; 
       font-size: 12px; 
       font-weight: normal; 
       line-height: 16px; 
} 
.bgsGR_esm .by_gubhugreyot { 
       margin-left: 30px; 
       text-align: left; 
       color: #015828; 
       font-size: 12px; 
       font-weight: normal; 
       position: absolute; 
       top: 550px; /* original code by: gubhugreyot.blogspot.com */ 
       width: 100%; 
       height: 20px; 
       left: 0; 
} 
.bgsGR_esm .by_gubhugreyot span.esm4 { 
       color: #aaa; 
       font-style:italic; 
}</blockquote>
 
<ol>
<li>Desain Energy Saving Mode sekaligus menyertakan animasi pada 
navbar. Jika anda suka menampilkan navbar sebagai pelengkap blog, 
maka kode ini dapat langsung disimpan di template. Sebuah animasi cantik
 tidak hanya terjadi di Energy Saving Mode, namun animasi juga akan 
terjadi pada navbar. Sangat cantik! Cobalah jika anda tidak percaya!</li>
<li>Jika anda tidak akan menampilkan navbar, silahkan rubah ganti kode yang seperti berikut dengan kode baru di bawahnya.  </li>
</ol>
 
<blockquote class="tr_bq">
#navbar-iframe { 
       height: 0; 
       opacity:0.0;        
       -o-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
       -moz-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
       -webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
} 
body:hover #navbar-iframe { 
       height: 30px; 
       opacity: 1.0; 
       -o-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
       -moz-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
       -webkit-transition: height 2s linear 2.5s, opacity 2.5s linear 2.5s; 
} </blockquote>
 
Kode CSS pengganti: 
 
<blockquote class="tr_bq">
 #navbar-iframe { 
       display: none; 
}</blockquote>
 
xHTML Energy Saving Mode Using CSS3: 
 
<blockquote class="tr_bq">
<div class='bgsGR_esm'> 
 
gubhug reyot 
Energy Saving Mode Using CSS3 
Move your mouse to go back to the page! Gerakkan mouse anda dan silahkan nikmati kembali posting kami! 
 
<div class='by_gubhugreyot'> 
Copyright 2010 gubhugreyot.blogspot.com - All rights reserved</div> 
</div></blockquote>
 
<ol>
<li>Silahkan anda rubah teks yang cetak tebal untuk menampilkan teks dalam bentuk berbeda.</li>
<li>Teks "gubhug reyot yang cetak tebal menggunakan font yang cukup besar (font-size: 100px;).
 Jika ingin menuliskan nama blog atau nama yang lain dengan teks cukup 
panjang, sampeyan bisa kecilkan ukuran font yang terdapat dalam syntax. </li>
</ol>
<blockquote class="tr_bq">
body .bgsGR_esm p.esm1{font-size: 100px;}</blockquote>
 
Ukuran font bisa diperkecil (misalnya 50px) hingga bisa terlihat ideal di blog! 
 
Cara Menggunakan Kode Energy Saving Mode dengan CSS3: 
 
<ol>
<li>Login ke blogger : Gunakan User Name (Nama Pengguna) atau Email Address dan Password (Sandi). Setelah semua tertulis dengan benar, klik "Login".</li>
<li>Dasboard/Dasbor : Cari dan KLIK link "Design/Rancangan".</li>
<li>Design/Rancangan : Cari dan klik "Edit HTML".</li>
<li>Edit HTML : Amankan template terlebih dahulu (back-up templates).<ul class="dua">
<li class="dua">KLIK Download Template Lengkap.</li>
<li class="dua">Simpan file Template di folder PC.</li>
<li class="dua">Kembali ke halaman "Edit HTML".</li>
</ul>
</li>
<li>Cari kode ]]></b:skin> dan letakkan kode CSS di atasnya!</li>
<li>Cari kode <body> Gunakan Ctrl+F untuk memudahkan pencarian kode!</li>
<li>Copy-Paste : Copy xHTML Energy Saving Mode Using CSS3 dan letakkan di bawah kode <body>.</li>
<li>SAVE Templates/Simpan Template : KLIK SAVE Templates.</li>
<li>Buka blog untuk melihat hasilnya!</li>
</ol>
Catatan/Keterangan: 
<ul>
<li>Untuk membuat layar menjadi gelap penuh saat Energy Saving Mode 
bekerja, rubahlah nilai opacity: 0.97; dan filter:alpha ... opacity=97, 
serta -ms-filter: ... opacity=97 menjadi 1.0 dan 100.</li>
<li>Untuk mengatur durasi bekerjanya "Energy Saving Mode using CSS3, atur nilai pada kode berikut:</li>
</ul>
<blockquote class="tr_bq">
 body .bgsGR_esm{ 
       -o-transition: all 3s ease-in-out 10s; 
       -moz-transition: all 3s ease-in-out 10s; 
       -webkit-transition: all 3s ease-in-out 10s; 
} 
body .bgsGR_esm p.esm1 { 
       -o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s; 
       -moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s; 
       -webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s; 
}</blockquote>
 
<ul>
<li>Angka 10s merupakan durasi aktifnya Energy Saving Mode. </li>
<li>Jika navbar digunakan, anda juga harus mengganti angka juga : </li>
</ul>
<blockquote class="tr_bq">
#navbar-iframe {      
-o-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
-moz-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
-webkit-transition: height 2s linear 8s, opacity 2.5s linear 6s; 
}</blockquote>
 
<ul>
<li>Pengurangan nilai sebesar -4s dan -6s dari durasi aktifnya Energy Saving Mode using CSS3 (10s). </li>
</ul>
 
Semoga bermanfaat! 
 
Sumber: http://gubhugreyot.blogspot.com 
 </div>

Setelah beberapa kali penulis blog walking di tetangga sebelah, akhirnya penulis menemukan artikel menarik berkaitang dengan postingan ...

Baca selengkapnya...

4 Komentar

jalupangna Label: tips dan triks blogger 09.34 4 komentar