Enskripsi HTML atau Javascript Anda, dan Amankan Kode Anda

Unencrypted text di sini
    
Hex-Encrypted text di sini

Read More

Random Post Lebih Fresh Dengan Hover Function Untuk Widget Blog

Hey guys, kali ini kita akan membuat widget random post yang lebh fresh buat blog kamu, dengan tampilan yang stylist pasti akan membuat blog anda makin cool dan makin manis.

Read More

[New] Cara Menampilkan Peta Google Map Di Postingan Dan Widget Blog

Hey Guys, apa kabar kembali?
Kali ini kita akan membahas cara terbaru menampilkan peta google map di di dalam postingan blog atau di widget blog.

Read More

Cara Sederhana Menambahkan Musik Auto Play Di Blogger

Hei Guys sobat blogger, apa kabar? semoga semuanya sehat-sehat saja. hari ini saya akan membagikan trik singkat cara menambahkan widget musik yang bisa langsung auto play ketika pengunjung blog mengakses blogger anda.

Read More

Cara Memasang Chat Box Versi CBOX di Blogger

Bagi anda yang sudah menyimak pembahasan mengenai tutorial lengkap membuat chat box versi stylist dengan ribuan skin yang bisa di modifikasi, versi sebelumnya adalah smart chat box dan kali ini kita akan kembali membahas tentang chat box versi CBOX. tentunya dalam menentukan jenis chat box yang ingin anda tampilkan di blog selalu berhubungan dengan minat masing-masing, dan disesuaikan dengan jenis template blog. 

Read More

Full Cara Menambahkan Chatbox Stylist SmartChatBox Ke Widget Blog (Optional Auto Hide)

Seperti judulnya kali ini akan membahas cara menambahkan chatbox stylist ke widget blog. Kebetulan secara lebih dalam pembahasan akan di fokuskan ke penggunaan chat box dari smartchatbox yang memiliki segudang skin yang bisa anda costumize sendiri dan lebih stylist dari beberapa chatbox yang pbblog dapatkan (jika ada yang lebih stylist mungkin bisa di infokan dikolom komentar atau di chatbox PBBlog.

Read More

Cara Keren Menampilkan Auto Hide Chat Box Di Blogger

Oke Kita akan membahas mengenai cara membuat auto hide chat box. script auto hide ini bisa anda pake untuk widget apapun yang ingin anda harapkan bisa auto hide, namun kali ini kita akan fokus ke pada cara penambahan fungsi auto hide untuk widget chat box dulu. 

Read More

Kumpulan Chat Plugin Stylist Untuk Widget Blogger Kamu

Tahukah anda cara menambahkan widget chat plugin ke blog? jika belum maka mungkin anda berkunjung ke blog yang tepat,  karna kalini PB Blog akan membagikan beberapa Plugin Chat Box yang bisa anda pakai untuk mempercantik blog anda. 

Read More

7. Tambahkan Widget Search Box Stylist Di Sidebar Blogger

Search box sangat lah penting terdapat dalam sebuah blog agr pengunjung blog yang sudah percaya dengan kualitas blog kita bisa berlama-lama mencarri postingan-postingan terbaik kita. Untuk itu, pilihkan penempatan widget search box ini di side bar yang mudah terlihat dan bisa memudahkan pengunjung blog.

Style 7#

kita masuk ke cara menambahkannya ke blogger

1. Masuk ke blogger.com
2. Pilih Layout atau Tata Letak
3. Pilih Tambahkan widget atau Add Gadget

4.  Pilih widget HTML/Javascript lalu masukan kode di bawah ini

<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8acF5fPntR1ctAvDNdlDhhrQwrY3jMDw3AmKlfl_hXNFQlzmhHC9rUsV2mjVXeryZQYp4s4twg-4hxCUaw1eklZIkE8fxz00U4KuJRShLcjaOJtHDCpZ4ct3FbJg3xSOuB-r4z3Zkxv0/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value=""/>
</form>
</div>

Note : Jika ingin menampilkannya di bagian tengah widget dan agar sesuai dengan lebar side bar, maka gunakan kode <center> sebelum script dan </center> setelah script.
 
5. Klik Simpan dan mulai Simpan Template 

Demikian semoga bermanfaat

Read More

6. Tambahkan Widget Search Box Stylist Di Sidebar Blogger

Search box sangat lah penting terdapat dalam sebuah blog agr pengunjung blog yang sudah percaya dengan kualitas blog kita bisa berlama-lama mencari postingan-postingan terbaik kita. Untuk itu, pilihkan penempatan widget search box ini di side bar yang mudah terlihat dan bisa memudahkan pengunjung blog.

Style 6#

kita masuk ke cara menambahkannya ke blogger

1. Masuk ke blogger.com
2. Pilih Layout atau Tata Letak
3. Pilih Tambahkan widget atau Add Gadget

4.  Pilih widget HTML/Javascript lalu masukan kode di bawah ini

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim8ROkO6ypvAcJ59tbmpoEh6hR4AjrbEDrhkGugp-86d1cRQSPU07zh8pUmstuaVVq63oGL7LGqDWOCwQ4KUZzpiXGP0uZGB0TDEaLxGAWUQNxaNObSC5dtFoYXShBzV413S_IWqzyx2oO/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhshzbvGtOyW-hDVj4Zl5WOyOh3Mwn3zHKgiTolGkoFVvylgghbY-ejSX-fazX2auW9gtsCuiaDuuQctQ5_x95R08hbQjlybKItuIbGUBpMc6e9VTLqWTAe2jI1YX42RR9z_gaS-9kEfwxk/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFI8OzpOneCRthEHtrnkv1pN9YvU4RJc3iidF1iVxOVt4AnOUseupMpG-Nm3z22lM1CIaJ6l-wBtKgJrDArpbIXO29EmUCiYC3PFhvK3PpwaaAHw_HE-IjYi86SYgfuG3N_4bA6vXilGL/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFI8OzpOneCRthEHtrnkv1pN9YvU4RJc3iidF1iVxOVt4AnOUseupMpG-Nm3z22lM1CIaJ6l-wBtKgJrDArpbIXO29EmUCiYC3PFhvK3PpwaaAHw_HE-IjYi86SYgfuG3N_4bA6vXilGL/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>

Note : Jika ingin menampilkannya di bagian tengah widget dan agar sesuai dengan lebar side bar, maka gunakan kode <center> sebelum script dan </center> setelah script.
 
5. Klik Simpan dan mulai Simpan Template 

Demikian semoga bermanfaat

Read More

5. Tambahkan Widget Search Box Stylist Di Sidebar Blogger

Search box sangat lah penting terdapat dalam sebuah blog agr pengunjung blog yang sudah percaya dengan kualitas blog kita bisa berlama-lama mencarri postingan-postingan terbaik kita. Untuk itu, pilihkan penempatan widget search box ini di side bar yang mudah terlihat dan bisa memudahkan pengunjung blog.

Style 5#

kita masuk ke cara menambahkannya ke blogger

1. Masuk ke blogger.com
2. Pilih Layout atau Tata Letak
3. Pilih Tambahkan widget atau Add Gadget

4.  Pilih widget HTML/Javascript lalu masukan kode di bawah ini

<style>
#wc-searchblack1
{
background: #222222;
border-radius:10px;
width:280px;
}

#wc-searchblackbox1
{
padding:10px;
}

#wc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}

#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
width:178px;
font:14px verdana;
}

