MEMBUAT SEARCH BOX KEREN

Oleh Anonymous pada tanggal
Membuat Search Box Keren - Search box adalah kolom kotak pencarian yg disediakan untuk pengunjung bermanfaat mencari konten artikel yg mereka butuhkan, eksistensi widget search box ini sangat berguna, tetapi sayangnya widget search box bawaan google tampilannya dari para blogger kurang menarik, nah buat itulah aku akan share membuat search box ini sebagai keren caranya pun cukup gampang tinggan masukkan widget kemudian tambahkan kodenya lalu simpan, ttinggal anda letakkan widget tersebut sinkron harapan anda seluruh:
Semua widget search ini cara membuatnya hampir sama yaitu:
1. Log in ke blogger
2. Masuk rapikan letak
3. Tambahkan widget pilih HTML/ Javascript kemudian tambahkan kodenya
4. Simpan
Membuat Search Box versi 1:

#search-box
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}



target='_top'>

placeholder='Search Keyword Here....' type='text'/>

type='submit'>Search


gg  Ganti kode sesuai kode warna pada gambar diatas sinkron warna kesukaan anda
Membuat Search Widget versi dua:


#mediablogger-searchbox border-radius: 5px; background: url(//4.bp.blogspot.com/17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px;height: 50px;disaply: block; 
form#mediablogger-searchform display: block; padding: 9px 16px; margin: 0; 
form#mediablogger-searchform #s padding-left: 24px !Important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px;    font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;  form#mediablogger-searchform#sbutton margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top;    border: none;    background: transparent;
  

Ganti kode yang aku blog dengan warna hitam dengan url gambar kesukaan anda dibawah ini:
gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8NCpvvsE7L-mpoSFU2DD6w1b66hFJb983TI1W2GWlEsmKhBEoSB2Dp45cNqpmUWPn0MbFwmHb1h429EvzbicBFkFtMPvykRCQiByjzt8BgwJDSeftSCArJ058nqWVDzicRuwhfmWdTZz0/s1600/impoint.blogspot.com-red.png
gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_SoP4MZg2Yj7e7ZcTBGV165EPkD0XsRJm2znusXT0mQwFa5QOr9RK_C_jmB1IHjUWdpD71hY756TUZ_fadwtiHgrxx2lLXA1q01goMEaYVq9gusiUH36HnsLuvcAQdEytl9yNUn0YV3M/s1600/impoint.blogspot.com-blue.png
gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrFdIr8A2Cg-cBr719XzZ-sdbapiko6x3bRHhWDtjki4fZDhyphenhyphen4FhAUgxC-zOffdtOnHWiCPDlU9JPKNbyeQoEq6TxcLWLxztss-soeD8YqUkbj4JS-3fEbtzXxO7kt-A4W5qCh1D78pwIr/s1600/impoint.blogspot.com-orange.png
Membuat Search Widget Versi 3

#a-searchboxbackground:url(//lh5.googleusercontent.com/Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;
form#a-searchformdisplay: block;padding: 10px 12px;margin:0;
form#a-searchform #apadding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;
form#a-searchform #abuttonmargin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;


