Cara menambah icon pada Judul Post, Related post dan Sidebar

Bagaimana Cara Merubah Tampilan Blog agar lebih indah dan menarik, salah satu caranya ialah dengan menambah icon/bullet Disamping Judul dan Related Post.

Berikut Tutorialnya :
Untuk Bullet Judul Posting

• Pada Halaman Dashboard, Pilih Template
• Klik Edit HTML 
• Cari kode yang mirip dengan kode dibawah ini

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

• Kemudian Tambahkan kode berikut ke dalam nya

background:url(URL Bullet Sobat) no-repeat;
padding:0px 0px 05px 30px;

• Maka Hasilnya akan seperti ini

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
background:url(URL Bullet Sobat) no- repeat;
padding:0px 0px 05px 30px;
}

Untuk Bullet pada Recent Post :

• Pada Halaman Dashboard  dan pilih Template
• Klik Edit HTML 
• Cari kode ]]></b:skin>
• Kemudian Copy Paste script dibawah ini tepat di atas Kode ]]></b:skin>
  
  /*-----Bullet list by Dido Borneo----*/
  .post ul li {
  list-style-image:url('URL Bullet Sobat');
  }

Untuk Bullet Sidebar

• Caranya sama seperti Bullet pada Recent Post, Pada Halaman Dashboard  dan pilih Template
• Klik Edit HTML 
• Cari kode ]]></b:skin>
• Kemudian Copy Paste script dibawah ini tepat di atas Kode ]]></b:skin>

/*-----Bullet Sidebar By Dido Borneo-----*/
.sidebar h2{
background:url(URL Bullet Sobat) no-repeat 10px 8px;
font: normal 25px 'Bodoni MT Poster Compressed',Trebuchet,sans-serif;
margin:0;
padding:0 10px 0 32px;
color:#ff0000;
}

• Berikut beberapa Alamat URL Bullet Koleksiku :

http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/star_bullet_zps326ceea6.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/bullet_home_zps8adbb6ae.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/bullet_blue_arrow_zpsa8e58dea.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/Hawk_Animationkecil_zps3cfe6a4a.gif

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/kupu2kecil_zpse43e3c63.gif

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/author_zps17137839.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/close-button_zpsd7ba5e91.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/next2_zps221cae33.gif

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/sonicspinkecil_zps4c96e639.gif

NB :

Buat sobat yang ingin memasang gambar bullet animasi  sendiri, Silahkan download Software aplikasi pengubah ukuran gambar animasi yang pernah saya posting dahulu
Klik aja disini

[ Baca Selengkapnya ]

Cara Membuat Menu Vertikal Dropdown

 

Menu vertikal Dropdown ini sangat Praktis karena Menu ini akan bergeser turun dengan sendirinya ketika Cursor Mouse diarahkan ke Menu.
Cara Pemasangannya juga gampang karena hanya menambahkan gadget pada Tata Letak jadi apabila terjadi kesalahan, kita dapat dengan mudah untuk menghapus atau memperbaikinya

Cara Pemasangannya :

• Pada Menu Tata Letak
• Klik Tanbahkan Gadget
• Pilih HTML/Javascript
• Copy Paste kode script dibawah ini kedalamnya :
  
  

<!---Start code show hide by;"Dido-Borneo.blogspot.com"---><style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 300px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #9DB6D7;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #0A0A0A;
display: block;
width: 250px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #B2D8E0;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: auto;
}
</style>
<nav>
<div class="menu-item">
<h4><a href="#" target="_blank"">Menu I</a></h4>
<ul>
<li><a href="URL Tujuan" target="_blank">Menu I.a</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.b</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.c</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.d</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.e</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="#">Menu II</a></h4>
<ul>
<li><a href="URL Tujuan" target="_blank">Menu II.a</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.b</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.c</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.d</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.e</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="#" target="_blank"">Menu III</a></h4>
<ul>
<li><a href="URL Tujuan" target="_blank">Menu III.a</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.b</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.c</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.d</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.e</a></li>
</ul>
</div>
</nav>
<!---End code show hide by;"Dido-Borneo.blogspot.com"--->

NB : 

• Perhatikan Tulisan yang berwarna dan Tebal Pada Script, Ganti dengan kreasi sobat
• width: 300px = Ukuran Lebar Menu

[ Baca Selengkapnya ]

Cara menonaktifkan fungsi block pada blog (anti Block)

Mungkin sebagian dari sobat tidak ingin artikel/Postingnya di Copas Orang lain tanpa back link aktif dari sumber artikel yang di Copas

Berikut Saya akan Membagikan sedikit Script untuk mematikan fungsi Block Teks tersebut :

• Pada Halaman dasbor, Pilih Template
• Pilih Edit HTML
• Kemudian Cari kode <head> (Tekan F3 untuk mempercepat poses pencarian)
• Copas Script dibawah ini dan letakkan Tepat dibawah  kode <head>

