Agustya-blog: Tutorial Blog

Cara Membuat Tab View No Edit HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<center>

<script src="http://adsensecamp.com/show/?id=a6X8dvOv4CE%3D&cid=sO23aMPfjUo%3D&chan=CBtxjO0y5hw%3D&type=2&title=3D81EE&text=000000&background=FFFFFF&border=000000&url=2BA94F" type="text/javascript">
</script>

</center>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: large;">Menu TAB view</span> merupakan widget tambahan berbentuk tab. Jika kita menggunakannya maka akan menghemat ruang di bagian sidebar blog. Dulu ane pernah nge share <a href="http://agustya-blog.blogspot.com/2012/12/cara-membuat-tab-view-dengan-animasi.html">cara membuat menu tab view no edit HTML <b>Gaya Animasi Gulung</b></a>, <u>Sekarang ane mau nge share yang sangat sederhana namun keren.</u><br /><br />Monggo dilihat cara-caranya :</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYJYJlh9SZTJDNWtw9PrPI_gH33fIYiVdE6z6TUzeyFERVskr7nrjbQ2skkv3OLSoiF7QdAtAd0lGwWZcPTipETROgwOURGo2iE9vvdZiJ2Lz0cJix110coLq9IT0vOPThNGuGhpf8vRd/s1600/Tab+View+No+edit+HTML.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYJYJlh9SZTJDNWtw9PrPI_gH33fIYiVdE6z6TUzeyFERVskr7nrjbQ2skkv3OLSoiF7QdAtAd0lGwWZcPTipETROgwOURGo2iE9vvdZiJ2Lz0cJix110coLq9IT0vOPThNGuGhpf8vRd/s400/Tab+View+No+edit+HTML.jpg" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Pertama :</span></b></div>
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 16.78333282470703px; text-align: justify;">1. Silahkan Log in ke Blog Sobat</span></span><br />
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 16.78333282470703px; text-align: justify;">2. Kedua masuk ke Tab Tata Letak</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 16.78333282470703px; text-align: justify;">3. Klik tulisan " <b>Tambahkan Gadget</b> "</span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white;"><span style="line-height: 16.78333282470703px; text-align: justify;">4. Scroll ke bawah dan pilih yang " </span></span><b>HTML/JavaScript</b> "</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">5. Masukkan kode <b>di bawah</b> ini ke dalamnya</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">6. Secara Otomatis kode tersebut akan menjadi tag tab view blog anda</span><br />
<span style="background-color: white; color: #202020; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20.15625px;"></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<textarea class="form-text" cols="80" name="txtSourceCodeJavascript" onclick="this.select();" readonly="" rows="10" style="height: 102px; margin: 2px; width: 565px;"><style type="text/css">
        .blogtabs {padding: 0px !important;border: 0 solid #eeeee2;}
        .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #eeeee2;cursor:pointer;}
        html .blogtabs h2.active {background: #fff;}
        .blogtabs .widget-content {border: 0px solid #bbb;padding: 10px;background: none;clear:both;margin:0;}
        .btab, #showtabs {display:none;}
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
        <script src="http://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function() {
        $('#showtabs').simpleBlogTab ({organictabs: 3});
        });
        </script>
        <br />
<div id="showtabs">
</div>

Notes : teman-teman juga bisa merubah atau menambahkan tab viewnya dengan cara mengedit kode di atas..

Itulah sedikit informasi dari saya, jika ada salah kata, saya mohon maaf, keep blogging sobat :)

Cara Membuat Tab View No Edit HTML

Menu TAB view merupakan widget tambahan berbentuk tab. Jika kita menggunakannya maka akan menghemat ruang di bagian sidebar blo...

Baca selengkapnya »

Cara membuat Tab View dengan animasi gulung blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">

<script src="http://adsensecamp.com/show/?id=a6X8dvOv4CE%3D&cid=sO23aMPfjUo%3D&chan=CBtxjO0y5hw%3D&type=2&title=3D81EE&text=000000&background=FFFFFF&border=000000&url=2BA94F" type="text/javascript">
</script>