Ganti url yg aku blok sinkron dengan warna yg anda inginkan dibawah ini:
gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98A6LwfgmBrB_nwvDkYLexa1TpgpmyUwevB3WbKDNeYKdOWBy8vfOsx8qcmZjVbP9D0kvcQOo69c7IK3h7kIN7dP96qVcRnoGccUkGDYJg9ew2nV20Nb_dSj_aDyOx4QZ4kvPASa1-n8V/
gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIf51CjAGO8YjXPdQQB917rNkStcwXSMQzXXyGpLVRW4kv9OMQQHHUzcmQCg_D3w7TaCEybN0YwF2xBzopiahJRBkKXTGkmnegO0RsUrzvjaiL7M2vGQcfPoYo14jTBqwUtoaji_R0qIT/
gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMmSaF4U5HKGMGK0Z4hqnrNTedjSCsaTuOx8zadh3KLp9604DEyRzERHPUAtNLHPSatv5ZHawj7uzM8LjPKClKAqK_9GUM0wKcRG0YquSG67QUwlvAzTY92RbX_7uAEBKokx_bDVHt4re0/
gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfi3-XRFFd0Y1lTEpgCI8qnHyKOa_XZ6XyRNhrkaokglsYLGSwkxP82ORrzPWJU_uZn1jYwJBEeB2e2aGcCab56z_04rPbcZEi1OPZeHVYx3EIt5ybbf7tNOUudOs1JFZgA7PBIKqCHKYl/
gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFVa4obNLgYdklGB6utlNo8w78z9lHbmQ43O7BQU_fzEY_vh1skIqfet8voKAbXUSaFqs4naqL_MBy9o3L5kfVfGgvLu4j2b_OoHacPsgLs-gGtVcUmAE6QqPToVUmX6lOX5-YwDfWJG5f/
Demikian tutorial cara menciptakan search box keren, mungkin anda pula perlu membaca:
Membuat bermacam-macam popular post keren
Membuat Label keren
Menghias link kredit footer
Membuat Navigasi angka pada bawah halaman
Membuat Header 2 kolom
Read more
Post a Comment

6 CARA MEMBUAT WIDGET SEARCH BOX KEREN DI BLOG

Oleh Anonymous pada tanggal
6 Cara Membuat Widget Search Box Keren di Blog - Tutorial kali ini merupakan lanjutan menurut artikel kemarin mengenai cara membuat search bog keren, kali ini saya mau menambahkan lagi cara membuat 6 search box keren lainnya. Namun sebelum melanjutkan silahkan baca artikel lain saya cara menciptakan bermacam macam popular post blog keren terlebih dahulu. Lalu pertanyaannya pentingkah search blog ini dipasang di blog anda? Tentu saja poly sekali manfaat yg mampu anda dapatkan buat memasang search blog ini pada blog anda, search blog ini memudahkan para pembaca blog anda menjadi widget navigasi atau membantu para pembaca blog buat mengeksplor atau mencari artikel yg diinginkan para pembaca. Dengan demikian para pembaca gampang menemukan artikel atau yg berkaitan dengan frasa kata yang mereka inginkan di blog anda tanpa berpindah ke blog lain.
Cara Membuat 7 search box keren pada Blog
Cara membuatnya cukup mudah kok, anda hanya menambahkan widget misalnya biasa atau seperti langkah yang akan saya sebutkan dibawah ini:
  1. Masuk Akun blog anda
  2. Masuk tata letak lalu masukkan widget HTML/ Javascript
  3. Masukan kode yang aku berikan ini.
  4. Simpan

nb: Hasilnya sanggup dilihat dicek seperti dibawah ini.
Search Box no1

   
   
   
   

Search Box no2
   
   
   
   
   

Search Box no3
 
   
       
       
   

Search Box no4

   
   
   
   

Search Box no5

   
       
       
   

Search Box no6

   
   
   
   
Read more
Post a Comment

CARA MEMBUAT POPS UP FACEBOOK LIKE DI BLOGGER MENGGUNAKAN JQUERY

Oleh Anonymous pada tanggal
Cara Membuat Pops Up Facebook Like pada Blogger Menggunakan Jquery - Pada kesempatan kali ini aku akan share mengenai cara membuat widget like Pops up Facebook. Widget ini bisa dijadikan patokan seberapa banyak pengguna Facebook yang menyukai tautan menurut blog anda, selain itu jua bisa menambah blog semakin manis. Setelah kemarin aku posting tentang cara membuat widget pops up langganan email yang cara pembuatannya hampir sama, pembuatan widget inipun terbilang gampang. Saya akan mengungkapkan secara jelas cara membuat widget like facebook ini. Apabila anda melakukan semua langkah yang saya share dengan benar maka tampilan widget tersebut akan misalnya gambar dibawah ini:

Baca Juga widget artikel terkait lainnya:
- Membuat navigasi no urut halaman
- Membuat search box keren
- Membuat Widget Paypal Donation 
- Membuat widget Pagerank
- Membuat beragam popular post
- Membuat widget Alexa rank terbaru
- Membuat Menubar Navigasi tanpa edit HTML
- Membuat Floating RSS langganan Email
Cara Membuat FB fans like pops up pada Blogger
1. Masuk ke akun Dashboard Blogger anda>> Template >> Edit HTML
2. Cari kode head> di template anda buat lebih mempermudah lakukan pencarian dengan klik Ctrl+ F
3. Paste kode ini dia sebelum / pada atas kode head> yang saya sebutkan diatas
   
    jQuery(document).ready(function()
    if (document.cookie.indexOf('visited=true') == -1)
    var setDays = 1000*60*60*24*7;
    var expires = new Date((new Date()).valueOf() + setDays);
    document.cookie = "visited=true;expires=" + expires.toutCString();
    $.colorbox(width:"400px", height:"430px", inline:true, href:"#facebook-popup");
    );

Catatan: * 7 Menetapkan nilai ini akan mensugesti refresh. Menetapkan LikeBox buat muncul sekali pada pengunjung dan LikeBox akan ada lagi selesainya 1 minggu adlah hal yg lebih baik. Gunakan pengaturan default misalnya yang aku tulis diatas.
4. Sekarang Cari ]]> b: skin>
5. Paste kode berikut sebelum css di atas ]]> b: skin>
 /* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */
#colorbox, #cboxOverlay, #cboxWrapper position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden;
#cboxOverlay position: fixed; width: 100%; height: 100%;
#cboxMiddleLeft, #cboxBottomLeft clear: left; #cboxContent position: relative;
#cboxLoadedContent overflow: auto; -webkit-overflow-scrolling: touch;
#cboxTitle margin: 0;
#cboxLoadingOverlay, #cboxLoadingGraphic position: absolute; top: 0; left: 0; width: 100%; height: 100%;
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow cursor: pointer; .cboxPhoto float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; .cboxIframe width: 100%; height: 100%; display: block; border: 0;
#colorbox, #cboxContent, #cboxLoadedContent box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;
/* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */
#cboxOverlay background: #000;
#colorbox outline: 0; #cboxContent margin-top: 20px; background: #000;
.cboxIframe background: #fff; #cboxError padding: 50px; border: 1px solid #ccc;
#cboxLoadedContent border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; #cboxTitle position: absolute; top: -20px; left: 0; color: #ccc;
#cboxCurrent position: absolute; top: -20px; right: 0px; color: #ccc;
#cboxLoadingGraphic background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJzv20nJ-YUkX6xW0ajzgfZgzqHpkmDyA3Kyc-YYK9RDpRXCsxlhhG9_XXoUU9wre2byLwrRZkelLGseXqoXYM7jR3Me0Gt0psoo2b3iAz1dfHIba5oJaUsQXni9oFpcza7JYQI1lXeAY/s32/loading.gif) no-repeat center center;
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none;
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active outline: none;
#cboxSlideshow position: absolute; top: -20px; right: 90px; color: #fff;
#cboxPrevious position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(//sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px;
#cboxPrevious:hover background-position: bottom left; #cboxNext position: absolute; top: 50%; right: 5px; margin-top: -32px; background: u(//sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px;
#cboxNext:hover background-position: bottom right; #cboxClose position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXpuz137Ot1QheAx2rKNGtF0jdZGBTEzKf-RQEJFCPgM_RMevseoGpLgKMIZFxmyO96FRU7evORM4-d82jZhqjn_Okt1ruD2n8aiQfhfDpYyZ6AnOiETCEkf8dvW5Gi_VrK1WoaOL1-vUD/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px;
#cboxClose:hover background-position: bottom center;

6. Simpan template Anda dan tinggal dua langkah terakhir! Kunjungi blog Anda untuk melihatnya bekerja sempurna.
7. Temukan kode berikut body>
8. Paste kode berikut sebelum tag body>
 

   

   

Receive All Free Updates Via Facebook.


   



Ganti Sharetipsdancara menggunakan facebook fan halaman nama pengguna.
9. Simpan template Anda
Read more
Post a Comment

