tag:blogger.com,1999:blog-27260936446084161442024-03-19T18:21:14.109+07:00Dhecun BlogKumpulan script untuk mempercantik tampilan blogspotAnonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.comBlogger186125tag:blogger.com,1999:blog-2726093644608416144.post-57426036947276337162013-01-14T22:08:00.000+07:002013-01-14T22:08:01.151+07:00Kumpulan Generator<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 5px;background-color:#3b5998;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1O7gDoyHl4TiYyRbcvFaCVf0lKvlmv65aYip9-hZYKwLHvgL26ENesxCMTdo30HLlO2pDnGOLtGzeJD3QzTpT2bfPTVr2j02wkeZeQzqDOIe0hyphenhyphenDaGw4gC5ytOMcY_vn939dId1fAZfE/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right;color:#fff;font:normal 11px Verdana;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Verdana;padding:5px 5px;background:#e0e0e0;-moz-border-radius: 5px; border-radius: 5px;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#222;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhofECmAq8-XgXgpd7skBNf6oThyhxUa97lCEfOFAPEz0GYjw_9yyHpDTjDCUkY_eUZ-lFG3_ksbVwCZUOPXSLbitc07dsuJRzNwyvN-NDOsm8eNUIfH_FX2ZpwmctGkpVetB8PSXtH3Xo/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right;font-weight:bold;}
</style>
<script type="text/javascript" src="http://blog-dhecun.googlecode.com/files/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('fast');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('fast');
$(this).toggleClass('active').next().slideDown('fast');
}
});
});
</script>
<div id="accordion">
<h2>Kode Warna HTML</h2>
<div class="content">
<center><button onclick="window.open('http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf', 'newwnd', 'width=500px, height=500px,menubar=1,toolbar=1,location=1,resizable=1,status=1,scrollbars=1,left=0,top=0');return true;"><b>Kode warna HTML 1</b></button>
<button onclick="window.open('http://www.2createawebsite.com/build/color.swf', 'newwnd', 'width=500px, height=500px,menubar=1,toolbar=1,location=1,resizable=1,status=1,scrollbars=1,left=0,top=0');return true;"><b>Kode warna HTML 2</b></button>
<button onclick="window.open('http://www.2createawebsite.com/build/col.swf', 'newwnd', 'width=500px, height=500px,menubar=1,toolbar=1,location=1,resizable=1,status=1,scrollbars=1,left=0,top=0');return true;"><b>Kode warna HTML 3</b></button></center>
<hr/>
<center><script language="JavaScript">
<!-- Crack:masukkan nama blog kalian kalau mau -->
<!-- isi apa saja yah /-->
<!-- Hati hati saja mengubah kodenya dik-->
<!-- moga bermanfaat yah -->
<!-- Begin
function showColor(val) {
document.colorform.hexval.value = val;
}
// End -->
</script>
<form xmlns="http://www.w3.org/1999/xhtml" name="colorform">
<b>Color Picker</b><br/>
<map name="colmap">
<area href="javascript:showColor('#00FF00')" coords="1,1,7,10" shape="rect"/>
<area href="javascript:showColor('#00FF33')" coords="9,1,15,10" shape="rect"/>
<area href="javascript:showColor('#00FF66')" coords="17,1,23,10" shape="rect"/>
<area href="javascript:showColor('#00FF99')" coords="25,1,31,10" shape="rect"/>
<area href="javascript:showColor('#00FFCC')" coords="33,1,39,10" shape="rect"/>
<area href="javascript:showColor('#00FFFF')" coords="41,1,47,10" shape="rect"/>
<area href="javascript:showColor('#33FF00')" coords="49,1,55,10" shape="rect"/>
<area href="javascript:showColor('#33FF33')" coords="57,1,63,10" shape="rect"/>
<area href="javascript:showColor('#33FF66')" coords="65,1,71,10" shape="rect"/>
<area href="javascript:showColor('#33FF99')" coords="73,1,79,10" shape="rect"/>
<area href="javascript:showColor('#33FFCC')" coords="81,1,87,10" shape="rect"/>
<area href="javascript:showColor('#33FFFF')" coords="89,1,95,10" shape="rect"/>
<area href="javascript:showColor('#66FF00')" coords="97,1,103,10" shape="rect"/>
<area href="javascript:showColor('#66FF33')" coords="105,1,111,10" shape="rect"/>
<area href="javascript:showColor('#66FF66')" coords="113,1,119,10" shape="rect"/>
<area href="javascript:showColor('#66FF99')" coords="121,1,127,10" shape="rect"/>
<area href="javascript:showColor('#66FFCC')" coords="129,1,135,10" shape="rect"/>
<area href="javascript:showColor('#66FFFF')" coords="137,1,143,10" shape="rect"/>
<area href="javascript:showColor('#99FF00')" coords="145,1,151,10" shape="rect"/>
<area href="javascript:showColor('#99FF33')" coords="153,1,159,10" shape="rect"/>
<area href="javascript:showColor('#99FF66')" coords="161,1,167,10" shape="rect"/>
<area href="javascript:showColor('#99FF99')" coords="169,1,175,10" shape="rect"/>
<area href="javascript:showColor('#99FFCC')" coords="177,1,183,10" shape="rect"/>
<area href="javascript:showColor('#99FFFF')" coords="185,1,191,10" shape="rect"/>
<area href="javascript:showColor('#CCFF00')" coords="193,1,199,10" shape="rect"/>
<area href="javascript:showColor('#CCFF33')" coords="201,1,207,10" shape="rect"/>
<area href="javascript:showColor('#CCFF66')" coords="209,1,215,10" shape="rect"/>
<area href="javascript:showColor('#CCFF99')" coords="217,1,223,10" shape="rect"/>
<area href="javascript:showColor('#CCFFCC')" coords="225,1,231,10" shape="rect"/>
<area href="javascript:showColor('#CCFFFF')" coords="233,1,239,10" shape="rect"/>
<area href="javascript:showColor('#FFFF00')" coords="241,1,247,10" shape="rect"/>
<area href="javascript:showColor('#FFFF33')" coords="249,1,255,10" shape="rect"/>
<area href="javascript:showColor('#FFFF66')" coords="257,1,263,10" shape="rect"/>
<area href="javascript:showColor('#FFFF99')" coords="265,1,271,10" shape="rect"/>
<area href="javascript:showColor('#FFFFCC')" coords="273,1,279,10" shape="rect"/>
<area href="javascript:showColor('#FFFFFF')" coords="281,1,287,10" shape="rect"/>
<area href="javascript:showColor('#00CC00')" coords="1,12,7,21" shape="rect"/>
<area href="javascript:showColor('#00CC33')" coords="9,12,15,21" shape="rect"/>
<area href="javascript:showColor('#00CC66')" coords="17,12,23,21" shape="rect"/>
<area href="javascript:showColor('#00CC99')" coords="25,12,31,21" shape="rect"/>
<area href="javascript:showColor('#00CCCC')" coords="33,12,39,21" shape="rect"/>
<area href="javascript:showColor('#00CCFF')" coords="41,12,47,21" shape="rect"/>
<area href="javascript:showColor('#33CC00')" coords="49,12,55,21" shape="rect"/>
<area href="javascript:showColor('#33CC33')" coords="57,12,63,21" shape="rect"/>
<area href="javascript:showColor('#33CC66')" coords="65,12,71,21" shape="rect"/>
<area href="javascript:showColor('#33CC99')" coords="73,12,79,21" shape="rect"/>
<area href="javascript:showColor('#33CCCC')" coords="81,12,87,21" shape="rect"/>
<area href="javascript:showColor('#33CCFF')" coords="89,12,95,21" shape="rect"/>
<area href="javascript:showColor('#66CC00')" coords="97,12,103,21" shape="rect"/>
<area href="javascript:showColor('#66CC33')" coords="105,12,111,21" shape="rect"/>
<area href="javascript:showColor('#66CC66')" coords="113,12,119,21" shape="rect"/>
<area href="javascript:showColor('#66CC99')" coords="121,12,127,21" shape="rect"/>
<area href="javascript:showColor('#66CCCC')" coords="129,12,135,21" shape="rect"/>
<area href="javascript:showColor('#66CCFF')" coords="137,12,143,21" shape="rect"/>
<area href="javascript:showColor('#99CC00')" coords="145,12,151,21" shape="rect"/>
<area href="javascript:showColor('#99CC33')" coords="153,12,159,21" shape="rect"/>
<area href="javascript:showColor('#99CC66')" coords="161,12,167,21" shape="rect"/>
<area href="javascript:showColor('#99CC99')" coords="169,12,175,21" shape="rect"/>
<area href="javascript:showColor('#99CCCC')" coords="177,12,183,21" shape="rect"/>
<area href="javascript:showColor('#99CCFF')" coords="185,12,191,21" shape="rect"/>
<area href="javascript:showColor('#CCCC00')" coords="193,12,199,21" shape="rect"/>
<area href="javascript:showColor('#CCCC33')" coords="201,12,207,21" shape="rect"/>
<area href="javascript:showColor('#CCCC66')" coords="209,12,215,21" shape="rect"/>
<area href="javascript:showColor('#CCCC99')" coords="217,12,223,21" shape="rect"/>
<area href="javascript:showColor('#CCCCCC')" coords="225,12,231,21" shape="rect"/>
<area href="javascript:showColor('#CCCCFF')" coords="233,12,239,21" shape="rect"/>
<area href="javascript:showColor('#FFCC00')" coords="241,12,247,21" shape="rect"/>
<area href="javascript:showColor('#FFCC33')" coords="249,12,255,21" shape="rect"/>
<area href="javascript:showColor('#FFCC66')" coords="257,12,263,21" shape="rect"/>
<area href="javascript:showColor('#FFCC99')" coords="265,12,271,21" shape="rect"/>
<area href="javascript:showColor('#FFCCCC')" coords="273,12,279,21" shape="rect"/>
<area href="javascript:showColor('#FFCCFF')" coords="281,12,287,21" shape="rect"/>
<area href="javascript:showColor('#009900')" coords="1,23,7,32" shape="rect"/>
<area href="javascript:showColor('#009933')" coords="9,23,15,32" shape="rect"/>
<area href="javascript:showColor('#009966')" coords="17,23,23,32" shape="rect"/>
<area href="javascript:showColor('#009999')" coords="25,23,31,32" shape="rect"/>
<area href="javascript:showColor('#0099CC')" coords="33,23,39,32" shape="rect"/>
<area href="javascript:showColor('#0099FF')" coords="41,23,47,32" shape="rect"/>
<area href="javascript:showColor('#339900')" coords="49,23,55,32" shape="rect"/>
<area href="javascript:showColor('#339933')" coords="57,23,63,32" shape="rect"/>
<area href="javascript:showColor('#339966')" coords="65,23,71,32" shape="rect"/>
<area href="javascript:showColor('#339999')" coords="73,23,79,32" shape="rect"/>
<area href="javascript:showColor('#3399CC')" coords="81,23,87,32" shape="rect"/>
<area href="javascript:showColor('#3399FF')" coords="89,23,95,32" shape="rect"/>
<area href="javascript:showColor('#669900')" coords="97,23,103,32" shape="rect"/>
<area href="javascript:showColor('#669933')" coords="105,23,111,32" shape="rect"/>
<area href="javascript:showColor('#669966')" coords="113,23,119,32" shape="rect"/>
<area href="javascript:showColor('#669999')" coords="121,23,127,32" shape="rect"/>
<area href="javascript:showColor('#6699CC')" coords="129,23,135,32" shape="rect"/>
<area href="javascript:showColor('#6699FF')" coords="137,23,143,32" shape="rect"/>
<area href="javascript:showColor('#999900')" coords="145,23,151,32" shape="rect"/>
<area href="javascript:showColor('#999933')" coords="153,23,159,32" shape="rect"/>
<area href="javascript:showColor('#999966')" coords="161,23,167,32" shape="rect"/>
<area href="javascript:showColor('#999999')" coords="169,23,175,32" shape="rect"/>
<area href="javascript:showColor('#9999CC')" coords="177,23,183,32" shape="rect"/>
<area href="javascript:showColor('#9999FF')" coords="185,23,191,32" shape="rect"/>
<area href="javascript:showColor('#CC9900')" coords="193,23,199,32" shape="rect"/>
<area href="javascript:showColor('#CC9933')" coords="201,23,207,32" shape="rect"/>
<area href="javascript:showColor('#CC9966')" coords="209,23,215,32" shape="rect"/>
<area href="javascript:showColor('#CC9999')" coords="217,23,223,32" shape="rect"/>
<area href="javascript:showColor('#CC99CC')" coords="225,23,231,32" shape="rect"/>
<area href="javascript:showColor('#CC99FF')" coords="233,23,239,32" shape="rect"/>
<area href="javascript:showColor('#FF9900')" coords="241,23,247,32" shape="rect"/>
<area href="javascript:showColor('#FF9933')" coords="249,23,255,32" shape="rect"/>
<area href="javascript:showColor('#FF9966')" coords="257,23,263,32" shape="rect"/>
<area href="javascript:showColor('#FF9999')" coords="265,23,271,32" shape="rect"/>
<area href="javascript:showColor('#FF99CC')" coords="273,23,279,32" shape="rect"/>
<area href="javascript:showColor('#FF99FF')" coords="281,23,287,32" shape="rect"/>
<area href="javascript:showColor('#006600')" coords="1,34,7,43" shape="rect"/>
<area href="javascript:showColor('#006633')" coords="9,34,15,43" shape="rect"/>
<area href="javascript:showColor('#006666')" coords="17,34,23,43" shape="rect"/>
<area href="javascript:showColor('#006699')" coords="25,34,31,43" shape="rect"/>
<area href="javascript:showColor('#0066CC')" coords="33,34,39,43" shape="rect"/>
<area href="javascript:showColor('#0066FF')" coords="41,34,47,43" shape="rect"/>
<area href="javascript:showColor('#336600')" coords="49,34,55,43" shape="rect"/>
<area href="javascript:showColor('#336633')" coords="57,34,63,43" shape="rect"/>
<area href="javascript:showColor('#336666')" coords="65,34,71,43" shape="rect"/>
<area href="javascript:showColor('#336699')" coords="73,34,79,43" shape="rect"/>
<area href="javascript:showColor('#3366CC')" coords="81,34,87,43" shape="rect"/>
<area href="javascript:showColor('#3366FF')" coords="89,34,95,43" shape="rect"/>
<area href="javascript:showColor('#666600')" coords="97,34,103,43" shape="rect"/>
<area href="javascript:showColor('#666633')" coords="105,34,111,43" shape="rect"/>
<area href="javascript:showColor('#666666')" coords="113,34,119,43" shape="rect"/>
<area href="javascript:showColor('#666699')" coords="121,34,127,43" shape="rect"/>
<area href="javascript:showColor('#6666CC')" coords="129,34,135,43" shape="rect"/>
<area href="javascript:showColor('#6666FF')" coords="137,34,143,43" shape="rect"/>
<area href="javascript:showColor('#996600')" coords="145,34,151,43" shape="rect"/>
<area href="javascript:showColor('#996633')" coords="153,34,159,43" shape="rect"/>
<area href="javascript:showColor('#996666')" coords="161,34,167,43" shape="rect"/>
<area href="javascript:showColor('#996699')" coords="169,34,17Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-20460427250412448212013-01-13T16:23:00.000+07:002013-01-13T16:23:28.549+07:0024 Generator CSS3<span style="font-family: Verdana, sans-serif;">Pada posting kali ini </span><b style="font-family: Verdana, sans-serif;"><a href="http://dhecun.blogspot.com/" target="_blank">Dhecun Blog</a></b><span style="font-family: Verdana, sans-serif;"> akan coba memperkenalkan <b>24 Generator CSS3</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">Semoga dengan adanya aplikasi ini , akan dapat memudahkan anda untuk mendapatkan susunan CSS3 dengan cepat.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>1. <a href="http://www.css3maker.com/" target="_blank">CSS3.0 Maker Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Ini adalah perangkat gratis untuk berlatih css , nilai properti memungkinkan anda untuk menghasilkan Cascading Style Sheets sederhana untuk situs atau blog anda.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnAZedzLde_ydoJ-rndimxXCMF3Lo7MxaPTGtRr3IwiEL2xZDGGVmjiSPH0uSh_vpcuMj-QikLP55BU9NelIcLuw-5L-rVq1bdC_lyY1uTCpLRKHbZu9Rh4rGnO8dFhEwyp2R4tbjPvnYr/s320/a1.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<span style="font-family: Verdana, sans-serif;"><b>2. <a href="http://css3please.com/" target="_blank">CSS3 Please</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Adalah cross-browser CSS3 aturan generator.</span><br />
<span style="font-family: Verdana, sans-serif;">Dengan generator ini anda dapat dengan mudah mengedit CSS3.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6qfyeAQY2lDo1PlpCI7vYSp5yA6EPOICeYR0InUroaBpD8zew-NVOm26kIHWfXm4fcznurfTZDTHrW6cUP2P_YBSxm812o0Zu6_T9YgxQhgpNLaXh5xjdq5nuw1uB2flweJWcUoN7p_S/s320/a2.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>3. <a href="http://css-tricks.com/examples/ButtonMaker" target="_blank">CSS3 Button Maker</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Ini adalah CSS3 button keren , alat pembuat dan memberi anda berbagai pilihan untuk menggambar sesuatu , memilih warna untuk membuat sendiri CSS3 button.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGkbZqalz8cGtR9FFOmCToKzCk1FwpFQHq4pkGAaZizYVA2B9um8qselRXd5S4ED5RwFiGtSEeLYrUS5noyLzbrRZ3IC7jHVTRgpD8etBYavzf2DCpemB5zwW9C7PMx9WVJksSTINnd8_N/s320/a3.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>4. <a href="http://css3pie.com/" target="_blank">CSS3 Pie</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Internet explorer CSS3 , alat progresif membuat Internet Explorer 6-8 mampu rendering beberapa sifat yang paling berguna pada CSS3 dengan fitur seperti sudut dibulatkan , bayangan lembut dan gradien.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLivXZymY_52KKs3wuxd4pFW3crOEh48Ggnnwb5A72bfVVgWiv8HxiFNyEIBT8nwbnvQGVrbMI1zkinX23_NlmCZ944Nrz9zwtrjTr9vkRR6mA79JnWPuhJCIhwjKey-hBRDJgGcxqpo7i/s320/a4.jpg" /><br />
<br />
<br />
<span style="font-family: Verdana, sans-serif;"><b>5. <a href="http://css3generator.com/" target="_blank">CSS3 Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Aplikasi CSS3 online ini , akan membuat anda menghasilkan CSS3 properti untuk radius perbatasan , bayangan kotak , bayangan teks , RGBA , font , beberapa kolom , mengubah ukuran kotak , kotak ukuran dan garis besar.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Hm9NBoeMk59lFCGzr6YVqd9xynLrCg4eI1Z7QYJMgatHBAWhylcb2Yfa0EtTT47_iOf31SS1XnyySc6aotq9dQqA9S1-RH64yz681cSYg7NPRnRMJL0WwDDVS08LCcb4pfF7GtsclsCA/s320/a5.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<span style="font-family: Verdana, sans-serif;"><b>6. <a href="http://css3.mikeplate.com/" target="_blank">CSS3 Playground</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Dibuat oleh freelance Lempeng Mike serta mendukung berbagai CSS3 properti , satu-satunya alat yang memungkinkan anda untuk melihat efek pada lebih dari satu unsur dan mengubah isi kotak.</span><br />
<span style="font-family: Verdana, sans-serif;">Menakjubkan bukan...!!!</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir7_fhTLkGythOVqpvs5L_yKGbvt8je3JLDuYdh5HugItMGJVY7qvnrVZyN_D-3Ec1Q2gQU2ktvfwHg4mOND0L0i5Np9G__0vfhwn__LWcAC0a_5Peag3Bd2I27mVddLBSwgnIGtXuz2A0/s1600/q1.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<span style="font-family: Verdana, sans-serif;"><b>7. <a href="http://gradients.glrzad.com/" target="_blank">CSS3 Gradient Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Generator CSS3 adalah alat yang berguna untuk mendapatkan berbagai hasil gradien dan menyediakan antar muka pengguna grafis yang sederhana untuk bekerja dengan CSS webkit.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigfP8KipyOgznH5jR4XcwDWxYtImvsOZwTrm24gUms8Zpgwpkc-_DpfTn9ehZdBTxazPBrMxC8zfr95RoXj33iFuDAfpx-xKuVG1MqYFajR07dJD2OdIRtlcb0u9NkvzkOPv7VkuXWFhsG/s320/a7.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>8. <a href="http://css3menu.com/" target="_blank">CSS3 Menu</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Gratis dan menakjubkan dari CSS3 menu generator yang memungkinkan anda menghasilkan menu css dan tombol dengan CSS3 sudut bulat , gradien CSS3 dan CSS3 bayangan.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt9trE-aQXmyv4AFl6BIfUdHxFloQkjJj0Eqd5h4lD-XmA9TTHzA7BAfbCr-r47xJa7oKuDFOcOUiSP_fCmsz0m9mvlLtNSOi4SfYlsddmVitimNRH7Lh3yxoxsZGYsEHNfWaWlxJWICWZ/s320/a8.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>9. <a href="http://css3gen.com/" target="_blank">CSS3 Gen</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Generator CSS3 membantu anda untuk membuat potongan berguna untuk radius perbatasan , bayangan kotak dan bayangan teks dengan mudah.</span><br />
<span style="font-family: Verdana, sans-serif;">Cukup pilih elemen CSS3 , menyesuaikannya pada browser dan kemudian paste kan ke bagian yang diperlukan.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF3VP5Pyd_sfcL8ilaGIUU6gixXHqzPVsC9l1xacIcXmo4C3eLdppLlNes8_yeCl8eQdBnIcAhWNlJjT0nOZoG2HQ3VLdlhZpjYw6mkgk_rnLmNHnaityLS-iQagvpdFDUtXGpsrgHFpf2/s320/a9.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>10. <a href="http://www.cssportal.com/css3-rounded-corner" target="_blank">CSS3 Rounded Corner Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Adalah alat yang berguna dan membantu anda untuk menghasilkan kode yang diperlukan , yang digunakan untuk membuat sudut dibulatkan (border-radius) dengan hak CSS3 properti untuk halaman Web anda.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyO5G4MK2mTwtwuYYD0OTsr4a1-bixgwSd2b0Tsz3yHBZEH9uuRpTUX4nhgBcKp4TUSXe0xw6fzNCD6Jxazr66XTaWDxgAC1s30EugpkO7xYokNhe3Tp0o_VI41boy3n0En8jtM59DONRa/s320/a10.jpg" /><br />
<br />
<span style="font-family: Verdana, sans-serif;"><b>11. <a href="http://css3clickchart.com/#box-sizing" target="_blank">CSS3 Click Chart</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Menampilkan semua properti css baru dengan judul di klik yang terbuka kotak di bagian bawah halaman untuk informasi pada fitur tertentu.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtjiXb5RfaXuT5FVj4ghdYYdv3a3yZzPv7Ws1D2t8gJOY5FsC6vTyHP_VbMzZokRskwaAGp-B_Da_VQRljJin-mMnWC3PGcQm_Fs1RKMqlO7w-7HhV4Aky2hUT0wQ4cxp_XrbiTwRWqvsb/s320/a11.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>12. <a href="http://tools.css3.info/selectors-test/test.html" target="_blank">CSS3 Selectors Test</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Ini adalah aplikasi yang menakjubkan serta memungkinkan anda untuk melakukan tes kecil yang sedang digunakan bersama-sama untuk menentukan apakah browser kalian akan bekerja dengan selector CSS atau tidak , dan jika ada CSS tidak kompatibel dengan CSS3 tes Selectors maka akan ditandai secara otomatis.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemPpNtSz0PHQ40n5dYcnkyqOFYhRD407IwAhumTt-I5zM2IYMWC4xLtkJ0tEf9_Mf78vLZVvPIY_1anixyOtL-7e86ziELgNopXZO7n2m61YQsklK78U7QcMHr5Qhvb_-q_LfOVsyxFXZ/s320/a12.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>13. <a href="http://freehtml5templates.com/gradientgenerator/gradient-generator.php" target="_blank">Quick 3-Color CSS3 Gradient Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Aplikasi ini berguna membuat gradien linier dan radial dengan prosedur sederhana dan mudah.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWr74tVsvxM_CD0fjthTZpJlKPbB1Iq0cQGTx-j7c1FUf6fauS55MKu9Vu2oaui8nPRymB-JSyFxm-g33naeUKpZB84b_B502jfes_rosQm55Jui7xdGO7CD1xz3kvDC5eBfaG__85WPj1/s320/a13.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>14. <a href="http://border-radius.com/" target="_blank">CSS Border Radius Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Ini alat generator membantu anda untuk membuat gaya sudut melengkung.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmrx4FhfKtjoodc7VSyWDtrxmjyfbESPLEPmQAsDwhKZPCx5MXOnqNux3hkvR81ugohW_n0AeUtYYOpWDm2L-j0PrgtyZN6466yXjQbsMCZdtpdDtEaRAW1GrBi6f4pz3O85mzWY1P8Ik/s320/a14.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>15. <a href="http://border-image.com/" target="_blank">Border Image Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Aplikasi ini akan membantu anda untuk menghasilkan kode , untuk properti radius perbatasan dan memungkinkan satu gambar yang akan digunakan untuk gaya perbatasan dan latar belakang dari elemen tertentu.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiudvcwsZIAehaJaMfs8Nsx9CiErVfe6UVSGxww-3cnJLa8ORYqLPR_aFml-4IclXlVrEU9gwSioOeiCLaH-d0VPAl3PHN9qgd7g1oJEz1Mr6O8vDdS0-ef8IDCLU47Xf07J2Hl03_MKtm3/s320/a15.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>16. <a href="http://www.aaronlumsden.com/multicol" target="_blank">CSS3 Column Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Ini adalah kolom CSS3 , alat generator multi dan kompatibel dengan Chrome , Safari , Firefox dan Deerpark Mozilla.</span><br />
<span style="font-family: Verdana, sans-serif;">Sayangnya dalam bahasa yang berbeda , tetapi anda dapat menggunakan Google translate untuk bahasa Inggris nya.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjL68lJRbeaHdjeFs-R6dI1JH1tBmsO34niv9-bTtnAneDXMWC1f6IYQvY3xHKS1riwyJS3m2u74DKa77lB4bUtj9cw9PuZZM98nAV5aqb5JaDOYGfr-IjiiQfSVGzcGa33_IRsYFZelGR/s320/a16.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>17. <a href="http://westciv.com/tools/gradients" target="_blank">CSS3 Sandbox</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Aplikasi ini akan membantu anda untuk menghasilkan gradien linier , gradien radial , bayangan teks , bayangan kotak , transformasi dan stroke teks.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDNmGwjtJnPlSXDyub-cDjZcZO4wC8ROHsxINV1zGRZRlu4KH_7qtwFhb3IJt0f0MSemMdKTloxXMV4bwFuZPwfzIiYnNmSp8BVHlTk43Cw5vQLEfYOnC94R689CWN0RPBJHNVNS3mFnp2/s320/a17.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>18. <a href="https://www.xeo-css.com/" target="_blank">Xeo CSS</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Berbasis web untuk menghasilkan kode yang bersih untuk CSS3 properti.</span><br />
<span style="font-family: Verdana, sans-serif;">Ini juga merupakan CSS3 gradien pembangkit styling untuk desainer web.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXtFv8nzfLQ9h-5oXKq76w5iM-1v9qgzaphR4tGcDZSHFKnJHzX0DfHfkRxiNM-ukRmDtEafJ8atAvwkTbShdfsClewaM9aOxEMqOOUxWOUpH5SIqOrqWLEzgtYREXkIP4MuvLCX9Uy4V/s320/a18.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>19. <a href="http://csscorners.com/" target="_blank">CSS Corners</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Aplikasi pembuat gradien CSS3 yang profesional.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGPpVwy5Dfoz_wAFRkDetCFBJRRRbSHILVQHc5ECL_vfbGY9scMsthYjc94IYVBWKEU5WXmFcHwq_le5IRV0sCy_aFxJyfklcNqUSWsQqAsFjFXb8UVIAANqVGd7FAC3vyvo0bXuHoUPdL/s320/a19.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>20. <a href="http://dryicons.com/blog/2010/07/15/css3-gradient-button-generator" target="_blank">CSS3 Gradient Button Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Sungguh menakjubkan CSS3 button Generator , kombinasi bayangan dengan perbatasan bulat.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf9xttA39Voeikhgg_eM1KqHovpLfSUlBrCtFfOSk8Y1FXOqQPwr0_EKo7h8ljbcUWdXlDRKqSODgu2Voz9b48wcBOuhjacab9SykYDMBBsyZWn5ZJkuVnDkWP11HdwBAHo-z3eIvM7QeC/s320/a20.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>21. <a href="http://layerstyles.org/" target="_blank">Layer Styles</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Pengguna Photoshop akan mencintai Layer Styles.</span><br />
<span style="font-family: Verdana, sans-serif;">CSS3 efek didefinisikan menggunakan dialog layer style yang akan segera akrab bagi siapa saja yang menggunakan produk Adobe.</span><br />
<span style="font-family: Verdana, sans-serif;">Sangat mudah , logis , dan menyenangkan untuk digunakan.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPAZQaBh8wNLxCGpARhE9LIDwPIQNZXs6p7PXYJUW_29htijz7a1kDdjIisqcQQt5hAJpD6wZBBewTNh0sqAOzK5Y35sTRhuSdd_jttumxvahjkop7V2NnIi2hyphenhyphentBe4GRwEahIQkFa810_/s1600/q2.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>22. <a href="http://www.css3.me/" target="_blank">CSS3 me</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Jika anda ingin sesuatu yang sederhana , cepat dan mudah , generator ini CSS3 bisa menjadi alat.</span><br />
<span style="font-family: Verdana, sans-serif;">Ini salah satu utilitas yang paling bagus dan mendukung perbatasan , bayangan kotak , opasitas dan gradien latar belakang yang sederhana.</span><br />
<span style="font-family: Verdana, sans-serif;">Anda juga dapat meminta IE-spesifik filter untuk menghasilkan kode.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSSeAKQ0PvbNyWM5znZ7isAow8CCHHbbEnW7MRPATrMmhcUu3KYkOQtRImYnX1HsbqFMyRNd2sxDun2RN0nwQIFIFCotRxJErRXytHkhQY-w3GqDZz27jfNbxPMtcMzx9NukuTLHroFpo6/s1600/q3.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>23. <a href="http://css3button.net/" target="_blank">CSS3 Button Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Efek CSS3 dapat menghasilkan yang sangat cantik akan tombol tanpa gambar.</span><br />
<span style="font-family: Verdana, sans-serif;">Generator Tombol CSS3 memungkinkan anda untuk tweak font , padding , border , gradien latar belakang , inner shadow , drop shadow dan bayangan teks menggunakan atas / bawah kontrol yang dapat lebih mudah dan lebih logis daripada slider.</span><br />
<span style="font-family: Verdana, sans-serif;">Selain menyediakan cross-browser kode CSS3 , alat ini memungkinkan anda untuk menyimpan dan berbagi gaya dengan orang lain.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8-Me7_HPDSXN3E0GwJGhecnxDLJIFY39S27Fo0gRxM6w39K7ytQntj5d10-whVHhVhMPwR9YQGfsSWUBqqxOvqQ85tSvEcDiHl0ydgAHp9HbKd_jn8kdNb4uNY7o3kJjGLfskhOLcU-mt/s1600/q4.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>24. <a href="http://www.colorzilla.com/gradient-editor/%20" target="_blank">Ultimate CSS Gradient Generator</a></b></span><br />
<span style="font-family: Verdana, sans-serif;">Generator CSS Ultimate Gradient adalah generator gradien akhir.</span><br />
<span style="font-family: Verdana, sans-serif;">Menggunakan antarmuka yang mirip dengan Photoshop dan menciptakan cross-browser kode yang meliputi filter IE.</span><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigbJPp_eNpa2A9Kx43E-iIfx4hheSHZV2zRdtoq9dvlEH-fzm2uIsl6H2R4WJBE_H1xBdQXSs0bhiYlI5NMpKwEox1Gf2wrco6phJkkSWYnzkjYtX3obPH7_ZcIBtq_JgHhbHOXyhO96fP/s1600/q5.jpg" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com2tag:blogger.com,1999:blog-2726093644608416144.post-25893032461787426022013-01-10T23:57:00.001+07:002013-01-11T11:40:47.976+07:00Pasang Iklan<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Verdana, sans-serif;">Pasang iklan di blog Dhecun Blog.</span><br />
<b style="font-family: Verdana, sans-serif;"><br /></b>
<b style="font-family: Verdana, sans-serif;">Kategori pemasangan :</b><br />
<span style="font-family: Verdana, sans-serif;"><i>1. Rp.10.000 per bulan.</i></span><br />
<span style="font-family: Verdana, sans-serif;"><i>2. Rp.100.000 per tahun.</i></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Silahkan jika berminat untuk memasang iklan hubungi saya lewat formulir dibawah ini.</span><br />
<span style="font-family: Verdana, sans-serif;">Saya akan secepatnya membalas pesan anda lewat <b><i>Email</i></b> atau <i><b>No.HP</b></i> yang sudah anda cantumkan tentang keterangan jumlah biaya yang harus di transfer untuk biaya pasang iklan dan data rekening.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Cantumkan dalam kotak sebject :</b></span><br />
<span style="font-family: Verdana, sans-serif;">Pasang iklan</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Cantumkan dalam kotak message :</b></span><br />
<span style="font-family: Verdana, sans-serif;">1. Judul iklan</span><br />
<span style="font-family: Verdana, sans-serif;">2. Deskripsi iklan</span><br />
<span style="font-family: Verdana, sans-serif;">3. URL gambar format <i><b>jpg</b> , <b>png</b> , <b>gif</b></i></span><br />
<span style="font-family: Verdana, sans-serif;">Contoh URL gambar : <a href="http://www.gratispulsa.com/image/banner-125x125.gif" target="_blank">http://www.gratispulsa.com/image/banner-125x125.gif</a></span><br />
<span style="font-family: Verdana, sans-serif;">4. Pemasangan <b>Rp.10.000 per bulan</b> atau </span><span style="font-family: Verdana, sans-serif;"><b>Rp.100.000 per tahun</b></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Terima kasih.</span></div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<center>
<table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td><iframe frameborder="0" height="540" src="http://www.foxyform.com/form.php?id=339591&sec_hash=977ba991a6a" width="400"></iframe></td></tr>
<tr><td align="center"></td></tr>
</tbody></table>
</center>
Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-5965637932207277282013-01-09T09:40:00.000+07:002013-01-18T16:19:09.839+07:00Cara Hack Password Facebook-Yahoo-Twitter<img alt="Hack Email Facebook Teman" src="http://www.binushacker.net/wp-content/uploads/facebook-email-hacking-by-binushacker.jpg" /><br />
<span style="font-family: Verdana, sans-serif;">Ingin lihat Password account <a href="http://www.facebook.com/" target="_blank">Facebook</a> , <a href="http://yahoo.com/" target="_blank">Yahoo</a> , <a href="http://twitter.com/" target="_blank">Twitter</a> , dan account login lainnya dari teman anda...?</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Keliatan jahat banget ya seperti black hacker aja hehehe :)</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Kali ini <a href="http://dhecun.blogspot.com/" target="_blank">Dhecun Blog</a> akan mencoba membahas tips dan trik jitu rahasia mengungkap password <a href="http://www.facebook.com/" target="_blank">Facebook</a> , <a href="http://yahoo.com/" target="_blank">Yahoo</a> , <a href="http://twitter.com/" target="_blank">Twitter</a> dan lain-lain dari teman kalian.</span><br />
<span style="font-family: Verdana, sans-serif;">Tapi ingat ya , saya tidak merekomendasikan trik ini untuk berbuat jahat.</span><br />
<span style="font-family: Verdana, sans-serif;">Ngehack password Facebook teman adalah dosa lho...!!!</span><br />
<span style="font-family: Verdana, sans-serif;">Saya pun tidak mau kecipratan dosanya :(</span><br />
<span style="font-family: Verdana, sans-serif;">Tapi untuk sekedar mempelajarinya , tidak apa-apa hehehe . . .</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span><br />
<span style="font-family: Verdana, sans-serif;">1. Sebelumnya <a href="http://dhecun.blogspot.com/" target="_blank">Dhecun Blog</a> memohon maaf yang sebesar-besarnya jika ada pihak yang merasa dirugikan dengan trik ini.</span><br />
<span style="font-family: Verdana, sans-serif;">2. Trik ini sekarang tidak berlaku apabila anda menggunakan browser <i>Mozilla Firefox</i> ataupun <i>Google Chrome</i> , u</span><span style="font-family: Verdana, sans-serif;">sahakan menggunakan browser lain seperti <i>Opera</i> karena sudah saya buktikan di browser <i>Opera</i> terbukti berhasil 100%.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Saya akan memberitahu trik mudah untuk melihat password yang biasanya ketika di ketikkan saat login suatu akun apapun hanya akan terlihat sebagai simbol lingkaran , bintang , atau apapun agar tidak terlihat orang lain , contohnya saat kita ingin login ke Facebook seperti gambar dibawah ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div style="text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChUfFBfWOmeQnrhm2jnEumJg3JawmjibMx7JZFVw-p6_tKpZt_1I4Wz-fgfk7wyPO-4B7pPk55a079KZtbcGDe_9IfDhIirWmCQbqM2x50yXU5VFIxX4EkIZBj1pSJQl0GOSHQdBCYpY/s1600/Hack+FB+1.png" style="margin-left: auto; margin-right: auto;" target="_blank"><img height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgChUfFBfWOmeQnrhm2jnEumJg3JawmjibMx7JZFVw-p6_tKpZt_1I4Wz-fgfk7wyPO-4B7pPk55a079KZtbcGDe_9IfDhIirWmCQbqM2x50yXU5VFIxX4EkIZBj1pSJQl0GOSHQdBCYpY/s400/Hack+FB+1.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Klik gambar untuk memperbesar</td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"></span></div>
<br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Terlihat pada gambar diatas bahwa Address Bar nya masih <a href="http://www.facebook.com/">www.facebook.com</a> dan kita masih belum tahu apa sih passwordnya <i>(Password Berbentuk Bulat-Bulat)</i>.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b><span style="font-size: large;">Bagaimana apakah masih penasaran...?</span></b></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Baiklah kita lanjutkan dengan mengintip password nya.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Caranya sangat mudah kok , tinggal </span><span style="font-family: Verdana, sans-serif;">copy kode javascript dibawah ini k</span><span style="font-family: Verdana, sans-serif;">emudian paste-kan kode javascript tersebut ke Address Bar browser anda seperti pada gambar dibawah ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div style="text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXAEXcXoNOr2ngrz0fkDvV-SFgwL7THHCYUAYhjAeb5RnXu3Mkko_N8CHG2y5cVP0hrd0FxG-FC0tz-xgQBi_O3t1IZeLbMQZmCfoVG7TPrbaRlgLbNMttsihFRf3UY__EZKh08LV9-T4/s1600/Hack+FB+2.png" style="margin-left: auto; margin-right: auto;" target="_blank"><img height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXAEXcXoNOr2ngrz0fkDvV-SFgwL7THHCYUAYhjAeb5RnXu3Mkko_N8CHG2y5cVP0hrd0FxG-FC0tz-xgQBi_O3t1IZeLbMQZmCfoVG7TPrbaRlgLbNMttsihFRf3UY__EZKh08LV9-T4/s400/Hack+FB+2.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Klik gambar untuk memperbesar</td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"></span></div>
<br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Kode javascript :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">javascript:(/* BinusHacker Tutorial By UtuH */ function(){var s,F,j,f,i; s = ""; F = document.forms; for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } } if (s) alert("Passwordnya adalah:\n\n" + s); else alert("Tidak ada password bintang disini.");})();</span></blockquote>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Jika sudah di paste-kan kemudian tekan <b>Enter</b> dan anda harus bilang Woooowwwwowwwwww..........karena muncul</span><span style="font-family: Verdana, sans-serif;"> pesan Allert berisi password seperti </span><span style="font-family: Verdana, sans-serif;">pada gambar di bawah ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<div style="text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpkSJu3CvrtirrEx_7bLjXHaCV5W_KW20oymRnr4g8FyvYmvQC7eB6OKF5WJ-tnvgxnGxvX3Jf0Rs8xLHUVtH3lybLl8phR35D9KDwvedJNocw1OYwRyfRIqa4S468kaLG3Mn4ec-X7rY/s1600/Hack+FB+3.png" style="margin-left: auto; margin-right: auto;" target="_blank"><img height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpkSJu3CvrtirrEx_7bLjXHaCV5W_KW20oymRnr4g8FyvYmvQC7eB6OKF5WJ-tnvgxnGxvX3Jf0Rs8xLHUVtH3lybLl8phR35D9KDwvedJNocw1OYwRyfRIqa4S468kaLG3Mn4ec-X7rY/s400/Hack+FB+3.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Klik gambar untuk memperbesar</td></tr>
</tbody></table>
</div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Secara otomatis password yang terhidden akan muncul di pesan Allert seperti yang saya contohkan diatas adalah :</span><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;"><b>Username</b> : <span style="color: red;">contoh@yahoo.com</span></span><br />
<span style="font-family: Verdana, sans-serif;"><b>Password</b> : <span style="color: red;">indonesia</span></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<br />Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-26709091433398338262013-01-08T18:30:00.000+07:002013-01-09T02:43:58.819+07:00Mengenal Elemen Pada Kode HTML Blog<table background="#3b5998" border="1" bordercolor="cdd4cd" cellspacing="5" style="width: 530px;">
<tbody>
<tr bordercolor="d8ffde">
<td bgcolor="red" class="judulboks" colspan="5"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Font Properties</b></span></div>
</td></tr>
<tr><td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Property</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Valid Values</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Example</b></span></div>
</td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-family</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">[font name or type]</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-family: Verdana, Arial;</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-style</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">normal | italic</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-style:italic;</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-variant</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">normal | small-caps</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-variant:small-caps;</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-weight</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">normal | bold</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-weight:bold;</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-size</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">[ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | <i>percentage</i> | <i>length</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font-size:12pt;</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">[ <i>font-style</i> || <i>font-variant</i> || <i>font-weight</i> ] ? <i>font-size</i> [ / <i>line-height</i> ] ? <i>font-family</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">font: bold 12pt Arial;</span></td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<table background="#3b5998" border="1" bordercolor="cdd4cd" cellspacing="5" style="width: 530px;">
<tbody>
<tr bordercolor="d8ffde">
<td bgcolor="red" class="judulboks" colspan="5"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Color and Background Properties</b></span></div>
</td></tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Property</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Valid Values</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Example</b></span></div>
</td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">color</span></td>
<td bordercolor="d8ffde" class="isiboks"><i><span style="font-family: Verdana, sans-serif;">color</span></i></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">color: red</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-color</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>color</i> | transparent</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-color: yellow</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-image</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>url</i> | none</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-image: url(house.jpg)</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-repeat</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">repeat | repeat-x | repeat-y | no-repeat</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-repeat: no-repeat</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-attachment</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">scroll | fixed</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-attachment: fixed</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-position</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">[ <i>position</i> | <i>length</i> ] | {1,2} | [ top | center | bottom ] || [ left | center | right ]</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background-position: top center</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">transparent | <i>color</i> || <i>url</i> || repeat || scroll || <i>position</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">background: silver url(house.jpg) repeat-y</span></td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<table background="#3b5998" border="1" bordercolor="cdd4cd" cellspacing="5" style="width: 530px;">
<tbody>
<tr bordercolor="d8ffde">
<td bgcolor="red" class="judulboks" colspan="5"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Text Properties</b></span></div>
</td></tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Property</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Valid Values</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Example</b></span></div>
</td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">letter-spacing</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">normal | <i>length</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">letter-spacing:5pt</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">text-decoration</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">none | underline | overline | line-through</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">text-decoration:underline</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">vertical-align</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">sub | super |</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">vertical-align:sub</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">text-transform</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">capitalize | uppercase | lowercase | none</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">text-transform:lowercase</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">text-align</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">left | right | center | justify</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">text-align:center</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">text-indent</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">text-indent:25px</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">line-height</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">normal | <i>number</i> | <i>length</i> | <i>percentage</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">line-height:15pt</span></td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<table background="#3b5998" border="1" bordercolor="cdd4cd" cellspacing="5" style="width: 530px;">
<tbody>
<tr bordercolor="d8ffde">
<td bgcolor="red" class="judulboks" colspan="5"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Box Properties</b></span></div>
</td></tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Property</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Valid Values</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Example</b></span></div>
</td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin-top</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i> | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin-top:5px</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin-right</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i> | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin-right:5px</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin-bottom</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i> | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin-bottom:1em</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin-left</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i> | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin-left:5pt</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i> | auto {1,4}</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">margin: 10px 5px 10px 5px</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding-top</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding-top:10%</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding-right</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding-right:15px</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding-bottom</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding-bottom:1.2em</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding-left</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding-left:10pt; }</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">l<i>ength</i> | <i>percentage</i> {1,4}</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">padding: 10px 10px 10px 15px</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-top-width</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">thin | medium | thick | <i>length</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-top-width:thin</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-right-width</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">thin | medium | thick | <i>length</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-right-width:medium</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-bottom-width</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">thin | medium | thick | <i>length</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-bottom-width:thick</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-left-width</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">thin | medium | thick | <i>length</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-left-width:15px</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-width</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">thin | medium | thick | <i>length</i> {1,4}</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-width: 3px 5px 3px 5px</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-top-color</span></td>
<td bordercolor="d8ffde" class="isiboks"><i><span style="font-family: Verdana, sans-serif;">color</span></i></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-top-color:navajowhite</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-right-color</span></td>
<td bordercolor="d8ffde" class="isiboks"><i><span style="font-family: Verdana, sans-serif;">color</span></i></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-right-color:whitesmoke</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-bottom-color</span></td>
<td bordercolor="d8ffde" class="isiboks"><i><span style="font-family: Verdana, sans-serif;">color</span></i></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-bottom-color:black</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-left-color</span></td>
<td bordercolor="d8ffde" class="isiboks"><i><span style="font-family: Verdana, sans-serif;">color</span></i></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-left-color:#C0C0C0</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-color</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>color</i> {1,4}</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-color: green red white blue; }</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-top-style</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">none | solid | double | groove | ridge | inset | outset</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-top-style:solid</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-right-style</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">none | solid | double | groove | ridge | inset | outset</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-right-style:double</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-bottom-style</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">none | solid | double | groove | ridge | inset | outset</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-bottom-style:groove</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-left-style</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">none | solid | double | groove | ridge | inset | outset</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-left-style:none</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-style</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">none | solid | double | groove | ridge | inset | outset</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-style:ridge; }</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-top</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>border-width</i> | <i>border-style</i> | <i>border-color</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-top: medium outset red</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-right</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>border-width</i> | <i>border-style</i> | <i>border-color</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-right: thick inset maroon</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-bottom</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>border-width</i> | <i>border-style</i> | <i>border-color</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-bottom: 10px ridge gray</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-left</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>border-width</i> | <i>border-style</i> | <i>border-color</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border-left: 1px groove red</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>border-width</i> | <i>border-style</i> | <i>border-color</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">border: thin solid blue</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">float</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">none | left | right</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">float:none</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">clear</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">none | left | right | both</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">clear:left</span></td>
</tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<table background="#3b5998" border="1" bordercolor="cdd4cd" cellspacing="5" style="width: 530px;">
<tbody>
<tr bordercolor="d8ffde">
<td bgcolor="red" class="judulboks" colspan="5"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Classification Properties</b></span></div>
</td></tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Property</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Valid Values</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Example</b></span></div>
</td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">display</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">none | block | inline | list-item</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">display:none</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">list-style-type</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">disk | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">list-style-type:upper-alpha</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">list-style-image</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>url</i> | none</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">list-style-image:url(icFile.gif)</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">list-style-position</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">inside | outside</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">list-style-position:inside</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">list-style</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>keyword</i> || <i>position</i> || <i>url</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">list-style: square outside url(icFolder.gif)</span></td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<table background="#3b5998" border="1" bordercolor="cdd4cd" cellspacing="5" style="width: 530px;">
<tbody>
<tr bordercolor="d8ffde">
<td bgcolor="red" class="judulboks" colspan="5"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Positioning Properties</b></span></div>
</td></tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Property</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Valid Values</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Example</b></span></div>
</td><td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Applies to</b></span></div>
</td></tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">clip</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>shape</i> | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">clip:rect(0px 200px 200px 0px)</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">all elements</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">height</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">height:200px</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">DIV, SPAN and replaced elements</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">left</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i> | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">left:0px</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">absolutely and relatively positioned elements</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">overflow</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">visible | hidden | scroll | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">overflow:scroll</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">all elements</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">position</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">absolute| relative | static</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">position:absolute</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">all elements</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">top</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i> | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">top:0px</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">absolutely and relatively positioned elements</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">visibility</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">visible | hidden | inherit</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">visibility:visible</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">all elements</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">width</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;"><i>length</i> | <i>percentage</i> | auto</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">width:80%</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">DIV, SPAN and replaced elements</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">z-index</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">auto | <i>integer</i></span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">z-index:-1</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">absolutely and relatively positioned elements</span></td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<table background="#3b5998" border="1" bordercolor="cdd4cd" cellspacing="5" style="width: 530px;">
<tbody>
<tr bordercolor="d8ffde">
<td bgcolor="red" class="judulboks" colspan="5"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Printing Properties</b></span></div>
</td></tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Property</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Valid Values</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Example</b></span></div>
</td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">page-break-before</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">auto | always || left | right</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">page-break-before:always</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">page-break-after</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">auto | always || left | right</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">page-break-before:auto</span></td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<table background="#3b5998" border="1" bordercolor="cdd4cd" cellspacing="5" style="width: 530px;">
<tbody>
<tr bordercolor="d8ffde">
<td bgcolor="red" class="judulboks" colspan="5"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Pseudo Classes</b></span></div>
</td></tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Property</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Valid Values</b></span></div>
</td>
<td bordercolor="d8ffde" class="isiboks"><div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><b>Example</b></span></div>
</td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">cursor</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">{ cursor:hand; }</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">active, hover, link, visited</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">n/a</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">a:hover { color:red; }</span></td>
</tr>
<tr><td bordercolor="#d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">first-letter, first-line</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">any font manipulating declaration</span></td>
<td bordercolor="d8ffde" class="isiboks"><span style="font-family: Verdana, sans-serif;">p:first-letter{<br />float:left;color:blue<br />}</span></td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<br />Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com1tag:blogger.com,1999:blog-2726093644608416144.post-12116268083173418972012-12-30T21:19:00.004+07:002012-12-30T21:50:28.556+07:00Cara Membuat Image Preview Menggunakan Tombol<span style="font-family: Verdana, sans-serif;">Image Preview ini berfungsi untuk melihat gambar dalam ukuran yang lebih bersar , dan cara kerjanya menggunakan tombol perbesar dan tombol normal , yaitu bila di klik tombol perbesar maka gambar menjadi ukuran besar dan di klik tombol normal untuk mengembalikan gambar pada posisi ukuran semula.</span><br />
<span style="font-family: Verdana, sans-serif;">Jika di web atau blog anda banyak menampilkan gambar , cara ini dapat jadi alternatif untuk dimanfaatkan agar pengunjung bisa melihat gambar anda secara jelas.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">
</span>
<span style="font-family: Verdana, sans-serif;">Berikut contoh bentuk Image Preview menggunakan tombol.</span><br />
<pre style="background-color: #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(102, 153, 204); font-size: 12px; line-height: 19.200000762939453px; overflow: auto; padding: 5px;"><center><div class="galleryagambar">
<div class="gallerya">
<table border="0" width="">
<tbody>
<tr>
<td bgcolor="#ECECEC"><a href="http://dhecun.blogspot.com/2012/12/membuat-widget-artikel-terbaru-keren.html" target="_blank" title="Membuat Widget Artikel Terbaru Keren"><span style="font-family: Verdana, sans-serif;"><img height="100" id="gambar1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26tyVcFL4qCJ5P9CTeMqtnrwvDSF9Na03HLNSmB1jZdmOvWeQooxqxCB2_awPhY5VW5Fm6p5OMK4T66o-HUfqIa45BqkdTSi8pYgrcb60eTEwk3whUECIcg9R82m1lupSNmup7quxMXo/s400/New+Picture.jpg" width="120" /></span></a><br />
<div align="center">
<span style="font-family: Verdana, sans-serif;"><input onclick="gambarbesar1()" type="button" value="Perbesar" />
<input onclick="gambarnormal1()" type="button" value="Normal" />
</span></div>
</td>
</tr>
<tr>
<td bgcolor="#ccc"><div class="labela">
<span style="font-family: Verdana, sans-serif;">Widget
</span></div>
</td>
</tr>
</tbody></table>
</div><div class="gallerya">
<table border="0" width="">
<tbody>
<tr>
<td bgcolor="#ECECEC"><a href="http://dhecun.blogspot.com/2012/12/menggunakan-expand-sticky-bar.html" target="_blank" title="Menggunakan Expand Sticky Bar"><span style="font-family: Verdana, sans-serif;"><img height="100" id="gambar2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqP4dy0HwvPvYjtDr13zi8Fb2YfKz5cf81VgiBH3SfR2Jsq9xb78yWj2LISdkbHrYk1I9jqO6DcXY5DDZwGa9_7gZl2bUp0MnqMNHgz9DXP0bD24z1jBdAK-_XLknu5csmCt2LMzY4ss/s400/Expand+Sticky+Bar.png" width="120" /></span></a><br />
<div align="center">
<span style="font-family: Verdana, sans-serif;"><input onclick="gambarbesar2()" type="button" value="Perbesar" />
<input onclick="gambarnormal2()" type="button" value="Normal" />
</span></div>
</td>
</tr>
<tr>
<td bgcolor="#ccc"><div class="labela">
<span style="font-family: Verdana, sans-serif;">Sticky Bar
</span></div>
</td>
</tr>
</tbody></table>
</div>
</div>
</center>
<span style="font-family: Verdana, sans-serif;">
</span></pre>
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Cari kode <b></head></b></span><br />
<span style="font-family: Verdana, sans-serif;">6. Massukan script dibawah ini tepat diatas kode <b></head></b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><script type='text/javascript'></span><span style="font-family: Verdana, sans-serif;"><span style="color: red;">function gambarbesar</span><span style="color: blue;">1</span><span style="color: red;">(){document.getElementById(&quot;gambar</span><span style="color: blue;">1</span><span style="color: red;">&quot;).height=&quot;200&quot;; document.getElementById(&quot;gambar</span><span style="color: blue;">1</span><span style="color: red;">&quot;).width=&quot;200&quot;;}function gambarnormal</span><span style="color: blue;">1</span><span style="color: red;">(){document.getElementById(&quot;gambar</span><span style="color: blue;">1</span><span style="color: red;">&quot;).height=&quot;100&quot;; document.getElementById(&quot;gambar</span><span style="color: blue;">1</span><span style="color: red;">&quot;).width=&quot;120&quot;;}</span></span><span style="font-family: Verdana, sans-serif;"></script></span><span style="font-family: Verdana, sans-serif;"><style type='text/css'></span><span style="font-family: Verdana, sans-serif;">div.galleryagambar{position:relative; margin: 2px; padding:8px; border: 2px solid #ccc; background-color:#E3E3E3; float:left;}</span><span style="font-family: Verdana, sans-serif;">div.gallerya{position:relative; margin: 2px; border: 2px solid #D8D8D8; background-color:#ECECEC; float:left; text-align: center;}</span><span style="font-family: Verdana, sans-serif;">div.gallerya img{ border: 2px solid #ccc; margin-top: 5px;}</span><span style="font-family: Verdana, sans-serif;">div.gallerya a:hover img{ border: 2px solid #000000;/* for IE */ filter:alpha(opacity=40);/* CSS3 standard */ opacity:0.4;}</span><span style="font-family: Verdana, sans-serif;">div.labela{ border: 0px solid #D2D2D2; background-color:#ccc; text-align: center; font-weight: bold; height: 12px;width:120px; padding:3px;}</span><span style="font-family: Verdana, sans-serif;"></style></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span><br />
<span style="font-family: Verdana, sans-serif;">Untuk menambah gambar , anda tinggal menambah kode yang berwarna <span style="color: red;">merah</span> dan simpan dibawah kode yang berwarna merah tersebut tapi </span><span style="font-family: Verdana, sans-serif;">ganti nomor yang berwarna </span><span style="color: blue; font-family: Verdana, sans-serif;">biru</span><span style="font-family: Verdana, sans-serif;"> menjadi nomor </span><span style="color: blue; font-family: Verdana, sans-serif;">2</span><span style="font-family: Verdana, sans-serif;"> dan seterusnya.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">7. Klik <b>simpan template</b></span><br />
<span style="font-family: Verdana, sans-serif;"><br />
Langkah selanjutnya anda tinggal menambahkan kode HTML pada saat menulis artikel.</span><br />
<span style="font-family: Verdana, sans-serif;">Jangan lupa tambahkan kode HTML pada bagian <b>HTML</b> bukan <b>Compose</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">Cara ini bila gambar akan ditampilkan pada halaman posting. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">
Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda , berarti anda tinggal menambah gadget.</span><br />
<span style="font-family: Verdana, sans-serif;">Silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<span style="font-family: Verdana, sans-serif;">1. Pilih <b>Tata Letak</b> >> <b>Tambah Gadget</b> >> <b>HTML/JavaScript</b></span><br />
<span style="font-family: Verdana, sans-serif;">2. Masukkan script dibawah ini</span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div class="galleryagambar"><br /><span style="color: red;"><div class="gallerya"></span><span style="color: red;"><table border="0" width=""></span><span style="color: red;"><tbody><tr><td bgcolor="#ECECEC"><a href="</span><span style="color: magenta;">http://AlamatLinkAnda</span><span style="color: red;">" target="_blank"><img height="100" id="gambar</span><span style="color: blue;">1</span><span style="color: red;">" src="</span><span style="color: magenta;">URL Gambar</span><span style="color: red;">" width="120" /></a><br /></span><span style="color: red;"><div align="center"></span><span style="color: red;"><input onclick="gambarbesar</span><span style="color: blue;">1</span><span style="color: red;">()" type="button" value="Perbesar" /></span><span style="color: red;"><input onclick="gambarnormal</span><span style="color: blue;">1</span><span style="color: red;">()" type="button" value="Normal" /></span><span style="color: red;"></div></span><span style="color: red;"></td></span><span style="color: red;"></tr></span><span style="color: red;"><tr></span><span style="color: red;"><td bgcolor="#ccc"></span><span style="color: red;"><div class="labela"></span><span style="color: magenta;">Label Gambar</span><span style="color: red;"></div></span><span style="color: red;"></td></tr></tbody></table></div></span><br /></div></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span><br />
<span style="font-family: Verdana, sans-serif;">Untuk menambah gambar , anda tinggal menambah kode yang berwarna <span style="color: red;">merah</span> dan simpan dibawah kode yang berwarna merah tersebut tapi </span><span style="font-family: Verdana, sans-serif;">ganti nomor yang berwarna </span><span style="color: blue; font-family: Verdana, sans-serif;">biru</span><span style="font-family: Verdana, sans-serif;"> menjadi nomor </span><span style="color: blue; font-family: Verdana, sans-serif;">2</span><span style="font-family: Verdana, sans-serif;"> dan seterusnya.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
3. Klik <b>simpan</b></span><br />
<span style="font-family: Verdana, sans-serif;"><br />
Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-42033917054516514182012-12-30T14:05:00.002+07:002012-12-30T17:42:06.327+07:00Slide Menu Vertikal<span style="font-family: Verdana, sans-serif;">Cara pembuatannya sangat mudah , yaitu menggunakan fitur CSS dan beberapa kode HTML.</span><br />
<span style="font-family: Verdana, sans-serif;">Anda tinggal menyisipkan sedikit kode CSS tersebut pada template blog anda , dan sedikit kode HTML pada sidebar blog anda.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif; font-size: large;"><b><a href="http://infodaridhecun.blogspot.com/2012/12/demo-slide-menu-vertikal.html" target="_blank">Demo</a></b></span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Centang <b>Expand Widget Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">6. Cari kode <b></head></b></span><br />
<span style="font-family: Verdana, sans-serif;">7. Masukkan script dibawah ini tepat diatas kode <b></head></b></span><br />
<div style="-moz-border-radius: 5px; background-color: #e0e0e0; border-radius: 5px; height: 200px; overflow: auto; padding: 0px; width: 475px;">
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><style type='text/css'></span><br />
<span style="font-family: Verdana, sans-serif;">/*widget Slide Menu vertikal by noer cara buat web gratis.com*/</span><br />
<span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg {</span><br />
<span style="font-family: Verdana, sans-serif;"> list-style: none;</span><br />
<span style="font-family: Verdana, sans-serif;"> z-index:999999;</span><br />
<span style="font-family: Verdana, sans-serif;"> margin:0;</span><br />
<span style="font-family: Verdana, sans-serif;"> padding:0;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg li {</span><br />
<span style="font-family: Verdana, sans-serif;"> width: 200px;</span><br />
<span style="font-family: Verdana, sans-serif;"> display:inline;</span><br />
<span style="font-family: Verdana, sans-serif;"> margin:0;</span><br />
<span style="font-family: Verdana, sans-serif;"> padding:0;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg li a {</span><br />
<span style="font-family: Verdana, sans-serif;"> display: block;</span><br />
<span style="font-family: Verdana, sans-serif;"> position:relative;</span><br />
<span style="font-family: Verdana, sans-serif;"> width: 200px;</span><br />
<span style="font-family: Verdana, sans-serif;"> height: 25px;</span><br />
<span style="font-family: Verdana, sans-serif;"> background-color:#aaa;</span><br />
<span style="font-family: Verdana, sans-serif;"> background-repeat:no-repeat;</span><br />
<span style="font-family: Verdana, sans-serif;"> background-position:50% 10px;</span><br />
<span style="font-family: Verdana, sans-serif;"> border:1px solid #aaa;</span><br />
<span style="font-family: Verdana, sans-serif;"> text-decoration:none;</span><br />
<span style="font-family: Verdana, sans-serif;"> text-align:center;</span><br />
<span style="font-family: Verdana, sans-serif;"> -moz-border-radius: 5px;</span><br />
<span style="font-family: Verdana, sans-serif;"> border-radius: 5px;</span><br />
<span style="font-family: Verdana, sans-serif;"> margin:0;</span><br />
<span style="font-family: Verdana, sans-serif;"> padding:0;</span><br />
<span style="font-family: Verdana, sans-serif;"> -webkit-transition: all 1s ease-in-out;</span><br />
<span style="font-family: Verdana, sans-serif;"> -moz-transition: all 1s ease-in-out;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg li a:hover{</span><br />
<span style="font-family: Verdana, sans-serif;"> background-color:#fff;</span><br />
<span style="font-family: Verdana, sans-serif;"> border:1px solid #bbb;</span><br />
<span style="font-family: Verdana, sans-serif;"> padding-top: 80px;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg li a span{</span><br />
<span style="font-family: Verdana, sans-serif;"> background: -moz-linear-gradient(center top, #fff 0%,#bbb 100%);</span><br />
<span style="font-family: Verdana, sans-serif;"> background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb),color-stop(1, #fff));</span><br />
<span style="font-family: Verdana, sans-serif;"> border-top:2px solid #bbb;</span><br />
<span style="font-family: Verdana, sans-serif;"> -moz-border-radius: 5px;</span><br />
<span style="font-family: Verdana, sans-serif;"> border-radius: 5px;</span><br />
<span style="font-family: Verdana, sans-serif;"> -webkit-transition: all 1s ease-in-out;</span><br />
<span style="font-family: Verdana, sans-serif;"> -moz-transition: all 1s ease-in-out;</span><br />
<span style="font-family: Verdana, sans-serif;"> opacity: 0.7;</span><br />
<span style="font-family: Verdana, sans-serif;"> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);</span><br />
<span style="font-family: Verdana, sans-serif;"> display: block;</span><br />
<span style="font-family: Verdana, sans-serif;"> width: 200px;</span><br />
<span style="font-family: Verdana, sans-serif;"> height: 25px;</span><br />
<span style="font-family: Verdana, sans-serif;"> font-size:14px;</span><br />
<span style="font-family: Verdana, sans-serif;"> font-weight:bold;</span><br />
<span style="font-family: Verdana, sans-serif;"> color:#000;</span><br />
<span style="font-family: Verdana, sans-serif;"> margin:0;</span><br />
<span style="font-family: Verdana, sans-serif;"> padding:0;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg li a span:hover{</span><br />
<span style="font-family: Verdana, sans-serif;"> text-decoration:none;</span><br />
<span style="font-family: Verdana, sans-serif;"> text-align:center;</span><br />
<span style="font-family: Verdana, sans-serif;"> font-size:14px;</span><br />
<span style="font-family: Verdana, sans-serif;"> font-weight:bold;</span><br />
<span style="font-family: Verdana, sans-serif;"> color:#40954E;</span><br />
<span style="font-family: Verdana, sans-serif;"> background-color:#eee;</span><br />
<span style="font-family: Verdana, sans-serif;"> opacity: 0.7;</span><br />
<span style="font-family: Verdana, sans-serif;"> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;"></style></span></blockquote>
</div>
<span style="font-family: Verdana, sans-serif;">8. Kemudian masukkan script dibawah ini tepat dibawah script diatas</span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><style type='text/css'></span><span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg .<span style="color: blue;">ITEM 1</span> a:hover { background-image: url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7IEYbF5Nv13G7HJuQkr7kK2TuEmD1wCwRbo167cIIhj2qRjgWNSO3NbxDHjUpsx4e47t_hQ2kM9hptmJD3NdrwNF1L0098EKq2BLFaHtjat-kXCOUvJ-T-3SlSZfnhozo4c3o7jXWPPR/s104/home+2.png</span>);}</span><span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg .<span style="color: blue;">ITEM 2</span> a:hover { background-image: url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLKmwIOLe1MF94d7C4jeTuuocnw6xmdNuDsgEzRsz9Gi3-rhMC7sZjC0YwEyPTNY_8zcoPH7eraLBlzAecGBaHMLeZZu2x_4XuqfmB2cvBW_tv-GftQwrIoHwrs6qbdyROGRL9Nd32LR0F/s104/id_card.png</span>);}</span><span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg .<span style="color: blue;">ITEM 3</span> a:hover { background-image: url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIJ3TaEUo7o0fmvrtH4ybC4mDRAN5EXsqh6Qg2-tPt-Jla8hxMfZNHymcsO4ikiDjKFrcK0vLq3IMDuxYHwJu6JAX6JGkIpwNSSgRgf5e_d3d0p9JgCfcxzAwtdGqS2BqBwuLzJsdFqkQ-/s104/html_file.png</span>);}</span><span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg .<span style="color: blue;">ITEM 4</span> a:hover { background-image: url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXS6ud3x1f_g-9doNz1ko9mT4oOVnrdHH9-8dkg8O2oJ7lETK0xHt7Aeeirg_w3RW_poWxRMBrI0oavW_3VhNK3fbIRRkyU2cliTUvMYRPj1_rHUvPtzD8ITKM9k6NyMqHxhxHW6sGJ4aw/s104/css_file.png)</span>;}</span><span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg .<span style="color: blue;">ITEM 5</span> a:hover { background-image: url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6muVRWXPCJi68krv72H-7S_APdbvoFhd0YsHWyPuvRUEXkv9fdUVwPAkIfQfuJhPcuQnXgNzao4n1sYb8U6WhATTbXeL_hZqiMg0bKOsFYTP7Jbby4Eq9njjAMMVVywF_Z-m6nlp7JfJ/s104/js_file.png</span>);}</span><span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg .<span style="color: blue;">ITEM 6</span> a:hover { background-image: url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguoZYA4wDvFeBqvBT4ezX9a8gfOSv_qQLB7_trwg_9amIqJpqdaiVWkkZNg7TGkqUEN_LTRocHkiO-NlxjwyCL9RQVnI1FBtDxpzvud0vzM7Kggh-8f0SqpLcmu7GuhXTKlf25YPmBaRkI/s104/edit_page.png</span>);}</span><span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg .<span style="color: blue;">ITEM 7</span> a:hover { background-image: url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY1Lfs2_XI-Wz4m9vUQnmK71kwfF46rUL87CC2HWMlpAYHe50V48mVXpbuLd6Pj-UKBYdYxTFno9ZiKKoyooK4Z8wbF-byuBPRcaK3x9D7nUElEjINWqJZ6htL1sj8gHr2VX4Iwqk8ALOM/s104/book_accept.png</span>);}</span><span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;">ul#Slide-Menu-vertikal-cbwg .<span style="color: blue;">ITEM 8</span> a:hover { background-image: url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRM_NHZKtzWjs56ml-Vbt_XmhHOS_9ByfzCm2qpDF2Euo0RytUbE67SSqJxoJ-BLIDUFu3Erlg3HkoumkkAw0vIvXgV642GxFpILW_5GSIe4YJzXXa9t46r9QUdGfatyon85QGS-hS0Oe0/s104/mail.png</span>);}</span><span style="font-family: Verdana, sans-serif;"></style></span></blockquote>
<b style="font-family: Verdana, sans-serif;">Catatan :</b><br />
<span style="font-family: Verdana, sans-serif;">- Tulisan warna <span style="color: red;">merah</span> adalah ULR Icon yang ada pada setiap menu.</span><br />
<span style="font-family: Verdana, sans-serif;">- Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda inginkan.</span><br />
<span style="font-family: Verdana, sans-serif;">- Sebagai referens i, anda bisa dapatkan macam - macam bentuk icon di <a href="http://dryicons.com/free-icons">http://dryicons.com/free-icons</a></span><br />
<span style="font-family: Verdana, sans-serif;">- Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">9. Klik <b>simpan template</b></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Langkah selanjutnya tinggal menaruh Slide Menu Vertikal ini pada Sidebar atau Gadget blog anda.</b></span><br />
<span style="font-family: Verdana, sans-serif;">Ikuti langkah berikut ini :</span>
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">1. Pilih <b>Tata Letak</b> >> <b>Tambah Gadget</b> >> <b>HTML/JavaScript</b></span><br />
<span style="font-family: Verdana, sans-serif;">2. Masukkan script dibawah ini</span><br />
<span style="font-family: Verdana, sans-serif;">3. Klik <b>simpan</b></span><br />
<blockquote>
<span style="font-family: Verdana, sans-serif;"><ul id="Slide-Menu-vertikal-cbwg"><br /><li class="<span style="color: blue;">ITEM 1</span>"><br /><a href="<span style="color: red;">http://AlamatLinkAnda</span>"><span><span style="color: magenta;">Judul Menu 1</span></span></a><br /></li><br /><li class="<span style="color: blue;">ITEM 2</span>"><br /><a href="<span style="color: red;">http://AlamatLinkAnda</span>"><span><span style="color: magenta;">Judul Menu 2</span></span></a><br /></li><br /><li class="<span style="color: blue;">ITEM 3</span>"><br /><a href="<span style="color: red;">http://AlamatLinkAnda</span>"><span><span style="color: magenta;">Judul Menu 3</span></span></a><br /></li><br /><li class="<span style="color: blue;">ITEM 4</span>"><br /><a href="<span style="color: red;">http://AlamatLinkAnda</span>"><span><span style="color: magenta;">Judul Menu 4</span></span></a><br /></li><br /><li class="<span style="color: blue;">ITEM 5</span>"><br /><a href="<span style="color: red;">http://AlamatLinkAnda</span>"><span><span style="color: magenta;">Judul Menu 5</span></span></a><br /></li><br /><li class="<span style="color: blue;">ITEM 6</span>"><br /><a href="<span style="color: red;">http://AlamatLinkAnda</span>"><span><span style="color: magenta;">Judul Menu 6</span></span></a><br /></li><br /><li class="<span style="color: blue;">ITEM 7</span>"><br /><a href="<span style="color: red;">http://AlamatLinkAnda</span>"><span><span style="color: magenta;">Judul Menu 7</span></span></a><br /></li><br /><li class="<span style="color: blue;">ITEM 8</span>"><br /><a href="<span style="color: red;">http://AlamatLinkAnda</span>"><span><span style="color: magenta;">Judul Menu 8</span></span></a><br /></li><br /></ul></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b>Catatan : </b><br />
- Tulisan warna <span style="color: blue;">biru</span> pada kode ini harus sama dengan tulisan warna biru yang ada pada kode diatas.<br />
- Tulisan warna <span style="color: red;">merah</span> ganti dengan URL halaman anda.<br />
- Tulisan warna <span style="color: magenta;">pink</span> ganti dengan Judul Menu yang sesuai keinginan anda.<br />
<br />
Semoga bermanfaat...!!!<br />
</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com2tag:blogger.com,1999:blog-2726093644608416144.post-70545086119898076132012-12-29T19:45:00.000+07:002013-02-25T00:23:49.233+07:00Transformasi 2D<b style="font-family: Verdana, sans-serif;">Transformasi</b><span style="font-family: Verdana, sans-serif;"> adalah sebuah efek yang memungkinkan perubahan suatu unsur atau elemen seperti bentuk , ukuran dan posisi.</span><br />
<span style="font-family: Verdana, sans-serif;">Dengan CSS3 transformasi , kita dapat mengubah skala , putaran , kebalikan , dan elemen peregangan sehingga transformasi menimbulkan efek 2D atau 3D.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Pada saat ini efek transformasi sudah dukung oleh beberapa browser seperti </span><i style="font-family: Verdana, sans-serif;">Internet Explorer 9 , </i><i style="font-family: Verdana, sans-serif;">Firefox , </i><i style="font-family: Verdana, sans-serif;">Chrome , </i><i style="font-family: Verdana, sans-serif;">Safari , </i><i style="font-family: Verdana, sans-serif;">Opera.</i><br />
<span style="font-family: Verdana, sans-serif;">Tapi dari beberapa browser yang mendukung efek transformasi ini memiliki cara yang berbeda pada penulisan kodenya.</span><br />
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span>
<span style="font-family: Verdana, sans-serif;"><b>Berikut perbedaan yang perlu diperhatikan :</b></span><br />
<span style="font-family: Verdana, sans-serif;">1. Internet Explorer 9 memerlukan awalan-ms-.</span><br />
<span style="font-family: Verdana, sans-serif;">2. Firefox membutuhkan awalan-moz-.</span><br />
<span style="font-family: Verdana, sans-serif;">3. Chrome dan Safari membutuhkan awalan-WebKit-.</span><br />
<span style="font-family: Verdana, sans-serif;">4. Opera membutuhkan awalan-o-.</span><br />
<span style="font-family: Verdana, sans-serif;">Sehingga bila kita menginginkan semua browser yang di sebutkan diatas menampilkan efek transformasi yang kita buat , sebaiknya kita buat seluruh kode yang dibutuhkan setiap browser diatas.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;"></span>
<span style="font-family: Verdana, sans-serif;"><b>Berikut ini saya berikan beberapa contoh metode transformasi 2D.</b></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span><span style="font-family: Verdana, sans-serif;"><b><span style="color: red; font-size: large;">1. Translate</span></b></span><br />
<span style="font-family: Verdana, sans-serif;">Dengan metode Translate , elemen bergerak dari posisi semula keposisi lain tergantung pada parameter yang diberikan untuk posisi kiri (<b>sumbu X</b>) dan bagian atas (<b>sumbu Y</b>) :</span><br />
<style type="text/css">
.translate
{
width:100px;
height:100px;
background-color:#e0e0e0;
border-radius:10px;
padding:10px;
margin:10px;
text-align:center;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
box-shadow: 3px 3px 3px #818181; box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
}
.translate:hover{
background:url(https://blog-dhecun.googlecode.com/files/Cewe-Cantik.png) no-repeat center;
background-size:125px 120px;
color:transparent;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
transform:translate(50px,10px);
-ms-transform:translate(50px,10px); /* IE 9 */
-moz-transform:translate(50px,10px); /* Firefox */
-webkit-transform:translate(50px,10px); /* Safari and Chrome */
-o-transform:translate(50px,10px); /* Opera */
}
.translate2{width:100px;
height:100px;
background-color:#e0e0e0;
border-radius:10px;
padding:10px;
margin:10px;
text-align:center;
box-shadow: 3px 3px 3px #818181; box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
transform:translate(50px,10px);
-ms-transform:translate(50px,10px); /* IE 9 */
-moz-transform:translate(50px,10px); /* Firefox */
-webkit-transform:translate(50px,10px); /* Safari and Chrome */
-o-transform:translate(50px,10px); /* Opera */
}
div.Translate#geser
{
margin:10px;
transform:translate(50px,10px);
-ms-transform:translate(50px,10px); /* IE 9 */
-moz-transform:translate(50px,10px); /* Firefox */
-webkit-transform:translate(50px,10px); /* Safari and Chrome */
-o-transform:translate(50px,10px); /* Opera */
}
</style>
<table cellpadding="0" cellspacing="10">
<tbody><tr><td align="justify" valign="top" width="250">
<center><div class="translate">
posisi awal<br/><br/>tunjuk kesini</div></center>
</td>
<td align="justify" valign="top" width="250">
<center><div class="translate2">
posisi kekanan 50px dan kebawah 10px</div></center>
</td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><style type="text/css"><br />div.Translate<br />{<br />width:100px;<br />height:75px;<br />background-color:#e0e0e0;<br />border:3px solid #3b5998;<br />padding:10px;<br />}<br />div.Translate#geser<br />{<br />transform:translate(50px,10px);<br />-ms-transform:translate(50px,10px); /* IE 9 */<br />-moz-transform:translate(50px,10px); /* Firefox */<br />-webkit-transform:translate(50px,10px); /* Safari and Chrome */<br />-o-transform:translate(50px,10px); /* Opera */<br />}<br /></style><br /><div class="Translate">ini pada posisi awal</div><br /><div class="Translate" id="geser">ini posisi kekanan 50px dan kebawah 10px</div></span></blockquote>
<b style="font-family: Verdana, sans-serif;"><span style="color: red; font-size: large;">2. Rotate</span></b><br />
<span style="font-family: Verdana, sans-serif;">Dengan metode rotate , elemen berputar searah jarum jam pada derajat tertentu.</span><br />
<span style="font-family: Verdana, sans-serif;">Nilai negatif , elemen berputar menjadi berlawanan arah jarum jam.</span><br />
<style type="text/css">
.rotate
{
width:100px;
height:100px;
background-color:#e0e0e0;
border-radius:10px;
padding:10px;
margin:10px;
text-align:center;
box-shadow: 3px 3px 3px #818181; box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
}
.rotate:hover{
background:url(https://blog-dhecun.googlecode.com/files/Cewe-Cantik.png) no-repeat center;
background-size:125px 120px;
color:transparent;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
transform:translate(50px,10px);
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */
}
div.rotate#memutar
{
margin:10px;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */
}
</style>
<table cellpadding="0" cellspacing="10">
<tbody><tr><td align="justify" valign="top" width="250">
<center><div class="rotate">
posisi awal<br/><br/>tunjuk kesini</div></center>
</td>
<td align="justify" valign="top" width="250">
<center><div class="rotate" id="memutar">
posisi 45 derajat</div></center>
</td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><style type="text/css"><br />div.rotate<br />{<br />width:100px;<br />height:75px;<br />background-color:#e0e0e0;<br />border:3px solid #3b5998;<br />padding:10px;<br />}<br />div.rotate#memutar<br />{<br />margin:20px;<br />transform: rotate(45deg);<br />-ms-transform: rotate(45deg); /* IE 9 */<br />-webkit-transform: rotate(45deg); /* Safari and Chrome */<br />-o-transform: rotate(45deg); /* Opera */<br />-moz-transform: rotate(45deg); /* Firefox */<br />}<br /></style><br /><div class="rotate">ini pada posisi awal</div><br /><div class="rotate" id="memutar">ini posisi 30 derajat</div></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b><span style="color: red; font-size: large;">3. Scale</span></b><br />
Transformasi ini berfungsi mengubah ukuran sebuah elemen baik diperkecil atau diperbesar.<br />
Dalam hal ini ukuran atau ketebalan border juga ikut berubah.<br />
<style type="text/css">
.scale1{width:100px;
height:100px;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
background-color:#e0e0e0;
border-radius:10px;
padding:10px;
margin:10px;
text-align:center;
box-shadow: 3px 3px 3px #818181; box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
}
.scale1:hover{background:#ffda4d;
background:url(https://blog-dhecun.googlecode.com/files/Cewe-Cantik.png) no-repeat center;
background-size:125px 120px;
color:transparent;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
transform:scale(0.8,0.8);
-ms-transform:scale(0.8,0.8); /* IE 9 */
-moz-transform:scale(0.8,0.8); /* Firefox */
-webkit-transform:scale(0.8,0.8); /* Safari and Chrome */
-o-transform:scale(0.8,0.8); /* Opera */
}
.scale2{width:100px;
height:100px;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
background-color:#e0e0e0;
border-radius:10px;
padding:10px;
margin:10px;
text-align:center;
box-shadow: 3px 3px 3px #818181; box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
}
.scale2:hover{background:url(https://blog-dhecun.googlecode.com/files/Cewe-Cantik.png) no-repeat top center;
background-size:150px 150px;
color:transparent;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-moz-transform:scale(2,2); /* Firefox */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-o-transform:scale(2,2); /* Opera */
}
div.scale
{
width:100px;
height:100px;
background-color:#e0e0e0;
border-radius:10px;
padding:10px;
margin:10px;
box-shadow: 3px 3px 3px #818181; box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
}
div.scale#kecil
{
margin:10px;
transform:scale(0.8,0.8);
-ms-transform:scale(0.8,0.8); /* IE 9 */
-moz-transform:scale(0.8,0.8); /* Firefox */
-webkit-transform:scale(0.8,0.8); /* Safari and Chrome */
-o-transform:scale(0.8,0.8); /* Opera */
}
div.scale#besar
{
margin:10px;
transform:scale(2,2);
-ms-transform:scale(2,2); /* IE 9 */
-moz-transform:scale(2,2); /* Firefox */
-webkit-transform:scale(2,2); /* Safari and Chrome */
-o-transform:scale(2,2); /* Opera */
}
</style>
<table cellpadding="10" cellspacing="10">
<tbody><tr><td align="justify" valign="top" width="250">
<center><div class="scale1">
bentuk awal kemudian diperkecil<br/><br/>tunjuk kesini</div></center>
</td>
<td align="justify" valign="top" width="250">
<center><div class="scale2">
bentuk awal kemudian diperbesar<br/><br/>tunjuk kesini</div></center>
</td></tr>
</tbody></table>
<table cellpadding="0" cellspacing="10">
<tbody><tr><td align="justify" valign="top" width="250">
<center><div class="scale" id="kecil">
<span style="font-family: Verdana, sans-serif;">diperkecil</span></div></center>
<span style="font-family: Verdana, sans-serif;">
</span>
</td>
<td align="justify" valign="top" width="250">
<center><div class="scale" id="besar">
<span style="font-family: Verdana, sans-serif;">diperbesar</span></div></center>
</td></tr>
</tbody></table>
<span style="font-family: Verdana, sans-serif;">
<b>Kode :</b><br />
</span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><style type="text/css"></span><br />
<span style="font-family: Verdana, sans-serif;">div.scale</span><br />
<span style="font-family: Verdana, sans-serif;">{</span><br />
<span style="font-family: Verdana, sans-serif;">width:100px;</span><br />
<span style="font-family: Verdana, sans-serif;">height:75px;</span><br />
<span style="font-family: Verdana, sans-serif;">background-color:#e0e0e0;</span><br />
<span style="font-family: Verdana, sans-serif;">border:3px solid #3b5998;</span><br />
<span style="font-family: Verdana, sans-serif;">padding:10px;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">div.scale#kecil</span><br />
<span style="font-family: Verdana, sans-serif;">{</span><br />
<span style="font-family: Verdana, sans-serif;">margin:10px;</span><br />
<span style="font-family: Verdana, sans-serif;">transform:scale(0.8,0.8);</span><br />
<span style="font-family: Verdana, sans-serif;">-ms-transform:scale(0.8,0.8); /* IE 9 */</span><br />
<span style="font-family: Verdana, sans-serif;">-moz-transform:scale(0.8,0.8); /* Firefox */</span><br />
<span style="font-family: Verdana, sans-serif;">-webkit-transform:scale(0.8,0.8); /* Safari and Chrome */</span><br />
<span style="font-family: Verdana, sans-serif;">-o-transform:scale(0.8,0.8); /* Opera */</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">div.scale#besar</span><br />
<span style="font-family: Verdana, sans-serif;">{</span><br />
<span style="font-family: Verdana, sans-serif;">margin:60px;</span><br />
<span style="font-family: Verdana, sans-serif;">transform:scale(2,2);</span><br />
<span style="font-family: Verdana, sans-serif;">-ms-transform:scale(2,2); /* IE 9 */</span><br />
<span style="font-family: Verdana, sans-serif;">-moz-transform:scale(2,2); /* Firefox */</span><br />
<span style="font-family: Verdana, sans-serif;">-webkit-transform:scale(2,2); /* Safari and Chrome */</span><br />
<span style="font-family: Verdana, sans-serif;">-o-transform:scale(2,2); /* Opera */</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;"></style></span><br />
<span style="font-family: Verdana, sans-serif;"><div class="scale">ini bentuk awal</div></span><br />
<span style="font-family: Verdana, sans-serif;"><div class="scale" id="kecil">ini diperkecil</div></span><br />
<span style="font-family: Verdana, sans-serif;"><div class="scale" id="besar">ini diperbesar</div></span></blockquote>
<span style="font-family: Verdana, sans-serif;">
</span>
<span style="font-family: Verdana, sans-serif;"><div>
<span style="font-family: Verdana, sans-serif;"></span><br />
<div>
<span style="font-family: Verdana, sans-serif;"><b><span style="color: red; font-size: large;">4. Skew</span></b></span></div>
<span style="font-family: Verdana, sans-serif;">
</span>
<br />
<div>
<span style="font-family: Verdana, sans-serif;">Dengan metode condong , elemen berubah dalam sudut tertentu tergantung pada parameter yang diberikan , untuk horizontal (sumbu X) dan vertikal (sumbu Y).</span></div>
<span style="font-family: Verdana, sans-serif;">
</span></div>
<style type="text/css">
.posisi-awal
{
width:100px;
height:100px;
background-color:#e0e0e0;
border-radius:10px;
padding:10px;
margin:10px;
text-align:center;
box-shadow: 3px 3px 3px #818181; box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #3b5998;
}
.posisi-awal:hover{
background:url(https://blog-dhecun.googlecode.com/files/Cewe-Cantik.png) no-repeat center;
background-size:125px 120px;
color:transparent;
-o-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-webkit-transition:all 0.5s ease-out;
transform:skew(20deg,10deg);
-ms-transform:skew(20deg,10deg); /* IE 9 */
-moz-transform:skew(20deg,10deg); /* Firefox */
-webkit-transform:skew(20deg,10deg); /* Safari and Chrome */
-o-transform:skew(20deg,10deg); /* Opera */
}
div.posisi-awal#miring
{
margin:10px;
transform:skew(20deg,10deg);
-ms-transform:skew(20deg,10deg); /* IE 9 */
-moz-transform:skew(20deg,10deg); /* Firefox */
-webkit-transform:skew(20deg,10deg); /* Safari and Chrome */
-o-transform:skew(20deg,10deg); /* Opera */
}
</style>
<table cellpadding="0" cellspacing="10">
<tbody><tr><td align="justify" valign="top" width="250">
<center><div class="posisi-awal">
posisi awal<br/><br/>tunjuk kesini</div></center>
</td>
<td align="justify" valign="top" width="250">
<center><div class="posisi-awal" id="miring">
posisi miring kesamping 20 derajat, kebawah 10 derajat</div></center>
</td></tr>
</tbody></table>
<b>Kode :</b></span><br />
<div>
<span style="font-family: Verdana, sans-serif;"></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><style type="text/css"></span><br />
<span style="font-family: Verdana, sans-serif;">div.posisi-awal</span><br />
<span style="font-family: Verdana, sans-serif;">{</span><br />
<span style="font-family: Verdana, sans-serif;">width:100px;</span><br />
<span style="font-family: Verdana, sans-serif;">height:120px;</span><br />
<span style="font-family: Verdana, sans-serif;">background-color:#e0e0e0;</span><br />
<span style="font-family: Verdana, sans-serif;">border:3px solid #3b5998;</span><br />
<span style="font-family: Verdana, sans-serif;">padding:10px;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">div.posisi-awal#miring</span><br />
<span style="font-family: Verdana, sans-serif;">{</span><br />
<span style="font-family: Verdana, sans-serif;">margin:39px;</span><br />
<span style="font-family: Verdana, sans-serif;">transform:skew(20deg,10deg);</span><br />
<span style="font-family: Verdana, sans-serif;">-ms-transform:skew(20deg,10deg); /* IE 9 */</span><br />
<span style="font-family: Verdana, sans-serif;">-moz-transform:skew(20deg,10deg); /* Firefox */</span><br />
<span style="font-family: Verdana, sans-serif;">-webkit-transform:skew(20deg,10deg); /* Safari and Chrome */</span><br />
<span style="font-family: Verdana, sans-serif;">-o-transform:skew(20deg,10deg); /* Opera */</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;"></style></span><br />
<span style="font-family: Verdana, sans-serif;"><div class="posisi-awal">ini pada posisi awal</div></span><br />
<span style="font-family: Verdana, sans-serif;"><div class="posisi-awal" id="miring">ini posisi miring kesamping 20 derajat, kebawah 10 derajat</div></span></blockquote>
<span style="font-family: Verdana, sans-serif;">
</span>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-11673896717138729302012-12-29T16:56:00.002+07:002013-01-19T00:48:06.345+07:00CSS3 Transisi<span style="font-family: Verdana, sans-serif;">Dengan </span><b style="font-family: Verdana, sans-serif;">CSS3 Transisi</b><span style="font-family: Verdana, sans-serif;"> , kita dapat menambahkan efek gerak pada elemen 2D dari satu gaya ke gaya yang lain tanpa menggunakan animasi </span><i style="font-family: Verdana, sans-serif;">Flash</i><span style="font-family: Verdana, sans-serif;"> ataupun </span><i style="font-family: Verdana, sans-serif;">JavaScript</i><span style="font-family: Verdana, sans-serif;">.</span><br />
<span style="font-family: Verdana, sans-serif;">Tapi sayang belum seluruh browser mendukung adanya fitur CSS3 Transisi ini. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Berikut beberapa browser yang mendukung fitur ini :</b></span><br />
<span style="font-family: Verdana, sans-serif;">1. Internet Explorer tidak lagi mendukung properti transisi.</span><br />
<span style="font-family: Verdana, sans-serif;">2. Firefox 4 membutuhkan awalan -moz-.</span><br />
<span style="font-family: Verdana, sans-serif;">3. Chrome dan Safari membutuhkan awalan -WebKit-.</span><br />
<span style="font-family: Verdana, sans-serif;">4. Opera membutuhkan awalan -o-.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Ada 2 hal yang harus kita perhatikan agar <b>CSS3 Transisi</b> ini dapat bekerja dengan baik yaitu :</span><br />
<span style="font-family: Verdana, sans-serif;"><i>1. Kita harus menentukan Properti CSS.</i></span><br />
<span style="font-family: Verdana, sans-serif;"><i>2. Menentukan durasi efek.</i></span><br />
<span style="font-family: Verdana, sans-serif;">Jika nilai durasi tidak ditentukan maka efek transisi ini tidak akan bekerja karena nilainya masih default yaitu "<b>0</b>".</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Cara kerjanya kita menggunakan fitur <i>mouse-over </i>, yaitu transisi bekerja dengan kata lain elemen berubah atau bergerak ketika pointer mouse terletak pada elemen yang kita buat , dan ketika pointer mouse keluar dari atas elemen , maka bentuk elemen kembali seperti semula.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Silahkan anda arahkan pointer mouse anda pada kotak-kotak yang ada dibawah ini.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Contoh 1</b></span><br />
<style type="text/css">
div.transisi
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.transisi:hover
{
width:300px;
}
</style>
<br />
<div class="transisi">
Elemen yang menggunakan CSS3 Transisi</div>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote>
<span style="font-family: Verdana, sans-serif;"><style type="text/css"><br />div.transisi<br />{<br />width:100px;<br />height:100px;<br />background-color:#e0e0e0;<br />border:3px solid #3b5998;<br />padding:10px;<br />transition:width 2s;<br />-moz-transition:width 2s; /* Firefox 4 */<br />-webkit-transition:width 2s; /* Safari and Chrome */<br />-o-transition:width 2s; /* Opera */<br />}<br />div.transisi:hover<br />{<br />width:300px;<br />}<br /></style><br /><div class="transisi">Elemen yang menggunakan CSS3 Transisi</div></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span>
<span style="font-family: Verdana, sans-serif;"><b>Contoh 2</b></span><br />
<span style="font-family: Verdana, sans-serif;">Kita bisa menambahkan efek transisi menjadi lebih dari satu gaya , misalnya efek transisi ke samping sekaligus ke bawah.</span><br />
<style type="text/css">
div.transisi2
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.transisi2:hover
{
width:300px;
height:300px;
}
</style>
<br />
<div class="transisi2">
Efek transisi melebar kesamping sekaligus kebawah</div>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<br />
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><style type="text/css"></span><span style="font-family: Verdana, sans-serif;">div.transisi2</span><span style="font-family: Verdana, sans-serif;">{</span><span style="font-family: Verdana, sans-serif;">width:100px;</span><span style="font-family: Verdana, sans-serif;">height:100px;</span><span style="font-family: Verdana, sans-serif;">background-color:#e0e0e0;</span><span style="font-family: Verdana, sans-serif;">border:3px solid #3b5998;</span><span style="font-family: Verdana, sans-serif;">padding:10px;</span><span style="font-family: Verdana, sans-serif;">transition:width 2s;</span><span style="font-family: Verdana, sans-serif;">-moz-transition:width 2s; /* Firefox 4 */</span><span style="font-family: Verdana, sans-serif;">-webkit-transition:width 2s; /* Safari and Chrome */</span><span style="font-family: Verdana, sans-serif;">-o-transition:width 2s; /* Opera */</span><span style="font-family: Verdana, sans-serif;">}</span><span style="font-family: Verdana, sans-serif;">div.transisi2:hover</span><span style="font-family: Verdana, sans-serif;">{</span><span style="font-family: Verdana, sans-serif;">width:300px;</span><span style="font-family: Verdana, sans-serif;">height:300px;</span><span style="font-family: Verdana, sans-serif;">}</span><span style="font-family: Verdana, sans-serif;"></style></span><span style="font-family: Verdana, sans-serif;"><div class="transisi2">Efek transisi melebar kesamping sekaligus kebawah</div></span></blockquote>
<br />
<br />
<div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><b><br /></b></span></span>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><b>Contoh 3</b></span></span></div>
<span style="font-family: Verdana, sans-serif;">
</span>
<br />
<div>
<style type="text/css">
div.transisi3
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.transisi3:hover
{
width:300px;
height:40px;
}
</style><span style="font-family: Verdana, sans-serif;">
</span><br />
<div class="transisi3">
<span style="font-family: Verdana, sans-serif;">Efek transisi melebar kesamping sekaligus tinggi menyempit</span></div>
</div>
<span style="font-family: Verdana, sans-serif;">
</span>
<span style="font-family: Verdana, sans-serif;"></span><br />
<div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span></span></div>
<div>
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><style type="text/css"></span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">div.transisi3</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">{</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">width:100px;</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">height:100px;</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">background-color:#e0e0e0;</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">border:3px solid #3b5998;</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">padding:10px;</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">transition:width 2s;</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">-moz-transition:width 2s; /* Firefox 4 */</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">-webkit-transition:width 2s; /* Safari and Chrome */</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">-o-transition:width 2s; /* Opera */</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">}</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">div.transisi3:hover</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">{</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">width:300px;</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">height:40px;</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">}</span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"></style></span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><div class="transisi3">Efek transisi melebar kesamping sekaligus tinggi menyempit</div></span></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;">
</span></span></div>
<span style="font-family: Verdana, sans-serif;">
</span>
<div>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><b><br /></b></span></span>
<span style="font-family: Verdana, sans-serif;"><span style="font-family: Verdana, sans-serif;"><b>Contoh 4</b></span></span></div>
<span style="font-family: Verdana, sans-serif;">
<div>
<style type="text/css">
div.transisi4
{
width:100px;
height:100px;
background-color:#e0e0e0;
border:3px solid #3b5998;
padding:10px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s,
-moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s,
-webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s,
-o-transform 2s; /* Opera */
}
div.transisi4:hover
{
width:150px;
height:150px;
transform:rotate(720deg);
-moz-transform:rotate(720deg); /* Firefox 4 */
-webkit-transform:rotate(720deg); /* Safari and Chrome */
-o-transform:rotate(720deg); /* Opera */
}
</style>
<br />
<div class="transisi4">
Efek transisi membesar dan berputar</div>
<div>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><style type="text/css"><br />div.transisi4<br />{<br />width:100px;<br />height:100px;<br />background-color:#e0e0e0;<br />border:3px solid #3b5998;<br />padding:10px;<br />transition:width 2s, height 2s;<br />-moz-transition:width 2s, height 2s,<br />-moz-transform 2s; /* Firefox 4 */<br />-webkit-transition:width 2s, height 2s,<br />-webkit-transform 2s; /* Safari and Chrome */<br />-o-transition:width 2s, height 2s,<br />-o-transform 2s; /* Opera */<br />}<br />div.transisi4:hover<br />{<br />width:150px;<br />height:150px;<br />transform:rotate(720deg);<br />-moz-transform:rotate(720deg); /* Firefox 4 */<br />-webkit-transform:rotate(720deg); /* Safari and Chrome */<br />-o-transform:rotate(720deg); /* Opera */<br />}<br /></style><br /><div class="transisi4">Efek transisi membesar dan berputar</div></span></blockquote>
</div>
<div>
<br />
Semoga bermanfaat...!!!</div>
</div>
</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com1tag:blogger.com,1999:blog-2726093644608416144.post-64282666708996928902012-12-29T14:53:00.000+07:002012-12-29T19:02:40.318+07:00CSS Border-Radius<br />
<span style="font-family: Verdana, sans-serif;"><b>CSS Border - Radius</b> memudahkan kita untuk merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung , bahkan dengan <b>CSS Border - Radius</b> kita bisa membuat sebuah lingkaran.</span><br />
<span style="font-family: Verdana, sans-serif;">Masing - masing sudut bisa diatur nilain nya secara sendiri - sendiri , seperti bagian <b>atas - kanan</b> , <b>atas - kiri</b> , <b>bawah - kanan</b> , dan <b>bawah - kiri</b>.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Contoh 1 :</b></span><br />
<div class="Contoh_1" style="-moz-border-radius: 0 0 50px 0; -webkit-border-radius: 0 0 50px 0; background-color: #e0e0e0; border-radius: 0 0 50px 0; border: 2px solid #3b5998; height: 65px; padding: 5px; width: 160px;">
<br /></div>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div class="Contoh_1" style="-moz-border-radius: 0 0 50px 0; -webkit-border-radius: 0 0 50px 0; background-color: <span style="color: blue;">#e0e0e0</span>; border-radius: 0 0 50px 0; border: 2px solid <span style="color: blue;">#3b5998</span>; height: <span style="color: blue;">65</span>px; width: <span style="color: blue;">160</span>px;"></div></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b>Contoh 2 :</b></span><br />
<div class="Contoh_2" style="-moz-border-radius: 0 50px 25px 0; -webkit-border-radius: 0 50px 25px 0; background-color: #e0e0e0; border-radius: 0 50px 25px 0; border: 2px solid #3b5998; height: 65px; padding: 5px; width: 160px;">
</div>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div class="Contoh_2" style="height: <span style="color: blue;">65</span>px; width:<span style="color: blue;">160</span>px;-moz-border-radius: 0 50px 25px 0;-webkit-border-radius: 0 50px 25px 0; border-radius: 0 50px 25px 0; background-color:<span style="color: blue;">#e0e0e0</span>;border:2px solid <span style="color: blue;">#3b5998</span>;"></div></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b>Contoh 3 :</b></span>
<br />
<div class="Contoh_3" style="-moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0 50px 50px 0; background-color: #e0e0e0; border-radius: 0 50px 50px 0; border: 2px solid #3b5998; height: 65px; padding: 5px; width: 160px;">
<br /></div>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div class="Contoh_3" style="-moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0 50px 50px 0; background-color:<span style="color: blue;">#e0e0e0</span>; border-radius: 0 50px 50px 0; border:2px solid <span style="color: blue;">#3b5998</span>; height:<span style="color: blue;">65</span>px; width:<span style="color: blue;">160</span>px;"></div></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b>Contoh 4 :</b></span><br />
<div class="Contoh_4" style="-moz-border-radius: 25px 50px 25px 50px; -webkit-border-radius: 25px 50px 25px 50px; background-color: #e0e0e0; border-radius: 25px 50px 25px 50px; border: 2px solid #3b5998; height: 65px; padding: 5px; width: 160px;">
<br /></div>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div class="Contoh_4" style="-moz-border-radius: 25px 50px 25px 50px; -webkit-border-radius: 25px 50px 25px 50px; background-color: <span style="color: blue;">#e0e0e0</span>; border-radius: 25px 50px 25px 50px; border: 2px solid <span style="color: blue;">#3b5998</span>; height: <span style="color: blue;">65</span>px; width: <span style="color: blue;">160</span>px;"></div></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b>Contoh 5 :</b></span><br />
<div class="Contoh_E" style="-moz-border-radius: 25px 25px 25px 25px; -webkit-border-radius: 25px 25px 25px 25px; background-color: #e0e0e0; border-radius: 25px 25px 25px 25px; border: 2px solid #3b5998; height: 65px; padding: 5px; width: 160px;">
<br /></div>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div class="Contoh_5" style="-moz-border-radius: 25px 25px 25px 25px; -webkit-border-radius: 25px 25px 25px 25px; background-color: <span style="color: blue;">#e0e0e0</span>; border-radius: 25px 25px 25px 25px; border: 2px solid <span style="color: blue;">#3b5998</span>; height: <span style="color: blue;">65</span>px; width: <span style="color: blue;">160</span>px;"></div></span></blockquote>
<span style="font-family: Verdana, sans-serif;"><b>Contoh 6 :</b></span><br />
<div class="Contoh_6" style="-moz-border-radius: 50px 50px 50px 50px; -webkit-border-radius: 50px 50px 50px 50px; background-color: #e0e0e0; border-radius: 50px 50px 50px 50px; border: 2px solid #3b5998; height: 70px; padding: 5px; width: 70px;">
</div>
<span style="font-family: Verdana, sans-serif;"><b>Kode :</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div class="Contoh_6" style="-moz-border-radius: 50px 50px 50px 50px; -webkit-border-radius: 50px 50px 50px 50px; background-color: <span style="color: blue;">#e0e0e0</span>; border-radius: 50px 50px 50px 50px; border: 2px solid <span style="color: blue;">#3b5998</span>; height: <span style="color: blue;">70</span>px; width: <span style="color: blue;">70</span>px;"></div></span>
</blockquote>
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span><br />
<span style="font-family: Verdana, sans-serif;">Ganti tulisan warna <span style="color: blue;">biru</span> sesuai keinginan anda.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-60037191714116698552012-12-27T11:27:00.000+07:002012-12-27T18:53:12.975+07:00Membuat Widget Artikel Terbaru Keren<img alt="recent post maskolis" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg26tyVcFL4qCJ5P9CTeMqtnrwvDSF9Na03HLNSmB1jZdmOvWeQooxqxCB2_awPhY5VW5Fm6p5OMK4T66o-HUfqIa45BqkdTSi8pYgrcb60eTEwk3whUECIcg9R82m1lupSNmup7quxMXo/s400/New+Picture.jpg" width="228" /><br />
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Centang <b>Expand Widget Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">6. Cari kode <b>]]></b:skin></b></span><br />
<span style="font-family: Verdana, sans-serif;">7. Masukkan script dibawah ini tepat diatas kode <b>]]></b:skin></b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}<br />#terbaru{margin:0px}<br />.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}<br />.mas-elemen img{background:#999;padding:4px;float:left;height:<span style="color: blue;">70</span>px;margin-right:8px;width:<span style="color: blue;">70</span>px}<br />.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}<br />.mas-elemen:hover{background-color:#c3c3c3}<br />.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}<br />#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKTrmIQ8xvFCV2t6XoJkrqhyphenhyphenB3AvFTuM9cBUtjrBpBdrpT6o5J5NVSZ2UqZnOFoln6s7gjEE5AgwAE1ssp7ic8B2Xblf227by6Ut8HPobpJ0QVC85csKEY3WLx1l7XpVwsybGe0TLZF8/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}<br />#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}<br />#mas-navigasifeed:hover{background-color:#c3c3c3}<br />#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}<br />#mas-navigasifeed span{padding:5px 10px}<br />#mas-navigasifeed .next{float:right}<br />#mas-navigasifeed .previous{float:left}<br />#mas-navigasifeed .home{text-align:center}<br />#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}</span></blockquote>
<b style="font-family: Verdana, sans-serif;">Catatan :</b><br />
<span style="font-family: Verdana, sans-serif;">Tulisan warna <span style="color: blue;">biru</span> adalah lebar dan tinggi thumbnail image.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">8. Kemudian cari kode <b></head></b></span><br />
<span style="font-family: Verdana, sans-serif;">9. Masukkan script dibawah ini tepat diatas kode <b></head></b></span><br />
<div style="-moz-border-radius: 5px; background-color: #e0e0e0; border-radius: 5px; border: 0px solid #4169E1; height: 200px; overflow: auto; padding: 0px; width: 475px;">
<blockquote class="tr_bq">
<br />
<span style="font-family: Verdana, sans-serif;"><script type='text/javascript'></span><br />
<span style="font-family: Verdana, sans-serif;">//<![CDATA[</span><br />
<span style="color: blue; font-family: Verdana, sans-serif;">var numfeed = 5;</span><br />
<span style="font-family: Verdana, sans-serif;">var startfeed = 0; </span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var urlblog</span> = "<span style="color: red;">http://dhecun.blogspot.com</span>";</span><br />
<span style="color: blue; font-family: Verdana, sans-serif;">var charac = 100;</span><br />
<span style="font-family: Verdana, sans-serif;">var urlprevious, urlnext;function maskolisfeed(johny,banget){</span><br />
<span style="font-family: Verdana, sans-serif;">var showfeed = johny.split("<");</span><br />
<span style="font-family: Verdana, sans-serif;">for(var i=0;i<showfeed.length;i++){</span><br />
<span style="font-family: Verdana, sans-serif;">if(showfeed[i].indexOf(">")!=-1){</span><br />
<span style="font-family: Verdana, sans-serif;">showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">showfeed = showfeed.join("");</span><br />
<span style="font-family: Verdana, sans-serif;">showfeed = showfeed.substring(0,banget-1);</span><br />
<span style="font-family: Verdana, sans-serif;">return showfeed;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">function showterbaru(json) {</span><br />
<span style="font-family: Verdana, sans-serif;">var entry, posttitle, posturl, postimg, postcontent;</span><br />
<span style="font-family: Verdana, sans-serif;">var showblogfeed = "";</span><br />
<span style="font-family: Verdana, sans-serif;">urlprevious = "";</span><br />
<span style="font-family: Verdana, sans-serif;">urlnext = "";</span><br />
<span style="font-family: Verdana, sans-serif;">for (var k = 0; k < json.feed.link.length; k++) {</span><br />
<span style="font-family: Verdana, sans-serif;">if (json.feed.link[k].rel == 'previous') {</span><br />
<span style="font-family: Verdana, sans-serif;">urlprevious = json.feed.link[k].href;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">if (json.feed.link[k].rel == 'next') {</span><br />
<span style="font-family: Verdana, sans-serif;">urlnext = json.feed.link[k].href;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">for (var i = 0; i < numfeed; i++) {</span><br />
<span style="font-family: Verdana, sans-serif;">if (i == json.feed.entry.length) { break; }</span><br />
<span style="font-family: Verdana, sans-serif;">entry = json.feed.entry[i];</span><br />
<span style="font-family: Verdana, sans-serif;">posttitle = entry.title.$t;</span><br />
<span style="font-family: Verdana, sans-serif;">for (var k = 0; k < entry.link.length; k++) {</span><br />
<span style="font-family: Verdana, sans-serif;">if (entry.link[k].rel == 'alternate') {</span><br />
<span style="font-family: Verdana, sans-serif;">posturl = entry.link[k].href;</span><br />
<span style="font-family: Verdana, sans-serif;">break;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">if ("content" in entry) {</span><br />
<span style="font-family: Verdana, sans-serif;">postcontent = entry.content.$t;</span><br />
<span style="font-family: Verdana, sans-serif;">} else if ("summary" in entry) {</span><br />
<span style="font-family: Verdana, sans-serif;">postcontent = entry.summary.$t;</span><br />
<span style="font-family: Verdana, sans-serif;">} else {</span><br />
<span style="font-family: Verdana, sans-serif;">postcontent = "";</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">if ("media$thumbnail" in entry) {</span><br />
<span style="font-family: Verdana, sans-serif;">postimg = entry.media$thumbnail.url;</span><br />
<span style="font-family: Verdana, sans-serif;">} else {</span><br />
<span style="font-family: Verdana, sans-serif;">postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHOJZuuOs4gPF4OWYDuKkqFpwsH3stkmeySf0WK543kj8fblgn1f47FdYnIP-jALxOCluQYoINGTE9kEJvqdQVhkoGxVnSxhT-ucP7a8uq0u2jrOFjaLlYfCgr5nXnXzmZ1Q-jOaKjlw/s1600/no+image.jpg";</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "<div class='mas-elemen'>";</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "</div>";</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">document.getElementById("terbaru").innerHTML = showblogfeed;</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed = "";</span><br />
<span style="font-family: Verdana, sans-serif;">if(urlprevious) {</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";</span><br />
<span style="font-family: Verdana, sans-serif;">} else {</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">if(urlnext) {</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";</span><br />
<span style="font-family: Verdana, sans-serif;">} else {</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "<span class='noactived next'>Next &#9658;</span>";</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";</span><br />
<span style="font-family: Verdana, sans-serif;">document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">function navigasifeed(url){</span><br />
<span style="font-family: Verdana, sans-serif;">var p, parameter;</span><br />
<span style="font-family: Verdana, sans-serif;">if(url==-1) {</span><br />
<span style="font-family: Verdana, sans-serif;">p = urlprevious.indexOf("?");</span><br />
<span style="font-family: Verdana, sans-serif;">parameter = urlprevious.substring(p);</span><br />
<span style="font-family: Verdana, sans-serif;">} else if (url==1) {</span><br />
<span style="font-family: Verdana, sans-serif;">p = urlnext.indexOf("?");</span><br />
<span style="font-family: Verdana, sans-serif;">parameter = urlnext.substring(p);</span><br />
<span style="font-family: Verdana, sans-serif;">} else {</span><br />
<span style="font-family: Verdana, sans-serif;">parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">parameter += "&callback=showterbaru";</span><br />
<span style="font-family: Verdana, sans-serif;">incluirscript(parameter);</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">function incluirscript(parameter) {</span><br />
<span style="font-family: Verdana, sans-serif;">if(startfeed==1) {removerscript();}</span><br />
<span style="font-family: Verdana, sans-serif;">document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";</span><br />
<span style="font-family: Verdana, sans-serif;">document.getElementById("mas-navigasifeed").innerHTML = "";</span><br />
<span style="font-family: Verdana, sans-serif;">var archievefeed = urlblog + "/feeds/posts/default"+ parameter;</span><br />
<span style="font-family: Verdana, sans-serif;">var terbaru = document.createElement('script');</span><br />
<span style="font-family: Verdana, sans-serif;">terbaru.setAttribute('type', 'text/javascript');</span><br />
<span style="font-family: Verdana, sans-serif;">terbaru.setAttribute('src', archievefeed);</span><br />
<span style="font-family: Verdana, sans-serif;">terbaru.setAttribute('id', 'MASLABEL');</span><br />
<span style="font-family: Verdana, sans-serif;">document.getElementsByTagName('head')[0].appendChild(terbaru);</span><br />
<span style="font-family: Verdana, sans-serif;">startfeed = 1;</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">function removerscript() {</span><br />
<span style="font-family: Verdana, sans-serif;">var elemen = document.getElementById("MASLABEL");</span><br />
<span style="font-family: Verdana, sans-serif;">var parent = elemen.parentNode;</span><br />
<span style="font-family: Verdana, sans-serif;">parent.removeChild(elemen);</span><br />
<span style="font-family: Verdana, sans-serif;">}</span><br />
<span style="font-family: Verdana, sans-serif;">onload=function() { navigasifeed(0); }</span><br />
<span style="font-family: Verdana, sans-serif;">//]]></span><br />
<span style="font-family: Verdana, sans-serif;"></script></span><br />
</blockquote>
</div>
<b style="font-family: Verdana, sans-serif;">Keterangan :</b><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var numfeed = 5;</span> adalah jumlah Artikel terbaru yang ditampilkan pada widget.</span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var urlblog</span> = <span style="color: red;">http://dhecun.blogspot.com </span>: ganti dengan URL blog anda.</span><br />
<span style="font-family: Verdana, sans-serif;"><span style="color: blue;">var charac = 100;</span> adalah jumlah karakter atau huruf pada setiap post.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">10. Setelah itu klik <b>simpan template</b></span><br />
<span style="font-family: Verdana, sans-serif;">11. Kemudian pilih <b>Tata Letak</b> >> <b>Tambah Gadget</b> >> <b>HTML/Javascript</b></span><br />
<span style="font-family: Verdana, sans-serif;">12. Masukkan script dibawah ini</span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div id="terbaru"></div><br /><div id="mas-navigasifeed"></div><br /><div style="text-align: center;"><br /><a href="http://dhecun.blogspot.com/2012/12/membuat-widget-artikel-terbaru-keren.html" target="_blank" title="Membuat Widget Artikel Terbaru Keren"><span style="font-size:xx-small;"><span style="text-shadow:1px 1px 1px #333;"><input class="button" name="go" value="Widget by Dhecun Blog" type="submit" /></span></span></a></div></span></blockquote>
<span style="font-family: Verdana, sans-serif;">13. Klik </span><b style="font-family: Verdana, sans-serif;">simpan</b><span style="font-family: Verdana, sans-serif;"> dan lihat hasil pekerjaan anda.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com2tag:blogger.com,1999:blog-2726093644608416144.post-25310470793580459662012-12-26T09:47:00.001+07:002012-12-26T09:48:51.242+07:00Cara Memasang Komentar Intense Debate di Blog<span style="font-family: Verdana, sans-serif;">Selain membuat blog semenarik mungkin dengan efek-efek yang sudah banyak di sediakan di dunia blogger , kita juga dapat membuat kotak komentar blog menjadi menarik yaitu dengan menggunakan layanan <b>Intense Debate Comment</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">Intense Debate membantu untuk mengganti kotak komentar default Blogspot menjadi versi Intense Debate.</span><br />
<span style="font-family: Verdana, sans-serif;">Coba anda perhatikan perbedaan dua gambar contoh kotak komentar default Blogspot dengan kotak komentar versi Intense Debate dibawah ini.</span><br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88ey5eeovB0KbdapJ_yTkrG3nUZ72486FaWIjcnIeSf6VgDL2HD9eofeI-8aH15c6V3SamFjRWy8qBTZmtVUuar26V0n2gn2tEzAA1aYRvVcH4Y7Ah1IDnjaB5kbkZXnfqpp3QMDNhoA/s1600/Komentar+Intense+Debate.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88ey5eeovB0KbdapJ_yTkrG3nUZ72486FaWIjcnIeSf6VgDL2HD9eofeI-8aH15c6V3SamFjRWy8qBTZmtVUuar26V0n2gn2tEzAA1aYRvVcH4Y7Ah1IDnjaB5kbkZXnfqpp3QMDNhoA/s400/Komentar+Intense+Debate.png" width="312" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">Dapat kita simpulkan bahwa perbedaannnya adalah tampilan form pengisian data nama , url blog / web , serta email.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">Bagaimana , sudah merasakan kemenarikan kotak komentar ala Intense Debate ini...?</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><b>Cara Membuat dan Cara Pemasangan.</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<span style="font-family: Verdana, sans-serif;">Untuk cara pemasangannya , silahkan anda ikuti langkah-langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;">1. Masuk ke alamat web Intense Debate , <a href="http://intensedebate.com/" target="_blank">klik disini</a></span><br />
<span style="font-family: Verdana, sans-serif;">2. Jika anda belum terdaftar , silahkan klik <b>Sign Up</b> pada halaman utama Intense Debate.</span><br />
<span style="font-family: Verdana, sans-serif;">3. Cek email anda untuk verifikasi akun anda di Intense Debate.</span><br />
<span style="font-family: Verdana, sans-serif;">4. Pada halaman <b>Dasbor</b> , anda akan melihat seperti dibawah ini.</span><br />
<span style="font-family: Verdana, sans-serif;"><img alt="Manage Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcCj4cUeaQgLbcxJZAaV-VwOv2cpD3sZK813HfbyKjqo3fihmsuM_SDyVbt4EfXX5KlmuAIp_7Ms_flkflo_JRINwfLuB3rww5-rA4v2PtsOYWrNDi1PS5BCx_z17RSd9eeSPeLXno9gXK/s1600/Manage+IntenseDebate+ANVITY.png" /></span><br />
<span style="font-family: Verdana, sans-serif;">5. Klik <b>Install IntenseDebate</b> untuk menambahkan blog / web.</span><br />
<span style="font-family: Verdana, sans-serif;">6. Selesaikan langkah 1-2 untuk menyeselaikannya.</span><br />
<div class="separator" style="clear: both; text-align: left;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Rj-7k2gc6tFj19CFTKAd9gsEvloF-ZBic67eA87jfbeEm75Zsv5abptGcaS-5pkLLmL2IEVWnZIAzeJwQ08zolAEckTItiVGrKRVok246r4z1M7r3kl02X3s6gALj1zvdRcSzXqx1ss/s1600/Register+Intense+Debate.png" /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">7. Anda akan dialihkan langsung ke langkah 3.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<img alt="Step 3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2M3ZkZkKMUqqj89FwJZbGVU42TMO3VWoWzEngPrecgxtb7xnsFO2D1Y1jJUh_vQPRaaFFPp7DErKM44x5mxllZCy8J3MsUOZqg2QdzdTItMR0I09xDi_aRXL5nIT0JPBkvTLzXUryeA3x/s1600/Step+3+IntenseDebate+ANVITY.png" /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: Verdana, sans-serif;">1. Pilih <b>All new posts (Recommended)</b>.</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: Verdana, sans-serif;">2. Pada Point No.5 , silahkan anda upload file <i>*.xml template yang sudah anda backup</i>.</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: Verdana, sans-serif;">3. Kemudian klik <b>Upload file and continue</b>.</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: Verdana, sans-serif;">4. Silahkan anda ganti <b><u>semua</u></b> kode HTML template blog anda dengan kode baru.</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: Verdana, sans-serif;"><img alt="Final Step" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqx1RlaCu7qsKT99hToaPlU2GGgIaPKZC0ShCb5zqGC8GMDMztPmyReK8oCHoIClN49kFzNlG67WAI1bhcH-v8oV698I4jNyMaBOcIY1UTgPCQ5n96E567YVvwr2nxtPNZMUzX33hhLZjx/s320/Final+Step+ANVITY.png" /></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: Verdana, sans-serif;">5. Klik <b>simpan template</b> dan lihat hasil pekerjaan anda.</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span></div>
<div class="separator" style="clear: both;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com2tag:blogger.com,1999:blog-2726093644608416144.post-87063706924139708782012-12-25T21:54:00.003+07:002012-12-27T19:04:01.328+07:00Cara Memasang Widget Facebook PopUp Like Box Timer<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pzAj9MvcNH-1RdSrI4D_8F2cGEfCDmb5G0AFHnin2z8vPUeEFgxIQEOZcRTMchrNQ_ggQSKj4ylXug9w-D6rK_mJvDWMWNzb10wY2NSp62NfyX-Oomz4xQyM_FxmqTOhmKD6wn98uIc/s1600/Facebook+Like+Box+Timer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pzAj9MvcNH-1RdSrI4D_8F2cGEfCDmb5G0AFHnin2z8vPUeEFgxIQEOZcRTMchrNQ_ggQSKj4ylXug9w-D6rK_mJvDWMWNzb10wY2NSp62NfyX-Oomz4xQyM_FxmqTOhmKD6wn98uIc/s320/Facebook+Like+Box+Timer.png" width="320" /></a></div>
<br />
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Cari kode <b></body></b></span><br />
<span style="font-family: Verdana, sans-serif;">6. Masukkan script dibawah ini tepat diatas kode <b></body></b></span><br />
<div style="-moz-border-radius: 5px; background-color: #e0e0e0; border-radius: 5px; height: 200px; overflow: auto; padding: 0px; width: 475px;">
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><script type='text/javascript'></span><br />
<span style="font-family: Verdana, sans-serif;">//<![CDATA[</span><br />
<span style="font-family: Verdana, sans-serif;"> KNFBFansPRO='<span style="color: purple;">Dhecun Blog</span>'</span><br />
<span style="font-family: Verdana, sans-serif;">//]]> </script></span><br />
<span style="font-family: Verdana, sans-serif;"><style>#fblikepop{background-color:#fff; display:none; position:fixed; top:200px;_position:absolute; /* hack for IE 6*/width:470px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;border-radius: 9px}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}</span><br />
<span style="font-family: Verdana, sans-serif;">.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikepop #closeable{float:right;margin:7px 15px 0 0;}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikepop #actionHolder{height:28px;overflow:hidden;}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:45px;}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}</span><br />
<span style="font-family: Verdana, sans-serif;">#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style></span><br />
<span style="font-family: Verdana, sans-serif;"><script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/></span><br />
<span style="font-family: Verdana, sans-serif;"><script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/></span><br />
<span style="font-family: Verdana, sans-serif;"><script src='<span style="color: red;">http://anvity-host.googlecode.com/files/anvity-likebox2.js</span>' type='text/javascript'/></span><br />
<span style="font-family: Verdana, sans-serif;"><script language='javascript'></span><br />
<span style="font-family: Verdana, sans-serif;">//<![CDATA[</span><br />
<span style="font-family: Verdana, sans-serif;">$(document).ready(function(){</span><br />
<span style="font-family: Verdana, sans-serif;">$().KNFBFansPRO({</span><br />
<span style="font-family: Verdana, sans-serif;">timeout: <span style="color: magenta;">30</span>,</span><br />
<span style="font-family: Verdana, sans-serif;">wait: <span style="color: lime;">0</span>,</span><br />
<span style="font-family: Verdana, sans-serif;">url: 'http://www.facebook.com/<span style="color: blue;">dhecun.blog</span>',</span><br />
<span style="font-family: Verdana, sans-serif;">closeable: <span style="color: orange;">true</span> });</span><br />
<span style="font-family: Verdana, sans-serif;">});</span><br />
<span style="font-family: Verdana, sans-serif;">//]]></span><br />
<span style="font-family: Verdana, sans-serif;"></script></span><br />
<span style="font-family: Verdana, sans-serif;"><div id='fbtpdiv'/></span></blockquote>
</div>
<span style="font-family: Verdana, sans-serif;">7. Klik <b>simpan template</b></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span><br />
<span style="font-family: Verdana, sans-serif;">1. Ganti kata <span style="color: purple;">Dhecun Blog</span> dengan kata yang akan tampil di bagian atas widget , misalnya "<span style="color: purple;">Join Dhecun Blog on Facebook</span>".</span><br />
<span style="font-family: Verdana, sans-serif;">2. Ganti angka <span style="color: magenta;">30</span> dengan angka yang akan mengatur berapa lama widget itu akan tampil (dalam detik).</span><br />
<span style="font-family: Verdana, sans-serif;">3. Ganti angka <span style="color: lime;">0</span> dengan angka yang akan mengatur lamanya widget ini akan tampil ketika blog baru di load (dalam menit).</span><br />
<span style="font-family: Verdana, sans-serif;">4. Ganti <span style="color: blue;">dhecun.blog</span> dengan username FansPage atau jika belum mempuyai username pada FansPage , gunakan ID FansPage (ihat pada address bar browser anda).</span><br />
<span style="font-family: Verdana, sans-serif;">5. Terakhir , ganti juga <span style="color: orange;">true</span> dengan<span style="color: orange;"> false</span> jika tanda <b>X (close)</b> ingin dihilangkan.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;"><b>Mengganti Gambar Background Widget FB LikeBox</b></span><br />
<span style="font-family: Verdana, sans-serif;">Anda </span><span style="font-family: Verdana, sans-serif;">dapat mengganti gambar background widget.</span><br />
<span style="font-family: Verdana, sans-serif;">Silahkan ganti tulisan warna <span style="color: red;">merah</span> pada kode widget diatas dengan kode-kode gambar dibawah ini.</span><br />
<img alt="Facebook Like Box Timer ANVITY" src="http://1.bp.blogspot.com/-K4tFInW4Ry8/T00kFerLNdI/AAAAAAAAGAA/-_JArnM6JeE/fbbutton%25255B3%25255D.jpg?imgmax=800" /><br />
<blockquote class="tr_bq">
<span style="color: red; font-family: Verdana, sans-serif;">http://anvity-host.googlecode.com/files/anvity-likebox2.js</span></blockquote>
<img alt="Facebook Like Box Timer ANVITY" src="http://1.bp.blogspot.com/-s9Zcq-P2_Lc/T00kGSudZHI/AAAAAAAAGAI/LsHfuaO9kBQ/BecomeFanOnFacebook%25255B2%25255D.jpg?imgmax=800" /><br />
<blockquote class="tr_bq">
<span style="color: red; font-family: Verdana, sans-serif;">http://anvity-host.googlecode.com/files/anvity-likebox4.js</span></blockquote>
<img alt="Facebook Like Box Timer ANVITY" src="http://4.bp.blogspot.com/-mIbTVG56MQU/T00kHYih-mI/AAAAAAAAGAQ/zi16v-beLao/facebookbutton%25255B2%25255D.png?imgmax=800" /><br />
<blockquote class="tr_bq">
<span style="color: red; font-family: Verdana, sans-serif;">http://anvity-host.googlecode.com/files/anvity-likebox3.js</span></blockquote>
<img alt="Facebook Like Box Timer ANVITY" src="http://3.bp.blogspot.com/-c-g_Nnn8Ics/T00kIa7a3yI/AAAAAAAAGAY/RErAv9pQjig/fb%25255B2%25255D.png?imgmax=800" /><br />
<blockquote class="tr_bq">
<span style="color: red; font-family: Verdana, sans-serif;">http://anvity-host.googlecode.com/files/anvity-likebox.js</span></blockquote>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-54737904211680185602012-12-25T19:34:00.000+07:002012-12-27T19:13:04.867+07:00Cara Memasang Widget Recent Comments Gravatar<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSMV07LmPkcWby1AXNDTzSy6e5JuExr2XzDrxa5vs4TJH_aiIFGDq86XtdjD1Ym9yJkH5FI40W4xpqmauNxmyzzrqvFKmu6JxYKW9lG1jgPbai0ouKqgGkGiCfJ6zvMyF93b4eIHMy8Y/s1600/Recent+Comments+Gravatar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSMV07LmPkcWby1AXNDTzSy6e5JuExr2XzDrxa5vs4TJH_aiIFGDq86XtdjD1Ym9yJkH5FI40W4xpqmauNxmyzzrqvFKmu6JxYKW9lG1jgPbai0ouKqgGkGiCfJ6zvMyF93b4eIHMy8Y/s320/Recent+Comments+Gravatar.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Tata Letak</b> >> <b>Tambah Gadget</b> >> <b>HTML/JavaScript</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">3. </span><span style="font-family: Verdana, sans-serif;">Masukkan script dibawah ini</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Verdana, sans-serif;">4. Klik simpan</span></div>
<div style="-moz-border-radius: 5px; background-color: #e0e0e0; border-radius: 5px; height: 200px; overflow: auto; padding: 0px; width: 475px;">
<blockquote class="tr_bq">
<br />
<span style="font-family: Verdana, sans-serif;"><style type="text/css"></span><br />
<span style="font-family: Verdana, sans-serif;">ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}</span><br />
<span style="font-family: Verdana, sans-serif;">.w2b_recent_comments li{background:none !important;margin:0 0 5px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}</span><br />
<span style="font-family: Verdana, sans-serif;">.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}</span><br />
<span style="font-family: Verdana, sans-serif;">.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}</span><br />
<span style="font-family: Verdana, sans-serif;">.w2b_recent_comments li span{margin-top:3px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}</span><br />
<span style="font-family: Verdana, sans-serif;"></style></span><br />
<span style="font-family: Verdana, sans-serif;"><script type="text/javascript"></span><br />
<span style="font-family: Verdana, sans-serif;">//<![CDATA[// Recent Comments Settings</span><br />
<span style="font-family: Verdana, sans-serif;">varnumComments = <span style="color: lime;">5</span>,</span><br />
<span style="font-family: Verdana, sans-serif;">showAvatar = true,</span><br />
<span style="font-family: Verdana, sans-serif;">avatarSize = <span style="color: blue;">30</span>,</span><br />
<span style="font-family: Verdana, sans-serif;">roundAvatar = true,</span><br />
<span style="font-family: Verdana, sans-serif;">characters = <span style="color: magenta;">60</span>,</span><br />
<span style="font-family: Verdana, sans-serif;">defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",</span><br />
<span style="font-family: Verdana, sans-serif;">hideCredits = <span style="color: orange;">true</span>;</span><br />
<span style="font-family: Verdana, sans-serif;">//]]></script></span><br />
<span style="font-family: Verdana, sans-serif;"><script type="text/javascript" src="http://anvity-host.googlecode.com/files/comments.js"></script></span><br />
<span style="font-family: Verdana, sans-serif;"><script type="text/javascript" src="<span style="color: red;">http://dhecun.blogspot.com</span>/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script></span><br />
<span style="font-family: Verdana, sans-serif;"><div style="text-align: center;"></span><br />
<span style="font-family: Verdana, sans-serif;"><a href="http://dhecun.blogspot.com/2012/12/cara-memasang-widget-recent-comments.html" target="_blank" title="Cara Memasang Widget Recent Comments Gravatar"><input class="button" name="go" value="Widget by Dhecun Blog" type="submit" /></a></div></span><br />
</blockquote>
</div>
<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input name="widget.title" type="hidden" value="Recent Comments Gravatar" /><textarea cols="5" name="widget.content" rows="3" style="display: none;"><style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 5px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:3px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://anvity-host.googlecode.com/files/comments.js"></script>
<script type="text/javascript" src="http://dhecun.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
<div style="text-align: center;">
<a href="http://dhecun.blogspot.com/2012/12/cara-memasang-widget-recent-comments.html" target="_blank" title="Cara Memasang Widget Recent Comments Gravatar"><input class="button" name="go" value="Widget by Dhecun Blog" type="submit" /></a></div>
</textarea><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_sm_b.gif" type="image" /></form>
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span><br />
<span style="font-family: Verdana, sans-serif;">1. Ganti tulisan warna <span style="color: red;">merah</span> dengan URL blog anda.</span><br />
<span style="font-family: Verdana, sans-serif;">2. Ganti tulisan warna <span style="color: blue;">biru</span> dengan ukuran gambar / foto komentator.</span><br />
<span style="font-family: Verdana, sans-serif;">3. Ganti tulisan warna <span style="color: magenta;">pink</span> dengan jumlah karakter isi komentar.</span><br />
<span style="font-family: Verdana, sans-serif;">4. Ganti tulisan <span style="color: orange;">true</span> dengan <span style="color: orange;">false </span>, jika anda ingin gambar / foto tidak ditampilkan.</span><br />
<span style="font-family: Verdana, sans-serif;">5. Ganti angka <span style="color: lime;">5</span> dengan jumlah komentar yang ingin anda munculkan.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com2tag:blogger.com,1999:blog-2726093644608416144.post-78134234725081193692012-12-25T19:16:00.000+07:002012-12-27T19:15:11.830+07:00Mengganti Older Newer Post Menjadi Judul Nama Postingan<img alt="Blog Pager ANVITY Older Newer Post" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYBOHGCnVmV223PpbQY_4VMJQt6H4YAoImNXOw9WX-nKIODX6cZpG9ZOUPvwcWBlAt5kVGg20nfdsfSPFZJLJ-xKhRimWUTYdmBQVxejwMClhJVK-FRJw95nRI7TvP4IUVNtQLeu7GTHYU/s400/Blog+Pager+ANVITY.png" width="400" /><br />
<span style="font-family: Verdana, sans-serif;">Sumber : <a href="http://www.anvity.com/2012/08/cara-mengubah-oldernewer-post-judul-posting.html">http://www.anvity.com/2012/08/cara-mengubah-oldernewer-post-judul-posting.html</a></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Cari kode </span><span style="font-family: Verdana, sans-serif;"><b></head></b></span><br />
<span style="font-family: Verdana, sans-serif;">6. Masukkan script dibawah ini tepat diatas kode </span><span style="font-family: Verdana, sans-serif;"><b></head></b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/><br /><script src='http://anvity-host.googlecode.com/files/older-newer.js' type='text/javascript'/></span></blockquote>
<span style="font-family: Verdana, sans-serif;">7. Klik </span><b style="font-family: Verdana, sans-serif;">simpan template</b><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-6312329303539626212012-12-24T09:54:00.001+07:002012-12-27T19:20:58.508+07:00Membuat Daftar Isi Seperti Rak Buku<img alt="Daftar Isi Rak Buku" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiunr69_HuqtiGdixF8rnCCqoEukyoifZAkMq-JQbdp93vUnOFwJLTHKIQDQJUFwawxPBBad4t7FJFCrzZqzEXmLH868IGro4o-NReijn6d5KkHU33XkVPynyjAuq54FRT-ANTlS7aSalqP/s320/df.png" width="256" /><br />
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Tata Letak</b> >> <b>Tambah Gadget</b> >> <b>HTML/JavaScript</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Masukkan script dibawah ini</span><br />
<span style="font-family: Verdana, sans-serif;">4. </span><span style="font-family: Verdana, sans-serif;">Klik </span><b style="font-family: Verdana, sans-serif;">simpan</b><br />
<div style="-moz-border-radius: 5px; background-color: #e0e0e0; border-radius: 5px; border: 0px solid #4169E1; height: 200px; overflow: auto; padding: 0px; width: 475px;">
<blockquote class="tr_bq">
<br />
<span style="font-family: Courier New, Courier, monospace;"><style></span><br />
<span style="font-family: Courier New, Courier, monospace;">#daftar-isi-body{width:760px!important;height:600px!important;padding:30px 40px;margin:0 auto;}</span><br />
<span style="font-family: Courier New, Courier, monospace;">#daftar-isi-wrap{margin: 0 auto;}.box-posting{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5rDKzHC_HYIGUGVhCFXNlcsAO8MPEF-t358C1s9cECvhwp3Ej9utYvzQDSQr4lmdEtNR_UubHeC_J6-h3Hd_3s58QU2PB062gUOhclZ0y746a_4tLBLO3hLtB_pa60T92EJ5Juz0172Q/s1600/bg-box.png);background-position:bottom center;background-repeat:no-repeat;overflow:hidden;cursor:pointer;float:left;height:140px;width:248px;margin:-50px 0 0 0;}</span><br />
<span style="font-family: Courier New, Courier, monospace;">.box-posting img{height:46px;width:46px;float:left;margin:20px 0 0 25px;background-color:#2E0700;border:1px solid #2E0700;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 50%;}</span><br />
<span style="font-family: Courier New, Courier, monospace;">.box-posting .judul-posting{float:left;height:35px;margin:0;width:220px;}</span><br />
<span style="font-family: Courier New, Courier, monospace;">.box-posting .judul-posting a{font-family:arial,Serif !important;color:#774A34!important;text-shadow:0 0 1px rgba(0,0,0,0.9);margin:-40px 0 0 80px;display:block;font-size:13px !important;line-height:18px!important;font-weight:bold !important;}</span><br />
<span style="font-family: Courier New, Courier, monospace;">.box-posting .judul-posting a:hover{color:#333!important;}</span><br />
<span style="font-family: Courier New, Courier, monospace;">.box-posting:hover{border-left-color:#C6EB04;}#totales{text-align:center;color:#774A34 !important;text-shadow:0 1px rgba(0,0,0,0.2);}#loadingscript{color:#444;font-family:Century Gothic;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;}#paginacion{color:#BBB;font-size:24px;font-weight:bold;height:35px;line-height:28px;padding:0;margin:0 auto;text-align:center;}#paginacion span,#paginacion a{display:inline-block;font-size:13px !important;line-height:24px;font-weight:bold;margin:0 1px;width:25px;height:25px;}#paginacion a, #paginacion span.actual {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgKglDn3JF2Y8AsdbTknYsZvOqcY2eIsOkCOxpCS6V89ovW06FUrLBNDRnaV04cIlf_hBHjvm27RglsSYkpENUPcDXYjVL5mWxoY68ctRubhMHdn_W9iirjAhUYzg_8nEoMqs6LBUvlK4/s1600/page-link.png);background-position:top center;background-repeat:no-repeat;color:#250700 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);}#paginacion span.actual{color:#774A34 !important;}#paginacion a:hover{color:#FFF !important;}#paginacion .nextprev-link,#paginacion span.nextprev-link{border:none;color:#250700 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);width:100px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzDQ6z-DyN0xhm1DNndKHkctH4ohn-3On7QQBM4vdy8fS6-h5kOIx0IDutq3s-t42yL-wCsgrqPymkFfKMzsoZOK0gFP_4Dehs9FZq2o-tSd2Q5hhhexEIHG9OAzGB5iGdVCPn00dpttU/s1600/nextprev.png);background-position:top center;background-repeat:no-repeat;}</span><br />
<span style="font-family: Courier New, Courier, monospace;"></style></span><br />
<span style="font-family: Courier New, Courier, monospace;"><script type="text/javascript">var jumlahposting = 18;var urlblog = "<span style="color: red;">http://dhecun.blogspot.com</span>";var minpaginas = 5;var maxpaginas = 10;var thumbs = "http://upload.wikimedia.org/wikipedia/commons/6/66/Colour_wheel_(black_background).JPG";</script></span><br />
<span style="font-family: Courier New, Courier, monospace;"><script language="javascript" src="http://hanjs.googlecode.com/files/sitemaps.js"></script></span><br />
<span style="font-family: Courier New, Courier, monospace;"><div style="text-align: center;"></span><br />
<span style="font-family: Courier New, Courier, monospace;"><a href="http://dhecun.blogspot.com/2012/12/membuat-daftar-isi-seperti-rak-buku.html" target="_blank" title="Membuat Daftar Isi Seperti Rak Buku"><input class="button" name="go" value="Widget by Dhecun Blog" type="submit" /></a></div></span><br />
</blockquote>
<span style="font-family: Courier New, Courier, monospace;"></span></div>
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span><br />
<span style="font-family: Verdana, sans-serif;">Ganti tulisan warna </span><span style="color: red; font-family: Verdana, sans-serif;">merah</span><span style="font-family: Verdana, sans-serif;"> dengan URL blog anda</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-56176935673939059452012-12-24T06:26:00.003+07:002012-12-28T10:10:38.484+07:00Menggunakan Expand Sticky Bar<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqP4dy0HwvPvYjtDr13zi8Fb2YfKz5cf81VgiBH3SfR2Jsq9xb78yWj2LISdkbHrYk1I9jqO6DcXY5DDZwGa9_7gZl2bUp0MnqMNHgz9DXP0bD24z1jBdAK-_XLknu5csmCt2LMzY4ss/s1600/Expand+Sticky+Bar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqP4dy0HwvPvYjtDr13zi8Fb2YfKz5cf81VgiBH3SfR2Jsq9xb78yWj2LISdkbHrYk1I9jqO6DcXY5DDZwGa9_7gZl2bUp0MnqMNHgz9DXP0bD24z1jBdAK-_XLknu5csmCt2LMzY4ss/s400/Expand+Sticky+Bar.png" width="400" /></a></div>
<span style="font-family: Verdana, sans-serif;"><a href="http://dhecun.blogspot.com/2012/12/menggunakan-expand-sticky-bar.html" target="_blank"><b>Expand Sticky Bar</b> </a>adalah notifikasi bar yang dapat diperluas setelah pengunjung menggulir pointer mouse ke arah sticky bar atau dapat juga dibuat manual dimana sticky bar baru akan diperluas setelah pengunjung menekan tombol yang telah disediakan.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b><a href="http://dhecun.blogspot.com/2012/12/menggunakan-expand-sticky-bar.html" target="_blank">Expand Sticky Bar</a></b> ini dibuat menggunakan CSS script dengan "position: fixed" dikombinasikan dengan jQuery plugin dan javacript serta kode HTML yang berguna untuk menampilkan informasi tambahan yang dimasukkan ke dalam expand sticky bar. </span><br />
<span style="font-family: Verdana, sans-serif;">Widget ini kompatibel dengan browser <b>Firefox 1.0</b> ke atas , <b>IE 5.0</b> ke atas , <b>Google Chrome</b> , <b>Opera 7</b> ke atas.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Cari kode </span><span style="font-family: Verdana, sans-serif;"><b>]]></b:skin></b></span><br />
<span style="font-family: Verdana, sans-serif;">6. Masukkan script dibawah ini tepat diatas kode </span><span style="font-family: Verdana, sans-serif;"><b>]]></b:skin></b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">.expstickybar{<br />position:fixed;<br />color: white;<br />padding: 5px;<br />right:0;<br />left:0;<br />visibility:hidden;<br />background:#222222 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3cohfl0Nes8GMJcStRJ36JLfGSjENBtXB_tzrLG9cke2Q312k65Niq1V73Bwhxc6fbiSCaGQh8OH5LHjrYopBtDBnEq_eh3GqLk5KwYZIA9bVA8t5x5Uastz4VT2qXsfacAr0XXWcWvo/s400/stickybar.png') repeat-x; border-top: 1px solid #888888;<br />-moz-box-shadow: #666666 0px 1px 3px;<br />-webkit-box-shadow: #666666 0px 1px 3px;<br />box-shadow: #666666 0px 1px 3px;<br />z-index: 10000;<br />width:auto;<br />}<br />.expstickybar a{<br />color: white;<br />}</span></blockquote>
<span style="font-family: Verdana, sans-serif;">7. Kemudian </span><span style="font-family: Verdana, sans-serif;">cari kode <b></head></b></span><br />
<span style="font-family: Verdana, sans-serif;">8. Masukkan script di bawah ini tepat di atas kode <b></head></b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><br /><script src='https://sites.google.com/site/mplabsblog/expstickybar.js'/></span></blockquote>
<span style="font-family: Verdana, sans-serif;">9. Klik </span><b style="font-family: Verdana, sans-serif;">simpan template</b><br />
<span style="font-family: Verdana, sans-serif;">10. Selanjutnya pilih <b>Tata Letak</b> >> <b>Tambah Gadget</b> >> <b>HTML/JavaScript</b></span><br />
<span style="font-family: Verdana, sans-serif;">11. Masukkan script dibawah ini</span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div id="stickybar" class="expstickybar"><br /><a href="#togglebar"><img src="https://sites.google.com/site/mplabsblog/open.gif" data-closeimage="https://sites.google.com/site/mplabsblog/close.gif" data-openimage="https://sites.google.com/site/mplabsblog/open.gif" style="border-width:0; float:right;" /></a><br /><div style="text-align:center;padding-top:3px"><b><span style="color: red;">Faceblog © 2012-2013 ( Tempat Ngeblog Ala Facebook ) Design by <a href="http://dhecun.blogspot.com" target="_blank" title="Kumpulan script untuk mempercantik tampilan blogspot">Dhecun Blog</a></span></b></div><span style="color: blue;"><br /></span><span style="color: blue;">Simpan konten anda disini</span><br /><div style="text-align: center;"><br /><a href="http://dhecun.blogspot.com/2012/12/menggunakan-expand-sticky-bar.html" target="_blank" title="Menggunakan Expand Sticky Bar"><input class="button" name="go" value="Widget by Dhecun Blog" type="submit" /></a></div><br /></div></span></blockquote>
<span style="font-family: Verdana, sans-serif;">12. Klik </span><b style="font-family: Verdana, sans-serif;">simpan</b><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span><br />
<span style="font-family: Verdana, sans-serif;">- Ganti tulisan warna <span style="color: red;">merah</span> sesuai keinginan anda.</span><br />
<span style="font-family: Verdana, sans-serif;">- </span><span style="font-family: Verdana, sans-serif;">Untuk merubah type expand sticky bar dari <b>mouseover</b> menjadi <b>manual </b>, silahkan download script <a href="https://sites.google.com/site/mplabsblog/expstickybar.js" target="_blank">expstickybar.js</a> lalu edit script dan perhatikan pada bagian akhir ganti kode '<b>mouseover</b>' menjadi '<b>manual</b>' , potongan scriptnya seperti di bawah ini.</span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">var mystickybar=new expstickybar({<br /> id: "stickybar",<br /> position:'bottom',<br /> revealtype:'<span style="color: blue;">mouseover</span>',<br /> peekamount:35,<br /> externalcontent:'',<br /> speed:200 //duration of animation (in millisecs)<br />})</span></blockquote>
<span style="font-family: Verdana, sans-serif;">Simpan kembali script yang telah anda edit ke tempat hosting script seperti Google Code atau Google Sites , ambil URL script yang telah disimpan pada tempat hosting script dan ganti URL script pada kode yang akan ditempatkan di atas kode </span><b style="font-family: Verdana, sans-serif;"></head></b><span style="font-family: Verdana, sans-serif;">.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Silahkan anda bereksperimen dan mengembangkan metode ini dan jika anda berhasil <b><a href="http://dhecun.blogspot.com/2012/12/menggunakan-expand-sticky-bar.html" target="_blank">Menggunakan Expand Sticky Bar</a></b> , ucapkanlah <b>Alhamdulillah</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">Saya akan sangat berterima kasih jika anda turut berkontribusi dan memberikan masukkan pada kolom komentar di bagian bawah artikel ini.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-83709041531955968002012-12-22T05:31:00.004+07:002012-12-22T05:31:58.231+07:00Cara Mengetahui Ukuran Lebar Header , Posting , Sidebar , Footer atau Lebar Template<span style="font-family: Verdana, sans-serif;">Secara keseluruhan penting untuk diketahui sehingga saat anda ingin mengedit template , mengubah atau menambah lebar bagian-bagian template tadi , anda sudah mengetahui dibagian mana yang harus anda rubah / edit.</span><br />
<span style="font-family: Verdana, sans-serif;">Sebagai pengenalan awal , anda harus mengenal dulu elemen dalam susunan CSS template yang disebut dengan wrapper.</span><br />
<img height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE2XYNXj2xltE8SYsKzYBfbiBXLZ_Qc_q5DePiZ2JU1Dmap_eke_qS4W2YGz-WKhkMA0a0RlqQvOJvPIBZ3W6FVFLyIYds02ZovWNYoGItIPXYPrZbWgw9bCLBJ_3nyfidlcDslxGK1r9/s320/elemen-wrapper.jpg" width="320" /><br />
<span style="font-family: Verdana, sans-serif;"></span><br />
<span style="font-family: Verdana, sans-serif;">Dari gambar diatas saya jelaskan dulu satu-satu maksudnya :</span><br />
<span style="font-family: Verdana, sans-serif;">1. <b>Outer-wrapper</b> : pada template ditandai dengan kode CSS <span style="color: red;">#outer-wrapper </span>, <span style="color: red;">#outer-wrap </span>atau<span style="color: red;"> #outer </span>, maksudnya adalah lebar / ukuran template secara keseluruhan dimana didalam outer-wrapper ini terdapat bagian <b>header</b> , <b>posting</b> , <b>sidebar</b> dan <b>footer</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">2. <b>Header-wrapper</b> : pada template ditandai dengan kode CSS <span style="color: red;">#header-wrapper</span> , <span style="color: red;">#header-wrap</span> atau <span style="color: red;">#header </span>, pada beberapa template bagian header ini ada juga yang terbagi dari 2 maka kode CSSnya juga ada 2 seperti ini <span style="color: red;">#header</span> dan <span style="color: red;">#header2 </span>, yang membedakan posisinya adalah <i>float right</i> dan <i>float left </i>, ukuran lebar menu navigasi yang ada dibawah atau diatas header juga biasanya sama.</span><br />
<span style="font-family: Verdana, sans-serif;">3. <b>Content-wrapper </b>: pada template ditandai dengan kode CSS <span style="color: red;">#content-wrapper</span> , <span style="color: red;">#content-wrap</span> atau <span style="color: red;">#content</span> , jika pada template anda tidak terdapat kode ini berarti untuk area posting dan sidebar pengaturan CSS nya ada pada bagian <span style="color: red;">/* ----- MAIN ----- */</span>.</span><br />
<span style="font-family: Verdana, sans-serif;">4. <b>Main-wrapper</b> : pada template ditandai dengan kode CSS <span style="color: red;">#main-wrapper</span> , <span style="color: red;">#main-wrap</span> atau <span style="color: red;">#main </span>, pada bagian main-wrapper inilah area posting anda berada.</span><br />
<span style="font-family: Verdana, sans-serif;">5. <b>Sidebar-wrapper</b> : pada template ditandai dengan kode CSS <span style="color: red;">#sidebar-wrapper</span> , <span style="color: red;">#sidebar-wrap</span> atau <span style="color: red;">#sidebar</span> , pada template tertentu sidebar terkadang juga ada lebih dari 1 , jadi boleh jadi dalam template ada beberapa kode sidebar yang ditulis secara urut seperti <span style="color: red;">#sidebar-wrapper</span> , <span style="color: red;">#sidebar1-wrapper</span> atau <span style="color: red;">#sidebar1</span> dan <span style="color: red;">#sidebar2</span>.</span><br />
<span style="font-family: Verdana, sans-serif;">6. <b>Footer-wrapper</b> : pada template ditandai dengan kode CSS <span style="color: red;">#footer-wrapper</span> atau biasanya juga terdapat dibawah kode <span style="color: red;">/* -----Footer Content----- */</span> atau <span style="color: red;">/* -----Footer Wrapper----- */</span>.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b><span style="font-size: large;">Cara Mengubah Menambah Lebar Header , Posting , Sidebar dan Footer.</span></b></span><br />
<span style="font-family: Verdana, sans-serif;">Setelah mengenal elemen wrapper seperti saya jelaskan diatas , berikutnya kita dapat mengubah atau mengedit lebar dari masing-masing elemen wrapper tersebut. Caranya mudah saja , anda tinggal memperhatikan <b><i><span style="color: red;">pengaturan stylish CSS</span></i></b> atau <b><i><span style="color: red;">declaration</span></i></b> yang ada didalam elemen wrapper yaitu pada bagian width atau height.</span><br />
<span style="font-family: Verdana, sans-serif;">Misalnya saya contohkan untuk bagian <b>header</b> , <b>posting</b> dan <b>sidebar</b>.</span><br />
<pre style="background-color: #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(102, 153, 204); font-size: 12px; line-height: 19.200000762939453px; overflow: auto; padding: 10px;"><span style="font-family: Courier New, Courier, monospace;">/* Header
----------------------------------------------- */
.idheadpic{width:100%;margin:0 auto;padding:0px 0px 0px 0px;}
#idhead {
background:#fff;filter:alpha(opacity=90);opacity:0.9;
<span style="color: red;">width:990px</span>;padding:5px 0 5px 0;
margin:0 auto;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {background:transparant;
float:left;
<span style="color: red;">width: 179px</span>;
margin-left: 10px; text-align: left;
color:#f2f2f2;
}
#header2 {float:right;
margin-right:9px;margin-top:4px;padding-bottom:4;
<span style="color: red;">width:730px</span>;text-align: right;
background:transparant; height:90px;
}</span></pre>
<span style="font-family: Verdana, sans-serif;">Pada kode header diatas memperlihatkan bahwa header terbagi menjadi 2.</span><br />
<span style="font-family: Verdana, sans-serif;">Lebar total bagian header ini adalah <span style="color: red;">990px</span> , dimana terdiri dari header-left (perhatikan kode penempatan/posisi heder: <span style="color: red;">float-left</span>) dengan lebar <span style="color: red;">179px</span> dan header-right dengan lebar <span style="color: red;">730px</span>.</span><br />
<span style="font-family: Verdana, sans-serif;">Jika kita jumlahkan lebar header1 + header2 + margin + padding = lebar total header , kemudian cara membaca margin dan padding prinsipnya sama yaitu dari atas dan berputar searah jarum jam.</span><br />
<span style="font-family: Verdana, sans-serif;">Misalkan <span style="color: red;"><b>padding: 6px 8px 6px 6px;</b></span> maka yang dimaksud adalah <b>padding-top 6px</b> , <b>padding-right 8px</b> , <b>padding-bottom 6px</b> dan <b>padding-left 6px</b>.</span><br />
<span style="font-family: Verdana, sans-serif;"><b><span style="color: blue;">Padding</span></b> adalah jarak antara teks atau image ke tepi batas elemen wrapper.</span><br />
<span style="font-family: Verdana, sans-serif;">Sedangkan <b><span style="color: blue;">Margin</span></b> biasanya jarak antara 2 wrapper misalnya antara area posting dan sidebar dipisahkan oleh margin. </span><br />
<pre style="background-color: #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(102, 153, 204); font-size: 12px; line-height: 19.200000762939453px; overflow: auto; padding: 10px;"><span style="font-family: Courier New, Courier, monospace;">/* Main containers */
<span style="color: red;">#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;</span>
text-align:$startSide;
font: $bodyfont;
}
<span style="color: red;">#main-wrapper {
width: 630px;</span>
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}
<span style="color: red;">#sidebar-wrapper {
width: 300px;</span>
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
/* Post */
<span style="color: red;">.post{
width: 600px;
padding: 15px;</span>
border: 1px solid #E0E0DE;
background: #FFF;
font-family: Helvetica, sans-serif;
margin-bottom: 20px;
}</span></pre>
<br />
<span style="font-family: Verdana, sans-serif;">Perhatikan susunan CSS diatas karena sudah merangkum bagian outer-wrapper, main-wrapper (posting) dan sidebar-wrapper.</span><br />
<span style="font-family: Verdana, sans-serif;">Pada <b><i>outer-wrapper</i></b> disebutkan lebarnya <span style="color: red;">950px</span> , sedangkan pada <i><b>main-wrapper</b></i> dan <b><i>sidebar-wrapper</i></b> lebarnya masing-masing adalah <span style="color: red;">630px</span> dan <span style="color: red;">300px</span>.</span><br />
<span style="font-family: Verdana, sans-serif;">Kalau dijumlahkan jumlah keduanya adalah <span style="color: red;">930px</span>.</span><br />
<span style="font-family: Verdana, sans-serif;">Sisa <span style="color: red;">20px</span> dapat disimpulkan adalah <i>margin kiri main-wrapper+margin antara main-wrapper dan sidebar-wrapper+margin kanan sidebar wrapper </i>, sehingga jumlahnya <span style="color: red;">20px</span> dan total menjadi <span style="color: red;">950px</span>.</span><br />
<span style="font-family: Verdana, sans-serif;">Pada susunan CSS diatas disetting <b>auto</b> sehingga kita tidak mengetahui persis berapa nilai tiap margin namun yang pasti ada 3 jarak margin yang diperhitungkan. Sambil membaca penjelasan ini lihat lagi gambar ilustrasi elemen wrapper diatas ya biar ngga bingung.</span><br />
<span style="font-family: Verdana, sans-serif;">Kemudian perhatikan lagi bagian posting (post).</span><br />
<span style="font-family: Verdana, sans-serif;">Pada kode CSS nilai lebarnya <span style="color: red;">600px</span> , ini sudah merupakan lebar teks atau artikel yang kita tulis.</span><br />
<span style="font-family: Verdana, sans-serif;">Padding 15px berlaku untuk top , right , bottom dan left sehingga <span style="color: red;">jumlah post width 600px + padding left 15px + padding right 15px = lebar main-wrapper 630px</span>.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Jika anda masih bingung , silahkan copy atau bookmark saja tulisan ini biar bisa anda baca lagi karena saya sudah berusaha menuliskan sejelas mungkin.</span><br />
<span style="font-family: Verdana, sans-serif;">Dari apa yang saya jelaskan tentang <b>Cara Mengubah Menambah Lebar Header , Posting , Sidebar dan Footer</b> di Blogspot ini mudah-mudahan bisa memberikan pemahaman untuk anda bagaimana cara <b>mengatur atau mengetahui lebar area header, posting, sidebar dan footer</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">Baca juga tips lengkap <b>Cara Mempercantik Tampilan Blog</b> untuk menambahkan widget-widget keren ehingga blog anda tambah siiiiipppppppppp tampilannya.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-10784003966304200462012-12-21T18:06:00.001+07:002012-12-28T10:22:02.831+07:00Membuat Widget 3 in 1 Melayang<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtXS5K3kEbNrkDAPkc7hZSWAnc0MM8sqxOi7cBOCiKQzdsAC-RUJXhDVN_JZHOFUR3NrdvC04lfsYjI-uo2QCvq1HFpaVdTnSFehMG-fFyFCysI9LGkNDYjUgMsM79SPA0mgag0cLHmhny/s200/blogger-floating-widget2.png" /><br />
<br />
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Tata Letak</b> >> </span><span style="font-family: Verdana, sans-serif;"><b>Tambah Gadget</b> >> <b>HTML/JavaScript</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Masukkan script dibawah ini</span><br />
<span style="font-family: Verdana, sans-serif;">4. Edit sesuai keinginan anda</span><br />
<span style="font-family: Verdana, sans-serif;">5. Klik <b>simpan</b></span><br />
<div style="-moz-border-radius: 5px; background-color: #e0e0e0; border-radius: 5px; height: 200px; overflow: auto; padding: 0px; width: 475px;">
<blockquote class="tr_bq">
<style type="text/css"><br />.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHv1DEwYRFnquqSfoTM6JnmgvjWpmI_84T4J1yE9gIWGhzPuePutyID4x6e8kHGIkdJOQHOaoIyydDjluzn2I-26tjTTW8qjb3Phb8BdQza8eLGt2xKFfYQrc20xEiAekA1GCQBmgCqQ_8/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}<br />.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0a2A_QeYD02FkD49eYOqEgAYBOqz1xP5EAvtkDtiZeLVSv5FSLodkrdm5xHpoOvFJoxHxgxUbWtsGt8lEYIzRUPpnCZc6bh6krxdP8Opc_50xoPDkgkk_mrqF5g-bTYbtUnFRMJB56ILC/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}<br />.barconteblogger{margin:5px 0 0 47px}<br />.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqs4NzaiXTORLsKZVLJCF1B421RPKxieHfQCSoNA6_g_c8NwwN4_it5EoPQXOURHIYu9A-19ob22CmBbud-yuOCYG1eZz2uYgDlp-h7KDbcyPIM1d5-lVDC3zuacafxY2Vdc7MRa59-B5/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}<br />.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOaGRqFdG90lVcajmCGyJdNo0MdOwBVLKgh7X4A-AMgh9iVwGaRG-Sptzd5UcAacL7kPejDSA4eMuusklDlPtDw23q6U8-B2GB3S5ZjQli9juxGc5iNv702bQyAyIh-S68Bgnu58EeEVDk/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}<br />.barcontefacebook{margin:5px 0 0 47px}<br />.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGfo9_iCFJIQWvbfYUDqP505kpEaOESMwcgvLf34jKBtFDO7o6gvSNtIiMCREwTERKsrjLsWNp402rO4gmoYumLHyhDDkjrk2b61JLTIRdJCnlfd0llvbBO4QGTbBi-Q2Da4KLnD24Y2M/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}<br />.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPG3lMZyWobxZdO6aLegALNFADlYe9G59THbHTNFhvRXL37-PUzAgJBs-unzdjISHIgGso772T4qRr8S_-y9440AUXiad3vOtZ8VWFj2X1_Ev5cG0UwmBOuEfz3ntuqyvp4F7MP0Vjpr4/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}<br />.barcontetwitter{margin:5px 0 0 47px}<br /></style><br /><div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><br /><div class="barconteblogger"><br /><span style="color: red;">Simpan kode friend connect atau kode CBox anda di sini</span><br /><div style="text-align: right;"><br /><a href="http://dhecun.blogspot.com/2012/12/membuat-widget-3-in-1-melayang.html" target="_blank" title="Membuat Widget 3 in 1 Melayang"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div><br /></div><br /></div><br /><div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><br /><div class="barcontefacebook"><br /><span style="color: red;">Simpan kode Fan Page Facebook anda disini</span><br /><div style="text-align: right;"><br /><a href="http://dhecun.blogspot.com/2012/12/membuat-widget-3-in-1-melayang.html" target="_blank" title="Membuat Widget 3 in 1 Melayang"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div><br /></div><br /></div><br /><div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><br /><div class="barcontetwitter"><br /><span style="color: red;">Simpan kode twitter anda disini</span><br /><div style="text-align: right;"><br /><a href="http://dhecun.blogspot.com/2012/12/membuat-widget-3-in-1-melayang.html" target="_blank" title="Membuat Widget 3 in 1 Melayang"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div><br /></div><br /></div></blockquote>
</div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-48234490349364916302012-12-21T16:54:00.001+07:002012-12-28T10:25:37.028+07:00Memasang Anjing Penjaga Di Blog<div style="margin-top: 5px; text-align: left;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div>
<div style="border: 1px inset; margin: 0px; padding: 5px;">
<div style="display: none;">
<object data="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?" height="200" style="outline: none;" type="application/x-shockwave-flash" width="458"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?"></param>
<param name="AllowScriptAccess" value="always"></param>
<param name="wmode" value="opaque"></param>
<param name="bgcolor" value="FFFFFF"/></object>
<br />
<center>
Mainkan tombol-tombol diatas</center>
</div>
</div>
<br />
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Tata Letak</b> >> <b>Tambah Gadget </b>>> <b>HTML/JavaScript</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Masukkan script dibawah ini</span><br />
<span style="font-family: Verdana, sans-serif;">4. </span><span style="font-family: Verdana, sans-serif;">Klik <b>simpan</b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?" width="<span style="color: red;">300</span>" height="<span style="color: red;">200</span>"><br /><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?"></param><br /><param name="AllowScriptAccess" value="always"></param><br /><param name="wmode" value="opaque"></param><param name="bgcolor" value="FFFFFF"/></object><br /><div style="text-align: right;"><br /><a href="http://dhecun.blogspot.com/2012/12/memasang-anjing-penjaga-di-blog.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div></span></blockquote>
<form action="http://beta.blogger.com/add-widget" method="post" target="_blank">
<input name="widget.title" type="hidden" value="Memasang Ajing Penjaga Di Blog" /><textarea cols="5" name="widget.content" rows="3" style="display: none;"><img src="//img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 200px; width: 300px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" data-original-id="BLOGGER_object_1" />
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/memasang-anjing-penjaga-di-blog.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>
</textarea><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_sm_b.gif" type="image" /></form>
<b style="font-family: Verdana, sans-serif;">Catatan :</b><br />
<span style="font-family: Verdana, sans-serif;">Tulisan warna <span style="color: red;">merah </span>adalah ukuran , ganti sesuai keinginan anda.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-29656061212036344632012-12-21T11:37:00.002+07:002012-12-28T10:43:59.616+07:00Cara Mengganti Background Kotak Komentar Blog<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Centang <b>Expand Template Widget</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">6. Cari kode </span><span style="font-family: Verdana, sans-serif;"><b><div class='comment-form'></b></span><br />
<span style="font-family: Verdana, sans-serif;">7. Jika sudah ketemu , ganti kode tersebut dengan kode dibawah ini</span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><div id='ib-form'></span></blockquote>
<b style="font-family: Verdana, sans-serif;">Catatan :</b><br />
<span style="font-family: Verdana, sans-serif;">Template biasanya berbeda-beda jadi bisa saja ada 2 buah kode atau lebih , jika anda menemukan ada kode yang sama , cari saja kode yang pertama atau paling atas.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">8. Kemudian cari kode </span><span style="font-family: Verdana, sans-serif;"><b>]]></b:skin></b></span><br />
<span style="font-family: Verdana, sans-serif;">9. Masukkan script dibawah ini tepat diatas kode </span><b style="font-family: Verdana, sans-serif;">]]></b:skin></b><br />
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">#ib-form iframe{</span><span style="font-family: Verdana, sans-serif;">background:#ffffff url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLY9pF6m2UL8-ycy_SYbmKShG2niKAAfXbk1A-CLoAB8Jpw6YuYrCM5pbOAMbhscXJmpqV1OCIYUnOefHtdUsQJMa7FYfURCvIlj5WcK00GCPh4cq9PzTy5Iep8L2PlFhAdJ2TbwIXOCA/s640/Dhecun+Blogspot.png</span>) no-repeat bottom right;</span><span style="font-family: Verdana, sans-serif;">border:5px solid <span style="color: blue;">#3b5998</span>;</span><span style="font-family: Verdana, sans-serif;">padding:5px;</span><span style="font-family: Verdana, sans-serif;">font:normal 12pt "ms sans serif", Arial;</span><span style="font-family: Verdana, sans-serif;">color:#3b5998;</span><span style="font-family: Verdana, sans-serif;">width:95%;height:<span style="color: magenta;">250</span>px;}</span><span style="font-family: Verdana, sans-serif;">#ib-form iframe:hover{</span><span style="font-family: Verdana, sans-serif;">background:#ffffff url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLY9pF6m2UL8-ycy_SYbmKShG2niKAAfXbk1A-CLoAB8Jpw6YuYrCM5pbOAMbhscXJmpqV1OCIYUnOefHtdUsQJMa7FYfURCvIlj5WcK00GCPh4cq9PzTy5Iep8L2PlFhAdJ2TbwIXOCA/s640/Dhecun+Blogspot.png</span>) no-repeat bottom right;</span><span style="font-family: Verdana, sans-serif;">border:5px solid <span style="color: blue;">#3b5998</span>;}</span><span style="font-family: Verdana, sans-serif;">#ib-form a{</span><span style="font-family: Verdana, sans-serif;">color:#3b5998;}</span></blockquote>
<br />
<b style="font-family: Verdana, sans-serif;">Catatan :</b><br />
<span style="font-family: Verdana, sans-serif;">1. Tulisan warna <span style="color: red;">merah</span> adalah URL gambar , ganti dengan URL gambar anda.</span><br />
<span style="font-family: Verdana, sans-serif;">2. Tulisan warna <span style="color: blue;">biru</span> adalah warna border , bisa anda ganti sesuai keinginan anda.</span><br />
<span style="font-family: Verdana, sans-serif;">3. Tulisan warna <span style="color: magenta;">pink</span> adalah tingginya , bisa anda atur sesuai keinginan anda.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">10. Klik <b>simpan template</b></span>
<span style="font-family: Verdana, sans-serif;"><br /></span><br />
<span style="font-family: Verdana, sans-serif;">Jika anda bingung mencari warna apa yang cocok , klik saja <a href="http://dhecun.blogspot.com/2012/11/script-tabel-kode-warna-html.html" target="_blank" title="Tabel Kode Warna HTML">disini</a></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-76230183438738563972012-12-21T10:28:00.002+07:002012-12-30T15:53:24.387+07:00Mencegah Copy Paste Gambar<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/blogger.g?blogID=2726093644608416144" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<a href="http://www.blogger.com/blogger.g?blogID=2726093644608416144" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="http://www.blogger.com/blogger.g?blogID=2726093644608416144" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="http://www.blogger.com/blogger.g?blogID=2726093644608416144" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><span style="font-family: Verdana, sans-serif;">Proteksi gambar , mencegah Copy Paste merupakan hal yang sangat penting untuk mencegah Copy Paste pada gambar / image.</span><br />
<div>
<span style="font-family: Verdana, sans-serif;">Dalam hal ini akan memberikan efek gambar kosong / gambar tidak muncul saat di <b>Copy Image</b> atau <b>Save Image As</b>.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Sebagai contoh , silahkan anda klik kanan gambar dibawah ini lalu pilh <b>salin gambar</b> atau <b>buka gambar di tab baru</b>.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<img height="72" src="data:image/gif;base64,R0lGODlhAQABAIAAAP ///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s72-c/DhecunBlog.png');" width="72" /><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Gunakan kode image di bawah ini jika anda ingin menambahkan Gambar / Image pada postingan blog anda.</span></div>
<div>
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><img style="background-image:url('<span style="color: red;">URL Gambar</span>');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP ///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="<span style="color: blue;">240</span>" height="<span style="color: blue;">240</span>"/></span></blockquote>
</div>
<div>
<span style="font-family: Verdana, sans-serif;"><b>Catatan :</b></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Yang perlu anda ganti dan sesuaikan hanya tulisan yang berwarna <span style="color: red;">merah</span> dan usahakan lebar dan tinggi gambar sesuai dengan ukuran gambar aslinya (tulisan warna <span style="color: blue;">biru</span>).</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-85562079127310238292012-12-21T07:46:00.000+07:002012-12-21T07:46:06.206+07:00Menampilkan Hanya Judul Posting di Homepage<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Centang <b>Expand Template Widget</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">6. Cari kode berikut</span><br />
<pre style="background-color: #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(102, 153, 204); font-size: 12px; line-height: 19.200000762939453px; overflow: auto; padding: 10px;"><b:include data='post' name='post'/></pre>
<span style="font-family: Verdana, sans-serif;">7. Jika sudah ketemu , ganti kode tersebut dengan kode dibawah ini</span><br />
<pre style="background-color: #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(102, 153, 204); font-size: 12px; line-height: 19.200000762939453px; overflow: auto; padding: 10px;"><b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if></pre>
<span style="font-family: Verdana, sans-serif;">8. Klik <b>pratinjau</b> , jika sudah OK , klik <b>simpan template</b></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-71771291610780298572012-12-20T23:41:00.004+07:002012-12-30T21:57:49.884+07:00Membuat Navigasi Nomor Halaman Blog<div class="separator" style="clear: both; text-align: left;">
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidV_3HAj26JFQBVONTU7BeymuAUCyPP3nR5z3AcDOEMvwoRswQgBtdlToMMIy5KCFjI610Z2GTP_1EEN4YYLFCXW8M9rdbiZdXa1MicWBJ8qj_Msawk2Hi3tggbhNr15VpofNiv-fdwCg/s1600/Navigasi.png" /><br />
<span style="font-family: Verdana, sans-serif;">Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Centang <b>Expand Template Widget</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">6. Cari kode </span><span style="font-family: Verdana, sans-serif;"><b></body></b></span><br />
<span style="font-family: Verdana, sans-serif;">7. Masukkan script dibawah ini tepat diatas kode <b></body></b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><script type='text/javascript'><br />var pageCount=5;<br />var displayPageNum=5;<br />var upPageWord =&#39;Previous&#39;;<br />var downPageWord =&#39;Next&#39;;<br /></script><br /><script src='http://eaction.googlecode.com/files/pagenav.js' type='text/javascript'/><br /></b:if></span></blockquote>
<span style="font-family: Verdana, sans-serif;">8. Kemudian cari kode </span><b style="font-family: Verdana, sans-serif;">]]></b:skin></b><br />
<span style="font-family: Verdana, sans-serif;">9. Masukkan script dibawah ini tepat diatas kode <b>]]></b:skin></b></span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 0px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 0px solid #cccccc;background-color:#3b5998;}.showpagePoint {color:white;text-decoration:none;border: 0px solid #cccccc;background: #3b5998;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}<br />.showpage a {text-decoration:none;border: 0px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</span></blockquote>
<span style="font-family: Verdana, sans-serif;">10. Klik </span><b style="font-family: Verdana, sans-serif;">pratinjau</b><span style="font-family: Verdana, sans-serif;"> , jika sudah OK , klik </span><b style="font-family: Verdana, sans-serif;">simpan template</b><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0tag:blogger.com,1999:blog-2726093644608416144.post-63247538103683631302012-12-20T15:46:00.004+07:002012-12-20T19:30:40.150+07:00Memasukkan Tanda Tangan Kedalam Artikel Blog<img height="94" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvXuhmUVC9l10jUi_36fOcCg8YFEUh9_NsaU3jtdluJ8IfjWBQ2TiRAey6DgX0voDMFgckzjewQRJH9B2wzSfqb1wYALMo7zztXtPZNQPXW61WdWCxB31bNajN0LM0hr0-wIdFcY_PY4/s200/Signature+Dhecun+Blog+Blue.png" width="200" /><br />
<b style="font-family: Verdana, sans-serif;">Langkah Pertama :</b><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">1. Kunjungi situs <a href="http://www.mylivesignature.com/">www.mylivesignature.com</a> , kemudian klik pada <b>Click Here To Start</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">2. Setelah itu pilih <b>Using the signature creation wizard</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">3. Isikan nama kamu pada kotak , lalu klik <b>Next Step</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">4. Pilih jenis huruf sesuai selera anda , lalu klik <b>Next Step</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">5. Pilih ukuran huruf yang anda inginkan , lalu klik <b>Next Step</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">6. Pilih background dan warna huruf sesuai selera anda (jika ingin dengan background trasnparan , beri centrang pada kotak <b>Trasnparent</b>) , lalu klik <b>Next Step</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">7. Pilih slope sesuai sesuai selera anda , lalu klik <b>Next Step</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">8. Klik kanan pada gambar tanda tangan yang sudah ada buat , lalu pilih <b>Copy Image</b>.</span><br />
<span style="font-family: Verdana, sans-serif;">9. Jika kamu ingin simpan image tanda tangan tersebut pada hosting image punya anda.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Langkah Kedua :</b></span><br />
<span style="font-family: Verdana, sans-serif;">1. Login ke akun Blogger anda</span><br />
<span style="font-family: Verdana, sans-serif;">2. Pilih <b>Template</b> lalu pilih <b>Edit HTML</b></span><br />
<span style="font-family: Verdana, sans-serif;">3. Centang <b>Expand Template Widget</b></span><br />
<span style="font-family: Verdana, sans-serif;">4. Tekan tombol <b>Ctrl+F</b></span><br />
<span style="font-family: Verdana, sans-serif;">5. Cari kode berikut</span><br />
<pre style="background-color: #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(102, 153, 204); font-size: 12px; line-height: 19.200000762939453px; overflow: auto; padding: 10px;"><p><data:post.body/></p></pre>
<span style="font-family: Verdana, sans-serif;">6. Jika tidak ketemu karena tiap template berbeda-beda kodenya , cari kode <b><data:post.body/> </b>, jika ada dua buah karena sudah menambahkan readmore , pilih kode yang kedua saja.</span><br />
<span style="font-family: Verdana, sans-serif;">7. Masukkan script dibawah ini tepat dibawah kode </span><b style="font-family: Verdana, sans-serif;"><data:post.body/></b><br />
<pre style="background-color: #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(102, 153, 204); font-size: 12px; line-height: 19.200000762939453px; overflow: auto; padding: 10px;"><img src='<span style="color: red;">URL Image</span>' style='border:0px; width:<span style="color: red;">100</span>px;'/></pre>
<span style="font-family: Verdana, sans-serif;">8. Jika ingin diletakkan di sebelah kanan bawah , buat perintahnya seperti ini :</span><br />
<pre style="background-color: #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(102, 153, 204); font-size: 12px; line-height: 19.200000762939453px; overflow: auto; padding: 10px;"><div style='text-align:right; margin:5px 10px 0 0'><img src='<span style="color: red;">URL Imag</span>e' style='border:0px; width:<span style="color: red;">100</span>px;'/></div></pre>
<span style="font-family: Verdana, sans-serif;">9. Ganti tulisan <span style="color: red;">URL Image</span> dengan URL image tanda tangan anda dan atur lebar (<span style="color: red;">width:100px</span>) nya.</span><br />
<span style="font-family: Verdana, sans-serif;">10. Klik <b>simpan template</b></span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Semoga bermanfaat...!!!</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
Anonymoushttp://www.blogger.com/profile/12312624184375807154noreply@blogger.com0