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/AVvXsEgWm8GLCXfLoCzMHENb95qSc7xtvDRQcuIBQBsww6pDVEikY0fQC8u-nu3X6BehxATvmRpWcmvfMcMEmBcgG3NTXQNui4tKvB06bb3PdAvXS_y4layUNeyE7Gg_Hu891Kep_XCYt57074I/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/AVvXsEjv7lXDXeEIpzTJiklz6HzIQyfEOGllUDO_Ku4sWNOjMF-ZCJp2K_Oag01zArDQVpiDSGuw1Re3DITAVRYFtJOfxWctXZbl5NjDm-l6mroWj8X9fuO7bpuTruGzv4sREyvVYW5b8XcuQUI/s1600/cooltext799652167.png

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4O_e1E7DQ_CjH1Yvlji7schya1RyuJFZUII4mWsvP1fAL6jw73EvfFM_SoAzjV-8nESqUUvEE_9H1Hyo2BkKxvVkvi53hwdGaAAaiJwZWRaa14Gj2_dVRHvsPKxKr2qeBop-v93e_VH0/s1600/Run.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIN6oCKdRiCgn-puwCogARCHllw4SAKOh7WDscLwuo69sMp43unH7Dubg2viRhVCOGEv2jWBmnSNj82QSb5zZGD39DtqeAhezH7pb-RrHBXBZNgvndn1aFRbKf7mgoDFHLkMH_Oq5oI3g/s1600/Run2.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWm8GLCXfLoCzMHENb95qSc7xtvDRQcuIBQBsww6pDVEikY0fQC8u-nu3X6BehxATvmRpWcmvfMcMEmBcgG3NTXQNui4tKvB06bb3PdAvXS_y4layUNeyE7Gg_Hu891Kep_XCYt57074I/s1600/Walk1.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgWQr6fJdIP7ietf-2vOWUmFAOvdiqTVYxr5-kNNR1ZnVVa1A-yET0PpFChK3Lc42gfPWe-VQZCcsZW6XILXMXKGj_RIjLIuR59ztpUV2MOT4By7GUsUHWZN9_5hBIMpKx2EGG4aYvVHs/s1600/Walk2.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijevXJE_G-kaJzDVXB_EmcfL5YR5q9c8f-2_uX1NitDslrWdAGep3I7AL6KPtO9bkfe0XiI0-h0Uek_-UEIe8EskyerQIWbVPYItUpv9w44SbfK5u02NWKuqn5m3iZPOoNenhhGRGnsB0/s1600/Walk3.gif

URL Gambar: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPCzz5URLdO8nNiwQXbTQEswvTCaEXPLMFm5Koz_dHwqVIsqBVgRfJEoTfH_BQzkqh51_VqRT9TpZhf04tacxSJaG-eYuJetmC7FIWea6uWxHnlfFUHysBhYUm2gWM8zcOvYs7GRAs-c/s1600/Fly.gif

Read More

Cara Membuat Tabel Keren Seperti Tabel Google

Kali ini saya akan share tentang cara membuat tabel saat posting di Blogger seperti tabel yang dimiliki oleh Google Support. Membuat tabel keren ini menggunakan dua source kode, yaitu CSS dan HTML. Dimana kode CSS akan disisipkan pada template blogger, sedangkan kode HTML yang akan disisipkan pada postingan Blog kita. Kode CSS dan HTML ini murni saya dapatkan dari halaman Google Support. So, tanpa panjang lebar mari kita simak cara membuat tabel mirip tabel yang dimiliki oleh Google.com.

Tahap Pertama:

1. Login ke Blogger > Template > Edit HTML
2. Jangan lupa centang "Expand Template Widget"
3. Cari kode ]]></b:skin> lalu sisipkan kode CSS berikut ini tepat di atas ]]></b:skin>

<!-- Nice Table Mainbom.com-->
table th {
    padding-top: 7px;
    text-align: left;
}
.nice-table {
    border-collapse: collapse;
    border-spacing: 0;
}
.nice-table tr:first-child th {
    border-top: 0 none;
}
.nice-table th:first-child {
    border-left: 0 none;
}
.nice-table tr:first-child th:last-child {
    border-right-color: #5C6785;
}
.nice-table th {
    background-color: #5C6785;
    color: white;
    font-weight: bold;
}
.nice-table th, .nice-table td {
    border: 1px solid #EBEBEB;
    padding: 3px 10px;
}
.nice-table td {
    background-color: #E6E6E6;
    border-color: #E5E5E5 #CCCCCC #E5E5E5 #E5E5E5;
    color: #444444;
}
.nice-table td:last-child {
    border-right-color: #E5E5E5;
}
.nice-table tr:nth-of-type(2n) td {
    background-color: #FFFFFF;
    border-right-color: #E5E5E5;
}
.nice-table.spaced-table td, .nice-table.spaced-table th {
    padding: 10px;
}
.nice-table.wide {
    width: 95%;
}
.nice-table.narrow {
    width: 75%;
}
.nice-table.narrower {
    width: 50%;
}
.nice-table.narrowest {
    width: 35%;
}
<!-- Nice Table Mainbom.com-->

4. Klik Simpan template

Tahap Kedua:

Tahap kedua adalah saat anda membuat postingan Blogger yang akan menggunakan tabel, pastikan edit entri pada mode HTML bukan "Compose". Untuk membuat tabelnya silahkan ikuti contoh kode di bawah ini

<table class="nice-table" width="100%" ><tbody>
<tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr>
<tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> <td>kolom 3 baris 1</td> </tr>
<tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> <td>kolom 3 baris 2</td> </tr>
<tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> <td>kolom 3 baris 3</td> </tr>
<tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> <td>kolom 3 baris 4</td> </tr>
</tbody> </table>