<span style="font-family: Times, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<span style="font-family: Times, Times New Roman, serif;"><span style="font-size: large;">Menu TAB view</span> merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya pasti akan membuat blog kita jadi berat.<br /><br />Mungkin sedikit tips dapat membantu yaitu dengan membuat Tab View . Siang ini saya akan membagi ilmu tentang <i>Cara Membuat Tab View </i><u style="font-style: italic;">dengan animasi gulung. </u>Wow ?? penasaran ?? langsung ke TKP.</span></div>
<div style="text-align: left;">
<span style="font-family: Times, Times New Roman, serif;"><br /></span></div>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBP-lZWMkNzV06XeauY5hq8TFEdDDK_TdPtE2EWgU-NG6cvVbSHMSLK4EmjE8IN3EwJaxtbKMkWBlSQM4ox6VXStWFsW3oYzKLOO1c3gotRbAgcVySVG4O-vTZ-i1zMHTU5w1i7QsWRZQr/s1600/tabview.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Times, Times New Roman, serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBP-lZWMkNzV06XeauY5hq8TFEdDDK_TdPtE2EWgU-NG6cvVbSHMSLK4EmjE8IN3EwJaxtbKMkWBlSQM4ox6VXStWFsW3oYzKLOO1c3gotRbAgcVySVG4O-vTZ-i1zMHTU5w1i7QsWRZQr/s1600/tabview.jpg" /></span></a></div>
<span style="font-family: Times, Times New Roman, serif;"><br /><b>Pertama :</b><br /><span style="background-color: white;"><span style="line-height: 16.78333282470703px; text-align: justify;">1. Silahkan Log in ke Blog Sobat<br />2. Masuk ke tab perancangan lalu pilih edit HTML<br />3. Seperti Biasa centang "Expand widget templates"<b> </b><u>untuk menghindari apabila terjadi kesalahan.</u></span></span></span><br />
<span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;"><span style="line-height: 16.78333282470703px; text-align: justify;">4. Silahkan cari kode ]<b>]></b:skin></b> Tekan <b>CTRL+F</b><u> untuk mengeluarkan kotak pencarian</u></span></span></span></div>
<div style="text-align: left;">
<span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;"><span style="line-height: 16.78333282470703px; text-align: justify;">5. Setelah berhasil ketemu kode diatas silahkan letakkan kode dibawah ini, tepat di <b>atas</b> kode <b>]]></b:skin></b></span></span></span></div>
<div>
<div style="margin-bottom: 2px;">
<span style="font-family: Times, Times New Roman, serif;"><i><b><small><br /></small></b></i>
<i><b><small>Klik untuk melihat </small></b></i><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 = 'Show'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" />
</span></div>
<div style="border: inset; margin: 0px; padding: 6px;">
<div style="border: inset; margin: 0px; padding: 6px;">
<textarea class="form-text" cols="80" name="txtSourceCodeJavascript" onclick="this.select();" readonly="" rows="10" style="height: 102px; margin: 2px; width: 565px;">.widget-wrapper2{padding:10px}.widget-tab{font-family:Arial,Helvetica,sans-serif;padding:5px;padding-left:none}.widget-tab ul{margin:0;padding:0 0px}.widget-tab ul li{list-style:none;padding:4px 0;font-size:12px}.widget-tab ul li:last-child{border-bottom:none}.widget-tab ul li a{text-decoration:none;color:#3e4346}.widget-tab ul li a small{color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0}.tab-content ul li a:hover small{color:#baae8e}.active-tab{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofs8iteb6hUpvexI6PJa5pwMgGuKkSA2N0TQXdd4EjYeCGLAQfIrts7pO-IkoM-G-PWLwi9shev3ZwDs16E6z5_RiwADNIYOUriUaxRu1GDLMe9J4Bjbt0bWZzL0GoZ6zWGd5qnswzmA/s1600/main.png) repeat-x scroll left top!important;color:#282E32!important}ul.tab-wrapper{margin:5px 0 4px;padding:10px 10px 0}ul.tab-wrapper li{border-bottom:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGN_UNXKLTjZpM8MBD4TjxVXRyBxtKxvfRzqASCg488sRYI-Zb41MjXIb6QsUqDbhG-KtHZ1Bt82XNZwUl6SxLzxwSDveR9bR0OqKjtqg7WY5Yr02tvg68fwIZGv7wfdPBzdAjR9z2PQ/s1600/sidebar-bg.png) repeat-x top;color:#FFF;cursor:pointer;display:inline;font:bold 11px Arial;line-height:2em;list-style-image:none!important;list-style-position:outside!important;list-style-type:none!important;margin-right:1px;text-align:center;text-decoration:none;text-transform:uppercase;padding:8px 12px}

6. Lalu letakkan kode dibawah ini tepat di atas kode </head>

Klik untuk melihat

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>var starttab=0;var endtab=2;var sidebarname="sidebar";</script><script src='https://masolis-javascript.googlecode.com/svn/trunk/tabber.js' type='text/javascript'/>

7. Terakhir save template sobat.
Jika ada salah kata maafkanlah. jangan lupa Follow Blog ini juga, matur nuwun.

Cara membuat Tab View dengan animasi gulung blog

Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita ...

Baca selengkapnya »

5 Template SEO Blogger Keren 2012

<div dir="ltr" style="text-align: left;" trbidi="on">
Mungkin Postingan ini berawal dari iseng-iseng doang hehehee ... menurut saya sih beberapa template nih cukup simple namun juga keren, dah beberapa kali saya coba templatenya dan hasilnya pun cukup memuaskan , templatenya juga ringan gk terlalu berat kyk template blog ini.<br />
<div>
<br /></div>
<div>
yuk di lihat 5 Template SEO Blogger Keren 2012 :</div>
<div>
<br /></div>
<div>
<div style="text-align: left;">
Yang pertama</div>
<div style="text-align: left;">
1. Johny Sompret template blogger</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
</div>
<div style="font-size: 13px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYHJxKwY14W7HD5vExeRqxAqhe9xvW1E96sj3DPu3OSj69lQ1TwFYoaOPQt9lg-85FM8zK5y07XPOHijqIe9RlS6CIH1Vev84_JjKO1OiMsMsUJ8xYPOrOiELbfi3JznTiSRdmYKbJh5Wn/s1600/Johny+Sompret.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYHJxKwY14W7HD5vExeRqxAqhe9xvW1E96sj3DPu3OSj69lQ1TwFYoaOPQt9lg-85FM8zK5y07XPOHijqIe9RlS6CIH1Vev84_JjKO1OiMsMsUJ8xYPOrOiELbfi3JznTiSRdmYKbJh5Wn/s320/Johny+Sompret.jpg" width="320" /></a></div>
<div style="text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.mastemplate.com/2012/06/johny-sompret.html" target="_blank">Go to Real Site >></a></div>
<div>
<br /></div>
<br />
<span style="font-size: small;"><br /></span>
<span style="font-size: small;"><br /></span>
<span style="font-size: small;">2. Johny SimpleBlog template</span></div>
<div style="font-size: 13px;">
<br /></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLvRDwDuaTRT7fc0AKUMuy0wBfHYt68XF0V7MQCPRhbNSONIqXpkJ9i1XeWzHF-maPg7HkJIDhtCKuxFm7t_ErBjmiO9qYmQHtcfgwlmeSYps_d6TucFIaoycFX1886NH5zqG_rH6_NAQ/s1600/Johny+Simpleblog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLvRDwDuaTRT7fc0AKUMuy0wBfHYt68XF0V7MQCPRhbNSONIqXpkJ9i1XeWzHF-maPg7HkJIDhtCKuxFm7t_ErBjmiO9qYmQHtcfgwlmeSYps_d6TucFIaoycFX1886NH5zqG_rH6_NAQ/s320/Johny+Simpleblog.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<a href="http://www.mastemplate.com/2012/05/johny-simpleblog.html" target="_blank">Go to Real Site >></a></div>
<div class="separator" style="clear: both; font-size: 13px;">
<br /></div>
<div class="separator" style="clear: both; font-size: 13px;">
<span style="font-size: small;">3. Johny Classicsite template</span></div>
<div class="separator" style="clear: both; font-size: 13px;">
<span style="font-size: small;"><br /></span></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWZdOcw3SsghZzTHv-JAQ1aES6HkShbpA5oK4bAUINBypP2oTPi2HBIV-9RrDW_UPTUNnsNkjI4VnXET8YDQW2pSamnRUT2zGWHUrHDt_YpdtBRtPjD8wWUFGoNOO1osAuOlapOewoIXu/s1600/Johny+Classicsite.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWZdOcw3SsghZzTHv-JAQ1aES6HkShbpA5oK4bAUINBypP2oTPi2HBIV-9RrDW_UPTUNnsNkjI4VnXET8YDQW2pSamnRUT2zGWHUrHDt_YpdtBRtPjD8wWUFGoNOO1osAuOlapOewoIXu/s320/Johny+Classicsite.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<a href="http://www.mastemplate.com/2012/06/johny-classicsite.html" target="_blank">Go to Real Site >></a></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; font-size: 13px;">
<span style="font-size: small;">4. Johny Ganteng Banget template</span></div>
<div class="separator" style="clear: both; font-size: 13px;">
<br /></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7upbp4Mb0zU7ozoOWFAYxfwEOT9tdz8E1d6d7uXVIuNKdlClNiLmhZ6yDpG5SMwGa45w6cwPt6TDsLz58-jnEhYi4t7RVpwbOVGANd45uAy1MPkHsgQ0GtwUEr3OC-eR8IWy7thHIql2d/s1600/Johny+Ganteng+Banget.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7upbp4Mb0zU7ozoOWFAYxfwEOT9tdz8E1d6d7uXVIuNKdlClNiLmhZ6yDpG5SMwGa45w6cwPt6TDsLz58-jnEhYi4t7RVpwbOVGANd45uAy1MPkHsgQ0GtwUEr3OC-eR8IWy7thHIql2d/s320/Johny+Ganteng+Banget.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<a href="http://www.mastemplate.com/2012/08/johny-ganteng-banget.html" target="_blank">Go to Real Site >></a></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; font-size: 13px;">
<span style="font-size: small;">Dan yang terakhir :<br />5. Johny Storage Dark template</span></div>
<div class="separator" style="clear: both; font-size: 13px;">
<span style="font-size: small;"><br /></span></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9X4Ml_T6u7-bmwY1rSm-Yd5Z0vdOQY5HuBkQKOJPZnYN7i1KxLH7QMv1Cef8prgxBFqOVXmpkIvz90Yn6t4gRvBtCafMPq4gRfCq8vEgR9WN5qy8jhBzcO9M4G4xRK6laIZDtzpWEN2_o/s1600/Johny+Storage+Dark.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9X4Ml_T6u7-bmwY1rSm-Yd5Z0vdOQY5HuBkQKOJPZnYN7i1KxLH7QMv1Cef8prgxBFqOVXmpkIvz90Yn6t4gRvBtCafMPq4gRfCq8vEgR9WN5qy8jhBzcO9M4G4xRK6laIZDtzpWEN2_o/s320/Johny+Storage+Dark.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<a href="http://www.mastemplate.com/2012/05/johny-storage-dark.html" target="_blank">Go to Real Site >></a></div>
<div class="separator" style="clear: both; font-size: 13px;">
<br /></div>
<div class="separator" style="clear: both; font-size: 13px; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; font-size: 13px;">
<span style="font-size: small;"><br /></span></div>
<div class="separator" style="clear: both; font-size: 13px;">
<span style="font-size: small;">Itulah beberapa template SEO Friendly yang menurut saya cukup bagus hehehehe.. mohon maaf jika ada salah kata dsb. & jangan lupa like atau follow blog ini juga, matur nuwun.</span></div>
<div>
<span style="font-size: small;"><br /></span></div>
<br />
<div style="text-align: left;">
<br /></div>
</div>
<div>
<div style="text-align: left;">
<br /></div>
</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<br /></div>
</div>

5 Template SEO Blogger Keren 2012

Mungkin Postingan ini berawal dari iseng-iseng doang hehehee ... menurut saya sih beberapa template nih cukup simple namun juga keren, dah ...

Baca selengkapnya »

Cara Mengganti Tulisan Older Post dan Newer Post dengan Icon/Gambar

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: left;">Caranya sebagai berikut : </div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><span style="background-color: white; line-height: 17px; text-align: justify;"><span style="font-family: Times, 'Times New Roman', serif;"><span style="line-height: 13.5pt;">1. Masuk ke</span></span><span style="line-height: 13.5pt;"> </span><a href="http://www.blogger.com/post-create.g?blogID=2244552405338799925" style="line-height: 13.5pt; outline: none; text-decoration: none;" target="_blank">www.blogger.com</a><span style="line-height: 13.5pt;"> </span><span style="line-height: 13.5pt;">dengan ID anda masing-masing tentunya</span></span><br />
<span style="background-color: white; line-height: 17px; text-align: justify;"><span style="font-family: Times, 'Times New Roman', serif;"><span style="line-height: 13.5pt;">2. Klik</span></span><span style="line-height: 13.5pt;"> </span><span style="line-height: 13.5pt;">Rancangan/Tata Letak</span></span><br />
<span style="background-color: white; line-height: 17px; text-align: justify;"><span style="font-family: Times, 'Times New Roman', serif;"><span style="line-height: 13.5pt;">3. Pilih</span></span><span style="line-height: 13.5pt;"> </span><span style="line-height: 13.5pt;">Edit HTML</span></span><br />
<span style="background-color: white; text-align: justify;"><span style="font-family: Times, 'Times New Roman', serif;"><span style="line-height: 13.5pt;">4. Sebelum anda mengedit HTML blog anda, jangan lupa centang tanda</span></span><span style="line-height: 13.5pt;"> </span><span style="line-height: 13.5pt;">Expand Widget Template</span></span><br />
<span style="background-color: white; text-align: justify;"><span style="font-family: Times, 'Times New Roman', serif;"><span style="line-height: 13.5pt;">5. Cari kode ini</span></span><span style="line-height: 13.5pt;"> </span><span style="line-height: 13.5pt;"><data:newerpagetitle></data:newerpagetitle></span><span style="line-height: 13.5pt;"> <b><data:newerPageTitle/></b> </span><span style="line-height: 13.5pt;">(biar lebih mudah mencarinya tekan</span><span style="line-height: 13.5pt;"> </span><span style="line-height: 13.5pt;">Ctrl+F</span><span class="Apple-style-span" style="line-height: 13.5pt;">), kemudian ganti kode tadi dengan kode gambar/icon yang ingin anda gunakan. Contoh:</span></span></div><div style="text-align: left;"><span style="background-color: white; text-align: justify;"><span class="Apple-style-span" style="font-family: 'Lucida Sans Unicode', sans-serif; font-size: 11px; font-weight: bold; line-height: 18px;"><br />
</span><span style="font-family: 'Lucida Sans Unicode', sans-serif; font-size: 11px; font-weight: bold; line-height: 13.5pt;"><img border="0" src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/back2.png" /></span></span></div><div style="text-align: left;"><span style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; text-align: justify;"><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><b><img src='http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/back2.png' border='0'/></b><br />
<v:shapetype coordsize="21600,21600" filled="f" id="_x0000_t75" o:preferrelative="t" o:spt="75" path="m@4@5l@4@11@9@11@9@5xe" stroked="f"><v:stroke joinstyle="miter"><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"><v:f eqn="sum @0 1 0"><v:f eqn="sum 0 0 @1"><v:f eqn="prod @2 1 2"><v:f eqn="prod @3 21600 pixelWidth"><v:f eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1"><v:f eqn="prod @6 1 2"><v:f eqn="prod @7 21600 pixelWidth"><v:f eqn="sum @8 21600 0"><v:f eqn="prod @7 21600 pixelHeight"><v:f eqn="sum @10 21600 0"></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:formulas><v:path gradientshapeok="t" o:connecttype="rect" o:extrusionok="f"><o:lock aspectratio="t" v:ext="edit"></o:lock></v:path></v:stroke></v:shapetype><v:shape alt="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/back2.png" id="Picture_x0020_1" o:spid="_x0000_i1027" style="height: 24pt; visibility: visible; width: 24pt;" type="#_x0000_t75"><v:imagedata o:title="back2" src="file:///C:\DOCUME~1\sammy\LOCALS~1\Temp\msohtmlclip1\01\clip_image001.png"></v:imagedata></v:shape><br />
<br />
6. Cari lagi kode ini</span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;">  </span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><b><data:olderPageTitle/></b> </span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><data:olderpagetitle></data:olderpagetitle></span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"> </span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;">ganti juga juga dengan kode gambar/icon yang ingin anda gunakan. Contoh:</span></span></div><div class="MsoNormal" style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; text-align: justify;"><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><br />
</span></div><span style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; text-align: justify;"><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"></span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><img border="0" src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/forward2.png" /> </span><span style="font-family: 'Lucida Sans Unicode', sans-serif;"><br />
<v:shape alt="" id="_x0000_i1025" style="height: 24pt; width: 24pt;" type="#_x0000_t75"><span class="Apple-style-span" style="line-height: 18px;"><b><img src='http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/forward2.png' border='0'/></b></span><br />
<br />
<span class="Apple-style-span" style="line-height: 13.5pt;">7. Terakhir ganti juga kode ini</span></v:shape></span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;">  </span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><b><data:homeMsg/> </b></span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"> </span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><data:homemsg></data:homemsg></span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"> </span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;">dengan kode gambar/icon yang anda ingin gunakan. Contoh:<br />
</span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><img border="0" src="http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/home2.png" /> </span></span><br />
<span style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; text-align: justify;"><span class="Apple-style-span" style="line-height: 13.5pt;"><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"></span></span><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><b><img src='http://i37.photobucket.com/albums/e74/mrphoto16/herman%20blog%20icon/home2.png' border='0'/></b> </span></span> <br />
<div style="text-align: left;"><span style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; text-align: justify;"><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><br />
</span></span></div><div style="text-align: left;"><span style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; text-align: justify;"><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;">Selamat Mencoba !!!</span></span></div><div style="text-align: left;"><span style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; text-align: justify;"><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><br />
</span></span></div><div style="text-align: left;"><span style="background-color: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 17px; text-align: justify;"><span style="font-family: 'Lucida Sans Unicode', sans-serif; line-height: 13.5pt;"><a href="http://blogg-komputer.blogspot.com/2011/01/cara-mengganti-tulisan-older-post-dan.html">Blog Sumber</a></span></span></div></div>

Cara Mengganti Tulisan Older Post dan Newer Post dengan Icon/Gambar

Caranya sebagai berikut : 1. Masuk ke www.blogger.com dengan ID anda masing-masing tentunya 2. Klik Rancangan/Tata Letak 3. Pilih ...

Baca selengkapnya »

Cara Memasang Fasilitas Search Engine di Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;">Ada banyak macam mesin pencari yang bisa kamu pasang diblog kamu, namun pada postingan ini saya kasih cara yg simple dan mudah :</span></div><div style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><br />
</span></div><div style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><br />
</span></div><div style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><br />
</span></div><div style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px; text-align: justify;"><br />
</div><div style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px; text-align: justify;"><span style="background-color: white;"><br />
</span></div><div style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4o-1eJUWGYcqwaVtJ3e2BJDcP3Xh4s0Hc_mlAgwU4IHXBloZ6dUpW5D7wO8GizQwsHhp-2uugXN0SVLPY7DgW9xlfYD88z9pA8JhS5f-wfpV77UddI-X1V40X1IsfVBek_M6vEMIPl2w/s1600/membuat+search+engine.jpeg" /></div><div style="text-align: center;"><br />
</div><div style="text-align: -webkit-auto;"><div style="text-align: center;"><span style="font-family: Arial, Tahoma, Verdana;"><span style="font-size: 12px; line-height: 19px;"><i>(gambar diatas merupakan bentuk dari custom search engine)</i></span></span></div><div style="text-align: left;"><span style="font-family: Arial, Tahoma, Verdana;"><span style="font-size: 12px; line-height: 19px;"><b><br />
</b></span></span></div><div style="text-align: left;"><span style="font-family: Arial, Tahoma, Verdana;"><span style="font-size: 12px; line-height: 19px;"><b><br />
</b></span></span></div><div style="text-align: left;"><span style="background-color: white;"><b style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px;"><br />
</b></span></div><div style="text-align: left;"><span style="background-color: white;"><b style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px;">-</b><b style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px;"> Custom Search Engine </b></span></div><div style="text-align: left;"><span style="background-color: #fefdfd; color: #2c2c2c; font-family: arial; font-size: 13px; line-height: 20px; text-align: justify;">Untuk membuat sebuah <b>Custom </b></span><b style="background-color: #fefdfd; color: #2c2c2c; font-family: arial; font-size: 13px; line-height: 20px; margin: 0px; padding: 0px; text-align: justify;">Search Engine</b><span style="background-color: #fefdfd; color: #2c2c2c; font-family: arial; font-size: 13px; line-height: 20px; text-align: justify;"> pada sebuah blog, sebenarnya mudah karena agan hanya membuatkan sedikit kode HTML, scriptnya seperti ini : </span> </div><div style="text-align: left;"><span style="background-color: white; font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px;"><br />
</span></div><span style="background-color: white;"><span style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px;"></span></span><br />
<div style="text-align: left;"><span style="background-color: white;"><span style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px;"><form action="<span style="color: #cc0000; margin: 0px; padding: 0px;">http://alamat-blog-anda.com/search</span>" id="searchform" method="get" name="searchform"></span></span></div><span style="background-color: white;"><span style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px;"><div style="text-align: left;"><input id="s" name="q" type="text" value="" /> <input id="searchsubmit" type="submit" value="Search" /> </form></div></span></span><br />
<div style="text-align: left;"><span style="background-color: white; font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px;"><br />
</span></div><span style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px;"></span><br />
<div style="font-style: italic; text-align: left;"><span style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px;"><i style="background-color: white; margin: 0px; padding: 0px;">(Tulisan warna merah silahkan isi dengan alamat blog kamu)</i></span></div><div style="font-style: italic; text-align: left;"><span style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px;"><br />
</span></div><div style="text-align: left;"><span style="font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 19px; margin: 0px; padding: 0px;">Selamat Mencoba !!!</span></div></div></div>

Cara Memasang Fasilitas Search Engine di Blog

Ada banyak macam mesin pencari yang bisa kamu pasang diblog kamu, namun pada postingan ini saya kasih cara yg simple dan mudah : (gam...

Baca selengkapnya »

Cara Pasang widget IP Address di blog

<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<br />
<br />
<div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px; margin-bottom: 1.2em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;">Langkah 1</div><div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px; margin-bottom: 1.2em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><span class="Apple-style-span" style="background-color: white;">Langsung aja kali ya.. kali ini saya ingin berbagi bagaimana cara memasang Widget IP Address, OS, Country dan Browser di blogspot . </span></div><div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px; margin-bottom: 1.2em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"><img alt="IP" src="http://www.wieistmeineip.de/ip-address/" /></div><div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px; margin-bottom: 1.2em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><span class="Apple-style-span" style="background-color: white;">Caranya masuk ke situs<strong style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> <a href="http://www.wieistmeineip.de/" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" target="_blank">http://www.wieistmeineip.de/</a></strong> kemudian cari kebawah icon monitor yang ada gambar obengnya seperti gambar dibawah ini.</span></div><div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px; margin-bottom: 1.2em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><a href="http://denimulyadi.files.wordpress.com/2011/10/gambar-target.jpg" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="background-color: white; color: black;"><img alt="" class="aligncenter size-medium wp-image-608" height="148" src="http://denimulyadi.files.wordpress.com/2011/10/gambar-target.jpg?w=300&h=148" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-color: rgb(209, 173, 128); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: block; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: center;" title="Gambar Target" width="300" /></span></a></div><div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px; margin-bottom: 1.2em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><span class="Apple-style-span" style="background-color: white;">Maka akan tampil beberapa format tampilan Button dan Full Banner dan negara Deutsch dan Englisch, pilihlah sesuai selera anda (pada Blog ini saya memakai format Button englisch) lihat gambar dibawah ini:</span></div><div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px; margin-bottom: 1.2em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><a href="http://denimulyadi.files.wordpress.com/2011/10/fromat-button.jpg" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"><span class="Apple-style-span" style="background-color: #f3f3f3; color: black;"><img alt="" class="aligncenter size-medium wp-image-609" height="145" src="http://denimulyadi.files.wordpress.com/2011/10/fromat-button.jpg?w=300&h=145" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-color: rgb(209, 173, 128); border-bottom-style: solid; border-bottom-width: 2px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; display: block; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: center;" title="Fromat Button" width="300" /></span></a></div><div style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 15px; line-height: 22px; margin-bottom: 1.2em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: -webkit-auto;"><span class="Apple-style-span" style="background-color: white;">Kemudian copy code HTML yang berada di dalam kotak tersebut (Lihat gambar atas) dan paste ke sidebar Teks wordpress.</span></div><div>Langkah 2</div><div><br />
</div><div><br />
</div><div>Rincian widget : <span class="Apple-style-span" style="background-color: orange;">ukuran gambar <span class="Apple-style-span" style="color: #222222; font-family: Verdana, Arial, sans-serif; font-size: 12px;">125x125 Pixel, bahasa Belanda</span></span></div><div><img alt="IP" src="http://www.wieistmeineip.de/ip-adresse/" /></div><div><br />
</div><div>Copy code script di bawah ini :</div><div><br />
</div><div><span class="Apple-style-span" style="background-color: orange;"><a href="http://www.wieistmeineip.de/cometo/?de"><img src="http://www.wieistmeineip.de/ip-adresse/?size=125x125" border="0" width="125" height="125" alt="IP" /></a></span></div><div><span class="Apple-style-span" style="background-color: orange;"><br />
</span></div><div><img alt="IP" src="http://www.wieistmeineip.de/ip-adresse/?size=468x60" /></div><div><img alt="IP" src="http://www.wieistmeineip.de/ip-adresse/?size=468x60" /></div><div><br />
</div><div><img alt="IP" src="http://www.wieistmeineip.de/ip-address/" /></div><div><br />
</div><div><br />
</div></div>

Cara Pasang widget IP Address di blog

Langkah 1 Langsung aja kali ya.. kali ini saya ingin berbagi bagaimana cara memasang Widget IP Address, OS, Country dan Browser di blogsp...

Baca selengkapnya »

Jquery Color picker

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVleXdOc5vOzoSab9ydTtu1s5EuPSWTqUbnR3e9IQuulTdmXC81GHI9E647NvVBeEk0z32zhRrGJVw21dPr2QEb8IRdJHMMdpNlkKB6dp7FJ0aakSrXP59k980LJx-ngaM2qTaT30Jt6k/s320/colorpicker.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVleXdOc5vOzoSab9ydTtu1s5EuPSWTqUbnR3e9IQuulTdmXC81GHI9E647NvVBeEk0z32zhRrGJVw21dPr2QEb8IRdJHMMdpNlkKB6dp7FJ0aakSrXP59k980LJx-ngaM2qTaT30Jt6k/s320/colorpicker.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVleXdOc5vOzoSab9ydTtu1s5EuPSWTqUbnR3e9IQuulTdmXC81GHI9E647NvVBeEk0z32zhRrGJVw21dPr2QEb8IRdJHMMdpNlkKB6dp7FJ0aakSrXP59k980LJx-ngaM2qTaT30Jt6k/s320/colorpicker.png" /></a><br />
<br />
<br />
Cara membuat :<br />
<br />
1. Seperti biasa login Blogger terlebih dahulu pergi ke menu rancangan, lalu pilih edit html,<br />
2. Cari kode <span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="background-color: yellow; line-height: 20px;">]]></b:skin></span></span><br />
<span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="line-height: 20px;">3. Masukkan kode dibawah ini tepat di atas kode <span class="Apple-style-span" style="background-color: yellow;">]]></b:skin></span></span></span><br />
<span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="line-height: 20px;"><br />
</span></span><br />
<br />
<div><div style="border: 1px solid #cccccc; height: 250px; overflow: auto; padding: 10px; width: 280px;"><br />
/*----------------<br />
Jquery color Picker<br />
-------------------------------*/<br />
.navigationTabs {<br />
height: 23px;<br />
line-height: 23px;<br />
border-bottom: 1px solid #ccc;<br />
}<br />
.navigationTabs li {<br />
float: left;<br />
height: 23px;<br />
line-height: 23px;<br />
padding-right: 3px;<br />
}<br />
.navigationTabs li a{<br />
float: left;<br />
dispaly: block;<br />
height: 23px;<br />
line-height: 23px;<br />
padding: 0 10px;<br />
overflow: hidden;<br />
color: #52697E;<br />
background-color: #eee;<br />
position: relative;<br />
text-decoration: none;<br />
}<br />
.navigationTabs li a:hover {<br />
background-color: #f0f0f0;<br />
}<br />
.navigationTabs li a.active {<br />
background-color: #fff;<br />
border: 1px solid #ccc;<br />
border-bottom: 0px solid;<br />
}<br />
.tabsContent {<br />
border: 1px solid #ccc;<br />
border-top: 0px solid;<br />
width: 698px;<br />
overflow: hidden;<br />
}<br />
.tab {<br />
padding: 16px;<br />
display: none;<br />
}<br />
.tab h2 {<br />
font-weight: bold;<br />
font-size: 16px;<br />
}<br />
.tab h3 {<br />
font-weight: bold;<br />
font-size: 14px;<br />
margin-top: 20px;<br />
}<br />
.tab p {<br />
margin-top: 16px;<br />
clear: both;<br />
}<br />
.tab ul {<br />
margin-top: 16px;<br />
list-style: disc;<br />
}<br />
.tab li {<br />
margin: 10px 0 0 35px;<br />
}<br />
.tab a {<br />
color: #8FB0CF;<br />
}<br />
.tab strong {<br />
font-weight: bold;<br />
}<br />
.tab pre {<br />
font-size: 11px;<br />
margin-top: 20px;<br />
width: 668px;<br />
overflow: auto;<br />
clear: both;<br />
}<br />
.tab table {<br />
width: 100%;<br />
}<br />
.tab table td {<br />
padding: 6px 10px 6px 0;<br />
vertical-align: top;<br />
}<br />
.tab dt {<br />
margin-top: 16px;<br />
}<br />
<br />
#colorSelector {<br />
position: relative;<br />
width: 36px;<br />
height: 36px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6jH1UU5XAVXH9SV2hb4V83xMAmrrZXm6EwzH32zO09KvQdP2JGAniib198brKVzy-t8HPNn6StMKmI23ZDMfcNJ2QWrul6Ki6-OxzXV7AgzumLBmKvKwp6viKmX2TEMtW36mcN5wdAE/s1600/select2.png);<br />
}<br />
#colorSelector div {<br />
position: absolute;<br />
top: 3px;<br />
left: 3px;<br />
width: 30px;<br />
height: 30px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6jH1UU5XAVXH9SV2hb4V83xMAmrrZXm6EwzH32zO09KvQdP2JGAniib198brKVzy-t8HPNn6StMKmI23ZDMfcNJ2QWrul6Ki6-OxzXV7AgzumLBmKvKwp6viKmX2TEMtW36mcN5wdAE/s1600/select2.png) center;<br />
}<br />
#colorSelector2 {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 36px;<br />
height: 36px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6jH1UU5XAVXH9SV2hb4V83xMAmrrZXm6EwzH32zO09KvQdP2JGAniib198brKVzy-t8HPNn6StMKmI23ZDMfcNJ2QWrul6Ki6-OxzXV7AgzumLBmKvKwp6viKmX2TEMtW36mcN5wdAE/s1600/select2.png);<br />
}<br />
#colorSelector2 div {<br />
position: absolute;<br />
top: 4px;<br />
left: 4px;<br />
width: 28px;<br />
height: 28px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6jH1UU5XAVXH9SV2hb4V83xMAmrrZXm6EwzH32zO09KvQdP2JGAniib198brKVzy-t8HPNn6StMKmI23ZDMfcNJ2QWrul6Ki6-OxzXV7AgzumLBmKvKwp6viKmX2TEMtW36mcN5wdAE/s1600/select2.png) center;<br />
}<br />
#colorpickerHolder2 {<br />
top: 32px;<br />
left: 0;<br />
width: 356px;<br />
height: 0;<br />
overflow: hidden;<br />
position: absolute;<br />
}<br />
#colorpickerHolder2 .colorpicker {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJnwz9sqqowhClyOCfDx5gpXf0lSguyeQjcW3Qs29spMZ9RpfWgep5kayQJqRxHFgK21YVTEPPGj8LbOBHEu-XQQEROHtN8nPQDL2fKdLOk2FHLTDPmG0UxJ27BicXSGkWo122skWXMgo/s1600/custom_background.png);<br />
position: absolute;<br />
bottom: 0;<br />
left: 0;<br />
}<br />
#colorpickerHolder2 .colorpicker_hue div {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTp0fwciq4ab6svFUqa5k8c9_pV_JZAb5phtcEiK_pSkTW6g9owmRylP5yapYBjfZQeVGSDCoP0MxX6KM9GqCRHi6McyqK57C-nP-SR7xDW_E1P8hhyHLRPEqvZk2X_Q7YZhgVD2fl1So/s1600/custom_indic.gif);<br />
}<br />
#colorpickerHolder2 .colorpicker_hex {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1mcuOQPAFSwFw-4lq9_3ssvo63hCz43eMdVF1FDlC_Jh3XYOO_7hXhhASGcNkmL5IkY5XeYeCbvMcWmLCNUJufQCR3DEOGDpoqAVXCqq3mc1jdTJakIZPNBKPbTavGcpFyL8Qm8k9528/s1600/custom_hex.png);<br />
}<br />
#colorpickerHolder2 .colorpicker_rgb_r {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjdvBDRRuKiya53cf9Bu6bvzxsD7DjTd_en1yzcmMqTR5oMvotAnwwDHqBBDNAcerR0IAYBxjCxNpv_0xN8ybOZnTutb7dMiHvjV0-895ZRjVHX9olBnLIRd7amuxQ0QVcyu9Nuhx6f6Y/s1600/custom_rgb_r.png);<br />
}<br />
#colorpickerHolder2 .colorpicker_rgb_g {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT4tIax4IBcH_xec8cgpBVhbuH_ewIm2exIhJKSyqUbbPDPyh2V95j9SaqyTms2wV2mE0hRkM0a_xCtKM4Jdq3krKppxifqbuAfTlTN4_TDQRjvfavDRVzu9lmXyFnXx4zM1hGyQFdJc/s1600/custom_rgb_g.png);<br />
}<br />
#colorpickerHolder2 .colorpicker_rgb_b {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiDR8CxeK7cPQCMiG6BnYnk7Z35sg-AxC0cvc3rbMg4yOv-_mfC-9zSbQnRVmaP5AIsM_n0X3lKlFKJS2HtX5XnVR7g-AKIY5xiYPrfgzKZOYi-P39uHLyBHt2d2o9clpXCzocWk-0zO0/s1600/custom_rgb_b.png);<br />
}<br />
#colorpickerHolder2 .colorpicker_hsb_s {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWpRd9mnBZzhVRR_yZwLtHPh29jTq-BZU5eI9bPEn9BuBbtsLLfME1ZKKIHS5z54skjPATFG_R2IJVeR4peXmjJ7h0yZXyfAy-wO13-3hh9FVdYfqtvJ-WRjcn4qurX9msC6G83_dhlw/s1600/custom_hsb_s.png);<br />
display: none;<br />
}<br />
#colorpickerHolder2 .colorpicker_hsb_h {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5vFAJ8SC46-0GR_fFlZagRdztpssmEMC6RuFMfkgMQiQijHwIjYRPc7Tfxc2eJK0Vf0ImwaDkraCvUZ6DoJMvZEc_V56FEsyg6LTnWUm2RkBkYAbSVxoG8Q9rCKHuLsY0dDksgz65N0/s1600/custom_hsb_h.png);<br />
display: none;<br />
}<br />
#colorpickerHolder2 .colorpicker_hsb_b {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjreJPnZuBNUzUD0ifV2GhMRFBh3owmSwPrB907cXzvXNkqkyycI2jJw6kVAZYgJJB1UzLuL1uzI-FNBKeOqYAekIxId8n_O-tGCoJtg0RMPdW1C7JApynl826PMWBMRAlcPeQie3BRzDQ/s1600/custom_hsb_b.png);<br />
display: none;<br />
}<br />
#colorpickerHolder2 .colorpicker_submit {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqg-fGW31HgOKcdoPE42BK5KJh87UD3_sqSw2QxIiRUwoTZ4UNJqvS9NWej-LWmRFI-zIIbu2dhPrawlxlvEL-tJIJHnkbuXXi4UqqEt5effiiisjHYR_8iCp-Mzs9VUcyTLr4j5UL5Q/s1600/custom_submit.png);<br />
}<br />
#colorpickerHolder2 .colorpicker input {<br />
color: #778398;<br />
}<br />
#customWidget {<br />
position: relative;<br />
height: 36px;<br />
}<br />
<br />
.colorpicker {<br />
width: 356px;<br />
height: 176px;<br />
overflow: hidden;<br />
position: absolute;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxtwqtK0gCZUNxaxN7DFN_9a_mSsdFJine0ZVwp5kQu8MdyZeuGBMOmUdeDCc2yoOLHBTKx6mguwy9IRlaTRl__Bw09MbCXo5MSE66jchLVS73cDSx5ahGRdRBwWR-_fYfUhsUguzvmE/s1600/colorpicker_background.png);<br />
font-family: Arial, Helvetica, sans-serif;<br />
display: none;<br />
}<br />
.colorpicker_color {<br />
width: 150px;<br />
height: 150px;<br />
left: 14px;<br />
top: 13px;<br />
position: absolute;<br />
background: #f00;<br />
overflow: hidden;<br />
cursor: crosshair;<br />
}<br />
.colorpicker_color div {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 150px;<br />
height: 150px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IVG-P10Oz2k5s569iR1HmNnI7T_AHMKhnmEAclrZ3ikyBJs_CHK8j9gDqph8bgbhyy4nTfHo9TvhkBRJVgZNRzfgO1z9gyYYLrPNBHafFHSvNrnmN2Fwo_7gNd0-dpkmHIshseQE7T8/s1600/colorpicker_overlay.png);<br />
}<br />
.colorpicker_color div div {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
width: 11px;<br />
height: 11px;<br />
overflow: hidden;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDx0nb3oRHm3mAdd3DJXJQvCvOEGSGKcGc80-TqImGiM-TuGFR1OylmFZKw-zBqB89sWvOWg_BcFlj755LitGfsCJ1gU-r4sMFhTqJoeAqL14Qt6vsv5F8nPL1Oy9_-SJ8xZEWY92nlaU/s1600/colorpicker_select.gif);<br />
margin: -5px 0 0 -5px;<br />
}<br />
.colorpicker_hue {<br />
position: absolute;<br />
top: 13px;<br />
left: 171px;<br />
width: 35px;<br />
height: 150px;<br />
cursor: n-resize;<br />
}<br />
.colorpicker_hue div {<br />
position: absolute;<br />
width: 35px;<br />
height: 9px;<br />
overflow: hidden;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM5XFUmmXg5o3ObVs7STwWBnMf8fc49bq2fTpzuCeJMDqvCv911O8_iavj3qiMIZsK7xm1i-xvDBEW5adlsQmxrW31EKERVdFBVldks80MXpgbP1XTNb3ACw9WDatUdWMNpBhr5NGk9Rw/s1600/colorpicker_indic.gif) left top;<br />
margin: -4px 0 0 0;<br />
left: 0px;<br />
}<br />
.colorpicker_new_color {<br />
position: absolute;<br />
width: 60px;<br />
height: 30px;<br />
left: 213px;<br />
top: 13px;<br />
background: #f00;<br />
}<br />
.colorpicker_current_color {<br />
position: absolute;<br />
width: 60px;<br />
height: 30px;<br />
left: 283px;<br />
top: 13px;<br />
background: #f00;<br />
}<br />
.colorpicker input {<br />
background-color: transparent;<br />
border: 1px solid transparent;<br />
position: absolute;<br />
font-size: 10px;<br />
font-family: Arial, Helvetica, sans-serif;<br />
color: #898989;<br />
top: 4px;<br />
right: 11px;<br />
text-align: right;<br />
margin: 0;<br />
padding: 0;<br />
height: 11px;<br />
}<br />
.colorpicker_hex {<br />
position: absolute;<br />
width: 72px;<br />
height: 22px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfp_uUr-DLU-7jNedBbMZpaRIvgv8N7KFg770w_msL36cOQTr4ZDnjlmbAL2WKbEDeYdFJ69OVpaM5wZT5JzsPLaFn5GBS0Z4OKQZjDOJJQgn2p66pMYSPf3HQvel7k76tYxcLcegdZSk/s1600/colorpicker_hex.png) top;<br />
left: 212px;<br />
top: 142px;<br />
}<br />
.colorpicker_hex input {<br />
right: 6px;<br />
}<br />
.colorpicker_field {<br />
height: 22px;<br />
width: 62px;<br />
background-position: top;<br />
position: absolute;<br />
}<br />
.colorpicker_field span {<br />
position: absolute;<br />
width: 12px;<br />
height: 22px;<br />
overflow: hidden;<br />
top: 0;<br />
right: 0;<br />
cursor: n-resize;<br />
}<br />
.colorpicker_rgb_r {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7IabvPCFpFJPiG7DOJmm1H29UjIvF2BJNugBcuOtQkgy_-rX2hndXuoqSgskJZPnPs2jFX2UTRs4UwY0K7jOTVLyDsk8jGaQheeV34SYvpH9gjruFIpVlQPIGE0MjWW3SzKMUOoJf6kw/s1600/colorpicker_rgb_r.png);<br />
top: 52px;<br />
left: 212px;<br />
}<br />
.colorpicker_rgb_g {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjynUNx7vbfJIKgeFPdHOCxjUxjlo2ahdaROYPuNJ3oO5tvDWM2J010vPn4aOlMvPWyalvPhmUmKVabQsQxNU9DVeBLHq8hp4MZJnlHNCapM2ugqU4G057D6p0WYfDe1hnWa2WQaxHQ0/s1600/colorpicker_rgb_g.png);<br />
top: 82px;<br />
left: 212px;<br />
}<br />
.colorpicker_rgb_b {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5Tt_PF7EA7S1z4ttEgzJHrCe47MNSLRnTHI5w98VoiBWm7Q-hY8yU7phujolFJxhfr8lyzQdFXAJt54mCUGnFuoiOUba9FZ9Xc-RAaSEAJsAOhYTiBRuZQY5RfeT-HRZMwI8LkkXdAg/s1600/colorpicker_rgb_b.png);<br />
top: 112px;<br />
left: 212px;<br />
}<br />
.colorpicker_hsb_h {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglUyq56TXW4VCrhBmYO-Pu57ML5C_zEXn9cUisTUnQoDnru11MN-1a60xHgtIpvmoiRobPdn42heJAZXKJH3mUOmTtSGcsx4gQi7nnep8nt7Fgz7klIivQuSOeN-MoRpulWKqRClr8aNw/s1600/colorpicker_hsb_h.png);<br />
top: 52px;<br />
left: 282px;<br />
}<br />
.colorpicker_hsb_s {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjos3qd5vFEQJx38Jn9D2G3g3Mej42bstCvCnU5hODKpRANIxYzm-MuKCgkYoEZzf42xt3A32-KYQz3y2zD1ZPy2Gw3P9mB133iQ9XCr2DBia03E0fiNfkT4EnS9Y9AJiFaBxzSS8W5sjs/s1600/colorpicker_hsb_s.png);<br />
top: 82px;<br />
left: 282px;<br />
}<br />
.colorpicker_hsb_b {<br />
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTH49Kgnus7RKVubpZPPI-tPIULGyVGzyIu6z8puX-2vEoKtDHVwOF40o5xrJ6C4fEK-jv1GeHplW15Ft7VppOs9BOnxlrLfmYhQJ7gX7MxnCWyxrrw3mMAYjnRGCWU6foMTKWyvA-GJ0/s1600/colorpicker_hsb_b.png);<br />
top: 112px;<br />
left: 282px;<br />
}<br />
.colorpicker_submit {<br />
position: absolute;<br />
width: 22px;<br />
height: 22px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDFyeB8G5wh05o_lKWqjg0CnEWhjyZXZsuka-Q521_LjVgWTJK9NK1tb3xzfTzwXmkYRYNLLRLtndJrEIpFmkYXPOPuNtIBFALRfkLWPZY7O-Nw6RAekP_QWT4v6lhu8Al30aedhL-n0/s1600/colorpicker_submit.png) top;<br />
left: 322px;<br />
top: 142px;<br />
overflow: hidden;<br />
}<br />
.colorpicker_focus {<br />
background-position: center;<br />
}<br />
.colorpicker_hex.colorpicker_focus {<br />
background-position: bottom;<br />
}<br />
.colorpicker_submit.colorpicker_focus {<br />
background-position: bottom;<br />
}<br />
.colorpicker_slider {<br />
background-position: bottom;<br />
<br />
}<br />
<br />
</div></div></div><br />
4.Selanjutnya simpan kode dibawah ini tepat di atas kode <span class="Apple-style-span" style="background-color: yellow;"><head></span><br />
<span class="Apple-style-span" style="background-color: yellow;"><br />
</span><br />
<span class="Apple-style-span" style="background-color: yellow;"><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: justify;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><script type="text/javascript" src="http://kangdadang.googlecode.com/files/colorpicker.js"></script></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: justify;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><script type="text/javascript" src="http://kangdadang.googlecode.com/files/eye.js"></script></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: justify;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><script type="text/javascript" src="http://kangdadang.googlecode.com/files/layout.js"></script></span></span><br />
<span class="Apple-style-span" style="background-color: yellow;"><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: justify;"><br />
</span></span><br />
<div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="line-height: 20px;">5. Terakhir pilih edit laman lalu pilih add gadget , pilih Html,JavaSricpt, masukkan kode dibawah ini :</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="line-height: 20px;"><br />
</span></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="background-color: yellow;"><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"><p id="colorpickerHolder"> </p></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"><div id="customWidget"></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"><div id="colorSelector2"><div style="background-color: #00ff00"></div></div></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"><div id="colorpickerHolder2"></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"></div></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"></div></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"><p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"><p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"><p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p></span><br style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;" /><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px;"><div id="colorSelector"><div style="background-color: #0000ff"></div></div></span></span></div><br />
</div>

Jquery Color picker

Cara membuat : 1. Seperti biasa login Blogger terlebih dahulu pergi ke menu rancangan, lalu pilih edit html, 2. Cari kode ]]></b...

Baca selengkapnya »