hotbizindo

Add Facemoods Emoticons To Your Blogger Comments

<div dir="ltr" style="text-align: left;" trbidi="on"> Here are some amazingly funny emoticons compatible with your <a class="zem_slink" href="http://blogger.com/" rel="homepage" title="Blogger">Blogger</a> comments - also with threaded commenting system! If you want to know how to add them, just follow the next steps: <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yKcyMMbfPdSliSm4VihmWzeBn3Znb6mo8Lk9ELLvhOJPZ_vEEvp1DHr31aCKAMw6AFQcwAiHfttFTv774XQbULLwGbcvZzBT3sYxEAzZiwRYLyG9IfS7nHeB1NICBK_FwUDWYi4iTNGD/s1600/add+facemood+smileys+emoticons+to+blogger+comments.png" style="margin-left: 1em; margin-right: 1em;"><img alt="emoticons, smileys, blogger, tricks" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yKcyMMbfPdSliSm4VihmWzeBn3Znb6mo8Lk9ELLvhOJPZ_vEEvp1DHr31aCKAMw6AFQcwAiHfttFTv774XQbULLwGbcvZzBT3sYxEAzZiwRYLyG9IfS7nHeB1NICBK_FwUDWYi4iTNGD/s400/add+facemood+smileys+emoticons+to+blogger+comments.png" title="facemoods emoticons for blogger blogspot comments" width="400" /></a></div> <div style="color: #0b5394; text-align: center;"> <a href="http://facemoods-emoticons.blogspot.com/2012/05/lorem-ipsum.html#comment-form" rel="nofollow" target="_blank">DEMO</a></div> <a class="zem_slink" href="http://en.wikipedia.org/wiki/USMLE_Step_1" rel="wikipedia" title="USMLE Step 1">Step 1</a>. Go to <a class="zem_slink" href="http://www.apple.com/downloads/dashboard/" rel="homepage" title="Dashboard (Mac OS)">Dashboard</a> - Template - Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia" title="HTML">HTML</a> - Proceed <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJokTjvkSpUqz9grYDGBorTqIwMpIYH6HxgsShVYXX6CMk7BFHdQXWBfX2a3weJmzql3hQgx09gLlYmgfv8C2DMnlfbVAyYIkiIPn6JBmt3TZ6-22U8P8Kdu7drHsvkM-ZnmUJMX5FkGlt/s1600/remove-blogger-labels.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJokTjvkSpUqz9grYDGBorTqIwMpIYH6HxgsShVYXX6CMk7BFHdQXWBfX2a3weJmzql3hQgx09gLlYmgfv8C2DMnlfbVAyYIkiIPn6JBmt3TZ6-22U8P8Kdu7drHsvkM-ZnmUJMX5FkGlt/s1600/remove-blogger-labels.png" width="320" /></a></div> ...and select Expand Widget Template (don't forget to make a backup) <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2N1J5HSVk4p8Jve_RgNTvjvOZazbQQba9-MlccSnKBj0tr8kGj9Iii5kcheQlVIGEWVf0noFEO48qhRjQjIePlnptO277jhUMMBRDisAed5BsUoT6mj00WU60Z-blH7KyWOlWwYTRoumE/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/AVvXsEg2N1J5HSVk4p8Jve_RgNTvjvOZazbQQba9-MlccSnKBj0tr8kGj9Iii5kcheQlVIGEWVf0noFEO48qhRjQjIePlnptO277jhUMMBRDisAed5BsUoT6mj00WU60Z-blH7KyWOlWwYTRoumE/s1600/blogger-expand-widget-templates.png" width="320" /></a></div> Step 2. 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 this <a class="zem_slink" href="http://en.wikipedia.org/wiki/Code" rel="wikipedia" title="Code">code</a>: <ul> <li>For previous commenting system: </li> </ul> <blockquote class="tr_bq"> <h4 id='comment-post-message'><data:postCommentMsg/></h4></blockquote> <ul> <li>For threaded comments:</li> </ul> <blockquote class="tr_bq"> <div class='post-footer-line post-footer-line-3'> </blockquote> Step 3. Add the below code just above it (for threaded comments, add the code after): <blockquote class="tr_bq"> <b:if cond='data:blog.pageType == "item"'> <div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkA0MwWddTTRdT0A5VJkAmIv9dTj0agaX_VWI4PBY3-lJanHTg1SqzDG-K51sAvoChOxv0RIm-QS8IuoiTdhA4-krrc2bswTKlun-Jfaws7wMWdYHeuA1h1izbK5X5VX2_9MyqT_qD4H04/s1600/helplogger.blogspot.com(1).gif'/> :a &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxDhizRNrVX_KpzHx7QXNa84at1woqNhh89yf8zNKPbd78rKqDyEW6Omk6fcgOXiuE8v0wDH7Lp6mU9BnCNW6X8dj1y8u3Ni_CcWDZ7-cZR-VudPQkwfX-MmssrbdOSOGae_d1fnpPCnW/s1600/helplogger.blogspot.com+(2).gif'/> :b &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG3_TgIOtFjNQEbrcasVFQnUtQbq9VHa2jxViNIDSP8KrNQwNdPA7Y5HjoINvagj-_p7A-1js28btDwI6zGTOvM9nnvHxu7ml-xsDtFsrkmHB2CBALL_2p0oiKkofriJXhqji6cEm2EarT/s1600/helplogger.blogspot.com(3).gif'/> :c &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbxwx-iZiYtyXIOrdcX56RAPbgz4w9-Jwiky5GQyFRL9QFULYp7NAtbVPSzxN5UhUAazn3wYyeQvnM18af3ZjUGPpsyrtc7sBgXZCGG7aYAY846J_yLfX0RQa1hVnNw0LhGUBwIyZG2l5/s1600/helplogger.blogspot.com(4).gif'/> :d &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXyVCnwnhZcgmLbCPfhs3hzPP4LdPaDiVu-lI54wBEY_-q_D-_eRZa9xIAOnuhW4D_eTPoYYjUM9jhn8U-hBq2FL5Fh4sAldR_uBmXlDeH4fUgvq5BCYCzzkRRDX3UOaFkVMnVks7VfNjw/s1600/helplogger.blogspot.com(5).gif'/> :e &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEtVe2PsUtyFbw5gCfS6FyVcF-TA_Fn4FOfsrCuzAeLPZCj3uBiK8Kt8zImgH4lG-yfFjowLFepuekC7eyCq84rflymfZH51rtOPVdLwkuobHg4-C3MjVZO3EdNmmB7aOHMfNSvxIMXoN/s1600/helplogger.blogspot.com(6).gif'/> :f &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeS9KJtoqsShlGboxe7teI_5GOSroI-G6dlt36r_hYFybSDUhyphenhyphendEFo633RGu-rny1rnEw4kZsILjGkhq0XmnTqQIiCD3CPvMqka_xa-mSHHK90J8pB2uJ6uMh6jpC7N3KKnKLQn31mn0So/s1600/helplogger.blogspot.com(7).gif'/> :g &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiUSn5W_SUnjv5HQwkyHSHCYSkyonjE5Lx07p7r7-b3fDkkJ_ebgRdLqClajaPXr2vEz0gzGc7WEGS6Tlug_jl-uviLQzaRkYb71bUKGCKTt_-Hoyk6npQsHNNduTzMU7x1MzjYzXmY2fn/s1600/helplogger.blogspot.com(8).gif'/> :h &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjieaJcdn6u-46ppZow0MAcppfo8XNf9RFN0mD6fiYPwSbnazOXR0SXIzEv8R_zwr4nIMTghE210FuAZsig0MlAKwA9uZpdSb4sx2bGRCm7MJydTa9IqA4Z3Opu65b28z3zNfIaHHmWAzC8/s1600/helplogger.blogspot.com(9).gif'/> :i &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRVuIDnxoBV6pyydhCV698oH76oLDcwzRWKUkoDsPrA9kUVzf1zdgy-hRmLOeNvDdkAUsQy0aDhcQ7yK0NZciqHXiKEoos5L8jRIKpJdg1O7tzdMiyplPUvJdEeV97NsJ36HhdPlHIwW5h/s1600/helplogger.blogspot.com(10).gif'/> :j &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3kfSmp8v6ex9r7KUoF1QMj-ajqN5wlzJeUwHE27UqqjZDna47L73qYzBhxWhF6PMEScKOkX7Rm6eGa4d25qykuoTKGYoNsnNHFn365jnDjNHBrusKq8TaL8lT4sq1HjodEQu-LaVP0UIu/s1600/helplogger.blogspot.com(11).gif'/> :k &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQr2lOmQtixAcVNvQDlA8_AKdAU1pCao6Ad8Kv2ymk3Ms8TeVC34xWy0EyQ6iBWnVKsOfyvr1zZkR35tvTk04roc4bXf93mir3WSpzV616BqbLrr4k0tu3dsAdnZ7MFI5ccSYF0uizLbd/s1600/helplogger.blogspot.com(12).gif'/> :l &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3nLfMxr7HV-ZU7tIrf0wV-VXKk7jLJwbhK1-3qeFm9YDXutm9j_uaIB_98t1ohXgIcdC1rSayRSgzhs61BSzTR72cODLYDYInTI4kOi92b6LhjcBhjk1c1E-1eCAP7ngQdiOZPj9pHXT1/s1600/helplogger.blogspot.com(13).gif'/> :m &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyiFjZfo6ozejTJ6Fc4CaHiuImm6Nx-5COWPyhygmMeCEiwgVeouox8k3Q3pM5sq97X_CRhtMDJq8xkFVdC_A4rHNWKmHyIEz3sG9ti-yFBBB6zBW5p935vhzfLUInK4fZd9Ra12j8f5VE/s1600/helplogger.blogspot.com(15).gif'/> :n &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifcN6xUU-V_zYxaVn0SSowvQokr7HDFcSHMSskl3xLhT_mn6GbgeiCbAGbmMNh48qXf0Tt4olVFvaPf_QQAdTcXaunpSkgyuZ3bxrZ5hPqjBDasWbMDhPliNZhWz96RnE6g_dm4KfRp3hb/s1600/helplogger.blogspot.com(16).gif'/> :o &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgspnGUc_3i7yJEGbe8pTGxl4PbXI3FSV8TxB4ERiabQXj9ADqk1qRP7E2o8ajEohyFpBFoOX0FlNQomME_G_eXLicO_ENYZn4JijUp08M9C5zC1Evw8VDOI26vY6vhjo_oJnzKX9y59aTH/s1600/helplogger.blogspot.com(14).gif'/> :p &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6hIQiCdL-SmBNZYzjQJC_D3eWDCQJQ2S-ugAx8nCDXOW-Geh-ytuanHEktOrdKJdXyqsnxWW8Q4pBmKfeAxes-iFmp3Fq3wJPDrU_OD6bSD_ZFIU6W8_oD59sL1Ju98y3fUrr79dxo1tH/s1600/helplogger.blogspot.com(17).gif'/> :q &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTmBJhOS_-bkLmWALvxyie5lfKf0_-tzdkYZMctA9JMVPtSJ8NMyqmMp-EDGGqwbAHBPid2DpZodBaqZkZJ2wjf_6WvUn7uXadRNQwNCGlyRSjz6vvEsxPUQCJEdM7WTr4wGLQqIZ5uAc/s1600/helplogger.blogspot.com(18).gif'/> :r &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH6n0se-cxP9CEUBCESdstUf3_g0y9fyHFV18z0A4mHme5Bez8C6YS_KFgjE3qgu5fDDPT6D-8VPme8k4n1BzU4SToDb9c-3fO5jyVqcAAkssyFbKV2h_pDmXU2Hixk8G_sw8HJkhhYbXI/s1600/helplogger.blogspot.com(19).gif'/> :s &#160; <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmHxVL9G3hCtSIgQBeo7EQ2rJ70ygGj930AEz5SiRmyGVOgNiC-Dno7GGZ0Jv8bjv4FG-RquJFzX_c8MPcF5-jcGjVKs5jz-FsugRX8W6heNhufUBtLQ0VhfNHYbPLykmnTDoSOiCfTGJ/s1600/helplogger.blogspot.com(20).gif'/> :t   <a href='http://helplogger.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a> </div></b:if></blockquote> Step 4. Now search for this piece of code: <blockquote class="tr_bq"> </body></blockquote> Step 5. And add the following code immediately above it: <ul> <li>For previous commenting system:</li> </ul> <blockquote class="tr_bq"> <script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/></blockquote> <ul> <li>For threaded comments: </li> </ul> <blockquote class="tr_bq"> <script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/></blockquote> Step 6. Save the Template. Now, enjoy your comments! <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <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> </div>

Add Facemoods Emoticons To Your Blogger Comments

Here are some amazingly funny emoticons compatible with your Blogger comments - also with threaded commenting system! If you want to know h...

Baca selengkapnya »

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

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="post-title entry-title" style="text-align: justify;"> <a class="zem_slink" href="http://en.wikipedia.org/wiki/Comment_%28computer_programming%29" rel="wikipedia" title="Comment (computer programming)">/*</a> 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 of the page content, especially when on the main page there are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.</div> <div class="separator" style="clear: both; text-align: center;"> <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> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> Demo You can see a live demo on my blog, the buttons are located on the right side. How to put Go Up and Go Down buttons using the <a class="zem_slink" href="http://jquery.com/" rel="homepage" title="JQuery">jQuery</a> slide effect <a class="zem_slink" href="http://en.wikipedia.org/wiki/USMLE_Step_1" rel="wikipedia" title="USMLE Step 1">Step 1</a>. 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 <div class="separator" style="clear: both; text-align: center;"> <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> Step 2. Select the "Expand Widget Templates" box <div class="separator" style="clear: both; text-align: center;"> <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> Step 3. 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: <blockquote class="tr_bq"> ]]></b:skin></blockquote> Step 4. Just above this code, paste this one: <blockquote class="tr_bq"> /* Up and Down Buttons with jQuery ----------------------------------------------- */ .button_up{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #<a class="zem_slink" href="http://en.wikipedia.org/wiki/Civilian_Conservation_Corps" rel="wikipedia" title="Civilian Conservation Corps">CCC</a>; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUdelsPJ5E4HdlQd4gr-ZLwIikDFNJga8uel0exKaBYyIpof9RY4hiPLCHFE2ATK23CFK_H7NDVlE7lzgWjA5sbyKaTu-P025GBefZqVZrp2LoP-tvGx37ou6NHNjkJayi_69JxrE_drE/s16/arrow_up.png) no-repeat top left; background-position:50% 50%; width:20px; /* <a class="zem_slink" href="http://en.wikipedia.org/wiki/Web_button" rel="wikipedia" title="Web button">Button</a>'s width */ height:20px; /* Button's height */ bottom:280px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } .button_down{ padding:7px; /* Distance between the border and the icon */ background-color:white; border:1px solid #CCC; /* Border Color */ position:fixed; background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZwTfp2whlkvJ8Potpv9stHiT6hE9crgoWGZYVpeZYo9VbdAmcZufhMsufDivyPZrc7lRTQvCg_5XODmo2gIXy5WOY30DrP9gjngdBlEan1qvaQcW3x5TkughVhQKhpHTpr1CPIIZ58s/s16/arrow_down.png) no-repeat top left; background-position:50% 50%; width:20px; /* Button's width */ height:20px; /* Button's height */ bottom:242px; /* Distance from the bottom */ right:5px; /* Change right to left if you want the buttons on the left */ white-space:nowrap; cursor: pointer; border-radius: 3px 3px 3px 3px; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }</blockquote> Note:  - in green are some annotations that explains what styles you can modify on their left side.            - 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 blue.            - To change the buttons background color of buttons, change the white text with your color Step 5. Now search (CTRL + F) for this tag: <blockquote> </body></blockquote> Step 6. And just above it, paste the following code: <blockquote class="tr_bq"> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <div class='button_up' id='button_up' style='display:none;'/> <div class='button_down' id='button_down' style='display:none;'/> <script> //CDATA[ (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _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 timer,handler=function(evt){var _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))}}})(); $(function() { var $elem = $('body'); $('#button_up').fadeIn('slow'); $('#button_down').fadeIn('slow'); $(window).bind('scrollstart', function(){ $('#button_up,#button_down').stop().animate({'opacity':'0.2'}); }); $(window).bind('scrollstop', function(){ $('#button_up,#button_down').stop().animate({'opacity':'1'}); }); $('#button_down').click( function (e) { $('html, body').animate({scrollTop: $elem.height()}, 800); } ); $('#button_up').click( function (e) { $('html, body').animate({scrollTop: '0px'}, 800); } );}); //]]> </script></blockquote> Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one. Step 7. Finally, Save your Template. Enjoy! <div class="post-title entry-title" style="text-align: justify;"> </div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <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> </div>

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...

Baca selengkapnya »

Membuat Widget Related Posts dengan Thumbnail pada Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> Cara menambahkan Widget Related Posts dengan Thumbnail pada Blogger Sekarang di sini adalah cara yang mudah untuk menampilkan posting terkait di bawah setiap posting blog Anda, bersama dengan thumbnail. Artikel-artikel terkait dipilih dari pesan lainnya dalam kategori yang sama / label / tag. Dengan cara ini banyak pembaca Anda akan tetap di blog Anda untuk waktu yang cukup lama ketika mereka melihat posting terkait kepentingan. <a name='more'></a> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"> <img alt="related post, related posts blogger, blogger widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgnBzmFx_MgyGdtA6NEjkDF53Yo0WKTRKjA663kE4HIIYRHo8d0UVjwEWZlmoPV3R27RGCkyPuqFJFTWo7M66MY-U04NAYYvg-ujZbqdSBLgxUSeaZ2cdUZTHkAHFUnZ18dPmYmaQyzp_O/s1600/related-posts-blogger.png" title="Related Posts Widget For Blogger" /></div> <div style="text-align: -webkit-auto;"> </div> </div> Langkah menambahkan Widget Related Posts ke Blogger / Blogspot Langkah 1. Buka <a href="http://www.blogger.com/home" style="color: #0b5394;">Blogger Dashboard</a> >> Template >>Edit HTML; Langkah 2. Centang pada "Expand widgets template" box; Langkah 3. Cari (CTRL + F) kode <head> dibawah ini: <blockquote class="tr_bq"> </head></blockquote> Langkah 4. Copy dan paste kode di bawah ini sebelum / di atas </head> <blockquote class="tr_bq">  <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Q4EGKs2KMqqTOf8ebDfs1ttdoalqEsqa7jmMxMMcUjnm_vsgYvZ9gDmDBzSjuclRFuvW_tmAHGuRHPHBl0jxcD2PlWor6ME2Zv0ceJC5GP5RfgWY-fh-8FOqWfCpOKht54qHaIIhWna2/s1600/no_image.jpg&quot;; var maxresults=5; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> </b:if> </blockquote> Note: - to change the default picture, replace the URL in blue with your own - for displaying more than 5 posts, replace 5 value from "var maxresults=5;" - remove the code in violet if you want the related posts to be displayed in homepage too Catatan: - Untuk mengubah gambar default, ganti URL yang berwarna biru dengan link gambar yang Anda miliki - Untuk menampilkan lebih dari 5 posting, ganti 5 nilai dari  "var maxresults=5;" - Hapus kode yang berwarna violet/ungu jika Anda ingin menampilkan widget ini dalam homepage juga Langkah 5. Sekarang cari kode berikut: <blockquote class="tr_bq">     <div class='post-footer'></blockquote> Langkah 6. Dan tepat di atasnya, copy dan paste kode di bawah ini: <blockquote class="tr_bq">  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJaNgGXiE2fRakkiuqHIpbMDX_WUFqQeUpfb7GZKjrTakroInsGCb4Ys8-6h08gSMQP0JoC-KU7EDNdhZIiWb8ndC3hFd-T1pPWxWCxm-RbXy0d8AEKVwj0PUkFHyJ7Tr-NqhSAS3OpWS/s1600/best+blogger+tips.png'/></a> </b:if></b:if> </blockquote> Note: - change the 6 value from max-results=6 with the number of posts you want to be displayed. - If you want the related posts to be displayed on homepage too, remove the code in violet. Catatan: - Ubah nilai 6 dari  max-results=6 dengan jumlah posting yang ingin ditampilkan. - Jika Anda ingin related post  ini ditampilkan pada homepage juga, hapus kode warna  violet/ungu. Langkah 7. Simpan Template Enjoy :) Credit goes to: <a href="http://bloggerpluggins.org/" rel="nofollow" target="_blank">bloggerpluggins.org</a> . Modified by kivandanu <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=b9b83919-29a1-4dbf-940d-05cbeff21651" style="border: none; float: right;" /></div> </div>

Membuat Widget Related Posts dengan Thumbnail pada Blogger

Cara menambahkan Widget Related Posts dengan Thumbnail pada Blogger Sekarang di sini adalah cara yang mudah untuk menampilkan postin...

Baca selengkapnya »

Facebook ID Lookup Finder Search Tool

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="zemanta-img" style="text-align: left;"> <div class="zemanta-img"> <a href="http://commons.wikipedia.org/wiki/File:Facebook.svg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Facebook logo Español: Logotipo de Facebook Fr..." border="0" class="zemanta-img-inserted" height="100" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Facebook.svg/266px-Facebook.svg.png" style="border: medium none; font-size: 0.8em;" width="266" /></a></div> </div> <div style="text-align: center;"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> <script src="http://www.internetmarketingninjas.com/javascripts/thickbox.js" type="text/javascript"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAo4tes30o759hWF4kfKGqJ1Hd3fijlG9Y&sensor=false" type="text/javascript"></script> <script src="http://www.internetmarketingninjas.com/javascripts/responsiveslides.min.js" type="text/javascript"></script> <script src="http://www.internetmarketingninjas.com/javascripts/prettify-files/prettify.js" type="text/javascript"></script> <script> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-24397327-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})(); !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s); js.id=id;js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}} (document,"script","twitter-wjs"); (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); var WRInitTime=(new Date()).getTime(); //]]> </script> <script type="text/javascript"> // Smooth scroll $('a[href*=#]').click(function () { var hash = $(this).attr('href'); hash = hash.slice(hash.indexOf('#') + 1); $.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500); window.location.hash = '#' + hash; return false; }); </script> <script> // DOM ready $(function() { // Create the dropdown base $("<select />").appendTo("header .container"); // Create default option "Go to..." $("<option />", { "selected": "selected", "value" : "", "text" : "Go to..." }).appendTo("header .container select"); // Populate dropdown with menu items $("header .container a").each(function() { var el = $(this); $("<option />", { "value" : el.attr("href"), "text" : el.text() }).appendTo("header .container select"); }); // To make dropdown actually work // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/ $("header .container select").change(function() { window.location = $(this).find("option:selected").val(); }); }); </script> <script> $(document).ready(function(){ $('option[value="../"]').remove(); $('option[value="http://www.facebook.com/IMNinjas"]').remove(); $('option[value="http://twitter.com/NinjasMarketing"]').remove(); $('option[value="https://plus.google.com/114148548840076318441"]').remove(); $('option[value="http://www.linkedin.com/company/internet-marketing-ninjas"]').remove(); $('option[value="http://pinterest.com/imninjas"]').remove(); $('option[value="http://instagram.com/internetmarketingninjas"]').remove(); $('option[value="http://www.youtube.com/user/IMarketingNinjas1"]').remove(); $('option[value="http://feeds.feedburner.com/WeBuildPages"]').remove(); }); </script> <script src="http://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js" type="text/javascript"></script>   </div> <div class="wrapper headline-service" style="text-align: center;"> <div id="arrow-interior"> <div class="container" style="padding: 0px 0px 0px 40px;"> <div> Facebook ID Lookup Finder Search Tool</div> <div id="subhead"> Identify your Facebook User ID or Page ID.</div> </div> </div> </div> <div style="text-align: center;">   </div> <div class="container group" style="text-align: center;">  <form class="tool-form large-form left"> Enter Your Facebook Username or URL (i.e. JohnDoe or http://www.facebook.com/JohnDoe) <input class="input-two-thirds" id="fbUser" name="fbUser" required="" type="text" /> <input class="btn-large" type="submit" value="Ninja Check" /> <fieldset class="results hidden"> <legend>Your Results</legend> Your Facebook ID is: <div class="fbID inline"> </div> </fieldset> </form>   <script> $(function() { // Clickable Dropdown $('.click-nav > ul').toggleClass('no-js js'); $('.click-nav .js ul').hide(); $('.click-nav .js').click(function(e) { $('.click-nav .js ul').slideToggle(200); $('.clicker').toggleClass('active'); e.stopPropagation(); }); $(document).click(function() { if ($('.click-nav .js ul').is(':visible')) { $('.click-nav .js ul', this).slideUp(); $('.clicker').removeClass('active'); } }); }); </script> <script type="text/javascript"> $('#nav li a').mouseover(function(){ // if the hovered link has a subnav span and isn't currently highlighted... if ($(this).next('span').length && !$(this).parent('li').hasClass('on')) { $('.on span').hide(); // hide current subnav $('.on').removeClass('on'); // remove 'on' class from current subnav $(this).parent('li').addClass('on'); // add 'on' class to new subnav $(this).next('span').show(); // show new subnav } }); </script> <script src="http://www.internetmarketingninjas.com/scripts/jquery.smoothscroll.js"></script> <script> $(function() { $('#scroll-wrap').smoothScroll(500); }); </script>  <div id="ClickTaleDiv" style="display: none;"> </div> <script type="text/javascript"> document.write(unescape("%3Cscript%20src='"+ (document.location.protocol=='https:'? 'https://clicktale.pantherssl.com/': 'http://s.clicktale.net/')+ "WRd.js'%20type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var ClickTaleSSL=1; if(typeof ClickTale=='function') ClickTale(8199,1,"www09"); </script>  <script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script> <script src="http://www.internetmarketingninjas.com/javascripts/libs/jquery.fixtable.min.js?" type="text/javascript"></script> <script src="http://www.internetmarketingninjas.com/javascripts/plugins.js" type="text/javascript"></script> <script src="http://www.internetmarketingninjas.com/javascripts/ui-tabs.js" type="text/javascript"></script> <script src="http://www.internetmarketingninjas.com/javascripts/script.js" type="text/javascript"></script> <script> $('form').submit(function(event){ event.preventDefault(); $('.results .fbID').html("<img src='/images/loading.gif' />"); // get Facebook ID var fbUser = $('input[name=fbUser]').val(); // if user entered a url, get just the username if (fbUser.split('/').length > 1) { var temp = fbUser.split('/'); fbUser = temp[temp.length-1]; } FB.api(fbUser, function(response) { if (response.id) { $('.results .fbID').html(response.id); } else { $('.results .fbID').html('No user record found for that username.'); } }); $('.results').show(); }); window.fbAsyncInit = function() { FB.init({ appId : '517992948221822', // App ID from the App Dashboard channelUrl : 'http://wwww.thisiswherewestoreourapps.com/fb/channel.php', // Channel File for x-domain communication status : true, // check the login status upon init? cookie : true, // set sessions cookies to allow your server to access the session? xfbml : true // parse XFBML tags on this page? }); }; (function(d, debug){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js"; ref.parentNode.insertBefore(js, ref); }(document, /*debug*/ false)); </script></div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=b9b83919-29a1-4dbf-940d-05cbeff21651" style="border: none; float: right;" /></div> </div>

Facebook ID Lookup Finder Search Tool

Facebook ID Lookup Finder Search Tool Identify your Facebook User ID or Page ID. Enter Your Facebook Username or U...

Baca selengkapnya »

CSS Box Shadow - Membuat Efek Bayangan pada Area

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="dte_post-body" itemprop="articleBody"> <div class="separator center"> <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> Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek: <h3> CSS Bayangan Outset</h3> <pre data-codetype="CSS" id="code-block:1"><code class="css">div { -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */ -moz-box-shadow:10px 10px 7px #222; /* Firefox */ box-shadow:10px 10px 7px #222; /* W3C */ }</code></pre> <h3> CSS Bayangan Inset</h3> <pre data-codetype="CSS" id="code-block:2"><code class="css">div { -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Chrome */ -moz-box-shadow:inset 10px 10px 7px #222; /* Firefox */ box-shadow:inset 10px 10px 7px #222; /* W3C */ }</code></pre> <code>10px</code> yang pertama adalah ukuran offset sumbu X, <code>10px</code> yang ke dua adalah offset sumbu Y, <code>7px</code> adalah tingkat blur, <code>#222</code> adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini: <table border="1" class="full compare"><thead> <tr><th style="width: 50%;">Top-Down</th><th style="width: 50%;">Inline</th></tr> </thead><tbody> <tr><td><code><style> #kotak-1 {   -webkit-box-shadow:10px 10px 7px #222;   -moz-box-shadow:10px 10px 7px #222;   box-shadow:10px 10px 7px #222; } </style> <div id='kotak-1'>OBJEK</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;'>OBJEK</div></code></td></tr> </tbody></table> Dan ini adalah contoh-contoh penerapan yang lebih detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas bagian mana yang harus menjadi perhatian: <div style="border: 1px solid #bbb; box-shadow: 10px 5px 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: 10px 5px 7px #222; -moz-box-shadow: 10px 5px 7px #222; box-shadow: 10px 5px 7px #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 0pt 10px 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: 0 10px 7px #222; -moz-box-shadow: 0 10px 7px #222; box-shadow: 0 10px 7px #222;</code></div> <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;"> <code>-webkit-box-shadow: 10px 0 7px #222; -moz-box-shadow: 10px 0 7px #222; box-shadow: 10px 0 7px #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: 0 0 7px #222;</code><code> -moz-box-shadow: 0 0 7px #222;</code> <code></code><code> box-shadow: 0 0 7px #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: 0 0 20px #222; -moz-box-shadow: 0 0 20px #222; box-shadow: 0 0 20px #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(241, 12, 12); margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: 0 0 20px #f10c0c; -moz-box-shadow: 0 0 20px #f10c0c; box-shadow: 0 0 20px #f10c0c;</code></div> <div style="border: 1px solid #bbb; box-shadow: 10px 5px 0pt rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: 10px 5px 0 #222; -moz-box-shadow: 10px 5px 0 #222; box-shadow: 10px 5px 0 #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: -10px -5px 0pt rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: -10px -5px 0 #222; -moz-box-shadow: -10px -5px 0 #222; box-shadow: -10px -5px 0 #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 10px 5px 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: inset 10px 5px 7px #222; -moz-box-shadow: inset 10px 5px 7px #222; box-shadow: inset 10px 5px 7px #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 0pt 10px 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: inset 0 10px 7px #222; -moz-box-shadow: inset 0 10px 7px #222; box-shadow: inset 0 10px 7px #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 10px 0pt 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: inset 10px 0 7px #222; -moz-box-shadow: inset 10px 0 7px #222; box-shadow: inset 10px 0 7px #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: inset 0 0 7px #222; -moz-box-shadow: inset 0 0 7px #222; box-shadow: inset 0 0 7px #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: inset 0 0 20px #222; -moz-box-shadow: inset 0 0 20px #222; box-shadow: inset 0 0 20px #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(241, 12, 12) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: inset 0 0 20px #f10c0c; -moz-box-shadow: inset 0 0 20px #f10c0c; box-shadow: inset 0 0 20px #f10c0c;</code></div> <div style="border: 1px solid #bbb; box-shadow: 10px 5px 0pt rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: inset 10px 5px 0 #222; -moz-box-shadow: inset 10px 5px 0 #222; box-shadow: inset 10px 5px 0 #222;</code></div> <div style="border: 1px solid #bbb; box-shadow: -10px -5px 0pt rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"> <code>-webkit-box-shadow: inset -10px -5px 0 #222; -moz-box-shadow: inset -10px -5px 0 #222; box-shadow: inset -10px -5px 0 #222;</code></div> </div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <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> </div>

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...

Baca selengkapnya »

Menjaga Keadaan Hover pada Menu Induk

<div dir="ltr" style="text-align: left;" trbidi="on"> Masalah yang tampak kecil tapi kita harap bisa diperbaiki adalah mengenai efek hover menu induk pada navigasi bertingkat yang akan menghilang setelah pointer memasuki submenu: <figure class="separator center"><a href="http://1.bp.blogspot.com/-g5I5rUbMXUs/T5JuyA_v3XI/AAAAAAAACiQ/roNfo638Nvs/s1600/before.png" title="Menu Navigasi Sebelum Diperbaiki"><img alt="Menu Navigasi Sebelum Diperbaiki" src="http://1.bp.blogspot.com/-g5I5rUbMXUs/T5JuyA_v3XI/AAAAAAAACiQ/roNfo638Nvs/s1600/before.png" /></a><figcaption>Efek hover pada menu induk menghilang saat pointer memasuki submenu</figcaption></figure> <div class="button-group"> Sebelum</div>  <iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="http://jsfiddle.net/ETBLz/32/embedded/" width="100%"></iframe> Itu terjadi karena pada umumnya kita menargetkan efek hover pada elemen tautan saja seperti ini: <pre id="code-block:1" rel="CSS"><code class="css">nav li a:hover { background-color:blue; }</code></pre> Padahal yang seharusnya kita targetkan adalah elemen list/daftar yang menjadi induk dari submenu, karena submenu berada di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code>, bukan di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code>: <figure class="separator center"><a href="http://1.bp.blogspot.com/-hUMSVLsKD6w/T5Jwcfi-XDI/AAAAAAAACig/arSakXojw2o/s1600/inside-li-element.png" title="Submenus"><img alt="List Item" src="http://1.bp.blogspot.com/-hUMSVLsKD6w/T5Jwcfi-XDI/AAAAAAAACig/arSakXojw2o/s1600/inside-li-element.png" /></a><figcaption>Susunan Submenu</figcaption></figure> Sayangnya menargetkan elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> secara sepihak untuk mempertahankan warna menu induk tidak bisa kita lakukan karena efek hover berada pada elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code>, sehingga saat pointer keluar dari <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code> maka efek hover akan menghilang. Tapi berbeda jika kita menargetkan elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> kemudian memanfaatkan sikap hover pada elemen tersebut untuk mengeset warna direct children tautan di dalamnya: <pre id="code-block:2" rel="CSS"><code class="css">nav li a:hover, nav li:hover > a { background-color:blue; }</code></pre> Dengan cara di atas maka warna pada menu induk akan tetap terjaga meskipun pointer sudah meninggalkannya. Karena meskipun sudah keluar, tapi pada dasarnya pointer masih berada di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> induk: <figure class="separator center"><a href="http://3.bp.blogspot.com/-EQJmE5jSgvg/T5Ju2LTb89I/AAAAAAAACiY/Ukz2E1-2rDo/s1600/after.png" title="Menu Navigasi Sesudah Diperbaiki"><img alt="Menu Navigasi Sesudah Diperbaiki" src="http://3.bp.blogspot.com/-EQJmE5jSgvg/T5Ju2LTb89I/AAAAAAAACiY/Ukz2E1-2rDo/s1600/after.png" /></a><figcaption>Warna hover pada menu induk tetap terjaga</figcaption></figure> <div class="button-group"> Sesudah</div> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="http://jsfiddle.net/tovic/ETBLz/1/embedded/" width="100%"></iframe> ajb@2013</div>