Advertisement

Hot News

News

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...
Sticky Button di Blogger Reviewed by Oki Firmansyah on August 31, 2017 Rating: 5

20 comments:

  1. patut di coba bwat percantik tampilan, nice post :)

    ReplyDelete
  2. Keren buttonnya gan, bisa dicoba nih ...

    ReplyDelete
  3. Replies
    1. alhamdulillah bermafaat bwat orang lain hehehe

      Delete
  4. nah ini yang ane cari2 gan! izin test ah

    ReplyDelete
  5. kebetulan ane sedang mencari sticky untuk sidebar, ane ambil js nya ajh untk di modifikasi. untuk di buat sticy sidebar. makasih atas tutorialnya

    ReplyDelete
  6. ijin coba gan buat nerapin di blog ane nih, thanks for info

    ReplyDelete
  7. wah cantik nih jadi kalau pake css. Makasih bang tutorialnya ;)

    ReplyDelete

All Rights Reserved by Digital Tutor © 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.