Cara membuat widget berefek transparant di blogger

Selamat pagi ~  Cara membuat widget berefek transparant itu adalah untuk mempercantik blogger/blogspot. di dalam pencarian google artikel ini belum ada.dan ini buatan saya keren gak .bagi anda yang mau lihat Klik Di Sini lihat di sidebarnya.artikel ini terkeren di dunia.yang belum ada di google.dan ini juga menggunakan css loh?? hehe… bagi yang mau perhatikan di bawah ini :

Langkah- langkah  membuat widget berefek transparant  :

        1.Buka Blogger

       2.Klik Template, Klik Edit HTML, Ceklis Expand Template Widget

       3.cari kode ]]></b:skin> (gunakanlah Ctrl + F di browser anda)

        4.Copy kode di bawah ini Di atas ]]></b:skin>

 
.mybox{position:relative;display:block;width:290px;max-height:500px;background:#333;color:#006400;overflow:auto;padding:0 0;margin:3px 3px;border:2px solid #777;border-radius:6px;opacity:0.2;filter:alpha(opacity=20);transition:1s;-o-transition:1s;-moz-transition:1s;-webkit-transition:1s}
.mybox:hover{opacity:1.0;filter:alpha(opacity=100)}
h1.post-title,.post h1 #Blog1 h1,#Blog2 h1{font-size:1.5em}
#accordion-container{font-size:12px;background:#ffffff;padding:2px 4px 4px 4px;border:1px solid #cccccc;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;-moz-box-shadow:0 5px 15px #cccccc;-webkit-box-shadow:0 5px 15px #cccccc;box-shadow:0 5px 15px #cccccc}
.accordion-header{font-size:14px;background:#ebebeb;margin:5px 0 0 0;padding:2px 5px;border:1px solid #cccccc;cursor:pointer;color:#666666;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px}
.active-header{-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOIkINIckLKByGjmAzRE_cS89jMrKqJ8yfHxWNiJeLac5RNEJQwPMgq8g8u5W6BFV_kLtyCT2BITdqkiUMIpSphNrKeBfzLudBnBeVw8mim3jZf3tfhIvRrxZb-HuswWP_Wq_bDLFF4RuW/s1600/active-header.gif) #cef98d;background-repeat:no-repeat;background-position:right 50%}
.active-header:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOIkINIckLKByGjmAzRE_cS89jMrKqJ8yfHxWNiJeLac5RNEJQwPMgq8g8u5W6BFV_kLtyCT2BITdqkiUMIpSphNrKeBfzLudBnBeVw8mim3jZf3tfhIvRrxZb-HuswWP_Wq_bDLFF4RuW/s1600/active-header.gif) #c6f089;background-repeat:no-repeat;background-position:right 50%}
.inactive-header{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiZU6zmqcPKMuAIoeLxaCPCdtr77oiIYUCym1-E_SNVj21sWBvAz5W7iacq1QPNOukCFi0IL2eti7wGaK2CnJ2HCeGZHGga9XYIuYo476byH1hh2HwXjsBUvG2mTWkVEkjaQ8bEYKtlQJ4/s1600/inactive-header.gif) #ebebeb;background-repeat:no-repeat;background-position:right 50%}
.inactive-header:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiZU6zmqcPKMuAIoeLxaCPCdtr77oiIYUCym1-E_SNVj21sWBvAz5W7iacq1QPNOukCFi0IL2eti7wGaK2CnJ2HCeGZHGga9XYIuYo476byH1hh2HwXjsBUvG2mTWkVEkjaQ8bEYKtlQJ4/s1600/inactive-header.gif) #f5f5f5;background-repeat:no-repeat;background-position:right 50%}
.accordion-content{display:none;padding:5px;background:#ffffff;border:1px solid #cccccc;border-top:0;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}

Cara Menggunakan :

      1.masih di tempat situs blogger

         2.copy code di bawah ini.

<div class="mybox">

<div style="border: 0px solid rgb(0, 0, 0); height: 250px; overflow: auto;">


<script src="https://sites.google.com/site/bloggermyblog/TableOfContents.js">


</script>

3.letakkan di tata letak, tambah gadget html/java scirpt di atas nya

Seperti Di bawah ini:

Hasilnya kira –kira seperti ini :