RSS

Jadwal Bebrbuka puasa 2013

KLIK DAN LANJUTKANJadwal Bebrbuka puasa 2013
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)

Ingin Menjadi Penulis Buku Komputer?? & Ingin Gabung Dengan Komunitas Kami - Ini Caranya ~ Java Creativity

KLIK DAN LANJUTKANIngin Menjadi Penulis Buku Komputer?? & Ingin Gabung Dengan Komunitas Kami - Ini Caranya ~ Java Creativity
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)

Cara Membuat Menu Horizontal Blog Drop Down Search Engine

Cara Membuat Menu Horizontal Blog Drop Down Search Engine merupakan menu laman blog yang terlengkap yang bisa anda pasang di blog anda. Pada menu ini sudah disediakan beberapa sub-menu yang bisa anda gunakan untuk menghemat ruang atau tempat di blog anda dan selain itu juga sudah terdapat kolom pencarian yang akan membantu pengunjung blog anda mencari artikel yang mereka inginkan. Seperti halnya membuat menu horizontal yang lain, yang telah saya jelaskan dibeberapa artikel, membuat menu horizontal blog drop down dengan serach engine juga sangat mudah dilakukan, seperti penjelasan berikut ini



Cara Membuat Menu Horizontal Blog Drop Down Search Engine

  1. Masuk ke akun blogger anda
  2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
  3. Cari kode ]]></b:skin>
  4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>
    #menudropse{background:#000000 url() repeat-x;width:940px;margin:0 auto;padding:0 auto}
    #menuwrapperdropse{width:940px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
    .clearit{clear:both;height:0;line-height:0.0;font-size:0}
    #menubardropse{width:100%}
    #menubardropse,#menubardropse ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
    #menubardropse a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
    #menubardropse a.trigger{background-image:url();background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
    #menubardropse li{float:left;position:static;width:auto}
    #menubardropse li ul,#menubardropse ul li{width:170px}
    #menubardropse ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
    #menubardropse li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
    #menubardropse li:hover a,#menubardropse a:active,#menubardropse a:focus,#menubardropse li.hvr a{background-color:#222;color:#E98C0A}
    #menubardropse li:hover ul,#menubardropse li.hvr ul{display:block}
    #menubardropse li:hover ul a,#menubardropse li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
    #menubardropse li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
    #menubardropse ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

  5. Cari kode seperti berikut ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Panduan Template Blog(Header)' type='Header'/>
    </b:section>
    </div>
  6. Letakkan kode menu horizontal berikut dengan memperhatikan dua pilihan ini
    Jika anda ingin menampilkan menu horizontal diatas judul blog, letakkan kode menu horizontal dibawah <div id='header-wrapper'>
    Jika anda ingin menampilkan menu horizontal dibawah judul blog, letakkan kode menu horizontal dibawah </b:section>
  7. Kode Menu Horizontal Blog Drop Down Dengan Search Engine
    <div id='menudropse'>
    <div id='menuwrapperdropse'>
    <ul id='menubardropse'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Halaman1</a></li>
    <li><a class='trigger' href='#'>Halaman2</a>
    <ul>
    <li><a href='#'>SubHal2</a></li>
    <li class='hr'/>
    <li><a href='#'>SubHal2</a></li>
    <li class='hr'/>
    <li><a href='#'>SubHal2</a></li>
    </ul>
    </li>
    <li><a href='#'>Halaman3</a></li>
    <li><a class='trigger' href='#'>Halaman4</a>
    <ul>
    <li><a href='#'>SubHal4</a></li>
    <li class='hr'/>
    <li><a href='#'>SubHal4</a></li>
    <li class='hr'/>
    <li><a href='#'>SubHal4</a></li>
    </ul>
    </li>
    <li><a href='#'>Halaman5</a></li>
    <li><a class='trigger' href='#'>Uncategories</a>
    <ul>
    <li><a href='#'>Uncategories1</a></li>
    <li class='hr'/>
    <li><a href='#'>Uncategories2</a></li>
    <li class='hr'/>
    <li><a href='#'>Uncategories3</a></li>
    <li class='hr'/>
    <li><a href='#'>Uncategories4</a></li>
    <li class='hr'/>
    <li><a href='#'>Uncategories5</a></li>
    </ul>
    </li>
    </ul>
    <div class='menusearch'>
    <div style='float:right;padding:4px 8px 0 0;'>
    <form action='http://www.google.com/search' method='get' target='_blank'>
    <input name='sitesearch' style='display:none;' value='http://panduantemplateblog.blogspot.com'/>
    <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:#FFFFFF;' type='text' value='Cari Artikel...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC558tkXWx11QGnFxA_SEWk5K8b5Hv82Or1nwK91RRRezM1bg7dgvl_YN_mKQ2YKQTy0zFDtuUrw4sTQLLm6JgFSoVjFU8fS_0Nj5lq8hmryH_7R2GoQIfOa0u3yR-Llg8iK-JoiS7JOly/' type='image' value='Cari'/>
    </form>
    </div>
    </div>
    <br class='clearit'/>
    </div>
    </div>
  8. Jika semuanya sudah dilakukan, silahkan Pratinjau terlebih dahulu. Jika tidak ada error, Simpan Template anda dan lihat hasilnya.
  9. Tambahan : http://anaklamuru1.blogspot.com ganti dengan link url blog anda
