Widget Popular Post

Widget Popular Posts Dengan Efek Animasi Spy

Widget Popular posts ini sama dengan widget recent posts
Nah jika anda tertarik untuk membuat widget popular posts dengan animasi spy, silahkan ikuti tahap pembuatannya:

• Login ke akun anda
• Pada menu tata letak >> tambahkan gadget popular posts seperti image berikut:

• Kemudian klik tambah gadget lagi >> pilih HTML/JavaScript >> Salin dan tempel kode berikut pada form yang tampil

  <style type="text/css" media="screen">
  #PopularPosts1 {
  overflow:hidden;
  margin-top:5px;
  padding:0px 0px;
  height:400px;
  }
  #PopularPosts1 ul {
  width:220px;
  overflow:hidden;
  list-style-type: none;
  padding: 0px 0px;
  margin:0px 0px;
  }
  #PopularPosts1 li {
  width:208px;
  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>

• Sehingga posisi widget seperti image atau screen shoot berikut;

• Simpan dan lihat hasilnya pada blog anda!

Demikian tutorial menambhakan widget popular posts dengan efek animasi spy pada blog, Semoga bermanfaat.
Jika ingin mencoba efek lain pada widget popular posts silahkan klik link titel posts berikut:

• Widget Popular Posts Dengan Efek Marquee
• Widget Popular Posts Dengan Efek Spinning dan Zooming
• Widget Popular Posts Dengan Efek Border dan Background Color

Selamat berkreasi!

15.47  SISWONO  2 comments

Read More

Script Radio Online

Baiklah Langsung ajj yah, berikut contoh dan scriptnya..


SCRIPT 1::::

<center><iframe align='middle' frameborder='no' height='30px' name='Radio1' scrolling='no' src='http://radioindonesia.info/mini.php' width='100%'/></iframe></center>

SCRIPT 2::::

<center><iframe align='middle' frameborder='no' height='53px' name='Radio2' scrolling='no' src='http://radioindonesia.info/mini2.php' width='100%'/></iframe></center>

Silahkan Sobat Pilih Yah..!! Semoga Bermanfaat gang.!!

14.16  SISWONO  No comments

Read More

Membuat Headline News di Blog

Cara Mudah Membuat Headline News di Blog - Cara/trik gampang memberi headline news atau news update atau hotnews berita terbaru berjalan dan bergerak di blog atau cara menambah headline news atau news update atau hotnews di blog dengan mudah dan cepat.

Postingan Blogaul kali ini akan membahas bagaimana cara memberi headline news di blog. Setelah sebelumnya saya juga membahas artikel mengenai tutorial blog yaitu artikel cara membuat recent post dengan thumbnail, maka di kesempatan yang baik ini, saya akan mengulas artikel mengenai cara membuat news update di blog. Sobat pastinya sudah tau semua kan apa itu headline news/news update/hot news dan bagaimana bentuk sebenarnya? :) Ok, bagi yang belum tau, saya jelaskan sedikit. Headline news adalah sebuah bagian/elemen di blog yang berisi link-link artikel terbaru dari blog tersebut yang biasanya selalu bergonta-ganti tiap berapa detik sekali dan umumnya terletak di bagian atas dari sebuah blog. Untuk contohnya, bisa dilihat di bagian atas di bawah header blog ini. Tujuan utama pembuatan fasilitas ini menurut saya adalah untuk membuat blog lebih tampil profesional, lebih menarik, membuat betah pengunjung dan pastinya meningkatkan pageviews. Ok, bagi yang tertarik untuk membuat headline news/news update/berita terbaru di blog silahkan ikuti langkah-langkah cara  membuat headline news/news update/berita terbaru bergerak di blog di bawah ini:

1. Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).

3. Cari kode ]]></b:skin> (gunakan tombol CTRL + F atau F3 untuk memudahkan pencarian kode).
4. Letakkan kode berikut tepat diatas kode  ]]></b:skin>

/* Headline News
-------------------*/
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzbFY69TTwwgxBARaaiINaibNimOLxgpQ_ibjE1IZdJ2eRCJNPi2odb277ea21DNNm1TEvolSiOfGEyvElQOVVLzYGOchoyQQckSQKuw4S64Nr2ZM7b7Bk5CS3iYUJez3FeUMbeoB2xpA/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}  

Keterangan :
> Warna merah adalah ukuran panjang headline news.
> Warna biru adalah ukuran tinggi headline news.

5. Next cari kode </head>
6. Lalu copas kode berikut tepat diatas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};

var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

7. Terakhir cari kode   <div id='header-wrapper'> atau   <div id='header-outer'> (pilih salah satu saja)
8. Lalu letakkan kode berikut tepat di bawah kode nomor 7 tadi

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://www.amronbadriza.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

> Ganti kode yang berwarna biru dengan URL blog sobat.

9. Simpan template dan lihat hasilnya.

Nah, mudah sekali bukan? :)

Source: http://www.amronbadriza.com/2013/01/cara-mudah-membuat-headline-news-di-blog.html#ixzz2KK48JlVh

22.50  SISWONO  2 comments

Read More

Script Jam dan Kalender

Pengen punya tampilan jam dan kalender seperti pada blog ini, langsung saja caranya adalah sebagai berikut :