<!-- Start Code Anti Block Teks By Dido Borneo -->
<SCRIPT type='text/javascript'>
if (typeof document.onselectstart!=&quot;undefined&quot;) {
document.onselectstart=new Function (&quot;return false&quot;);
}
else{
document.onmousedown=new Function (&quot;return false&quot;);
document.onmouseup=new Function (&quot;return true&quot;);
}
</SCRIPT>
<!-- END Code Anti Block Teks By Dido Borneo -->

[ Baca Selengkapnya ]

Membuat Recent Post Berupa Teks Berjalan di Blog

Recent Posts yang saya posting kali ini mungkin agak berbeda dengan Recent Posts pada umumnya.
Bentuk Recent Post ini berupa teks berjalan dari arah Kanan ke arah Kiri Blog.
Berikut Tutorialnya :

• Pada Menu Tata Letak, Klik Tambahkan Gadget
• Pilih HTML/Javascript
• Copy Paste Kode script dibawah ini ke dalamnya :

<!---Start End code widget Recent Post by;"Dido-Borneo.blogspot.com"--->
<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json)
{
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
try
{
sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
if( nWidth)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
}
else
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}
if( nScrollDelay)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if(sDirection)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
if(sDirection == "left" || sDirection =="right")
{
//For left and right directions seperate the headilnes by two spaces.
sHeadlineTerminator = "&nbsp;&nbsp;";
}
else
{
//For down and up directions seperate headlines by new line
sHeadlineTerminator = "\<br/\>";
}
}
if(sOpenLinkLocation =="N")
{
sPostLinkLocation = " target= \"_blank\" ";
}
else
{
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = "";
for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
{
objPost = json.feed.entry[nFeedCounter];
for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
{
if (objPost.link[nCounter].rel == 'alternate')
{
sPostURL = objPost.link[nCounter].href;
break;
}
}
sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
}
catch(exception)
{
alert(exception);
}
}
//]]>
</script>
<script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth;var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://dido-borneo.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>
<!---End code widget Recent Post by;"Dido-Borneo.blogspot.com"--->

Keterangan :

• var nMaxPosts = 20 adalah jumlah postingan terakhir.
• var nScrollDelay = 180 adalah kecepatan text.
• var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan right jika ingin text tersebut berjalan dari kiri ke kanan.
• var sOpenLinkLocation = "Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).
• var sBulletChar = "•" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.
• http://dido-borneo.blogspot.com adalah Nama Blog Saya ( Silahkan Ganti dengan Nama Blog Sobat )

[ Baca Selengkapnya ]

Cara Membuat Headline News pada Blog

Ketika kita menonton siaran berita di televisi (Misalkan Metro TV), Kita pasti pernah melihat berita berjalan pada bagian bawah layar televisi. 
dan Metode Berita Berjalan itu akan kita terapkan Pada Blog
Berikut Tutorialnya :

• Pada Menu Tata Letak, Klik Tambahkan Gadget 
• Pilih HTML/JavaScript
• Kemudian Copy Paste kode script dibawah ini :

<!---Start code show hide by;"Dido-Borneo.blogspot.com"--->
<script type="text/javascript">
var hn_url_blog = "URL Blog Sobat";
var hn_jumlah_post = 8;
var hn_warna_latar = "#EEEEEE";
var hn_warna_garis = "#000000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="https://sites.google.com/site/didopalangkaraya/project/Headline-News.js">
</script>
<!---End code show hide by;"Dido-Borneo.blogspot.com"--->

Keterangan :

8 Jumlah posting yang akan ditampilkan.
#EEEEEE warna background yang ditampilkan.
#000000 Adalah warna bingkai atau border.
bottom adalah Posisi headline berada dibawah, jika ingin diatas ganti dengan top.
true menampilkan tulisan Headline news of  Nama Blog Sobat, jika tidak ingin ditampilkan ganti dengan false

[ Baca Selengkapnya ]

Cara Membuat menu horizontal dan Search box

Tutorialnya :

