Cara Membuat Widget Blog Menjadi Melayang (Fixed) Setelah Halaman Discroll

Kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat widget yang ada di blog kita menjadi melayang atau posisi fixed saat halaman discroll ke bawah kemudian kembali ke tempat semula saat halaman discroll ke atas. Widget ini tidak akan melayang jika halaman belum discroll ke bawah. Untuk lebih jelasnya, kalian bisa melihat contohnya dengan mengklik link demo di bawah ini :

Demo

Bagaimana? Apakah kalian tertarik untuk menggunakannya di blog kalian? Berikut ini adalah cara menggunakannya :

• Pertama, masuk ke dasboard blog kalian.
• Masuk ke menu Template dan pilih Edit HTML.
• Masukkan kode di bawah ini tepat di atas kode </body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

• Jika sudah ada kode semacam itu, kalian bisa melompati langkah di atas.
• Masukkan kode di bawah ini tepat setelah kode di atas :

<script type='text/javascript'>
$(window).scroll(function(){
if ($(window).scrollTop() &gt;= 560){
$(&#39;#PopularPosts1&#39;).css({position:&#39;fixed&#39;,top:30});
} else {
$(&#39;#PopularPosts1&#39;).css({position:&#39;relative&#39;,top:0});
}
});
</script>

• Terakhir tinggal kalian simpan. 

Keterangan :

Kode yang berwarna ORANGE adalah jarak widget akan melayang, makdsudnya setelah halaman blog di scroll 560px ke bawah, maka widget baru akan melayang.

Kode yang berwarna BIRU adalah jarak widget akan melayang dari atas layar.

Kode yang berwarna HIJAU adalah kode ID widget. Kalian bisa menggantinya sesuai dengan ID widget yang akan kalian buat melayang. Untuk mengetahui ID widget tersebut, kalian bisa melihatnya di sini.

Bagaimana? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar dan klik tombol like di bawah ini.

Apa Yang Dimaksud Dengan Material Design?

Material Design adalah sebuah bahasa pemrograman visual yang dibuat oleh Google. Dengan Desain Material ini, Google mengharapkan agar para developer mampu mengembangkan sebuah sistem yang memberikan kenyamanan kepada user mengakses dari berbagai perangkat dan ukuran layar yang berbeda. Prinsip yang digunakan hampir sama dengan Responsive Design (Buka di sini : Apa Itu Template Blog Responsive?). Google ingin memberikan layanan terbaik bagi para pengguna layanannya. Ciri visual dari Desain material hampir sama dengan Desain Flat (Baca juga tentang Flat Design dan Flat Long Shadow) yaitu, simple, warna bersih dan lembut, efek animasi yang lembut, serta penggunaan shadow yang membedakannya dengan Desain Flat. Untuk lebih jelasnya kalian bisa melihat video berikut :

Fungsi utama yang diharapkan dapat berfungsi maksimal pada material design ini adalah fungsi pada mobile user (swiping dan tapping) tetapi tentunya tetap memperhatikan perangkat input pada komputer seperti mouse, keyboard, touch screen jadi tetap nyaman digunakan oleh pengguna Desktop. Berikut ini adalah beberapa contoh dari Material Design :

Gmail Inbox

Music Player

Calculator

Android Wear

Phone Contact

Bagaimana? Apakah kalian tertarik ingin menggunakan Desain Material? Saya sudah pernah membuatnya. Karena sederhana, saya bisa membuat beberapa animasi dengan Desain Material hanya dengan menggunakan PowerPoint. Sekian artikel dari saya. Semoga bermanfaat bagai kita semua. Jangan lupa tinggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Animasi Progress Loading Bar Seperti Youtube Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial Blogger tentang bagaimana cara membuat animasi progress loading bar seperti pada situs Youtube di blog. Jika kita jeli, saat membuka situs Youtube, saat proses loading akan ada bar berwarna merah yang menunjukkan proses load. Jika kalian belum mengerti, kalian bisa melihat contohnya dengan mengklik link demo di bawah ini :

Demo

Nah, bagaimana kalau kita juga membuatnya dan memasangnya di blog kita. Tentu akan sangat bagus dan blog kita akan terlihat seperti profesional. Kita juga tidak perlu terlalu takut akan memperberat blog karena loading bar ini sangat ringan. Bagaimana? Apakah kalian tertarik membuatnya? Berikut ini adalah caranya :

• Pertama, masuk ke dasboard blog kalian.
• Masuk ke bagian Template dan pilih Edit HTML.
• Masukkan kode di bawah ini tepat di atas kode </body> :

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

• Jika sudah, tinggal kalian simpan dan lihat hasilnya.

Keterangan :

Kode yang berwana BIRU adalah kode tebal bar. Kalian bisa menyesuaikannya.

Kode yang berwana HIJAU adalah kode warna bar. Kalian bisa menyesuaikannya.

Bagaimana? Berhasil bukan? Sekian artikel dari saya. Semoga bermanfaat bagi kita semua. Jangan lupa tinggalkan komentar dan klik tombol like di bawah ini.

Cara Membuat Efek Berjalan (Marquee) Pada Objek Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial blog. Sebenarnya tutorial ini sudah umum diketahui banyak blogger. Tetapi tidak masalah, saya akan membagikanya. Pertama, kalian haruslah tahu apa sebenarnya yang saya maksud dengan efek berjalan atau marquee itu. Marquee adalah kode HTML agar objek bisa bergerak atau berjalan. Marquee ini banyak diminati dan dipakai oleh para Blogger di dalam blognya karena sifatnya yang dinamis serta menarik untuk di lihat, efek ini juga biasa dipakai untuk menghemat tempat pada halaman blog. Untuk lebih jelasnya, kalian bisa mengklik link demo di bawah ini :

Demo

Bagaimana? Apakah kalian tertarik menggunakannya di blog kalian? Berikut ini adalah cara membuatnya :

• Pertama, masuk ke dasboard blog kalian.
• Masuk ke bagian Template dan klik Edit HTML.
• Letakan kode jQuery Library bawah ini tepat di atas kode </head> (Jika sudah ada kode yang sama atau sejenis, maka langkah dilewati saja).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/>

• Simpan kode CSS dibawah ini di atas kode </head> atau letakan tepat di atas kode ]]></b:skin> (Jika diatas kode ]]></b:skin> silahkan hilangkan kode <style> dan </style>) : 

