Wednesday, 2 August 2017

Membuat Widget Melayang Pojok Kanan Blog Dengan Tombol Close

Kali ini saya akan membuat tutorial agak berbeda dari biasanya, tapi masih ada hubungannya dengan pemrograman, ada coding-codingnya gitu lah.

Akhir-akhir ini saya sering ngulik koding tentang template blogger, ya bagi teman-teman yang sudah berkecimpung didunia pemrograman template blogger pasti paham maksud saya.

Baca juga : Membuat bentuk Tabel Keren Dengan Library DataTables

Template blogger tidak hanya sekedar mengambil template yang sudah jadi. Bagi yang suka berimprovisasi dan ingin membuat perubahan dibeberapa UI (user interface) blog nya, maka mau tidak mau harus berurusan dengan kodingan si template.

Saya sendiri mempelajari kodingan template blogger butuh waktu yang lama, karna memang hanya bisa ngulik nya diwaktu senggang saja (Atau jika otak sedang mument karna project di Android :D). Tapi sejauh ini saya lumayan paham posisi dan dimana saya harus mengedit koding untuk mencapai UI yang saya inginkan.

Baca juga : Tutorial CRUD (Create, Read, Update, Delete) Menggunakan PHP Dan MySQL 

Yang terakhir saya kerjakan adalah menampilkan widget di pojok sebelah kanan blog dengan ada tombol close nya. Kebetulan widget yang saya tampilkan adalah fans page dari blog ini yaitu It Has Beginning. Contoh jadinya bisa lihat diblog atau digambar dibawah ini :

Hasil akhir
Jika dari teman-teman ada yang tertarik untuk membuat semacam tampilan seperti blog saya ini, maka silakan ikuti langkah-langkah dibawah ini :

Pasang CSS


Agar tampilan yang dibuat sesuai dengan keinginan kita, maka dalam ilmu pemrograman web kita harus menambahkan style tersendiri. Bahasa yang digunakan yaitu Cascading Style Sheet (CSS). Caranya pemasangannya adalah :

- Masuk ke Dashboard blogger
- Pilih menu Template/Tema
- Pilih Edit HTML
- Cari tagline </head> di antara sekian banyak kodingan template (gunakan Ctrl+F)
- Paste kode dibawah ini tepat diatas kode tagline </head>

<!-- start css box bojok blog-->
<style type="text/css">
#fbLikeBox{background-color:#FFFFFF;border:4px solid rgb(210,210,210);bottom:0;border-bottom:210;float:left;height:auto;margin-bottom:10px;margin-right:5px;position:fixed;right:0;width:auto;z-index:10}
.fbLikeBox-close{color:#333!important;position:absolute;top:1px;right:1px;width:20px;height:20px;line-height:20px;text-align:center;font-size:11px}
.slideUpfbLikeBox{animation-name:slideUpfbLikeBox;-webkit-animation-name:slideUpfbLikeBox;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible!important}
@keyframes slideUpfbLikeBox{0%{transform:translateY(100%)}50%{transform:translateY(-8%)}65%{transform:translateY(4%)}80%{transform:translateY(-4%)}95%{transform:translateY(2%)}100%{transform:translateY(0%)}}
@-webkit-keyframes slideUpfbLikeBox{0%{-webkit-transform:translateY(100%)}50%{-webkit-transform:translateY(-8%)}65%{-webkit-transform:translateY(4%)}80%{-webkit-transform:translateY(-4%)}95%{-webkit-transform:translateY(2%)}100%{-webkit-transform:translateY(0%)}}
</style>
<!--- end css box pojok blog-->

Disana ada beberapa attribute yang bisa kalian ganti-ganti sesuai dengan keinginan, yaitu ada untuk background, margin, padding, ketebalan garis, dll. Silakan ganti-ganti.

Untuk mengatur jarak antara sisi kanan/kiri/atas/bawah dengan kotak widget, silakan rubah angka yang ada di attribute margin-right/left/top/bottom

Baca juga : Tutorial Insert Data Menggunakan PHP PDO + MySQL 

Untuk mengatur ketebalan garis border kotan, silakan ganti angka yang ada pada attribute border, dll (silakan pelajari lagi tentang CSS)

Pasang Fanspage


Pada bagian ini kita akan langsung memasang fanspage kita, ikuti langkah-langkah dibawah ini :

- Langkah-langkahnya masih sama dengan yang sebelumnya
- Temukan tagline </body>
- Paste kode dibawah ini diatas tagline </body>

<!-- start pojok widget-->
<div class='slideUpfbLikeBox' id='fbLikeBox'>
    <a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times' /></a>
    <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/ithasbeginning' data-show-faces='true' data-stream='false' data-width='230'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fithasbeginning&amp;width=230&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:230px; height:62px;'/>
</span></div>
</div>
<script type='text/javascript'>
function show(target) {
    document.getElementById(target).style.display = &#39;block&#39;;
}

function hide(target) {
    document.getElementById(target).style.display = &#39;none&#39;;
}
</script>
<!-- end pojok widget-->

Dalam kodingan diatas ada setidaknya 3 bahasa pemrograman yang dikombinasikan, antara lain HTML, PHP dan JavaScript. Silakan pelajari-pelajari ketiga bahasa pemrograman tersebut.

Pada kode yang berwarna kuning, silakan ganti menjadi nama fans page kalian (nama paling akhir setelah url www.facebook.com) ex : www.facebook.com/ithasbeginning.

Sekian tutorial tentang cara membuat widget di pojok kanan blog, semoga bermanfaat.

Please post a polite comment and do not post a spam
EmoticonEmoticon