Cara Membuat Next Page dengan Tombol angka pada Blog

Selamat datang di CaraGampang.Com ,, kali ini saya akan berbagi Cara Membuat Next Page dengan Tombol pada Blog. Tutorial Blog ini dikususkan buat sahabat blogger yang templatenya belum memiliki Tombol Next Page . Tombol ini fungsinya untuk melihat halaman perhalaman dalam blog kita, ya gitu deh. Untuk lebih jelasnya silahkan lihat gambar berikut :

Gimana sob, gambarnya sudah jelas kan ? kalo begitu mari kita lanjut Cara Membuat Next Page dengan Tombol pada Blog. 

• Masuk ke akun blogger anda. 

• Pada  tampilan Dashboard klik Design kemudian klik Edit HTML

• Untuk menjaga hal-hal yang tidak diinginkan saya sarankan backup dulu template blog anda dengan mengklik Download Full Template.

• Centang kotak kecil yang bertuliskan Expand Template Widged.

• Silahkan anda cari kode ]]></b:skin>

• Copy kode yang ada dibawah ini kemudian paste di atas kode ]]></b:skin

Cara Menambahkan Efek Slide Pada Popular Post Di Blog

Hallo sobat blogger semua pada pertemuan ini Yusuf ingin membagikan sedikit tips Cara Menambahkan Efek Slide Pada Popular Post Di Blog. Mungkin dari sobat blogger semua sudah mempunya popular post tapi dia kaku atau diam aja kayak patung. Oleh karena itu disini saya akan membagikan cara membuat popular post kita itu bergerak sehingga membuat tampilannya profesional gitu.

Memang pada setiap blogger mau tidak mau harus membuat popular post. Karena dengan cara ini banyak pengunjung akan mengklik postingan tersebut, sadar dan tidak sadar itu lah yang terjadi. Apalagi jika kita buat sedikit sentuhan yang menarik pada widget tersebut.

Cara pembuatan dari blog ini cukup mudah saja dan diyakinkan anda pasti bisa melakukan nya.. Oke langsung aja kita ketahap yang di tunggu-tunggu yah,,, hehehe.

Langkah - langkah pembuatan :

• Login ke Blogger dengan account anda
• Rancangan => Edit tata letak
• Add Widget => Entri Popular
• Pada pengaturan pilih banyaknya entri yang ingin anda tampilkan.
• Lalu Simpan WIdget anda.

Langkah pembuatan slide pada Popular post :

• Nah setelah sudah selesai membuat widget pada popular post. 
• Tambah lagi Widget (Add Widget) => Java scrip HTML
• Kemudian Anda Masukkan Kode CSS berikut kedalam kolom Java scrip HTML

• Save dan Ingat hasilnya harus sperti di bawah ini.

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;
}
#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
width:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://4.bp.blogspot.com/-AexFsTTa33c/TmFNoxg9zSI/AAAAAAAAE6I/7K8bPKYBr8Q/s400/popular%2Bposts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:1px solid #CCCCCC;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Verdana, Arial;
font-size:11px;
color:#FFFFFF;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}
#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}
#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a img {
border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

WARNING !!! : Widget Popular Post harus dibawah Sedangkan HTML Scrip diatasnya ! (lihat gambar diatas)


Catatan :

• Biru      :  Dapat anda ubah besar widget dan tinggi dari popular post anda nantinya. 
• Pink      : Warna dan Font Link Judul 
• Orange :  Image Border Postingan anda 
• Merah   : Ringkasan Postingan anda.

Nah, cukup sekian perjumpaan kita kali ini sekaligus mengakhiri pembahasan tentang  Cara


Menambahkan Efek Slide Pada Popular Post Di Blog... Salam Yusuf

Membuat Widget Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.

Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

• Pertama-tama silahkan login di Blogger
• Klik Design > Page Element > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

• Ganti kode yang berwarna biru dengan akun Twitter sobat
• Ganti kode warna merah bila ingin mengganti warna burung twitter dengan kode yang telah disediakan dibawah
• Simpan dan lihat hasilnya.

 Warna Pilihan Burung Twitter

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://zuazz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://2.bp.blogspot.com/-7doZyLsr9yI/TqNtUCClP4I/AAAAAAAAAF8/ld0bdD3WWj8/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1",
"h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://zuazz.blogspot.com/";
tripleflapInit();
</script>

