31 August 2017

Sticky Button di Blogger

Tutorial Kali ini adalah bagaimana Cara Membuat Sticky Button di Blogger dengan CSS Framework Materialize tanpa merusak tema bawaan dari blogger yaitu dengan memilah file CSS mana yang sekiranya bakal membuat Crash antara Tema Blogger dengan Materialize.
Button yang akan kita desain/ciptakan ini akan mengikuti layar anda, sekaligus bisa menyesuaikan lebar kecil nya tampilan browser atau bisa di bilang "Responsive". Sebenarnya sangat banyak sekali website framework css yang menyediakan button maker dan banyak variasinya, ini contohnya saya menerapkan button css materialize.

Untuk contoh hasil tutorial ini, silahkan kunjungi link di tombol berikut, anda akan diarahkan ke website yang menerapkan StickyButton.


sample demo

1. Langkah Pertama/The First Step

Masuk ke Tata Letak/Layout




Tambahkan Gadget HTML/JavaScript

Masukkan kode di bawah ini,

dalam script tersebut ada tag

  • <style>...</style> untuk menyimpan CSS dan sebaiknya kode bagian ini jangan di rubah untuk kenyamanan Tema Blogger :) ,
  • <div>...</div> untuk menentukan susunan button design yang di buat, di bagian inilah anda bisa menambah atau mengurangi jumlah button, warna button, icon button dll
cara merubah Struktur sticky button



<div class="fixed-action-btn horizontal click-to-toggle"> <a class="btn-floating btn-large red">

<i class="material-icons">menu</i></a>
<ul> 



<li><a href="#" class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a href="#" class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a href="#" class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a href="#" class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>

</ul>

</div>

  • Kode Berwarna merah untuk menentukan gambar icon
  • Kode berwarna biru untuk merubah warna buton
  • kode berwarna kuning untuk link anda
  • kode bergaris bawah untuk menentukan jumlah button, hapus satu atau lebih kode <li>...</li> untuk menghilangkan jumlah button, dan juga sebaliknya untuk menambah button.
silahkan klik link berikut untuk melihat daftar Icon Collection yang di dukung Framework Materialize 

....dan masih banyak lagi

kemudian Simpan gadget.

2. Langkah Kedua

Geser Widget/Gadget HTML tadi di posisi Footer yaitu berada di paling bawah supaya Sticky button kita tetap muncul di semua halaman blog.

3. Langkah Ketiga 

Masuk ke Tab Tema - Edit HTML

cari kode </head>,
masukkan kode berikut tepat di atas kode </head>

&lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;

kode tersebut untuk memanggil icon

Simpan Tema


4. Langkah Keempat

masih di halaman HTML, cari kode </body>
masukkan kode berikut tepat di atas </body>

<script src='https://cdn.rawgit.com/OkiFIrman/javascript/53b48e7b/jquery-1.11.3.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/OkiFIrman/javascript/53b48e7b/materialize.js' type='text/javascript'/>

kode tersebut untuk memanggil file JavaScript JQuery.js dan Materialize.js

Simpan

Selesai....

Jika kesulitan silahkan tinggalkan komentar di bawah...
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post