• Pada dashboard Pilih Template
• Klik Edit HTML
• Cari kode ]]></b:skin> (Tekan tombol F3 untuk mempermudah pencarian)
• Copy Paste script Dibawah ini dan Letakkan tepat Diatas Kode ]]></b:skin>
  
  /************************************************************************/
  /* Menu horizontal multi level & search box
  /* (C)2010 Update by Dido Borneo
  /* visit http://dido-borneo.blogspot.com to get more Widget Collection /************************************************************************/
  #NavbarMenu {
  width: 960px;
  height: 35px;
  background:#000147 url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/navbar3copy_zps1802505d.jpg) repeat-x top;
  color: #000147;
  margin: 0 auto 0;
  padding: 0;
  font: bold 11px Arial, Tahoma, Verdana;
  border-top: 1px solid #AFAFAF;
  border-bottom: 1px solid #FFFFFF;
  }
  #NavbarMenuleft {
  width: 960px;
  float: left;
  margin: 0;
  padding: 0;
  }
  #nav {
  margin: 0;
  padding: 0;
  }
  #nav ul {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  }
  #nav li {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  #nav li a, #nav li a:link, #nav li a:visited {
  color: #FFE600;
  display: block;
  text-transform: capitalize;
  margin: 0;
  padding: 9px 15px 8px;
  font: normal 15px Georgia, Times New Roman;
  }
  #nav li a:hover, #nav li a:active {
  background:#0400FF;
  color: #36731b;
  margin: 0;
  padding: 9px 15px 8px;
  text-decoration: none;
  }
  #nav li li a, #nav li li a:link, #nav li li a:visited {
  background: #6A00FF url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/navbar3copy_zps1802505d.jpg) repeat-x top;
  width: 200px;
  color: #FFDD00;
  text-transform: lowercase;
  float: none;
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid #99C9FF;
  border-left: 1px solid #99C9FF;
  border-right: 1px solid #99C9FF;
  font: normal 14px Georgia, Times New Roman;
  }
  
  #nav li li a:hover, #nav li li a:active {
  background: #e3f1ce;
  color: #156018;
  padding: 7px 10px;
  }
  #nav li {
  float: left;
  padding: 0;
  }
  #nav li ul {
  z-index: 9999;
  position: absolute;
  left: -999em;
  height: auto;
  width: 170px;
  margin: 0;
  padding: 0;
  }
  #nav li ul a {
  width: 140px;
  }
  #nav li ul ul {
  margin: -32px 0 0 171px;
  }
  #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  left: -999em;
  }
  #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
  left: auto;
  }
  #nav li:hover, #nav li.sfhover {
  position: static;
  }
  #search{width:210px;font-size:11px;float:right;margin:0;padding:0}
  #searchform{overflow:hidden;display:inline;margin:0;padding:0}
  #searchbox{background:#ddd;margin:0;padding:0}
  #search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}
  #search .btn{width:auto;border:0;margin:7px 0 0;padding:0}

• Kemudian Cari Kode yang Mirip Dengan kode dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>

• Copy Paste Kode Dibawah ini dan Letakkan Tepat Diatasnya
  
  <div id='NavbarMenu'>
  <div id='NavbarMenuleft'>
  <ul id='nav'>
  <li><a expr:href='data:blog.homepageUrl' title=''>Home</a></li>
  <li><a href='#'>Baju</a>
  <ul>
  <li><a href='Alamat URL'>Baju Hitam</a></li>
  <li><a href='Alamat URL'>Baju Putih</a></li>
  <li><a href='Alamat URL'>Baju Merah</a></li>
  </ul></li>
  <li><a href='#'>Sandal dan Sepatu</a>
  <ul>
  <li><a href='#'>Sandal</a>
  <ul>
  <li><a href='Alamat URL'>Sandal Baru</a></li>
  <li><a href='Alamat URL'>Sandal Rusak</a></li>
  </ul></li>
  <li><a href='#'>Sepatu</a>
  <ul>
  <li><a href='#'>Sepatu Hitam</a>
  <ul>
  <li><a href='Alamat URL'>Sepatu Hitam Baru</a></li>
  <li><a href='Alamat URL'>Sepatu Hitam Rusak</a></li>
  <li><a href='Alamat URL'>Sepatu Hitam Curian</a></li>
  </ul></li>
  <li><a href='#'>Sepatu Putih</a>
  <ul>
  <li><a href='Alamat URL'>Sepatu Putih Baru</a></li>
  <li><a href='Alamat URL'>Sepatu Putih Rusak</a></li>
  <li><a href='Alamat URL'>Sepatu Putih Curian</a></li>
  </ul></li>
  </ul></li>
  </ul></li>
  <li><a href='Alamat URL'>Tas</a></li>
  <li><a href='Alamat URL'>Topi</a></li>
  </ul>
  <div id='search'>
  <form action='Masukkan Url Blog Sobat Disini/search' id='searchform' method='get' style='display:inline;'>
  <input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
  <input class='btn' name='' src='http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/search_zps3a61a7ca.png' type='image' value='Go'/>
  </form>
  </div>
  </div>
  </div>

Keterangan :

Alamat URL (Alamat URL Tujuan Sobat)
Ganti Judul yang berwarna Hijau dengan Judul kreasi sobat Sendiri

[ Baca Selengkapnya ]

Cara Membuat Tulisan Berjalan Di Addres Bar

Tutorialnya :

• Pada Menu Tata Letak
• Klik Tambahkan Gadget
• Pilih HTML/Javascript
• Kemudian Copy Paste kode Script Dibawah ini :

<!---Start code show hide by;"Dido-Borneo.blogspot.com"--->
<script type='text/javascript'>
//<![CDATA[
msg = " .::Selamat Datang Di Dido-Borneo.Blogspot.com::. ";
msg = " .::Terima Kasih Atas Kunjungannya::. " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>
<!---End code show hide by;"Dido-Borneo.blogspot.com"--->

NB:

Silahkan Ganti Tulisan Berwarna Merah Diatas dengan Tulisan sobat sendiri
Contoh hasilnya dapat sobat lihat di  Address Bar blog Saya

[ Baca Selengkapnya ]

Membuat Tombol backtop auto hidden

Tutorial Pemasangan Tombol Back top Auto Hidden :
Pada Menu Tatak Letak, Klik Tambahkan Gadget
Kemudian Pilih HTML/Javascript
Copy Paste Kode script Dibawah Ini Script

<!---Start code show hide by;"Dido-Borneo.blogspot.com"--->
<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="Alamat URL Link Tombol Backtop" />', //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:'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>
<!---End code show hide by;"Dido-Borneo.blogspot.com"--->

NB :
Untuk Alamat URL Link Tombol Backtop, Sobat Dapat Menggunakan Alamat URL sobat sendiri Atau Bisa juga memakai Kode URL Link Dibawah Ini :

http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/panah_zps66d4cb0b.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/panah2_zps57b102dd.png

[ Baca Selengkapnya ]

Daftar Isi dengan fitur Accordion

• Sebelum sobat Memasang Script Daftar isi ini, Pastikan Terlebih Dahulu kalau Template sobat sudah terpasang Script Jquery'nya.
• Apabila Belum Terpasang, Klik Template Pada menu Dashboard
•  Pilih Edit HTML
• Cari kode </head>
• Copy Paste Script Jquery dibawah ini, Tepat Diatas kode </head>
  
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

• Kemudian Masuk Pada Menu Tata Letak
• Klik Tambahkan Gadget
• Pilih HTML/Javascript
• Copy Paste Script Daftar Isi Accordion Dibawah Ini

<!---Start code show hide by;"Dido-Borneo.blogspot.com"--->
<style>
#arsip {
background-color:#fefefe;
color:#000;
border:2px solid #fafafa;
margin-bottom:30px;
box-shadow:0 1px 2px #000;
-webkit-box-shadow:0 1px 2px #000;
-moz-box-shadow:0 1px 2px #000;
overflow:hidden;
}
#arsip .kepala {
background-color:#67b434;
color:#000;
border-bottom:2px solid #666;
overflow:hidden;
margin:0px;
cursor:pointer;
text-decoration:none;
text-align:center;
line-height: 30px;
font-size: 20px;
text-transform:uppercase;
padding:10px 15px 11px;
}
#arsip .kepala:hover {
background-color:#666;
color:#f1f1f1;
}

#arsip .badan li a:link {color:#67b434;}
#arsip .badan li a:visited {color:#333;}
#arsip ol {list-style-type:decimal;}
#arsip .badan li a:hover {text-transform:uppercase;}

#arsip time {float:right;margin-right:20px;}
@media screen and (max-width: 680px) {
#arsip time {display:none;}
#arsip .kepala {line-height: 25px;font-size: 16px;padding:2px;}
}
</style><div class='clear'/>
<script src="https://sites.google.com/site/didopalangkaraya/project/DFTR.js" type="text/javascript"></script>
<script src="http://dido-borneo.blogspot.com/feeds/posts/default?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<!---End code show hide by;"Dido-Borneo.blogspot.com"--->

Catatan :
Jangan Lupa Untuk Mengganti Alamat URL Feed yang Berwarna Merah Diatas dengan URL Feed Sobat Sendiri

==========================================

Daftar Isi Accordion warna Hitam Abu-abu

=============================================

#arsip background-color menjadi #ccc dan color #000
#arsip .kepala background-color menjadi #666 dan color #bbb
#arsip .kepala:hover background-color #3c3c3c dan color #fefefe
#arsip .badan li a:link color #333
#arsip ol dengan decimal

=============================================

Daftar Isi Accordion warna Putih Abu-abu

=============================================

#arsip background-color menjadi #fefefe dan color #000
#arsip .kepala atur background-color #f1f1f1 dan color #f26300
#arsip .kepala:hover background-color #f26300 dan color #000
#arsip .badan li a:link color #f26300
#arsip ol dengan square

=============================================

Daftar Isi Accordion warna Orange

=============================================

#arsip background-color menjadi #f1f1f1 dan color #000
#arsip .kepala atur background-color #f26300 dan color #000
#arsip .kepala:hover background-color #ddd dan color #f26300
#arsip .badan li a:link color #f26300
#arsip ol dengan circle

=============================================

Daftar Isi Accordion warna Merah

=============================================

#arsip background-color menjadi #fefefe dan color #000
#arsip .kepala atur background-color #cc181e dan color #333
#arsip .kepala:hover background-color #333 dan color #fff
#arsip .badan li a:link color #cc181e
#arsip ol dengan circle

=============================================

Daftar Isi Accordion warna Biru

=============================================

#arsip background-color menjadi #d8dfea dan color #000
#arsip .kepala atur background-color #3b5998 dan color #bbb
#arsip .kepala:hover background-color #004b73 dan color #ccc
#arsip .badan li a:link color #3b5998
#arsip ol dengan decimal-leading-zero

 