Untuk memilih warna Burung di sini 

 Warna Kuning

• http://3.bp.blogspot.com/-xL1Dk6Bhi4g/TqN5gbyvSCI/AAAAAAAAAGM/jxsjBiRWMLw/s1600/yellow+bird.png

Warna Hitam

• http://1.bp.blogspot.com/-N3RvHfV3MUk/TqN5iPPqAEI/AAAAAAAAAGU/oYKSvsOj108/s1600/black+bird.png

Warna Biru

• http://3.bp.blogspot.com/-FNowQ1mqsLg/TqN5kxq86EI/AAAAAAAAAGc/VzatkjsUAEc/s1600/Blue+bird.png

Warna Coklat

• http://3.bp.blogspot.com/-b-9ncuDJxm0/TqN5nrOnTCI/AAAAAAAAAGk/LREurKp_tLc/s1600/brown+bird.png

Warna Hijau

• http://3.bp.blogspot.com/-SJP4OZmyeCU/TqN5qcyXgGI/AAAAAAAAAGs/jKQaqHF9EkA/s1600/Green+bird.png

Warna Ungu

• http://3.bp.blogspot.com/-Ec4JlrN6yc4/TqN5tIAXDpI/AAAAAAAAAG0/ywnjHeG4ASM/s1600/purple+bird.png

Warna Putih

• http://1.bp.blogspot.com/-qsxd6A0vUFU/TqN5vZVI2-I/AAAAAAAAAG8/lb0Ol5Nbrvw/s1600/white+bird.png

Warna Merah

• http://1.bp.blogspot.com/-knGCnCFCahI/TqN59awa61I/AAAAAAAAAHE/mniE1h9IW14/s1600/red+bird.png

Dan terakhir jangan lupa disimpan Good luck Sob..!!!!

Membuat Tulisan Berjalan Di Buku Tamu CBOX

Sedikit berbagi pengalaman pribadi lagi nih sob,, heheheheee,,,

pada saat melihat teman-teman blogger menulis di biku tamu CBOX saya kok bisa bergerak-gerak,, sedikit rasa penasaran dan mencoba dengan kode HTML,, tapi ternyata salah,, hehehe,, jadi malu nih sob,, maklumlah masih pemula,, dan akhirnya saya cari di mbah google dan akhinya ketemu juga nih,, setelah saya coba ternyata berhasil juga,, belajar dari kesalahan memang sangat bermanfaat walaupun agak malu juga ya sob,,

Nah bagi sobat yang belum tahu bagaimana caranya biar tidak salah kayak saya disini saya berbagi sedikit ilmu. Diantaranya membuat tulisan berjalan, Berwarna, bergaris bawah, tebal dan lain sebagainya.

Nah langsung saja kita bahas, untuk membuat tulisan pada CBOX lebih terlihat menarik silahkan ikuti langkah langkah berikut :

1. Membuat Teks Berjalan di CBOX
   Apit kata-kata yang ingin dibuat berjalan dengan [scroll] dan [/scroll]
   Contoh: [scroll] Salam kenal [/scroll] hasilnya

Salam kenal

2. Membuat Teks Berukuran Besar
   Apit kata-kata yang ingin dicetak besar dengan [big] dan [/big]
   Contoh: [big] Salam kenal [/big] hasilnya adalah Salam kenal

3. Membuat Teks Miring
   Apit kata-kata yang ingin dicetak miring dengan [i] dan [/i]
   Contoh: [i] Salam kenal [/i] hasilnya Salam kenal

4. Membuat Teks Tebal
   Apit kata-kata yang ingin dicetak tebal dengan [b] dan [/b]
   Contoh: [b] Salam kenal [/b] hasilnya adalah Salam kenal

5. Membuat Teks Bergaris Bawah
   Apit kata-kata yang ingin digaris bawah dengan [u] dan [/u]
   Contoh: [u ]Salam kenal [/u] hasilnya adalah Salam kenal

6. Membuat Teks Bergaris Tengah
   Apit kata-kata yang ingin di garis tengah atau dicoret dengan [s] dan [/s]
   Contoh: [s] Salam kenal [/s] hasilnya adalah Salam kenal

7. Membuat Tulisan Berukuran Kecil
   Apit kata-kata yang ingin dicetak kecil dengan [small] dan [/small]
   Contoh: [small] Salam kenal [/small] dan hasilnya adalah Salam kenal

8. Cara Membuat Tulisan Rata Tengah (Center)
   Apit kata-kata yang ingin dibuat rata tengah dengan [center] dan [/center]
   Contoh: [center] Salam kenal [/center]

9. Membuat Tulisan Berwarna
   Apit kata-kata yang ingin diberi warna dengan [color=warna] dan [/color]
   Contoh: [color=red] Salam kenal [/color]  maka hasilnya adalah Salam kenal

10. Cara Membuat Teks yang Ber Link
   Apit kata-kata yang ingin diberi link dengan [url=alamaURL] dan [/url]
   Contoh: [url=http://zuazz.blogspot.com/] Zuaz'Z [/url] maka hasilnya adalah Zuaz'Z

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog

Kemarin ada salah satu teman blogger yang bertanya kepada saya lewat komentar spam yang tidak tampil diposting tentang Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.

Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. Tutorial ini saya dapatkan dari hackerzpro.blogspot.com nah silakan anda ikuti cara-cara berikut ini,,

Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>

<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>

<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">

Masukkan tulisanmu di sini

</div></div></div>

Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:

Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.

Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.

Klik show untuk melihat

Masukkan tulisanmu di sini

Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.

Cara Membuat Text Area Dengan Tombol Pilih Semua

Text area merupakan salah satu hal penting untuk meperingkas sebuah posting dalam blog, apalagi text kode yang begitu panjang apabila tidak dimuat dalam text area maka akan memanjang kebawah, dan pastinya membuat susah pengunjung blog untuk mecopy text tersebut.

Kali ini saya sedikit memberikan tips untuk sobat blogger yang ingin membuat text area yang keren,, heheheheeeee,,,

Nah bagi sobat yang berminat untuk membuat text area dengan tombol pilih semua / Select all silakan copy paste code dibawah ini:

<code><span ><div><form name="copy"><div align="center"><input value="Pilih Semua" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"> </div><div align="center"></div><p align="center"><textarea rows="3" cols="20" style="border: 8px inset rgb(104, 104, 204); padding: 0pt 1px; background: rgb(100, 100, 200) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(255, 255, 255); line-height: 1.5em; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;" name="txt" wrap="VIRTUAL">

Masukan text / kode sobat di sini

</textarea></form></div></span></code>

Keterangan:

• Text warna hijau:  bisa sobat ganti dengan select all / block all / tandai semua dan lain-lain sesuai selera sobat.
• Text warna kuning:  adalah ketinggian text area tersebut, silakan sobat sesuaikan sendiri.
• Text warna Biru:  adalah panjang kolom text area tersebut, silakan sobat sesuaikan sendiri.
• text warna merah:  merupakan tempat untuk kode yang inggin sobat taruh di dalam text area tersebut.

Abaikan warna lainya selain warna yang disebutkan di atas.

Berikut ini saya berikan contoh text area pilih semua / select all:

Silakan sobat coba klik tombol block all

Selamat mencoba dan semoga bermanfaat ya sob,,!!

cara simple pasang tombol like FB di blog

Kode Iklan anda yang ingin ada di sebelah kiri disini

Kode Iklan anda yang ingin ada di sebelah kanan disini

hallo sobat-sobat bloger ketemu lagi dengan saya.rajacolek dan princeess farah klo kemaren saya berbagi  cara tercepat pasang tombol share fb  kali ini saya berbagi tutorial pasang like button fb  .
like facebook di blog sangat berguna untuk para pengunjung agar dapat ikut berpartisipasi untuk memberikan
respon pada postingan yang sedang dibaca,

pertama-tama yang harus dipikirkan adalah.
dimana tombol like facebook akan di tempatkan.
hal lainnya yaitu apakah tombol tersebut akan muncul terus baik di halaman depan ( homepage) ataupun didalam postingan? atau hanya ingin muncul dihalaman depan saja (homepage)? atau mungkin anda hanya ingin tombol tersebut hanya muncul didalam posting saja?
nah ini langkah-langkah cara simple pasang tombol like FB di blog
tutorial kali ini saya akan terapkan di bloger karena blog saya mengunakan bloger..(untuk wordpress langkah-langkahnya tidak jauh berbeda)

1.login ke bloger anda masing-masing(jangan sampai pakek blog orang lain :p)
2.buka menu dasbor/rancangan/edit HTML.jangan download dulu template yang sekerng sobat pakai
  untuk menjaga-jaga ada kesalahan ,sobat bisa upload template seperti semula,
centang kotak kecil Expand Template Widget
3 .cari kode berikut  
                                             <data:post.body/>(kode,no3)
untuk mempermudah pencarian kode tersebut tekan control+F /masukkan kodenya.



4. copy paste kode dibawah ini(kode.no.4)
----------------------------------------------------------------------------------------------------------------------
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhttp://cara2daninfo.blogspot.com&amp;send=true&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
----------------------------------------------------------------------------------------------------------------------
catatan:
A.jika sobat ingin tombol like ada di posisi atas postingan taruh kode no.4 diatas kode no.3
B.jika sobat ingin tombol like  berada dibawah postingan taruh kode no.4 di bawah kode no.3

kemudian klik pratinjau dan lihat hasilnya.
jika hasilnya ok/sesuai dengan yang sobat ingainkan baru save/simpan template.
cara simple pasang tombol like FB di blog sudah selesai....mudah bukan?
panduan singkat ini moga panduan singkat ini bermamfaat buat sobat yang membutuhkan pasang widget facebook di blog
thankssss

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

Berbagi pengalaman pribadi membuat efek lipatan kertas pada ujung kanan blog yang menurut saya agak lumayan bikin pusing sob, maklumlah masih pemula,, heheheheee,,,,

Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog KTB , [sedikit pamer, heheheheee,, ]

bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog seperti blog KTB [tenag aja yang saya bagi tidak ada foto jelek saya kok,, heheheheee,,, ] silakan ikuti lankah-langkah berikut ini ya sobat:

1. Silahkan Login ke akun blogger anda.

2. Lalu masuk ke design Template, klik Edit HTML

3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>

5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode  </body>

<script type='text/javascript'>var tujuan =&#39;http://Alamat Url Feeds Sobat&#39;</script>

<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>

6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)

