Membuat Widget Hide Show Floating di Pojok Blog

Membuat Widget Hide Show Floating di Pojok Blog

Menjadi Ahli Desain Web

Lancar Percakapan Bahasa Inggris Cepat!

Membuat Widget Hide Show Floating di Pojok Blog. 2 Minggu yang lalu saya mendapatkan sebuah email dari seorang sobat Blogger yang menanyakan tentang cara pembuatan tombol "Follow" yang ada di pojok kiri bawah blog ini (namun sekarang telah dicopot). Dan alhamdulillah, kali ini kita akan membahasnya bersama.

Singkat kata, sobat bisa memasang url tombol sesuka sobat; misalnya menu, atau tombol lain. Tombol ini jika diklik maka akan muncul suatu kotak yang berisikan widget maupun apa saja yang sobat inginkan, bisa iklan atau hanya sekedar widget hiasan. Namun dalam tutorial ini saya menggunakan widget follower, twitter, serta link untuk link exchange. berikut tampilannya:

Untuk membuat sesuatu seperti di atas, sobat bisa melakukannya dengan cara:
1. Login ke akun blogger dulu
2. Lalu klik tab "template"
3. Klik edit HTML => proceed

4. Centang kotak "expand widget templates"
5. Lalu letakkan kode berikut di atas kode tag ]]></b:skin>

#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #FFFFFF;
background:url(#)#FFFFFF repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}

6. Lalu letakkan kode berikut di atas kode tag </body>

<div id="fl">
<div class="fltab" onclick="showHideFL()">
</div>

<div class="flcontent">

KODE WIDGET FOLLOWER, IKLAN, ATAU APA SAJA DI SINI

<div style="text-align: right;">
<a href="javascript:showHideFL()">
</a>
<div style="color: #90aed0;">
<a href="javascript:showHideFL()">[Tutup]</a></div>
</div>


<span style="font-size: x-small;"><a href="http://t4belajarblogger.blogspot.com/p/link-exchange.html" target="blank"></a></span>
<div style="color: #90aed0;">
<span style="font-size: x-small;"><a href="http://t4belajarblogger.blogspot.com/p/link-exchange.html" target="blank">Link Exchange</a></span></div>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById(&quot;fl&quot;);
fl.style.bottom = (-100-fl.offsetWidth).toString() + &quot;px&quot;;
</script>
<a href="javascript:showHideFL()" style="bottom: 5px; display: scroll; left: 5px; position: fixed;" title="Follow"><img src="https://lh5.googleusercontent.com/-mG8VYpPjsfc/T1IAtPLi3GI/AAAAAAAAEMw/wAui--iVWEY/s148/follow_gfc_t4belajarblogger.png" /></a>

Keterangan:
Sobat bisa mengganti tulisan warna hijau dengan widget, iklan, atau kode follow twitter maupun fanpage facebook sobat. Lalu yang biru adalah link untuk button/tombol, sobat bisa menyesuaikannya sesuka sobat.

7. Klik "Save Template"

Selesai....


Jika sobat memilki masalah dalam menerapkan trik ini di blog sobat, silahkan untuk meninggalkan komentar di bawah post ini. Thanks

Cara Menampilkan Iklan Di Bawah Judul Postingan

  Cara Menampilkan Iklan Di Bawah Judul Postingan - Trik Iklan Tampil di Atas Post

Cara Menampilkan Iklan Di Bawah Judul Postingan - Trik Iklan Tampil di Atas Post.
Bagi teman-teman yang sudah tidak sabar untuk memperaktekkannya, silahkan simak langkah-langkah berikut:

1. Silahkan login ke akun blogger sobat seperti biasa
2. Klik tab rancangan
3. Lalu kliklah menu edit HTML dan jangan lupa centang kotak "Expand template widget"
4. Sekarang carilah kode <div class='post-header-line-1'/> jika sobat tidak menemukannya di template sobat, silahkan cari kode <data:post.body/>
5. Sampai di sini, sobat bisa memutuskan iklan apa yang ingin ditampilkan - sebenarnya bisa apa saja, termasuk iklan PPC seperti kumpulblogger.com
6. Silahkan untuk mengkopi paste kode berikut ke template sobat

<b:if cond='data:blog.pageType == &quot;item&quot;'>

KODE IKLAN SOBAT DI SINI

</b:if>

Pada tulisan "Kode iklan sobat di sini" bisa sobat ganti dengan kode script iklan yang sobat miliki.
7. Sekarang letakkan kode pada langkah [6 ], di atas salah satu kode yang telah sobat temukan pada langkah [4 ], sehingga formatnya menjadi seperti berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

KODE IKLAN SOBAT DI SINI

</b:if>

<div class='post-header-line-1'/>

Atau

<b:if cond='data:blog.pageType == &quot;item&quot;'>

KODE IKLAN SOBAT DI SINI

</b:if>

<data:post.body/>

8. Sekarang silahkan untuk mengklik tombol "Simpan Template"

SELESAI!!!!
prase dl
Sekarang sobat sudah bisa melihat hasil kerja sobat. Silahkan untuk mengunjungi blog sobat sendiri, dan cobalah untuk mengklik postingan/judul postingan mana saja yang sobat miliki, maka nanti di setiap bagian bawah judul postingan sobat akan tampil iklan yang sobat pasang.

Semoga bermanfaat_