Cara membuat menu navigasi blog versi mobile (HP/Smartphone)

By Rhm-Files on 04.29.00

<div id="post1531614318183487594">
<div style="text-align: left;">
MENU navigasi blog responsive
 dropdown berikut ini khusus hanya muncul di tampilan versi mobile 
(HP/SmartPhone), tidak muncul di komputer desktop.</div>
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yX0-mavOyFLm7KsprngqlWZGUajb9_A7Q2liAD099r3WGCcFK7EdeOHtA6C9CTxZ3eLMBs7SMh6190G_Qb1rIvocXba7s3450yaXlNfu9i7YMMs78iD20XwM32XkGb4diMRL10BI6QOV/s1600/index.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yX0-mavOyFLm7KsprngqlWZGUajb9_A7Q2liAD099r3WGCcFK7EdeOHtA6C9CTxZ3eLMBs7SMh6190G_Qb1rIvocXba7s3450yaXlNfu9i7YMMs78iD20XwM32XkGb4diMRL10BI6QOV/s1600/index.jpeg" /></a></div>
 
Bagaimana Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP saja? Yang pernah <a href="http://www.contohblog.com/" rel="nofollow" target="_blank">CB</a> praktikkan adalah sebagai berikut: 
 
1. Letakkan kode berikut ini DI ATAS kode </head> 
<blockquote class="tr_bq">
<div style="background-color: #fafafc; border: 1px solid #ddd; padding: 10px; text-align: left;">
<style type="text/css"> 
   .mobileShow { display: none;} 
   /* Smartphone Portrait and Landscape */ 
   @media only screen 
   and (min-device-width : 320px) 
   and (max-device-width : 480px){ .mobileShow { display: inline;}} 
</style></div>
</blockquote>
2. Letakkan kode berikut ini DI ATAS kode <div id='header-wrapper'> 
<blockquote class="tr_bq">
<div style="background-color: #fafafc; border: 1px solid #ddd; padding: 10px; text-align: left;">
<div class="mobileShow"> 
<div style='background-color:#ddd;height:20px;padding:10px;text-align:right'> 
<a href="/">Home</a> -  
<a href="#">About</a> -  
<a href="#">Sitemap</a> -  
<a href="#">Contact</a> -  
<a href="#">Link</a> 
</div> 
</div></div>
</blockquote>
Anda juga bisa meletakkannya di bawah kode <div id='header-wrapper'>
 jika ingin memunculkan menu khusus versi mobile ini di bawah logo/nama 
blog, tapi nanti akan "bentrok" dengan menu versi mobile yang sudah ada. 
 
3. Save Template! 
4. Test langsung di HP Anda! 
 
Sumber: <a href="http://blog.hubspot.com/marketing/site-content-only-mobile-viewers-can-see-ht" rel="nofollow" target="_blank">HubSpot</a>. 
<h3>
Cara Lain Membuat Menu Navigasi Blog Khusus buat Tampilan di HP</h3>
Cara lainnya adalah sebagai berikut. Namun, sebelumnya Anda bisa lihat dulu <a href="http://static-html-theme.blogspot.co.id/2015/07/responsive-menu.html?m=1" rel="nofollow" target="_blank">DEMO</a>. Minimize browser Anda! 
 
Gambarnya navigasi menu responsive dropdown khusus HP sebagai berikut (tampilan mobile saja, di dekstop gak muncul): 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
 
Cara Membuatnya: 
1. Template > Edit HTML 
2. Copas kode berikut ini di bawah kode <head> atau di atas kode </head> 
<blockquote class="tr_bq">
<div style="background-color: #fafafc; border: 1px solid #ddd; padding: 10px; text-align: left;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>  
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>  
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/></div>
</blockquote>
Catatan: 
Jika di template blog Anda sudah ada tiga kode di atas --jQuery library, FontAwesome, dan font Oswald, abaikan langkah di atas! 
 
 3. Copas kode berikut ini di atas kode </head> 
<blockquote class="tr_bq">
<div style="background-color: #fafafc; border: 1px solid #ddd; padding: 10px; text-align: left;">
<style> 
 