Keterangan:

• Kode warna hijau: ganti dengan URL Feeds sobat
• Kode warna pink: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.

Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.

Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.  

1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.

2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan url gambar sobat:

http://petir-project.googlecode.com/files/fedkcl.png 

(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)

3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah url berikut dengan url gambar sobat:

http://petir-project.googlecode.com/files/feed.png

4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti URL http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload sobat tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.

Selamat mencoba ya sobat,,

cara pasang emotion di kotak komentar blogger

ok buat para pemula silahkan perhatikan caranya:

1.login blog masing masing

2.klik menu design-layout-dan pilih edit HTML.

3.centang kotak kecil EXPAND WIDGED TEMPALTE. dan jangn lupa dowload template lengkap.

4.cari kode </body> lalu copy kode dibawah ini dan paste tepat di atas kode  </body>

<script src='http://my-project-teksemotion.googlecode.com/files/yemoticon.js.txt' type='text/javascript'/>

5.masih di edit HTML .cari kode berikut:

<p class='comment-footer'>    (jika emotion ingin muncul di bawah kotak komenter)

<b:include data='post' name='comment-form'/>(jika ingin emotion muncul diatas kotak komentar)

6.silahkan copy kode dibawah ini dan paste dibawah kode yg berwana biru jika ingin emotion muncul dibawah kotak komentar.
jika sobat ingin emotion muncul diatas kotak komentar silahkan paste di atas kode yang berwarna merah

    <b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
    :))
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
    :)]
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
    ;))
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
    ;;)
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
    :D
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
    ;)
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
    :p
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
    :((
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
    :)
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
    :(
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
    :X
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
    =((
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
    :-o
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
    :-/
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
    :-*
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
    :|
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
    8-}
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
    ~x(
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
    :-t
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
    b-(
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
    :-L
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
    x(
    <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
    =))</b>

7.simpan template dan lihat hasilnya.(jika masih ragu silahkan klik pratinjau dulu)sudah selesai.....selamat mencoba  moga bermamfaat.

Cara Mematikan Fungsi Klik Kanan Dan Text Selection Pada Blog

Setelah sekian lama tidak posting dikarenakan masih banyak urusan yang harus saya selesaikan, dan kali ini saya hanya sedikit share dari postingan blog sahabat yaitu tentang cara mencegah copy paste pada blog, kalau menurut saya sih hal ini tidak terlalu penting, merupakan satu keuntungan tersendiri bila artikel kita di copas (copy paste), apa lagi bila sobat yang copas mau mencantumkan sumber dari artikel tersebut, bisa menambah back link kan, merupakan keuntungan tersendirikan.

Namun bagi sobat yang merasa bahwa artikel sobat sangat penting dan tidak rela untuk di copy paste, mungkin hal ini cukup berguna untuk dilakukan. akan tetapi cara tersebut tidak melindungi content blog sobat sepenuhnya, stidaknya cukup membuat orang yang berniat copas sedikit bingung apabila dia seorang newbie, karena sebenarnya ada jalan lain untuk bisa meng-copas artikel blog sekalipun sudah dilindungi dengan script anti copas.

Tanpa panjang lebar, kali ini untuk melindungi blog di blogger (blogspot) dari dari copy paste adalah dengan mendisable right click, atau lebih dikenal dengan mematikan klik kanan. Berikut tutorial cara mematikan klik kanan pada blogspot.

• Login terlebih dahulu ke Blogger.com
• Dari halaman Dashboard, silahkan Sobat menuju ke Tata Letak > Edit HTML
• Lalu cari kode <body> atau <body (dengan bantuan tekan Ctrl+F atau F3)
• Tambahkan kode dibawah ini ke dalam kode <body> atau <body tadi, atau bisa juga di ganti sekalian.

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>

Sobat juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.

Berikut penjelasan dari kode-kode diatas:

oncontextmenu='return false' (untuk mematikan klik kanan mouse)
onmousedown='return false' (untuk mematikan klik blok ke bawah)
onselectstart='return false' (untuk mematikan seleksi blok)
onkeypress='return false' (untuk mematikan tombol keyboard)

Jika sudah, Simpan Template blog Sobat.

Mohon maaf apabila tutorial sebelumnya tidak berhasil karena belum saya coba. untuk demonya silakan sobat lihat di sini DEMO.

Cara Lengkap Membuat Menu TAB View Pada Blog

Loading yang ringan pada blog merupakan salah satu cara untuk membuat orang senang berkunjung di blog kita, apalagi ditambah artikel-artikel yang keren, pastinya pengunjung akan membanjiri blog sobat. Cara agar loading blog kita cepat (tidak lemoet) adalah dengan memperingkas tampilan dan tidak terlalu banyak widget, salah satu caranya adalah dengan membuat widget Menu TAB View.

Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

1. Silakan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */ div.Tabateonsoft div.TFs {height: 30px; overflow: hidden;} div.Tabateonsoft div.TFs a {float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em; background:#f0f0f0; color: #333; border-top:1px solid #CCCCCC; border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #cccccc; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 0px; } div.Tabateonsoft div.TFs a:hover { background: #E8E8E8; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999;} div.Tabateonsoft div.TFs a.Active { background: #333; color: #000000; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999; font-weight:bold; color: #ffffff;} div.Tabateonsoft div.Pages { clear: both; overflow: hidden; height:333px; border:1px solid #EFF0F1; padding:0;background: #222222; -moz-border-radius:5px;} div.Tabateonsoft div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; } div.Tabateonsoft div.Pages div.Page div.floor { font-size:12px;padding: 3px 5px; text-align:left;}

5. Letakkan kode di bawah ini di atas kode </head>

<script src='http://zuazz.googlecode.com/files/ateonsoft_tab.js' type='text/javascript'/>

6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silakan letakkan kode di bawah ini di dalam widget HTML/JavaScript

<form action="tabateonsoft.html" method="get"> <div class="Tabateonsoft" id="Tabateonsoft"> <div class="TFs"> <a>tab1</a> <a>tab2</a> <a>tab3</a> <a>tab4</a> </div> <div class="Pages"> <div class="Page"> <!-- Tab --> <div class="floor"> Disini letakkan kode untuk tab 1 anda </div> </div> <!-- end Tab --> <div class="Page"> <!-- Tab --> Disini letakkan kode untuk tab 2 anda </div> <!-- end Tab --> <div class="Page"> <!-- Tab --> <div class="floor"> Disini letakkan kode untuk tab 3 anda </div> </div> <!-- end Tab --> <div class="Page"> <!-- Tab --> <div class="floor"> Disini letakkan kode untuk tab 4 anda </div> </div> <!-- end Tab --> </div> </div> </form> <script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Setelah itu simpan dan lihat hasilnya.

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Cursor

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai-sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki tampilan yang menarik akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Cukup demikian basa-basinya [heheheheheee.. ] mari kita menuju ke pokok pembahasan.

Kali ini saya sedikit berbagi tentang Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Cursor, untuk demonya coba sobat arahkan cursor ke gambar Naruto pada posting saya yang satunya di Kumpulan Trick Blog, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

<style>#denzuaz img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="denzuaz"> sebelum URL gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="denzuaz">
<a href="http://zuazz.blogspot.com/"><img src="http://4.bp.blogspot.com/-CwEirHz3j3g/T3-qdL1Q4pI/AAAAAAAAAu0/yoWox29izCE/s200/naruto+dont+copy.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
3. Setelah semuanya selesai klik Publikasikan dan lihat hasilnya. 

Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Cursor".

Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas:

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

Klik show untuk melihat

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(http://lh5.ggpht.com/_yF0--u7KSSI/TKgzluISmnI/AAAAAAAAAxE/PC55GBEXvig/kembangApi.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Klik save / simpan.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://lh4.ggpht.com/_1j80TgNqd_8/TS3MlHxaygI/AAAAAAAABVo/P36anu_ToeA/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Demikianlah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas. Semoga bermanfaat bagi sobat semua.

cara menambah elemen diatas header

Kode Iklan anda yang ingin ada di sebelah kiri disini

Kode Iklan anda yang ingin ada di sebelah kanan disini

menambah elemen /menu tambah gadged diatas header biasanya banyak para pebisnis online,toko online,ptc,ppc dll..untuk digunakan untuk memasang leadingpage bisnis mereka.

dan cara memasangnya pun sangat mudah dan cepat dan yang pasti tidak ribet dunk....

bagi sobat yang ingin memasang elemen baru di atas header silahkan ikuti tutorial blogger yang singkat ini

langkah pertama  seperti biasa login dulu klik design->edit html.

lalu cari kode seperti ini    ]]></b:skin>

 ---lalu copy paste kode dibawah ini  tepat di atas  kode  ]]></b:skin>

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;} 

---lalu cari kode seprti ini     <div id='header-wrapper'>  dan paste kode
dibawah ini di atas kode itu.

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

--- silahkan simpan template  dan lihat hasilnya.

silahkan di tes hasil kerja anda dengan pergi ke->design->tambah elemen->add a gadged.
silahkan masukkan sesuatu misalnya pilih javascript/html  lalu coba di isi dengan widget atau semacamnya.
jika berhasil   selamat  kerja anda sudah finish  dan selamat mnggunakan elemen baru anda....

Selamat mencoba !

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header yang telah di request oleh sahaba-sahabat Zuaz'Z Creator pada halaman Facebook.

Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 

Untuk demonya silakan sobat blogger klik link berikut ini DEMO. Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

Klik show untuk melihat

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Selanjutnya sobat blogger cari kode berikut:

• <header>  : untuk menempatkan menu di atas nama blog
• </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

Klik show untuk melihat

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:

1. Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.

Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.

cara pasang auto readmore tampil dengan gambar

mungkin sobat bingung yaaa readmore tampil dengan gambar?? hehehe habis bingung mau bikin judulnya

hehe...itu maksudnya   postingan yang tampil di homepage ketika readmore otomatis itu berfungsi akan menampilkan gambar disetiap postingan kecuali postingan sobat tidak berisi gambar.

readmore otomatis untuk blogger ini cukup praktis dan mudah .sekali seting aja /tidak usah melakukan secara manual lagi untuk memotong postingan yang akan ditampilkan.

mari kita mulai tutorial blogger cara pasang auto readmore ini.

1-> seperti biasa login dan buka menu design-> edit html

2- cari kode berikut     </head>  

3-copy kode dibawah ini dan paste di atas kode yang tadi (kode no 3)

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

angka angka yang saya beri warna merah bisa sobat ganti sesuai selera.

setelah itu simpan template------

4-kembali ke edit html lagi  (kali ini anda harus mencentang kotak kecil dismping expand widget template)

5--->kemudian  cari kode seperti berikut     <data:post.body/>

klo sudah ketemu ganti kode <data:post.body/>  dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE rajacolek- <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

yang terahir simpan template dan lihat hasilnya.
selamat mencoba semoga tutorial blogger ini bermamfaat...
makasih...

Cara memasang Facebook Likebox Fload

nah dalam kesempatan ini kita akan membahas cara pasang float facebook likebox saja.

silahkan ikuti langkah singkat berikut:

1=> login blogger  dan masuk ke dashboard
2=> klik design | page element | add a gadget
3=> copy paste kode dibawah ini

-----------------------------------------------------------------------------------------------------------------------

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}