CARA MUDAH MEMBUAT MENU NAVIGASI KEREN TANPA EDIT HTML

Oleh Anonymous pada tanggal
Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML - Menu naviagasi merupakan menubar yg umumnya ditempatkan pada bawah header blog yg bermanfaat buat mengarahkan pembaca juga pengunjung blog menuju link yang mereka cari. Apabila selama ini banyak para blogger yg kesulitan buat cara membuatnya kali ini saya akan share tentang bagaimana cara membuat pilihan menu navigasi keren tanpa editing HTML. Dengan cara ini para blogger pemula yang belum mengetahui cara editing HTML yang memang membutuhkan ketelitian dapat membuat pilihan menu navigasi mereka dengan lebih menarik dan lebih mudah.
Menubar navigasi atau menu bar umumnya terdiri menurut beberapa tab. "Di dalam" masing-masing tab tadi berisi link yang menuju laman posting, page tidak aktif, laman label, ke website lain dll. Sebenarnya membuat tab pilihan menu nir begitu sulit. Pada dasarnya intinya sama yaitu membuat pilihan menu yang berisi beberapa link menggunakan beberapa styling dibubuhi buat daya tarik visual. Sementara link yg disusun secara vertikal, tab navigasi umumnya disusun secara horizontal.
Dalam tutorial ini kita akan menginstal bar sempurna di bawah header, loka spesial atau generik buat navigasi bar. Bar akan dibubuhi sebagai gadget melalui halaman Elemen Halaman. Keuntungan memakai gadget adalah bahwa bila Anda ingin menghapusnya nanti, hal itu dapat dilakukan menggunakan gampang tanpa mengedit HTML. Tetapi, buat melakukan itu, template wajib mempunyai tautan Gadget atau widget wadah yang aku akan menyebutnya, pada lokasi eksklusif.
Baca Juga widget artikel terkait lainnya:
- Membuat navigasi no urut halaman
- Membuat search box keren
- Membuat Widget Paypal Donation 
- Membuat widget Pagerank
- Membuat bermacam-macam popular post
- Membuat widget Alexa rank terbaru
Membuat Menu Navigasi Untuk Blogger

1 Masuk ke akun Dashboard Blogger Anda >> Layout >> serta klik pada tambahkan gadget (tempatkan di bawah header seperti Screen Shot dibawah ini.)
2. Klik Tambah Gadget.
3. Gulir ke bawah Tambahkan Gadget dan pilih HTML / JavaScript.
4. Biarkan kotak judul kosong.
5. Copy serta paste kode HTML di bawah ini ke dalam kotak konten.

    height:50px;
    width:960px;
    line-height:50px;
    list-style:none;
    margin-top:10px;
    font-size:14px;
    
    font-weight:bold;
    overflow:hidden;
}
#tab_menu li
    float:left;
    border-right:1px solid #FFA722;
    border-left:1px solid #CC5200;
}
#tab_menu li:first-child
    border-left:none;
}
#tab_menu li:last-child
    border-right:none;
}
#tab_menu li a
    text-decoration:none;
    float:left;
    display:block;
    height:50px;
    padding:0 20px;
    color:#FFF;
}
#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover
    color:#622900;
    text-shadow:1px 1px 0px #E8964B;
}
#tab_menu li a.tool
    color:#000;
    text-shadow:1px 1px 0px #E8964B;
}

6. Ganti "#" menggunakan URL halaman tujuan Anda.
7. Anda bisa menerima URL dari page dengan menyalin isi alamat / URL bar browser Anda sementara Anda berada pada halaman tersebut.
8. Untuk menampilkan semua posting pada bawah label (kategori), Anda perlu link ke laman label.
9. Untuk mengganti lebar lebar pilihan menu edit: 960px.
Nah anda mampu menggantinya sesuka hati anda, atau anda sanggup mengubah background rona pada menu navigasi dengan mengubah link url background diatas yg saya tandai dengan warna merah menggunakan link url background dibawah ini, atau anda lebih senang untuk memakai rona lain, silahkan anda lihat kode rona html yang telah aku sediakan.
1.menu_bg_1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUXZgXnrJhutnZJtcG-he9Wga18mfQiRG8ZlerP6IhywvlzFnd8t4p1YTiLbSsLAWFOujw0On8iZOQ3BrQolEelj74aVhh4l92hxSD7QqrzwPecHSG8Ij6vJfi0SWagUMH_Js-t1quQeNJ/s1600/menu_bg_1.png