.sf-menu a.home:before,#searchnya 
button:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}.highlight{background-color:#f09903;color:#1a1308}#searchnya{float:right;width:80%;position:relative;right:0}.siy{bottom:0;left:0;background:none;font-size:19px;color:#fff}#searchnya
 input{padding:5px 10px;width:75%;margin:5px 0 
0;background-color:#FFF;height:21px;box-shadow:1px 2px 4px #A2A2A2 
inset;position:relative}#searchnya input,#searchnya 
button{border:0;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;outline:0;font-size:14px;font-family:oswald;color:#BDB5B5;font-weight:400}#searchnya
 
button{background-color:#6FC415;padding:0;width:15%;height:31px;margin-right:5px;cursor:pointer;position:relative;top:0}#searchnya
 button:hover{background:#76D314}  
#navitions{background-color:#242729;border-bottom:0px
 solid #6FC415;box-shadow:0 1px 9px 
#666;display:none}#mobilenav{display:none}#nav1{height:40px;position:relative;background:#242729;box-shadow:1px
 2px 9px #6FC415}.sf-menu,.sf-menu 
*{list-style:none;margin:0;padding:0}.sf-menu 
li{white-space:normal;-moz-transition:background-color 
.2s;-webkit-transition:background-color .2s;transition:background-color 
.2s;position:relative}.sf-menu 
ul{position:absolute;display:none;top:100%;left:0;z-index:99;min-width:12em;padding-top:4px;width:100%}.sf-menu
 &gt; li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover 
&gt; ul,.sf-menu li.sfHover &gt; ul{display:block}.sf-menu 
a{display:block;position:relative;height:40px;line-height:40px;text-decoration:none;zoom:1;color:#FFF;font-size:100%;padding:0
 15px; font-family:oswald; -webkit-transition:all .4s ease-in-out; 
-moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; 
-ms-transition:all .4s ease-in-out;transition:all .4s 
ease-in-out;}.sf-menu &gt; li &gt; 
a{font-size:105%;font-family:oswald}.sf-menu ul 
ul{top:0;left:100%}.sf-menu{float:left}.sf-menu 
a.home{background-color:#A30000;margin-left:4px;text-indent:-9999px;padding:0}.sf-menu
 li:hover{background:#222}.sf-menu ul 
li{background-color:#242729}.sf-menu ul 
li:hover{background-color:#333}.sf-menu ul 
a{font-weight:400;height:30px;line-height:30px;font-family:oswald,arial}.sf-menu
 ul ul li{background:#3C3C3C}.sf-menu li:hover &gt; a,.sf-menu 
li.sfHover,.sf-menu &gt; li &gt; 
a.current{-moz-transition:none;-webkit-transition:none;transition:none}.sf-arrows
 .sf-with-ul{padding-right:1em}.sf-arrows 
.sf-with-ul:after{content:&#39;&#39;;position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px
 solid transparent;border-top-color:#FFF}.sf-arrows &gt; li &gt;
 .sf-with-ul:focus:after,.sf-arrows &gt; li:hover &gt; 
.sf-with-ul:after,.sf-arrows &gt; .sfHover &gt; 
.sf-with-ul:after{border-top-color:#FFF}.sf-arrows ul 
.sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent
 transparent transparent #FFF}.sf-arrows ul li &gt; 
.sf-with-ul:focus:after,.sf-arrows ul li:hover &gt; 
.sf-with-ul:after,.sf-arrows ul .sfHover &gt; 
.sf-with-ul:after{border-left-color:#FFF}.sf-menu li &gt; 
i{position:absolute;top:15px;right:15px;width:27px;height:22px;cursor:pointer;display:none;background-color:#6FC415;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0;font:12px
 Verdana,Geneva,sans-serif}.sf-menu li &gt; 
i:after{content:&#39;+&#39;;color:#FFF;font-size:19px;position:absolute;left:5px;top:-2px}.sf-menu
 li ul li i:after{left:3px;font-size: 16px;top: -1px;} .sf-menu li ul li
 i.active:after  {left: 4px;font-size: 26px;top: -8px;}  
.sf-menu li &gt; ul li 
i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;
 width:20px; height:20px;}  
.sf-menu li &gt; 
i.active:after{content:&#39;-&#39;;font-size:36px;top:-14px}.sf-menu
 a.home{position:relative}.sf-menu 
a.home:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;height:30px;top:0;font-size:27px;left:9px}.sf-menu
 a.home:before,#view a:before{text-indent:0}html 
{-webkit-text-size-adjust: 100%;}  
@media only screen and (max-width:320px){#searchnya input{width:67%}}  
@media only screen and (max-width:768px) { </div>
</blockquote>
</div>
<div class="googlepublisherads" style="margin: 20px 0;">
<center>

</center>
</div>
<blockquote class="tr_bq">
#navitions{display:block}#nav1{width:100%}#mobilenav{display:block;text-indent:-9999px;width:35px;top:4px;left:10px;position:absolute;height:32px;outline:0;background-color:#6FC415;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFF;text-decoration:none}#mobilenav.active{color:#fff}#mobilenav:before{content:&quot;f0c9&quot;;top:3px;text-indent:0;left:7px;font-size:26px}#menunav{float:none;display:none;position:absolute;top:45px;left:10px;right:10px;z-index:99999999;background-color:#242729;padding:5px
 10px}#menunav li{float:none;margin:0}#menunav &gt; li{margin:1px 
0}.sf-menu a.home,.sf-menu 
a{text-indent:0;margin-left:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D!important;padding:5px
 20px;border:0}.sf-menu 
a:hover{background-color:#2c2c2c!important}.sf-menu 
ul{position:static;padding-top:0}.sf-menu ul 
a{padding-left:30px}.sf-menu ul ul li a{padding-left:50px; }.sf-menu ul 
ul ul li a{padding-left:60px; }.sf-menu a.home,.sf-menu li:hover 
&gt; a.home,.sf-menu &gt; li &gt; 
a.current{color:#FFF;background-color:#cd2122}.sf-menu ul 
a:hover{padding-left:40px}.sf-menu ul ul 
a:hover{padding-left:60px}.sf-menu a.home:before,.sf-menu li:hover 
&gt; ul,.sf-menu li.sfHover &gt; ul{display:none}.sf-menu ul 
li,.sf-menu ul ul li,.sf-menu li:hover &gt; a,.sf-menu 
li.sfHover{background-color:transparent}.sf-menu 
a.home:before,#mbt-search-layout 
button:before,#mobilenav:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit}  
}  
</style> 
<script type='text/javascript'>  
//<![CDATA[  
// Superfish v1.7.2 - jQuery menu widget - Joel Brich  
(function(b){var a=(function(){var 
p={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},f=/iPhone|iPad|iPod/i.test(navigator.userAgent),k=(function(){var
 c=document.documentElement.style;return("behavior" in c&&"fill"
 in 
c&&/iemobile/i.test(navigator.userAgent))})(),d=(function(){if(f){b(window).load(function(){b("body").children().on("click",b.noop)})}})(),m=function(s,t){var
 c=p.menuClass;if(t.cssArrows){c+=" 
"+p.menuArrowClass}s.toggleClass(c)},r=function(c,s){return 
c.find("li."+s.pathClass).slice(0,s.pathLevels).addClass(s.hoverClass+" 
"+p.bcClass).filter(function(){return(b(this).children("ul").hide().show().length)}).removeClass(s.pathClass)},n=function(c){c.children("a").toggleClass(p.anchorClass)},g=function(c){var
 
s=c.css("ms-touch-action");s=(s==="pan-y")?"auto":"pan-y";c.css("ms-touch-action",s)},j=function(t,u){var
 
c="li:has(ul)";if(b.fn.hoverIntent&&!u.disableHI){t.hoverIntent(l,h,c)}else{t.on("mouseenter.superfish",c,l).on("mouseleave.superfish",c,h)}var
 s="MSPointerDown.superfish";if(!f){s+=" touchend.superfish"}if(k){s+=" 
mousedown.superfish"}t.on("focusin.superfish","li",l).on("focusout.superfish","li",h).on(s,"a",i)},i=function(t){var
 
s=b(this),c=s.siblings("ul");if(c.length>0&&c.is(":hidden")){s.one("click.superfish",false);if(t.type==="MSPointerDown"){s.trigger("focus")}else{b.proxy(l,s.parent("li"))()}}},l=function(){var
 
c=b(this),s=o(c);clearTimeout(s.sfTimer);c.siblings().superfish("hide").end().superfish("show")},h=function(){var
 
c=b(this),s=o(c);if(f){b.proxy(q,c,s)()}else{clearTimeout(s.sfTimer);s.sfTimer=setTimeout(b.proxy(q,c,s),s.delay)}},q=function(c){c.retainPath=(b.inArray(this[0],c.$path)>-1);this.superfish("hide");if(!this.parents("."+c.hoverClass).length){c.onIdle.call(e(this));if(c.$path.length){b.proxy(l,c.$path)()}}},e=function(c){return
 c.closest("."+p.menuClass)},o=function(c){return 
e(c).data("sf-options")};return{hide:function(s){if(this.length){var 
v=this,w=o(v);if(!w){return this}var 
t=(w.retainPath===true)?w.$path:"",c=v.find("li."+w.hoverClass).add(this).not(t).removeClass(w.hoverClass).children("ul"),u=w.speedOut;if(s){c.show();u=0}w.retainPath=false;w.onBeforeHide.call(c);c.stop(true,true).animate(w.animationOut,u,function(){var
 x=b(this);w.onHide.call(x)})}return this},show:function(){var 
t=o(this);if(!t){return this}var 
s=this.addClass(t.hoverClass),c=s.children("ul");t.onBeforeShow.call(c);c.stop(true,true).animate(t.animation,t.speed,function(){t.onShow.call(c)});return
 this},destroy:function(){return this.each(function(){var 
s=b(this),t=s.data("sf-options"),c=s.find("li:has(ul)");if(!t){return 
false}clearTimeout(t.sfTimer);m(s,t);n(c);g(s);s.off(".superfish").off(".hoverIntent");c.children("ul").attr("style",function(u,v){return
 v.replace(/display[^;]+;?/g,"")});t.$path.removeClass(t.hoverClass+" 
"+p.bcClass).addClass(t.pathClass);s.find("."+t.hoverClass).removeClass(t.hoverClass);t.onDestroy.call(s);s.removeData("sf-options")})},init:function(c){return
 this.each(function(){var t=b(this);if(t.data("sf-options")){return 
false}var 
u=b.extend({},b.fn.superfish.defaults,c),s=t.find("li:has(ul)");u.$path=r(t,u);t.data("sf-options",u);m(t,u);n(s);g(t);j(t,u);s.not("."+p.bcClass).superfish("hide",true);u.onInit.call(this)})}}})();b.fn.superfish=function(d,c){if(a[d]){return
 a[d].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof
 d==="object"||!d){return a.init.apply(this,arguments)}else{return 
b.error("Method "+d+" does not exist on 
jQuery.fn.superfish")}}};b.fn.superfish.defaults={hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:true,
 disableHI:false,onInit:b.noop,onBeforeShow:b.noop, 
onShow:b.noop,onBeforeHide:b.noop,onHide:b.noop,onIdle:b.noop, 
onDestroy:b.noop};b.fn.extend({hideSuperfishUl:a.hide,showSuperfishUl:a.show})})(jQuery);  
function 
menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return
 false});b(".sf-menu ul").each(function(){var 
d=b(this).parent("li");d.append("")});function 
a(){var 
d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu
 
i").css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu
 
i").css("display","block")}else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu
 i").css("display","block")}}}}a();b(window).resize(a);b(".sf-menu 
i").click(function(){var d=b(this).parent("li");var 
e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return 
false});var c=window.location.href;b("#menunav 
a").each(function(){if(this.href===c){var 
d=b(this).parents("li").children("a").addClass("current")}})};       
//]]>  
 
</script>
</blockquote>
<div>
</div>

4. Copas kode berikut ini di bawah kode <body> 
<blockquote class="tr_bq">
<div style="background-color: #fafafc; border: 1px solid #ddd; padding: 10px; text-align: left;">
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> 
<div id='navitions'> 
        <div class='isi'> 
          <nav class='navix' id='nav1'> 
<div id='searchnya'> 
               <form action='/search'> 
           <input name='q' onblur='if (&apos;&apos; === 
this.value) {this.value = &apos;Search here…&apos;;}' 
onfocus='if (&apos;Search here…&apos; === this.value) 
{this.value = &apos;&apos;;}' type='text' value='Search 
here…'/> 
                <button title='Search' type='submit'> 
                  
                </button> 
              </form> 
            </div> 
            <a href='#' id='mobilenav'> 
              Select Menu 
            </a> 
            <ul class='sf-menu' id='menunav'> 
              <li> 
                <a class='home' expr:href='data:blog.homepageUrl'> 
                  Home 
                </a> 
              </li> 
<li><a href='#'>LINK TEXT </a></li> 
<li><a href='#'>LINK TEXT </a></li> 
<li><a href="#">DROPDOWN MENU</a> 
<ul> 
<li><a href="#">Submenu 1</a></li> 
<li><a href="#">Submenu 2</a></li> 
<li><a href="#">Submenu 3</a></li> 
</ul> 
</li> 
                   </ul> 
          
            <script type='text/javascript'> 
              //<![CDATA[ 
              menunav (jQuery); 
              //]]> 
            </script> 
          </nav> 
        </div> 
      </div> 
    </b:if></div>
</blockquote>
5. Saatnya menyembunyikan Menu Desktop di Mobile Device (Jika navigasi 
menu blog Anda tidak responsive), yaitu dengan menambahkan <a href="http://www.contohblog.com/2015/09/kode-tag-kondisional--mengatur-widget-blog.html" target="_blank">Tag Kondisional</a>. 
<blockquote class="tr_bq">
<div style="background-color: #fafafc; border: 1px solid #ddd; padding: 10px; text-align: left;">
<b:if cond='data:blog.isMobileRequest == "false"'> 
Kode Menu Desktop Anda di Sini 
</b:if></div>
</blockquote>
6. Save template!

Updated at: 04.29.00

Free Download Kumpulan Program project Visual Basic 6.0

By Rhm-Files on 22.51.00

<div dir="ltr" style="text-align: left;">
 
<div class="separator" style="clear: both; text-align: center;">
</div>

</div>
<div dir="ltr" style="text-align: left;">
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikMCIonZqrijrHW13AbTEf9iUWUvD4iSz4WDfOLMjw2p5d6fsEJ-hh_RS90MnvjksbKExCZpegt9oKCXF1lkOZIBGPNeQbPVQd-VgG-OLcMJH0UlJxbJeBSs9AWf13wLfBFr66ubjdg8ZH/s1600/index.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikMCIonZqrijrHW13AbTEf9iUWUvD4iSz4WDfOLMjw2p5d6fsEJ-hh_RS90MnvjksbKExCZpegt9oKCXF1lkOZIBGPNeQbPVQd-VgG-OLcMJH0UlJxbJeBSs9AWf13wLfBFr66ubjdg8ZH/s320/index.jpeg" width="320" /></a></div>
</div>
<div dir="ltr" style="text-align: left;">
 
* Jasa Bengkel 
<a href="http://adf.ly/G1SAR" target="_blank">Download</a> 
 
* Toko Komputer 
<a href="http://adf.ly/G1SEm" target="_blank">Download</a> 
 
* SMS Manager 
<a href="http://adf.ly/G1SI2" target="_blank">Download</a> 
 
* Koleksi SMS Gateway 
<a href="http://adf.ly/G1SJN" target="_blank"> http://www.ziddu.com/download/8930202/IndoprogSMS.zip.html</a> 
 
* Program Penerimaan Mahasiswa Baru 
<a href="http://adf.ly/G1SRy" target="_blank"> http://www.ziddu.com/download/8896291/Penerimaan_Mahasiswa_Baru.zip.html</a> 
 
* Billing 
<a href="http://adf.ly/G1STV" target="_blank"> http://www.ziddu.com/download/8896584/Visual_Basic_Billing.zip.html</a> 
 
* Sistem Informasi Persediaan Sepatu 
<a href="http://adf.ly/G1SUv" target="_blank">http://www.ziddu.com/download/8896587/SistemInformasiPersediaanSepat.rar.html</a> 
 
* Penjualan Toko Retail 
<a href="http://adf.ly/G1SWG" target="_blank">http://www.ziddu.com/download/8930119/retail.zip.html</a> 
 
* Penjualan Tunai Kredit 
<a href="http://adf.ly/G1SXA" target="_blank"> http://www.ziddu.com/download/8930120/735464501b4bce254493cf17c1d14f14.rar.html</a> 
 
* Penjualan Toko Komputer 
<a href="http://adf.ly/G1SYm" target="_blank">http://www.ziddu.com/download/8930116/penjualan.rar.html</a> 
 
* Aplikasi Gaji Karyawan 
<a href="http://adf.ly/G1SaK" target="_blank">http://www.ziddu.com/download/8584511/Penggajian.rar.html</a> 
 
* Program Rumah Sakit/ Puskesmas 
<a href="http://adf.ly/G1SbH" target="_blank">http://www.ziddu.com/download/8896583/Rumah_Sakit.rar.html</a> 
 
* Program Pasien 
<a href="http://adf.ly/G1Sc9" target="_blank">http://www.ziddu.com/download/8896585/SISTEM_INFORMASI_PASIEN.zip.html</a> 
 
* Program Stok Obat 
<a href="http://adf.ly/G1SdA" target="_blank">http://www.ziddu.com/download/8895960/SistemPersediaanObat.rar.html</a> 
 
* Sistem Supermarket 
<a href="http://adf.ly/G1Ses" target="_blank">http://www.ziddu.com/download/8896653/Supermarke1732534122004.zip.html</a> 
 
* Sistem Informasi Persediaan Barang 
<a href="http://adf.ly/G1Sgg" target="_blank">http://www.ziddu.com/download/8896582/SistemInformasiPersediaanBaran.rar.html</a> 
 
* Software Akuntansi menggunakan Excel 
<a href="http://adf.ly/G1Shw" target="_blank">http://www.ziddu.com/download/8896654/software_aplikasi_akuntansi_ex.rar.html</a> 
 
* Koperasi 
<a href="http://adf.ly/G1SjK" target="_blank">http://www.ziddu.com/download/8895959/Koperasi.rar.html</a> 
 
* Hotel 
<a href="http://adf.ly/G1Skp" target="_blank">http://www.ziddu.com/download/8895846/Aplikasi_Pengelolaan_Hotel.rar.html</a> 
 
* Program Penjualan Tiket Pesawat 
<a href="http://adf.ly/G1Sma" target="_blank">http://www.ziddu.com/download/8896290/Penjualan_Tiket_Pesawat.rar.html</a> 
 
* Bar Rest 
<a href="http://adf.ly/G1Snr" target="_blank">http://www.ziddu.com/download/8896652/BarRest.rar.html</a> 
 
* Aplikasi sidik Jari 
<a href="http://adf.ly/G1SpR" target="_blank">http://www.ziddu.com/download/8930118/FingerPrintdtbase.ZIP.html</a> 
 
* Sistem Pakar 
<a href="http://adf.ly/G1Sqm" target="_blank">http://www.ziddu.com/download/8930117/expertsystem.rar.html</a> 
 
<div>
<div>
* Aplikasi Penjualan Koran</div>
<div>
<a href="http://adf.ly/G1Ssg" target="_blank">http://www.ziddu.com/download/8584546/SistemAplikasiPenjualanKoran.zip.html</a></div>
</div>
<div>
</div>
<div>
<div>
</div>
<div>
* Program Rental DVD</div>
<div>
<a href="http://adf.ly/G1Su9" target="_blank">http://www.ziddu.com/download/8896586/SISTEM_APLIKASI_RENTAL_DVD.zip.html</a></div>
</div>
<div>
</div>
<div>
<div>
</div>
<div>
* Rental video</div>
<div>
<a href="http://adf.ly/G1Swj" target="_blank">http://www.ziddu.com/download/8896287/Rental_Video.rar.html</a></div>
</div>
<div>
 
</div>
<div>
<div>
* Penyewaan DVD</div>
<div>
<a href="http://adf.ly/G1Sy8" target="_blank">http://www.ziddu.com/download/8895848/Rental_DVD.rar.html</a> 
 
* Aplikasi Penjualan Koran 
<a href="http://adf.ly/G1SzN" target="_blank">http://www.4shared.com/zip/XW5r0jex/Sistem_Aplikasi_Penjualan_Kora.html</a> 
 
* Aplikasi Angsuran Barang  
<a href="http://adf.ly/G1T0O" target="_blank">http://www.ziddu.com/download/3313879/Aplikasi_Angsuran_Barang.rar.html</a> 
 
* Aplikasi Parkir 
<a href="http://adf.ly/G1T2l" target="_blank">http://www.ziddu.com/download/12658156/AplikasiParkir.rar.html</a> 
 
* Aplikasi pengolahaan hotel 
<a href="http://adf.ly/G1T4z" target="_blank">http://www.sharebeast.com/nveekzwyl9wz</a> 
 
* Aplikasi Pembayaran SPP 
<a href="http://adf.ly/G1T6C" target="_blank">http://www.sharebeast.com/s8ldegkmuwd4</a> 
 
* Aplikasi Point of Sales (POS) 
<a href="http://adf.ly/G1T7T" target="_blank">Download</a> 
 
* Acak Angka 
<a href="http://adf.ly/G1TA2" target="_blank">http://www.ziddu.com/download/21120303/AcakAngkaHuruf.rar.html</a> 
 
* Aplikasi Akademik 
<a href="http://adf.ly/G1TBO" target="_blank">http://www.ziddu.com/download/21120330/SISTEMINFORMASIAKADEMIKSMU.rar.html</a> 
 
* Aplikasi Penjualan Koran 
<a href="http://adf.ly/G1TD7" target="_blank">http://www.ziddu.com/download/21120360/SistemAplikasiPenjualanKoran.rar.html</a> 
 
* Aplikasi Akuntansi 
<a href="http://adf.ly/G1TGA" target="_blank">http://www.ziddu.com/download/21120436/Akuntansi.rar.html</a> 
 
* Aplikasi Penjualan Tiket Pesawat 
<a href="http://adf.ly/G1aXR" target="_blank">Download</a> 
 
* Aplikasi Angsuran Barang 
<a href="http://adf.ly/G1aib" target="_blank">Download</a> 
 
* Aplikasi Permohonan Kredit 
<a href="http://adf.ly/G1arA" target="_blank">Download</a> 
 
* Aplikasi Antivirus berbasis VB 
<a href="http://adf.ly/G1b2Q" target="_blank">Download</a> 
 
* Aplikasi Perpustakaan 
<a href="http://adf.ly/G1b8c" target="_blank">Download</a> 
 
* Aplikasi Apotek 
<a href="http://adf.ly/G1bEI" target="_blank">Download</a> 
 
* Aplikasi Perpustakaan 
<a href="http://adf.ly/G1bJ1" target="_blank">Download</a> 
 
* Aplikasi Asuransi 
<a href="http://adf.ly/G1bOq" target="_blank">Download</a> 
 
* Aplikasi persediaan Barang 
<a href="http://adf.ly/G1beh" target="_blank">Download</a> 
 
* Aplikasi Persediaan Obat 
<a href="http://adf.ly/G1br3" target="_blank">Download</a> 
 
* Aplikasi Asuransi (Bumi Asih) 
<a href="http://adf.ly/G1ccE" target="_blank">Download</a> 
 
* Aplikasi Point of Sales (POS) 
<a href="http://adf.ly/G1hne" target="_blank">Download</a> 
 
* Aplikasi Bel Sekolah 
<a href="http://adf.ly/G1cPa" target="_blank">Download</a> 
 
* Aplikasi Bengkel 
<a href="http://adf.ly/G1edb" target="_blank">Download</a> 
 
* Aplikasi Rekam Medis 
<a href="http://adf.ly/G1TIW" target="_blank">http://www.ziddu.com/download/21120428/Medis.rar.html</a> 
 
* Aplikasi bengkel Mobil 
<a href="http://adf.ly/G1ekK" target="_blank">Download</a>
* 
 
 Aplikasi Remote Control PC 
<a href="http://adf.ly/G1f5T" target="_blank">Download</a> 
 
* Aplikasi Billing Rental 
<a href="http://adf.ly/G1f8I" target="_blank">Download</a> 
 
* Aplikasi Rental CD/DVD 
<a href="http://adf.ly/G1fHv" target="_blank">Download</a> 
 
* Aplikasi Billing Warnet 
<a href="http://adf.ly/G1fWL" target="_blank">Download</a> 
 
* Aplikasi Rental Video 
<a href="http://adf.ly/G1fHv" target="_blank">Download</a> 
 
* Aplikasi Buku Retail 
<a href="http://adf.ly/G1fNG" target="_blank">Download</a> 
 
* Aplikasi Restoran 
<a href="http://adf.ly/G1fiz" target="_blank">Download</a> 
 
* Aplikasi Buku telepon 
<a href="http://adf.ly/G1fSD" target="_blank">Download</a> 
 
* Aplikasi Rumah Sakit 
<a href="http://adf.ly/G1gUb" target="_blank">Download</a> 
 
* Aplikasi Gosir 
<a href="http://adf.ly/G1fsT" target="_blank">Download</a> 
 
* Aplikasi Sales dan Inventory 
<a href="http://adf.ly/G1gkb" target="_blank">Download</a> 
 
* Aplikasi Grosir Rokok 
<a href="http://adf.ly/G1gy1" target="_blank">Download</a> 
 
* Aplikasi Hotel (Sheraton Hotel) 
<a href="http://adf.ly/G1hC7" target="_blank">Download</a> 
 
* Aplikasi Servis Kendaraan 
<a href="http://adf.ly/G1hV3" target="_blank">Download</a> 
 
* Aplikasi Inventaris barang 
<a href="http://adf.ly/G1j1e" target="_blank">Download</a> 
 
* Aplikasi Simpan Pinjam 
<a href="http://adf.ly/G1iIZ" target="_blank">Download</a> 
 
* Aplikasi Inventarisasi Distribusi 
<a href="http://adf.ly/G1ihv" target="_blank">Download</a> 
 
* Aplikasi Sistem Informasi Administrasi Jurusan 
<a href="http://adf.ly/G1iz0" target="_blank">Download</a> 
 
* Aplikasi Inventory Peralatan Komputer 
<a href="http://adf.ly/G1iX7" target="_blank">Download</a> 
 
* Aplikasi Sistem Informasi Akademis (SMA) 
<a href="http://adf.ly/G1TBO" target="_blank">http://www.ziddu.com/download/21120330/SISTEMINFORMASIAKADEMIKSMU.rar.html</a> 
 
* Aplikasi Jasa Pengiriman Barang 
<a href="http://adf.ly/G1jIN" target="_blank">Download</a> 
 
* Aplikasi Sistem Informasi Dokkes Polda Sumut 
<a href="http://adf.ly/G1jJt" target="_blank">Download</a> 
 
* Aplikasi Cafe 
<a href="http://adf.ly/G1jQs" target="_blank">Download</a> 
 
* Aplikasi Sistem Informasi Izin Usaha 
<a href="http://adf.ly/G1jUI" target="_blank">Download</a> 
 
* Aplikasi Kantin 
<a href="http://adf.ly/G1jd0" target="_blank">Download</a> 
 
* Aplikasi Sistem Informasi Kriminalitas 
<a href="http://adf.ly/G1jb6" target="_blank">Download</a> 
 
* Aplikasi karyawan PLN 
<a href="http://adf.ly/G1jol" target="_blank">Download</a> 
 
* Aplikasi Sistem Informasi Pelayanan Kesehatan 
<a href="http://adf.ly/G1jqj" target="_blank">Download</a> 
 
* Aplikasi Kesehatan 
<a href="http://adf.ly/G1kwX">download</a> 
 
* Aplikasi Sistem Informasi pengolahan Data Siswa 
<a href="http://adf.ly/G1kTs" target="_blank">Download</a> 
 
* Aplikasi Klinik 
<a href="http://adf.ly/G1l5Z" target="_blank">Download</a> 
 
* Aplikasi Sistem Informasi Penjualan Rumah 
<a href="http://adf.ly/G1lsS" target="_blank">Download</a> 
 
* Aplikasi Koperasi 
<a href="http://adf.ly/G1m28" target="_blank">Download</a> 
 
* Aplikasi Sistem Informasi PJTKI dan TKI 
<a href="http://adf.ly/G1lXo" target="_blank">Download</a> 
* Aplikasi Manajemen Hotel 
<a href="http://adf.ly/G1lpl" target="_blank">Download</a> 
 
* Aplikasi Sistem Informasi Proyek 
<a href="http://adf.ly/G1kds" target="_blank">Download</a> 
 
* Aplikasi Parkir 
<a href="http://adf.ly/G1TKh" target="_blank">http://www.ziddu.com/download/21120501/Parkir.rar.html</a> 
 
* Aplikasi Sistem Pemeliharaan master Mubaligh 
<a href="http://adf.ly/G1m5H" target="_blank">Download</a> 
 
* Aplikasi Payroll 
<a href="http://adf.ly/G3cjV" target="_blank">Download</a>
 
* Aplikasi Sistem pengelolaan Data Keuangan 
<a href="http://adf.ly/G3dEn" target="_blank">Download</a> 
 
* Aplikasi Pelayanan Pasien 
<a href="http://adf.ly/G1ksP" target="_blank">Download</a> 
 
*Aplikasi karyawan 
<a href="http://adf.ly/G1TNI" target="_blank">http://www.ziddu.com/download/21120463/AplikasiKaryawan.rar.html</a> 
 
* Aplikasi Sistem Penunjang keputusan (SPPK) 
<a href="http://adf.ly/G3dki" target="_blank">Download</a> 
 
* Aplikasi Pembayaran Uang Kuliah 
<a href="http://adf.ly/G1lVa" target="_blank">Download</a> 
 
* Aplikasi Sistem Reward 
<a href="http://adf.ly/G3eEs" target="_blank">Download</a> 
 
* Aplikasi Pendaftaran Sekolah 
<a href="http://adf.ly/G3eOZ" target="_blank">Download</a> 
* Aplikasi Pendataan Obat 
<a href="http://adf.ly/G1mQ6" target="_blank">Download</a> 
 
* Aplikasi Software Pulsa 
<a href="http://adf.ly/G1mGr" target="_blank">Download</a> 
 
* Aplikasi Pengelolaan Biaya ADM 
<a href="http://adf.ly/G1mYp" style="font-weight: bold;" target="_blank">Download</a>

* Aplikasi Supermarket 
<a href="http://adf.ly/G3eh5" target="_blank">Download</a> 
 
* Aplikasi Pengelolaan Hotel 
<a href="http://adf.ly/G1mVE" target="_blank">Download</a> 
</div>
<div>
 
* Aplikasi Supermarket (POS) 
<a href="http://adf.ly/G3UUN" target="_blank">Download</a> 
 
* Aplikasi Pengelolaan Lab Kesehatan 
<a href="http://adf.ly/G3VEs" target="_blank">Download</a>
 
* Aplikasi tagihan 
<a href="http://adf.ly/G3VW2" target="_blank">Download</a> 
* Aplikasi Penggajian 
<a href="http://adf.ly/G3esy" target="_blank">Download</a> 
* Aplikasi Toko Buku 
<a href="http://adf.ly/G3UxR" target="_blank">Download</a> 
 
* Aplikasi Pengontrol Lampu Lalu lintas 
<a href="http://adf.ly/G3Tqt" target="_blank">Download</a>

* Aplikasi Penjadwalan CPU 
<a href="http://adf.ly/G3VCQ" target="_blank">Download</a> 
 
* Aplikasi Voting SMS 
<a href="http://adf.ly/G3V2i" target="_blank">Download</a> 
 
* Aplikasi Penjualan 
<a href="http://adf.ly/G3VlS" target="_blank">Download</a> 
* Aplikasi Media Pembelajaran Bahasa Mandarin 
<a href="http://adf.ly/G3gOv" target="_blank">Download</a>
 
* Aplikasi Penjualan & Stok Air Minum 
<a href="http://adf.ly/G3gLf" target="_blank">Download</a> 
 
* Aplikasi game Multiplayer 
<a href="http://adf.ly/G3gUL" target="_blank">Download</a> 
 
* Aplikasi SIM Rumah Sakit 
<a href="http://adf.ly/G3f8S" target="_blank">Download</a> 
 
* Aplikasi Client Server -SQL Server 2005 
<a href="http://adf.ly/G3eer" target="_blank">Download</a> 
 
* Encrypt - Decrypt 
<a href="http://adf.ly/G3eLr" target="_blank">Download</a> 
 
* Astronomy 
<a href="http://adf.ly/G3cmc" target="_blank">Download</a> 
 
* Antrian Dengan Suara 
<a href="http://adf.ly/G3e0W" target="_blank">Download</a> 
 
* Folder Lock 
<a href="http://adf.ly/G3cq5" target="_blank">Download</a> 
 
* MP3 Player 
<a href="http://adf.ly/G3cuA" target="_blank">Download</a>
 
* SOURCE CODE Automatic Teller Machine (ATM) 
<a href="http://adf.ly/G3dwz" target="_blank">Download</a> 
 
* Aplikasi Kamus (E-Dictionary) 
<a href="http://adf.ly/G3dec" target="_blank">Download</a> 
 
* Automated Identification System 
<a href="http://adf.ly/G3drQ" target="_blank">Download</a> 
 
* Banking System 
<a href="http://adf.ly/G3dgY" target="_blank">Download</a> 
 
* Absensi + salary 
<a href="http://adf.ly/G3dyY" target="_blank">Download</a> 
 
Semoga Bermanfaat !!!!! </div>
</div>
</div>

Updated at: 22.51.00

Cara Mengganti Warna Header Blog

By Rhm-Files on 04.03.00

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUOTQKyO5ikcpx_Z1LMcjBL_wvkySVtSkdWAOW-kPbqe23pqsVsyIkfP777IIdFujSTEO1cVfAOfqAMg0LtNhIBNmScRZeuRAfvsTHXGkMY_3Xcinxf152KWyamuUZyLniBhy2xrl4PLJK/s1600/2281785540_c40861d969_b.jpg" imageanchor="1"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUOTQKyO5ikcpx_Z1LMcjBL_wvkySVtSkdWAOW-kPbqe23pqsVsyIkfP777IIdFujSTEO1cVfAOfqAMg0LtNhIBNmScRZeuRAfvsTHXGkMY_3Xcinxf152KWyamuUZyLniBhy2xrl4PLJK/s320/2281785540_c40861d969_b.jpg" width="320" /></a></div>
 
Cara mengganti warna header background blog memang sangat mudah. background header tidak harus berupa gambar, tapi bisa juga dengan warna polos seperti blog saya ini. 
 
Mungkin sebagian orang lebih memilih tampilan yang lebih "Wah!" gitu ya.
 misalkan mengubah header blog dengan gambar kesukaanya atau bahkan 
artis idolanya supaya pengunjung lebih tertarik untuk mengunjungi blog 
tersebut. 
 
Tapi jangan salah lho.. kebanyakan blogger sangat tidak suka dengan 
tampilan yang terlalu mencolok. kenapa?? karena dengan tampilan yang 
begitu mencolok mungkin pengunjung bisa terganggu dengan warna-warni 
yang aneh sehingga menurunkan jumlah pengunjung blog anda.. 
 
waduh.. sudah agak melenceng dari topik bahasan nie.. 
langsung saja saya akan memberikan tutorial mengganti warna header blog. 
 
Langkah pertama: 
 
Login ke akun Blogger milik Sobat > Tata Letak > Edit HTML. Klik 
Download Full Template untuk membackup template blog Anda. 
 
 
Langkah kedua 
 
Carilah kode berikut: 
<div style="text-align: center;">
<blockquote class="tr_bq">
#header-wrapper {</blockquote>
</div>
Untuk mengganti warna background header blog, tambahkan kode background: kode warna ; pada kode tersebut. Sehingga kode nya akan menjadi seperti ini: 
<div style="text-align: center;">
<blockquote class="tr_bq">
#header-wrapper { background: kode warna ;</blockquote>
</div>
Silahkan ganti kode warna dengan warna yang anda suka. setelah itu klik simpan. Jika
 Sobat masih bingung dengan kode warna, Sobat bisa mencari lewat Google.
 atau mungkin ada pertanyaan silahkan comment di bawah. terima kasih

Updated at: 04.03.00

Cara Membuat Scroll Blog Popular Post Blogger

By Rhm-Files on 14.58.00

cara membuat scroll blog popular post
 dari tutorial rekan rekan blogger, akhirnya saya mendapatkan cara yang 
cukup praktis dan gampang untuk diterapkan di blog saya dan berhasil 
saya pasang pada widget popular post, widget recent post maupun widget 
lainnya di blog saya ini. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJnOoUHhpNS__Vr-OMTIyatAJ50hPmDbCUolJ5uabJ5xI2HoUXH2mOPp1fXBZpQTZo2WhaGacNkP1kP_9pXEYiE3u24Pu3jHNslIhKsWfpLbvMOs1TXpb6VZMH7QWGw6DTjh5jrp12XDHw/s1600/popular+post.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJnOoUHhpNS__Vr-OMTIyatAJ50hPmDbCUolJ5uabJ5xI2HoUXH2mOPp1fXBZpQTZo2WhaGacNkP1kP_9pXEYiE3u24Pu3jHNslIhKsWfpLbvMOs1TXpb6VZMH7QWGw6DTjh5jrp12XDHw/s1600/popular+post.jpg" /></a></div>
 
Yang
 baru saya tahu ada dua cara untuk membuat scroll atau menambahkan 
fungsi scroll pada widget, yang pertama yaitu dengan cara menambahkan 
kode CSS langsung didalam widget html dan yang kedua dengan cara 
menambahkan kode CSS pada bagian dalam kode template (edit template). 
 
Cara
 yang pertama sudah saya coba dan berhasil, tetapi hasilnya saya kurang 
puas, karena bagian tepi scroll nya tidak pas sejajar dengan batas side 
bar widget bagian luar (padahal pengaturan "width" nya sudah saya set 
"auto"). 
 
Akhirnya
 saya pakai cara yang kedua, yaitu dengan edit html dan hasilnya bagian 
tepi scroll dapat sejajar secara otomatis dengan bagian tepi side bar 
widget. 
 
Selain
 itu cara yang kedua ini menurut saya sangat praktis untuk diterapkan 
didalam blog saya, apabila rekan-rekan mau mencoba silahkan dicoba 
sendiri dan rasakan sensasinya.... 
 
Berikut caranya: 
 
<ol>
<li>Login ke blogger dengan akun rekans</li>
<li>Masuk ke halaman Template</li>
<li>Klik Edit HTML Lalu Lanjutkan</li>
<li>Cari kode ]]></b:skin> (gunakan Ctrl+F)</li>
<li>Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin></li>
</ol>
<div>
<form name="copy">
<div align="center">
</div>
</form>
</div>
<div>
<form name="copy">
<div align="center">
 </div>
<div align="center">
<textarea cols="60" name="txt" rows="10" style="height: 47px; width: 299px;" wrap="virtual">#PopularPosts1 .widget-content{
height:200px;overflow:auto;}

6. Simpan template dan lihat hasilnya

Demikian tutorial dari saya mengenai cara membuat scroll blog popular post, semoga bermanfaat dan happy blogging buat rekans semua.

Keterangan:

#PopularPosts1 : adalah id untuk widget popular post yang akan dibuatkan scroll nya, untuk widget yang lain rekan-rekan bisa cari sendiri id nya, biasanya untuk widget selain popular post menggunakan nama HTML1, HTML2, HTML3 dan seterusnya.

height:200px : adalah tinggi scroll, bisa rekan-rekan rubah sesuai keinginan atau kebutuhannya.

Updated at: 14.58.00

Membuat Iklan Banner pada Widget Blog

By Rhm-Files on 14.50.00

Jika Anda sudah tidak berminat memakai iklan PPC dan ingin beralih 
membuat space banner sendiri, pada kesempatan ini kami akan membahas 
cara membuat iklan banner pada widget blog setelah sebelumnya telah kami
 bahas cara membuat iklan text pada widget blog. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxVpC7FiEONXS0BLbVZJAXsJdzBaKFMf3PmGUykTEWOjqc_rzKnpOMxhGr7vCkMytvqUWeDdG0Lnpwe44j0vmdDagqN4-BHFLtKo-xf578Re8d2lZYXfk3pv2HChHCd1lNLGpBwy_V5MSH/s1600/11115576.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxVpC7FiEONXS0BLbVZJAXsJdzBaKFMf3PmGUykTEWOjqc_rzKnpOMxhGr7vCkMytvqUWeDdG0Lnpwe44j0vmdDagqN4-BHFLtKo-xf578Re8d2lZYXfk3pv2HChHCd1lNLGpBwy_V5MSH/s640/11115576.jpeg" width="640" /></a></div>
 
<div class="separator" style="clear: both; text-align: center;">
</div>
Berikut langkah cara membuat iklan banner pada widget blog : 
 
1. Login akun blogger Anda. 
2. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript. 
3. Copy paste kode berikut pada gadget HTML/JavaScript.
 
<blockquote class="tr_bq">
<div class="alert">
<a href='http://id-pemula.blogspot.com/2013/12/peringati-hari-aids-sedunia-2013.html' target='_blank' title='Hari AIDS Sedunia 2013'><img src='http://www.rhm-files.blogspot.co.id//-Q0qN5v8TI8U/Upq49ovb6fI/AAAAAAAAEPQ/wLY3LBh5znM/s1600/AIDS.gif' alt=' Hari AIDS Sedunia 2013' border='0'height='250' width='300'/></a> </div>
</blockquote>
Keterangan : 
Ganti tulisan yang berwarna merah dengan link/URL tujuan. 
Tulisan berwarna biru yaitu link gambar yang akan ditampilkan. 
Tulisan yang berwarna hijau keterangan gambar. 
Ukuran gambar bisa Anda ganti tulisan yang berwarna kuning height (tinggi) dan width (lebar). 
 
 4. Kemudian Simpan. 
Nah, sekian informasi cara membuat iklan banner pada widget blog. Jika Anda ingin memasangnya pada posting baca cara memasang iklan AdSense dalam posting. Semoga dapat membantu!

Updated at: 14.50.00

Membuat Multi Tab pada Sidebar Blogger

By Rhm-Files on 14.10.00

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzeOvpLEdmNMx79RVeQY5YD9sJ5xLfnbnWybhXdB-zOHyvG_AgI4HpXPulghMOj0CAtv4_w8kY3hoHejtW0u6n65htNeIPgrJ6-fcQnvxA8v-OUg-BshNDK-SKpHwqQE4KNX9_tACloVbZ/s1600/multi+tab+sidebar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzeOvpLEdmNMx79RVeQY5YD9sJ5xLfnbnWybhXdB-zOHyvG_AgI4HpXPulghMOj0CAtv4_w8kY3hoHejtW0u6n65htNeIPgrJ6-fcQnvxA8v-OUg-BshNDK-SKpHwqQE4KNX9_tACloVbZ/s320/multi+tab+sidebar.png" width="320" /></a></div>
 
 
Beberapa
 waktu lalu saya mendapatkan pertanyaan dari pembaca blog melalui 
komentarnya yaitu mengenai salah satu sidebar blog yang dapat memuat 
beberapa wdget dalam satu tempat, dimana kita sudah akrab menyebut trik 
tersebut dengan nama multi tab sidebar.
<a href="https://www.blogger.com/null" name="more"></a> 
 
<div style="text-align: justify;">
Namun saat itu 
karena masih awam tentang bagaimana membuat multi tab tersebut dengan 
terpaksa saya menjawab bahwa itu adalah bawaan dari template dan saya 
sendiri tidak tau bagaimana cara membuatnya. 
</div>
<div style="text-align: justify;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUZBgCy_r4r4AFjxz-_emBriXF_qtNmjUSVbbtlsoO7Aj5b_0V4KWcIMN3HgY0Oy0leRiraCu8cKl1rVc4AwiMas9KKiiPTbvaQg1_jN-go-rHOLNgBKio_uM9b2Hf-Q5zrEiMxRWzhdGc/s1600/multi+tab+sidebar1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUZBgCy_r4r4AFjxz-_emBriXF_qtNmjUSVbbtlsoO7Aj5b_0V4KWcIMN3HgY0Oy0leRiraCu8cKl1rVc4AwiMas9KKiiPTbvaQg1_jN-go-rHOLNgBKio_uM9b2Hf-Q5zrEiMxRWzhdGc/s200/multi+tab+sidebar1.png" width="200" /></a> </div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
 
Penyelidikan 
tentang cara membuat multi tab sidebar saya mulai ketika ingin memiliki 
widget Artikel Terkomentari seperti miliknya vivanews, karena ingin 
menampilkan widget artikel terkomentari tanpa perlu menambahkan lagi 
ruang untuk widget tersebut, dan salah satu solusi terbaik adalah multi 
tab sidebar tadi.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Cara membuat multi tab sidebar:</div>
<ul style="text-align: left;">
<li>Masuk dashboard blogger</li>
<li>Pilih template>>edit HTML</li>
<li>Cari kode <head> dengan menggunakan CTRL+F</li>
<li>kemudian masukkan jquery berikut di bawahnya</li>
</ul>
<blockquote class="tr_bq">
<pre type="html"><code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/></code></pre>
</blockquote>
Jika blog kamu sebelumnya sudah memiliki jquery, abaikan langkah di atas 
<div>
<ul style="text-align: left;">
<li>Kemudian cari ]]></b:skin> </li>
<li>Masukkan kode script <a href="https://sites.google.com/site/dhany99487/widget/multi-tab.txt" target="_blank">ini</a> di bawahnya </li>
<li>lalu masukkan kode css berikut diatasnya:</li>
</ul>
<blockquote class="tr_bq">
<pre type="css"><code>
.tabs-widget {
 list-style: none;
 list-style-type: none;
 margin: 0 0 10px 0;
 padding: 0;
 height: 40px;
}
.tabs-widget li {
 list-style: none;
 list-style-type: none;
 margin: 0 0 0 4px;
 padding: 0;
 float: left;
}
.tabs-widget li:first-child {
 margin: 0;
}
.tabs-widget li a {
 color: #8F8C7C;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlY3dCs3aYLZ4fTvSCuvC7VC_x8t2XXpx2kOHVw2RIBR__ikN_Uf8l27ZIoogQX32X1-sFSBo2pxRUz5aV3EFh-aYenZRjD7Z_puIRtHxsnfH-xrncfGPAQdRnLx-9Smijk8nc87JHtEc/s1600/tabs-widget-bg.png) left top repeat-x;
 padding: 12px 14px;
 display: block;
 text-decoration: none;
 font: bold 11px Arial,Helvetica,Sans-serif;
 text-transform: uppercase;
}
.tabs-widget li a:hover,
.tabs-widget li a.tabs-widget-current {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlY3dCs3aYLZ4fTvSCuvC7VC_x8t2XXpx2kOHVw2RIBR__ikN_Uf8l27ZIoogQX32X1-sFSBo2pxRUz5aV3EFh-aYenZRjD7Z_puIRtHxsnfH-xrncfGPAQdRnLx-9Smijk8nc87JHtEc/s1600/tabs-widget-bg.png) left -140px repeat-x;
 color: #EE5D06;
 text-decoration: none;
}
.tabs-widget-content {
}
.tabviewsection {
 margin-top: 10px;
 margin-bottom: 10px;
}
</code></pre>
</blockquote>
<ul style="text-align: left;">
<li> Kode css 
diatas adalah kode default yang umum digunakan oleh para designer 
template, kecuali designer-designer lokal, semua kode di atas sama 
kecuali pada background urlnya dan jenis warna karena setiap multi tab 
akan menyesuaikan dengan template masing-masing</li>
<li> Kemudian cari kode:</li>
</ul>
<blockquote class="tr_bq">
<pre type="html"><code><div class='column-right-inner'>
atau
<div id='sidebar-wrapper'></code></pre>
</blockquote>
masukkan kode berikut di bawahnya:</div>
<blockquote class="tr_bq">
<pre type="html"><code><div class='tabviewsection'>
<script type='text/javascript'>
 jQuery(document).ready(function($){
 $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
 $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
 $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
 $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
 $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
 $(this).addClass(&quot;tabs-widget-current&quot;);
 $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
 var activeTab = $(this).attr(&quot;href&quot;);
 $(activeTab).fadeIn();
 return false;
 });
 });
 </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section> 
</div> 
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section> 
</div> 
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section> 
</div>
</div>
<div style='height:5px;clear:both;'/></code></pre>
</blockquote>
<div>
<ul style="text-align: left;">
<li>simpan template, kemudian pada tata letak kamu akan menemui perubahan seperti ini:</li>
</ul>
</div>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Bbgvke1-3rm-V0tVgeptyFmRM5KoJTyWAkUnkvDn8EpSjjevNv14UyJiKMWciO2CGyT0a2PPe3NT2pVT9WY-U5uJKzxcAmOxOlZ8OxpnIHOOZTadRfhQzzkH-tUNUsY2Ex46pLpoHoWH/s200/multi+tab+sidebar1.png" width="200" /></div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul style="text-align: left;">
<li>masukkan beberapa elemen widget dengan cara seperti ini:</li>
</ul>
</div>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNLEsCzBIqUrsan97qTmHFMP9kak9icOG1f09W-_Rs203BsL83CGCETf4kBiLuVSy1fuSn2UkuxylBQBKlks6fu2O7zezygKIezJaqRFwHM2RbNPpwKPCNtATB1Ep-pvr41DOsFot2OZrc/s320/multi+tab+sidebar2.png" width="203" /></div>
</div>
<div>
<ul style="text-align: left;">
<li>Kemudian 
langkah berikut ini adalah panduan bagi yang ingin menambahkan multi tab
 sidebarnya saja(misalkan 2 multi tab menjadi 3 multi tab) </li>
<li>Jika sebelumnya kamu sudah memiliki multi tab sidebar, maka untuk cssnya tidak perlu kamu ubah lagi/abaikan langkah pertama</li>
<li>misalkan kamu hanya memiliki 2 tab saja, maka tambahkan kode:</li>
</ul>
<blockquote class="tr_bq">
<pre type="html"><code><li><a href='#widget-themater_tabs-1432447472-id3'>Nama sidebar</a></li></code></pre>
</blockquote>
</div>
<blockquote>
Tepat di bawah kode id1 dan id2</blockquote>
<div>
<ul style="text-align: left;">Sesuaikan kode-kode yang ditandai dengan kesamaan warnanya
<li> dan tambahkan kode berikut ini:</li>
</ul>
</div>
<blockquote class="tr_bq">
<pre type="html"><code><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section> 
</div></code></pre>
</blockquote>
Simpan template

Updated at: 14.10.00

cara membuat widget news di blogger

By Rhm-Files on 13.54.00

Pada hari ini kita akan membahas tentang bagaimana cara memasang widget 
headline news. Maksud headline news bukan berita melainkan menampilkan 
posting - posting yang baru di terbitkan oleh suatu blog. Jika ingin 
tahu bagaimana headline news itu bagaimana lihat demonya <a href="http://naonwehh.blogspot.com/">DISINI</a>. Cara memasangnya tidak terlalu sulit bahkan dapat dikatakan Mudah. Berikut langkah - langkah memasangnya: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrQ2WSvI4K6lHzCcy4PK_e6nNVe5UHzCHrshrlDDMcbmMHa3PTnX6g3s73ADq9rukt4kyvbTVNFyetekz8Au5i_cF1bCMRzWxq63dFKYrkV3XhJaXyWDbeYob7PFLX24UvNe-DVyPpRbw3/s1600/index.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrQ2WSvI4K6lHzCcy4PK_e6nNVe5UHzCHrshrlDDMcbmMHa3PTnX6g3s73ADq9rukt4kyvbTVNFyetekz8Au5i_cF1bCMRzWxq63dFKYrkV3XhJaXyWDbeYob7PFLX24UvNe-DVyPpRbw3/s1600/index.png" /></a></div>
 
 
1. Login pada blog sobat 
2. Tata Letak 
3. Tambah Gadget 
4. HTML/Javascript 
5. copy kode di bawah ini 
<blockquote class="tr_bq">
<script type="text/javascript"> 
var hn_url_blog = "http://alamatblogsobat.blogspot.com"; 
var hn_jumlah_post = 8; 
var hn_warna_latar = "#F5F5F5"; 
var hn_warna_garis = "#000000"; 
var hn_posisi = "bottom"; 
var hn_tampilkan_judul = true; 
var hn_backlink = true; 
</script> 
<script src="http://www.geocities.ws/reggy/postnew.js"> 
</script></blockquote>
Ket: ganti tulisan yang berwarna merah dengan alamat blog sobat 
6. Simpan dan lihat hasilnya 
 
Selamat Mencoba!!! :D

Updated at: 13.54.00

cara buat popular post bergerak ke bawah

By Rhm-Files on 13.46.00

Rhm-Files - Hello. Sudah lama saya tidak posting di blog ini lagi. Nah, untuk kesempatan kali ini saya akan berbagi sebuah Tutorial blog tentang "Cara Membuat Popular post Bergerak ke bawah | Tutorial Blog"  . 
dari judulnya ajah pasti sudah tau bukan dengan penggunaan tutorial yang satu ini. yakni supaya Postingan yang
 populer atau yang sering di kunjungi bisa lebih menghemat tempat. 
karena akan bergerak ke bawah. sobat bisa melihat contohnya di blog saya
 ini. 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPjl_y1lhpsoSQgyF2PVlTaUioIpVGV9lq0CXWe8D3HGuJXbz8x2IcmnPBKZmNfLOdjgIbWnNrhBnCkOFot-awsuW6E99FWAzTIJZSJP2WTulTKTWNYn_O_xxQfhe6GyeUw37tXlkDp7by/s1600/images.jpeg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPjl_y1lhpsoSQgyF2PVlTaUioIpVGV9lq0CXWe8D3HGuJXbz8x2IcmnPBKZmNfLOdjgIbWnNrhBnCkOFot-awsuW6E99FWAzTIJZSJP2WTulTKTWNYn_O_xxQfhe6GyeUw37tXlkDp7by/s1600/images.jpeg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr>
</tbody></table>
 
Ikuti langkah-langkah di bawah ini : 
1. Pertama sobat harus log-in dulu ke blog 
2. kalau sobat sudah log-in. lalu masuk ke menu Tata letak. 
3. lalu Click Add Gadget , lalu sobat pilih Entri Populer 
 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJT2BUmCAdYFGIW1HHcgvb49Iv0_xWk7iwP5X2mRV3x-xOGnhVQOlJD2j-4yscXZTqnE4yQvh-k3jdURFGFgVxOFkTq2GXfblFUc7ZdPvKjkeqyOvicoyiZpYPC_mbCdlT3RVX2pQ-t7s6/s1600/entri+populer+(FILEminimizer).jpg" style="margin-left: auto; margin-right: auto;" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr>
</tbody></table>
<div style="text-align: center;">
</div>
 
<div class="separator" style="clear: both; text-align: center;">
</div>
 
4. Kemudian Pilih kembali Add Gadget, dan sekarang kita pilih HTML/JavaScript 
5. Kemudian Copas ( Copy Paste ) kode di bawah ini 
<blockquote class="tr_bq">
<style type="text/css" media="screen"> 
#PopularPosts1 { 
overflow:hidden; 
margin-top:5px; 
padding:0px 0px; 
height:400px; 
} 
#PopularPosts1 ul { 
width:340px; 
overflow:hidden; 
list-style-type: none; 
padding: 0px 0px; 
margin:0px 0px; 
} 
#PopularPosts1 li { 
width:340px; 
padding: 5px 5px; 
margin:0px 0px 5px 0px; 
list-style-type:none; 
float:none; 
height:80px; 
overflow: hidden; 
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; 
border:1px solid #ddd; 
} 
#PopularPosts1 li .item-title { 
color:#A5A9AB; 
font-size:1em; 
margin-bottom:0.5em; 
} 
#PopularPosts1 li .item-title a { 
text-decoration:none; 
color:#4B545B; 
font-size:11px; 
height:18px; 
overflow:hidden; 
margin:0px 0px; 
padding:0px 0px 2px 0px; 
} 
#PopularPosts1 li img { 
float:left; 
margin-right:5px; 
background:#EFEFEF; 
border:0; 
} 
#PopularPosts1 li .item-snippet { 
overflow:hidden; 
font-family:Tahoma,Arial,verdana, sans-serif; 
font-size:10px; 
color:#262B2F; 
padding:0px 0px; 
margin:0px 0px; 
} 
#PopularPosts1 .item-snippet a, 
#PopularPosts1 .item-snippet a:visited { 
color:#3E4548; 
text-decoration: none; 
} 
#PopularPosts1 .spyWrapper { 
height: 100%; 
overflow: hidden; 
position: relative; 
} 
#PopularPosts1 { 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
} 
.tags span, 
.tags a { 
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
} 
a img { 
border: 0; 
} 
--> 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
$(function () { 
$('.popular-posts ul').simpleSpy(); 
}); 
</script> 
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

 </blockquote>