• Masuk ke Blog kamu, dan pilih Tab Template lalu klik Edit HTML.
• Tekan Tombol F3 , untuk memudahkan mencari kata kunci 
• Pasang CSS Widget ini di atas ]]></b:skin>

.kotak-tanggal{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;right:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

.kotak-jam{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;left:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

• Lalu klik Simpan

• Sekarang kamu klik Tab Tata Letak, dan Tambahkan Gadget HTML/Javascript baru.
• Pastekan Source kode Widget dibawah dan lihat hasilnya..........

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<div class='kotak-tanggal'><script src='http://not-remove-admin.googlecode.com/files/Panel-W8-SM-Tanggal2.js'></script></div>

<div class='kotak-jam'><script src='http://not-remove-admin.googlecode.com/files/Panel-W8-SM-Jam3.js'></script></div>

20.56  SISWONO  1 comment

Read More

Scrip Jam dan Tanggal

Langsung saja.

• Masuk ke Blog kamu, dan pilih Tab Template lalu klik Edit HTML.
• Tekan Tombol F3 , untuk memudahkan mencari kata kunci 
• Pasang CSS Widget ini di atas ]]></b:skin>

.kotak-tanggal{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;right:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

.kotak-jam{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;left:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

• Lalu klik Simpan

• Sekarang kamu klik Tab Tata Letak, dan Tambahkan Gadget HTML/Javascript baru.
• Pastekan Source kode Widget ini di situ.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<div class='kotak-tanggal'><script src='http://not-remove-admin.googlecode.com/files/Panel-W8-SM-Tanggal2.js'></script></div>

<div class='kotak-jam'><script src='http://not-remove-admin.googlecode.com/files/Panel-W8-SM-Jam3.js'></script></div>

• Setelah itu Simpan dan Lihat Hasilnya.
• Lihat Demo

20.41  SISWONO  No comments

Read More

Jam Digital pada Blog

Mempercantik tampilan blog memang perlu dan penting untuk menghilangkan kejenuhan.
Salah satunya yaitu dengan menambahkan jam digital. 

Langkah-langkahnya seperti berikut :

-  masuk ke blog anda, lalu masuk ke Dasbor

-  klik Rancangan, lalu Tambah Gadget, dan pilih HTML/JavaScript

-  copy script berikut :

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-152.swf width=240 height=80 wmode=transparent type=application/x-shockwave-flash></embed>

-  lalu paste pada Konten gadged tersebut, dan klik Simpan.

-------------------------------------------------------------------------------------------------------------------------

Untuk mengganti jenis jam yang lainnya,
caranya sangat gampang,

coba lihat kembali script di atas yang di cetak miring yaitu
free-flash-clock-152.swf

hanya mengganti angka 152 dengan angka yang anda inginkan, maka tampilan jam akan berubah. Contohnya, ganti dengan angka 36.
maka scriptnya seperti ini :
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-36.swf width=240 height=80 wmode=transparent type=application/x-shockwave-flash></embed> 

-------------------------------------------------------------------------------------------------------------------------

untuk merubah ukuran jam, lebih mudah lagi caranya,
lihat script yang tadi :
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-36.swf width=240 height=80 wmode=transparent type=application/x-shockwave-flash></embed>

lihat tulisan
width=240 height=80

maksudnya yaitu lebar 240 dan tinggi 80,
maka ganti sesuai dengan yang kita inginkan.

contoh, ganti dengan lebar 240 dan tinggi 200,
maka scriptnya seperti ini :
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-36.swf width=240 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

-------------------------------------------------------------------------------------------------------------------------
Dicoba ya.......

-------------------------------------------------------------------------------------------------------------------------

23.49  SISWONO  6 comments

Read More

Widget Sharing Melayang Keren Di Blog

• Masuk akun blogger kamu.
• Masuk Rancangan->Edit HTML->Expand Template Widget
• Cari kode </body> (Ctrl+F)
• Lalu Ambil kode dibawah ini dan taruh kode dibawah ini tepat diatas kode </body>

<!-- Start Shareaholic Sassy Bookmarks HTML (helperblogger.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML (helperblogger.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End Shareaholic Sassy Bookmarks script (helperblogger.com) -->

23.25  SISWONO  1 comment

Read More

Script Ym Buat Blogger

Pemilik blog atau website bisa menampilkan status online yahoo messenger dengan memasukan kode html di element html tambahan. Jadi pengunjung blog Anda bisa melihat apakah Anda tengah online atau tidak.

If you have a website or blog, you can provide an easy way for your visitors to get in touch with you over Yahoo! Messenger. To display an online presence indicator (OPI) badge, all you need to do is drop a little bit of code into your webpage. Then when visitors come to your site, they’ll see a badge displaying your online status, even when you’re signed out of Yahoo! Messenger.

Cara menampilkan status online yahoo mesenger gampang saja, Anda tinggal mencopy sedikit kode dibawah ini dan mengganti ID YM saya (hakimtea-online) dengan ID YM Anda, (Perhatian: ada dua ID YM yang harus Anda ganti):


<a href="http://messenger.yahoo.com/edit/send/?.target=joko_electro">
<img src="http://opi.yahoo.com/yahooonline/u=joko_electro/m=g/t=14/l=us/opi.jpg" alt="Status YM></a>

Anda bisa memilih tampilan status onlinenya seperti,
t=0

t=1

t=2

t=3

t=4

t=5

t=6

t=7

t=8

t=9

t=10

t=11

t=12

t=13

t=14

t=15

t=16

Dengan mengganti kode t=2 pada kode html di atas dengan kode pilihan Anda.
Selamat mencoba!!!

21.31  SISWONO  2 comments

Read More

Kode Warna

Silahkan plih warna yang disuka

18.15  SISWONO  No comments

Read More

Kode Warna

</div><center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table><table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>Kode warna : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>

16.56  SISWONO  No comments

Read More

Membuat Share Facebook dengan Counter di Blogger

Tombol share Facebook adalah cara sempurna untuk membagi postingan blog dan untuk menunjukkan jumlah saham yang telah dibuat untuk posting blog tertentu. Ada dua jenis dengan gaya yang berbeda, satu dengan tombol jumlah besar dan yang lainnya adalah tombol inline. Untuk menambahkannya ke Blogger pilih salah satu dari tombol share dibawah ini seperti yang disebutkan di bawah ini.

Facebook Share Button with Counter

<div style="float: right; margin: 4px;">
<a name="fb_share" type="box_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

Facebook Share Inline Button Counter

Share

<div style="margin: 4px;">
<a name="fb_share" type="button_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

Cara Membuat Facebook Share Button Ke Blogger :

1.  Buka akun Blogger Anda
2. Masuk ke Menu Edit HTML > centang Expand Template Widget, cari kode dibawah ini :

<data:post.body/>

     3.  Pastekan kode button yang Anda inginkan pada diatas ataupun dibawah pada kode diatas.

Penjelasan
Dalam kode di atas, temukan kode "float: right;" . Jika Anda ingin memiliki ini di kiri dalam body postingan Anda, kemudian ubah kode menjadi "float: left;" atau menghapusnya seperti yang ditunjukkan pada tombol kedua.

Jika Anda ingin tombol share hanya dilihat di halaman postingan saja, teempatkan kode seperti dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<a name="fb_share" type="box_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</b:if>

Mengubah ukuran Facebook Share Button :
Setelah peluncuran tombol berbagi terlalu banyak, tombol share Facebook terlihat agak over-size. Setelah CSS tweak kecil, tombol ini dapat diubah ukurannya agar sesuai dengan lebar tombol lainnya. Untuk melakukan hal ini temukan ]]></b:skin> dan diatasnya tambahkan kode :

.FBConnectButton_Text {
padding: 2px 4px 3px !important;
}

Atur padding sesuai dengan keadaan yang Anda inginkan.

15.28  SISWONO  No comments

Read More

Script Kode Warna

<table border="1" style="font-family: Verdana; font-size: 10pt" width="100%"><table border="1" style="font-family: Verdana; font-size: 10pt" width="100%"><tbody>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>Antique_white</td><td bgcolor="#faebd7"></td><td>#FAEBD7</td></tr>
<tr><td>azure</td><td bgcolor="#f0ffff"></td><td>#F0FFFF</td></tr>
<tr><td>Bisque</td><td bgcolor="#ffe4c4"></td><td>#FFE4C4</td></tr>
<tr><td>blanched_almond</td><td bgcolor="#ffebcd"></td><td>#FFEBCD</td></tr>
<tr><td>cornsilk</td><td bgcolor="#fff8dc"></td><td>#FFF8DC</td></tr>
<tr><td>eggshell</td><td bgcolor="#fce6c9"></td><td>#FCE6C9</td></tr>
<tr><td>floral_white</td><td bgcolor="#fffaf0"></td><td>#FFFAF0</td></tr>
<tr><td>gainsboro</td><td bgcolor="#dcdcdc"></td><td>#DCDCDC</td></tr>
<tr><td>ghost_white</td><td bgcolor="#f8f8ff"></td><td>#F8F8FF</td></tr>
<tr><td>honeydew</td><td bgcolor="#f0fff0"></td><td>#F0FFF0</td></tr>
<tr><td>ivory</td><td bgcolor="#fffff0"></td><td>#FFFFF0</td></tr>
<tr><td>lavender</td><td bgcolor="#e6e6fa"></td><td>#E6E6FA</td></tr>
<tr><td>lavender_blush</td><td bgcolor="#fff0f5"></td><td>#FFF0F5</td></tr>
<tr><td>lemon_chiffon</td><td bgcolor="#fffacd"></td><td>#FFFACD</td></tr>
<tr><td>linen</td><td bgcolor="#faf0e6"></td><td>#FAF0E6</td></tr>
<tr><td>mint_cream</td><td bgcolor="#f5fffa"></td><td>#F5FFFA</td></tr>
<tr><td>misty_rose</td><td bgcolor="#ffe4e1"></td><td>#FFE4E1</td></tr>
<tr><td>moccasin</td><td bgcolor="#ffe4b5"></td><td>#FFE4B5</td></tr>
<tr><td>navajo_white</td><td bgcolor="#ffdead"></td><td>#FFDEAD</td></tr>
<tr><td>old_lace</td><td bgcolor="#fdf5e6"></td><td>#FDF5E6</td></tr>
<tr><td>papaya_whip</td><td bgcolor="#ffefd5"></td><td>#FFEFD5</td></tr>
<tr><td>peach_puff</td><td bgcolor="#ffdab9"></td><td>#FFDAB9</td></tr>
<tr><td>seashell</td><td bgcolor="#fff5ee"></td><td>#FFF5EE</td></tr>
<tr><td>snow</td><td bgcolor="#fffafa"></td><td>#FFFAFA</td></tr>
<tr><td>thistle</td><td bgcolor="#d8bfd8"></td><td>#D8BFD8</td></tr>
<tr><td>titanium_white</td><td bgcolor="#fcfff0"></td><td>#FCFFF0</td></tr>
<tr><td>wheat</td><td bgcolor="#f5deb3"></td><td>#F5DEB3</td></tr>
<tr><td>white</td><td bgcolor="#ffffff"></td><td>#FFFFFF</td></tr>
<tr><td>white_smoke</td><td bgcolor="#f5f5f5"></td><td>#F5F5F5</td></tr>
<tr><td>zinc_white</td><td bgcolor="#fdf8ff"></td><td>#FDF8FF</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>cold_grey</td><td bgcolor="#808a87"></td><td>#808A87</td></tr>
<tr><td>dim_grey</td><td bgcolor="#696969"></td><td>#696969</td></tr>
<tr><td>grey</td><td bgcolor="#c0c0c0"></td><td>#C0C0C0</td></tr>
<tr><td>light_grey</td><td bgcolor="#d3d3d3"></td><td>#D3D3D3</td></tr>
<tr><td>slate_grey</td><td bgcolor="#708090"></td><td>#708090</td></tr>
<tr><td>slate_grey_dark</td><td bgcolor="#2f4f4f"></td><td>#2F4F4F</td></tr>
<tr><td>slate_grey_light</td><td bgcolor="#778899"></td><td>#778899</td></tr>
<tr><td>warm_grey</td><td bgcolor="#808069"></td><td>#808069</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>black</td><td bgcolor="#000000"></td><td>#000000</td></tr>
<tr><td>ivory_black</td><td bgcolor="#292421"></td><td>#292421</td></tr>
<tr><td>lamp_black</td><td bgcolor="#2e473b"></td><td>#2E473B</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>alizarin_crimson</td><td bgcolor="#e32636"></td><td>#E32636</td></tr>
<tr><td>brick</td><td bgcolor="#9c661f"></td><td>#9C661F</td></tr>
<tr><td>cadmium_red_deep</td><td bgcolor="#e3170d"></td><td>#E3170D</td></tr>
<tr><td>coral</td><td bgcolor="#ff7f50"></td><td>#FF7F50</td></tr>
<tr><td>coral_light</td><td bgcolor="#f08080"></td><td>#F08080</td></tr>
<tr><td>deep_pink</td><td bgcolor="#ff1493"></td><td>#FF1493</td></tr>
<tr><td>english_red</td><td bgcolor="#d43d1a"></td><td>#D43D1A</td></tr>
<tr><td>firebrick</td><td bgcolor="#b22222"></td><td>#B22222</td></tr>
<tr><td>geranium_lake</td><td bgcolor="#e31230"></td><td>#E31230</td></tr>
<tr><td>hot_pink</td><td bgcolor="#ff69b4"></td><td>#FF69B4</td></tr>
<tr><td>indian_red</td><td bgcolor="#b0171f"></td><td>#B0171F</td></tr>
<tr><td>light_salmon</td><td bgcolor="#ffa07a"></td><td>#FFA07A</td></tr>
<tr><td>madder_lake_deep</td><td bgcolor="#e32e30"></td><td>#E32E30</td></tr>
<tr><td>maroon</td><td bgcolor="#b03060"></td><td>#B03060</td></tr>
<tr><td>pink</td><td bgcolor="#ffc0cb"></td><td>#FFC0CB</td></tr>
<tr><td>pink_light</td><td bgcolor="#ffb6c1"></td><td>#FFB6C1</td></tr>
<tr><td>raspberry</td><td bgcolor="#872657"></td><td>#872657</td></tr>
<tr><td>red</td><td bgcolor="#ff0000"></td><td>#FF0000</td></tr>
<tr><td>rose_madder</td><td bgcolor="#e33638"></td><td>#E33638</td></tr>
<tr><td>salmon</td><td bgcolor="#fa8072"></td><td>#FA8072</td></tr>
<tr><td>tomato</td><td bgcolor="#ff6347"></td><td>#FF6347</td></tr>
<tr><td>venetian_red</td><td bgcolor="#d41a1f"></td><td>#D41A1F</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>beige</td><td bgcolor="#a39480"></td><td>#A39480</td></tr>
<tr><td>brown</td><td bgcolor="#802a2a"></td><td>#802A2A</td></tr>
<tr><td>brown_madder</td><td bgcolor="#db2929"></td><td>#DB2929</td></tr>
<tr><td>brown_ochre</td><td bgcolor="#87421f"></td><td>#87421F</td></tr>
<tr><td>burlywood</td><td bgcolor="#deb887"></td><td>#DEB887</td></tr>
<tr><td>burnt_sienna</td><td bgcolor="#8a360f"></td><td>#8A360F</td></tr>
<tr><td>burnt_umber</td><td bgcolor="#8a3324"></td><td>#8A3324</td></tr>
<tr><td>chocolate</td><td bgcolor="#d2691e"></td><td>#D2691E</td></tr>
<tr><td>deep_ochre</td><td bgcolor="#733d1a"></td><td>#733D1A</td></tr>
<tr><td>flesh</td><td bgcolor="#ff7d40"></td><td>#FF7D40</td></tr>
<tr><td>flesh_ochre</td><td bgcolor="#ff5721"></td><td>#FF5721</td></tr>
<tr><td>gold_ochre</td><td bgcolor="#c77826"></td><td>#C77826</td></tr>
<tr><td>greenish_umber</td><td bgcolor="#ff3d0d"></td><td>#FF3D0D</td></tr>
<tr><td>khaki</td><td bgcolor="#f0e68c"></td><td>#F0E68C</td></tr>
<tr><td>khaki_dark</td><td bgcolor="#bdb76b"></td><td>#BDB76B</td></tr>
<tr><td>light_beige</td><td bgcolor="#f5f5dc"></td><td>#F5F5DC</td></tr>
<tr><td>peru</td><td bgcolor="#cd853f"></td><td>#CD853F</td></tr>
<tr><td>rosy_brown</td><td bgcolor="#bc8f8f"></td><td>#BC8F8F</td></tr>
<tr><td>raw_sienna</td><td bgcolor="#c76114"></td><td>#C76114</td></tr>
<tr><td>raw_umber</td><td bgcolor="#734a12"></td><td>#734A12</td></tr>
<tr><td>sepia</td><td bgcolor="#5e2612"></td><td>#5E2612</td></tr>
<tr><td>sienna</td><td bgcolor="#a0522d"></td><td>#A0522D</td></tr>
<tr><td>saddle_brown</td><td bgcolor="#8b4513"></td><td>#8B4513</td></tr>
<tr><td>sandy_brown</td><td bgcolor="#f4a460"></td><td>#F4A460</td></tr>
<tr><td>tan</td><td bgcolor="#d2b48c"></td><td>#D2B48C</td></tr>
<tr><td>van_dyke_brown</td><td bgcolor="#5e2605"></td><td>#5E2605</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>cadmium_orange</td><td bgcolor="#ff6103"></td><td>#FF6103</td></tr>
<tr><td>cadmium_red_light</td><td bgcolor="#ff030d"></td><td>#FF030D</td></tr>
<tr><td>carrot</td><td bgcolor="#ed9121"></td><td>#ED9121</td></tr>
<tr><td>dark_orange</td><td bgcolor="#ff8c00"></td><td>#FF8C00</td></tr>
<tr><td>mars_orange</td><td bgcolor="#964514"></td><td>#964514</td></tr>
<tr><td>mars_yellow</td><td bgcolor="#e3701a"></td><td>#E3701A</td></tr>
<tr><td>orange</td><td bgcolor="#ff8000"></td><td>#FF8000</td></tr>
<tr><td>orange_red</td><td bgcolor="#ff4500"></td><td>#FF4500</td></tr>
<tr><td>yellow_ochre</td><td bgcolor="#e38217"></td><td>#E38217</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>aureoline_yellow</td><td bgcolor="#ffa824"></td><td>#FFA824</td></tr>
<tr><td>banana</td><td bgcolor="#e3cf57"></td><td>#E3CF57</td></tr>
<tr><td>cadmium_lemon</td><td bgcolor="#ffe303"></td><td>#FFE303</td></tr>
<tr><td>cadmium_yellow</td><td bgcolor="#ff9912"></td><td>#FF9912</td></tr>
<tr><td>cadmium_yellow_light</td><td bgcolor="#ffb00f"></td><td>#FFB00F</td></tr>
<tr><td>gold</td><td bgcolor="#ffd700"></td><td>#FFD700</td></tr>
<tr><td>goldenrod</td><td bgcolor="#daa520"></td><td>#DAA520</td></tr>
<tr><td>goldenrod_dark</td><td bgcolor="#b8860b"></td><td>#B8860B</td></tr>
<tr><td>goldenrod_light</td><td bgcolor="#fafad2"></td><td>#FAFAD2</td></tr>
<tr><td>goldenrod_pale</td><td bgcolor="#eee8aa"></td><td>#EEE8AA</td></tr>
<tr><td>light_goldenrod</td><td bgcolor="#eedd82"></td><td>#EEDD82</td></tr>
<tr><td>melon</td><td bgcolor="#e3a869"></td><td>#E3A869</td></tr>
<tr><td>naples_yellow_deep</td><td bgcolor="#ffa812"></td><td>#FFA812</td></tr>
<tr><td>yellow</td><td bgcolor="#ffff00"></td><td>#FFFF00</td></tr>
<tr><td>yellow_light</td><td bgcolor="#ffffe0"></td><td>#FFFFE0</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>chartreuse</td><td bgcolor="#7fff00"></td><td>#7FFF00</td></tr>
<tr><td>chrome_oxide_green</td><td bgcolor="#668014"></td><td>#668014</td></tr>
<tr><td>cinnabar_green</td><td bgcolor="#61b329"></td><td>#61B329</td></tr>
<tr><td>cobalt_green</td><td bgcolor="#3d9140"></td><td>#3D9140</td></tr>
<tr><td>emerald_green</td><td bgcolor="#00c957"></td><td>#00C957</td></tr>
<tr><td>forest_green</td><td bgcolor="#228b22"></td><td>#228B22</td></tr>
<tr><td>green</td><td bgcolor="#00ff00"></td><td>#00FF00</td></tr>
<tr><td>green_dark</td><td bgcolor="#006400"></td><td>#006400</td></tr>
<tr><td>green_pale</td><td bgcolor="#98fb98"></td><td>#98FB98</td></tr>
<tr><td>green_yellow</td><td bgcolor="#adff2f"></td><td>#ADFF2F</td></tr>
<tr><td>lawn_green</td><td bgcolor="#7cfc00"></td><td>#7CFC00</td></tr>
<tr><td>lime_green</td><td bgcolor="#32cd32"></td><td>#32CD32</td></tr>
<tr><td>mint</td><td bgcolor="#bdfcc9"></td><td>#BDFCC9</td></tr>
<tr><td>olive</td><td bgcolor="#3b5e2b"></td><td>#3B5E2B</td></tr>
<tr><td>olive_drab</td><td bgcolor="#6b8e23"></td><td>#6B8E23</td></tr>
<tr><td>olive_green_dark</td><td bgcolor="#556b2f"></td><td>#556B2F</td></tr>
<tr><td>permanent_green</td><td bgcolor="#0ac92b"></td><td>#0AC92B</td></tr>
<tr><td>sap_green</td><td bgcolor="#308014"></td><td>#308014</td></tr>
<tr><td>sea_green</td><td bgcolor="#2e8b57"></td><td>#2E8B57</td></tr>
<tr><td>sea_green_dark</td><td bgcolor="#8fbc8f"></td><td>#8FBC8F</td></tr>
<tr><td>sea_green_medium</td><td bgcolor="#3cb371"></td><td>#3CB371</td></tr>
<tr><td>sea_green_light</td><td bgcolor="#20b2aa"></td><td>#20B2AA</td></tr>
<tr><td>spring_green</td><td bgcolor="#00ff7f"></td><td>#00FF7F</td></tr>
<tr><td>spring_green_medium</td><td bgcolor="#00fa9a"></td><td>#00FA9A</td></tr>
<tr><td>terre_verte</td><td bgcolor="#385e0f"></td><td>#385E0F</td></tr>
<tr><td>viridian_light</td><td bgcolor="#6eff70"></td><td>#6EFF70</td></tr>
<tr><td>yellow_green</td><td bgcolor="#9acd32"></td><td>#9ACD32</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>aquamarine</td><td bgcolor="#7fffd4"></td><td>#7FFFD4</td></tr>
<tr><td>aquamarine_medium</td><td bgcolor="#66cdaa"></td><td>#66CDAA</td></tr>
<tr><td>cyan</td><td bgcolor="#00ffff"></td><td>#00FFFF</td></tr>
<tr><td>cyan_white</td><td bgcolor="#e0ffff"></td><td>#E0FFFF</td></tr>
<tr><td>turquoise</td><td bgcolor="#40e0d0"></td><td>#40E0D0</td></tr>
<tr><td>turquoise_dark</td><td bgcolor="#00ced1"></td><td>#00CED1</td></tr>
<tr><td>turquoise_medium</td><td bgcolor="#48d1cc"></td><td>#48D1CC</td></tr>
<tr><td>turquoise_pale</td><td bgcolor="#afeeee"></td><td>#AFEEEE</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>alice_blue</td><td bgcolor="#f0f8ff"></td><td>#F0F8FF</td></tr>
<tr><td>blue</td><td bgcolor="#0000ff"></td><td>#0000FF</td></tr>
<tr><td>blue_light</td><td bgcolor="#add8e6"></td><td>#ADD8E6</td></tr>
<tr><td>blue_medium</td><td bgcolor="#0000cd"></td><td>#0000CD</td></tr>
<tr><td>cadet</td><td bgcolor="#5f9ea0"></td><td>#5F9EA0</td></tr>
<tr><td>cobalt</td><td bgcolor="#3d59ab"></td><td>#3D59AB</td></tr>
<tr><td>cornflower</td><td bgcolor="#6495ed"></td><td>#6495ED</td></tr>
<tr><td>cerulean</td><td bgcolor="#05b8cc"></td><td>#05B8CC</td></tr>
<tr><td>dodger_blue</td><td bgcolor="#1e90ff"></td><td>#1E90FF</td></tr>
<tr><td>indigo</td><td bgcolor="#082e54"></td><td>#082E54</td></tr>
<tr><td>manganese_blue</td><td bgcolor="#03a89e"></td><td>#03A89E</td></tr>
<tr><td>midnight_blue</td><td bgcolor="#191970"></td><td>#191970</td></tr>
<tr><td>navy</td><td bgcolor="#000080"></td><td>#000080</td></tr>
<tr><td>peacock</td><td bgcolor="#33a1c9"></td><td>#33A1C9</td></tr>
<tr><td>powder_blue</td><td bgcolor="#b0e0e6"></td><td>#B0E0E6</td></tr>
<tr><td>royal_blue</td><td bgcolor="#4169e1"></td><td>#4169E1</td></tr>
<tr><td>slate_blue</td><td bgcolor="#6a5acd"></td><td>#6A5ACD</td></tr>
<tr><td>slate_blue_dark</td><td bgcolor="#483d8b"></td><td>#483D8B</td></tr>
<tr><td>slate_blue_light</td><td bgcolor="#8470ff"></td><td>#8470FF</td></tr>
<tr><td>slate_blue_medium</td><td bgcolor="#7b68ee"></td><td>#7B68EE</td></tr>
<tr><td>sky_blue</td><td bgcolor="#87ceeb"></td><td>#87CEEB</td></tr>
<tr><td>sky_blue_deep</td><td bgcolor="#00bfff"></td><td>#00BFFF</td></tr>
<tr><td>sky_blue_light</td><td bgcolor="#87cefa"><br /></td><td>#87CEFA</td></tr>
<tr><td>steel_blue</td><td bgcolor="#4682b4"></td><td>#4682B4</td></tr>
<tr><td>steel_blue_light</td><td bgcolor="#b0c4de"></td><td>#B0C4DE</td></tr>
<tr><td>turquoise_blue</td><td bgcolor="#00c78c"></td><td>#00C78C</td></tr>
<tr><td>ultramarine</td><td bgcolor="#120a8f"></td><td>#120A8F</td></tr>
<tr><th>Warna</th><th>Contoh</th><th><p>
Kode</p>
</th></tr>
<tr><td>blue_violet</td><td bgcolor="#8a2be2"></td><td>#8A2BE2</td></tr>
<tr><td>cobalt_violet_deep</td><td bgcolor="#91219e"></td><td>#91219E</td></tr>
<tr><td>magenta</td><td bgcolor="#ff00ff"></td><td>#FF00FF</td></tr>
<tr><td>orchid</td><td bgcolor="#da70d6"></td><td>#DA70D6</td></tr>
<tr><td>orchid_dark</td><td bgcolor="#9932cc"></td><td>#9932CC</td></tr>
<tr><td>orchid_medium</td><td bgcolor="#ba55d3"></td><td>#BA55D3</td></tr>
<tr><td>permanent_red_violet</td><td bgcolor="#db2645"></td><td>#DB2645</td></tr>
<tr><td>plum</td><td bgcolor="#dda0dd"></td><td>#DDA0DD</td></tr>
<tr><td>purple</td><td bgcolor="#a020f0"></td><td>#A020F0</td></tr>
<tr><td>purple_medium</td><td bgcolor="#9370db"></td><td>#9370DB</td></tr>
<tr><td>ultramarine_violet</td><td bgcolor="#5c246e"></td><td>#5C246E</td></tr>
<tr><td>violet</td><td bgcolor="#8f5e99"></td><td>#8F5E99</td></tr>
<tr><td>violet_dark</td><td bgcolor="#9400d3"></td><td>#9400D3</td></tr>
<tr><td>violet_red</td><td bgcolor="#d02090"></td><td>#D02090</td></tr>
<tr><td>violet_red_medium</td><td bgcolor="#c71585"></td><td>#C71585</td></tr>
<tr><td>violet_red_pale</td><td bgcolor="#db7093"></td><td>#DB7093<br /></td></tr>
</tbody></table>
<a href="http://dhecun.blogspot.com/2012/11/script-tabel-kode-warna-html.html" target="_blank">Get Widget</a>

15.10  SISWONO  No comments

Read More

Membuat Daftar Isi

Biasanya para blogger membuat daftar isi di dalam postingan atau di page halaman...bagaimana pula kalau daftar isi itu kita letakkan di sebuah widget atau di homepage blog kita,,caranya mudah hanya menambahkan kode2nya ke dalam gadget /javascript..

Berikut caranya :

1. Login Blogger anda
2. Tata letak
3. Tambah Gadget
4. HTLM/Javascript
5. Copy kan kode dibawah ini : 

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
    <script src="http://memed.googlecode.com/files/daftarisi.js">
    </script><script src="http://saktobek.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
    </script>
<p>
</p></div>

     6.  Ganti dulu Url yang berwarna merah tersebut dengan url blog sobat
     7.  Barulah disimpan

Terimakasih telah sudi mampir membaca artikel "Cara Membuat Daftar Isi Gadget Keren di Blog". Semoga Informasinya dapat membantu dan bermanfaat.

13.29  SISWONO  No comments

Read More

Membuat Tombol Kembali ke Atas Untuk Blog

1. Login ke Blogger 
2. Pergi ke Tata Letak
3. Tambah gadget
4. Pilih HTML/javascript
5. Copy Paste Kode dibawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>

Atau bisa juga dengan kode ini :

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40Et3mQwj-0nF1GbZKKwMO1ueRMIMuGf-bvsQlBt1Yuo6rGElsT6C0U5aTinmMHDCVZnX_VvvdT-3X09RIISOt72gnh8EOtrGA6tOoDP9muLvghkFcbUVIc3_xEYia64jx9aoV2j04cvs/s1600/navigate-up-icon.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

      6.  Simpan dan Lihat Hasilnya

13.09  SISWONO  No comments

Read More

Mengganti Warna Background Pilihan

kali ini saya post widget lagi~
yg saya post kali ini adalah cara membuat widget pengganti warna background
'ha? maksudnya gimana tuh?'
gini... kalo kita nge-klik warna dari pilihan warna, warna backgroundnya bakal keganti ama warna yang diklik itu
ya udah... daripada bingung, langsung tutornya aja deh.... XD

1. Masuk Blogger (harus)
2. Klik Rancangan (tampilan blogger lama) atau Tata Letak (tampilan blogger baru)
3. Klik Tambah Widget, klik bagian HTML/Javascript , lalu masukkan script ini
   

   <script type="text/javascript">
   function bgChange(bg)
   {
   document.body.style.background=bg;
   }
   </script>
   <table width="100%">
   <tr>
   <td onclick="bgChange('black')" bgcolor="black">&nbsp;</td>
   <td onclick="bgChange('#ffff00')" bgcolor="#FFFF00">&nbsp;</td>
   <td onclick="bgChange('red')" bgcolor="red">&nbsp;</td>
   <td onclick="bgChange('blue')" bgcolor="blue">&nbsp;</td>
   <td onclick="bgChange('white')" bgcolor="white">&nbsp;</td>
   <td onclick="bgChange('green')" bgcolor="green">&nbsp;</td>
   <td onclick="bgChange('deepskyblue')" bgcolor="DeepSkyBlue">&nbsp;</td>
   <td onclick="bgChange('fuchsia')" bgcolor="Fuchsia">&nbsp;</td>
   <td onclick="bgChange('darkmagenta')" bgcolor="DarkMagenta">&nbsp;</td>
   </tr>
   </table>

4. Setelah itu Klik Simpan~ Selesai deh~ XD

20.12  SISWONO  No comments

Read More

Membuat menu navigasi horizontal dropdown keren di blog

Hai sobat blogger ! sudah lama tak berjumpa ya, hampir 1 bulan saya tidak mengupdate isi postingan di blog ini, hampir sebulan itu saya mendapat kendala besar yang membuat saya jarang update. Saya memohon maaf untuk hal itu. Oke , kali ini saya akan berbagi ilmu tutorial blogging yang cukup keren sobat . Sesuai judulnya, kali ini saya akan membuat menu navigasi yang pernah saya pakai di blog ini atau bisa lihat sendiri pada gambar yang saya pasang diatas. Menu navigasi ini telah saya modifikasi sedemikian rupa sehingga menjadikannya keren dan elegan.. Bagaimana ? tertarik untuk membuatnya ? langsung saja kalau begitu kita simak dan bahas tutorialnya bersama-sama.

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda Expand Template Widget
5.) Lalu cari kode ]]></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