Ini adalah contoh tabel dengan 3 kolom dan 4 baris

Header 1	Header 2	Header 3
kolom 1 baris 1	kolom 2 baris 1	kolom 3 baris 1
kolom 1 baris 2	kolom 2 baris 2	kolom 3 baris 2
kolom 1 baris 3	kolom 2 baris 3	kolom 3 baris 3
kolom 1 baris 4	kolom 2 baris 4	kolom 3 baris 4

Catatan:

• Jika ingin menambah atau mengurangi jumlah kolom dan baris, silahkan mengedit dengan memperhatikan kode <td> dan <tr>
• Disetiap kolom akan ada kode <td> dan </td>
• Disetiap baris akan ada kode <tr> dan </tr>
• "Tahap Pertama" cukup dilakukan sekali saja, dan "Tahap Kedua" dilakukan setiap membuat tabel
• Ada pertanyaan silahkan komentar.

Untuk yang ingin Copas, mohon link sumbernya :D

Read More

Cara Ganti Domain Blogspot Ke Domain Sendiri / Custom Domain untuk Blogspot Blogger Terbaru

Mengganti domain Blogspot ke domain sendiri atau custom nama domain pada blogspot telah mengalami perubahan, yaitu kita diharuskan untuk memverifikasi otoritas (kepemilikan) nama domain dengan menggunakan kode khusus (Token)yang diberikan oleh Blogger. Jika Anda membeli nama domain melalui Blogger, tidak ada masalah dalam pengaturan itu karena Blogger secara otomatis mengkonfigurasi CNAME. Namun jika Anda membeli nama domain secara terpisah, Anda harus secara manual mengkonfigurasinya. Pada posting kali ini saya akan menjelaskan kepada Anda bagaimana cara seting custom nama domain di Blogger.com.

Untuk custom domain pada blogspot, Anda harus mengikuti 3 langkah utama, yaitu:
1. Menambahkan custom domain di Blogger
2. Mengubah pengaturan DNS (Domain Name System)
3. Update Pengaturan Blogger

Langkah 1: Menambahkan custom domain di Blogger
1. Login ke Blogger.com
2. Pilih blog yang akan menggunakan nama domain baru
3. Pergi ke Setelan > Dasar
4. Pada bagian "Penerbitan" klik "Tambahkan domain khusus"
5. Sekarang pada bagian "Setelan lanjutan" ketik URL nama domain baru Anda menggunakan awalan "www"
6. Klik "Simpan". Kemudian blogger akan menampilkan error ini "Kami tidak dapat memverifikasi otoritas Anda untuk domain ini. Kesalahan 13." atau "We have not been able to verify your authority to this domain. Error 13. Please follow the settings instructions."

7. Perhatikan dua kode yang disorot pada gambar di atas. Itu adalah Token kepemilikan domain Anda yang nantinya akan digunakan untuk verifikasi kepemilikan domain.

Langkah 2: Mengubah pengaturan DNS (Domain Name System)
1. Login ke situs web yang mendaftarkan nama domain Anda.
2. Cari pengaturan DNS Record (DNS Settings) dan klik edit.
3. Tambahkan dua CNAME berikut:
CNAME Pertama:
Untuk Host Name, Name, Label atau Host, masukkan "www" tanpa tanda kutip dan
Untuk Address, Destination, Target atau Points, masukkan "ghs.google.com" tanpa tanda kutip.
CNAME Kedua (sebagai verifikasi kepemilikan domain):
Untuk Host Name, Name, Label atau Host, masukkan token kode 1 yg muncul pada halaman error tadi, contoh: "WPBSRNQD7FGO"
Untuk Address, Destination, Target atau Points, masukkan token kode 2, contoh: "gv-HXCJAL6AOE43C6T5LSUVVUN5TUYN5JG7674HPLWO5MKBSVHQTZXA.domainverify.googlehosted.com"
4. Sekarang tambahkan A-records. jika anda sudah memiliki A-Record, silahkan di edit saja. Jika A-Record belum ada, silahkan tambahkan 4 alamat IP yang mengarah ke Google berikut ini:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Untuk "Host Name" masukan nama domain Anda tanpa "www" atau dikosongin aja. Contohnya: example.com. Dan hasilnya seperti gambar di bawah

5. Simpan pengaturan dan tunggu beberapa menit untuk pembaharuan semua pengaturan domain Anda.

Langkah 3: Update Pengaturan Blogger
Langkah terakhir adalah setting di pengaturan blogger Anda.
1. Login ke Blogger
2. Klik Blog Anda
3. Klik Setelan => Tambahkan domain khusus

4. Klik Alihkan ke setelan lanjutan

5. Isi Nama domain Anda dengan awalan "www" lalu Simpan

6. Setelah itu klik Edit

7. Centang Alihkan domainanda.com ke www.domainanda.com dan Simpan

8. Selesai. Jika masih menampilkan pesan error "Kami tidak dapat memverifikasi otoritas....", tunggu beberapa jam, kemudian ulangi lagi menambahkan nama domain Anda pada pengaturan Blogger.

Sekarang blog Anda sudah menjadi Top Level Domain. Semoga bermanfaat.

Read More

Cara Membuat Google Custom Search Engine Sendiri

Cara Membuat Google Custom Search Engine Sendiri ~ Google memberikan keleluasaan kepada para penggunanya untuk melakukan berbagai modifikasi script dengan manfaat dan sarana yang ada dengan gratis. di antara sarana yang cukup bagus adalah Google custom search engine. sarana ini disiapkan untuk mereka yang membuat mesin pencarian sendiri yang sesuai dengan keinginan penggunanya. kita dapat membuat mesin pencari layaknya Google search untuk meng-index artikel atau info dari website atau blog yang dapat kita tentukan sendiri. untuk para blogger, banyak pula yang memakai Google custom search engine ini menjadi mesin pencari situs (blog) sendiri yang khusus meng-index artikel pada situs (blog) yang dikelolanya. Untuk itu kita akan membahas bagaimana caranya untuk membuat mesin pencarian Google di blog atau website kita sendiri.

