CARA FLEXI: Search results for Cara Membuat Popular Post Keren Di Blog

CARA MEMBUAT POPULAR POST BLOG SEDERHANA TAPI KEREN

Oleh Anonymous pada tanggal October 29, 2018

Cara Membuat Popular Post Blog Sederhana Tapi Keren - Widget popular post bawaan standar blogger dari sebagian orang tampil kurang menarik, nah dalam kesempatan kali ini saya akan share mengenai bagaimana menciptakan widget popular post menjadi sederhana tetapi tampil menarik, berikut merupakan tuorial cara membuat widget popular post blog secara sederhana tetapi keren:

1. Log in ke akun blogger sobat
2. Klik tata letak/ masukkan widget popular post
3. Pada pengaturan popular post hilangkan image pada thumbnail dan snippet.
4. Simpan kemudian lanjutkan ke tamplate dan edit HTML
5. Cari kode berikut ]]> lalu tambahkan kode berikut ini tepat diatas kode yang aku sebutkan diatas.

/*--- Genera Popular Posts --- */
    .popular-posts ulpadding-left:0px;
    .popular-posts ul li
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaJIDvvWExzVZH9VJBx3yZRfFBh8qt1ilpLMyPWU3RcBnKF-TBdzzazNfDPsZpg7KIkekOA6ZhSe0LcHNqf6Bbbm1qavWYzOoXoP-I9TzQmzKousCP30z4f5OtEM82CTPxjTu-YxQQT4u/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
    list-style-type: none;
    margin: 0px 0px 5px;
    padding: 5px 5px 5px 20px !Important;
    border: 1px solid #dddddd;
    border-radius: 10px 10px 10px 10px;

    .popular-posts ul li:hover
    border:1px solid #666666;

    .popular-posts ul li a:hover
    text-decoration:none;

6. Klik pratinjau apabila tidak terjadi eror klik simpan.
Baca juga cara menciptakan bermacam-macam populer post lainnya.

6 CARA MEMBUAT WIDGET SEARCH BOX KEREN DI BLOG

Oleh Anonymous pada tanggal October 29, 2018

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:

Masuk Akun blog anda
Masuk tata letak lalu masukkan widget HTML/ Javascript
Masukan kode yang aku berikan ini.
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

CARA MENGHIAS LABEL BLOG

Oleh Anonymous pada tanggal October 29, 2018

Nah kali ini aku akan share tentang bagaimana menghias atau custom label bawaan blogger supaya menjadi lebih menarik dan tentunya sanggup anda rubah misalnya yang anda inginkan. Tutorial ini menghias label seperti yang pada blog ini namun anda mampu merubah kode CSS seperti yg anda inginkan.
1. Log in Blogger klik tata letak dan masukkan widget.
2. Tambahkan popular post (Ingat buat menciptakan pengaturan cloud di popular post bukan baris).
3. Setelah semua beres masuk ke pengaturan template serta edit HTML.
4. Cari kode berikut ]]> dan letakan kode CSS berikut ini diatas kode tersebut:

.label a
    padding: 5px;
    background: #359bed;
    color: #fff!Important;
    text-decoration: none;
    border: none !Important;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 14px;
}

.label a:hover
    color: #fff !Important;
    background: #000000;

5. Klik pratinjau bila nir terjadi eror klik simpan maka hasilnya akan seperti dibawah ini:

Atau anda bisa mengganti kode CSS beliau atas menggunakan kode misalnya dibawah ini:

.label a
padding-left: 20px;
background: #000;
padding: 0 20px;
color: #fff!Important;
border-radius: 100px;
-moz-border-radius: 100px;
height: 32px;
line-height: 32px;
text-transform: uppercase;
text-decoration: none;
border: none !Important;
-webkit-transition: all .3s ease-in-out !Important;
t: 30pxt: 30px;
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 14px;
}

.label a:hover
color: #000 !Important;
background: #ff0;
}

Maka hasilnya akan misalnya dibawah ini:

CARA MEMBUAT POPS UP FACEBOOK LIKE DI BLOGGER MENGGUNAKAN JQUERY

Oleh Anonymous pada tanggal October 29, 2018

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

CARA MUDAH MEMBUAT MENU NAVIGASI KEREN TANPA EDIT HTML

Oleh Anonymous pada tanggal October 29, 2018

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