</style><div class="floatinglikebox" style=""><div>DISINI KODE FACEBOOK LIKEBOX

<span><a href="http://tabur-iklan.blogspot.com/" target="_blank"> facebook</a></span></div></div>

 -----------------------------------------------------------------------------------------------------------------------

keterangan:

ganti teks berwarna merah dengan kode html like facebook anda
4=>  simpan dan lihat hasilnya..

Semoga bermanfat terimakasih

Cara Membuat Chat YM Pingbox Pada Blog

Salam Blogger, Kali ini saya akan berbagi tentang bagaimana Cara Membuat Chat YM Pingbox Pada Blog yang telah direquest salah satu sobat Blogger saat chat dengan saya.

Untuk melengkapi cara berkomunikasi langsung pada pengunjung blog kita haruslah menyediakan sebuah media misalnya seperti chatbox ataupun chat YM Pingbox agar pengunjung lebih leluasa untuk bertanya pada kita.

Sebab tidak semua pengunjung mau bertanya lewat komentar pada blog, mungkin disebabkan malu ataupun lainya, dan tidak semua pemilik blog pun mau menjawab pertanyaan si pengunjung tersebut, hal ini saya alami sendiri dulu sewaktu pertama merambah dunia blogger, pengalaman pahit [heheheeee,,, ].

