Cara Membuat Widget Search Box Keren Pada Blog

tutorialku18 - Cara membuat widget search box keren Pada Blog, Membuat widget search box atau widget kotak pencari merupakan suatu hal yang sangat penting bagi setiap element pada blog. Apa fungsinya ? jangan tanya apa fungsinya karena Anda pasti tahu benar apa fungsi dari widget ini ? yups adalah untuk memudahkan orang mencari artikel yang mereka (pengunjung) cari di sebuah blog. Memang ada widget search box yang sangat sederhan tinggal klik, Namun apa salahnya kalau kita membuat nya lebih semenarik mungkin agar blog terlihat keren. Baiklah pada kesempatan kali ini saya akan memberikan tutorial blog berupa bagaimana cara membaut widget search box keren di blog ? berikut langkahnya.

Cara Membuat Widget Search Box Keren Pada Blog

Berikut adalah cara agar dapat membuat widget keren ini. Yang harus kamu lakukan adalah masuk ke akun blog kamu.

• Membuat Widget Recent Post Sederhana di Blog

Masuk Akun Blogger
1. Pilih tab tata letak.
2. Klik Add Widget, lalu pilih Html/Javascript lalu salin script dibawah ini:

<div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Search Here...' type='text'/> <button id='search-button' type='submit'><span><i class='fa fa-search'/></i></span></button> </form> </div>

3. Simpan script diatas pada widget yang anda tambahkan tadi.
4. Lalu masuk ke tab edit html
5. Klik edit html, Lalu salin script dibawah ini tepat di atas </head>

#search-box { position: relative; width: 130%; margin: -15px 0px -20px 0; } #search-form { height: 42px; 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=&amp;amp;amp;amp;amp;amp;amp;quot;text&amp;amp;amp;amp;amp;amp;amp;quot;] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 42px; width: 50px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #1E90FF; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; }

6. Simpan template, dan lihat hasilnya. Semoga berhasil dan cara ini adalah langkah terakhir.

Sekian artikel ini tentang Cara Membuat Widget Search Box Keren Pada Blog. Semoga artikel ini dapat bermanfaat bagi Anda blogger. Masih banyak tutorial dan tips lainnya di tutorialku18 ini selamat belajar blogging dari blog ini.

Baca Juga :

• Tips Memasang Fanspage Facebook Pada Blog
• Cara Membuat Menu Pada Blog Mengikuti Saat di Scroll ke Bawah
• Cara Mudah Mengetahu ID Nav Class Pada Menu Blog

Tips Memasang Fanspage Facebook Pada Blog

Cara membuat fanspage facebook di blog dengan mudah. Tutorialku18 - pada kesempatan kali ini admin akan membahas cara membuat fanspage facebook di blog tampil di sidebar blog. Tips membuat fanspage facebook di blog ini sangat mudah untuk  dilakukan, kamu hanya perlu teliti untuk bisa membuat fanspage facebook di blog ini agar sukses 100%. Fanspage facebook merupakan halaman facebook yang dibuat untuk memberikan informasi di media sosial seperti facebook. Fanspage facebook juga sebagai media promosi antara halaman facebook menyambung ke website blog maupun sebaliknya antara website blog ke fanspage facebook agar saling bekerja sama untuk meraih minat para pengunjung. Untuk membuat fanspage facebook di blog sukses muncul di sidebar blog. Berikut adalah cara memasang fanspage facebook pada blog.

Baca juga : Cara Membuat Menu Blog Mengikuti Saat Di Scroll Ke Bawah. 

Setting pada plugin halaman, perhatikan gambar tutorial setting di developer.facebook. masuk terlebih dahulu ke halaman fanspage facebook kamu ⇢ disini.

Tutorial Setting Di Developer.Facebook

1. Masukan url fanspage facebook kamu
2. Sesuaikan dengan kemauan sendiri
3. Lalu jika sudah, kamu klik "dapatkan kode"