Kode

menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

7.) Simpan Template
8.) Buka Tata Letak > Tambah Gadget > Html/Javascript
9.) Masukkan kode berikut di form Konten yang tersedia 

Klik untuk melihat

<div class="menu"><ul><li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li><li><a href="#">Blogger</a><ul><li><a href="#"> Trik</a></li><li><a href="#">Tips </a></li></ul></li><li><a href="#">Contacs me</a></li></ul></div>

11.) Ganti # dengan URL yang akan dituju
Ganti Menu Link dengan nama yang akan ditampilkan dalam menu utama.
Ganti Sub-menu Link dengan nama yang akan menjadi menu yang berada di bawah menu utama
12.) Simpan dan lihat hasilnya

Contoh :

<div class="menu"><ul><li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li><li><a href="#">Blogger</a><ul><li><a href="#"> Trik</a></li><li><a href="#">Tips </a></li></ul></li><li><a href="#">Contacs me</a></li></ul></div>

( Dalam pengeditan kode, kita hanya mengedit kode yang bertulis tebal saja)

-----------------------------------------------------------------------------------------------
EDIT MODE :

Membuat Single Menu :

Caranya?

Lihat pada bagian kode Beranda : 
<li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li>
Kode ini merupakan single menu, artinya tidak ada sub-menu yang mengikuti dibawahnya. Kode ini sangat sederhana, dimulai dengan kode <li>  dan diakhiri kode </li> dan jika anda perlu menambah single menu, tinggal tambah kode diatas setelah kode </li>, contoh :
<li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com"> Daftar Isi </a></li>

