widget share metro button style css3

Posted by Unknown at 3:27 AM

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjITC_hWmoMhbzMg9jUDNr4RU-9BwYScHGNHaU5QyzT1cDLohL2O6jUf6OIrT1HgFAG2U_56N0CiIere-fgVet3f-Fpoi3G76eBJ3CuEzDjy_fEqESoupQjl5kM4Gx2TZJcJALpFACYSBI/s1600/metro-style-social-subscription.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Metro Style Subscription Widget" border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjITC_hWmoMhbzMg9jUDNr4RU-9BwYScHGNHaU5QyzT1cDLohL2O6jUf6OIrT1HgFAG2U_56N0CiIere-fgVet3f-Fpoi3G76eBJ3CuEzDjy_fEqESoupQjl5kM4Gx2TZJcJALpFACYSBI/s1600/metro-style-social-subscription.png" title="Metro Style Subscription Widget with Hover Effect for Blogger" width="174" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><a href="http://seohtc.blogspot.com/2013/03/widget-share-metro-button-style-css3.html"><i><b>Widget share metro button style css3</b></i></a> - kali ini kita akan <a href="http://seohtc.blogspot.com/2013/03/widget-share-metro-button-style-css3.html"><i>membuat widget share/like dengan style metro button css3</i></a>.untuk lebih jelasnya silahkan lihat demo dibawah,,dan jika ingin membuat widget tersebut,,silahkan mengikuti tutorial berikut.<br /><a name="more"></a><br /><h2>Hasil :</h2><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXe-kxRYx6Qg7a88fV0M6ArQvA93PyBab8zqgaa_WyF_R6cjGRu820DRM6hfvJQGpl9SfvhbZsiwR4hDC25I2llTb6O3UyQ2pGBprqqm6kJSRIwS3AfwCQLqwizv7KSORZfwWejqwKdQo/s1600/metro-style-social-subscription-widget.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Metro Style Subscription Widget with Hover Effect for Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXe-kxRYx6Qg7a88fV0M6ArQvA93PyBab8zqgaa_WyF_R6cjGRu820DRM6hfvJQGpl9SfvhbZsiwR4hDC25I2llTb6O3UyQ2pGBprqqm6kJSRIwS3AfwCQLqwizv7KSORZfwWejqwKdQo/s1600/metro-style-social-subscription-widget.gif" title="Metro Style Subscription Widget with Hover Effect for Blogger - Demo" /></a></div><br /><h2>Tutorial :</h2><ul><li>masuk akun blogger</li><li>masuk ke edit template >> "expand template widget"</li><li>cari kode <span style="font-family: "Courier New",Courier,monospace;"><span style="color: red;">]]></b:skin></span></span></li><li>lalu pastekan kode berikut diatasnya.</li></ul><pre class="brush:css;"></pre><div class="container"><div class="line number1 index0 alt2"><code class="css plain">.widget-item-control a {</code></div><div class="line number2 index1 alt1"><code class="css spaces">    </code><code class="css keyword">display</code><code class="css plain">: </code><code class="css value">none</code><code class="css plain">;</code></div><div class="line number3 index2 alt2"><code class="css plain">}</code></div><div class="line number4 index3 alt1"><code class="css plain">.widget-item-control a {</code></div><div class="line number5 index4 alt2"><code class="css spaces">    </code><code class="css keyword">display</code><code class="css plain">: </code><code class="css value">none</code><code class="css plain">;</code></div><div class="line number6 index5 alt1"><code class="css plain">}</code></div><div class="line number7 index6 alt2"><code class="css plain">#supportive-seohtc {</code></div><div class="line number8 index7 alt1"><code class="css spaces">    </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">300px</code><code class="css plain">;</code></div><div class="line number9 index8 alt2"><code class="css spaces">    </code><code class="css keyword">float</code><code class="css plain">: </code><code class="css value">left</code><code class="css plain">;</code></div><div class="line number10 index9 alt1"><code class="css spaces">    </code><code class="css keyword">margin-top</code><code class="css plain">: </code><code class="css value">10px</code><code class="css plain">;</code></div><div class="line number11 index10 alt2"><code class="css plain">}</code></div><div class="line number12 index11 alt1"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> li {</code></div><div class="line number13 index12 alt2"><code class="css spaces">    </code><code class="css keyword">position</code><code class="css plain">: </code><code class="css value">relative</code><code class="css plain">;</code></div><div class="line number14 index13 alt1"><code class="css spaces">    </code><code class="css keyword">cursor</code><code class="css plain">: </code><code class="css value">pointer</code><code class="css plain">;</code></div><div class="line number15 index14 alt2"><code class="css spaces">    </code><code class="css keyword">padding</code><code class="css plain">: </code><code class="css value">0</code><code class="css color3">!important</code><code class="css plain">;</code></div><div class="line number16 index15 alt1"><code class="css plain">}</code></div><div class="line number17 index16 alt2"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> .facebook,.googleplus,.rss,.twitter {</code></div><div class="line number18 index17 alt1"><code class="css spaces">    </code><code class="css keyword">position</code><code class="css plain">: </code><code class="css value">relative</code><code class="css plain">;</code></div><div class="line number19 index18 alt2"><code class="css spaces">    </code><code class="css plain">-moz-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">4</code><code class="css plain">s ease-in-out;</code></div><div class="line number20 index19 alt1"><code class="css spaces">    </code><code class="css plain">-webkit-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">4</code><code class="css plain">s ease-in-out;</code></div><div class="line number21 index20 alt2"><code class="css spaces">    </code><code class="css plain">-o-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">4</code><code class="css plain">s ease-in-out;</code></div><div class="line number22 index21 alt1"><code class="css spaces">    </code><code class="css plain">transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">4</code><code class="css plain">s ease-in-out;</code></div><div class="line number23 index22 alt2"><code class="css spaces">    </code><code class="css keyword">z-index</code><code class="css plain">: </code><code class="css value">5</code><code class="css plain">;</code></div><div class="line number24 index23 alt1"><code class="css spaces">    </code><code class="css keyword">display</code><code class="css plain">: </code><code class="css value">block</code><code class="css plain">;</code></div><div class="line number25 index24 alt2"><code class="css spaces">    </code><code class="css keyword">float</code><code class="css plain">: </code><code class="css value">left</code><code class="css plain">;</code></div><div class="line number26 index25 alt1"><code class="css spaces">    </code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">1px</code><code class="css plain">;</code></div><div class="line number27 index26 alt2"><code class="css plain">}</code></div><div class="line number28 index27 alt1"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> .</code><code class="css value">icon</code> <code class="css plain">{</code></div><div class="line number29 index28 alt2"><code class="css spaces">    </code><code class="css keyword">overflow</code><code class="css plain">: </code><code class="css value">hidden</code><code class="css plain">;</code></div><div class="line number30 index29 alt1"><code class="css plain">}</code></div><div class="line number31 index30 alt2"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> .facebook {</code></div><div class="line number32 index31 alt1"><code class="css spaces">    </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">147px</code><code class="css plain">;</code></div><div class="line number33 index32 alt2"><code class="css spaces">    </code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">150px</code><code class="css plain">;</code></div><div class="line number34 index33 alt1"><code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: rgba(</code><code class="css value">59</code><code class="css plain">,</code><code class="css value">89</code><code class="css plain">,</code><code class="css value">152</code><code class="css plain">,</code><code class="css value">1</code><code class="css plain">) </code><code class="css value">url</code><code class="css plain">(<a href="https://lh/">https://lh</a></code><code class="css value">4</code><code class="css plain">.googleusercontent.com/</code><code class="css value">-6</code><code class="css plain">tuOBGcpzGc/URPO_I</code><code class="css value">2</code><code class="css plain">Yj</code><code class="css value">9</code><code class="css plain">I/AAAAAAAAC_</code><code class="css value">0</code><code class="css plain">/qBm</code><code class="css value">56</code><code class="css plain">PAG</code><code class="css value">1</code><code class="css plain">yY/h</code><code class="css value">120</code><code class="css plain">/facebook.png) </code><code class="css value">no-repeat</code> <code class="css value">center</code> <code class="css value">center</code><code class="css plain">;</code></div><div class="line number35 index34 alt2"><code class="css plain">}</code></div><div class="line number36 index35 alt1"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> .twitter {</code></div><div class="line number37 index36 alt2"><code class="css spaces">    </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">148px</code><code class="css plain">;</code></div><div class="line number38 index37 alt1"><code class="css spaces">    </code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">74px</code><code class="css plain">;</code></div><div class="line number39 index38 alt2"><code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: rgba(</code><code class="css value">59</code><code class="css plain">,</code><code class="css value">89</code><code class="css plain">,</code><code class="css value">152</code><code class="css plain">,</code><code class="css value">1</code><code class="css plain">) </code><code class="css value">url</code><code class="css plain">(<a href="http:///">http://</a></code><code class="css value">3</code><code class="css plain">.bp.blogspot.com/-hak</code><code class="css value">4</code><code class="css plain">MMDUFy</code><code class="css value">0</code><code class="css plain">/UQNWX</code><code class="css value">7</code><code class="css plain">ZFzVI/AAAAAAAAFME/</code><code class="css value">1</code><code class="css value">-6</code><code class="css plain">Kt</code><code class="css value">65</code><code class="css plain">O</code><code class="css value">5</code><code class="css plain">Xk/s</code><code class="css value">1600</code><code class="css plain">/Twitter.png) </code><code class="css value">no-repeat</code> <code class="css value">center</code> <code class="css value">center</code><code class="css plain">;</code></div><div class="line number40 index39 alt1"><code class="css plain">}</code></div><div class="line number41 index40 alt2"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> .googleplus {</code></div><div class="line number42 index41 alt1"><code class="css spaces">    </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">148px</code><code class="css plain">;</code></div><div class="line number43 index42 alt2"><code class="css spaces">    </code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">74px</code><code class="css plain">;</code></div><div class="line number44 index43 alt1"><code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: rgba(</code><code class="css value">59</code><code class="css plain">,</code><code class="css value">89</code><code class="css plain">,</code><code class="css value">152</code><code class="css plain">,</code><code class="css value">1</code><code class="css plain">) </code><code class="css value">url</code><code class="css plain">(<a href="http:///">http://</a></code><code class="css value">2</code><code class="css plain">.bp.blogspot.com/-jeIkKF</code><code class="css value">52</code><code class="css plain">wSU/UQNX</code><code class="css value">5</code><code class="css plain">OwGt-I/AAAAAAAAFMc/xlLSwvc</code><code class="css value">24</code><code class="css plain">nk/s</code><code class="css value">1600</code><code class="css plain">/google+plus.png) </code><code class="css value">no-repeat</code> <code class="css value">center</code> <code class="css value">center</code><code class="css plain">;</code></div><div class="line number45 index44 alt2"><code class="css plain">}</code></div><div class="line number46 index45 alt1"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> .rss {</code></div><div class="line number47 index46 alt2"><code class="css spaces">    </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">299px</code><code class="css plain">;</code></div><div class="line number48 index47 alt1"><code class="css spaces">    </code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">74px</code><code class="css plain">;</code></div><div class="line number49 index48 alt2"><code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: rgba(</code><code class="css value">59</code><code class="css plain">,</code><code class="css value">89</code><code class="css plain">,</code><code class="css value">152</code><code class="css plain">,</code><code class="css value">1</code><code class="css plain">) </code><code class="css value">url</code><code class="css plain">(<a href="http:///">http://</a></code><code class="css value">4</code><code class="css plain">.bp.blogspot.com/-Ebrw</code><code class="css value">9</code><code class="css plain">duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/s</code><code class="css value">1600</code><code class="css plain">/rss.png) </code><code class="css value">no-repeat</code> <code class="css value">center</code> <code class="css value">center</code><code class="css plain">;</code></div><div class="line number50 index49 alt1"><code class="css plain">}</code></div><div class="line number51 index50 alt2"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> li:hover .facebook {</code></div><div class="line number52 index51 alt1"><code class="css spaces">    </code><code class="css keyword">background-color</code><code class="css plain">: </code><code class="css value">#3468B6</code><code class="css plain">;</code></div><div class="line number53 index52 alt2"><code class="css spaces">    </code><code class="css plain">-moz-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">1</code><code class="css plain">s ease-in-out;</code></div><div class="line number54 index53 alt1"><code class="css spaces">    </code><code class="css plain">-webkit-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">1</code><code class="css plain">s ease-in-out;</code></div><div class="line number55 index54 alt2"><code class="css plain">}</code></div><div class="line number56 index55 alt1"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> li:hover .twitter {</code></div><div class="line number57 index56 alt2"><code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: rgba(</code><code class="css value">64</code><code class="css plain">,</code><code class="css value">153</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">1</code><code class="css plain">) </code><code class="css value">url</code><code class="css plain">(<a href="https://lh/">https://lh</a></code><code class="css value">6</code><code class="css plain">.googleusercontent.com/-gp</code><code class="css value">5</code><code class="css plain">q_y</code><code class="css value">7</code><code class="css plain">kibQ/URPO_I</code><code class="css value">6</code><code class="css plain">-sKI/AAAAAAAAC_w/twhFzlX</code><code class="css value">2</code><code class="css plain">p</code><code class="css value">1</code><code class="css plain">c/h</code><code class="css value">120</code><code class="css plain">/Twitter.png) </code><code class="css value">no-repeat</code> <code class="css value">center</code> <code class="css value">center</code><code class="css plain">;</code></div><div class="line number58 index57 alt1"><code class="css spaces">    </code><code class="css plain">-moz-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">1</code><code class="css plain">s ease-in-out;</code></div><div class="line number59 index58 alt2"><code class="css spaces">    </code><code class="css plain">-webkit-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">1</code><code class="css plain">s ease-in-out;</code></div><div class="line number60 index59 alt1"><code class="css plain">}</code></div><div class="line number61 index60 alt2"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> li:hover .googleplus {</code></div><div class="line number62 index61 alt1"><code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: rgba(</code><code class="css value">228</code><code class="css plain">,</code><code class="css value">69</code><code class="css plain">,</code><code class="css value">36</code><code class="css plain">,</code><code class="css value">1</code><code class="css plain">) </code><code class="css value">url</code><code class="css plain">(<a href="https://lh/">https://lh</a></code><code class="css value">6</code><code class="css plain">.googleusercontent.com/</code><code class="css value">-5</code><code class="css value">-00</code><code class="css plain">TE</code><code class="css value">6</code><code class="css plain">gtvM/URPO_ALyNwI/AAAAAAAAC_</code><code class="css value">4</code><code class="css plain">/A</code><code class="css value">4</code><code class="css plain">Dr</code><code class="css value">7</code><code class="css plain">Hg</code><code class="css value">7</code><code class="css plain">C</code><code class="css value">6</code><code class="css plain">A/h</code><code class="css value">120</code><code class="css plain">/google+plus.png) </code><code class="css value">no-repeat</code> <code class="css value">center</code> <code class="css value">center</code><code class="css plain">;</code></div><div class="line number63 index62 alt2"><code class="css spaces">    </code><code class="css plain">-moz-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">1</code><code class="css plain">s ease-in-out;</code></div><div class="line number64 index63 alt1"><code class="css spaces">    </code><code class="css plain">-webkit-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">1</code><code class="css plain">s ease-in-out;</code></div><div class="line number65 index64 alt2"><code class="css plain">}</code></div><div class="line number66 index65 alt1"><code class="css plain">#supportive</code><code class="css plain"><code class="css plain">-seohtc</code> li:hover .rss {</code></div><div class="line number67 index66 alt2"><code class="css spaces">    </code><code class="css keyword">background</code><code class="css plain">: rgba(</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">102</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">1</code><code class="css plain">) </code><code class="css value">url</code><code class="css plain">(<a href="https://lh/">https://lh</a></code><code class="css value">4</code><code class="css plain">.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S</code><code class="css value">2</code><code class="css plain">lzrz</code><code class="css value">6</code><code class="css plain">uZ</code><code class="css value">0</code><code class="css plain">c/h</code><code class="css value">120</code><code class="css plain">/rss.png) </code><code class="css value">no-repeat</code> <code class="css value">center</code> <code class="css value">center</code><code class="css plain">;</code></div><div class="line number68 index67 alt1"><code class="css spaces">    </code><code class="css plain">-moz-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">1</code><code class="css plain">s ease-in-out;</code></div><div class="line number69 index68 alt2"><code class="css spaces">    </code><code class="css plain">-webkit-transition: </code><code class="css value">all</code> <code class="css plain">.</code><code class="css value">1</code><code class="css plain">s ease-in-out;</code></div><div class="line number70 index69 alt1"><code class="css plain">}</code></div></div><ul><li>kemudian masuk kemenu</li><li>add widget >> HTML/javascript</li><li>pastekan kode berikut</li></ul><br /><div class="container"><div class="line number1 index0 alt2"><code class="css plain"><ul id=</code><code class="css string">'</code><code class="css plain">supportive-seohtc</code><code class="css string">'</code><code class="css plain">></code></div><div class="line number2 index1 alt1"><code class="css plain"><li><a class=</code><code class="css string">'icon facebook'</code> <code class="css plain">href=</code><code class="css string">'<a href="http://www.facebook.com/FaceBookPage/">http://www.facebook.com/FaceBookPage/</a>'</code><code class="css plain">/></a></li></code></div><div class="line number3 index2 alt2"><code class="css plain"><li><a class=</code><code class="css string">'icon twitter'</code> <code class="css plain">href=</code><code class="css string">'<a href="http://twitter.com/TwitterUserName">http://twitter.com/TwitterUserName</a>'</code><code class="css plain">/></a></li></code></div><div class="line number4 index3 alt1"><code class="css plain"><li><a class=</code><code class="css string">'icon googleplus'</code> <code class="css plain">href=</code><code class="css string">'<a href="https://plus.google.com/GooglePlusUserID/">https://plus.google.com/GooglePlusUserID/</a>'</code><code class="css plain">/></a></li></code></div><div class="line number5 index4 alt2"><code class="css plain"><li><a class=</code><code class="css string">'icon rss'</code> <code class="css plain">href=</code><code class="css string">'<a href="http://feeds.feedburner.com/FeedBurnerUserName">http://feeds.feedburner.com/FeedBurnerUserName</a>'</code><code class="css plain">/></a></li></code></div><div class="line number6 index5 alt1"><code class="css plain"></ul>     </code></div></div><pre class="brush:html;"></pre><ul><li><b>Note : <span style="color: red;">ganti link dengan link akun anda.</span></b></li><li><b>simpan perubahan</b></li><li><b>lalu lihat hasilnya</b></li></ul><br />~ Happy Blogging - Ega Ariya Dirgantara ~

WIDGET

Widget share metro button style css3 - kali ini kita akan membuat widget share/like dengan style metro button css3 .untuk lebih jelasnya si...

Search box keren css3

Posted by Unknown at 2:53 AM

<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/AVvXsEiv3J3ZQaDjXEis1Z9_k-6SU-Knb6Q8tTuU12lKqs7Ilq4dt7wa6BScM-EanGMAYw_WYObb0ljEVmyDHA4LhkWmNjsvODUZhpRh0RtNOBrAEI7mKTFZww-bEKOGqy_U1r6jTjk_ARiF8PY/s1600/css-search-box.png" style="margin-left: auto; margin-right: auto;"><img alt="Professional Style CSS3 Search Box " border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv3J3ZQaDjXEis1Z9_k-6SU-Knb6Q8tTuU12lKqs7Ilq4dt7wa6BScM-EanGMAYw_WYObb0ljEVmyDHA4LhkWmNjsvODUZhpRh0RtNOBrAEI7mKTFZww-bEKOGqy_U1r6jTjk_ARiF8PY/s1600/css-search-box.png" title="Professional Style CSS3 Search Box for Blog/Website" width="174" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Search box css3</td></tr></tbody></table><div class="separator" style="clear: both; text-align: center;"></div><a href="http://seohtc.blogspot.com/2013/03/search-box-keren-css3.html"><i><b>Search box css3</b></i></a> - Hai sobat blogger ? jumpa lagi dengan saya.kali ini saya akan shrae trik membuat kotak search dengan css3.penasaran ingin membuat ? cara membuatnya cukup mudah kok.setelah sebelumnya saya share <a href="http://seohtc.blogspot.com/2013/03/google-button-style-css3.html">cara membuat button ala google+</a> ,,nah bagaimana,,sudah siap untuk membuat ?<br /><a name="more"></a><h2><b>Hasil :</b></h2><br /><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="http://bloggertrixdemo.blogspot.in/2012/08/search-form-background-e1e1e1-fallback.html" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Css3 search box for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhIjHQa_DOQQ3Lgf9ozuM4UqLnsFOBYDxc6ZE_tI7B07LCtNm8tX-_0gwCuTKEuCn5zf3kWfXI2Q7XSXxUXQn22slkH1D1uj2mAcYp4UhWdwQBn6-5yV8FaabKkGaCRxtqK5qCoHVejQE/s1600/css3-search-box.png" title="" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><i><b>Hasil Tutorial</b></i></td></tr></tbody></table><div class="separator" style="clear: both; text-align: center;"></div><h2><b><span style="font-weight: normal;">Tutorial :</span></b></h2><ul><li><b>masuk akun blogger</b></li><li><b>lalu ke edit add widget >> HTML/javascript</b></li><li><b>pastekan kode berikut :</b></li></ul><br /><pre data-codetype="HTML"><div class="container"><br /><div class="line number1 index0 alt2"><br /><code class="css plain"><style></code></div><br /><div class="line number2 index1 alt1"><br /><code class="css plain">#search-form {</code></div><br /><div class="line number3 index2 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#e1e1e1</code><code class="css plain">; </code><code class="css comments">/* Fallback color for non-css3 browsers */</code></div><br /><div class="line number4 index3 alt1"><br /><code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">365px</code><code class="css plain">;</code></div><br /><div class="line number5 index4 alt2"><br /></div><br /><div class="line number6 index5 alt1"><br /><code class="css spaces"> </code><code class="css comments">/* Gradients */</code></div><br /><div class="line number7 index6 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -webkit-gradient( linear,</code><code class="css value">left</code> <code class="css value">top</code><code class="css plain">, </code><code class="css value">left</code> <code class="css value">bottom</code><code class="css plain">, color-stop(</code><code class="css value">0</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">243</code><code class="css plain">,</code><code class="css value">243</code><code class="css plain">,</code><code class="css value">243</code><code class="css plain">)), color-stop(</code><code class="css value">1</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">225</code><code class="css plain">,</code><code class="css value">225</code><code class="css plain">,</code><code class="css value">225</code><code class="css plain">)));</code></div><br /><div class="line number8 index7 alt1"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -moz-linear-gradient( </code><code class="css value">center</code> <code class="css value">top</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">243</code><code class="css plain">,</code><code class="css value">243</code><code class="css plain">,</code><code class="css value">243</code><code class="css plain">) </code><code class="css value">0%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">225</code><code class="css plain">,</code><code class="css value">225</code><code class="css plain">,</code><code class="css value">225</code><code class="css plain">) </code><code class="css value">100%</code><code class="css plain">);</code></div><br /><div class="line number9 index8 alt2"><br /></div><br /><div class="line number10 index9 alt1"><br /><code class="css spaces"> </code><code class="css comments">/* Rounded Corners */</code></div><br /><div class="line number11 index10 alt2"><br /><code class="css spaces"> </code><code class="css plain">border-radius: </code><code class="css value">17px</code><code class="css plain">;</code></div><br /><div class="line number12 index11 alt1"><br /><code class="css spaces"> </code><code class="css plain">-webkit-border-radius: </code><code class="css value">17px</code><code class="css plain">;</code></div><br /><div class="line number13 index12 alt2"><br /><code class="css spaces"> </code><code class="css plain">-moz-border-radius: </code><code class="css value">17px</code><code class="css plain">;</code></div><br /><div class="line number14 index13 alt1"><br /></div><br /><div class="line number15 index14 alt2"><br /><code class="css spaces"> </code><code class="css comments">/* Shadows */</code></div><br /><div class="line number16 index15 alt1"><br /><code class="css spaces"> </code><code class="css plain">box-shadow: </code><code class="css value">1px</code> <code class="css value">1px</code> <code class="css value">2px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">), </code><code class="css value">0</code> <code class="css value">0</code> <code class="css value">2px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">);</code></div><br /><div class="line number17 index16 alt2"><br /><code class="css spaces"> </code><code class="css plain">-webkit-box-shadow: </code><code class="css value">1px</code> <code class="css value">1px</code> <code class="css value">2px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">), </code><code class="css value">0</code> <code class="css value">0</code> <code class="css value">2px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">);</code></div><br /><div class="line number18 index17 alt1"><br /><code class="css spaces"> </code><code class="css plain">-moz-box-shadow: </code><code class="css value">1px</code> <code class="css value">1px</code> <code class="css value">2px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">), </code><code class="css value">0</code> <code class="css value">0</code> <code class="css value">2px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">);</code></div><br /><div class="line number19 index18 alt2"><br /><code class="css plain">}</code></div><br /><div class="line number20 index19 alt1"><br /></div><br /><div class="line number21 index20 alt2"><br /><code class="css comments">/*** TEXT BOX ***/</code></div><br /><div class="line number22 index21 alt1"><br /><code class="css plain">input[type=</code><code class="css string">"text"</code><code class="css plain">]{</code></div><br /><div class="line number23 index22 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#fafafa</code><code class="css plain">; </code><code class="css comments">/* Fallback color for non-css3 browsers */</code></div><br /><div class="line number24 index23 alt1"><br /></div><br /><div class="line number25 index24 alt2"><br /><code class="css spaces"> </code><code class="css comments">/* Gradients */</code></div><br /><div class="line number26 index25 alt1"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -webkit-gradient( linear, </code><code class="css value">left</code> <code class="css value">bottom</code><code class="css plain">, </code><code class="css value">left</code> <code class="css value">top</code><code class="css plain">, color-stop(</code><code class="css value">0</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">250</code><code class="css plain">,</code><code class="css value">250</code><code class="css plain">,</code><code class="css value">250</code><code class="css plain">)), color-stop(</code><code class="css value">1</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">230</code><code class="css plain">,</code><code class="css value">230</code><code class="css plain">,</code><code class="css value">230</code><code class="css plain">)));</code></div><br /><div class="line number27 index26 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -moz-linear-gradient( </code><code class="css value">center</code> <code class="css value">top</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">250</code><code class="css plain">,</code><code class="css value">250</code><code class="css plain">,</code><code class="css value">250</code><code class="css plain">) </code><code class="css value">0%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">230</code><code class="css plain">,</code><code class="css value">230</code><code class="css plain">,</code><code class="css value">230</code><code class="css plain">) </code><code class="css value">100%</code><code class="css plain">);</code></div><br /><div class="line number28 index27 alt1"><br /></div><br /><div class="line number29 index28 alt2"><br /><code class="css spaces"> </code><code class="css keyword">border</code><code class="css plain">: </code><code class="css value">0</code><code class="css plain">;</code></div><br /><div class="line number30 index29 alt1"><br /><code class="css spaces"> </code><code class="css keyword">border-bottom</code><code class="css plain">: </code><code class="css value">1px</code> <code class="css value">solid</code> <code class="css value">#fff</code><code class="css plain">;</code></div><br /><div class="line number31 index30 alt2"><br /><code class="css spaces"> </code><code class="css keyword">border-right</code><code class="css plain">: </code><code class="css value">1px</code> <code class="css value">solid</code> <code class="css plain">rgba(</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,.</code><code class="css value">8</code><code class="css plain">);</code></div><br /><div class="line number32 index31 alt1"><br /><code class="css spaces"> </code><code class="css keyword">font-size</code><code class="css plain">: </code><code class="css value">16px</code><code class="css plain">;</code></div><br /><div class="line number33 index32 alt2"><br /><code class="css spaces"> </code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">4px</code><code class="css plain">;</code></div><br /><div class="line number34 index33 alt1"><br /><code class="css spaces"> </code><code class="css keyword">padding</code><code class="css plain">: </code><code class="css value">5px</code><code class="css plain">;</code></div><br /><div class="line number35 index34 alt2"><br /><code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">250px</code><code class="css plain">;</code></div><br /><div class="line number36 index35 alt1"><br /></div><br /><div class="line number37 index36 alt2"><br /><code class="css spaces"> </code><code class="css comments">/* Rounded Corners */</code></div><br /><div class="line number38 index37 alt1"><br /><code class="css spaces"> </code><code class="css plain">border-radius: </code><code class="css value">17px</code><code class="css plain">;</code></div><br /><div class="line number39 index38 alt2"><br /><code class="css spaces"> </code><code class="css plain">-webkit-border-radius: </code><code class="css value">17px</code><code class="css plain">;</code></div><br /><div class="line number40 index39 alt1"><br /><code class="css spaces"> </code><code class="css plain">-moz-border-radius: </code><code class="css value">17px</code><code class="css plain">;</code></div><br /><div class="line number41 index40 alt2"><br /></div><br /><div class="line number42 index41 alt1"><br /><code class="css spaces"> </code><code class="css comments">/* Shadows */</code></div><br /><div class="line number43 index42 alt2"><br /><code class="css spaces"> </code><code class="css plain">box-shadow: </code><code class="css value">-1px</code> <code class="css value">-1px</code> <code class="css value">2px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">), </code><code class="css value">0</code> <code class="css value">0</code> <code class="css value">1px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">2</code><code class="css plain">);</code></div><br /><div class="line number44 index43 alt1"><br /><code class="css spaces"> </code><code class="css plain">-webkit-box-shadow: </code><code class="css value">-1px</code> <code class="css value">-1px</code> <code class="css value">2px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">), </code><code class="css value">0</code> <code class="css value">0</code> <code class="css value">1px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">2</code><code class="css plain">);</code></div><br /><div class="line number45 index44 alt2"><br /><code class="css spaces"> </code><code class="css plain">-moz-box-shadow: </code><code class="css value">-1px</code> <code class="css value">-1px</code> <code class="css value">2px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">), </code><code class="css value">0</code> <code class="css value">0</code> <code class="css value">1px</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">2</code><code class="css plain">);</code></div><br /><div class="line number46 index45 alt1"><br /><code class="css plain">}</code></div><br /><div class="line number47 index46 alt2"><br /></div><br /><div class="line number48 index47 alt1"><br /><code class="css comments">/*** USER IS FOCUSED ON TEXT BOX ***/</code></div><br /><div class="line number49 index48 alt2"><br /><code class="css plain">input[type=</code><code class="css string">"text"</code><code class="css plain">]:focus{</code></div><br /><div class="line number50 index49 alt1"><br /><code class="css spaces"> </code><code class="css keyword">outline</code><code class="css plain">: </code><code class="css value">none</code><code class="css plain">;</code></div><br /><div class="line number51 index50 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#fff</code><code class="css plain">; </code><code class="css comments">/* Fallback color for non-css3 browsers */</code></div><br /><div class="line number52 index51 alt1"><br /></div><br /><div class="line number53 index52 alt2"><br /><code class="css spaces"> </code><code class="css comments">/* Gradients */</code></div><br /><div class="line number54 index53 alt1"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -webkit-gradient( linear, </code><code class="css value">left</code> <code class="css value">bottom</code><code class="css plain">, </code><code class="css value">left</code> <code class="css value">top</code><code class="css plain">, color-stop(</code><code class="css value">0</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">)), color-stop(</code><code class="css value">1</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">235</code><code class="css plain">,</code><code class="css value">235</code><code class="css plain">,</code><code class="css value">235</code><code class="css plain">)));</code></div><br /><div class="line number55 index54 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -moz-linear-gradient( </code><code class="css value">center</code> <code class="css value">top</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">) </code><code class="css value">0%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">235</code><code class="css plain">,</code><code class="css value">235</code><code class="css plain">,</code><code class="css value">235</code><code class="css plain">) </code><code class="css value">100%</code><code class="css plain">);</code></div><br /><div class="line number56 index55 alt1"><br /><code class="css plain">}</code></div><br /><div class="line number57 index56 alt2"><br /></div><br /><div class="line number58 index57 alt1"><br /><code class="css comments">/*** SEARCH BUTTON ***/</code></div><br /><div class="line number59 index58 alt2"><br /><code class="css plain">input[type=</code><code class="css string">"submit"</code><code class="css plain">]{</code></div><br /><div class="line number60 index59 alt1"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#44921f</code><code class="css plain">;</code><code class="css comments">/* Fallback color for non-css3 browsers */</code></div><br /><div class="line number61 index60 alt2"><br /></div><br /><div class="line number62 index61 alt1"><br /><code class="css spaces"> </code><code class="css comments">/* Gradients */</code></div><br /><div class="line number63 index62 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -webkit-gradient( linear, </code><code class="css value">left</code> <code class="css value">top</code><code class="css plain">, </code><code class="css value">left</code> <code class="css value">bottom</code><code class="css plain">, color-stop(</code><code class="css value">0</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">79</code><code class="css plain">,</code><code class="css value">188</code><code class="css plain">,</code><code class="css value">32</code><code class="css plain">)), color-stop(</code><code class="css value">0.15</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">73</code><code class="css plain">,</code><code class="css value">157</code><code class="css plain">,</code><code class="css value">34</code><code class="css plain">)), color-stop(</code><code class="css value">0.88</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">62</code><code class="css plain">,</code><code class="css value">135</code><code class="css plain">,</code><code class="css value">28</code><code class="css plain">)), color-stop(</code><code class="css value">1</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">49</code><code class="css plain">,</code><code class="css value">114</code><code class="css plain">,</code><code class="css value">21</code><code class="css plain">)));</code></div><br /><div class="line number64 index63 alt1"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -moz-linear-gradient( </code><code class="css value">center</code> <code class="css value">top</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">79</code><code class="css plain">,</code><code class="css value">188</code><code class="css plain">,</code><code class="css value">32</code><code class="css plain">) </code><code class="css value">0%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">73</code><code class="css plain">,</code><code class="css value">157</code><code class="css plain">,</code><code class="css value">34</code><code class="css plain">) </code><code class="css value">15%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">62</code><code class="css plain">,</code><code class="css value">135</code><code class="css plain">,</code><code class="css value">28</code><code class="css plain">) </code><code class="css value">88%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">49</code><code class="css plain">,</code><code class="css value">114</code><code class="css plain">,</code><code class="css value">21</code><code class="css plain">) </code><code class="css value">100%</code><code class="css plain">);</code></div><br /><div class="line number65 index64 alt2"><br /></div><br /><div class="line number66 index65 alt1"><br /><code class="css spaces"> </code><code class="css keyword">border</code><code class="css plain">: </code><code class="css value">0</code><code class="css plain">;</code></div><br /><div class="line number67 index66 alt2"><br /><code class="css spaces"> </code><code class="css keyword">color</code><code class="css plain">: </code><code class="css value">#eee</code><code class="css plain">;</code></div><br /><div class="line number68 index67 alt1"><br /><code class="css spaces"> </code><code class="css keyword">cursor</code><code class="css plain">: </code><code class="css value">pointer</code><code class="css plain">;</code></div><br /><div class="line number69 index68 alt2"><br /><code class="css spaces"> </code><code class="css keyword">float</code><code class="css plain">: </code><code class="css value">right</code><code class="css plain">;</code></div><br /><div class="line number70 index69 alt1"><br /><code class="css spaces"> </code><code class="css keyword">font</code><code class="css plain">: </code><code class="css value">16px</code> <code class="css color1">Arial</code><code class="css plain">, </code><code class="css color1">Helvetica</code><code class="css plain">, </code><code class="css color1">sans-serif</code><code class="css plain">;</code></div><br /><div class="line number71 index70 alt2"><br /><code class="css spaces"> </code><code class="css keyword">font-weight</code><code class="css plain">: </code><code class="css value">bold</code><code class="css plain">;</code></div><br /><div class="line number72 index71 alt1"><br /><code class="css spaces"> </code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">30px</code><code class="css plain">;</code></div><br /><div class="line number73 index72 alt2"><br /><code class="css spaces"> </code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">4px</code> <code class="css value">4px</code> <code class="css value">0</code><code class="css plain">;</code></div><br /><div class="line number74 index73 alt1"><br /><code class="css spaces"> </code><code class="css keyword">text-shadow</code><code class="css plain">: </code><code class="css value">0</code> <code class="css value">-1px</code> <code class="css value">0</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">3</code><code class="css plain">);</code></div><br /><div class="line number75 index74 alt2"><br /><code class="css spaces"> </code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">84px</code><code class="css plain">;</code></div><br /><div class="line number76 index75 alt1"><br /><code class="css spaces"> </code><code class="css keyword">outline</code><code class="css plain">: </code><code class="css value">none</code><code class="css plain">;</code></div><br /><div class="line number77 index76 alt2"><br /></div><br /><div class="line number78 index77 alt1"><br /><code class="css spaces"> </code><code class="css comments">/* Rounded Corners */</code></div><br /><div class="line number79 index78 alt2"><br /><code class="css spaces"> </code><code class="css plain">border-radius: </code><code class="css value">30px</code><code class="css plain">;</code></div><br /><div class="line number80 index79 alt1"><br /><code class="css spaces"> </code><code class="css plain">-webkit-border-radius: </code><code class="css value">30px</code><code class="css plain">;</code></div><br /><div class="line number81 index80 alt2"><br /><code class="css spaces"> </code><code class="css plain">-moz-border-radius: </code><code class="css value">30px</code><code class="css plain">;</code></div><br /><div class="line number82 index81 alt1"><br /></div><br /><div class="line number83 index82 alt2"><br /><code class="css spaces"> </code><code class="css comments">/* Shadows */</code></div><br /><div class="line number84 index83 alt1"><br /><code class="css spaces"> </code><code class="css plain">box-shadow: </code><code class="css value">-1px</code> <code class="css value">-1px</code> <code class="css value">1px</code> <code class="css plain">rgba(</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,.</code><code class="css value">5</code><code class="css plain">), </code><code class="css value">1px</code> <code class="css value">1px</code> <code class="css value">0</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">4</code><code class="css plain">);</code></div><br /><div class="line number85 index84 alt2"><br /><code class="css spaces"> </code><code class="css plain">-moz-box-shadow: </code><code class="css value">-1px</code> <code class="css value">-1px</code> <code class="css value">1px</code> <code class="css plain">rgba(</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,.</code><code class="css value">5</code><code class="css plain">), </code><code class="css value">1px</code> <code class="css value">1px</code> <code class="css value">0</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">2</code><code class="css plain">);</code></div><br /><div class="line number86 index85 alt1"><br /><code class="css spaces"> </code><code class="css plain">-webkit-box-shadow: </code><code class="css value">-1px</code> <code class="css value">-1px</code> <code class="css value">1px</code> <code class="css plain">rgba(</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,</code><code class="css value">255</code><code class="css plain">,.</code><code class="css value">5</code><code class="css plain">), </code><code class="css value">1px</code> <code class="css value">1px</code> <code class="css value">0</code> <code class="css plain">rgba(</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,</code><code class="css value">0</code><code class="css plain">,.</code><code class="css value">4</code><code class="css plain">);</code></div><br /><div class="line number87 index86 alt2"><br /><code class="css plain">}</code></div><br /><div class="line number88 index87 alt1"><br /><code class="css comments">/*** SEARCH BUTTON HOVER ***/</code></div><br /><div class="line number89 index88 alt2"><br /><code class="css plain">input[type=</code><code class="css string">"submit"</code><code class="css plain">]:hover {</code></div><br /><div class="line number90 index89 alt1"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#4ea923</code><code class="css plain">; </code><code class="css comments">/* Fallback color for non-css3 browsers */</code></div><br /><div class="line number91 index90 alt2"><br /></div><br /><div class="line number92 index91 alt1"><br /><code class="css spaces"> </code><code class="css comments">/* Gradients */</code></div><br /><div class="line number93 index92 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -webkit-gradient( linear, </code><code class="css value">left</code> <code class="css value">top</code><code class="css plain">, </code><code class="css value">left</code> <code class="css value">bottom</code><code class="css plain">, color-stop(</code><code class="css value">0</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">89</code><code class="css plain">,</code><code class="css value">222</code><code class="css plain">,</code><code class="css value">27</code><code class="css plain">)), color-stop(</code><code class="css value">0.15</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">83</code><code class="css plain">,</code><code class="css value">179</code><code class="css plain">,</code><code class="css value">38</code><code class="css plain">)), color-stop(</code><code class="css value">0.8</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">66</code><code class="css plain">,</code><code class="css value">143</code><code class="css plain">,</code><code class="css value">27</code><code class="css plain">)), color-stop(</code><code class="css value">1</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">54</code><code class="css plain">,</code><code class="css value">120</code><code class="css plain">,</code><code class="css value">22</code><code class="css plain">)));</code></div><br /><div class="line number94 index93 alt1"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -moz-linear-gradient( </code><code class="css value">center</code> <code class="css value">top</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">89</code><code class="css plain">,</code><code class="css value">222</code><code class="css plain">,</code><code class="css value">27</code><code class="css plain">) </code><code class="css value">0%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">83</code><code class="css plain">,</code><code class="css value">179</code><code class="css plain">,</code><code class="css value">38</code><code class="css plain">) </code><code class="css value">15%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">66</code><code class="css plain">,</code><code class="css value">143</code><code class="css plain">,</code><code class="css value">27</code><code class="css plain">) </code><code class="css value">80%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">54</code><code class="css plain">,</code><code class="css value">120</code><code class="css plain">,</code><code class="css value">22</code><code class="css plain">) </code><code class="css value">100%</code><code class="css plain">);</code></div><br /><div class="line number95 index94 alt2"><br /><code class="css plain">}</code></div><br /><div class="line number96 index95 alt1"><br /><code class="css plain">input[type=</code><code class="css string">"submit"</code><code class="css plain">]:active {</code></div><br /><div class="line number97 index96 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: </code><code class="css value">#4ea923</code><code class="css plain">; </code><code class="css comments">/* Fallback color for non-css3 browsers */</code></div><br /><div class="line number98 index97 alt1"><br /></div><br /><div class="line number99 index98 alt2"><br /><code class="css spaces"> </code><code class="css comments">/* Gradients */</code></div><br /><div class="line number100 index99 alt1"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -webkit-gradient( linear, </code><code class="css value">left</code> <code class="css value">bottom</code><code class="css plain">, </code><code class="css value">left</code> <code class="css value">top</code><code class="css plain">, color-stop(</code><code class="css value">0</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">89</code><code class="css plain">,</code><code class="css value">222</code><code class="css plain">,</code><code class="css value">27</code><code class="css plain">)), color-stop(</code><code class="css value">0.15</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">83</code><code class="css plain">,</code><code class="css value">179</code><code class="css plain">,</code><code class="css value">38</code><code class="css plain">)), color-stop(</code><code class="css value">0.8</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">66</code><code class="css plain">,</code><code class="css value">143</code><code class="css plain">,</code><code class="css value">27</code><code class="css plain">)), color-stop(</code><code class="css value">1</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">54</code><code class="css plain">,</code><code class="css value">120</code><code class="css plain">,</code><code class="css value">22</code><code class="css plain">)));</code></div><br /><div class="line number101 index100 alt2"><br /><code class="css spaces"> </code><code class="css keyword">background</code><code class="css plain">: -moz-linear-gradient( </code><code class="css value">center</code> <code class="css value">bottom</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">89</code><code class="css plain">,</code><code class="css value">222</code><code class="css plain">,</code><code class="css value">27</code><code class="css plain">) </code><code class="css value">0%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">83</code><code class="css plain">,</code><code class="css value">179</code><code class="css plain">,</code><code class="css value">38</code><code class="css plain">) </code><code class="css value">15%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">66</code><code class="css plain">,</code><code class="css value">143</code><code class="css plain">,</code><code class="css value">27</code><code class="css plain">) </code><code class="css value">80%</code><code class="css plain">, </code><code class="css value">rgb</code><code class="css plain">(</code><code class="css value">54</code><code class="css plain">,</code><code class="css value">120</code><code class="css plain">,</code><code class="css value">22</code><code class="css plain">) </code><code class="css value">100%</code><code class="css plain">);</code></div><br /><div class="line number102 index101 alt1"><br /><code class="css plain">}</code></div><br /><div class="line number103 index102 alt2"><br /><code class="css spaces">  </code> </div><br /><div class="line number104 index103 alt1"><br /><code class="css plain"></style></code></div><br /><div class="line number105 index104 alt2"><br /></div><br /><div class="line number106 index105 alt1"><br /><code class="css plain"><form action=</code><code class="css string">"URL Of the Page Where the Result Appear"</code> <code class="css plain">id=</code><code class="css string">"searchbox"</code><code class="css plain">></code></div><br /><div class="line number107 index106 alt2"><br /><code class="css plain"><input name=</code><code class="css string">"cx"</code> <code class="css plain">type=</code><code class="css string">"hidden"</code> <code class="css plain">value=</code><code class="css string">"X:Y"</code> <code class="css plain">/> </code></div><br /><div class="line number108 index107 alt1"><br /><code class="css plain"><input name=</code><code class="css string">"cof"</code> <code class="css plain">type=</code><code class="css string">"hidden"</code> <code class="css plain">value=</code><code class="css string">"FORID:11"</code> <code class="css plain">/> </code></div><br /><div class="line number109 index108 alt2"><br /><code class="css plain"><input id=</code><code class="css string">"q"</code> <code class="css plain">name=</code><code class="css string">"q"</code> <code class="css plain">size=</code><code class="css string">"70"</code> <code class="css plain">type=</code><code class="css string">"text"</code> <code class="css plain">/> </code></div><br /><div class="line number110 index109 alt1"><br /><code class="css plain"><input name=</code><code class="css string">"sa"</code> <code class="css plain">type=</code><code class="css string">"submit"</code> <code class="css plain">value=</code><code class="css string">"Search"</code> <code class="css plain">/> </form></code></div><br /></div><br /></pre><ul><li><b>simpan perubahan</b></li><li><b>lihat hasilnya.</b></li></ul><br /><b>bagaimana ? mudah kan ?</b><br /><br /><b>~ <span style="color: #38761d;">Happy Blogging</span> - <span style="color: #0b5394;">Ega Ariya Dirgantara</span> ~</b><br /><br />

WIDGET

Search box css3 Search box css3 - Hai sobat blogger ? jumpa lagi dengan saya.kali ini saya akan shrae trik membuat kotak search dengan css3...

Google+ Button Style CSS3

Posted by Unknown at 2:39 AM

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bxXSpdVFJXfWxxZqlAs63Gid7CBhgae79QOkpaEycLTWi4hawWVM2o2TBuCyT1boYA_nA_BD02yVzQhkEjFJNKazUdarN7rw8Zn6HywTfpQ_A0fy5K25sgQ2koOpECi5KS1joyZnXhA/s1600/Google+-buttons.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Google plus style buttons" border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bxXSpdVFJXfWxxZqlAs63Gid7CBhgae79QOkpaEycLTWi4hawWVM2o2TBuCyT1boYA_nA_BD02yVzQhkEjFJNKazUdarN7rw8Zn6HywTfpQ_A0fy5K25sgQ2koOpECi5KS1joyZnXhA/s1600/Google+-buttons.png" title="Google+ Style Save, Upload, Comment & Cancel Buttons for Blogger Blog" width="174" /></a></div><div class="separator" style="clear: both; text-align: center;"></div><a href="http://seohtc.blogspot.com/2013/03/google-button-style-css3.html"><i><b>Google+ Button style css3</b></i></a> - adalah projek saya yang pertama,nah demonya adalah seperti screenshots tersebut.saya akan share caranya.cara ini juga termasuk tutorial <a href="http://seohtc.blogspot.com/2013/03/google-button-style-css3.html">css3</a>,mau tau bagaimana caranya ? silahkan simak tutorial berikut untuk membuatnya.<br /><br /><a name="more"></a><h2><b>Screen :</b></h2><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://lsdemoblog.blogspot.in/2012/09/google-plus-style-buttons-demo-wrapper.html" target="_blank"><img alt="Google style buttons for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiimVlCC42wXj6v8EQwgSc_LR6Mz57ov2T3mGDRaxWNth7dyq0VbW3xBsHA76Rf4hWd1JvSbOG8Vwo2qvoSR_ZxJSkxZE3l3UnGjk0GQk83yXS5KEbEE-btA2PGo8XDHxlBttaDwDP2wgs/s1600/Google-style-buttons.png" title="Click on this image to feel the buttons in action" /></a></div><br /><h2><b>Tutorial :</b></h2><ul><li>masuk akun blogger</li><li>masuk edit html >> "expand template widget"</li><li>lalu pastekan kode dibawah ini diatas kode <span style="color: red;"><span style="font-family: "Courier New",Courier,monospace;">]]></b:skin></span></span></li></ul><br /><pre data-codetype="CSS"><br />/* button-seohtc.blogspot.com */<br />.buttons {/* Style as you wish (toolbar) */<br />}<br />/* The Magnificent CLEARFIX */<br />.buttons:before, .buttons:after {<br />    content: "\0020";<br />    display: block;<br />    height: 0;<br />    visibility: hidden;<br />}<br />.buttons:after {<br />    clear: both;<br />}<br />.buttons {<br />    zoom: 1;<br />}<br /><br /><br />*/<br />    $BUTTON-seohtc.blogspot.com /*<br />button {<br />    text-decoration: none;<br />    text-shadow: 0 1px 0 #fff;<br />    font: bold 11px Helvetica, Arial, sans-serif;<br />    color: #444;<br />    line-height: 17px;<br />    height: 18px;<br />    display: inline-block;<br />    float: left;<br />    margin: 5px;<br />    padding: 5px 6px 4px 6px;<br />    background: #F3F3F3;<br />    border: solid 1px #D9D9D9;<br />    border-radius: 2px;<br />    -webkit-border-radius: 2px;<br />    -moz-border-radius: 2px;<br /> -webkit-transition: border-color .20s;<br /> -moz-transition: border-color .20s;<br /> -o-transition: border-color .20s;<br /> transition: border-color .20s;<br />    height: 29px !important;<br />    cursor: pointer;<br />}<br />button:hover {<br />    background: #F4F4F4;<br />    border-color: #C0C0C0;<br />    color: #333;<br />}<br />button:active {<br />    border-color: #4D90FE;<br />    color: #4D90FE;<br />    -moz-box-shadow:inset 0 0 10px #D4D4D4;<br />    -webkit-box-shadow:inset 0 0 10px #D4D4D4;<br />    box-shadow:inset 0 0 10px #D4D4D4;<br />}<br />button.bluebtn {<br />    border: 1px solid #3079ED !important;<br />    background: #4B8DF8;<br />    background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);<br />    background: -moz-linear-gradient(top, #4C8FFD, #4787ED);<br />    background: -ms-linear-gradient(top, #4C8FFD, #4787ED);<br />    background: -o-linear-gradient(top, #4C8FFD, #4787ED);<br /> -webkit-transition: border .20s;<br /> -moz-transition: border .20s;<br /> -o-transition: border .20s;<br /> transition: border .20s;<br />}<br />button.bluebtn:hover {<br />    border: 1px solid #2F5BB7 !important;<br />    background: #3F83F1;<br />    background: -webkit-linear-gradient(top, #4D90FE, #357AE8);<br />    background: -moz-linear-gradient(top, #4D90FE, #357AE8);<br />    background: -ms-linear-gradient(top, #4D90FE, #357AE8);<br />    background: -o-linear-gradient(top, #4D90FE, #357AE8);<br />}<br />button.greenbtn {<br />    border: 1px solid #29691D !important;<br />    background: #3A8E00;<br />    background: -webkit-linear-gradient(top, #3C9300, #398A00);<br />    background: -moz-linear-gradient(top, #3C9300, #398A00);<br />    background: -ms-linear-gradient(top, #3C9300, #398A00);<br />    background: -o-linear-gradient(top, #3C9300, #398A00);<br /> -webkit-transition: border .20s;<br /> -moz-transition: border .20s;<br /> -o-transition: border .20s;<br /> transition: border .20s;<br />}<br />button.greenbtn:hover {<br />    border: 1px solid #2D6200 !important;<br />    background: #3F83F1;<br />    background: -webkit-linear-gradient(top, #3C9300, #368200);<br />    background: -moz-linear-gradient(top, #3C9300, #368200);<br />    background: -ms-linear-gradient(top, #3C9300, #368200);<br />    background: -o-linear-gradient(top, #3C9300, #368200);<br />}<br />button.redbtn {<br />    border: 1px solid #D14836 !important;<br />    background: #D64937;<br />    background: -webkit-linear-gradient(top, #DC4A38, #D14836);<br />    background: -moz-linear-gradient(top, #DC4A38, #D14836);<br />    background: -ms-linear-gradient(top, #DC4A38, #D14836);<br />    background: -o-linear-gradient(top, #DC4A38, #D14836);<br /> -webkit-transition: border .20s;<br /> -moz-transition: border .20s;<br /> -o-transition: border .20s;<br /> transition: border .20s;<br />}<br />button.redbtn:hover {<br />    border: 1px solid #B0281A !important;<br />    background: #D14130;<br />    background: -webkit-linear-gradient(top, #DC4A38, #C53727);<br />    background: -moz-linear-gradient(top, #DC4A38, #C53727);<br />    background: -ms-linear-gradient(top, #DC4A38, #C53727);<br />    background: -o-linear-gradient(top, #DC4A38, #C53727);<br />}<br />button.action:hover {<br />    -moz-box-shadow: 0 1px 0px #DDD;<br />    -webkit-box-shadow: 0 1px 0px #DDD;<br />    box-shadow:iset 0 1px 0px #DDD;<br />}<br />button.action:active {<br />    -moz-box-shadow: none !important;<br />    -webkit-box-shadow: none !important;<br />    box-shadow: none !important;<br />    border-color: #C6C6C6 !important;<br />}<br />button.bluebtn:active {<br />    border-color: #2F5BB7 !important;<br />}<br />button.greenbtn:active {<br />    border-color: #2D6200 !important;<br />}<br />button.redbtn:active {<br />    border-color: #B0281A !important;<br />}<br />/**\<br />    $BUTTON LABEL-seohtc.blogspot.com<br />\**/<br /> button span.label {<br />    display: inline-block;<br />    float: left;<br />    line-height: 17px;<br />    height: 18px;<br />    padding: 0 1px;<br />    overflow: hidden;<br />    color: #444;<br /> -webkit-transition: color .20s;<br /> -moz-transition: color .20s;<br /> -o-transition: color .20s;<br /> transition: color .20s;<br />}<br />button span.label {<br />    line-height: 15px !important;<br />}<br />button:hover .label.bluebtn {<br />    color: #7090C8;<br />}<br />button:hover .label.greenbtn {<br />    color: #42B449;<br />}<br />button:hover .label.yellow {<br />    color: #F7CB38;<br />}<br />button.bluebtn .label {<br />    color: #FFF !important;<br />    text-shadow: 0 1px 0 #2F5BB7 !important;<br />}<br />button.greenbtn .label {<br />    color: #FFF !important;<br />    text-shadow: 0 1px 0 #2D6200 !important;<br />}<br />button.redbtn .label {<br />    color: #FFF !important;<br />    text-shadow: 0 1px 0 #B0281A !important;<br />}<br />button.action .label {<br />    padding: 0 17px !important;<br />}<br />button.action:active .label {<br />    color: #333 !important;<br />}<br />button.bluebtn:active .label, button.greenbtn:active .label, button.redbtn:active .label {<br />    color: #FFF !important;<br />}<br /><br /><br /><br /><br /></pre><ul><li>lalu save template</li><li>selanjutnya masuk menu add widget >> HTML/javascript</li><li>pastekan kode berikut</li></ul><br /><pre data-codetype="HTML"><div class="container"><br /><div class="line number1 index0 alt2"><br /><code class="css plain"><div class=</code><code class="css string">"buttons"</code><code class="css plain">></code></div><br /><div class="line number2 index1 alt1"><br /><code class="css spaces">   </code><code class="css plain"><button class=</code><code class="css string">"action bluebtn"</code><code class="css plain">><span class=</code><code class="css string">"label"</code><code class="css plain">><span style="color: red;">Save</span></span></button></code></div><br /><div class="line number3 index2 alt2"><br /><code class="css spaces">   </code><code class="css plain"><button class=</code><code class="css string">"action redbtn"</code><code class="css plain">><span class=</code><code class="css string">"label"</code><code class="css plain">><span style="color: red;">Upload</span></span></button></code></div><br /><div class="line number4 index3 alt1"><br /><code class="css spaces">   </code><code class="css plain"><button class=</code><code class="css string">"action greenbtn"</code><code class="css plain">><span class=</code><code class="css string">"label"</code><code class="css plain">><span style="color: red;">Comment</span></span></button></code></div><br /><div class="line number5 index4 alt2"><br /><code class="css spaces">   </code><code class="css plain"><button class=</code><code class="css string">"action"</code><code class="css plain">><span class=</code><code class="css string">"label"</code><code class="css plain">><span style="color: red;">Cancel</span></span></button></code></div><br /><div class="line number6 index5 alt1"><br /><code class="css spaces"> </code><code class="css plain"></div></code></div><br /></div><br /></pre><br /><ul><li>simpan perubahan.</li><li>sebelumnya ganti kode yang berwarna <span style="font-family: "Courier New",Courier,monospace;"><span style="color: red;"><b>merah</b></span></span> dengan selera sobat.</li></ul><br />~ Happy Blogging - Ega Ariya Dirgantara ~

WIDGET

Google+ Button style css3 - adalah projek saya yang pertama,nah demonya adalah seperti screenshots tersebut.saya akan share caranya.cara in...

Cara membuat recent post dengan 1 kategori label

Posted by Unknown at 10:22 PM

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxHVUQkTTF8-0ZL2XyIfBTUcQW3cHg_bWRV1HIQUaWNKjL1L_cvPaGNvxiZNjySvjVddfr3qM0PlUvQBjnB9bNZAFI80dErvm9XBz5iMf1hsnHug7YacoweSy4JJjhRlrNeHJ8lAIiNUs/s1600/recent-post-label.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="rp 1 kategori label" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxHVUQkTTF8-0ZL2XyIfBTUcQW3cHg_bWRV1HIQUaWNKjL1L_cvPaGNvxiZNjySvjVddfr3qM0PlUvQBjnB9bNZAFI80dErvm9XBz5iMf1hsnHug7YacoweSy4JJjhRlrNeHJ8lAIiNUs/s1600/recent-post-label.jpg" title="" /></a></div><a href="http://seohtc.blogspot.com/2013/03/cara-membuat-recent-post-dengan-1.html"><i><b>Recent Post Kategori Label Tertentu</b></i></a> - kali ini,kita akan membuat <a href="http://seohtc.blogspot.com/2013/03/cara-membuat-recent-post-dengan-1.html"><i>widget recent post dengan 1 kategori label tertentu</i></a>,dan ini biasanya paling dicari,cari.oleh,peblogger sekarang.cara membuatnya cukup mudah.kok...ikuti terus tutorial ini yah ?<br /><br /><a name="more"></a><ul><li><h3><b>Tutorial :</b></h3></li></ul><ul><li>masuk akun blogger</li><li>add widget baru >> HTML/javascript</li><li>masukkan kode ini :</li></ul><br /><pre data-codetype="JavaScript"><script type='text/javascript'>var numposts = <span style="color: red;">3</span>;var showpostthumbnails = <span style="color: red;">true</span>;var<br /> displaymore = false;var displayseparator = false;var showcommentnum = <br />false;var showpostdate = false;var showpostsummary = true;var numchars =<br /> 80;</script><br /><br /><script type="text/javascript" src="/feeds/posts/default/-/<span style="color: red;">NAMA LABEL</span>?orderby=updated&alt=json-in-script&callback=labelthumbs"></script><br /></pre><br /><ul><li>lalu simpan perubahan.</li><li>kemudian pergi ke edit HTML</li><li>cari kode <span style="font-family: "Courier New",Courier,monospace;">]]></b:skin></span> dengan <span style="font-family: "Courier New",Courier,monospace;">Ctrl + F</span></li><li>lalu masukkan kode ini diatasnya.</li></ul><br /><pre data-codetype="CSS">img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; <br />background:#D2D0D0; margin-right:10px; height:55px; width:55px}<br /><br /><br /><br /><br /><div><br />img.label_thumb:hover{background:#f7f6f6}</div><br /><div><br />.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}</div><br /><div><br />ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}</div><br /><div><br />.label_with_thumbs a{}</div><br /><div><br />.label_with_thumbs strong{}</div><br /></pre><ul><li>kemudian cari kode <span style="font-family: "Courier New",Courier,monospace;"></head></span> ,lalu masukkan kode ini diatasnya.</li></ul><br /><pre data-codetype="JavaScript"><script src='http://adablogku.googlecode.com/files/lebelgambar.js' type='text/javascript'/><br /><br /></pre><ul><li>setelah itu save perubahan.</li><li>lihat hasilnya</li></ul><br />~ HappyBlogging - Ega Ariya Dirgantara ~

WIDGET

Recent Post Kategori Label Tertentu - kali ini,kita akan membuat widget recent post dengan 1 kategori label tertentu ,dan ini biasanya pali...

Cara membuat widget iklan melayang dengan tombol close

Posted by Unknown at 3:51 AM

<div class="separator" style="clear: both; text-align: center;"><a href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSzRFfyejwKEu5-q8O__EeV8Qgi-ubKg2bq6Ui-eeJTnVTeJcFp" style="margin-left: 1em; margin-right: 1em;"><img alt="iklan melayang" border="0" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSzRFfyejwKEu5-q8O__EeV8Qgi-ubKg2bq6Ui-eeJTnVTeJcFp" title="" /></a></div><a href="http://seohtc.blogspot.com/2013/03/cara-membuat-widget-iklan-melayang.html"><i><b>Cara membuat widget iklan melayang dengan tombol close</b></i></a> - sebenarnya widget ini bisa muncul disamping kanan dan kiri,,blog.nah,saya akan berbagi tipsnya.mungkin tips ini berlaku untuk anda yang main iklan ppc,,atau advertisement yang lainnya.untuk tutorialnya,silahkan simak tutorial berikut.<br /><br /><a name="more"></a><b>Cara Membuat :</b><br /><br /><ul><li>masuk akun blogger</li><li>tambah gadget baru >> HTML/javascript</li><li>pastekan kode berikut</li></ul><br /><blockquote class="tr_bq"><div style="border: 2px dotted rgb(27, 26, 118); padding: 10px; text-align: left;"><span style="background-color: white;"><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><style type="text/css"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">#adsense_blog {</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">position:fixed;_position:absolute;top:0px; right:0px;width: 160px;</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">clip:inherit;</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">_top:expression(document.documentElement.scrollTop+</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">document.documentElement.clientHeight-this.clientHeight);  _left:expression(document.documentElement.scrollLeft+  document.documentElement.clientWidth - offsetWidth); }</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"></style></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><script type="text/javascript"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">function get_cookie(Name) {</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">var search = Name + "="</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">var returnvalue = "";</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (document.cookie.length > 0) {</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">offset = document.cookie.indexOf(search)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (offset != -1) {</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">offset += search.length</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">end = document.cookie.indexOf(";", offset);</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (end == -1) end = document.cookie.length;</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">returnvalue=unescape(document.cookie.substring(offset, end))</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">}</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">}</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">return returnvalue;</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">}</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">function close1(){</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (persistclose)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">document.cookie="remainclosed=1"</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">document.getElementById("adsense_blog").style.visibility="hidden"</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">}</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (window.addEventListener)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">window.addEventListener("load", staticbar, false)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">else if (window.attachEvent)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">window.attachEvent("onload", staticbar)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">else if (document.getElementById)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">window.onload=staticbar</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"></script></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><br /></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div class="clear"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"></div></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div id="adsense_blog"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div style="text-align: right;"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><a  href="" onclick="close1(); return false"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyyhGaqdewDOluK-ab434_T7uc7d2AoBpdiLCH2zIWJarhqpEFkdBMgYKpXUp09uyWkg2luTHqch3OLuVRJgUAhqOvcaeqXkpX7GRArp00hrXpJ6GT0vhUDE_PMx7a3CToZbvclXPn9lCZ/s1600/close3.png"  /></a></div></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div onclick='close1()'></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div style="background: #fff;"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="color: red; font-family: 'Trebuchet MS'; font-size: xx-small;"><a  href="http://poetra-pakumis.blogspot.com/p/contact-us.html"  target="_blank"><img  src="http://i1216.photobucket.com/albums/dd374/abyfarhan/PasangIklan_zps0d4e538b.jpg"  border="0" alt="Photobucket" /></a></span><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"></div></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"></div></div></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><style type="text/css"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">#adsense_blog1 {</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">position:fixed;_position:absolute;top:0px; left:0px;width: 160px;</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">clip:inherit;</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">_top:expression(document.documentElement.scrollTop+</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">document.documentElement.clientHeight-this.clientHeight);  _left:expression(document.documentElement.scrollLeft+  document.documentElement.clientWidth - offsetWidth); }</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"></style></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><script type="text/javascript"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">function get_cookie(Name) {</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">var search = Name + "="</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">var returnvalue = "";</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (document.cookie.length > 0) {</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">offset = document.cookie.indexOf(search)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (offset != -1) {</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">offset += search.length</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">end = document.cookie.indexOf(";", offset);</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (end == -1) end = document.cookie.length;</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">returnvalue=unescape(document.cookie.substring(offset, end))</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">}</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">}</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">return returnvalue;</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">}</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">function close11(){</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (persistclose)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">document.cookie="remainclosed=1"</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">document.getElementById("adsense_blog1").style.visibility="hidden"</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">}</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">if (window.addEventListener)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">window.addEventListener("load", staticbar, false)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">else if (window.attachEvent)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">window.attachEvent("onload", staticbar)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">else if (document.getElementById)</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">window.onload=staticbar</span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"></script></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><br /></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div class="clear"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"></div></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div id="adsense_blog1"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div style="text-align: left;"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><a  href="" onclick="close11(); return false"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyyhGaqdewDOluK-ab434_T7uc7d2AoBpdiLCH2zIWJarhqpEFkdBMgYKpXUp09uyWkg2luTHqch3OLuVRJgUAhqOvcaeqXkpX7GRArp00hrXpJ6GT0vhUDE_PMx7a3CToZbvclXPn9lCZ/s1600/close3.png"  /></a></div></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div onclick='close11()'></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><div style="background: #fff;"></span><br style="font-family: 'Trebuchet MS'; font-size: small;" /><span style="color: red; font-family: 'Trebuchet MS'; font-size: xx-small;"><p style="line-height: 100%; margin-top: 0; margin-bottom: 0" align="center"></span><span style="color: red; font-family: 'Trebuchet MS'; font-size: xx-small;">            <a target="_blank" href="http://www.soalpsikotes.com/?id=abyfarhan"></span><span style="color: red; font-family: 'Trebuchet MS'; font-size: xx-small;">             <img border="0"  src="http://www.soalpsikotes.com/images/ebook-buku-psikotes.gif"  width="160" height="600" /></a><p></p></span><span style="font-family: 'Trebuchet MS'; font-size: xx-small;">              </div></div></div>   </span><span style="font-family: 'Trebuchet MS'; font-size: xx-small;"><br /></span></span></div></blockquote><br /><ul><li>Ganti kode berwarna merah dengan kode iklan masing-masing.</li><li>save perubahan.</li></ul><br />~ Happy Blogging - Ega Ariya Dirgantara ~

WIDGET

Cara membuat widget iklan melayang dengan tombol close - sebenarnya widget ini bisa muncul disamping kanan dan kiri,,blog.nah,saya akan ber...