Sekian, semoga artikel tentang menu horizontal ini lebih mudah diterapkan. Jika ada pertanyaan tentang artikel ini, silahkan tinggalkan komentar di Cara Membuat Menu Horizontal Blog Drop Down Search Engine
Semoga Bisa Membantu Agan Agan Semuanya 
KLIK DAN LANJUTKANCara Membuat Menu Horizontal Blog Drop Down Search Engine
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)

Cara Membuat Menu Diatas Header Blog

Postingan tentang cara membuat menu diatas header blog. Kita bisa menaruh link lebih banyak lagi di blog, dan dari segi keindahan juga tampilan menu diatas header ini membuat blog kelihatan lebih menarik. Langsung saja karena script nya cukup panjang:
-Login ke akun Blogger anda:
-Klik Rancangan
-Edit HTML
-Centang Expand Template Widget
Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya.

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

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}


Cari lagi kode </head> dan letakkan kode brikut dibawahnya:

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='url / link homepage '>home</a></li>
<li><a href='url / link 1'>judul link</a></li>
<li><a href='url / link 2'>judul link</a></li>
<li><a href='url / link 3'>judul link</a></li>
<li><a href='url / link 4'>judul link</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>


Mau lihat hasilnya ... Lihat Menu diblog ini , itu diatas judul Blog
Selamat Mencoba
Jika ada sesuatu yang tidak di mengerti Silahkan Buat Pertanyaan melalui Komentar
Semoga kami bisa membantu

 
KLIK DAN LANJUTKANCara Membuat Menu Diatas Header Blog
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)

CARA MEMBUAT MENU HORIZONTAL SUPER CANTIK SUPER KEREN DI BLOG



CARA MEMBUAT MENU HORIZONTAL SUPER CANTIK SUPER KEREN DI BLOG
Caranya Gampang Banget Bro
Login ke Blog Anda
Klik Design  Kemudian Klik Template
Edit HTML
Cari Code  </header>  Cara cepatnya tekan Ctrl F
Kalau sudah ketemu  Copy  Link dibawah dan Letakkan ( Paste ) persis di bawah kode </header >

=========================================================================
<style>
    /*------ CSS3 Drop Down Menu By RL (rinjanilovers.blogspot.com)---------*/

    #rl-menu, #rl-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #rl-menu {

    width: 905px;

    margin: 60px auto;

    border: 1px solid #222;

    background-color: #000;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #rl-menu:before,

    #rl-menu:after {

    content: "";

    display: table;

    }

    #rl-menu:after {

    clear: both;

    }

    #rl-menu {

    zoom:1;

    }

    #rl-menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #rl-menu a {

    float: left;

    padding: 12px 30px;

    color: #999;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #rl-menu li:hover > a {

    color: #fafafa;

    }

    *html #rl-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #rl-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #rl-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #rl-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #rl-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #rl-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #rl-menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #rl-menu ul a:hover {

    background-color: #0186ba;

    background-image: -moz-linear-gradient(#04acec, #0186ba);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }

    #rl-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #rl-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #rl-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #rl-menu ul li:first-child a:hover:after {

    border-bottom-color: #04acec;

    }

    #rl-menu ul ul li:first-child a:hover:after {

    border-right-color: #0299d3;

    border-bottom-color: transparent;

    }

    #rl-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }


   