[ Baca Selengkapnya ]

Membuat Pesan Pembuka dan Penutup pada blog

Script Pembuka dan Penutup Hanyalah sebuah script ringan yang tidak akan berpengaruh pada proses reload/loading Blog kita.
Dalam Script ini kita dapat berkreasi dalam membuat Pesan ketika ada Pengunjung yang masuk/keluar dari Blog kita

Berikut Tutorialnya :

• Pada Dashboard Klik Template
• Pilih Edit HTML 
• Cari kode <head> 
• Copy Paste Script Di bawah ini, Tepat Dibawah kode  <head>

<script type='text/javascript'>
alert(&quot;Selamat datang di Dido-Borneo.Blogspot.com, Jangan lupa Tinggalkan komentarnya ya..&quot;)
</script>

• Untuk Pesan Penutupnya Copas aja Script Dibawah ini dan Letakkan tepat dibawah Pesan Pembuka tadi

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert(&#39;Terima kasih atas kunjungannya, Semoga Bermamfaat.. &#39;);
}
parent.window.onunload=goodbye;
</script>

Catatan :

• Perhatikan Kata-kata yang berwarna Merah Diatas
• Silahkan Sobat Ganti Sesuai dengan kreasi sobat sendiri

[ Baca Selengkapnya ]

Membuat Tampilan Entri Popular Berwarna dan Menarik

Gambar Screenshot

Apa itu Entri Popular (Post  Popular)??
Entri Popular ialah suatu Posting yang paling sering dilihat Oleh Pengunjung, dan Agar Entri Popular terlihat lebih Menarik Dan Indah Maka kita sekarang akan membuat Entri Popular tersebut seperti pada hasil Gambar Screenshot di atas.

Tutorialnya :

• Pada Dashboard pilih template
• Klik Edit HTML
• Cari kode ]]></b:skin>
• Copy Paste Kode Script Dibawah Ini dan Letakkan tepat diatas kode ]]></b:skin>
  
  <!-- Start Widget Entri Popular Script By "Dido-Borneo.Blogspot.com" -->
  #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
  #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
  #PopularPosts1 ul li:first-child:after,
  #PopularPosts1 ul li:first-child + li:after,
  #PopularPosts1 ul li:first-child + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
  #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
  #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
  #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
  #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
  #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
  #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
  #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
  #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
  #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
  #PopularPosts1 ul li:first-child + li:after{content:"2"}
  #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
  #PopularPosts1 ul li:first-child:after{content:"1"}
  #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
  #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
  <!-- End Widget Entri Popular Script By "Dido-Borneo.Blogspot.com" -->
  

• Simpan (Save)

Catatan :

Perhatikan Pengaturan Entri Popular Anda
Hilangkan tanda centang pada Cuplikan gambar dan keterangan nya
Tampilkan minimal 9 post saja

[ Baca Selengkapnya ]

Kumpulan beberapa Perintah HTML simple

• Untuk membuat baris dan paragraf baru

Baris baru/enter = <br/>
Paragraf baru = <p/>

•  Teks tebal
  
  Contoh :
  Teks Tebal

<b>Teks Tebal</b>

• Teks ketik

Contoh
Teks ketik

<tt>Teks ketik</tt>

• Untuk membuat teks berwarna

Contoh :
teks sobat disini 

<span style="color:#ff0000">teks sobat disini</span>

• Untuk membuat teks berada di tengah

Contoh :
teks sobat disini

<center>teks sobat disini</center>

• Untuk membuat teks berada di kanan

Contoh :

Teks Rata Kanan

<div style="text-align: right;"> Teks Rata Kanan </div>

• Untuk membuat teks berada di kiri

Contoh :

Teks Rata Kiri

<div style="text-align: left;"> Teks Rata Kiri </div>

• Untuk membuat teks bergaris 

Contoh :

teks bergaris

<span style="text-decoration: line- through;">teks bergaris</span>

Atau Bisa juga menggunakan perintah
<s>teks bergaris<s>

• Untuk membuat garis bawah pada teks

Contoh :
teks bergaris bawah

<span style="text-decoration: underline;">teks bergaris bawah </span>

• Teks sub atas

 Contoh :
Teks Normal kita^{Teks sub atasnya}

Teks Normal Kita^{Teks sub atasnya}

• Teks sub bawah

Contoh :
Teks Normal Kita_{Teks sub bawahnya}

Teks Normal Kita_{Teks sub bawahnya}

• Untuk membuat teks efek stabilo

Contoh :
Teks efek stabilo

<span style="background-color: #07C200; font color: #FF0000;">Teks efek stabilo</span>

• Untuk membuat teks shadow/berbayang

Contoh :
text berbayang

<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 3px red }</style><font color="yellow"><b class="drop-shadow"><b>text berbayang</b></font></b>

• Untuk membuat Teks bagian belakang menjorok ke dalam
  Contoh :
           Teks
  Teks Normalnya disini