langkah untuk membuat search engine sendiri adalah sbb:

1. Membuat Akun Google Custom Search Engine
untuk membuat akun Google search engine anda harus memiliki akun Google atau Gmail, kemudian login ke Google dan silahkan kemari
2. Setelah itu klik buat mesin telusur khusus

3. Isi form sesuai data blog anda

4. Kemudian lanjut dan dapatkan kode Nomor unik mesin telusur anda

5. Buat sebuah halaman yang nantinya digunakan untuk menampilkan hasil penelusuran

6. Pilih mode HTML dan pasang kode di bawah ini pada halaman yang Anda buat tadi

<div id="cse" style="width: 100%;">
Sedang mencari...</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("008511831770315150469:p8n2wap_lmu", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);
//]]></script>

7. Ganti kode 008511831770315150469:p8n2wap_lmu dengan Nomor unik mesin telusur anda
8. Klik Publikasikan dan catat url halaman tsb (misal: http://www.mainbom.com/p/search.html)
9. Pasang script kotak pencarian berikut ini pada tempat yang anda inginkan untuk menampilkan kotak pencariannya (jika sudah ada, tinggal di edit saja)

<form action="http://www.mainbom.com/p/search.html" id="searchform">
<input id="searchq" name="q" placeholder="Cari..." type="search" />
<input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

Keterangan:

• Ganti http://www.mainbom.com/p/search.html dengan url halaman yg anda buat tadi
• Jika sebelumnya blog anda sudah memiliki kotak pencarian, maka kode yg harus diganti adalah name="q" dan type="submit" untuk kode yg lain biarkan saja seperti sebelumnya.

Hasilnya akan seperti search engine di blog ini. Jika ada yg kurang jelas silahkan komentar.

Read More

Membuat Follower Box Twitter

Membuat Follower Box Twitter ~ Twitter Follower Box atau Twitter Fun Box memungkinkan pengunjung untuk mengikuti anda via Twitter tanpa meninggalkan situs atau blog anda. Twitter Follower Box sangat mirip sekali dengan facebook like box dan sistem kerjanya pun tidak jauh berbeda.

Jika Twitter follower default dari Twitter tidak menampilkan gambar follower, lain halnya dengan widget Twitter follower box yang dapat menampilkan gambar atau foto profil dari follower Twitter blog kita.

Nah yg ingin membuat Twitter Follower Box di blognya silahkan mengikuti langkah langkah berikut ini:
1. Login ke Blogger
2. Tambah gadget kemudian pilih HTML/Javascript
3. Masukan kode berikut ini di dalamnya

<!-- Twitter Follower Box -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("mainbom");</script
type="text>
<!-- End Twitter Follower Box -->

4. Ganti mainbom dengan username Twitter kamu.
5. Simpan dan selesai

hasilnya akan seperti di bawah ini:

Note: Ubah nilai width dan height sesuai keinginan Anda.

Demikian cara membuat follower box Twitter semoga bermanfaat.

Read More

Mengenal Perbedaan Antara Link Nofollow Dan Dofollow

Mengenal perbedaan antara link nofollow dan dofollow ~ Nofollow adalah sebuah tag dari atribut rel untuk menginstruksikan mesin pencari seperti Google untuk tidak mengikuti atau mengindeks link ke sebuah halaman atau situs. Hal ini dimaksudkan untuk mengurangi efektivitas spam di search engine termasuk pada komentar blog. maksudnya adalah jika sebuah link diberikan tag rel nofollow di belakangnya maka search engine tidak akan mengikuti link tersebut atau tidak memberikan backlink ke link tersebut. Contohnya jika anda membuat link ke blog saya seperti ini:

<a href="http://www.mainbom.com/" rel="nofollow">tutorial blogger</a>

Maka hasilnya dari kode diatas akan seperti ini: tutorial blogger

Artinya dengan penambahan kode rel="nofollow" tersebut, maka Google tidak akan memberikan link ke website saya atau dengan kata lain anda tidak memberikan backlink kepada situs saya. Dampak dari penambahan tag rel="nofollow" ini adalah membuat optimasi SEO untuk blog anda tetap terjaga dengan baik dan hal ini membuat blog anda terlihat lebih baik di mata search engine Google.

Sedangkan dofollow adalah kebalikan dari nofollow, yaitu membiarkan search engine untuk mengikuti link atau memberikan backlink kepada link yang memiliki atribute dofollow tersebut. Contohnya:

<a href="http://www.mainbom.com/" rel="dofollow">tutorial blogger</a>

<a href="http://www.mainbom.com/">tutorial blogger</a>

Kedua HTML link diatas memiliki arti yang sama, yaitu link dofollow dan link tersebut akan diberikan kredit backlink oleh Google dan search engine lainnya.

Nah kalau sudah mengerti, sekarang saya akan memberikan tips kepada anda saat membuat postingan di blog apabila membuat link ke situs atau halaman lain dengan menggunakan atribut nofollow dengan mudah.
Jika anda akan membuat sebuah link pada artikel atau postingan anda yang baru, disarankan seperti gambar di bawah ini:

Saya beri sedikit penjelasan:
- Jika Add 'rel=nofollow' attribute dicentang artinya link tersebut Nofollow
- Jika Add 'rel=nofollow' attribute tidak dicentang artinya link tersebut Dofollow
- Jika Open this link in a new window dicentang maka link tujuan akan terbuka di tab baru
- Jika Open this link in a new window tidak dicentang maka link tujuan akan terbuka di window yang sama

Sekian, semoga bermanfaat dan ilmu kita semua dapat bertambah. see you :)

