Widget Quote Of The Day

Widget Quote Of The Day merupakan widget yang menampilkan kata-kata mutiara yang update setiap harinya. Widget ini cukup bermanfaat karena bisa memberikan motivasi positif untuk pengunjung blog yang melihat widget ini. Widget quote of the day menggunakan database quote yang diambil dari situs www.brainyquote.com. Tampilan dan data qoute widget ini dapat disesuaikan dengan keinginan sobat... Nahh, buat yang tertarik memasang widget ini silakan disimak cara pemasangannya...

Contoh :

Cara Pemasangan :

Klik "More Options" selector box kemudian klik "Layout" setelah itu pilih "Add a Gadget" kemudian pilih "HTML/JavaScript", seperti gambar dibawah ini.

Copy-paste kode berikut ini di kotak postingan gadget.

<style> #mozboxblue {width:250px;-moz-border-radius: 8px; -moz-box-shadow: inset 0 0 1px #fff; -webkit-border-radius: 8px; -webkit-box-shadow: inset 0 0 1px #fff; background-image: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: -ms-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: -o-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #327AA4), color-stop(0.5, #2E4B5A), color-stop(1, #5CB0DC)); background-image: -webkit-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); border-radius: 8px; box-shadow: inset 0 0 1px #fff; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#619bb9,endColorstr=#2E4B5A,GradientType=0); height: auto; margin: 0 0 0px 0; overflow: auto; padding: 5px;} #mozboxyellow {width:250px;-moz-border-radius: 8px; -moz-box-shadow: inset 0 0 1px #fff; -webkit-border-radius: 8px; -webkit-box-shadow: inset 0 0 1px #fff; background-image: -moz-linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); background-image: -ms-linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); background-image: -o-linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A4A205), color-stop(0.5, #E4E004), color-stop(1, #CFCC08)); background-image: -webkit-linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); background-image: linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); border-radius: 8px; box-shadow: inset 0 0 1px #fff; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A4A205,endColorstr=#E4E004,GradientType=0); height: auto; margin: 0 0 0px 0; overflow: auto; padding: 5px;} </style> <div id="mozboxblue"> <div style="background-color: white; border-radius: 4px; padding: 0px 0 0 5px;"> <script type="text/javascript" src="http://www.brainyquote.com/link/quotebr.js"></script> </div> </div>

<style>
#mozboxblue {width:250px;-moz-border-radius: 8px; -moz-box-shadow: inset 0 0 1px #fff; -webkit-border-radius: 8px; -webkit-box-shadow: inset 0 0 1px #fff; background-image: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: -ms-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: -o-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #327AA4), color-stop(0.5, #2E4B5A), color-stop(1, #5CB0DC)); background-image: -webkit-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); border-radius: 8px; box-shadow: inset 0 0 1px #fff; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#619bb9,endColorstr=#2E4B5A,GradientType=0); height: auto; margin: 0 0 0px 0; overflow: auto; padding: 5px;}
#mozboxyellow {width:250px;-moz-border-radius: 8px; -moz-box-shadow: inset 0 0 1px #fff; -webkit-border-radius: 8px; -webkit-box-shadow: inset 0 0 1px #fff; background-image: -moz-linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); background-image: -ms-linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); background-image: -o-linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A4A205), color-stop(0.5, #E4E004), color-stop(1, #CFCC08)); background-image: -webkit-linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); background-image: linear-gradient(top, rgba(164, 162, 5, 0.75), rgba(228, 224, 4, 0.75) 50%, rgba(207, 204, 8, 0.75)); border-radius: 8px; box-shadow: inset 0 0 1px #fff; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A4A205,endColorstr=#E4E004,GradientType=0); height: auto; margin: 0 0 0px 0; overflow: auto; padding: 5px;}
</style>
<div id="mozboxblue">
<div style="background-color: white; border-radius: 4px; padding: 0px 0 0 5px;">
<script type="text/javascript" src="http://www.brainyquote.com/link/quotebr.js"></script>
</div>
</div>

Catatan :
- width:250px => ukuran widget silakan anda sesuaikan lebar widget agar sesuai dengan tema blog anda.
- id="mozboxblue" => warna box ini tersedia dalam dua warna gradasi biru dan gradasi kuning, untuk menggunakan gradasi kuning tinggal mengganti mozboxlue menjadi mozboxyellow.
- Pilihan Quote :
  - Quote of the Day : http://www.brainyquote.com/link/quotebr.js
  - Art Quote of the Day : http://www.brainyquote.com/link/quotear.js
  - Funny Quote of the Day : http://www.brainyquote.com/link/quotefu.js
  - Love Quote of the Day : http://www.brainyquote.com/link/quotelo.js
  - Nature Quote of the Day : http://www.brainyquote.com/link/quotena.js
- ...