Teks<p style="text-indent:50px;">Teks Normalnya disini</p>

                 text-indent:50px adalah jarak menjoroknya

•  Untuk menampilkan gambar

<img src="url gambar sobat"</a>

•  Untuk membuat link dengan gambar

<a href="url tujuan"><img src ="url gambar sobat"/></a>

• Untuk membuat link dengan teks

<a href="url tujuan">teks sobat disini</a> 

• Untuk Membuat link dengan gambar dan teks

<a href="http://url tujuan"><img src="http://url gambar">teks sobat disini</a>

• Untuk Merubah ukuran gambar

<img src="http://url gambar" width="50" height="50">

                 Nilai 50 adalah nilai ukuran gambarnya (atur sesuai keinginan)

[ Baca Selengkapnya ]

Kumpulan Label Cloud Keren & Tutorial Pemasangannya

==========================================

Model I

==========================================

Kode Scriptnya :

/*-----Labels Cloud widget V.1 by Dido Borneo ----*/
.label-size{
background-color:#ffffff;
border:2px solid #2AA4CF;
float:left;
font-family:georgia;
font-size:12px;
margin:0px 1px 1px 0px;
padding:7px;
text-transform:uppercase;
box-shadow:rgba(0, 0, 0, 0.45098) 0 1px 11px;
}

.label-size:hover {
background-color:#ffffff;
border:none;
border-bottom-left-radius:12px;
border-bottom-right-radius:12px;
border-top-left-radius:12px;
border-top-right-radius:12px;
font-family:georgia;
font-weight:bold;
padding:7px;
text-decoration:none;
border-bottom-style:solid;
text-color:#fff;
border-bottom-color:#595b67;
border-bottom-width:4px;box-shadow:rgba(0, 0, 0, 0.45098) 0 1px 11px;
}

==========================================

Model II

==========================================

 

Kode Scriptnya :

/*-----Labels Cloud Styled widget V.2 by Dido Borneo----*/ 
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666;
} 

.label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; 
}

.label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; 
}

==========================================

Model III

==========================================

Kode Scriptnya :

/*-----Labels Cloud Styled widget V.3 by Dido Borneo----*/  

#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 4px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:3px 4px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#E95D0C;padding:3px 4px;color:#fff}
#Label1 .label-size-1 a {background:#ff8c00;font-size:11px;}
#Label1 .label-size-2 a {background:#556b2f;font-size:11px;}
#Label1 .label-size-3 a {background:#cd5c5c;font-size:11px;}
#Label1 .label-size-4 a {background:#B32A32;font-size:11px;}
#Label1 .label-size-5 a {background:#66CC00;font-size:11px;}
#Label1 .cloud-label-widget-content span a:hover {background:#006400;}

==========================================

Model IV

==========================================

Kode Scriptnya :

/*-----Labels Cloud Styled widget V.2 by Dido Borneo----*/
.label-size {display: block; float: left; background: #555 !important; margin: 0 1px 1px 0; color: #eee; font-size: 100%; }
.label-size:hover, .label-size a:hover, .label-size span:hover{background:#3384ff;}

.label-size a, .label-size span {display: inline-block; color: #fff; padding: 4px 4px;}

==========================================

Model V

==========================================

Kode Scriptnya :

/*-----Labels Cloud widget by Dido Borneo ----*/
#Label1 a{outline:none;
    border: 1px rgba(0,0,0,0.2) solid;
    padding: 4px 6px 4px 12px;
    text-decoration:none;
    color:black;
width:auto;
    white-space: nowrap;
font-family: arial;
    font-size: 13px;
    font-weight: bold;
    position: relative !important;
    background-image: linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -o-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -moz-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);
background-image: -ms-linear-gradient(bottom, rgb(32,107,107) 47%, rgb(34,201,184) 100%, rgb(35,95,97) 100%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.47, rgb(32,107,107)),
    color-stop(1, rgb(34,201,184)),
    color-stop(1, rgb(35,95,97))
);
    float:left;
    padding: 4px 3px;
    margin: 0 5px 5px 0;
   border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px;

}
#Label1 a:hover {
background-image: linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -o-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -moz-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);
background-image: -ms-linear-gradient(bottom, rgb(92,12,12) 47%, rgb(0,0,0) 100%, rgb(120,26,26) 100%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.47, rgb(92,12,12)),
    color-stop(1, rgb(0,0,0)),
    color-stop(1, rgb(120,26,26))
);
color:#fff;
}
#Label1 a:active {
background:#EC88C9;}

==========================================

Tata Cara Pemasangannya

==========================================

• Pada dashboard, Pilih Template
• Klik Edit Html
• Cari Kode  ]]></b:skin>
• Copy Paste kode script Label Cloud Pilihan sobat
• Letakkan tepat Diatas Kode ]]></b:skin>
• Save dan Lihat Hasil

[ Baca Selengkapnya ]

Label Cloud Versi Warna Pilihan

=============================================

Versi Hijau