</style>


<ul id="rl-menu">
<li><a href="http://anaklamuru1.blogspot.com/">Home</a></li>
<li>
<a href="http://anaklamuru1.blogspot.com/">Categories</a>
<ul>
<li><a href="
http://anaklamuru1.blogspot.com/">Sub Menu 1</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Sub Menu 2</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Sub Menu 3</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="
http://anaklamuru1.blogspot.com/">Work</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">About</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Contact</a></li>
</ul>
==============================================================================
Keterangan :
Ganti URL warna UNGU itu dengan URL milik Blog Sobat
Sesuaikan judul Manu warna MERAH itu dengan Judul Menu yang Sobat Inginkan

Kode CSS diatas dijamin  100%  berhasil
Anda bisa memperbanyak  Menu diatas berapapun anda Mau
Memperbanyak Sub Menu.... Memperbanyak Sub Sub menu   Memperbanyak  Sub  Sub  Sub  Menu
Selamat Mencoba
Keterangan Ke II :
Jika Sobat mau menambah Menu UTAMA
Gandakan saja seperti Contoh di bawah :
</li>
<li><a href="
http://anaklamuru1.blogspot.com/">Work</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">About</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Contact</a></li>
</ul>
Menjadi :
</li>
<li><a href="
http://anaklamuru1.blogspot.com/">Work</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">About</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Contact</a></li>
<li><a href="http://anaklamuru1.blogspot.com/">Work</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">About</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Contact</a></li>
</ul>
Jika Masih Mau Tambahkan Lagi ...dan ...Lagi ... dan  Lagi.
Mau Tambah Sub Menu,.... Buat Lagi Seperti Contoh Diatas , berapapun anda mau
Contoh  :
<a href="http://anaklamuru1.blogspot.com/">Categories</a>
<ul>
<li><a href="
http://anaklamuru1.blogspot.com/">Sub Menu 1</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Sub Menu 2</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Sub Menu 3</a></li>
<li><a href="
http://anaklamuru1.blogspot.com/">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="
http://anaklamuru1.blogspot.com/">Work</a></li>

Setiap Menu Utama ataupun Sub Menu jika anda mau menambahnya , Maka anda harus membuka code
</li> dibelakang Code </a>
Sampel :
<a href="http://anaklamuru1.blogspot.com/">Categories</a>
<ul>
<li><a href="
http://anaklamuru1.blogspot.com/">Sub Menu 1</a></li>

Begitu juga jika mau tambah lagi sub dari sub Menu

Selamat Berkarya Sobat
Jangan Lupa buat Komentar
KLIK DAN LANJUTKANCARA MEMBUAT MENU HORIZONTAL SUPER CANTIK SUPER KEREN DI BLOG
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)

Cara Pasang Tv Di Blog

Cara Memasang Tv Online Streaming di Blog - Selalu ada yang baru di dunia blog, setelah bisa memasang animasi di blog, memasang lagu di blog, kini dengan kecanggihan teknologi sobat bisa memasang TV online di blog ( nonton sambil ngeblog ) entah itu RCTI, SCTV, TRANS TV, TRANS 7, GLOBAL TV, MNC TV, KOMPAS TV, INDOSIAR, ANTV, TV ONE, dan lain - lain. Tutorial yang seperti ini bisa dengan mudah sobat temukan di google dengan kata kunci "cara pasang tv ( televisi ) di blogspot". Berikut tutorial cara pasang TV di blog bagi sobat yang berminat.

A. Untuk memasang TV Online di sidebar blog, sobat ikuti tutorial berikut.

1. Log in ke akun blog sobat
2. Klik Rancangan --> Elemen laman --> Tambah gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam kotak yang di sediakan.


<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>



4. klik save

B. Untuk cara pemasangan di halaman postingan berikut tutorialnya .

1. Login ke akun blog sobat
2. Klik Entri baru kemudian beri judul sesuai keinginan. Misalnya Nonton TV Online
3. Masukkan kode berikut di Edit HTML di postingan dan jangan di Compose


<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>


4. Klik Terbitkan Entri dan lihat hasilnya..

Tambahan :
Atur ukuran width ( lebar ) dan Height ( tinggi ) TV online sesuai keinginan.
KLIK DAN LANJUTKANCara Pasang Tv Di Blog
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Read User's Comments(0)