add go to top and go to bottom buttons Using jQuery in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="post-title entry-title" style="text-align: justify;"><br /><span style="font-family: inherit;"><span style="font-size: small;"><span style="font-weight: normal;"><a class="zem_slink" href="http://en.wikipedia.org/wiki/Comment_%28computer_programming%29" rel="wikipedia" title="Comment (computer programming)">/*</a><br />The Up and Down <a class="zem_slink" href="http://en.wikipedia.org/wiki/Button" rel="wikipedia" title="Button">buttons</a> can be used to navigate to the top and bottom <br />of the page content, especially when on the main page there are many <br />articles or when an article has too many comments. These buttons have a <br />fadeIn and fadeOut effect, this means that they will fade slightly when <br />we are scrolling to the top or bottom of the page and additionally, have<br /> the function of going up/down the blog.</span></span></span></div><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s1600/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger widgets, blogger navigation" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s200/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" title="how to add back to top go to bottom navigation in blogger" width="200" /></a></div><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><span style="color: #3d85c6;"><b><span style="font-size: medium;">Demo</span></b></span><br /><br /><br /><br />You can see a live demo on my blog, the buttons are located on the right side.<br /><br /><br /><br /><span style="color: #3d85c6;"><span style="font-size: medium;"><b>How to put Go Up and Go Down buttons using <span style="font-size: medium;">the</span> <a class="zem_slink" href="http://jquery.com/" rel="homepage" title="JQuery">jQuery</a> slide effect</b></span></span><br /><br /><br /><br /><span style="color: #6fa8dc;"><b><a class="zem_slink" href="http://en.wikipedia.org/wiki/USMLE_Step_1" rel="wikipedia" title="USMLE Step 1">Step 1</a>.</b></span> Go to Template, click on the Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia" title="HTML">HTML</a> button<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s1600/blogger-template-edit-html.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s400/blogger-template-edit-html.png" width="400" /></a></div><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 2.</b> </span>Select the "Expand Widget Templates" box<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s1600/blogger-expand-widget-templates.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s320/blogger-expand-widget-templates.png" width="320" /></a></div><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 3.</b></span> Search (using <a class="zem_slink" href="http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts" rel="wikipedia" title="Table of keyboard shortcuts">CTRL + F</a>) for the following piece of code:<br /><br /><br /><br /><blockquote class="tr_bq"><br />]]></b:skin></blockquote><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 4.</b></span> Just above this code, paste this one:<br /><br /><br /><br /><blockquote class="tr_bq"><br />/* Up and Down Buttons with jQuery<br /><br />----------------------------------------------- */<br /><br />.button_up{<br /><br />padding:7px; <span style="color: #38761d;">/* Distance between the border and the icon */</span><br /><br />background-color:white;<br /><br />border:1px solid #<a class="zem_slink" href="http://en.wikipedia.org/wiki/Civilian_Conservation_Corps" rel="wikipedia" title="Civilian Conservation Corps">CCC</a>; <span style="color: #38761d;">/* Border Color */</span><br /><br />position:fixed;<br /><br />background:<span style="color: red;"><b> <span style="color: black;">white</span> </b></span>url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUdelsPJ5E4HdlQd4gr-ZLwIikDFNJga8uel0exKaBYyIpof9RY4hiPLCHFE2ATK23CFK_H7NDVlE7lzgWjA5sbyKaTu-P025GBefZqVZrp2LoP-tvGx37ou6NHNjkJayi_69JxrE_drE/s16/arrow_up.png</span>) no-repeat top left;<br /><br />background-position:50% 50%;<br /><br />width:20px; <span style="color: #38761d;">/* <a class="zem_slink" href="http://en.wikipedia.org/wiki/Web_button" rel="wikipedia" title="Web button">Button</a>'s width */</span><br /><br />height:20px; <span style="color: #38761d;">/* Button's height */</span><br /><br />bottom:280px; <span style="color: #38761d;">/* Distance from the bottom */</span><br /><br />right:5px; <span style="color: #38761d;">/* Change right to left if you want the buttons on the left */</span><br /><br />white-space:nowrap;<br /><br />cursor: pointer;<br /><br />border-radius: 3px 3px 3px 3px;<br /><br />opacity:0.7; <br /><br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br /><br />}<br /><br />.button_down{<br /><br />padding:7px; <span style="color: #38761d;">/* Distance between the border and the icon */</span><br /><br />background-color:white;<br /><br />border:1px solid #CCC; <span style="color: #38761d;">/* Border Color */</span><br /><br />position:fixed;<br /><br />background:<b><span style="color: red;"> <span style="color: black;">white </span></span></b>url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZwTfp2whlkvJ8Potpv9stHiT6hE9crgoWGZYVpeZYo9VbdAmcZufhMsufDivyPZrc7lRTQvCg_5XODmo2gIXy5WOY30DrP9gjngdBlEan1qvaQcW3x5TkughVhQKhpHTpr1CPIIZ58s/s16/arrow_down.png</span>) no-repeat top left;<br /><br />background-position:50% 50%;<br /><br />width:20px; <span style="color: #38761d;">/* Button's width */</span><br /><br />height:20px; <span style="color: #38761d;">/* Button's height */</span><br /><br />bottom:242px;<span style="color: #38761d;"> /* Distance from the bottom */</span><br /><br />right:5px; <span style="color: #38761d;">/* Change right to left if you want the buttons on the left */</span><br /><br />white-space:nowrap;<br /><br />cursor: pointer;<br /><br />border-radius: 3px 3px 3px 3px;<br /><br />opacity:0.7;<br /><br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br /><br />}</blockquote><br /><br /><br /><b>Note:</b>  - in <span style="color: #38761d;">green </span>are some annotations that explains what styles you can modify on their left side.<br /><br />           - You can change the arrows by changing the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia" title="Uniform resource locator">URLs</a> in <span style="color: blue;">blue</span>.<br /><br />           - To change the buttons background color of buttons, change the <b>white</b> text with your color <br /><br /><br /><br /><b><span style="color: #6fa8dc;">Step 5.</span></b> Now search (CTRL + F) for this tag:<br /><br /><br /><br /><blockquote><br /></body></blockquote><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 6. </b></span>And just above it, paste the following code:<br /><br /><br /><br /><blockquote class="tr_bq"><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br /><br /><br /><br /><b><div class='button_up' id='button_up' style='display:none;'/></b><br /><br /><b><div class='button_down' id='button_down' style='display:none;'/></b><br /><br /><br /><br /><script><br /><br />//<!--[<a class="zem_slink" href="http://en.wikipedia.org/wiki/CDATA" title="CDATA" rel="wikipedia"-->CDATA[<br /><br />(function(){var special=jQuery.event.special,uid1='D'+(+new <br />Date()),uid2='D'+(+new <br />Date()+1);special.scrollstart={setup:function(){var <br />timer,handler=function(evt){var <br />_self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var<br /> timer,handler=function(evt){var <br />_self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();<br /><br /><br /><br />$(function() {<br /><br />var $elem = $('body');<br /><br />$('#button_up').fadeIn('slow');<br /><br />$('#button_down').fadeIn('slow'); <br /><br />$(window).bind('scrollstart', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'0.2'});<br /><br />});<br /><br />$(window).bind('scrollstop', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'1'});<br /><br />});<br /><br />$('#button_down').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: $elem.height()}, 800);<br /><br />} );<br /><br />$('#button_up').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: '0px'}, 800);<br /><br />} );});<br /><br />//]]><br /><br /></script></blockquote><br /><br /><br /><b>Note:</b> In case you want to remove the "Go to top" button, remove <br />the 1st bolded code and to remove the "Go to bottom" button, remove the <br />2nd one.<br /><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 7.</b></span> Finally, Save your Template. Enjoy!<br /><div class="post-title entry-title" style="text-align: justify;"><br /><br /></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div><br /></div><br />

add go to top and go to bottom buttons Using jQuery in Blogger

/* The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are m...

Read more »

CSS Box Shadow - Membuat Efek Bayangan pada Area

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="dte_post-body" itemprop="articleBody"><br /><div class="separator center"><br /><img alt="CSS Box-Shadow" height="142" src="http://3.bp.blogspot.com/-zqUTXaitRZY/TjkVxO9Dc-I/AAAAAAAAAhw/hNnkgs1kzEg/s320/ombre-css3-box-shadow1.png" width="247" /></div><br />Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:<br /><br /><h3><br />CSS Bayangan Outset</h3><br /><pre data-codetype="CSS" id="code-block:1"><code class="css"><span class="tag">div</span> <span class="rules">{<br /> <span class="rule"><span class="attribute">-webkit-box-shadow</span>:<span class="value"><span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Safari & Chrome */</span><br /> <span class="rule"><span class="attribute">-moz-box-shadow</span>:<span class="value"><span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Firefox */</span><br /> <span class="rule"><span class="attribute">box-shadow</span>:<span class="value"><span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* W3C */</span><br /><span class="rule">}</span></span></code></pre><br /><h3><br />CSS Bayangan Inset</h3><br /><pre data-codetype="CSS" id="code-block:2"><code class="css"><span class="tag">div</span> <span class="rules">{<br /> <span class="rule"><span class="attribute">-webkit-box-shadow</span>:<span class="value">inset <span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Safari & Chrome */</span><br /> <span class="rule"><span class="attribute">-moz-box-shadow</span>:<span class="value">inset <span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Firefox */</span><br /> <span class="rule"><span class="attribute">box-shadow</span>:<span class="value">inset <span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* W3C */</span><br /><span class="rule">}</span></span></code></pre><br /><code>10px</code> yang pertama adalah ukuran <i>offset</i> sumbu X, <code>10px</code> yang ke dua adalah <i>offset</i> sumbu Y, <code>7px</code> adalah tingkat blur, <code>#222</code> adalah warna bayangan. Kamu juga bisa menuliskan nilai <i>offset</i> negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara <i>top down</i> ataupun <i>inline</i> seperti ini:<br /><br /><br /><br /><table border="1" class="full compare"><thead><br /><tr><th style="width: 50%;">Top-Down</th><th style="width: 50%;">Inline</th></tr><br /></thead><tbody><br /><tr><td><code><style><br /><br />#kotak-1 {<br /><br />  -webkit-box-shadow:10px 10px 7px #222;<br /><br />  -moz-box-shadow:10px 10px 7px #222;<br /><br />  box-shadow:10px 10px 7px #222;<br /><br />}<br /><br /></style><br /><br /><div id='kotak-1'><b>OBJEK</b></div></code></td><td><code><div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'><b>OBJEK</b></div></code></td></tr><br /></tbody></table><br /><br /><br />Dan ini adalah contoh-contoh penerapan yang lebih <br />detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas <br />bagian mana yang harus menjadi perhatian:<br /><br /><br /><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">10px</span> <span style="color: red;">5px</span> 7px #222;<br /><br />-moz-box-shadow: <span style="color: red;">10px</span> <span style="color: red;">5px</span> 7px #222;<br /><br />box-shadow: <span style="color: red;">10px</span> <span style="color: red;">5px</span> 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 10px 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">0</span> 10px 7px #222;<br /><br />-moz-box-shadow: <span style="color: red;">0</span> 10px 7px #222;<br /><br />box-shadow: <span style="color: red;">0</span> 10px 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 0pt 7px rgb(34, 34, 34); margin: 0 auto 30px; margin: 0 auto 30px; padding: 5px; padding: 5px; width: 500px; width: 500px;"><br /><code>-webkit-box-shadow: 10px <span style="color: red;">0</span> 7px #222;<br /><br />-moz-box-shadow: 10px <span style="color: red;">0</span> 7px #222;<br /><br />box-shadow: 10px <span style="color: red;">0</span> 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">0 0</span> 7px #222;</code><code><br />-moz-box-shadow: <span style="color: red;">0 0</span> 7px #222;</code><br /><code></code><code><br />box-shadow: <span style="color: red;">0 0</span> 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: 0 0 <span style="color: red;">20px</span> #222;<br /><br />-moz-box-shadow: 0 0 <span style="color: red;">20px</span> #222;<br /><br />box-shadow: 0 0 <span style="color: red;">20px</span> #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(241, 12, 12); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: 0 0 20px <span style="color: red;">#f10c0c</span>;<br /><br />-moz-box-shadow: 0 0 20px <span style="color: red;">#f10c0c</span>;<br /><br />box-shadow: 0 0 20px <span style="color: red;">#f10c0c</span>;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 0pt rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: 10px 5px <span style="color: red;">0</span> #222;<br /><br />-moz-box-shadow: 10px 5px <span style="color: red;">0</span> #222;<br /><br />box-shadow: 10px 5px <span style="color: red;">0</span> #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: -10px -5px 0pt rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">-</span>10px <span style="color: red;">-</span>5px 0 #222;<br /><br />-moz-box-shadow: <span style="color: red;">-</span>10px <span style="color: red;">-</span>5px 0 #222;<br /><br />box-shadow: <span style="color: red;">-</span>10px <span style="color: red;">-</span>5px 0 #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 10px 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 10px 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 10px 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 10px 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 0pt 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 10px 0 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 10px 0 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 10px 0 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 0 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(241, 12, 12) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #f10c0c;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #f10c0c;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #f10c0c;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 0pt rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 0 #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 0 #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 0 #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: -10px -5px 0pt rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> -10px -5px 0 #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> -10px -5px 0 #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> -10px -5px 0 #222;</code></div><br /></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dcbc961-b7df-4549-969e-3ed5aec6b090" style="border: none; float: right;" /></div><br /></div><br />