Pada step ke -2, Salin semua script dibawah ini dan kamu Parse Html kan.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.7&appId=1543454249290933";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

lalu kamu pindahkan script di atas ke "edit html" taruh di atas </body> atau setelah tag <body>.

Jika sudah, kamu pindahkan script yang ada di bawah ini ke widget blog kamu atau bila ingin memakai timeline kamu bisa ambil script pada step ke 3 di developer.facebook .

<div class="fb-page" 
  data-href="https://www.facebook.com/kholidtutorialku"
  data-width="380" 
  data-hide-cover="false"
  data-show-facepile="false" 
  data-show-posts="false"></div>

Lalu kamu ganti www.facebook.com/kholidtutorialku dengan link atau url fanspage facebook kamu. Jika sudah, kamu simpan dan liat hasil dari cara membuat fanspage facebook di blog ini. Jika berhasil kamu bisa share dan komen dibawah postingan ini. Sekian artikel tentang membahas tips memasang fanspage facebook pada blog. Semoga artikel ini dapat bermanfaat bagi sobat blogger yang ingin memasang fanspage facebook pada blog dengan cara dan tips mudah ini.

Membuat Recent Post Blog Sederhana Di Blog 2017

Pada kesempatan kali ini tutorialku18 akan memberikan tips dan cara membuat recent post sederhana pada blog. Dengan cara sederhana ini kita dapat membuat widget recent post dengan mudah karena sobat hanya perlu membuatnya dengan sangat mudah dan praktis. Tutorialku18 akan membahas cara membuat widget recent post sederhana untuk blog dengan cara mudah. Widget recent post untuk blog diperuntukan untuk para blogger yang ingin mempermudah blognya untuk memudahkan para pembaca mencari artikel terbaru pada blog sobat. Lalu bagaimana cara membuat recent post ? cara membuat widget recent post ini sangat lah sederhan yang harus pertama kamu lakukan adalah sebagai berikut :

Login Dashboard Blogger

1. Login pada dashboard blogger

2. Lalu klik tab " LayOut"

3. Klik "Add Gadget"

4. Lalu cari Html/JavaScript jika sudah ketemu sobat pilih widget tersebut.

Konfigurasi Script Widget Recent Post

1. Salin Script dibawah ini:

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<10;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

2. Pindahkan ke Widget yang tadi sobat pilih ( Html/Javascript )

3. Pada angka 10 sobat rubah dengan jumlah postingan yang akan ditampilkan pada widget recent post.

Contoh widget Recent Post

Kemudian sobat save dan lihat apa yang terjadi pada widget blog sobat, Dan itulah hasil dari tutorial diatas. Semoga artikel ini bermanfaat bagi para blogger yang ingin memperindah halaman blog dengan kontent terbaru menggunakan widget widget recent post. Sekian artikel tentang Membuat Recent Post Blog Sederhana Di Blog 2017.

Cara Mudah Mengetahui ID Nav Class Pada Menu Blog

Cara mengetahui id nav atau class pada menu blog untuk dijadikan sticky - Bagaimana cara mengetahui id atau nav class pada menu navigasi buat dijadikan menu melayang atau following scroll ( mengikuti scroll ) ?. Pada dasarnya id navigasi pada suatu menu blog di gunakan pada salah satu aplikasi programan yaitu css. Biasa nya id atau nav class terdapat pada tag header ini dikarenakan header adalah bagian element yang paling dekat dengan menu navigasi. Membuat menu navigasi supaya melayang kamu harus tahu id atau nav class nya terlebih dahulu sebelum memasukan coding lainnya. Bagaimana cara mengetahui id nav class pada menu blog ? Tutorialku18 - disini akan dipaparkan cara lengkapnya agar kamu mudah untuk memperaktekan nya. Pada materi kali ini admin akan memberikan tutorial atau cara mudah untuk mengetahui id nav class pada blog untuk dijadikan stcky menu biar greget.

Cara Mudah Mengetahui ID Menu Navigasi Untuk Dijadikan Sticky

Yuk langsung saja kamu perhatikan langkah - langkah ini dengan mudah :

1. Inspect element

Langkah pertama yang harus kamu lakukan adalah melakukan inspect element pada menu blog kamu bagaimana cara nya ? Kamu bisa perhatikan gambar dibawah ini :

Memulai Dengan Inspect element

Yap, seperti pada gambar. Klik kanan di sebelah menu " home " lalu pilih " inspect element ".

2. Menganalisis element pada menu navigasi blog

Analisis lah element pada menu blog kamu, yaitu dengan cara melihat coding yang terblok dengan sendiri nya setelah kita klik inspect element.

Menganalisis Element Pada Menu Blog

Pada bagian yang terblock dengan sendiri nya, kamu hanya tinggal klik dua kali pada tulisan yang terblock di bagian "top-nav". Nah, "top-nav" Adalah Navigasi Yang Akan Kita Buat Melayang Saat di Scroll.
 
Jadi Kesimpulannya Adalah Untuk Membuat Menu Navigasi Melayang Kamu Harus Mengetahui ID atau Nav Class Pada Menu Blog Kamu Terlebih Dahulu. ID Nav Nya adalah top-nav. Jadi Kamu Tinggal Mengganti tulisan pada coding css .sticky dan <script> Menjadi " .top-nav "

Baca Juga : Cara Membuat Widget Popular Post Pada Blog
Baca Juga : Cara Membuat Menu Blog Mengikuti Saat Di Scroll

Nah materi tentang cara mengetahui id nav class pada menu di blog  nya kira - kira segitu saja yang admin bagikan semoga bermanfaat bagi para blogger lainnya yang ingin menjadi master blogger. Share bila kamu ingin berbagi ilmu dengan yang lainnya.

Cara Membuat Menu Pada Blog Mengikuti Saat Di Scroll Ke Bawah

Cara membuat menu  blog mengikuti saat di scroll ke bawah - bagaimana cara agar menu pada blog mengikuti saat di scroll ke bawah? Membuat menu supaya mengikuti scroll saat di turunkan kebawah merupakan salah satu design web agar memudahkan pengunjung untuk melihat menu-menu yang terdapat pada suatu blog atau website. Dengan langkah mudah dari tutorialku18.ga ini akan memudah kan kamu untuk membuat menu di blo mengikuti atau melayang saat scroll di putar ke bawah. Cara nya sangat mudah sekali untuk kamu lakukan. Pada dasarnya menu navigasi pada blog digunakan untuk mengetauhi menu yang terdapat atau yang disajikan di dalam sebuah situs website. Yuk, langsung ajah cara membuat menu di blog mengikuti saat di scroll atau di turunkan kebawah pada bagian website atau blog.

Cara Agar Menu Blog Mengikuti Saat Di Scroll Ke Bawah

 Membuat Menu Sticky Pada Blog

1. Kamu masuk akun blogger kamu terlebih dahulu.

2. Untuk membuat menu navigasi supaya mengikuti saat di scroll, klik template, pilih "edit html".

3. Lalu kamu cari [ ctrl + f ] pada bagian </style> atau ]]></b:skin> .

4. Lalu kamu taruh coding ini di atas coding </style> atau ]]></b:skin>  :

.sticky {
position:fixed; top:50px;/
* jarak dari atas*/
z-index: 100;
}

5. Lalu kamu taruh script di bawah ini, tepat di atas </body>  :

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('.top-nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.top-nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.top-nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

6. Lalu kamu ganti .top-nav dengan id menu / nav kamu.

Baca Juga : Cara Mengetahui ID Menu / Nav Di Blog

Jika berhasil kamu bisa sharing atau komen di bawah postingan ini. Sekian tentang cara membuat menu mengikuti saat di scroll ke bawah sekian artikel ini semoga artikel ini dapat membantu sobat untuk dapat membuat sebuh menu mengikuti saat di scroll ke bawah.