</style>
<div id='wc-searchblack1'>
         <form name="input" action="http://YOUR-URL/search"  method="get"  id="wc-searchblackbox1">
            <input name="q" id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='wc-searchblacksubmit1' type='submit' value='Search'/>
         </form>
      </div>

Note : Jika ingin menampilkannya di bagian tengah widget dan agar sesuai dengan lebar side bar, maka gunakan kode <center> sebelum script dan </center> setelah script. Gantikan kode warna Merah dengan alamat URL blog.

 
5. Klik Simpan dan mulai Simpan Template 

Demikian semoga bermanfaat

Read More

4. Tambahkan Widget Search Box Stylist Di Sidebar Blogger

Search box sangat lah penting terdapat dalam sebuah blog agr pengunjung blog yang sudah percaya dengan kualitas blog kita bisa berlama-lama mencarri postingan-postingan terbaik kita. Untuk itu, pilihkan penempatan widget search box ini di side bar yang mudah terlihat dan bisa memudahkan pengunjung blog.

Style 4#

kita masuk ke cara menambahkannya ke blogger

1. Masuk ke blogger.com
2. Pilih Layout atau Tata Letak
3. Pilih Tambahkan widget atau Add Gadget

4.  Pilih widget HTML/Javascript lalu masukan kode di bawah ini

 <style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_hNRG1yR6-05-DgO2UrgJNQTw2Ly0IDB-mFxtJ6HqjZaplRGTgRwx-6LM6n9xQCqR8PvWTUyfyCqcO5uOBRQtx0SdC9La591R3ha91r03bJPH11ikDhimfd3IauAcQZM-V8o0AOB8e-2Z/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVlJEGaWy9iT1pJNnpOvnLPcRDtZpcf1T_ZOn97twXtWUJiDeMoOLdZFLjJo3OMmrNMRQdai2f74sV4bjuoWx9ovA1GlhB_KWoX_c2rUwwzAy5zywJU-UpmeHCxc0m5mnlmdzop6QEMLdM/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Note : Jika ingin menampilkannya di bagian tengah widget dan agar sesuai dengan lebar side bar, maka gunakan kode <center> sebelum script dan </center> setelah script.

 
