Home » Posts filed under Responsive

Praktek Penerapan dan Cara Mengatur Form Search Responsive pada Blog dengan Mudah

Berbicara mengenai search box atau kotak pencarian adalah hal yang biasa-biasa saja, setiap kita mengunjungi suatu situs pasti telah menyediakan layanan pencarian, karna begitu pentingnya banyak yang mendesain form search atau kotak pencarian mereka dengan berbagai gaya dengan desain yang  betul-betul menarik perhatian pengunjung untuk menggunakannya.
Saya tidak akan menjelaskan secara terperinci karna saya yakin anda sudah mengetahui fungsi dari search box tersebut. Namun perlu anda ketahui, bahwa Praktek/tutorial kali ini akan menggunakan desain yang menurut saya sangat sederhana minimalis namun menarik perhatian, gambar di atas adalah hasil dari kreasi saya dalam menerapkannya di blog ini:
Saya yakin anda bisa bereksperimen lebih dari pada saya sehingga hasilnya bisa jauh lebih menarik.
Bagaimana cara penerapan dan pemasanganya? Berikut prakteknya bisa anda ikuti step by step.
1. Masuk ke Dashboard.
2. Lalu pilih template.
3. Selanjutnya pilih Edit HTML.
4. Lalu cari kode aside (Gunakan CTRL + F agar pencarian lebih mudah).
5. Lalu pastekan kode HTML di bawah ini tepat di bawah kode <aside id

HTML :
    <div id='search-box'>
    <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Seacrh Here...' type='text'/>
    <button id='search-button' type='submit'><span><i aria-hidden='true' class='fa fa-search'/> Search</span></button></form></div>
Ket : Anda bisa mengganti teks warna biru sesuai dengan keinginan anda. Warna hijau bisa anda hilangkan atau anda ganti dengan icon lain. Warna ungu bisa anda ubah kedalam bahasa lain misalkan CARI DISINI, CARI ARTIKEL dan sebagainya.
6. Lanjut dengan mencari  </head>  Jika sudah ketemu letakkan CCS berikut di atasnya

<style>
#search-box{position:relative;top:20px;margin:10px auto;border:1px solid #ccc;padding:5px;}#search-form{height:35px;background-color:#fff;overflow:hidden}#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent;line-height:15px}#search-box input[type=&quot;text&quot;]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:35px;width:80px;font-size:12px;color:#fff;text-align:center;border-width:0;background-color:#ff5848;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}
</style>
Ket : Sesuaikan dengan template anda text warna merah di atas adalah pengaturan letaknya, untuk yang warna kuning adalah ukuran huruf, wana biru adalah untuk mengatur lengkungan pada sudut search. Jika ada yang kurang jelas silahkan berkomeentar atau melalui email pada bagian Kontak.
7. Save template anda dan lihat hasilnya.

Itulah cara penerapan kolom pencarian yang menurut saya cukup praktis dan mudah diterapkan pada blog anda.
Baca Selengkapnya

Praktek Penerapan, Postingan Terkait atau Related Post Dengan Gambar Thumbnail Responsive


Tema pada kali ini adalah Postingan Terkait atau  Related Post Responsive, begitulah kira-kira dengan judul Praktek Penerapan, Widget Postingan Terkait atau  Related Post di Blogger Dengan Gambar Thumbnail Responsive.
Ok, mari kita mulai praktek kali ini dengen menghapus terlebih dahulu semua kode related post yang ada di template anda jika sudah pernah menerapkannya dan merasa kurang puas dengan tampilan related post atau artikel terkait yang anda miliki sekaran.
Tetapi kalau anda belum pernah memasang artikel terkait atau related post di blog anda, lewati langkah di atas dan mulai ke tahap berikutnya.
  1. Seperti biasa pilih Template kemudian Edit HTML. Bagi pemula jika kurang jelas lihat gambar berikut : 
    Bagi anda yang sudah paham abaikan gambar di atas dan lanjut ketahap selanjutnya.
  2. Pasang kode CSS dan JavaScript Related Post Gambar Thumbnail Responsive berikut di atas kode </head>
    <!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #related-post {margin:0 auto;padding:0;}
    #related-post h4{position:relative;overflow:hidden;margin:10px 0 20px 0;font-size:120%;font-weight:700}
    #related-post h4:after{position:absolute;top:51%;overflow:hidden;width:78.3%;height:1px;
    content:&#39;a0&#39;;background-color:#ccc}
    #related-post h4 span{position:relative;display:inline-block;margin:0 10px 0 0}
    .relhead {font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 0;}
    #related-summary .news-text {display:none;}
    ul#related-summary{margin:0 auto;padding:0;list-style:none;word-wrap:break-word}
    ul#related-summary li{position:relative;float:left;list-style:none outside none;padding:0;overflow:hidden;margin:0 10px 0 0;width:100%;max-width:175px;height:170px;transition:opacity .2s ease}
    ul#related-summary li a {display:block;}
    ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:100%;max-height:100px;vertical-align:middle;overflow:hidden;margin:0 0 10px;transition:all 1s ease-out}
    ul#related-summary li:hover img {opacity:0.96;}
    ul#related-summary li a.relinkjdulx{background-image:none;color:#444;display:block;font-size:13px;font-weight:700;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none}
    ul#related-summary li a.relinkjdulx:hover{color:#c00;}
    @media only screen and (max-width:640px){
    ul#related-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;max-width:100%;height:auto;}
    ul#related-summary li:last-child{border-bottom:none;}
    ul#related-summary li img{max-width:72px;float:left;margin:0 10px 0 0;}
    ul#related-summary li a.relinkjdulx {display:block;font-size:15px;font-weight:700;line-height:normal;overflow:hidden;padding:0 10px 10px 0;}}
    @media screen and (max-width:384px){
    ul#related-summary li img{display:none}}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    //Related Post
    var relnojudul = 0;
    var relmaxtampil = 6;
    var numchars = 120;
    var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
    //]]>
    </script>
    <script type='text/javascript'>
    $(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(//s[0-9]+(-c)?//,&quot;/w175-h100-c/&quot;))});
    </script>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
  3. Langkah terahir pemasangan kode HTML di bawah kode <data:post.body/> yang kedua atau ketiga, bisa juga di bawah kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'> berikut kodenya :
    <!-- Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-post'>
    <div class='relhead'>
      <h4><span>Related Posts</span></h4>
    <div class='clear'/>
              <b:loop values='data:post.labels' var='label'>
                   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>
              </b:loop>
              <ul id='related-summary'>
                   <script type='text/javascript'>artikelterkait();</script>
              </ul>
         </div>
    </div>
    <div class='clear'/>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->

  4. Save Template!
CATATAN : Jika ada masalah lebar gambar, bisa diatur pada kode CSS (bagian width), caranya cari kode berikut: max-width:175px;height:170px;transition:opacity .2s ease dan sesuaikan dengan lebar postingan anda dengan mengganti 175px sesuai lebar postingan anda.
Praktek ini di adopsi dari Contoh Blog Sebagai sumber dari admin.
Baca Selengkapnya
Subscribe to: Posts (Atom)