2 menu_bg_2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-aTCNn5PD2axMJ1uhcZ206GctTsUmRYQbtTqUz9eSHjDzwP_UhrhnqATuDxQn2v3bynnXUu9Vu16AcTuwQZN7ji-E1PxuQ71LJ6t_xX2DeuWDLPzjY1oKI7cEoqpm0MRXRAv6mo4Q2ns/s1600/menu_bg_2.png

3 menu_bg_3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1DLCgxPJ3FJiUhvedGognFP26-hCzpA-eXgwtoTBJjp4lySlsZUNWCcMOAfmQcpceyNERXvfS8HkNYTxuqihHfkM6RyRsuVsmSGPg_asLUhbXM5NYutqvo96bmoASOcJ-D8CGqwM03PCU/s1600/menu_bg_3.png

4. Menu_bg_4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPKn4qb8xcDh1DrxkFb6kK2CZwktXHj4vEZhZyZ1PhnCPUHHEgrPJ3BgLF7wEzp_bVkiQHcZQlN-vvVDs6q5s8co3D-yc9CmBe0IeLKNyrKIrj0sF7-WecFe1aqVlP_-Ku6cvVggCfnWD/s1600/menu_bg_4.png

5. Menu_bg_5
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjJKS_9Paaf2RSADCHd64ow28_3qG9qGz1Nrlq5SM5CQiJzd-vXvIQGnza0YXlCp7Cd45HdbjwFyHCftypjUx00-lvX9CX0ep00H4thTOaYL97LYLXgBxHoEXejBNABHqCzvR5LGxN5xy/s1600/menu_bg_5.png

6 menu_bg_6
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKG_xG2kIw_sXsoRE088Trw54LWwRXSZ9aX1Ip8GmOvTIoqxWYpUQB-a3eLAJsUs29FklWwC-9r1ss_2hmaeRVk2mh22YL1fjnot5LGaBo1qymYFIpZKRgCBPaFaHn97v_V_y596AjpTMw/s1600/menu_bg_6.png

7 menu_bg_7
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwuBLsX5G1JDe-ChVxKHVA0zh4Ui0pkRR652kPn36eSoPVORZfxsP85ECMFGhdipWL0dYRTxQpj31UbIcL-vGyV6pQGXMrjy1lPHVHWdlMuitFEpoyOrQfQuCD9evE60Vxg8lg-amoPMrv/s1600/menu_bg_7.png

8 menu_bg_8
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_igvfJqeRFYspcbVyU_9jV5D5Guby6dqROxQHd-bE5hbPQ7iIN_71xoyFzKf8p07EXuFxuFbsf7WSsQtLMSR74ATLJ4_Wi-mI_QG1q2wX9JPl0Yp1PeV07Q0JWzpqPCfgFLW_6YCkxOd3/s1600/menu_bg_8.png

9. Menu_bg_9
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUnQEHmusOBpSNKvLutBpT66Dls5hyiYhOaclYUSg5Opp_i-n9IafSNtcp-KRJdF5y8C0gAIgcO0HePbCAEaqm9wZKe608K7O11K1km2haHgp0Vac-nLQg5dOSR5lyB4q0CG24qT2iRlw/s1600/menu_bg_9.png

10 menu_bg_10
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRkCVcKhza-7oen9SzKmMjmf0iBCAPVMv9-hpmiubFAE6ZoB_Iz_ZSdUtbgvwG_cg0iu73itXQKoXEU-7WsYhCXVRCMkYR67iVHsHLxJL7W5xN9OPsftsad8SuktzQsvgZXRhDc0Ac-UPU/s1600/menu_bg_10.png
Read more
Post a Comment
Subscribe to: Posts (Atom)