Latest Post

Tampilkan postingan dengan label Aksesoris Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Aksesoris Blog. Tampilkan semua postingan

Membuat Tab View Menu

TabUntuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobatblogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

Membuat menu densgan tab view memerlukan kode HTMLyang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantab kita langsung ke TKP.

  1. Silahkan login ke blogger dengan ID sobat tentunya.
  2. Tuju Tata Letak.
  3. Klik Edit HTML.
  4. Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap
  5. Kemudian letakkan kode javascript berikut sebelum kode </head>
    6.  

  6. <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
      var TabView = document.getElementById(TabViewId);

      // ----- Tabs -----

      var Tabs = TabView.firstChild;
      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

      var Tab = Tabs.firstChild;
      var i   = 0;

      do
      {
        if (Tab.tagName == "A")
        {
          i++;
          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
          Tab.className = (i == id) ? "Active" : "";
          Tab.blur();
        }
      }
      while (Tab = Tab.nextSibling);

      // ----- Pages -----

      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;

      var Page = Pages.firstChild;
      var i    = 0;

      do
      {
        if (Page.className == 'Page')
        {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
          Page.style.overflow = "auto";
          Page.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Page = Page.nextSibling);
    }

    // ----- Functions -------------------------------------------------------------

    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
    //]]>
    </script>


  7. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

  8. div.TabView div.Tabs
    {
    height: 30px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 98px; /* Lebar Menu Utama Atas */

    text-align: center;
    height: 30px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight: bold;
    color: #000; /* Warna Font Menu Utama Atas */
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #E6E6E6; /* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #E6E6E6; /* Warna background Kotak Utama */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }


  9. Kemudian Simpan Template.
  10. Langkah selanjutnya, silahkan sobat klik Tata Letak.
  11. Klik Elemen Halaman dan tambahkan Gadget.
  12. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div class="Pages" style="width: 300px; height: 250px;">

    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>

    </div>
    </div>
    </form>

    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>


  13. Kemudian Simpan.
  14. Keterangan :
  • Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
  • Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
  • Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Oke sobat, selamat mencoba.

2 comments
Labels:

Membangun Navigasi Halaman Berurut

Membangun Navigasi Halaman Berurut atau berhalaman Nomor, tentunya menjadikan tampilan blog kita menjadi lebih rapih dan memudahkan pengunjung untuk dapat melihat setiap artikel berurutan. Cara lain tentunya dengan melihat berdasarkan kategori.


Banyak cara untuk menampilkan navigasi Halaman Berurut dengan bermacam versi yaitu melakukan instalasi script melalui mekanisme edit HTML. Cara ini mungkin akan bermasalah dan potensial terjadi error karena pada saat install kode HTML tersebut tidak semua Tamplete bisa dengan mudah dibangun Navigasi Halaman ini.

Ada cara lain yang lebih mudah untuk membangun Navigasi Halaman Berurut yang letaknya di bagian bawah posting dengan contoh berikut :






Langkah-langkahnya dapat mengikuti urutan berikut:
1. Login ke blog anda.
2. Klik 'Layout/Tata Letak'
3. Klik 'Tambah Widget'
4. Pilih 'HTML/Java Script'.
5. Masukkan kode HTML di bawah ini.



<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;
margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {font-size:11px;
border: 1px solid #333;color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;
font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;
margin:0px 4px;text-decoration: none;
}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;font-weight: bold;
border: 1px solid #333;
color: #fff;background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;border: 1px solid #0066cc;
color: #0066cc;background-color: #FFFFFF;
}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;color: #000000;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function showpageCount(json) {var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=10;
var displayPageNum=5;
var firstPageWord = 'Home';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum">
<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i];
i++) {var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){if(title!=''){if(post.category){for(var c=0, post_category;
post_category = post.category[c];
c++) {if(encodeURIComponent(post_category.term)==thisLable){if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;}}}}//end if(post.category){itemCount++;
}
}else{
if(title!=''){if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;
}
if(title!='') postNum++;htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){if(fFlag ==0 && p == thisNum-2){if(thisNum==2){if(isLablePage){upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;}if(p==(thisNum-1)){html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){if(isLablePage){html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){if(thisNum>1){if(!isLablePage){html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' for '+(postNum-1)+': </span>'+html;if(thisNum<(postNum-1)){html += downPageHtml;html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';}if(postNum==1) postNum++;html += '</div>';
if(isPage isFirstPage isLablePage){var pageArea = document.getElementsByName("pageArea");var blogPager = document.getElementById("blog-pager");if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){blogPager.innerHTML = html;
}
}
}
</script><script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>



6. Letakkan di bawah ''posting blog'.








7. Simpan.

Ket: anda bisa ganti tulisan warna merah sesuai keinginan.
Misalnya Home diganti Awal, Next diganti Berikutnya, dll. Untuk pengaturan warna silakan dikreasi sendiri. Selamat mencoba.

1 comments
Labels:

Drop-down Blogroll

Membangun link blogroll dengan jumlah baris yang panjang tentunya membutuhkan banyak tempat sehingga blog kita tidak rapih sehinggan mengganggu pemandangan bagi pengunjung blog. Supaya tempat jadi optimal dan tidak terlalu banyak menggunakan tempat dib log maka Pakailah drop-down menu. Ikuti langkah-langkah berikut dan lihat tampilannya.

Copy / paste kode di bawah ini dan masukkan di sidebar blogger / blogspot . Jangan lupa untuk mengganti alamat URL dengan alamat situs yang diinginkan.

<div style="border:1px solid #006600;overflow:auto;width:160px;height:100px;">
<ul>
<li><a href="http://mencarikerjaan.blogspot.com/">Lowongan Kerja</a></li>
<li><a href="http://islamagamukuindah.blogspot.com/">Artikel ISLAM</a></li>


<li><a href="http://www.hanoum.co.cc/">Terapi Kesehatan</a></li>
<li><a href="http://gecor.wordpress.com/">Catatan Gecor</a></li>
<li><a href="http://pelajaranblog.blogspot.com/">Tutorian Blog</a></li>
<li><a href="http://gokil-gokil.blogspot.com/">Wawasan </a></li>
<li><a href="http://tari-agoum-iqran.blogspot.com/">Blog Keluarga</a></li>
<li><a href="http://www.detik.com/">Informasi Online</a></li>
</ul>
</div>


Cara memasukkan kode.
1. Setelah login, klik Tata Letak atau Layout
2. Klik Tambah Elemen atau Add Element
3. Klik HTML / JAVASCRIPT
4. Copy / paste kode di atas
5. Klik Simpan.
6. Selesai.
Hasil Tampilan Drop-down Blogroll :

Menambah atau mengurangi lebar / width kotak drop-down, Anda tinggal merubah angka pada “width” untuk merubah / mengedit ukuran lebar, sedangkan panjang-pendeknya tinggal mengganti angka “height”. Demikian juga bila menambah atau membuat link baru, tinggal copy / paste salah satu baris link yang ada dan ganti dengan alamat URL situs yang akan dimasukkan ke website / blog Anda.



Selamat mencoba dan Sukses.


0 comments
Labels:

Widget Ranking blog "Alexa"

Membangun widget Alexa di bagian sidebar blog. Alexa menyediakan widget untuk mendeskripsikan status blog dimata mesin pencari Alexa. Caranya agak "tersembunyi" karena Alexa menyediakan widgetnya di bagian yang kurang lazim dibanding situs lainnya.

Bila ingin memasangnya berikut petunjuknya :

  1. Buka Alexa.com

  2. Klik menu berikut :

  3. Perhatikan gambar dengan bertuliskan "Widget" di baris kedua paling kiri, dan klik


  4. Bila berpindah ke halaman selanjutnya, kita bisa memilih "Alexa Site Stats Button" dan ketikkan alamat URL blog kita disana. Lalu klik "Build Widget".
  5. Langkah terakhir, di halaman Site Widgets kita akan mendapati kode yang bisa kita pasang di blog. Salin dan pasang kode tadi di blog.
  6. Selesai. Selamat Mencoba.
0 comments
Labels:

Mengatur Judul Sidebar

Bagi yang senang mengatur tampilan template khusus Judul Sidebar agar menjadi lebih indah dan kelihatan lebih profesional dengan cara mengatur tampilan judul sidebarnya. Untuk itu cara mengatur dan berkreasi dalam menciptakan judul sidebar yang sesuai dengan selera dengan trik berikut.

Untuk mengatur tampilan judul sidebar yaitu dengan mengatur kode HTML untuk title sidebar. Letak kode Judul Sidebar pada template asli blogger biasanya di tulis dengan kode :

.sidebar h2 {
………………
}

Titik-titik menggambarkan isi kode judul sidebar yang mengendalikan atau mendefinisikan tampilan judul sidebar. Caranya dengan menambahkan kode atau mungkin mengurangi kode yang ada di titik tersebut.

Misalkan mengatur besarnya hurup judul sidebar, maka tinggal menambahkan kode ini :

.sidebar h2 {
font-size:110%;}

Nilai 110% adalah nilai besarnya hurup yang inginkan, misal : 120%, 200%, 250%, atau angka yang lainnya. Satuan persen ( % ) bisa juga bisa diganti denga satuan pixel (px), misal : 12px, 15px, 20px, atau angka yang lainnya.

Jika hurup judul sidebar ingin terlihat tebal, maka cukup menambahkan kode berikut :

.sidebar h2 {
font-size:110%;font-weight:bold;
}

Tulisan bold berarti hurup ingin tebal, definisi ini bisa diganti dengan yang lain, misal : jika tulisan yang tampil ingin terlihat biasa maka anda tinggal mengganti tulisan bold dengan tulisan normal. jika tulisan anda ingin terlihat miring, maka gantilah tulisan bold dengan tulisan italic.

Hurup judul sidebar ingin menjadi hurup besar (kapital) ;

.sidebar h2 {
font-size:110%;font-weight:bold;
text-transform:uppercase;
}

Tulisan uppercase berarti hurup yang di tampilkan adalah besar (kapital). Jika hurup kecil semua, maka tinggal mengganti uppercase dengan lowercase. jika hurup depannya saja (inisial) yang ingin hurup besar maka ganti uppercase dengan capitalize.

Jika tulisannya ingin berada di sebelah kanan, tinggal menambahkan kode ini :

.sidebar h2 {
font-size:110%;font-weight:bold;
text-transform:uppercase;
text-align:right;
}
Tulisan right berarti judul sidebar akan di kanan, jika ingin di sebelah kiri maka tinggal di ganti dengan tulisan left, jika ingin di tengah tinggal di ganti dengan center.

Jika ingin ada garis tinggal di tambahin kode border :
.sidebar h2 {
font-size:110%;font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
}

1px solid #000 berarti bahwa akan ada garis mengelilingi tulisan judul sidebar sebesar 1 pixel dengan warna hitam, tinggal di sesuaikan saja.

Jika judul sidebar dengan warna backgroundnya :


.sidebar h2 {
font-size:110%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
background:#6df466;
}

#6df66 adalah kode warna, kode ini di sesuaikan dengan keinginan.

Penggunaan padding :

.sidebar h2 {
font-size:110%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
background:#6df466;
padding;5px;
}

Penggunann padding sebesar 5px perlu ditambahkan apabila menggunakan background warna, karena jika tidak memakai padding maka tulisan akan terlihat bertabrakan dengan bagian luar sehingga terlihat kurang menarik. nilai 5px tentu saja nilai yang bisa disesuaikan dengan keinginan.

0 comments
Labels:

Membangun Benner Animasi


Agar blog kita tampil dinamis dan lebih atraktif, salah satu caranya adalah dengan memajang banner animasi.karena dengan banner animasi, mata dari pengunjung akan langsung tertuju kepada banner tersebut, terutama apabila anda seorang pebisnis, banner animasi akan lebih efektif untuk iklan yang kita pasang di banding dengan banner biasa. Cara membuat banner animasi sangatlah mudah, mau yang gratisan ada, mau yang bayar juga ada.Tapi tentunya ada kelebihan dan kekurangannya.


bagi anda yang berminat dengan banner animasi gratis, anda bisa kunjungi http://www.addesigner.com Silahkan daftar (gratis), Jika sudah di terima anda tinggal memilih banner yang di sediakan, trus ya tinggal di masukin ke blog, mau di sidebar atau di dalam postingan tentu bisa. Untuk cara pemasangan silahkan anda baca postingan terdahulu bagaimana cara memasukan kode HTML kedalam blog.

Contoh banner animasi :



Kode HTML
<a href="http://www.addesigner.com/"><
src="http://www.addesigner.com/users/gecor_raden.at.plasa.com.gif" border="0" /></a>


Jika ingin berkreasi sendiri, anda bisa menggunakan software banner maker, dengan software ini bisa berkreasi dan tidak perlu online terus di internet.
selamat mencoba.


0 comments
Labels:

Menampilkan Calendar di Blog

Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs seperti ini sangatlah banyak, tentunya mereka berlomba dengan menampilkan kalender-kalender yang menarik untuk di lihat.Sebagai contoh penyedia Calender berikut yaitu http://www.free-blog-content.com. Silahkan coba kunjungi situs tersebut ! kalender yang di sediakan sangat beragam. Silahkan klik kategori yang ada untuk memilih bentuk kalender yang disukai, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad untuk nanti keperluan di simpan di blog.

Langkah-langkah :
Sebelum melakukan instalasi, terlebih dahulu akses ke http://www.free-blog-content.com/ dan Cari fasilitas Kode HTML sesuai pilihan (Banyak pilihan yang dapat digunakan sesuai selera dan design blog Anda). Copy untuk di Instalasi di blog kita.
Setelah melakukan Copy Kode HTML (Disediakan dibawah) lakukan langkah berikut :
a. Masuk ke Menu Layout pada Blog.
b. Klik Add a page Element.
c. Pilih blog Javascrip/HTML.
d. Copy kode HTML Calendar pada Conten dan Isi Judul.

Jenis Abstract Calendars dengan format HTML :

Tangan megang Bumi


"

Free Blog Calendar
"


Bumi


"

Free Blog Calendar
"


Wanita Bionik


"

Free Blog Calendar
"


Binatang Jaguar


"

Free Blog Calendar
"


Mata Indah


"

Free Blog Calendar
"


Bendera Amirika & Rajawali


"

Free Blog Calendar
"
0 comments
Labels:

Menampilkan Waktu Sholat di Blog

Untuk memasang sebuah Jadwal Sholat kita bisa memanfaatkan berbagai situs penyedia Jadwal Sholat gratisan. Sebagai contoh penyedia Jadwal Sholat berikut yaitu http://www.myquran.org atau http://mfr.jentayu.com Silahkan coba kunjungi situs tersebut ! Jadwal Sholat yang di sediakan sangat beragam. Silahkan klik kategori yang ada untuk memilih bentuk Jadwal Sholat yang disukai, kemudian copy kode HTML dan paste pada notepad untuk nanti keperluan di simpan di blog.

Langkah-langkah :

Sebelum melakukan instalasi Jadwal Sholat, terlebih dahulu akses ke http://www.myquran.org/. Registrasi dan Cari fasilitas Kode HTML Jadwal tersedia dan Copy untuk di Instalasi di blog kita.

Setelah melakukan Copy Kode HTML Jadwal Sholat lakukan langkah berikut :
a. Masuk ke Menu Layout.

b. Klik Add a page Element.

c. Pilih blog Javascrip/HTML.

d. Copy kode HTML Jadwal Sholat pada menu Content dan Isi Judul

(Pilih Lokasi Kota yang diinginkan sesuai daftar dibawah ini, Contoh Jakarta = 15)

e. Simpan.

f. Selesai.


Kode:
<iframe src="http://myquran.org/sholat/sholat2.php?kota=15"
frameborder="0" scrolling="no" width="100%" height="250"></iframe>


atau

<a name="OLE_LINK1"><iframe src="http://myquran.org/sholat/sholat2.php?kota=15" frameborder="0" width="100%" scrolling="no" height="250"></iframe></a>


<table width="100%" align="center" border="0"><tbody><tr ><td align="middle" colspan="2"><strong><span >Kota Surabaya>/span></strong></td></tr>

Kode Kota :

(0) Ambon
- Imsak 3:7 WIB
- Subuh 3:17 WIB
- Dzuhur 11:-24 WIB
- Ashar 14:-11 WIB
- Maghrib 17:-21 WIB
- Isya 18:-15 WIB

(1) Bd.Aceh
- Imsak 4:78 WIB
- Subuh 4:88 WIB
- Dzuhur 12:47 WIB
- Ashar 15:60 WIB
- Maghrib 18:50 WIB
- Isya 19:56 WIB

(2) Bandung
- Imsak 4:29 WIB
- Subuh 4:39 WIB
- Dzuhur 11:58 WIB
- Ashar 15:11 WIB
- Maghrib 18:1 WIB
- Isya 19:7 WIB

(3) Banjarmasin
- Imsak 4:1 WIB
- Subuh 4:11 WIB
- Dzuhur 11:30 WIB
- Ashar 14:43 WIB
- Maghrib 17:33 WIB
- Isya 18:39 WIB

(4) Banjarnegara
- Imsak 4:22 WIB
- Subuh 4:32 WIB
- Dzuhur 11:51 WIB
- Ashar 15:4 WIB
- Maghrib 17:54 WIB
- Isya 19:0 WIB

(5) Banten
- Imsak 4:35 WIB
- Subuh 4:45 WIB
- Dzuhur 12:4 WIB
- Ashar 15:17 WIB
- Maghrib 18:7 WIB
- Isya 19:13 WIB

(6) Banyumas
- Imsak 4:22 WIB
- Subuh 4:32 WIB
- Dzuhur 11:51 WIB
- Ashar 15:4 WIB
- Maghrib 17:54 WIB
- Isya 19:0 WIB

(7) Banyuwangi
- Imsak 4:2 WIB
- Subuh 4:12 WIB
- Dzuhur 11:31 WIB
- Ashar 14:44 WIB
- Maghrib 17:34 WIB
- Isya 18:40 WIB

(8) Besuki
- Imsak 4:5 WIB
- Subuh 4:15 WIB
- Dzuhur 11:34 WIB
- Ashar 14:47 WIB
- Maghrib 17:37 WIB
- Isya 18:43 WIB

(9) Bengkulu
- Imsak 4:50 WIB
- Subuh 4:60 WIB
- Dzuhur 12:19 WIB
- Ashar 15:32 WIB
- Maghrib 18:22 WIB
- Isya 19:28 WIB

(10) Bogor
- Imsak 4:32 WIB
- Subuh 4:42 WIB
- Dzuhur 12:1 WIB
- Ashar 15:14 WIB
- Maghrib 18:4 WIB
- Isya 19:10 WIB

(11) Bondowoso
- Imsak 4:4 WIB
- Subuh 4:14 WIB
- Dzuhur 11:33 WIB
- Ashar 14:46 WIB
- Maghrib 17:36 WIB
- Isya 18:42 WIB

(12) Cilacap
- Imsak 4:23 WIB
- Subuh 4:33 WIB
- Dzuhur 11:52 WIB
- Ashar 15:5 WIB
- Maghrib 17:55 WIB
- Isya 19:1 WIB

(13) Cirebon
- Imsak 4:25 WIB
- Subuh 4:35 WIB
- Dzuhur 11:54 WIB
- Ashar 15:7 WIB
- Maghrib 17:57 WIB
- Isya 19:3 WIB

(14) Denpasar
- Imsak 3:58 WIB
- Subuh 4:8 WIB
- Dzuhur 11:27 WIB
- Ashar 14:40 WIB
- Maghrib 17:30 WIB
- Isya 18:36 WIB(

15) Jakarta
- Imsak 4:32 WIB
- Subuh 4:42 WIB
- Dzuhur 12:1 WIB
- Ashar 15:14 WIB
- Maghrib 18:4 WIB
- Isya 19:10 WIB

(16) Jambi
- Imsak 4:45 WIB
- Subuh 4:55 WIB
- Dzuhur 12:14 WIB
- Ashar 15:27 WIB
- Maghrib 18:17 WIB
- Isya 19:23 WIB

(17) Kebumen
- Imsak 4:21 WIB
- Subuh 4:31 WIB
- Dzuhur 11:50 WIB
- Ashar 15:3 WIB
- Maghrib 17:53 WIB
- Isya 18:59 WIB

(18) Kediri
- Imsak 4:11 WIB
- Subuh 4:21 WIB
- Dzuhur 11:40 WIB
- Ashar 14:53 WIB
- Maghrib 17:43 WIB
- Isya 18:49 WIB

(19) Kudus
- Imsak 4:16 WIB
- Subuh 4:26 WIB
- Dzuhur 11:45 WIB
- Ashar 14:58 WIB
- Maghrib 17:48 WIB
- Isya 18:54 WIB

(20) Kupang
- Imsak 3:25 WIB
- Subuh 3:35 WIB
- Dzuhur 11:-6 WIB
- Ashar 14:7 WIB
- Maghrib 17:-3 WIB
- Isya 18:3 WIB

(21) Madiun
- Imsak 4:13 WIB
- Subuh 4:23 WIB
- Dzuhur 11:42 WIB
- Ashar 14:55 WIB
- Maghrib 17:45 WIB
- Isya 18:51 WIB

(22) Malang
- Imsak 4:9 WIB
- Subuh 4:19 WIB
- Dzuhur 11:38 WIB
- Ashar 14:51 WIB
- Maghrib 17:41 WIB
- Isya 18:47 WIB

(23) Manado
- Imsak 3:20 WIB
- Subuh 3:30 WIB
- Dzuhur 11:-11 WIB
- Ashar 14:2 WIB
- Maghrib 17:-8 WIB
- Isya 18:-2 WIB

(24) Mataram
- Imsak 3:55 WIB
- Subuh 4:5 WIB
- Dzuhur 11:24 WIB
- Ashar 14:37 WIB
- Maghrib 17:27 WIB
- Isya 18:33 WIB

(25) Medan
- Imsak 4:65 WIB
- Subuh 4:75 WIB
- Dzuhur 12:34 WIB
- Ashar 15:47 WIB
- Maghrib 18:37 WIB
- Isya 19:43 WIB

(26) Merauke
- Imsak 3:-43 WIB
- Subuh 3:-33 WIB
- Dzuhur 11:-74 WIB
- Ashar 14:-61 WIB
- Maghrib 17:-71 WIB
- Isya 18:-65 WIB

(27) Mojokerto
- Imsak 4:10 WIB
- Subuh 4:20 WIB
- Dzuhur 11:39 WIB
- Ashar 14:52 WIB
- Maghrib 17:42 WIB
- Isya 18:48 WIB

(28) Padang
- Imsak 4:58 WIB
- Subuh 4:68 WIB
- Dzuhur 12:27 WIB
- Ashar 15:40 WIB
- Maghrib 18:30 WIB
- Isya 19:36 WIB

(29) Palangkaraya
- Imsak 4:3 WIB
- Subuh 4:13 WIB
- Dzuhur 11:32 WIB
- Ashar 14:45 WIB
- Maghrib 17:35 WIB
- Isya 18:41 WIB

(30) Palembang
- Imsak 4:40 WIB
- Subuh 4:50 WIB
- Dzuhur 12:9 WIB
- Ashar 15:22 WIB
- Maghrib 18:12 WIB
- Isya 19:18 WIB

(31) Pekalongan
- Imsak 4:21 WIB
- Subuh 4:31 WIB
- Dzuhur 11:50 WIB
- Ashar 15:3 WIB
- Maghrib 17:53 WIB
- Isya 18:59 WIB

(32) Pekanbaru
- Imsak 4:53 WIB
- Subuh 4:63 WIB
- Dzuhur 12:22 WIB
- Ashar 15:35 WIB
- Maghrib 18:25 WIB
- Isya 19:31 WIB

(33) Purwakarta
- Imsak 4:29 WIB
- Subuh 4:39 WIB
- Dzuhur 11:58 WIB
- Ashar 15:11 WIB
- Maghrib 18:1 WIB
- Isya 19:7 WIB

(34) Purwokerto
- Imsak 4:23 WIB
- Subuh 4:33 WIB
- Dzuhur 11:52 WIB
- Ashar 15:5 WIB
- Maghrib 17:55 WIB
- Isya 19:1 WIB

(35) Samarinda
- Imsak 3:50 WIB
- Subuh 4:0 WIB
- Dzuhur 11:19 WIB
- Ashar 14:32 WIB
- Maghrib 17:22 WIB
- Isya 18:28 WIB

(36) Semarang
- Imsak 4:18 WIB
- Subuh 4:28 WIB
- Dzuhur 11:47 WIB
- Ashar 15:0 WIB
- Maghrib 17:50 WIB
- Isya 18:56 WIB

(37) Solo
- Imsak 4:16 WIB
- Subuh 4:26 WIB
- Dzuhur 11:45 WIB
- Ashar 14:58 WIB
- Maghrib 17:48 WIB
- Isya 18:54 WIB

(38) Sumenep
- Imsak 4:60 WIB
- Subuh 4:70 WIB
- Dzuhur 12:29 WIB
- Ashar 15:42 WIB
- Maghrib 18:32 WIB
- Isya 19:38 WIB

(39) Surabaya
- Imsak 4:8 WIB
- Subuh 4:18 WIB
- Dzuhur 11:37 WIB
- Ashar 14:50 WIB
- Maghrib 17:40 WIB
- Isya 18:46 WIB

(40) Tegal
- Imsak 4:23 WIB
- Subuh 4:33 WIB
- Dzuhur 11:52 WIB
- Ashar 15:5 WIB
- Maghrib 17:55 WIB
- Isya 19:1 WIB

(41) Uj.Pandang
- Imsak 3:41 WIB
- Subuh 3:51 WIB
- Dzuhur 11:10 WIB
- Ashar 14:23 WIB
- Maghrib 17:13 WIB
- Isya 18:19 WIB

(42) Yogyakarta
- Imsak 4:18 WIB
- Subuh 4:28 WIB
- Dzuhur 11:47 WIB
- Ashar 15:0 WIB
- Maghrib 17:50 WIB
- Isya 18:56 WIB

0 comments
Labels:
Langganan: Postingan (Atom)
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Belajar BLOG - All Rights Reserved
Template Created by Creating Website Inspired by Dominion Rockettheme
Proudly powered by Blogger