Followers

Diberdayakan oleh Blogger.

Membuat Search Box Elegant Dengan CSS


Kali ini saya akan berbagi cara membuat search box dengan tampilan yang sangat elegant. Seperti yang kita tahu search box sangat membantu kita sebagai alat navigasi web atau blog. Contoh bisa dilihat di blog ini.
Langsung saja simak cara pasang nya.!

1. Login ke Blogger
2. Lalu masuk ke Rancangan
3. Lalu Edit HTML
4. Centang Expand Template Widget
5. Kemudian cari kode ]]></b:skin> (untuk mempermudah pencarian klik F3 atau CTRL + F pada keyboard)
6. Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>. lalu simpan.

#search {

}

#search input[type="text"] {
    background: url(http://1.bp.blogspot.com/-Bz_fY7BI6sQ/T-F-JG5qlcI/AAAAAAAABIo/P8ItIUjvyTQ/s1600/cari.png) no-repeat 10px 6px #5E5E5E;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -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;
    }

#search input[type="text"]:focus {
    width: 185px;
    }
Keterangan: ganti kode berwarna Merah dengan kode warna sesuka kalian.

7. Letakan kode yang ada di bawah ini pada Add Gadget ( HTML / JavaScript ).
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>
8. Simpan dan lihat hasilnya.!
^__^
( Happy Blogging )
Read More..

Mozilla Firefox 13.0.1

  • Publisher: Mozilla
  • File Size: 15 MB
  • OS Support: Windows (ALL)
  • License: Freeware
Gambar di bawah ini adalah Screenshoot dari Browser Mozilla Firefox 13.0.1 saya.!

Langsung download aja.!

 (Indonesia Version)

(English Version)
Read More..

Membuat Related Post Dengan Gambar Berjalan

Di pagi yang cerah ini, saya akan membahas bagaimana cara membuat Related Post atau bisa disebut Artikel Terkait. Related Post sangat berfungsi untuk sebuah website atau blog (Agar pengunjung bisa melihat dan membaca artikel terkait lainnya). Berikut Screenshot nya.!

Langsung saja simak baik" cara nya.!
1. Login ke Blogger
2. Lalu masuk ke Rancangan
3. Lalu Edit HTML
4. Centang Expand Template Widget
5. Jika takut gagal mencoba, lebih baik download dulu template nya
6. Kemudian cari kode </head> (untuk mempermudah pencarian klik F3 atau CTRL + F pada keyboard)
7. Copy kode dibawah ini dan letakan tepat diatas kode </head>
<!--Related Post Dengan Gambar Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FF0000;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://v-script.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Post Dengan Gambar Scripts and Styles End-->
Keterangan: Kode yang berwarna Biru adalah kode warna, bisa kalian ganti dengan sesuka kalian.
8. Selanjutnya cari kode yang mirip dengan kode dibawah ini.
<div class='post-footer-line post-footer-line-1'>
 9. Lalu Copy dan pastekan kode dibawah ini tepat dibawah kode diatas.
 <!-- Marquee Vion Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Post:</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Vion Related Posts with Thumbnails Code End-->
10. Simpan template dan lihat hasil akhirnya.!
Keterangan: Tulisan yang berwarna merah bisa di ganti dengan sesuka kalian.
  • Tulisan Related Post: (Bisa kalian ganti dengan tulisan apa aja.)
  • Angka 2 (Kecepatan bergerak, semakin besar angkanya semakin cepat.)
  • Angka 9 (Jumlah Artikel yang di tampilkan.)
^__^
( Happy Blogging )
Read More..
Prev