6.Kalau sudah di Copas , Sobat Pilih Simpan dan lihat hasilnya 
 
<div style="text-align: center;">
::Semoga Bermanfaat dan Selamat Mencoba:: </div>

Updated at: 13.46.00

Membuat Widget Popular Posts Keren Dengan CSS

By Rhm-Files on 11.32.00

Membuat Widget Popular Posts Keren Dengan CSS - Ghiyats Blogs | Pada kesempatan kali ini akan saya bagikan sebuah artikel yang berhubungan dengan Widget Popular Posts,
 Widget ini Berbeda sama Widget Populer posts lainnya Karena Widget ini 
dengan Nomor dan Nomor Urut dari yang Paling di Kunjungi. 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBaz3NcStKuqYYP1hdiwkIBDyuSdMre1QyLOYGShpP5cQrkXJcllkZYlHTJnIBfYPRMbdgrCny5u6l2fJ6OUoAS1RQt30hw2_bXNbltBupeZn97V2mNDa393xFGdQvL6yIvwWhZiUQV8A/s1600/Popular+Posts.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBaz3NcStKuqYYP1hdiwkIBDyuSdMre1QyLOYGShpP5cQrkXJcllkZYlHTJnIBfYPRMbdgrCny5u6l2fJ6OUoAS1RQt30hw2_bXNbltBupeZn97V2mNDa393xFGdQvL6yIvwWhZiUQV8A/s1600/Popular+Posts.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
Widget ini juga memiliki tampilan yang pastinya keren dan elegan, Dan 
Tidak menambah berat dan Loading blog kita, Kalau begitu, Langsung saja 
kita Coba Cara Membuatnya Dan Tutorianya seperti ini. 
<h3>
Membuat Widget Popular Posts Keren Dengan CSS</h3>
<ul>
<li>Masuk Ke Blogger.com, Dengan Akun anda</li>
<li>Setelah Berada di Dasbor Blogger, Sekarang menuju ke ''Template''</li>
<li>Klik ''Edit HTML''</li>
<li>Cari kode <codeku>]]></b:skin</codeku> ,Setelah ketemu Masukan kode dibawah ini di atas/sebelum kode Tersebut</li>
</ul>
<blockquote class="tr_bq">
.popular-posts ul li a { 
    background: none repeat scroll 0 0 #222222; 
    color: #FFFFFF; 
    display: block; 
    margin: 10px 0; 
    padding: 25px 15px 30px; 
    position: relative; 
    text-decoration: none; 
    transition: all 0.3s ease-out 0s; 
 width: 85%; 
} 
.popular-posts ul li a:before { 
    background: none repeat scroll 0 0 #2DB3E9; 
    color: #FFFFFF; 
    font-weight: 700; 
    height: 2em; 
    line-height: 2em; 
    margin-left: 88%; 
    padding: 4px; 
    position: absolute; 
    text-align: center; 
    width: 2em; 
    transition: all 0.2s ease-in-out 0s; 
   -moz-transition: all 0.3s ease-in-out 0s; 
} 
.popular-posts ul li a:hover { 
    opacity: 0.8; 
} 
.popular-posts ul li a:hover:before { 
    border-left-color: #CCCCCC; 
    left: -1px; 
     -webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    -ms-transition: all 0.2s ease-out; 
    -o-transition: all 0.2s ease-out; 
} 
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before { 
    content: "10"; 
} 
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before { 
    content: "9"; 
} 
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before { 
    content: "8"; 
} 
.popular-posts ul li:first-child + li + li + li + li + li + li a:before { 
    content: "7"; 
} 
.popular-posts ul li:first-child + li + li + li + li + li a:before { 
    content: "6"; 
} 
.popular-posts ul li:first-child + li + li + li + li a:before { 
    content: "5"; 
} 
.popular-posts ul li:first-child + li + li + li a:before { 
    content: "4"; 
} 
.popular-posts ul li:first-child + li + li a:before { 
    content: "3"; 
} 
.popular-posts ul li:first-child + li a:before { 
    content: "2"; 
} 
.popular-posts ul li:first-child a:before { 
    content: "1"; 
} 
.item-snippet { 
    display: none; 
} 
.PopularPosts .item-thumbnail { 
    display: none; 
} </blockquote>
<ul>
<li>Setalah Itu, Klik ''Simpan Template''</li>
</ul>
 