Read More

Menentukan Artikel Untuk Ditulis Dengan Memanfaatkan Google Insight Search

Menentukan Artikel Untuk Ditulis Dengan Memanfaatkan Google Insight Search  ~ Bagaimana caranya menentukan artikel dengan keyword yang banyak dicari di google search? Ya pertanyaan ini dapat dijawab dengan produk google yaitu google insight search. google insight adalah service google untuk meriset keyword populer. manfaat google insight menghimpun keyword atau kata kunci populer sesuai kriteria serta kategori yang diinginkan. google insight dapat memberikan data pada pengguna berlandaskan tren pencarian yang dikerjakan pada seluruh domain google di seluruh dunia, sesuai dengan waktu yang ditentukan pengguna. entah itu 7 hari terakhir, 1 bulan, 1 tahun, atau dalam beberapa tahun ke belakang. tak hanya itu, type pencarian pun bisa dibagi lagi menjadi pencarian web, berita, gambar serta produk yang menunjukkan keyword artikel yang paling banyak dicari di google search. tak hanya itu, jenis-jenis pencarian tersebut bisa disaring kembali berdasarkan regional atau wilayah lebih mendetail.

Data google ingsight berasal dari hasil pencarian orang di google search. namun sebatas keyword yang hit tertinggi yang bisa dianalisis. bila hitnya terlalu rendah, selanjutnya tak bakal kelihatan. Manfaatnya tentu saja membantu kita saat membuat suatu artikel sebuah blog dengan keyword yang sedang populer untuk ditulis, hingga kita dapat memperoleh pengunjung yang semakin banyak.

Banyak manfaat yang dapat anda gunakan diantaranya :

• Menemukan keyword penelusuran web, gambar, berita, serta produk
• Menemukan keyword dengan istilah untuk ditelusuri.
• Penelusuran keyword bisa dicari berdasarkan negara atau untuk semua negara.
• Kategori serta rentang waktu bisa kita tentukan sesuai keinginan, dan lain-lain.
• Mendapatkan pengunjung yang lebih banyak

Contoh dibulan Ramadhan ini, Saya mencari kata "Cara" untuk penelusuran web di Indonesia pada semua kategori dalam rentang 7 hari terahir dan hasilnya adalah seperti gambar di bawah ini.

Nah dengan demikian Anda dapat menentukan artikel apa yang sebaiknya Anda tulis untuk saat ini.
Anda dapat coba sendiri serta rasakan manfaatnya dengan mengunjungi website google insight search.

Read More

Cara membuat iklan muncul berbeda sesuai kategori di blogger

Cara membuat iklan muncul berbeda sesuai kategori di blogger. kita dapat melakukan pengontrolan banyak hal dengan kategori termasuk pengontrolan munculnya iklan. Dengan kategori kita dapat mengatur iklan apa saja yang ingin muncul dalam kategori tertentu, sehingga iklan yang muncul akan berbeda sesuai dengan kategori yang diinginkan.

Contohnya seperti ini, saya mempunyai satu blog dan blog tersebut saya daftarkan ke beberapa layanan iklan sebut saja google adsense, kliksayacom dan lain-lain. Misalkan blog saya topiknya campur, seperti: ekonomi, politik, entertainment dan lain sebagainya. Dalam hal ini, saya berkeinginan bahwa ketika artikel tersebut memiliki kategori ekonomi, maka iklan yang muncul adalah iklan google adsense. Sedangkan apabila artikel yang ada memiliki kategori politik, maka iklan yang muncul adalah iklan kliksayacom. Hal seperti itu bisa dilakukan dengan mudah.

Contoh lain seperti ini, misalkan blog saya memasang iklan google adsense namun blog tersebut ikut juga program sponsored review. Jika dalam posting normal, iklan google adsense diharapkan muncul, namun dalam posting sponsored review di harapkan tidak muncul karena beberapa alasan seperti takut kena banned adsense dan lain sebagainya. Hal yang seperti ini dapat dilakukan melalui kategori.

Contoh lainnya lagi, saya mempunyai beberapa iklan banner. Masing-masing iklan banner tersebut berbeda target pengunjungnya, misal iklan banner satu target pengunjungnya seputar ekonomi, iklan banner dua target pengunjungnya seputar politik maka iklan banner yang kesatu hanya ingin muncul pada kategori ekonomi, dan banner yang kedua ingin muncul hanya pada kategori politik.

Hal-hal seperti yang dicontohkan diatas bisa anda lakukan dengan kode if conditional category seperti ini:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;kategori satu&quot;'>
Kode iklan 1
<b:else/>
<b:if cond='data:label.name == &quot;kategori dua&quot;'>
Kode iklan 2
</b:if>
<b:else/>
<b:if cond='data:label.name == &quot;kategori tiga&quot;'>
Kode iklan 3
</b:if>
</b:if>
</b:loop>

Kode diatas adalah contoh kode pengontrolan iklan untuk tiga nama kategori saja, tentu bila anda ingin lebih banyak kategori, tinggal ditambahkan saja.

Beberapa contoh penerapan dalam mengontrol iklan.

Contoh 1 : Iklan google adsense hanya muncul pada kategori ekonomi, selain dari itu yang muncul iklan kliksayacom :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;ekonomi&quot;'>
Kode iklan adsense (yg sudah diparse)
<b:else/>
Kode iklan KlikSayacom
</b:if>
</b:loop>

Contoh 2 : Iklan google adsense tidak ingin muncul khusus pada kategori review :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;review&quot;'>
<b:else/>
Kode iklan adsense (yg sudah diparse)
</b:if>
</b:loop>

Menentukan penempatan iklan.

