okesharezone - Cara Membuat Widget Imsakiyah Ramadhan 2012 Seperti Okesharezone | Nah, pada tampilan beranda dan postingan okesharezone ini, terlihat ada jadwal imsakiyah. Jadwal Imsakiyah ini, kang hilman buat seperti itu, agar menarik perhatian. Selagi menarik perhatian, kita mudah mencari, jam berapa kita imsak, jam berapa kita shalat subuh, dan seterusnya.
Sekedar untuk menarik perhatian saja, untuk mempermudah pula pengunjung melihat jadwal imsakiyah dengan mudah. Bagi para blogger, mungkin tertarik dengan widget imsakiyah tersebut. Langsung saja, simak tipsnya ya.
Pertama
Buka blogger dashboard Anda
Kedua
Klik Rancangan > Edit HTML
Ketiga
Copy kode dibawah ini
<div class='ram' style='-webkit-box-shadow: rgb(204, 204, 204) 1px 2px 2px 1px; background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://cdn.okeinfo.net/www/2011/images/ad/ramadan/bg_jadwal.gif); background-origin: initial; background-repeat: repeat no-repeat; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; color: #333333; float: left; font-family: 'helvetica neue', helvetica, arial, freesans, 'liberation sans', 'numbus sans l', sans-serif; font-size: 13px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 5px; padding-top: 0px; width: 965px;'>
<img alt='ramadan' class='l p2' height='35' src='http://cdn.okeinfo.net/www/2011/images/ad/ramadan/jadwal.png' style='border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; float: left; padding-right: 10px;' width='210'/>
<ul style='margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 7px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;'>
<li class='ta mark' style='border-bottom-style: none; border-color: initial; border-left-color: rgb(62, 161, 62); border-left-style: none; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: none; border-right-width: 1px; border-top-style: none; border-width: initial; color: #ecf710; float: left; font-weight: bold; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 0px; padding-right: 7px; padding-top: 3px;'>Imsak : 04:35</li>
<li style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: solid; border-right-width: 1px; color: white; float: left; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Subuh : 04:45</li>
<li style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: solid; border-right-width: 1px; color: white; float: left; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Dzuhur: 12:01</li>
<li style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: solid; border-right-width: 1px; color: white; float: left; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Ashar: 15:23</li>
<li class='mark' style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: solid; border-right-width: 1px; color: #ecf710; float: left; font-weight: bold; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Magrib : 17:56</li>
<li class='ls' style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: initial; border-right-style: none; border-right-width: initial; color: white; float: left; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Isya : 19:09</li>
</ul>
<form action='http://www.okezone.com/' class='r kota' method='POST' name='form' style='float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;'>
<select id='daerah_atas' name='daerah_atas' style='color: #666666; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; width: 170px;'> <option selected='selected' style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='Pilih Kota'>Pilih Kota</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='ACEH'>ACEH</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='BALIKPAPAN'>BALIKPAPAN</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='BANDUNG'>BANDUNG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='BANJARMASIN'>BANJARMASIN</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='BOGOR'>BOGOR</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='DENPASAR'>DENPASAR</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='JAKARTA'>JAKARTA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='JAYAPURA'>JAYAPURA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='LAMPUNG'>LAMPUNG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MAKASAR'>MAKASAR</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MALANG'>MALANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MALUKU'>MALUKU</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MANADO'>MANADO</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MARAUKE'>MARAUKE</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MATARAM'>MATARAM</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MEDAN'>MEDAN</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PADANG'>PADANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PALANGKARAYA'>PALANGKARAYA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PALEMBANG'>PALEMBANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PEKANBARU'>PEKANBARU</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PONTIANAK'>PONTIANAK</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SAMARINDA'>SAMARINDA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SEMARANG'>SEMARANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SERANG'>SERANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SOLO'>SOLO</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SURABAYA'>SURABAYA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='YOGYAKARTA'>YOGYAKARTA</option> </select></form>
</div>
Keempat
Kemudian, setelah di copy, letakkan kode tersebut di atas menu horizontal, sehingga seperti beranda dan postingan okesharezone.
Kelima
Selesai sudah dan simpan template hasil editan Anda.
Demikian Cara Membuat Widget Imsakiyah Ramadhan 2012 Seperti Okesharezone, semoga bermanfaat :)
Tidak ada komentar:
Posting Komentar