Begitulah Artikel ini Gimana Mudah kan ? Kalau Sobat Masih Binggung atau
 sobat Punya Pendapat Tentang Artikel ini , Silakan Bertanya di Kolom 
Komentar di Bawah ini, Semoga artikel ini Bermanfaat dan mudah untuk di 
Pratekkan, Terima Kasih.......

Updated at: 11.32.00

Cara mengetahui code warna

By Rhm-Files on 10.52.00

Jika Anda seorang web-designer, programmer, graphic designer, atau blogger yang hobi <a href="http://www.komputekno.com/search/label/Modifikasi%20Template" target="_blank" title="Modifikasi template">mengedit template</a> pasti
 akan selalu berhubungan dengan kode HTML berbagai macam warna. 
Tiap-tiap warna memang memiliki kode-kode tertentu dalam bentuk hexadecimal yang
 penulisan kodenya berbeda-beda sesuai dengan aplikasi digunakan, 
misalnya dalam HTML, Java, Visual Basic, Delphi, Photoshop, C++ dan 
sebagainya. Untuk bisa mengetahui kode warna dalam bentuk hexadecimal diperlukan aplikasi khusus baik secara online maupun offline. 
<a href="https://www.blogger.com/null" name="more"></a> 
Mengetahui kode warna html secara online 
Salah satu website yang menyediakan tool untuk mengetahui kode warna secara online adalah <a href="http://html-color-codes.info/" rel="nofollow" target="_blank">html-color-codes.info</a>.
 Untuk mengaksesnya tentu saja membutuhkan koneksi internet. Di situ 