Langkah selanjutnya adalah menentukan iklan itu akan disimpan di mana? Sebagai contoh iklan tersebut ingin ditempatkan diatas posting dan hanya muncul pada single post (di halaman depan atau di halaman home tidak muncul), maka kode yang sesuai adalah seperti berikut:

<b:if cond='data:blog.pageType == "item"'>
<p>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;teknologi&quot;'>
KODE IKLAN 1
<b:else/>
<b:if cond='data:label.name == &quot;ekonomi&quot;'>
KODE IKLAN 2
</b:if>
</b:if>
</b:loop>
</p>
</b:if>

Kode tersebut harus ditempatkan persis diatas kode <data:post.body/>

Langkah selengkapnya :
1. Login ke blogger
2. Klik template
3. Sebelum mengedit template Anda, sebaiknya klik cadangkan > unduh template lengkap untuk mem back-up template anda
4. Klik Edit HTML
5. Centang kotak kecil disamping tulisan Expand Template Widget
6. Cari kode <data:post.body/> lalu Copy paste kode berikut tepat di atasnya

<b:if cond='data:blog.pageType == "item"'>
<p>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;teknologi&quot;'>
KODE IKLAN LABEL TEKNOLOGI
<b:else/>
<b:if cond='data:label.name == &quot;ekonomi&quot;'>
KODE IKLAN LABEL EKONOMI
</b:if>
</b:if>
</b:loop>
</p>
</b:if>

7. Klik tombol Simpan Template. Selesai

Ketika anda membuat artikel yang di beri kategori teknologi atau ekonomi, maka iklan yang tadi akan muncul. Selain kategori tersebut, iklan tidak akan muncul.

Semoga artikel mengenai Cara membuat iklan muncul berbeda sesuai kategori di blogger dapat menginspirasi anda dalam mengoptimalkan fungsi kategori.

[sumber]

Read More

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&amp;alt=json-in-script&amp;callback=loadtoc">
</script> 

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

Contoh sitemap di blog ini.

Read More

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 :) ....

Read More

Cara Setting Domain di Intuit untuk Blogger

Setting Domain di Intuit untuk Blogger / Blogspot. Pada postingan sebelumnya (baca : Cara Mendapatkan Domain Dot Com Gratis Dari Intuit). Setelah mendapatkan domain gratis dari Intuit, tentunya kita harus mengarahkan domain tersebut, baik ke server berbayar ataupun gratisan.

Sekarang Saya akan memberikan tutorial bagaimana cara menghubungkan domain dari intuit ke blogger / blogspot atau istilahnya custom domain, agar blog Anda menjadi Top Level Domain (TLD).

Cara setting Domain di Intuit untuk Blogger:
1. Login ke Intuit dengan User ID dan Password Anda di sini
2. Setelah login klik menu Domain
3. Klik Advance DNS Setting

4. Pada Form A Records Tambahkan kode di bawah ini

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

5. Pada form CNames tambahkan ghs.google.com
Hasilnya akan seperti gambar di bawah ini

6. Klik Submit

Setting di Intuit sudah selesai. Selanjutnya setting di pengaturan Blog Anda.
1. Login ke Blogger
2. Klik Blog Anda
3. Klik Setelan => Tambahkan domain khusus

4. Klik Alihkan ke setelan lanjutan

5. Isi Nama domain Anda lalu Simpan

6. Setelah itu klik Edit

7. Centang Alihkan domainanda.com ke www.domainanda.com dan Simpan

8. Selesai.

Nah, Blog anda sekarang sudah berubah menjadi top level domain. Semoga tutorial setting domain di intuit untuk blogger ini bermanfaat.

Read More

Cara Mudah Menampilkan dan Menyembunyikan Widget di Halaman Blogger

Anda mempunyai banyak widget yang tampil di blog anda ? Widget blog yang terlalu banyak tentunya akan mengurangi kecepatan loading dari blog kita sendiri. Namun jika widget itu terasa penting bagi anda dan tetap ingin mempertahankan keberadaannya ada baiknya anda melakukan pengaturan pada halaman mana saja blog tersebut akan anda tampilkan. Misalnya widget A akan anda tampilkan hanya pada Homepage saja atau sebaliknya. Anda juga bisa menampilkan suatu widget hanya pada URL tertentu saja.

Beberapa pertanyaan yang paling sering diajukan adalah: Bagaimana Tampilkan widget blogger di homepage saja? Bagaimana menyembunyikan widget dari halaman homepage? Bagaimana cara menyembunyikan widget pada halaman statis? Bagaimana menampilkan widget pada halaman tertentu saja? 

Tutorial kali ini akan menjawab semua pertanyaan itu. Caranya adalah cukup menambahkan kode HTML / JavaScript diantara kode widget Anda. Namun, untuk memulai mengedit kode HTML blog Anda, sebaiknya Backup dulu template Anda (Baca: cara backup template) untuk menghindari hal-hal yang tidak diinginkan.

Menampilkan widget hanya pada Homepage saja

<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE WIDGET ANDA DISINI
</b:if>

Menyembunyikan widget dari halaman Homepage

<b:if cond='data:blog.pageType == "item"'>
KODE WIDGET ANDA DISINI
</b:if>

Menampilkan widget hanya pada halaman Static Page

<b:if cond='data:blog.pageType == "static_page"'>
KODE WIDGET ANDA DISINI
</b:if>

Menyembunyikan widget dari halaman Static Page

<b:if cond='data:blog.pageType != "static_page"'>
KODE WIDGET ANDA DISINI
</b:if>

Menampilkan widget hanya pada URL tertentu

<b:if cond='data:blog.url == "URL Pilihan Anda disini"'>
KODE WIDGET ANDA DISINI
</b:if>

Menyembunyikan widget dari URL tertentu

