Memasang Search Box Metro UI Di Blog Secara Mudah

Memasang Search Box Metro UI Di Blog Secara Mudah - Halo Sob, Sekarang ini Aku memberikan sebuah tutorial tentang "Memasang Search Box Metro UI Di Blog Secara Mudah" Di Blog, fungsi Search box ini adalah untuk membuat pengunjung di blog kamu bisa cari yang ada di blog itu nah kebetulan nih aku ini punya tutorialnya untuk kamu yang belum tahu tentang cara memasang search box ini di blog ikuti langkah langkah ini gampang kok Cekidoot...


1.Buka Blogger.com lalu > Tata Letak > Tambahkan Gadget
2.Pilih HTML/JavaScript
3.Copy Kode dibawah ini lalu paste di  HTML/JavaScript

<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #1abc9c;
    
    border: 0;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#abt-search-btn:hover {background: #16a085;}
#abt-search-box {
    background: none repeat scroll 0 0 #16a085;
    border: 4px;
    color : #FFF;
    border-radius: 0px;
    padding: 10px;
    width: 180px;
}
</style>
<a><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Cari Disini..."/>
<input id="abt-search-btn" value="Cari" type="submit"/>
</form>
</a>

4.lalu Simpan
5.Buka Dan Lihat Hasilnya

Semoga Bermanfaat

Cara Mudah Memasang Widget Label Cloud di Blog

Pasti Sobat tau tentang widget label tapi banyak yang bingungkan cara membuat label cloud itu kayak apa? kan sobat belum tau seperti apa, label cloud itu seperti gambar di bawah ini, tapi itu tidak semua sama di setiap template berbeda beda.

Ini Adalah Gambar Label Cloud :

Pasti Sobat Belum tahu cara mengubah label daftar menjadi cloud, jadi Kalau belum tau sobat harus Mengikuti langkah - langkah ini :



Langkah Pertama :Sobat Harus Buka blogger sobat lalu sobat buka tata letak Lalu tambahkan Gadget

Langkah Kedua : Setelah klik tambahkan gadget lalu klik widget label

Langkah Ketiga : Setelah itu pilih cloud bukan daftar!

Langkah Ke Empat : Simpan

Mudah Bukan.

Semoga Bermanfaat

Cara Mudah Membuat Tombol Share AddThis Melayang di blog

Halo Sobat, Aku sekarang ini memberikan tutorial untuk sobat nih, "Cara Mudah Membuat Tombol Share Melayang di blog" . Fungsi Tombol Share adalah untuk membagikan artikel artikel tersebut di social media gan. Tapi ini caranya simple gan, Sobat harus punya akun addthisnya kalau ga punya sobat harus buat.
Yuk Langsung Saja Ke Tutorial>...<

1.Buka www.addthis.com>Sign In>Continue With Google (Kalau sudah Punya Akun Google)
2.Kalau sudah, kita Klik Tools
3.Lalu pilih tombol share Yang Free/Gratis (Biar Irit)
4.Setelah itu pilih Sharing Sidebar Lalu klik SetUp

5.Setelah Itu Edit Sesuka Hatimu :D

6.Setelah Di Edit, Lalu copy kode yang ada di saat kamu mengedit

7.Klik Active
8.Lalu buka blogger.com>Template>Edit Html, lalu kode yang kamu copy tadi paste di atas   kode <body>
9.Lalu Klik Simpan

Jadi Deh

Cara Mudah Membuat Emoticon di Komentar Blog

Cara Mudah Membuat Emoticon di Komentar Blog - BHalo Sobat Sekarang Ini Saya Akan Memberikan Tutorial Lagi Yaitu "Cara Mudah Membuat Emoticon di Komentar Blog". Sobat Pernah Melihat Emoticon, Pasti ingin memasangnya di blog kan. Emoticon Blog ini berfungsi untuk memberikan gambar lucu saat berkomentar di blog Kalau ingin Memasangnya langsung saja sob>>>>>>>>>>>>>>>.

1.Buka Blogger.com>Template>edit HTML
2.Letakan Kode Di Bawah ini Sebelum kode </style> 

.emoWrap { position:relative; padding:10px; margin-bottom:7px; background:#fff; background-image:-ms-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:-moz-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:-o-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:-webkit-gradient(linear,right top,left top,color-stop(0,#FFFFFF),color-stop(1,#FFF9F2)); background-image:-webkit-linear-gradient(right,#FFFFFF 0%,#FFF9F2 100%); background-image:linear-gradient(to left,#FFFFFF 0%,#FFF9F2 100%); border:3px solid #860000; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); font-weight:normal; color:#333; }.emoWrap:after { content:""; position:absolute; bottom:-10px; left:10px; border-top:10px solid #860000; border-right:20px solid transparent; width:0; height:0; line-height:0; }

3.Lalu Letakan Kode dibawah ini Sebelum Kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]>
</script>
<script src='https://sites.google.com/site/thinkfaiz/thinkfaiz/emoticons-1.js' type='text/javascript'/>
</b:if>

4.Simpan Lalu lihat Hasilnya

Semoga Bermanfaat