CSS Box Shadow - Membuat Efek Bayangan pada Area

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek: CSS Bayangan Outset div { -webkit-box-shadow : 10 px 10 px 7 px...

Read more »

HTML Background Code

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div dir="ltr" style="text-align: left;" trbidi="on"><br />This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s320/DSCF0494.JPG" width="563" /></a></div><br /><br /><br /><h2><br />Shorthand Background Code</h2><br />The quickest HTML code for backgrounds is the <code>background</code> property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The <code>background</code> property is a shorthand property for setting all background properties at once. <br /><br /><table border="0" cellspacing="0" class="example"><tbody><br /><tr><th>Source Code</th><th>Result</th></tr><br /><tr><td><textarea class="exampleCode" cols="70" name="bodyText" rows="3" style="height: 91px; width: 386px;"><!--<br /> Codes by HTMLcodes.me --> <div style="background:#eee <br />url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) <br />repeat fixed;<br /> overflow:scroll;<br /> width:200px;<br /> height:100px;"><br /><p><br />This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p><br /></div><br />

This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Page Background

To set the background for the whole page, simply apply the background property against the body tag.

Example:

<body style="background:#eee url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) repeat fixed;"> ... </body>

Alternative Background Codes

Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.

Background Color

This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Choose a color with the HTML color picker.

Source Code	Result
<!--<br /> Codes by HTMLcodes.me --> <p style="background-color:#0f0;color:black;width:200px;"><br />This text has got a background color applied. You could also apply background color to the whole page if you like.</p><br />	This text has got a background color applied. You could also apply background color to the whole page if you like.

Background Image

This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Source Code	Result
<!--<br /> Codes by HTMLcodes.me --> <div <br />style="background-image:url('http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG');color:blue;font-size:14px;width:300px;height:200px"><br />This div tag has got a background image. You could also apply a background image to the whole page if you like.</div><br />	This div tag has got a background image. You could also apply a background image to the whole page if you like.

Fixed Background Image

You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).