<b:if cond='data:blog.url != "URL Pilihan Anda disini"'>
KODE WIDGET ANDA DISINI
</b:if>

Menampilkan atau menyembunyikan widget default Blogger
Cara yang sama dapat diterapkan untuk widget default Blogger, seperti About me, Archive, Label dan lain-lain.
Biasanya kode default blogger akan tampak seperti dibawah ini

<b:widget id='HTML' locked='false' title='JUDUL WIDGET ANDA' type='Profile'>
<b:includable id='main'>

KODE WIDGET DEFAULT BLOGGER ANDA

</b:includable>
</b:widget>

Anda akan menemukan kode berwarna biru pada setiap kode widget default dari Blogger. Untuk mengontrol widget ini Anda hanya perlu menyisipkan kode kontrol sesuai dengan apa yang Anda inginkan. Misalnya Anda ingin menampilkan widget hanya pada Homepage saja, maka kodenya akan menjadi seperti ini

<b:widget id='HTML' locked='false' title='JUDUL WIDGET ANDA' type='Profile'>
<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
KODE WIDGET DEFAULT BLOGGER ANDA
</b:if>

</b:includable>
</b:widget>

Kode yang berwarna hijau adalah kode yang berfungsi untuk menampilkan widget hanya pada halaman Homepage saja.
Sekian, semoga bermanfaat.

Read More

Cara Membuat Langganan Artikel Via Email atau Email Subscribe

Hari ini seorang pengunjung Mainbom.com bertanya tentang cara membuat widget email subscribe yang baru Saya pasang di Blog ini kemarin. Nah karena Saya gak ada kerjaan maka Saya berkesempatan membuat tutorialnya hari ini juga. Sebelum Membuat Langganan Artikel Via Email atau Email Subscribe melalui feedburner, Anda diharuskan mendaftar di feed burner dulu. Untuk tutorial mendaftar dan membuat akun Feedburner silahkan cek disini.
Sebelum melanjutkan, aktifkan dulu fitur Email Subscriptions dan FeedCount pada tab Publicize di akun Google Feedburner Anda.

Cara membuat widget Email Subscribe Feedburner adalah sebagai berikut:
1. Login ke Blogger -> Tata letak -> Tambah Gadget
2. Kemudian pilih HTML/JavaScript
3. Lalu pasang kode di bawah ini pada kolom HTML/JavaScript

<form style="border:none;padding-top:10px;text-align:left;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mainbom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input name='loc' type='hidden' value='en_US'/><input name='uri' type='hidden' value='mainbom'/>
<table border='0' cellpadding='0' cellspacing='0' style='margin-top: 5px;'width='295'>
<input class='feedinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your mail here&quot;;}' onfocus='if (this.value == &quot;Enter your mail here&quot;) {this.value = &quot;&quot;}' size='20' style='width: 160px;' type='text' value='Enter your mail here'/>
<input align='right' height='24' id='imageField' name='I2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KTPNVjs-Q8gey_gOFfpTuikXhLXpgKJr_XkBE_owSpATeTGelFs3AbTVLcdJum6kQLy0xpYSz5I3x2Fbih4m7gqYkFXX8fLAOsN-Frf7RabyeGQ16nVMvj0KJ-yo5kQktvV64CuPwQ/s200/subscribe-zoom-c.png' type='image' width='82'/>
</table>
<div style='float: left;padding-top: 5px;'>
<a href="http://feeds.feedburner.com/mainbom"><img src="http://feeds.feedburner.com/~fc/mainbom?bg=FF6600&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a>
</div>
</form>

4. Klik Simpan. Selesai

Note:

• Ganti mainbom dengan Username Feedburner Blog Anda.
• Fitur Email Subscriptions dan FeedCount harus diaktifkan terlebih dahulu pada akun Feedburner Anda.

Read More

Cara Membuat Akun Feedburner

Akun feed burner dibutuhkan untuk membuat widget Email Subscribe, sedangkan email subscribe adalah fitur dimana pengunjung blog dapat menerima langganan artikel terbaru di Blog anda melalui email apabila pengunjung telah mensubscribe blog Anda. untuk membuat Akun feed burner silahkan daftar disini menggunakan Akun blogger Anda.

Isi Burn a feed right this instant dengan domain blogger Anda kemudian klik Next dan Next

 

  

Kemudian isi username Feedburner untuk blog Anda

 

Sekarang URL Feedburner Blog anda sudah jadi, contoh untuk Feed burner Blog ini adalah http://feeds.feedburner.com/mainbom

Untuk cara membuat widget Subscribe Feedburner di Blog Anda silahkan cek di mari.

Read More

Membuat Widget Facebook Like Box Dengan Tombol Melayang

Kali ini Saya akan share cara membuat widget Facebook like box dengan tombol melayang. Artinya Facebook like box akan muncul dibagian atas blog ketika pengunjung mengklik icon Facebook yang ada di sebelah kiri Blog Anda. Widget ini juga memiliki tombol close, sehingga tidak mengganggu tampilan blog Anda.
Biar gak penasaran silahkan melihat live demo nya di sini.
 

Untuk membuat Widget Facebook Like Box Dengan Tombol Melayang, ikuti langkah-langkah berikut ini.
1. Login ke Blogger -> Tata letak -> Tambah Gadget
2. Kemudian pilih HTML/JavaScript
3. Lalu pasang kode di bawah ini pada kolom HTML/JavaScript

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</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.top = 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="left">
<div style="background:#ffffff;">

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/mainbom&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>

