Sabtu, 20 Desember 2014

Posted on   by   in   with Tidak ada komentar  

Cara Membuat Persentase Untuk Scrollbar Blog Yang Valid


Cara Membuat dan Memasang Persentase Pada Scrollbar Blog Yang Valid - Sebagian Blogger banyak yang memasang persentasepada Scrollbar blognya , hal itu berguna untuk mengukur berapa persen anda menggulang tampilan layout blog tersebut dalam bentuk persen .

Widget persentase ini cara pemasangannyan berbeda dengan tutorial blog lain , karena hasilnya nanti tidak ada error ketika anda cek di valdator html5 maupun css3 , sehingga dengan memasang widget ini blog anda akan tetap valid . 


Bagi anda yang penasaran seperti apakah the widget Persentase Scrollbar Blog ? silakan perhatikan gambar berikut


Cara Membuat Persentase Untuk Scrollbar Blog Yang Valid

Berikut Cara Membuat Persentase Untuk Scrollbar Blog Yang Valid

1. Pertama silahkan sobat masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode script dibawah ini, lalu Paste diatas kode ]]></b:skin>
/* Scroll Persentase */
#scroll{display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#4B4B4B;color:#FFF;border-radius:3px}
#scroll:after{position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;border:4px solid transparent;border-left-color:#4B4B4B}
Catatan :
- Kode 5px : Jarak dari scrollbar, semakin besar angka yang diberikan maka akan semakin jauh letaknya.
- Kode 3px 8px : Merupakan tinggi dan  lebarnya kotak persen
- Kode yang berwarna #4B4B4B : Warna background kotak persen
- Koda yang berwarna #FFF : Warna huruf pada kotak persen
- Kode yang berwarna 3px : Memberikan efek melengkung pada kotak persen

5. Cari kode <body>
6. Copy kode dibawah ini, lalu Paste dibawah kode <body>

<div id='scroll'/>
7. Cari kode </body>
8. Copy kode dibawah ini, lalu Paste diatas kode </body>
<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>
9. Cari kode </head>
10. Copy javascript berikut, lalu Paste diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
Catatan :
Jika blog Anda sudah memiliki JavaScript seperti diatas, Anda tidak perlu memasangnya lagi. Tetapi untuk jaga-jaga lebih baik memasangnya saja.

   Nah itulah Cara Gampang Membuat Persentase Untuk Scrollbar Blog Yang Valid , semoga tutorial tersebut bermanfaat bagi anda . oh iya jika anda merasa kesulitan untuk memasang widget Persentase pada scrollbar blog anda , silahkan komentar di bawah

Selamat Mencoba
Share:  

Kamis, 18 Desember 2014

Posted on   by   in   with Tidak ada komentar  

Cara Menghilangkan Tombol Tang dan Obeng Di Blog

Tombol tang dan obeng yang muncul di halaman blog saat kita sedang dalam keadaan login berfungsi untuk melakukan edit pada bagian tertentu secara cepat. Fungsi ini memang penting bagi kita yang sering melakukan editing dan ingin melakukannya dengan cepat. Karena dengan hanya mengklik ikon tombol tang dan obeng tersebut kita akan langsung diarahkan menuju ke bagian elemen laman yang dituju untuk diedit atau dimodifikasi.


Meskipun demikian, ada juga blogger di antara kita yang tidak suka dan merasa kurang nyaman dengan tampilan tang dan obeng ini. Jika kita termasuk dalam salah satu blogger yang tidak begitu suka dengan tampilan tang dan obeng saat kita berada dalam keadaan login, kita dapat menghilangkannya dari tampilan blog milik kita. Caranya cukup mudah karena kita hanya perlu menambahkan kode yang fungsinya untuk menghilangkan tampilan tang dan obeng tersebut.

Adapun cara untuk menghilangkan tang dan obeng di blog ini antara lain sebagai berikut:

  1. Masuk/Login ke akun blogger.
  2. Klik rancangan.
  3. Klik edit HTML.
  4. Klik expand template widget.
Cari kode berikut. ]]></b:skin>

Masukan kode berikut tepat di atasnya ]]></b:skin>


.quickedit{
display:none;
}

Klik simpan template dan selesai.

Selamat Mencoba, salam Rahmat Creations
Share:  
Posted on   by   in ,   with Tidak ada komentar  

Cara Menambahkan jQuery Pada Template Blogger

Cara Menambahkan jQuery Pada Template Blogger - Mungkin sahabat sudah tidak asing lagi dengan istilah jQuery. Apa itu jQuery?  jQuery adalah sebuah Library Javascript yang cepat dan ringkas yang mana dapat menyederhakan document traversing, event handling, animating, dan AJAX interactions untuk pengembangan web secara cepat.

Cara Menambahkan jQuery Pada Template Blogger

Secara sederhana, jQuery sangat diperlukan untuk membuat web dinamis. JQuery akan menampilkan efek, animasi, dan fungsi-fungsi yang sangat menarik lainnya. Banyak plugin / trik yang menggunakan jQuery dan tidak akan berjalan tanpa jQuery. Ukurang jQuery ini sangat kecil dan tidak membuat loading blog jadi berat cuman 100kb.

Untuk Menambahkan jQuery Pada Template Blogger ikuti langkah-langkah berikut ini:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan kode di bawah ini sebelum/di atas </head> 

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

Pemasangan jQuery, hanya 1 dalam template. Tidak boleh ada 2 script atau lebih, karena akan mengakibatkan beberapa script tidak akan bekerja. Apabola ingin mengganti dengan yang terbaru, cukup ganti link-nya saja. Apabila ada tips, atau tutorial yang menggunakan jQuery, sobat tidak perlu menambahkan lagi.
4. Simpan template.
5. Selesai
Share: