Bismillahirrahmanirrohim....

Jumat, 11 Januari 2013

CARA MEMBUAT TEKS TULISAN BERJALAN DI BAWAH BLOG

Sebelumnya ada bertanya tentang cara membuat teks berjalan di bawah Blog atau lebih dikenal dengan namaMarquee Text, Nah kali ini saya akan memberikan tutorialnya. Baiklah tanpa basa-basi berikut ini cara membuat teks berjalan di bawah Blog:

1. Login ke Blogger -> Edit HTML
2. Cari kode ]]></b:skin>
3. Simpan kode berikut ini di atas kode ]]></b:skin>

#running_teks {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
background:#666699;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

4.Kemudian cari lagi kode </body> dan simpan kode berikut di atas kode </body>

<div id="running_teks" style="" width="100%" ><marquee direction="left" scrollamount="2" align="center"><a style="font-size: 20px; color: #FF0000">pasang teks berjalannya disini </a></marquee></div>

5. Save template, Selesai.

Keterangan:

Bottom adalah posisi teks, jika ingin menempatkan teks berjalan di atas blog, cukup mengganti bottom dengan top
Background adalah warna belakang teks, ganti warna sesuai selera anda
Color adalah warna teks, ganti warna sesuai selera anda
Direction="left" adalah arah teks berjalan ke kiri, jika ingin teks berjalan ke kanan, ganti left denganright
Scrollamount adalah tingkat kecepatan teks berjalan, semakin besar nilai scrollamount maka semakin laju teks berjalan
Font-size adalah ukuran teks, ganti sesuai ukuran teks yang diinginkan.

Sekian, semoga bermanfaat.

Sumber:

http://www.mainbom.com/2012/05/cara-membuat-teks-berjalan-di-bawah.html

CARA PASANG TOMBOL TWEET, GOOGLE + DAN LIKE FACEBOOK

Sebelumnya ada teman yang menanyakan cara memasang tombol like di postingan, nah kali ini saya memiliki kesempatan untuk membuat tutorial cara membuat tombol Tweet, Google + dan tombol like Facebook tanpa menggunakan plugin pihak ketiga. Jadi disini kita tidak menggunakan plugin pihak ketiga agar loading blog tidak menjadi berat apabila di tambahkan tombol Tweet, Google + dan tombol Like.

Cara membuat tombol Tweet, Google + dan like tanpa plugin pihak ketiga:
1. Login ke Blogger > Template > Edit HTML
2. Sebelum mengubah kode HTML sebaiknya cadangkan dulu template anda untuk menghindari hal-hal yang tidak diinginkan.
3. Centang Expand Template Widget
4. Cari kode <data:post.body/> jika di Blog anda ada banyak kode seperti itu, pilih kode yang kedua.
5. Simpan kode berikut ini setelah kode <data:post.body/> atau jika anda ingin memasang tombol Tweet, Google + dan tombol like Facebook di atas postingan, simpan kodenya sebelum <data:post.body/>

<div style='float:left;width:80px'>
<a class='twitter-share-button' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style='float:left;padding-left:10px;width:60px'>
<g:plusone size='medium'/>
</div>
<div style='float:left;padding-left:10px;width:90px'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light"' frameborder='0' height='20' scrolling='no' style='border:none;overflow:hidden; '/>
</div>

6. Save template dan lihat hasilnya.

Note:
- Jika tombol Google + tidak muncul, copy kode <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> di atas kode </head>
- Jika tombol Tweet, Google + dan Like tidak ingin ditampilkan di halaman Home atau hanya ingin ditampilkan di halaman postingan saja, cukup tambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode tombol tadi. menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
< Kode tombol Tweet, Google + dan Like... >
</b:if>

Sekian, semoga bermanfaat..

Sumber :

http://www.mainbom.com/2012/05/cara-pasang-tombol-tweet-google-dan.html

CARA MEMBUAT FORM CONTACT US DI BLOG

Dengan adanya halaman Contact Us di blog dapat membuat blog Anda terlihat lebih profesional dan Fitur Contact Us ini merupakan salah satu syarat untuk bisa mendaftar di Google Adsense.

Nah kali ini saya akan memberikan tutorial cara membuat form contact us di Blogger dengan menggunakan pihak ketiga yaitu emailmeform.com.

Langkah membuat Form Contact Us adalah sebagai berikut:
1. Login ke Blogger
2. Buat dua halaman baru di blog anda
- Halaman yang pertama beri judul Contact Us, halaman ini nantinya yang akan disisipkan kode HTML.
- Halaman yang kedua beri judul Contact Confirm kemudian isi dengan: 'Terima kasih telah mengirim e-mail kepada kami'

3. Buka website EmailMeForm.com
4. Klik tulisan "Signup Now For Free"
5. Lalu isi form dengan dari diri Anda. Yakni : Username, password dan email
6. Centang pernyataan "I aggre to EmailMeForm Term of Service"
7. Kemudian, klik Next
8. Akun Anda sudah jadi, sekarang cek email Anda dan dapatkan email verifikasi akun. Ikuti petunjuk pada email, klik link verifikasinya.
9. Selanjutnya klik Add Form

10. Selanjutnya Anda akan diminta untuk mengkostumisasi template Anda. Di bagian ini, anda dapat memodifikasi sesuka hati tampilan seperti apa yang anda inginkan.
11. Pada bagian Confirmation Options, centang pilihan Redirect URL kemudian isi dengan link halaman kedua yang baru dibuat tadi, Jadi pengunjung akan di alihkan ke halaman ini jika telah mengirim email di contact form Anda.

12. Setelah itu klik Save Form
13. Langkah selanjutnya, copy kode HTML ke halaman pertama yang dibuat tadi lalu terbitkan halaman.

14. Sekarang contact form anda sudah jadi, silahkan di coba.

Sumber:

http://www.mainbom.com/2012/05/cara-membuat-form-contact-us-di-blog.html

CARA MEMPERCANTIK CHAT FACEBOOK

Pernah kah Anda merasa bosan atau frustasi dengan fungsi terbatas di chat Facebook? Chat Facebook tidak memberikan pilihan untuk memilih emoticon atau mengubah jenis huruf atau ukuran font. Dan Anda bahkan tidak dapat memindahkan kotak chatting di sekitar layar Anda. Sekarang Saya akan memberikan tips terbaik untuk mengatasi hal itu.

Anda tidak perlu lagi mengingat ratusan nomor pendek untuk emoticon, atau bolak-balik ke situs yang menyediakan kode-kode emoticon Facebook. Disini Anda akan memiliki sebuah tombol dimana Anda bisa langsung memilih salah satu emoticon dan kapan saja Anda dapat menggunakannya. Tidak hanya itu, ukuran font dan kotak chating bisa diubah menjadi lebih besar dan dapat dipindahkan di sekitar layar monitor Anda. Menyenangkan bukan?

Dalam tutorial ini Saya akan menjelaskan cara mempercantik chat Facebook dan membuatnya terlihat lebih keren.

Install Pretty Facebook Chat

Pertama, Anda harus memiliki browser Google Chrome yang terinstall di komputer Anda. Jika belum ada silahkan di Install dulu.
Login ke akun Facebook Anda menggunakan browser Google Chrome
Kemudian buka Google Chrome Webstore dan cari di kotak penelusuran ketik ‘Pretty Facebook Chat’.

Setelah hasilnya muncul, klik tombol 'Add To Chrome' untuk menginstal ekstensi. Instalasi otomatis danhanya memerlukan beberapa detik.

Setelah diinstal, Anda akan melihat ikon merah kecil di address bar di pojok kanan atas, denganpemberitahuan yang menunjukkan bahwa instalasi Anda selesai.

Sekarang buka Facebook Anda. Jika sudah terbuka, refresh halaman dan Anda akan melihat ikon merahkedua di tempat terpisah, di bagian bawah browser sebelah ikon terjemahan Facebook.

Klik ikon merah dan Chat Facebook menjadi modus aktif, Anda dapat mulai chatting dengan siapa pun, dan akan terlihat kotak chatting tidak lagi terpasang di bagian bawah browser. Sekarang Anda dapat memindahkan kotak chat di mana saja dalam browser.

Menggunakan Emoticon, Mengubah Font dan Ukuran Kotak Chat

Nah sekarang langkah selanjutnya adalah cara menggunakan emoticon, mengubah font dan ukuran chat box.

Emoticon

Dari kotak chat, akan ada emoticon tersenyum terlihat di sudut kanan atas kotak, arahkan mouse kesitu dan jendela pop-up akan muncul dengan pilihan emoticon yang dapat dipilih.

Ukuran Font dan Kotak Chat

Di sudut kanan atas browser di dalam address bar ada ikon merah, klik ikon tersebut lalu klik
'Yes. I want unlock Advanced Settings'

Kemudian mulailah mengubah font dan ukuran kotak chat. Anda juga dapat mengontrol bayangan chat box.

Dengan Pretty Facebook Chat, Anda memiliki kontrol atas kotak chat Facebook dan chatting dengan teman-teman akan lebih menyenangkan dengan emoticon untuk dipilih.
Sekian tips kali ini, selamat mencoba..

Sumber :

http://www.mainbom.com/2012/05/cara-mempercantik-chat-facebook.html

CARA PASANG IKLAN DI SEBELAH KIRI ATAU KANAN POSTINGAN

Cara pasang iklan di sebelah kiri atau kanan postingan artikel. Sebagai blogger yang ingin memiliki penghasilan tambahan dari aktifitas blogger di dunia maya biasanya memasang iklan seperti Google Adsense atau iklan PPC lain yang sejenis itu. Untuk menambah intensitas perklik untuk iklan, biasanya beberapa blogger memasang iklannya di sebelah kiri atau kanan postingannya. Seperti yang kita ketahui bahwa dengan memasang iklan di dalam postingan akan meningkatkan peluang klik iklan dibanding dengan memasang iklan dibagian sidebar atau di tempat lain, dan hal ini jelas tidak melanggar aturan.

Nah untuk itu sekarang saya akan memberikan script memasang iklan di kiri atau kanan postingan atau artikel yang kita buat.

Untuk contoh liat gambar di bawah

Cara Pasang Iklan Di Sebelah Kiri Postingan
1. Login ke Blogger => Edit HTML
2. Sebaiknya backup template Anda untuk jaga-jaga
3. Centang Expand Template Widget
4. Cari kode <data:post.body/> apabila Anda menemukan lebih dari satu kode seperti itu, pilih kode yang ke dua.
5. Kemudian pasang kode berikut ini di atas kode <data:post.body/>

<div style='clear: right; float: left; margin-right: 10px'>
<KODE IKLAN DISINI>
</div>

Ganti <KODE IKLAN DISINI> dengan kode iklan anda.
6. Save template dan lihat hasilnya.

Asumsi:
A: Gan, Kenapa iklannya gak muncul?
Q: Parse dulu kode iklannya di sini

A: Gimana kalau mau pasang iklannya disebelah kanan?
Q: Ganti kode <div style='clear: right; float: left; margin-right: 10px'> dengan kode <div style='clear: left; float: right; margin-left: 10px'>

Semoga bermanfaat untuk Anda, see you :) ....

CARA MUDAH MEMASANG DAFTAR ISI ATAU SITEMAP DI BLOGGER

Cara Mudah Memasang Daftar Isi atau Sitemap di Blogger. Sebuah blog membutuhkan Daftar Isi layaknya buku, kalau di Blog biasanya dinamakan Sitemap. Untuk mempermudah pengunjung menjelajahi blog kita sebaiknya kita memasang daftar isi di blog kita. Dengan adanya Daftar Isi pada blog, pengunjung akan dengan mudah menemukan artikel yang mereka cari.Selain itu daftar isi atau sitemap juga mempengaruhi keprofesionalan blog kita, maka dari itu Daftar Isi pada blog sangat diperlukan sekali.

Blog yang sudah profesional biasanya memiliki daftar isi yang lebih detail menampilkan isi seluruh postingannya berdasarkan tahun, bulan, hari, jam, kategori dan jumlah tayang suatu artikel. Nah kali ini saya hanya memberikan tutorial yang simpel saja yaitu daftar isi yang menampilkan seluruh postingan dari yang terlama ke yang terbaru dan diurutkan berdasarkan bulan.

Untuk membuat daftar isi di Blogger caranya sangat mudah, silahkan disimak.
1. Login ke Blogger
2. Klik Laman dan buat Laman baru, beri judul 'Sitemap' atau 'Daftar Isi'

3. Posisi Edit Harus pada mode HTML

4. Copy code dibawah ini ke dalam isi postingan Anda

<script src="http://yourjavascript.com/11022161853/Sitemap.js">
</script>
<script src="http://www.mainbom.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc">
</script>

Ganti www.mainbom.com dengan alamat blog anda.
5. klik Publikasikan dan selesai

CARA MEMBUAT GAMBAR BERJALAN DI BAWAH BLOG

Cara mudah membuat gambar berjalan di bawah blog adalah tutorial kali ini. Setelah membahas tentang cara membuat teks berjalan sekarang kita akan membuat gambar berjalan di bawah blog. Untuk contoh gambar-gambarnya saya sudah menyiapkan di bawah. Jika ingin lebih kreatif silahkan membuat atau mencari gambar sendiri.

Cara Membuat Gambar Berjalan di Bawah Blog:
1. Login ke Blogger -> Template -> Edit HTML
2. Cari kode ]]></b:skin>
3. Simpan kode berikut ini di atas kode ]]></b:skin>

#running_img {
position:fixed; bottom:0px; right:0px; clip:inherit; width:100%;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth); }

4.Kemudian cari kode </body> dan pasang kode di bawah ini tepat di atas kode </body>

<div id='running_img' width='100%'><marquee onmouseover='this.stop()' onmouseout='this.start()' align='center' direction='left' scrollamount='5'><img src='URL GAMBAR'/></marquee></div>

Ganti URL GAMBAR dengan link gambar anda misalnya https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7MwySFgLK-0qpxHGAc0QkcTqPOuYoKL5QCI6oLOHTrD7ZPzOCBjCp9Dv9o8SRdd-gT0xILD0TJQ6IRms-m_-rCWqzPg-ifj1wXhi43BMLvJx8M_Qv60ihi21IZPQ9vuEpx3T832z-ln9/s1600/Walk1.gif
5. Simpan Template dan lihat hasilnya.

Keterangan:

Direction='left' adalah arah gambar berjalan ke kiri. Jika ingin gambar berjalan ke kanan, ganti left dengan right
Scrollamount adalah tingkat kecepatan gambar berjalan, semakin besar nilai scrollamount maka semakin laju gambar berjalan

Berikut saya sertakan contoh gambar

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif11fYkcjGnKHmviwP8F3f7t1ozyBCBRJnZbRk6EnI8rIjzZpa5T7lju-kWVm4PvOHf8Wwb2BTegkPG3kTe105LiMaWU9S9g-wjIF1hYJFUIoOFkDj5nzPqXm4OwvjVbTavjWAd3FiAt5R/s1600/cooltext799652167.png

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIlmMEOirxB_MWksB0StR5sx03mi4YaTL5GF5az23TpKbZlPgVc3TXFQRSqFLAK4XZbVnImE5tN7E0ZuoFeguPO6qOBQgnnQ5I-g0Ht2J9ifSWfhQYjmMAVY-yjbUkfMR_8Zsyw-xOkE65/s1600/Run.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdtHSlK0SMNyW6_13sF1AxqAy0tPS5YEL7qONjX82wRvATbGpm-ysEBU8ZVmkLatKb5Qj31G7o3fgesaZEpk_qVui17bb26fn1Gcx01zmqPEyFXVitW5hDwnUUC8561P0qu2SZLkqrrMGB/s1600/Run2.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7MwySFgLK-0qpxHGAc0QkcTqPOuYoKL5QCI6oLOHTrD7ZPzOCBjCp9Dv9o8SRdd-gT0xILD0TJQ6IRms-m_-rCWqzPg-ifj1wXhi43BMLvJx8M_Qv60ihi21IZPQ9vuEpx3T832z-ln9/s1600/Walk1.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9h9N7bKAVpsjExKbB0pdUAgio4523dnyEeKq2-Ky87WsopPHRNnpd0fJtY-nx-0w8x2PtVkOxOZgetzjq6ZJo9G2quxW5FF6hl37YvWlA-qOoZMMWgLHkI0IyveLdWaCBQKcztSH3Tkr/s1600/Walk2.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhaiKRG0-D5Whzs2ySjGJ4uMjTlWGMMgqCYJNXkuJdvm7lh0rW7gEkNEmuwsPnhAwkUbjiwDOidW3uRoszsZUE2tHkGvEDgPGj0vGmgu37sAsM-vqec7i9PO5HpvQV4R1K8dtIhSP8ru0/s1600/Walk3.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsm9pskUUMovlfXWHSMspELIkG7L5p07jRR-nroWln9UXiLSWXUjaoK5OIXrPcQnQGC1ibKI5T4I-OCPe9ssH1C6V9w1GhSjgfR3-_7MdsfuJ9NLYh79RKyc2Ic8_UjA8s81JTsIDo8-ww/s1600/Fly.gif