</div>
</div>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeGS3q5wxmeZOUJE8k7s1pjOXrZ2llvojVaixsb72tL39UMrTuFzPevNPnLEDAiw4jxcDRVVXDzolC4C4kZxuZ0CfqCjWmyYKaR_pnUj_XMCprudhucvAASfHQ1ywYyYXnzQuEkfnltSI/s128/Close-32.png" alt="close" title="Click here to Close Box" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<div style='display:scroll; position:fixed; top:50%; left:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXJ1G5qlGrISaFDVXU5i59nSDwSDUa5pP4WgNsqLPw-3V4k4iWKcG733HSGo29G2YosVXD9ceBTCfhQ2Wsfu1t8MA3-sLELQlUDxz-mbIv5nzCmkDS9_T_DKG4R3xhAkim_jw0vMcWxo/s128/Drink-Facebook.png"  /></a>
</div>

4. Dan terakhir klik Simpan, lihat hasilnya.

Catatan:

• Ganti http://www.facebook.com/mainbom dengan URL Fans Page Facebook Anda.
• Jika ingin memasang tombol icon facebook di sebelah kanan, ganti left:0px; dengan right:0px; 

Semoga bermanfaat...
 

Read More

Membuat Tombol Back to Top Part II

Sebelumnya saya telah membuat tutorial Tombol Back to Top, Nah kali ini akan melanjutkan tutorial membuat tombol back to top dengan versi yang berbeda. Script ini juga menggunakan jQuery 1.4.3 namun sedikit berbeda dengan postingan sebelumnya karena menggunakan sebuah gambar atraktif yang menurut saya sangat keren, hehehe...

Untuk demo silahkan cek dimari

Langsung saja untuk cara membuat tombol back to top atau tombol kembali ke atas ikuti langkah berikut.
1. Login ke Blogger > Edit HTML
2. Sebaiknya backup dulu template anda
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut ini di atas kode ]]></b:skin>

a#scroll-to-top{position:fixed; right:15px; bottom:15px; width:18px; height:99px;display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XZJJCMw-R__MLxEeGHmIsNHYxs0KgwLPIlxBw2BXz_-ITSQ6RewVGM4wvs6OW6ck9rVwSwanPMXevcJkeipWNC3wA4Ybjeion300BWlkdcqbrWa1Wv4_08hRaQDH8nyXp8TU-Pg5fhA/s1600/return_top.png) no-repeat left top; }
a:hover#scroll-to-top{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6XZJJCMw-R__MLxEeGHmIsNHYxs0KgwLPIlxBw2BXz_-ITSQ6RewVGM4wvs6OW6ck9rVwSwanPMXevcJkeipWNC3wA4Ybjeion300BWlkdcqbrWa1Wv4_08hRaQDH8nyXp8TU-Pg5fhA/s1600/return_top.png) no-repeat right top; text-decoration:none; }

5.Lalu cari kode penutup </head> dan letakkan kode berikut ini di atasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function($) {
    var upperLimit = 100;
    var scrollElem = $('a#scroll-to-top');
    var scrollSpeed = 500;
    scrollElem.hide();
    $(window).scroll(function () {            
        var scrollTop = $(document).scrollTop();       
        if ( scrollTop > upperLimit ) {
            $(scrollElem).stop().fadeTo(300, 1);
        }else{       
            $(scrollElem).stop().fadeTo(300, 0);
        }
    });
    $(scrollElem).click(function(){
        $('html, body').animate({scrollTop:0}, scrollSpeed); return false;
    });
});
</script>

6. Kemudian yang terakhir cari kode </body> lalu pasang kode berikut tepat di atas </body>

<a id="scroll-to-top" title="Back to Top" href="#" style="display: block; opacity: 1;"></a>

7. Simpan template dan lihat hasilnya.

Read More

Membuat Widget Tombol Share Mengambang di Halaman Postingan

Widget tombol berbagi yang mengambang di blog semakin populer akhir-akhir ini. Kali ini saya akan berbagi tutorial cara membuat tombol berbagi yang mengambang disebelah kiri postingan. Widget ditampilkan di halaman posting saja dan tidak akan ditampilkan pada homepage. Versi ini berbeda dengan yang lain karena menerapkan dua efek yaitu Jquery dan CSS3. Menggunakan tombol Twitter yang telah dimodifikasi, ditambah dengan tombol Pinterest, AddThis dan tombol Email serta tombol wajib Facebook dan Google Plus.

Langkah-langkah yang dilakukan sangat mudah, cukup dengan Copy-Paste.
1. Login ke Blogger -> Template
2. Backup template Anda untuk mencegah hal-hal yang tidak diinginkan
3. Edit HTML -> Centang Expand Template Widget
4. Cari kode:

<b:includable id='post' var='post'>