Baiklah cukup sekian kita basa-basinya, bagi sobat bloger yang berminat untuk memasang YM Pingbox Silakan ikuti langkah-langkah berikut ini:

1. Sobat Klik link berikut ini  Pingbox
2. Klik buat pingbox seperti gambar di bawah ini

3. Sobat atur tampilan pingbox seperti gambar di bawah:

Keterangan nomor pada Gambar:

1. Untuk mengatur tampilan tema pingbox
2. Untuk mengatur ukuran text dan warna text pada saat chat
3. Untuk mengatur nama tampilan admin pada pingbox
4. Text yg tampil saat admin online
5. Text yang tampil saat admin ofline
6. Nama chat pingbox

Dari keterangan di atas sobat sesuaikan sendiri tampilannya sesuai selera sobat.


4. Mengatur pingbox akan dipasang dimana, lihat keterangan gambar berikut:

Keterangan nomor pada gambar:

1. Pilih apa jenis blog sobat Blogger atau Wordpres
2. Atur panjang dan lebar pingbox
3. Copy script yang tampil pada kolom tersebut untuk dipasang pada blog sobat.

Dari keterangan di atas sobat sesuaikan sendiri tampilannya sesuai selera sobat dan download aplikasi yahoo! Messengernya.

5. Cara pemasangan.