5. Klik Simpan dan mulai Simpan Template 

Demikian semoga bermanfaat

Read More

3. Tambahkan Widget Search Box Stylist Di Sidebar Blogger

Search box sangat lah penting terdapat dalam sebuah blog agr pengunjung blog yang sudah percaya dengan kualitas blog kita bisa berlama-lama mencari postingan-postingan terbaik kita. Untuk itu, pilihkan penempatan widget search box ini di side bar yang mudah terlihat dan bisa memudahkan pengunjung blog.

Style 3#

 kita masuk ke cara menambahkannya ke blogger

1. Masuk ke blogger.com
2. Pilih Layout atau Tata Letak
3. Pilih Tambahkan widget atau Add Gadget

4.  Pilih widget HTML/Javascript lalu masukan kode di bawah ini

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-FX3k8lsS_9zpFiGXZALHbw-AfnBiIaNilBlZ-IHlzkCW7xo1hu2GJXRbJzLfNi6d5c1GUg6eIfTthsLgH-0t9GgYczC4s38ZHnwLI7NZKwLtbzTouTw36oMKhA1I3ed7E63i5eeDYKae/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39KnCh2u5290J__nTdgJOO9a5wPS5q-xbAgHDlgkFLyr4vR4Ma2tNdA-j5_vgaZxe6InYPZfx5IqJsReA3eXLpY3B8ZZ1O5O142BKagjby6mYfW1yhoZackd0GwLiyo4fTDHKNDqGBoXQ/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmnarCp28j7fd0iqvLwrQgSDLT9TYm53yAqu9Ksy-vcb0MXpt0FqfFzeF5Ot7HHlabwY_iVHlkd_tr1SbsJcsLGtrTxgc4_Nro4bltWzqvqxId1fJyuyJyhkZ2KxM1oL6n7BPIPwIQw5f2/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Note : Jika ingin menampilkannya di bagian tengah widget dan agar sesuai dengan lebar side bar, maka gunakan kode <center> sebelum script dan </center> setelah script.

 
5. Klik Simpan dan mulai Simpan Template 

Demikian semoga bermanfaat

Read More

2. Tambahkan Widget Search Box Stylist Di Sidebar Blogger

Search box sangat lah penting terdapat dalam sebuah blog agr pengunjung blog yang sudah percaya dengan kualitas blog kita bisa berlama-lama mencarri postingan-postingan terbaik kita. Untuk itu, pilihkan penempatan widget search box ini di side bar yang mudah terlihat dan bisa memudahkan pengunjung blog.

Style 2#

kita masuk ke cara menambahkannya ke blogger

1. Masuk ke blogger.com
2. Pilih Layout atau Tata Letak
3. Pilih Tambahkan widget atau Add Gadget

4.  Pilih widget HTML/Javascript lalu masukan kode di bawah ini

<style>

#searchbox {

    background: url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;

    width: 250px;

    height: 65px;

}

input:focus::-webkit-input-placeholder {

color: transparent;

}

input:focus:-moz-placeholder {

color: transparent;

}

input:focus::-moz-placeholder {

color: transparent;

}

#searchbox input {

    outline: none;

}

#searchbox input[type="text"] {

    background: transparent;

    padding: 5px 0px 5px 20px;

    margin: 10px 15px 0px 0px;

    border-width: 0px;

    font-family: "Brush Script MT", cursive;

    font-size: 12px;

    color: #595959;

    width: 65%;

    font-weight: bold;

    display: inline-table;

    vertical-align: top;

}

#button-submit {

    background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;

    border-width: 0px;

    cursor: pointer;

    margin-top: 10px;

    width: 19px;

    height: 25px;

}

#button-submit:hover {

    background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;

}

#button-submit:active {

    background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;

    outline: none;

}

#button-submit::-moz-focus-inner {

    border: 0;

}

</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">

    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />

    <input id="button-submit" type="submit" value="" />

</form>

 

Note : Jika ingin menampilkannya di bagian tengah widget dan agar sesuai dengan lebar side bar, maka gunakan kode <center> sebelum script dan </center> setelah script.
 
5. Klik Simpan dan mulai Simpan Template 

Demikian semoga bermanfaat

Read More