Membuat Widget Hide Show Floating di Pojok Blog

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ70K812Ny3QR2C58yRu87ZwtPSPeGUy2ZEsSIrQ584K0aBbICxT4ln93ZkSwhyphenhyphenvNA_TIcwv-hmgydt6UjfBXBG4VKPbZA5OqfMwf2Ej1Fnf7tb4yOfNKydsxegs_ZksXBqOLxrV5YAZvz/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

Read more

Cara Mengganti Kursor Blogger - Modifikasi Cursor Blogspot

 

Cara Mengganti Kursor Blogger - Modifikasi Cursor Blogspot. Kali ini kita akan membahas tentang cara mengubah tampilan kursor yang ada di blog kita. Jika sobat masih penasaran dengan yang dimaksud mengubah kursur, maka silahkan untuk memperhatikan kursor blog ini terlebih dahulu. Bagaimana? Menarik bukan....?

Nah, di atas itu adalah tampilan kursor blog ini. Bagi sobat yang ingin mengubah kursor yang ada di blog sobat, maka sobat bisa mengubahnya melalui langkah-langkah berikut:

1. login lah ke akun blogger sobat terlebih dahulu
2. Lalu klik "Layout"

3. Pilih "add a gadget" lalu pilih "HTML/Java Script" dan paste-kan kode berikut untuk mulai mengubah tampilan kursor yang ada di blog sobat:

a. Kode 1: mengubah kursor tapi tidak mengubah kursor ketika menyorot link

<style type="text/css">
body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUsyDuNYKbSvXP22ebYavrInRbzYJ6yREoUbAFPhJOaJSUV9x5Sn5F62te1tuO0_hZKt3415FXBexhCgrFRnHydNxySXlP6kL40SdwFZBAz5Qn-EqACzTIOkhTHoNq42pInJtZWifR1zhG/"), auto;}
</style>

b. Kode 2: mengubah kursor serta tetap berubah walau disorot ke arah link

<style type="text/css">
body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUsyDuNYKbSvXP22ebYavrInRbzYJ6yREoUbAFPhJOaJSUV9x5Sn5F62te1tuO0_hZKt3415FXBexhCgrFRnHydNxySXlP6kL40SdwFZBAz5Qn-EqACzTIOkhTHoNq42pInJtZWifR1zhG/"), auto;}
body a:hover{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUsyDuNYKbSvXP22ebYavrInRbzYJ6yREoUbAFPhJOaJSUV9x5Sn5F62te1tuO0_hZKt3415FXBexhCgrFRnHydNxySXlP6kL40SdwFZBAz5Qn-EqACzTIOkhTHoNq42pInJtZWifR1zhG/"), auto;}
</style>

SILAHKAN UNTUK MEMILIH SALAH SATU KODE YANG SOBAT INGINKAN

4. Jika sudah, maka silahkan untuk tekan tombol "SAVE" atau "SIMPAN"


PENTING:

Sobat bisa mengganti link gambar yang telah saya tandai warna biru dengan link gambar kursor sesuai keinginan sobat. Berikut adalah beberapa link gambar kursor koleksi saya:

---

Link:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinoNxULZ9d2l9mYOuUPv5Dn6jjN4hAVrD9Nuk9lHBDipg0T4C3T7SWyps6-VFNeSAL-w9-vG18XWsZ_49XxTt0QzMRZYmiwjlrou7jjoymNVhBDHgn1OD5yofE47Gdc9e1Ok2TaDP6jmM/s400/bat_banana_t4belajarblogger.png

---

---

Link:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQT9tIYwewnUQg5393JiqdNsnySoARO3NlcvhTnl16mj1fdbgeWNyMx4sktLYqhjCv4Kv_BqBgnXkmld3Lv-J5psxkwXc5lowheAdV7anqCdrFfOMoakdn8LjgYtnS7X9X3IkEgbCTBX8/s400/bird_hair_t4belajarblogger.png

---

---

Link:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNeQV5mwBQuWcnZX1_wGoTkwBGu1jeOFk7tRUcawgVBz0H9z_23OkhvACtyhqSiqlxfzBpb4aDMvbaAY6ZmkGTrlsoDqpz-Bu3AhOUeTlyjtyxW80O4uig58OrVxppd6BgYJrUVrn-GzA/s400/guitar_banana_t4belajarblogger.png

---

Untuk selebihnya sobat bisa mencarinya melalui Google... :D

Semoga bermanfaat. Keep blogging...

Read more

Mulai Update Blog Lagi

 

Mulai Update Blog Lagi. Rasanya sudah 3 bulan lebih tidak menulis di blog ini, hahaha kangen euy. Tapi sebelumnya terima kasih banyak kepada sobat Blogger semua yang telah berkenan untuk berkunjung di blog yang sederhana ini.

Dan yang kedua kalinya, si empunya blog benar-benar minta maaf kepada sobat Blogger yang komentarnya belum sempat ane balas, tapi sante aja...akan ane balas di waktu-waktu dekat ini, dan yang satu lagi buat sobat-sobat yang telah mengirim email ke ane sebagian besar sudah ane balas, lho kok sebagain besar? Iya, inbox ane penuh dengan email dari sobat Blogger yang bertanya-tanya dunia Blogging dan email lain2nya, dan mustahil bisa ane balas semuanya...jdi maaf, walau ada beberapa pertanyaan sobat yang benar-benar berkaitan dengan Blogger masih saja belum sempat ane balas, ya itu karena keterbatasan waktu dan sedikit sibuk dengan dunia luar biasa.

Woke, karena ini hanyalah sepatah dua patah tiga patah dan seterusnya sebelum membahas tutorial blogging di blogger...so ane mau sedikit menyampaikan sesuatu yang berkaitan dengan blog ini untuk kedepannya. Maka dari itu, untuk lebih jelasnya sobat-sobat bisa melihatnya di bagian bawah (footer) blog ini...
Yupz, benar sekali. Ane mau minta voting dari teman-teman semua tentang apa "Yang Diinginkan di Blog Ini untuk Kedepannya?" maksudnya dari segi isi alias konten. Di pilihan voting di bawah ada 5 pilihan; Widget flash, tutorial HTML, jQuery, HTML5, dan JavaScript.

Sejujurnya, 5 opsi di atas muncul begitu saja dari pikiran ane setelah mendapatkan banyak pesan serta beberapa saran sobat Blogger yang ane terima di beberapa akun ane. Dan setelah dipikir-pikir ya memang bagusnya begitu, apa yang disarankan oleh pengunjung blog kita maka itu akan menjadi topik yang menarik sekaligus menyenangkan.

Ane pribadi lebih memilih widget flash sama tutorial HTML gan,...soalnya ane suka sama dua itu...dan alhamdulillahnya ketika postingan ini di tulis, ternyata banyak juga pengunjung blog ini yang nge-vote dua pilihan tersebut. Tapi bagi sobat Blogger yang memang memilki pilihan lain, monggo-monggo saja, ane tetap ikut dengan hasilnya.

Voting ini tidak berarti yang minim dalam jumlah voting maka tidak akan dibahas di blog ini. Akan tetap dibahas namun dengan frekuensi yang lebih minim daripada yang jumlah voting nya banyak. So tunggu apa lagi, ayo buruan voting...
:D

Thanks karena telah berkunjung dan telah bersedia mem-voting...

Read more