• Login pada akun blogger sobat
• Klik Tata Letak
• Klik Add Widget / Tambah Gatget
• Pilih HTML/JavaScript
• Paste code yang tampil pada kolom 3 pada gambar di atas ke dalam HTML/JavaScript
• Klik Save / Simpan dan lihat hasilnya.

Demikian semoga bermanfaat sampai jumpa...

Cara Membuat Fans Page Facebook Di Blog

Salam blogger, Melengkapi permintaan dari salah satu sahabat Zuaz'Z Creator on Facebook yang meminta saya untuk memposting cara untuk menghubungkan blog dan halaman facebook yang lebih kita kenal sebagai Facebook page/Like Box. Facebook page sudah sangat lazim digunakan di blog/website, mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan. 

Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Fans Page Facebook di blog/website merupakan hal yang sangat dianjurkan untuk blog/website Sobat.

Cara Membuat Fans Page Facebook di Blog/Website
1. Langkah pertama Sobat login terlebih dahulu di account Facebook Sobat.
2. Kemudian buka halaman ini:  Facebook Page
3. Pilih/klik opsi Merek atau Produk

4. Pilih opsi no.1"website" dan isikan no.2"nama Page" sesuai dengan yang diinginkan. centang "Persetujuan" dan klik "Mulai", seperti contoh gambar berikut:

5. Selanjutnya Sobat akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.

Penting: Sebelum menuju langkah berikutnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.

Contoh url-nya: http://www.facebook.com/pages/K-T-B/300432780037612

6. Berikutnya sobat pilih menu nomer 5 dan klik "add like box" atau bisa juga buka halaman berikut: Like Box

7. Selanjutnya, isikan spesifikasi seperti gambar berikut:

Setting Facebook Like Box:

1. Facebook Page url: paste url Facebook Page yang di copy tadi

2. Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget pada blog sobat.

3. Height: adalah tinggi like box, sesuaikan juga dengan widget pada blog sobat.

4. Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

5. Show Faces: Centang untuk menampilkan foto profil likers.

6. Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

7. Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

8. Show header: Centang jika ingin menampilkan tulisan header "Temukan kami di Facebook".

Lihat preview tampilan di sebelah kanan form tersebut.

8. Jika settingan yang dibuat sudah beres, klik Get Code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, XFBML dan IFRAME pilih salah satu dan copy kodenya. (Untuk Blogger, disarankan pilih HTML 5).

Copy kedua kode tersebut untuk pemasangan Like Box di blog Sobat.

Cara pemasangan like Box pada Blog:

1. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.
2. Pilih HTML/JavaScript.
3. Masukkan kode yang telah dicopy ke dalam kotak kode HTML/JavaScript.
4. Save/Simpan

.

Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website Sobat dapat dengan mudah meng-klik like pada like box yag telah disediakan.

 

Semoga bisa bermanfaat wassalammualaikum Wr.Wb.

Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

Salam Blogger, Melengkapi permintaan salah satu sahabat Zuaz'Z Creator yang meminta saya menjelaskan tentang cara memasang komentar facebook dan blogger berdampingan.

Mungkin tutorial ini sudah usang dan tidak asing lagi bagi Sobat semua, akan tetapi tutorial yang sudah ada saya coba tidak berhasil pada semua template, dan kemungkinan banyak berhasil pada template premium saja.

Disini saya sedikit mengulas lagi agar tutorial ini berhasil di semua template, karena pada saat saya coba pada blog uji coba saya yang bertemplate standar, tuorial yang lama tidak berhasil, hanya berhasil pada template premium saja, berikut cara yang saya dapatkan dari salah satu blog yang sudah lama bergelut di dunia blogger.

Cara Membuat Komentar Facebook dan blogger Berdampingan Pada semua template: DEMO

1. Login ke account blogger Sobat
2. Klik rancangan lalu klik Edit HTML
3. Download template Sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>


Klik buka untuk melihat kode:
    .comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}


Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.


7. Kemudian Sobat cari kode </head>
   Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>



Klik buka untuk melihat kode:
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FB Sobat disini' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>


Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook Sobat, misalkan https://www.facebook.com/nama Sobat maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika Sobat belum merubah ID Sobat maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890


8. Kemudian cari kode  <div class='comments' id='comments'>


Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>.



Klik buka untuk melihat kode:
    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>


NB: Pada penempatan kode yang ke dua Sobat hapus kode yang berwarna ungu ya: <div class='comments comments-page' id='blogger-comments-page'> apabila kode di bawahnya sama.


Perhatikan angka yang berwarna biru dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Sobat dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Sobat agar kelihatan rapi.


Pada cara di atas yang biasanya menyarankan hanya menempatkan pada kode <div class='comments' id='comments'> yang kedua saja, saat saya coba pada template blog uji coba saya tidak berhasil, jadi harus menempatkan di bawah kedua kode tersebut.


9. Kemudian klik save, dan lihat hasilnya.