disediakan berbagai macam warna. Tinggal klik pada salah satu pilihan 
warna, maka secara otomastis akan muncul kode html-nya di kotak yang 
sudah disediakan. Anda tinggal melakukan copy paste pada halaman editor 
html Anda. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjUQnJkH-_PnDNxj0CxfFOE3ZoEfzvG4c3ypMCbHHPBApnsyVynGBudAu1AhoyLd0D-mupii7KEJDqebdVC6ccvpu2hrALWwMwSmNG47KuRbUK0pGyW2Q6Z7nlR6G-DRJaeHwEs8EjsSsy/s1600/ythcc_001.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjUQnJkH-_PnDNxj0CxfFOE3ZoEfzvG4c3ypMCbHHPBApnsyVynGBudAu1AhoyLd0D-mupii7KEJDqebdVC6ccvpu2hrALWwMwSmNG47KuRbUK0pGyW2Q6Z7nlR6G-DRJaeHwEs8EjsSsy/s400/ythcc_001.jpg" width="400" /></a></div>
 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
Selain itu, website ini juga menyediakan fasilitas pencarian kode html 
untuk warna pada sebuah gambar. Sehingga ketika Anda tertarik untuk 
menggunakan warna pada gambar favorit Anda, tidak perlu repot 
bereksperimen mencari warna yang cocok, cukup membuka html-color-codes.info kemudian memilih menu Color form Image. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsXr1yxpEcNZF7_LGZ6MXX9lQzsihfjNG2l1mCV6-YKyBPMjH8yxwdOLa0bn6j9dSSqWZB3KFUta-yizVPlXjHO_GgPumNJu9cung8v-buyfbFjNikH91SrEYkBXhVRT-cVEJHycNImawj/s1600/mengetahui+kode+warna+dengan+html-color-codes-2.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="kode warna html online - 2" border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsXr1yxpEcNZF7_LGZ6MXX9lQzsihfjNG2l1mCV6-YKyBPMjH8yxwdOLa0bn6j9dSSqWZB3KFUta-yizVPlXjHO_GgPumNJu9cung8v-buyfbFjNikH91SrEYkBXhVRT-cVEJHycNImawj/s400/mengetahui+kode+warna+dengan+html-color-codes-2.jpg" title="kode warna html online - 2" width="400" /></a></div>
 
Mengetahui kode warna html secara offline 
Jika Anda bekerja dalam kondisi offline, untuk mengetahui kode html warna bisa menggunakan aplikasi khusus, namanya BrazuColor.
 Aplikasi kecil yang gratis ini menyediakan jutaan pilihan warna yang 
langsung dikonversi untuk keperluan coding Visual Basic, C++, Delphi, 
Java, Photoshop, dan HTML 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVaMYA3rHrj4Pi241lS5w_EPC66R5pIR_YkA6Apt9bl95WAlzzrpVHVQ2kboINImpUiCQJOfVMzhP3o6Cd3bx5in0HwaMekhxbUNGJQhRdfydjeC3Tf2oL02FSTu8A_hYNyCb1KXiKpA7/s1600/mengetahui+kode+warna+dengan+brazucolor.png" style="margin-left: 1em; margin-right: 1em;"><img alt="kode warna html offline - 1" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdVaMYA3rHrj4Pi241lS5w_EPC66R5pIR_YkA6Apt9bl95WAlzzrpVHVQ2kboINImpUiCQJOfVMzhP3o6Cd3bx5in0HwaMekhxbUNGJQhRdfydjeC3Tf2oL02FSTu8A_hYNyCb1KXiKpA7/s400/mengetahui+kode+warna+dengan+brazucolor.png" title="kode warna html offline - 1" width="400" /></a></div>
 
Selain itu BrazuColor juga menyediana fasilitas konversi kode warna html dari layar yang sedang aktif. Caranya dengan klik menu Color from Screen (F9)
 kemudian mengarahkan mouse ke sembaarang titik pada layar. Setelah 
titik pada layar itu di klik maka akan muncul kode warnanya secara 
otomatis. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9NDalFfF3LYozpdAQdB9ZrLex87YCTwRc32hYDznOJyYVB9aivd8EmLsxvx6NDhg1ll5IHP8PqkloyCZ6XHhPwOq4F3pz1cDPXh3kj1VyNn1MBPu1Tm2orDDu7cVMtu4Joelbaz3C-V0/s1600/mengetahui+kode+warna+dengan+brazucolor-2.png" style="margin-left: 1em; margin-right: 1em;"><img alt="kode warna html offline - 2" border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9NDalFfF3LYozpdAQdB9ZrLex87YCTwRc32hYDznOJyYVB9aivd8EmLsxvx6NDhg1ll5IHP8PqkloyCZ6XHhPwOq4F3pz1cDPXh3kj1VyNn1MBPu1Tm2orDDu7cVMtu4Joelbaz3C-V0/s400/mengetahui+kode+warna+dengan+brazucolor-2.png" title="kode warna html offline - 2" width="400" /></a></div>
 
BrazuColor (2,7 MB) bisa didowload secara gratis di: <a href="http://www.iexe.com.br/brazucolor/" rel="nofollow" target="_blank">http://www.iexe.com.br/brazucolor/</a> 
 
Itulah cara mengetahui kode warna HTML secara online dan offline. Jika ada di antara pengunjung yang memiliki pengalaman berbeda, saya sangat berharap bisa berbagi melalui komentar.

Updated at: 10.52.00

Rhm-Files Your Game Hack Solution

Column Right