=============================================

Kode Scriptnya :

/*-----Labels Cloud Styled widget by Dido Borneo----*/
.label-size {
  display:inline-block;
  padding:0 10px;
  height:29px;
  line-height:29px;
  border-radius:5px;
  font-weight:normal;
  font-size:10px;
  text-decoration:none;
}

.label-size {
  border:1px solid #769e42;
  box-shadow:inset 0 1px 0 #c5e59c ;
  background-color:#9ed35a;
  text-shadow:0 1px 1px #6ea23b;
  color:#fff;
  background-image:linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-o-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-moz-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-webkit-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-ms-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
}

.label-size:hover {
  background-color:#b7fa66;
  background-image:linear-gradient(top,#b7fa66 0%,#7ec940 100%);
  background-image:-o-linear-gradient(top,#b7fa66 0%,#7ec940 100%);
  background-image:-moz-linear-gradient(top,#b7fa66 0%,#7ec940 100%);
  background-image:-webkit-linear-gradient(top,#b7fa66 0%,#7ec940 100%);
  background-image:-ms-linear-gradient(top,#b7fa66 0%,#7ec940 100%);
}

.label-size:active {
  background-image:linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-o-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-moz-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-webkit-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-ms-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
}

.label-size {
  display:inline-block;
  border-radius:5px 0 0 5px;
  border-right-width:0;
  position:relative;
  z-index:5;
  margin-right:20px;
  margin-bottom:10px;
}

.label-size:after {
  content:" ";
  width:22px;
  height:22px;
  line-height:18px;
  font-size:25px;
  border-top:1px solid #769e42;
  border-right:1px solid #769e42;
  box-shadow:inset 0 1px 0 #c5e59c ;
  background-color:#9ed35a;
  text-shadow:0 1px 1px #7eac46;
  border-radius:3px 7px 3px 0;
  color:#fff;
  background-image:linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-o-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-moz-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-webkit-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-ms-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  position:absolute;
  top:3px;
  right:-12px;
  z-index:-3;
  -webkit-transform:rotate(45deg); /* Saf3.1+,Chrome */
-moz-transform:rotate(45deg); /* FF3.5+ */
-ms-transform:rotate(45deg); /* IE9 */
-o-transform:rotate(45deg); /* Opera 10.5 */
transform:rotate(45deg);
  filter:progid:DXImageTransform.Microsoft.Matrix(/* IE6–
  IE9 */
M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476,sizingMethod='auto expand');
  zoom:1;
}

.label-size:hover:after {
  background-color:#b7fa66;
  background-image:linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
  background-image:-o-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
  background-image:-moz-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
  background-image:-webkit-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
  background-image:-ms-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);
}

.label-size:active:after {
  background-image:linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-o-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-moz-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-webkit-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
  background-image:-ms-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);
}

.label-size:before {
  content:" ";
  height:5px;
  width:5px;
  display:block;
  position:absolute;
  right:-3px;
  top:11px;
  background-color:#fcfdf5;
  border:1px solid #83ab52;
  border-radius:5px;
  box-shadow:0 1px 0 #b2ddd83;
}

.label-size span {
  padding:2px 5px;
  border:1px solid #9e5c26;
  border-radius:5px;
  box-shadow:inset 0 1px 0 #f5bf8c;
  background-color:#ed943f;
  text-shadow:0 1px 1px #000;
  margin-left:10px;
  background-image:linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
  background-image:-o-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
  background-image:-moz-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
  background-image:-webkit-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
  background-image:-ms-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);
}

=============================================

Versi Biru

=============================================

Kode Scriptnya :

/*-----Labels Cloud Styled widget by Dido Borneo----*/
.label-size {
  margin:0;
  padding:0;
  position:relative;
}

.label-size a {
  float:left;
  height:24px;
  line-height:24px;
  position:relative;
  font-size:12px;
  margin-bottom:9px;
  margin-left:20px;
  padding:0 10px 0 12px;
  background:#0089e0;
  color:#fff;
  text-decoration:none;
  -moz-border-radius-bottomright:4px;
  -webkit-border-bottom-right-radius:4px;
  border-bottom-right-radius:4px;
  -moz-border-radius-topright:4px;
  -webkit-border-top-right-radius:4px;
  border-top-right-radius:4px;
}

.label-size a:before {
  content:"";
  float:left;
  position:absolute;
  top:0;
  left:-12px;
  width:0;
  height:0;
  border-color:transparent #0089e0 transparent transparent;
  border-style:solid;
  border-width:12px 12px 12px 0;
}

.label-size a:after {
  content:"";
  position:absolute;
  top:10px;
  left:0;
  float:left;
  width:4px;
  height:4px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  background:#fff;
  -moz-box-shadow:-1px -1px 2px #004977;
  -webkit-box-shadow:-1px -1px 2px #004977;
  box-shadow:-1px -1px 2px #004977;
}

.label-size a:hover {
  background:#555;
}

.label-size a:hover:before {
  border-color:transparent #555 transparent transparent;
}

=============================================

Versi Kuning

=============================================

Kode Scriptnya :

/*-----Labels Cloud Styled widget by Dido Borneo----*/
.label-size {
float:left;
margin:0 0 7px 20px;
position:relative;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:0.75em;
font-weight:bold;
text-decoration:none;
color:#996633;
text-shadow:0 1px 0 rgba(255,255,255,.4);
padding:0.417em 0.417em 0.417em 0.917em;
border-top:1px solid #d99d38;
border-right:1px solid #d99d38;
border-bottom:1px solid #d99d38;
-webkit-border-radius:0 0.25em 0.25em 0;
-moz-border-radius:0 0.25em 0.25em 0;
border-radius:0 0.25em 0.25em 0;
background-image:-webkit-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
background-image:-moz-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
background-image:-o-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
background-image:-ms-linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
background-image:linear-gradient(top,rgb(254,218,113),rgb(254,186,71));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71',EndColorStr='#feba47');
-webkit-box-shadow:inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);
box-shadow:inset 0 1px 0 #faeaba,0 1px 1px rgba(0,0,0,.1);
z-index:100;
}

.label-size:before {
content:'';
width:1.30em;
height:1.39em;
background-image:-webkit-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
background-image:-moz-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
background-image:-o-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
background-image:-ms-linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
background-image:linear-gradient(left top,rgb(254,218,113),rgb(254,186,71));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71',EndColorStr='#feba47');
position:absolute;
left:-0.69em;
top:.2em;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
border-left:1px solid #d99d38;
border-bottom:1px solid #d99d38;
-webkit-border-radius:0 0 0 0.25em;
-moz-border-radius:0 0 0 0.25em;
border-radius:0 0 0 0.25em;
z-index:1;
}

.label-size:after {
content:'';
width:0.5em;
height:0.5em;
background:#fff;
-webkit-border-radius:4.167em;
-moz-border-radius:4.167em;
border-radius:4.167em;
border:1px solid #d99d38;
-webkit-box-shadow:0 1px 0 #faeaba;
-moz-box-shadow:0 1px 0 #faeaba;
box-shadow:0 1px 0 #faeaba;
position:absolute;
top:0.667em;
left:-0.083em;
z-index:9999;
}

#Label1 {
height:210px;
}