maka akan tampil 2 single menu yang saling bersebelahan yaitu Beranda dan daftar isi

Membuat Sub-Menu :

Caranya?

Lihat pada kode bagian trik komputer, disana terdapat sederet kode yang panjang, kira-kira seperti ini
<li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li>
Pada kode diatas, trik komputer menggunakan sistem sub-menu, artinya menu yang mempunyai cabang. Trik komputer merupakan induknya, sementara Hacker, Software, Hardware sebagai anaknya yang mengikuti di bawahnya.  Hacker, Software, Hardware, tidak tampil pada menu utama, melainkan menu itu akan tampil jika kita menyorot menu Trik Komputer. Dalam membuat sub-menu, perlu memperhatikan beberapa hal, diantaranya kode <ul> dan </ul> . Dalam membuat sub-menu , anda perlu menambahkan kode <ul> setelah kode </a> di kode induk, sementara penutup kode induk </li> berada di akhir kode.

Contoh sub-menu 1 induk 1 anak ( perhatikan kode bertulis tebal ):<li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li></ul></li>

Jika sobat ingin menambahkan sub-menu lagi, tambahkan kode <li><a href=" # "> Sub-Menu Link </a></li> sebelum kode </ul> berada, contoh
<li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href=" # "> Software </a></li></ul></li>

Maka akan tampil 2 sub menu yang berada dibawah menu Trik komputer, yaitu Hacker dan Software

17.46  SISWONO  2 comments

Read More