hotbizindo

iFrame “Auto Height” dengan Jquery

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> Dalam tag tidak berlaku untuk elemen style=”height:100%” melainkan yang bisa berlaku hanya style=”width:100%”. Untuk membuatnya menjadi auto height 100% bisa menggunakan jQuery Jadi berapapun ukuran iframe akan tetap menyesuaikan secara otomatis, sehingga seolah-seolah tidak memakai iframe. </div> Caranya : - masukkan jQuery library, terserah pakai yang versi keberapa <script type="text/javascript" src="jquery-1.6.2.js"></script> - masukkan jQuery buat auto height iframe <script type="text/javascript" src="https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.iframe-auto-height.js"></script> - masukkan script iframe, untuk jQuery ini akan otomatis mendeteksi semua iframe menjadi auto height <iframe src="iframe.html" width="100%" scrolling="no" frameborder="0"></iframe> - masukkan fungsi javascript iframe autoheight <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> - Simpan dan lihat hasilnya <a href="https://www.dropbox.com/s/f6hkh5p7gvvnqrc/jQuery%20iFrame%20autoheight.rar">Download Script Lengkap</a> Source Script : <a href="https://github.com/house9/jquery-iframe-auto-height">https://github.com/house9/jquery-iframe-auto-height</a> <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=1e59e869-d6dc-4918-9ea6-c0f9350940c2" style="border: none; float: right;" /></div> </div>

iFrame “Auto Height” dengan Jquery

Dalam tag tidak berlaku untuk elemen style=”height:100%” melainkan yang bisa berlaku hanya style=”width:100%”. Untuk membuatnya menjadi aut...

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 »

Recent Comments Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <table cellpadding="0" cellspacing="0" class="tr-caption-container zemanta-img" style="float: left; margin-right: 1em; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href="http://commons.wikipedia.org/wiki/File:Blogger.svg" imageanchor="1" style="margin-bottom: 1em; margin-left: auto; margin-right: auto; text-align: clear:left;"><img alt="This is icon for social networking website. Th..." border="0" class="zemanta-img-inserted" height="256" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blogger.svg/256px-Blogger.svg.png" style="border: none; font-size: 0.8em;" width="256" /></a></td></tr> <tr><td class="tr-caption zemanta-img-attribution" style="text-align: center; width: 256px;">This is icon for social networking website. This is part of Open Icon Library's webpage icon package. (Photo credit: <a href="http://commons.wikipedia.org/wiki/File:Blogger.svg">Wikipedia</a>)</td></tr> </tbody></table> The Recent Comments Widget for <a class="zem_slink" href="http://blogger.com/" rel="homepage" title="Blogger">Blogger</a> displays the recent blog comments on your blog's sidebar, showing a snippet of the last comments along with the title of the post to which the comment was made. If you want to encourage your readers in leaving comments on your blog, this is a widget I would recommend. How To Install The Recent Comments Widget For Blogger Step 1. Go to your <a href="http://www.blogger.com/home">Blogger Dashboard</a> >> <a class="zem_slink" href="http://en.wikipedia.org/wiki/Layout_%28computing%29" rel="wikipedia" title="Layout (computing)">Layout</a> >> Add a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Gadget" rel="wikipedia" title="Gadget">Gadget</a> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqlpF4G4uzG2-kLltLLOYumgsgAwXCx1lsI8j12Egmawwh17bTqzHD8wHBibFXW7IROTHPPiCmDIOFAEM5hXxYcotSj4qrZLACH3WSHVWKYLwwUAFOqGladhRuBUkkSQ308An6Gm_MCaF/s1600/add-a-gadget-blogger-layout.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqlpF4G4uzG2-kLltLLOYumgsgAwXCx1lsI8j12Egmawwh17bTqzHD8wHBibFXW7IROTHPPiCmDIOFAEM5hXxYcotSj4qrZLACH3WSHVWKYLwwUAFOqGladhRuBUkkSQ308An6Gm_MCaF/s1600/add-a-gadget-blogger-layout.png" width="640" /></a></div> Step 2. From the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Pop-up_ad" rel="wikipedia" title="Pop-up ad">pop-up window</a>, scroll down and choose the HTML/JavaScript option: <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjitCa_LLYF1RNAe5kQny7Hw-wsbz5gCMRXUlKbeLb3fC5Syp_Z7Q-7wj-g4mcot_Fc-obhR-ivaQOwC1WLNjoVa9aMU44jDKaakasREcg59-TfmtPLLpnIFCsV4yu4zAmZJVPXqc7vGUwl/s1600/html-javascript-blogger-gadgets-widgets.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjitCa_LLYF1RNAe5kQny7Hw-wsbz5gCMRXUlKbeLb3fC5Syp_Z7Q-7wj-g4mcot_Fc-obhR-ivaQOwC1WLNjoVa9aMU44jDKaakasREcg59-TfmtPLLpnIFCsV4yu4zAmZJVPXqc7vGUwl/s1600/html-javascript-blogger-gadgets-widgets.png" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> Step 3. Now <a class="zem_slink" href="http://en.wikipedia.org/wiki/Cut%2C_copy%2C_and_paste" rel="wikipedia" title="Cut, copy, and paste">copy and paste</a> the below code in the HTML/JavaScript box: <blockquote class="tr_bq"> <script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style></blockquote> Step 4. Replace your-blog-name with your blog url. Step 5. Click Save and you're done. Hope you'll enjoy it! <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=533c6004-8952-46fd-aa66-d00b63f8509f" style="border: none; float: right;" /></div> </div>

Recent Comments Widget For Blogger

This is icon for social networking website. This is part of Open Icon Library's webpage icon package. (Photo credit: Wikipedia ) The Rec...

Baca selengkapnya »