Bahan Sticky valid HTML5 dan CSS3

Bahan Untuk Sticky Valid HTML5 dan CSS3 - Sedikit saya jelaskan tentang sticky, yakni widget yang biasa terdapat pada sidebar blog dengan pola melayang-layang ketika blog kena scroll ke atas dan ke bawah. Beberapa waktu lalu saya pernah memasang widget sticky di blog ini, maksudnya blog bungfrangki.com, namun instalasi widget sticky tersebut sempat tersendat sebab waktu itu saya belum menemukan bahan yang akan di pasang.

Sehingga saya harus googling kesana-kemari. Sempat mendapati beberapa tutorial, namun tidak memuaskan hati, dan pada akhirnya ketemu juga yang sesuai dengan keinginan, tentunya di utak-atik sedemikian rupa sehingga bisa valid HTML5 dan CSS3.

Sticky Valid HTML5 dan CSS3


Sebelumnya saya ingin beritahukan dulu tentang bahan sticky yang dimaksud. Yakni seperti konten facebook, twitter, follow blog, Google+ dan lain sebagainya.

Jika anda tertarik, silahkan ikuti langkah berikut ini:
Login ke blog terlebih dahulu, masuk ke Tata Letak blog, klik Tambah Gadget lalu kopi kode di bawah ini dan paste pada bagian HTML/JavaScript (widget sticky yang telah disesuaikan sebelumnya):
<div class="fb-like-box" data-href="https://www.facebook.com/pages/BUNGFRANGKiCOM/253664224684238" data-width="330" data-height="70" data-colorscheme="light" data-show-faces="false" data-stream="false" data-show-border="false" data-header="false"></div>
<div class='pengikut' ><a href='http://www.Blogger.com/follow-blog.g?blogID=6670856475198141739' onclick='window.open(this.href, &apos;dmfollow&apos;, &apos;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521&apos;);return false;' style='text-align:center;font-weight:bold;text-decoration:none;' title='Join this site / follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GV5UOOr1Sh6gwiBxTcfGWby9Q9DWi-yaYOVFxRAQgF1QzUMlidzHzZsHajP9UN7ygxhxGCWVRCJbfXZK5qLWXpvAdQ1Su_QHInfhMxV4jnhuu4L7Kzw7YTI_7XuMCjWg3lh2FjRlZR8/s1600/Follow+my+blog.gif' style='cursor:pointer;' alt='Ikuti Blog ini bro'/></a><span style="padding-left:8px;color:#666;">Follow my Blog</span></div>
<div class='rb-email'>Get update to u&#39;r Inbox</div>
<div class='column section' id='middlecolumn2'><div class='widget PlusFollowers' id='PlusFollowers1'>
<div class='g-plus' data-action='followers' data-height='300' data-href='https://plus.google.com/103493780843253133709' data-source='blogger:blog:followers' data-theme='dark' data-width='300'>
</div>
<script type='text/javascript'>window.___gcfg = {'lang': 'en_GB'};</script>
</div></div>
Sesuaikan kode yang diberi warna dengan kebutuhan blog anda, lalu simpan.
Selamat mencoba.

2 komentar

  1. Profil:https://www.blogger.com/profile/05255090637442531554
    Izin praktek tutorialnya agan
    • Profil:https://www.blogger.com/profile/13162875744493565460
      silahkan gan...
  • Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
  • Apabila ada pertanyaan di luar artikel silahkan telusuri atau bertanya lewat .
  • Untuk menyisipkan gambar, silahkan upload gambar terlebih dahulu. Lalu salin URL Gambar tersebut, paste ke kolom di bawah ini, lalu klik tombol Image.
  • Untuk menyisipkan Potongan Kode, atau Quote, paste kode tersebut ke kolom di bawah ini, lalu klik tombol pre, code, atau quote.
  • Untuk menulis kode dalam Syntax Highlighter gunakan format kode panjang.
  • Setelah itu, salin atau copy hasil parse dengan klik tombol icon Salin Kode! lalu paste ke kolom komentar.

image quote pre code