Source Code

Result

<!--<br /> Codes by HTMLcodes.me --> <div <br />style="background-image:url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG);<br /><br /> background-repeat:repeat;<br /> background-attachment:fixed;<br /> overflow:scroll;<br /> width:200px;<br /> height:100px;"><br /><p><br />This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.</p><br /></div><br />

This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

http://ajabingung.blogspot.com/2013/03/html-background-code.html

HTML Background Code

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s320/DSCF0494.JPG" width="563" /></a></div><br /><h2>Shorthand Background Code</h2>The quickest HTML code for backgrounds is the <code>background</code> property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The <code>background</code> property is a shorthand property for setting all background properties at once. <br /><table border="0" cellspacing="0" class="example"><tbody><tr><th>Source Code</th><th>Result</th></tr><tr><td><textarea class="exampleCode" cols="70" name="bodyText" rows="3" style="height: 91px; width: 386px;"><!-- Codes by HTMLcodes.me --> <div style="background:#eee url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) repeat fixed; overflow:scroll; width:200px; height:100px;"><p>This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p></div>

This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Page Background

To set the background for the whole page, simply apply the background property against the body tag.
Example:
<body style="background:#eee url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) repeat fixed;"> ... </body>

Alternative Background Codes

Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.

Background Color

This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.
Choose a color with the HTML color picker.

Source Code	Result
<!-- Codes by HTMLcodes.me --> <p style="background-color:#0f0;color:black;width:200px;">This text has got a background color applied. You could also apply background color to the whole page if you like.</p>	This text has got a background color applied. You could also apply background color to the whole page if you like.

Background Image

This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Source Code	Result
<!-- Codes by HTMLcodes.me --> <div style="background-image:url('http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG');color:blue;font-size:14px;width:300px;height:200px">This div tag has got a background image. You could also apply a background image to the whole page if you like.</div>	This div tag has got a background image. You could also apply a background image to the whole page if you like.

Fixed Background Image

You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).

Source Code

Result

<!-- Codes by HTMLcodes.me --> <div style="background-image:url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG); background-repeat:repeat; background-attachment:fixed; overflow:scroll; width:200px; height:100px;"><p>This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.</p></div>

This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

http://ajabingung.blogspot.com/2013/03/html-background-code.html