5. Tepat dibawahnya paste kode berikut:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style>
    .mbt_social_floating{
        position:fixed; bottom:10%; margin-left:-60px; float:left;
        width:60px;
        background-color:#f7f7f7;
        padding: 5px 0 0px 0px;
        border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    border-bottom:1px solid #ddd;
    z-index:9999px !important;
    border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
    }
    .mbt_social_floating .mbt_side_social_button{
        margin-bottom:5px;
        float:none;
        height:auto;
        width:60px;
    }
    .mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
        margin-left:5px;
    }
    .mbt_social_floating .st_fblike_vcount{
        margin-left:5px;
    }
    .mbt_social_floating .stButton_gradient{
        background:none !important;
        height:21px !important;
        padding-left:0 !important;
    }
    .mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
        background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDACyrBQuJ35zWxvLnQ1Elbp28ZOzwlNDWZK9hpKnCd_JT1T5utiUYVp8tSilOayjWx9sqtN0BLUdxuPjpI2HAcfJrEHh2m8-N4DdfCbYodKd4w-WX-W40shJKHOcZog6tUG1cy5uiWrU/s400/gc_social_sprite.gif&#39;) no-repeat !important;
        height:19px !important;
        width:45px !important;
        padding:0 !important;
    }
    .st_email .chicklets{
        background-position:0 -77px !important;
        background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDACyrBQuJ35zWxvLnQ1Elbp28ZOzwlNDWZK9hpKnCd_JT1T5utiUYVp8tSilOayjWx9sqtN0BLUdxuPjpI2HAcfJrEHh2m8-N4DdfCbYodKd4w-WX-W40shJKHOcZog6tUG1cy5uiWrU/s400/gc_social_sprite.gif&#39;) !important;
    }
    .mbt_social_floating .st_twitter_vcount .st-twitter-counter{
        background-position:0 -58px !important;
    }
    .mbt_social_floating  .stButton_gradient{
        border:none !important;
    }
    .mbt_social_floating .stBubble_count{
        width:44px !important;
        font-size: 15px !important;
        font-weight: normal !important;
        padding-top:7px !important;
        height:23px !important;
        background:none !important;
    }
    .mbt_social_floating .st_twitter_vcount .stBubble_count{
        color:#00a6df;
        background-color:#f8fbfc !important;
    }
    .st_fblike_vcount{
        margin-bottom: 0px;
        display: block;
    }
    .st_twitter_vcount{
        margin-bottom: 3px;
        display: block;
    }
    .st_email{
        margin-bottom: 5px; margin-top: 3px;
        display: block;
    }
    .mbt_social_floating .stBubble{
        background-position: 21px 31px !important;
        height:35px !important;
    }
    </style>
    <div class='mbt_social_floating'>
        <script type='text/javascript'>var switchTo5x=true;</script>
        <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
        <script type='text/javascript'>stLight.options({onhover:false});</script>
        <span class='st_fblike_vcount' displaytext=''/>
        <span class='st_twitter_vcount' displaytext='' st_via='mainbom'/>
    <div style='margin:5px 0 0px 0;'>
    <center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
    <a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
    <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
    <script type='text/javascript'>
    function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
    }
    </script> </center>
    </div>
    <div style='margin:0px 0 0 5px;'>
        <span class='st_plusone_vcount' displaytext=''/>
    </div>      
    <div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
    <a class='addthis_counter'/>
    </div>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
    <script type='text/javascript'>
    var addthis_config = {
         ui_cobrand: &quot;MainBom.Com&quot;,
    ui_header_color: &quot;#ffffff&quot;,
         ui_header_background: &quot;#0080FF&quot;
    }
    </script>
    <span class='st_email' displaytext=''/>
    </div>
    </b:if></b:if>

6. Ganti mainbom dengan username Twitter Anda
7. Save template, selesai.

Sesuaikan letak widget dengan Template Anda.

Read More

Membuat Tombol Back to Top Menggunakan Jquery 1.4.3

Tombol Back to Top berfungsi untuk memudahkan pengunjung untuk kembali ke bagian atas dari suatu halaman. Tombol Back to Top nantinya akan terlihat di pojok kanan bawah apabila pengunjung mengarahkan scrollnya ke halaman bawah pada Blog Anda. Untuk yang ingin membuat tombol back to top atau tombol kembali ke atas menggunakan Jquery versi 1.4.3, silahkan ikuti langkah berikut ini.

hasilnya akan seperti gambar ini

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

#toTop {
    width:70px;
        border:1px solid #ccc;
        background:#f7f7f7;
        opacity:0.8;
        text-align:center;
        padding:5px;
        position:fixed;
        bottom:10px;
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}

4. Kemudian cari kode penutup </head> lalu pasang kode berikut di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();   
        } else {
            $('#toTop').fadeOut();
        }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });   
});
</script>

5. Setelah itu cari lagi kode </body> dan pasang kode berikut di atas </body>

<div id="toTop">^ Back to Top</div>

6. Save template dan lihat hasilnya.

Read More

Cara Membuat Teks Tulisan Berjalan di Bawah Blog

Sebelumnya ada bertanya tentang cara membuat teks berjalan di bawah Blog atau lebih dikenal dengan nama Marquee 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 dengan right
• 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.

Read More

Cara Pasang Iklan di Tengah Postingan - Otomatis

Seorang teman bertanya "Bagaimana pasang iklan di tengah postingan?" hehe Saya dapat inspirasi lagi untuk membuat tutorial tersebut di blog Mainbom ini. Terima kasih buat teman saya itu, karena dia saya tidak kehabisan akal untuk membuat tutorial lagi, wkwkwk..

Perlu anda ketahui bahwa memasang iklan di tengah postingan dapat meningkatkan intensitas klik iklan pada blog anda dan akan sangat menguntungkan bukan?

Baiklah untuk memasang iklan di tengah postingan secara otomatis adalah sebagai berikut:

1. Login ke Blogger -> Edit HTML
2. Backup dulu template Anda untuk jaga-jaga apabila terjadi kegagalan
3. Centang Expand Template Widget
4. Cari kode <data:post.body/> apabila Anda menemukan banyak kode seperti itu, pilih kode yang nomor dua
5. Kemudian ganti kode <data:post.body/> dengan kode dibawah ini:

<div expr:id='"iklan1" + data:post.id'></div>
<div style="clear:both; text-align:center; margin:10px 0">

<SCRIPT IKLANNYA DISINI MASBRO>

</div>
<div expr:id='"iklan2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("iklan1<data:post.id/>");
var obj1=document.getElementById("iklan2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>

6. Save template, selesai

Note:
- Jika iklan belum muncul,  silahkan parse dulu script iklannya di mari
- Untuk kode yang berwarna hijau adalah letak posisi iklan ditengah, bisa diganti dengan:
posisi tengah kiri:

text-align:left

atau

float:left

Posisi tengah kanan:

text-align:right

atau

float:right

Sesuaikan aja mana yang cocok dengan template Anda.

Read More