<style>
.marquee { overflow: hidden; width:95%; /* Atur Lebar Marquee */ border:1px solid #ddd; /* Tambahan Border Atau Garis Tepi */ background:#eee; /* Kode Warna Background */ color:#333; /* Kode Warna Teks */ padding:5px; /* Kode Jarak Paddding */ }
</style>

•  Letakan kode Plugin Jquery Marquee external dibawah ini tepat di atas kode </head> :

<!-- Plugin jQuery Marquee --> <script src='https://seocipsokbanget.googlecode.com/svn/jquery-marque.js' type='text/javascript'/>

•  Letakkan kode JavaScript di bawah ini tepat sebelum kode </body> :

<script type='text/javascript'>
//<![CDATA[
// Settingan Default Marquee nya disini bro!
$('.marquee').marquee({
    //Atur kecepatan marquee ( Hitungan Milisecond ) :
    duration: 9000,
    //Atur 'Delay' Waktu Sebelum Marquee dimulai :
    delayBeforeStart: 0,
    //Atur Arah Marquee 'left' atau 'right' :
    direction: 'left',
    //Aktifkan Duplikat Marquee 'true' atau 'false'
    duplicated: false,
    //Atur Jarak Duplikat Marquee ( Hitungan Pixel ) :
    gap: 10,
    //Hentikan Marquee ketika di sentuh 'true' atau 'false'
    pauseOnHover: true
});
//]]>
</script>

• Kemudian simpan. 

Untuk menggunakannya, kalian bisa memanggilnya. Untuk teks kalian bisa memasukkan kode dibawah ini di post atau tempat lain :

<div class="marquee" data-duration='10000' data-direction="left/right/up/down"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></div>

Untuk menggunakannya pada gambar, kalian bisa menggunakankode di bawah ini :

<div class="marquee gambar" data-duplicated="true" data-duration="9000" data-direction="left/right/up/down">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAeuzoX0EpWRYlyi49zJVdeKzQKuakMq1V5O7jYytd0-eF5ixJGTMkrh4ffHA_pTruXBuQqmoHVtdRYDs2x7r4p3GAD4pxDajRF2Rk7I0vobhZ7gjBvR2PaxXe62Ln4Dhz4eGWt9FMo8/s1600/marquee1.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy54TMVOBreeqHWE5kyDm4PObGnypR3GJ4EDGekmhytxV4t0xtfugBVrdofGblBxwe6gc-o1ult9F8xlMAA3_IThwQW6VirP0INtEtHK69qrtGQ37vGxetluIu_tbthodU7j95h3T5q8I/s1600/marquee2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy54TMVOBreeqHWE5kyDm4PObGnypR3GJ4EDGekmhytxV4t0xtfugBVrdofGblBxwe6gc-o1ult9F8xlMAA3_IThwQW6VirP0INtEtHK69qrtGQ37vGxetluIu_tbthodU7j95h3T5q8I/s1600/marquee2.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxTc_vxIMjUQnTxMHOjqaqrhYh53btzyCnbWbYkDZg4NLn01kFzD0S8UMOotr1rrIJCxNU2dfZ7Sl7jpHQZNh1uWxxyfyj_ptw06xn7tIdaYkB3dUSDvBn4JsExdUlnVZacWLZmuh8Gs/s1600/marquee3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxTc_vxIMjUQnTxMHOjqaqrhYh53btzyCnbWbYkDZg4NLn01kFzD0S8UMOotr1rrIJCxNU2dfZ7Sl7jpHQZNh1uWxxyfyj_ptw06xn7tIdaYkB3dUSDvBn4JsExdUlnVZacWLZmuh8Gs/s1600/marquee3.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRSRuWal6olrMwgjJYL0WbRqmep_x3KW-yP2VmjVO5zmH8YvrAxPxMIRVKhuNDqDKR-OcV7NPJlwTgef7LfB8ZRvEaCMfov27TPBx520iT5SKreiu6dNlSYwUfNtFOBWXf0ovpUA-01w/s1600/marquee4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRSRuWal6olrMwgjJYL0WbRqmep_x3KW-yP2VmjVO5zmH8YvrAxPxMIRVKhuNDqDKR-OcV7NPJlwTgef7LfB8ZRvEaCMfov27TPBx520iT5SKreiu6dNlSYwUfNtFOBWXf0ovpUA-01w/s1600/marquee4.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKzOEZigWqGK9zFFEX-Z_0J6Qj78cXTUyVpG3Fnl_Zy2Gh_MBS15COuDP2ZnWfq-EnlxyKC-MPYiVv0uK91Z5jEptqg3Ggfmt3kAqa4WNGsg9jLCyFBBXFOc4EgUZ95v5JHiM7qrnbsM/s1600/marquee5.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKzOEZigWqGK9zFFEX-Z_0J6Qj78cXTUyVpG3Fnl_Zy2Gh_MBS15COuDP2ZnWfq-EnlxyKC-MPYiVv0uK91Z5jEptqg3Ggfmt3kAqa4WNGsg9jLCyFBBXFOc4EgUZ95v5JHiM7qrnbsM/s1600/marquee5.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNtMfE7FxIRhhmSlsh50cRB8BTzZAKpg7fEGmO7zxbXZb6wXceHWHCXYGAViT5U9WU295jkxas295-tDBuEYjY6EpQEehE-jjWF1Q1ZV2yiUa_keMff8mvbxsyKo7u-KdVLiKso_yMtw/s1600/marquee6.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNtMfE7FxIRhhmSlsh50cRB8BTzZAKpg7fEGmO7zxbXZb6wXceHWHCXYGAViT5U9WU295jkxas295-tDBuEYjY6EpQEehE-jjWF1Q1ZV2yiUa_keMff8mvbxsyKo7u-KdVLiKso_yMtw/s1600/marquee6.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRElPtSIuEPSCVzwAY33S2qoB80NXrfNMLcx3Lq3_6638r4rlaAAmRmq-9c8BNVMtZmoKU7rzKfWYevzffW9nY3iE2ZGwMQ3PxZ_p7zIwIVSZPKGK9ZbMLLv-RfGllXTNwmoAQATFsU/s1600/marquee7.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xRElPtSIuEPSCVzwAY33S2qoB80NXrfNMLcx3Lq3_6638r4rlaAAmRmq-9c8BNVMtZmoKU7rzKfWYevzffW9nY3iE2ZGwMQ3PxZ_p7zIwIVSZPKGK9ZbMLLv-RfGllXTNwmoAQATFsU/s1600/marquee7.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn2i8jXxt73RPsAFb1YAo5kPQs6G0d0MAVqlO20vwzlgJwTsVCksA8FjKkwQc5CP_b_dtELfzagbfuFFFKIKsIGxq3w3rgQ4MjVZoltONb0z_Qlvpn6rLqQyK2WpGUXVa0zG-gp73bSc/s1600/marquee8.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihn2i8jXxt73RPsAFb1YAo5kPQs6G0d0MAVqlO20vwzlgJwTsVCksA8FjKkwQc5CP_b_dtELfzagbfuFFFKIKsIGxq3w3rgQ4MjVZoltONb0z_Qlvpn6rLqQyK2WpGUXVa0zG-gp73bSc/s1600/marquee8.jpg" /></a></div>

Keterangan :

Duplikat marquee menggunakan atribut data-duplicated="true/false".

Menentukan kecepatan marquee menggunakan atribut data-duration="value" ( Hitungan Milisecond ).

Menentukan arah Marquee menggunakan atribut data-direction="left/right/up/down" ( Ke kiri , kanan, atas, bawah ).

Kode berwarna CYAN adalah kode link tujuan ketika objek diklik. Kalian bisa ,menyesuaikannya sendiri.

Kode berwarna KUNING adalah kode link gambar. Kalian bisa ,menyesuaikannya sendiri.

Bagaimana? Mudah bukan? Sekian artikel saya kali ini. Semoga bermanfaatbagi kita semua. Jangan lupa meninggalkan komentar dan like di bawah ini.