.label-size:hover {
background-image:-webkit-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
background-image:-moz-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
background-image:-o-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
background-image:-ms-linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
background-image:linear-gradient(top,rgb(254,225,141),rgb(254,200,108));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d',EndColorStr='#fec86c');
border-color:#e1b160;
}

.label-size:hover:before {
background-image:-webkit-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
background-image:-moz-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
background-image:-o-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
background-image:-ms-linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
background-image:linear-gradient(left top,rgb(254,225,141),rgb(254,200,108));
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d',EndColorStr='#fec86c');
border-color:#e1b160;
} 

=============================================

Versi Kuning Kotak

=============================================

 

Kode Scriptnya :

/*-----Labels Cloud Styled widget by Dido Borneo----*/
.label-size a {
display:inline-block;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.4);
padding:4px 7px;
font-family:'Helvetica Neue',helvetica,sans-serif;
font-size:12px;
line-height:14px;
height:14px;
vertical-align:middle;
margin-bottom:6px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),inset 0 1px 0 0 rgba(255,255,255,0.4);
-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),inset 0 1px 0 0 rgba(255,255,255,0.4);
box-shadow:0 1px 1px 0 rgba(0,0,0,0.2),inset 0 1px 0 0 rgba(255,255,255,0.4);
}

.label-size a {
color:#996633;
border:1px solid #DDA13C;
background:rgb(238,177,75);
background:url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background:-moz-linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(238,177,75,1)),color-stop(100%,rgba(204,145,45,1)));
background:-webkit-linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background:-o-linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background:-ms-linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background:linear-gradient(top,rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b',endColorstr='#cc912d',GradientType=0 );
}

.label-size a:before {
content:'\2022';
color:#FFFFFF;
margin-right:4px;
font-size:15px;
line-height:13px;
height:13px;
vertical-align:text-top;
text-shadow:0 -1px -1px rgba(0,0,0,0.2);
}

.label-size a:hover {
text-decoration:none;
background:rgb(240,183,86);
background:url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background:-moz-linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(240,183,86,1)),color-stop(100%,rgba(214,160,68,1)));
background:-webkit-linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background:-o-linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background:-ms-linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background:linear-gradient(top,rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756',endColorstr='#d6a044',GradientType=0 );
}

=============================================

Tata Cara Pemasangan

=============================================

• Pada dashboard, Pilih Template
• Klik Edit Html
• Cari Kode  ]]></b:skin>
• Copy Paste kode script Cloud Pilihan sobat
• Letakkan tepat Diatas Kode ]]></b:skin>
• Save dan Lihat Hasil

[ Baca Selengkapnya ]