Cara Membuat Animasi Setelah Halaman Web/Blog Termuat

Cara Membuat Animasi Setelah Halaman Web/Blog Termuat

Kali ini saya akan kembali membahas tentang pembuatan efek/animasi sederhana, ya walaupun saya katakan sederhana namun efek ini sangat mungkin untuk dikembangkan oleh kawan dikarenakan saya hanya memberikan contoh sederhana dan sangat mendasar tentang penggunaannya.

Untuk kali ini saya akan kembali menggunakan jQuery.

Apasih yang saya maksud dengan Cara Membuat Animasi Setelah Halaman Web/Blog Termuat., mungkin kalian pernah liat ada blog yang memasang animasi seperti ini namun kalian tidak mengenalinya, contoh seperti elemen yang awalnya tidak ada namun setelah sekian detik tiba-tiba muncul dari samping/atas/bawah atau warna halaman Web/Blog yang awalnya kuning setelah sekian detik berubah menjadi merah, nah itu bisa kita buat sendiri dengan cara ini.


Seperti itulah gambarannya

Praktek Yuk !


Oke, tidaklah mewah kode yang akan kita gunakannya kali ini karena hanya menggunakan seupil baris jquery dan dioleskan dengan sedikit CSS.
Pasang jquery dibawah ini diatas </body>

<script>
$(window).on('load',function(){
 $('.paragraf12').addClass('muncul')
})
</script>

Kan tadi pake CSS, kenapa gak CSSnya duluan yang dipasang ?
Oke, ini dimaksudkan karena saya akan menjelaskan sedikit tentang sebuah event yang akan kita gunakan yaitu onload.
Sesuai namanya, onload atau bahasa Indonesianya pada (saat)/(setelah) termuat yang mengartikan bahwa script akan mengeksekusi fungsi yang ada didalam kurung kurawal itu pada kondisi halaman telah sepenuhnya termuat atau telah terbaca XMLnya secara utuh. Jadi kalo web/blog yang menggunakan cara ini namun saat dibuka blognya ngadat karena jaringan visitor lemboy, maka fungsinya tidak akan tereksekusi dan animasi pun tidak akan jalan. Seperti itulah sedikit pemahaman saya.

Seperti yang saya katakan diatas, kita menggunakan sedikit CSS. Mengapa kita perlu CSS ?. Seperti ini, coba kawan lihat lagi kedalam jQuery diatas, terdapat sebaris kode yang berisi

$('.paragraf12').addClass('muncul')

Yang artinya Class ditambahkan dengan Class yang baru, yang namanya Class pasti akan berkaitan dengan namanya CSS, dikarenakan akan ada perubahan design CSS pada saat jquery menambahkan Class yang baru. Oke inilah CSSnya

.paragraf12 {opacity:0;transform:translate(0,60px);transition:1s}
.paragraf12.muncul {opacity:1;transform:translate(0,0)}

Terdapat 2 class yang sama namun berbeda, jika kita lihat class yang kedua maka kita akan melihat adanya tambahan Class baru dibelakangnya yang juga dibarengi dengan Value&Property yang berbeda.

Kenapa keduanya berbeda ?

Ini sederhananya saya jelaskan.
Pada Class pertama kita akan melihat opacity yang bernilai 0 yang artinya transparansi elemen akan 100% atau tidak terlihat dan transform elemen yang di Translating atau digerakkan secara vertikal dari posisi semula dikarenakan nilainya 0,60px (H,V), sedangkan Class kedua lebih kepada menetralkan elemen ke posisi Semula yang awalnya opacitynya 0 menjadi 1 yang artinya elemen akan terlihat kembali dan Translating atau digerakkannya elemen ke posisi Semula atau 0,0.

Perbedaan akan jelas terlihat pada saat sebelum dan sesudah termuatnya halaman Web/Blog, ini dikarenakan Pada Class pertama CSS akan tereksekusi pertama kali saat anda masuk halaman namun belum sepenuhnya termuat secara utuh, jadi elemen yang diberikan CSS ini akan terlihat seperti menghilang padahal sebenarnya tidak, kenapa tidak ?
dikarenakan CSS hanya menggeser elemen kebawah sejauh 60px dan dibuat transparan (tidak terlihat) seakan elemen menghilang entah kemana.
Nah setelah halaman web termuat secara utuh, CSS yang kedua akan tereksekusi dan sesuai fungsinya dia akan mengembalikan elemen ke posisi semula jadi seakan elemennya melayang ke posisi awal,
 *Yang maksudnya utuh adalah browser tidak akan melakukan loading lagi.


Untuk penggunaannya mudah saja, cukup mengubah Class diatas dengan Class elemen yang ingin diberi animasi.

Mungkin panjang penjelasannya yah kawan, tapi semoga saja dapat dipahami.
Sekian artikel saya, terima kasih.

Membuat Effect Parallax Dengan Jquery Sederhana

Parallax

Parallax, ya apa itu parallax ?
Menurut wikipedia, Parallax adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu objek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.
Baik, itu adalah pengertian parallax menurut wikipedia.
Jika kita melihat kutipan diatas, kita menemukan sebuah definisi singkat seperti yang saya tandai dengan tulisan cetak miring, iya saya harap melalui definisi singkat parallax tersebut kawan mendapatkan gambaran tentang effect parallax yang akan kita buat kali ini.

Parallax ini menurut saya adalah effect sederhana yang luar biasa keren, dengan parallax kita bisa membuat sebuah animasi saat scrolling, membuat sebuah animasi pada satu object yang akan bekerja pada saat scrolling itu sangat mungkin sekali dengan parallax. Jika masih penasaran apa itu parallax, cek demo berikut.


Bagaimana, keren bukan ?
Itu hanyalah satu dari sekian banyak effect yang bisa kita buat, dan itu adalah dasar parallalax yang saya buat supaya kawan dapat mengembangkan.
Effect parallax ini work dan kompatibel pada blogger pastinya, karena saya sudah menggunakannya pada blog saya yang lain, silahkan cek disini.


Praktek

Seperti yang tertulis pada judul,  Membuat Effect Parallax Dengan Jquery Sederhana, ya tidak ada yang sulit disini. Letakkan jQuery ini diatas </body>


<script>
$(window).scroll(function(){
 var jarak=$(this).scrollTop();
 $('.UBAHCLASS-INI').css ({
 transform : 'translate(0px,'+ jarak/1.3 +'%) rotate('+ jarak/5 +'deg)'
 });
})
</script>

Nah, tidaklah sepanjang yang kawan pikirkan bukan ?. Oh ya, pastikan kawan sudah memasang library jQuery yah supaya effect ini dapat berjalan.
Didalam jquery sangat jelas kita menjalankan sebuah CSS pada object, yaitu transform translate yang memiliki fungsi menggeser secara vertikal & horizontal object, dan transform rotate yang memiliki fungsi memutar object dengan satuan deg. Dengan penghitungan yang dinamis yang mengacu pada angka yang dihasilkan variabel, transform dapat terlihat hidup. Sebagai informasi, kita sudah membuat sebuah variabel bernama jarak.

Penyesuaian

Untuk penyesuaian, silahkan ubah class diatas dengan class atau ID object yang ingin dibuat effect parallax.

Oke itu saja, saya rasa cukup jelas

Membuat Smooth Scroll To Section ID

ScrollID

Entahlah apakah judul ini tepat untuk penamaannya yang pasti saya tidak terlalu tahu tentang namanya yang penting kerja =D. Cek link berikut.


Sebelumnya, ID yang saya maksudnya itu contohnya seperti #header-wrapper (yang bertanda pagar).
Cara ini biasanya digunakan pada halaman F.A.Q, pengunjung akan diberikan link pertanyaan dan jika link di klik otomatis pengunjung akan scrolling ke jawaban.
Smooth Scroll ini fungsinya hampir sama seperti scroll to top, hanya bedanya jika scroll to top mengarahkan kita ke atas blog sedangkan Smooth Scroll To ID yang saya maksud ini mengarahkan kita ke ID tertentu (silahkan lihat pada Demo). Misalnya kita ingin membuat sebuah link yang akan membawa pengunjung ke bagian post dengan cara scrolling, kita bisa gunakan <a href='#post-wrapper' class='page-scroll'>Bawa Diriku</a>. Kuncinya hanyalah pada class page-scroll, karena kita akan menambahkan fungsi pada class tersebut menggunakan jQuery.

Lagi dan lagi jQuery :D, saya beralasan menggunakan jQuery lebih mudah dalam membacanya daripada menggunakan Javascript Dasar. Jadi pastikan kawan sudah memasang Library Jquery.

Mari kita mulai.
Karena saya menggunakan effect easing, jadi pasang dulu library easingnya diatas </body>

<script src='https://rawgit.com/brayenid/borneoscript3/master/jquery.easing.1.3.js'/>

Lalu tempelken jQuery berikut ini diatas </body>

<script>
$('.page-scroll').on('click',function(e){

  var href = $(this).attr('href');
  
  var bungkusanhref = $(href);

  $('html, body').animate({
    scrollTop: bungkusanhref.offset().top - 50}, 2000, 'easeOutExpo');
e.preventDefault()
});
</script>
Contoh penggunaan :
<a href='#main' class='page-scroll'>Scroll To Main</a>
Seperti yang saya katakan diatas, kita akan memberikan fungsi pada .page-scroll sehingga link yang kita beri class page-scroll dapat menjalankan perintah kita untuk scrolling.
Jika biasanya kita meng-klik elemen yang ber-atribut href maka halaman akan reload dan misalnya kita membuat membuat href='#main' otomatis URL yang kita buka akan menambahkan di belakangnya menjadi babla.com#main. Namun pada kasus ini hal itu tidak akan terjadi, karena kita telah menambahkan e.preventDefault(), perintah ini berfungsi untuk mencegah halaman melakukan reload, jadi jika kita mengklik link yang memiliki class page-scroll maka link tersebut tidak akan melakukan reload.

Saya harap artikel ini dapat dimengert. Sekian dari saya, terima kasih.

Membuat Daftar Menu Dengan Toggle

Toggle Menu
Oke sebagai awalan saya ingin memberitahu bahwa toggle yang dimaksud bukan angka togel yah =D.
Kali ini singkat saja, saya akan memberikan sebuah tutorial tentang cara membuat menu dengan memanfaatkan fungsi toggle. Umumnya fungsi ini digunakan untuk membuat sebuah spoiler, tapi yang lain juga bisa sih dikarenakan toggle itu menyembunyikan sebuah elemen, dan elemen itu punya arti luas, bisa gambar, foto, image, picture, dll =D.

Sekarang kita akan membuat sebuah daftar menu yang dapat di show/hide dengan satu tombol. Cek link berikut.


Oke kita langsung praktek.
Sebelumnya pastikan kamu sudah memasang library jQuery dan Font-Awesome.


<style>
.daftartaut li:last-child {margin-bottom:-16px}
.daftartaut li:first-chiild{padding-top:4px}
.daftartaut li a {font-size:14px;color: #fff;padding-left: 3px;text-transform: uppercase;text-decoration: none;}
.daftartaut li {padding: 6px}
.daftartaut li:hover {background:#222}
.daftartaut li:hover a {color:#fff}
#tombol3{padding:5px;color: #fff;border:none;background: transparent;font-size: 24px;cursor:pointer;transition: .3s}
#buka{display:none;text-align:left;color:#fff;position: absolute;min-width: 150px;height:auto;background: #333;margin-top: 8px;box-shadow:1px 1px 3px rgba(0,0,0,0.5)}
.kotakkan {width:30px;height:30px}
.list-unstyled {padding-left: 0;list-style: none;margin-top:0}
</style>
<div class='kotakkan'>
<button id='tombol3'><i class='fa fa-bars'></i></button>
<div class='collapse' id='buka'>
<ul class='daftartaut list-unstyled'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Faq</a></li>
<li><a href='#'>Partner</a></li>
</ul>
</div>
</div>
<script>
 $(document).ready(function(){
  $("#tombol3").click(function(){
    $("#buka").slideToggle(700)
  });
});

</script>
Sengaja saya satukan dan tidak tercerai berai kodenya =D itu dimaksudkan supaya kawan yang belum terlalu memahami pemasangan kodenya bisa lebih termudahkan.
Jika kamu mau memasangnya didalam header, kamu bisa taruh dibawah kode header contohnya <div id='header-wrapper'> atau <div class='header'> atau kode pembungkus header yang serupa.
Untuk mengatur posisi tombol toggle, saya sudah pasangkan containernya yang diberi class .kotakkan silahkan diubah sendiri posisi margin jika belum tepat.

Silahkan ditanyakan jika kurang mengerti. Sekian dan terima gaji.

Membuat Dropdown Menu Responsive Dengan Effect Float

Menu

Wah panjang sekali ini judul, sebenarnya ini menu lebih menggunakan position Fixed dan bukan float :D, tetapi karena menu ini seperti melayang maka saya menggunakan kata float.

Kebetulan menu ini basicnya saya gak tau dari mana, yang pasti menunya ini saya dapat dari salah satu blog saya lupa namanya, maaf jika ada yang merasa pembuat menu ini bisa mengabarkan saya.
Pada dasarnya menu ini hanya berbentuk sebuah daftar menu (listed/li) yang di inline-block biasa dan posisinya statis yang artinya tidak bergerak. Nah, disini kita akan mencoba membuat menu ini dapat bergerak dalam posisi tertentu, yang artinya posisi awal menu berada bawah header namun setelah kita scroll kebawah dan kita melewati menu otomatis si menu bakal nempel diatas dan gak bakal lepas sampai kamu scroll lagi balik keatas. Silahkan klik link dibawah.


Coba di scroll saja ke bawah dan lihat menu yang dibawah header otomatis mengikuti.

Disini kita akan menggunakan sedikit jQuery, jadi pastikan kamu sudah memasang library jQuery, jika belum kamu bisa taruh kode dibawah ini diatas </head>


<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Namun jika sudah dipasang, abaikan saja.
Selanjutnya kita akan membuat CSSnya dulu. Salin CSS dibawah ini kedalam <style>...</style>
 

.menu {background: #4B304E;border-bottom:1px solid #2B304E;width: 100%;text-align:center;z-index: 9999}
.menu.nempel {position: fixed;top:0}
#menu1 {display: block;margin-top: 0;background: #aaa;}
.menu {display: block}
.menu li {text-align:left;display: inline-block;position: relative;z-index: 100;}
.menu li:first-child {margin-left: 0;}
.menu li a {font-weight: 400;text-decoration: none;padding: 10px 15px;display: block;color: #EC7263;transition: all 0.2s ease-in-out 0s;}
.menu li a:hover,.menu li:hover>a {color: #fff;background: #533557}
.menu ul {visibility: hidden;opacity: 0;margin: 0;padding: 0;width: 150px;position: absolute;left: 0px;background: #fff;box-shadow: 1px 1px 2px rgba(0,0,0,0.4);z-index: 99;transform: translate(0,-10px);transition: all 0.2s ease-out;}
.menu ul li {display: block;float: none;background: none;margin: 0;padding: 0;}
.menu ul li a {font-size: 12px;font-weight: normal;display: block;color: #666;background: #fff;}
.menu ul li a:hover,.menu ul li:hover>a {background: #eee;color:#666;}
.menu li:hover>ul {visibility: visible;opacity: 1;transform: translate(0,0);}
.menu ul ul {left: 149px;top: 0px;visibility: hidden;opacity: 0;transform: translate(0,-10px);transition: all .3s ease-out;}
.menu ul ul:after {left: -6px;top: 10%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(255, 255, 255, 0);border-right-color: #fff;border-width: 6px;margin-top: -6px;}
.menu li>ul ul:hover {visibiity: visible;opacity: 1;transform: translate(0,0);}
.responsive-menu {display: none;width: 100%;padding: 20px 15px;background: #ddd;color: #333;text-transform: uppercase;font-weight: 600;border-bottom: 1px solid #aaa;transition: .3s}
.responsive-menu:hover {background: #eee;color: #333;text-decoration: none;}

Kode yang bertanda merah (.menu.nempel) tidak akan berfungsi sebelum kita menaruhkan jQuerynya. Sebelum kita menaruh jQuerynya, kita taruh dulu HTML berikut.


<nav class='menu1' id='menu1' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-bars'/> Menu</a>    
    <ul class='menu'>
      <li><a href='/'>HOME</a></li> 
      <li><a href='http://id-mufcnews.blogspot.co.id/p/blog-page_16.html'>STATIC PAGE</a></li>
      <li><a href='http://id-mufcnews.blogspot.co.id/404'>ERROR 404</a></li>
      <li><a href='#'>HOSTING</a>
        <ul class='sub-menu'>
   <li><a href='#'>250 mb</a></li>
   <li><a href='#'>Bundling</a>
     <ul>
              <li><a href='#'>Website + 1000mb</a></li>
              <li><a href='#'>Website + 1500mb</a></li>
              <li><a href='#'>Website + Unlimited + .com</a></li>
            </ul>
          </li>
       </ul>
     </li>
     <li><a href='#'>OTHER</a>
 <ul class='sub-menu'>
   <li><a href='#'>Contact Us</a></li>
   <li><a href='#'>Affiliate</a></li>
   <li><a href='#'>Job</a></li>
 </ul>
     </li>
   </ul>
</nav> 

Dimana kode diatas ditaruh ? Sebenarnya peletakan beberapa baris kode seperti yang diatas tidaklah mutlak asalkan tetap berada didalam <body>...</body> itu tergantung anda ingin menaruhnya dimana, jika anda ingin menaruhnya diatas header bisa taruh diatas <header>, tapi kalau mau menaruhnya dibawah header bisa ditaruh dibawah </header>, cukup logis bukan ?

Kemudian kita akan menaruh jQuery yang isinya sebagai berikut diatas </body>.


 <script>
  $(window).scroll(function(){
    var jarak=$(this).scrollTop();

  if (jarak > $('.menu1').offset().top -1) {
    $('.menu').addClass('nempel');
  }
  if (jarak < $('.menu1').offset().top -1) {
    $('.menu').removeClass('nempel');
  }
});
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
</script>

Untuk kode yang merah itu berfungsi untuk menambah dan menghapus class, itulah yang akan otomatis menambah class .menu menjadi .menu.nempel, nah diatas tadi kita sudah membuat sebuah class dalam CSS yang berisi .menu.nempel {position:fixed;...} , nah sudah jelas jika sebuah elemen diberi property position dan diberi value fixed otomatis elemen tidak lagi berada/terkurung didalam sebuah container namun dia posisiya lebih fleksibel karena dia sekarang posisinya mengikuti posisi window, kemanapun anda scrolling (kebawah/keatas) elemen tersebut akan ikut, begitu sederhananya. Namun kita sudah memasang sebuah perintah dalam kondisi tertentu dalam baris kode
  if (jarak > $('.menu1').offset().top -1) {
    $('.menu').addClass('nempel');
  }
  if (jarak < $('.menu1').offset().top -1) {
    $('.menu').removeClass('nempel');
  }
Jika kita membacanya secara bahasa manusia isinya bisa berarti
Aku        : jQuery, jika jarak berada lebih dari (melewati) .menu1 (pembungkus menu) maka jalankanlah fungsi berikut
jQuery    : Apa fungsinya ?
Aku        : Tambahkan .nempel pada .menu (menjadi .menu.nempel)
Nah diatas adalah perintah pertama, kemudian kita tambah lagi dibawahnya perintah hilangkan class supaya dia kembali keposisi semula.
Aku : jQuery, jika jarak berada kurang dari (sebelum/diatas) .menu1 hilangkanlah .nempel (menjadi .menu saja)

Sebagai informasi, sebelumnya kita sudah membuat variabel jarak yang berisi "Seberapa jauh jarak kita scroll ke bawah dari atas yang didefinisikan dalam bentuk angka". Sebenarnya kita dapat melihat angka tersebut melalui console log, namun kita tidak penting untuk tau karena yang jalankan fungsi adalah jQuery :D.
$(window).scroll(function(){
    var jarak=$(this).scrollTop();
$(this) sama saja dengan selector yang dimaksud, atau dalam kasus ini $(this)=$(window).

Sebenarnya $('.menu1').offset().top -1 itu menghasilkan sebuah angka (namun kita hanya bisa melihatnya dengan console log), yang artinya seberapa jauh jarak dari atas ke .menu1, karena kita menggunakan offset().top-1 maka artinya menjadi "seberapa jauh jarak dari atas ke .menu1 dikurangi 1". (seandainya jaraknya adalah 300, maka akan dikurangi menjadi 299), saya harap dapat dipahami karena saya bukan expert jQuery jadi mohon dikoreksi jika salah.

Responsive Menu

Untuk kode orange itu adalah kode yang membuat si menu tadi menjadi responsive tepatnya saat ukuran window browser 767px, saat itu dia akan menjalankan #resp-menu dan mengubah menu yang inline-block tadi kedalam sebuah toggle. Toggle itu yang 4 nomor itu loh =D. Dalam jQuery toggle itu fungsinya memunculkan dan menyembunyikan elemen tertentu. Yang artinya menu akan disembunyikan dan akan dimunculkan jika ditekan tombol togglenya.

Selesai, sekali lagi saya juga masih proses belajar jquery ini :D, jadi penjelasan saya masih kelas pemula, jika ada yang salah tolong dikoreksi.
Sekian dan terima kasih.

Saya lupa menu responsive ini menggunakan font awesome, satu aja sih :D tapi dipasang aja font awesomenya gan

Membuat Tombol Salin Artikel Instan Untuk Blogger

Copy
Akhirnya saya bisa menulis tentang tutorial blogger lagi, kali ini saya akan menulis tentang "Membuat Tombol Salin Artikel Instan Untuk Blogger". Mungkin anda bertanya, apa maksudnya tombol salin artikel instan ? sebenarnya hal ini terlintas begitu saja dipikiran saya untuk membuatnya karena pengalaman saya dulu yang sering sekali membuat makalah untuk tugas sekolah dengan mencari referensi di google, banyak memang yang menyediakan materi, tetapi artikelnya panjang-panjang, saya selalu kesulitan untuk menyalin ke Ms.Word, hal ini dikarenakan jika saya menekan CTRL+A yang terjadi malah seluruh elemen blog terseleksi, jika saya menyeleksi secara manual terkadang setelah dipastekan ke word hasilnya kadang kacau, seperti warna font, iklan, ukuran, jenis font. Nah dari situ saya timbul ide untuk memudahkan mereka yang ingin mencari materi di blog dengan lebih efisien (efisien dalam seleksi, tapi jika sudah di paste ke word, tulisan perlu sedikit diatur lagi, hanya enter saja).

Tetapi sepertinya hal ini tidak terlalu penting bagi para blogger yang protektif terhadap artikelnya, yang memasang JS anti seleksi, klik kanan, copy. Tetapi bagi para blogger yang blognya dikhususkan untuk menulis sebuah materi belajar, menurut saya cara ini sangatlah perlu. (Para pelajar butuh materi anda guru)

Oke mulai saja, pastikan sobat sudah memasang Jquery pada blog sobat, jika belum tempel kode dibawah ini diatas </head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Tambah JS dibawah ini diatas </body>

<script src='https://rawgit.com/brayenid/borneoscript/master/bryncopy.js'/>

Kemudian tempelkan CSS ini sebelum </style>

.tombol {background:#eee;cursor:pointer;padding:4px;border-radius:4px;border:1px solid #1abc9c;transition:all .3s ease-in-out;float:right}

Terakhir, letakan dimana saja kawan mau tombol "salin"nya, contohnya saya memasangnya didalam <div class='post-info'>....</div>, tentunya berbeda, mungkin blog sobat menggunakan post-info yang berbeda (atau tidak menggunakannya). Sobat juga bisa memasangnya diatas <div id='related-posts'> (diatas related posts masing-masing)

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<a class='tombol' title='Klik Untuk Salin' onclick='copyToClipboard(&apos;.post-body&apos;)'>Salin Artikel Ini</a>
</b:if>

Note : Perhatikan class warna merah, itu adalah class dari body artikel saya, silahkan sesuaikan class body artikel blog sobat.

Nah selesai, jika ada pertanyaan soal tutorial diatas, sobat bisa ajukan pertanyaan di bawah. Terima kasih.

Membuat Widget Scroll To Top Dengan Jquery

Scroll To Top Dengan Jquery

Kali ini, saya akan memberikan Tutorial kepada sobat Blogger tentang cara Membuat Widget Scroll To Top Dengan Jquery.
Sobat mungkin sudah tahu apa fungsi dari Scroll to top ini, pastinya hehhe.
Ya, fungsi dari Scroll to top berfungsi untuk memudahkan kita untuk Kembali keatas laman suatu Website atau Blog dengan cepat dengan hanya klik satu Tombol saja.
Untuk contohnya, sobat bisa lihat Scroll to top yang saya Gunakan sekarang,
Nah, bagaimana ? apakah sobat tertarik untuk menggunakannya, jika Sobat tertarik, sobat bisa ikuti cara berikut :
- Copy Code Dibawah ini
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a href="http://my-topsite.blogspot.com"></a><a id='rb-top' style='display: none; position: fixed; bottom: 1px; Right:0%; cursor:pointer;font:12px arial;'><img src='http://4.bp.blogspot.com/-Tqk9j1aAwKI/T_ls9irVuLI/AAAAAAAAAkQ/qL_RswP2DtE/s1600/rb+back+to+top+7.png' width="50px" height="50px"/></a>
- Tempelkan Pada Sidebar, Footer atau Header sobat dengan cara menambahkan Gadget pada Tata letak.
Note :
Ganti Tulisan yang berwarna kuning dengan Url Blog sobat.
Ganti Tulisan yang berwarna Orange dengan Posisi Icon Scroll To Top yang sobat inginkan.
Ganti Tulisan yang berwarna Biru muda dengan URL Gambar Icon yang sobat inginkan.
Ganti Tulisan yang berwarna Hijau muda dengan ukuran Icon Scroll to top yang sobat inginkan.

Demikian Artikel dari saya, semoga bermanfaat.

Cara Pasang Translator Ringan Diblog

Kali ini saya akan berbagi kepada para blogger tentang "Cara Memasang Translator Ringan" di blog.
Kenapa kita harus memasang Translator di blog kita, karena Translator itu sangat penting untuk sebuah blog karena pengunjung blog kita tidak hanya datang dari dalam saja tetapi juga dari luar apalagi jika blog kita berada dipucuk, pasti banyak pengunjung yang berasal dari luar.
Ok deh, kalau tertarik untuk memasang translatornya di blognya
silahkan Copy Kode berikut lalu pasang dimanapun anda mau
entah itu melalui Layout / Edit HTML
berikut kode scriptnya
<style type="text/css">
#translator-wrapper {
  display:block;
  width:200px;
  border:1px solid #0A340A;
  background-color:white;
  overflow:hidden;
  position:relative;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  width:100%;
  color:black;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#0A340A;
  border:none;
  color:white;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:30px;
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:5px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:13px;
  margin-top:-5px;
}
#translator-wrapper a:hover {background-color:#0A2C0A}
#translator-wrapper a:active {background-color:#082408}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
</style>
<h3></h3>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected />English
        <option value="id" />Indonesian
        <option value="af" />Afrikaans
        <option value="sq" />Albanian
        <option value="ar" />Arabic
        <option value="hy" />Armenian
        <option value="az" />Azerbaijani
        <option value="eu" />Basque
        <option value="be" />Belarusian
        <option value="bn" />Bengali
        <option value="bg" />Bulgarian
        <option value="ca" />Catalan
        <option value="zh-CN" />Chinese
        <option value="hr" />Croatian
        <option value="cs" />Czech
        <option value="da" />Danish
        <option value="nl" />Dutch
        <option value="en" />English
        <option value="eo" />Esperanto
        <option value="et" />Estonian
        <option value="tl" />Filipino
        <option value="fi" />Finnish
        <option value="fr" />French
        <option value="gl" />Galician
        <option value="ka" />Georgian
        <option value="de" />German
        <option value="el" />Greek
        <option value="gu" />Gujarati
        <option value="ht" />Haitian Creole
        <option value="iw" />Hebrew
        <option value="hi" />Hindi
        <option value="hu" />Hungarian
        <option value="is" />Icelandic
        <option value="id" />Indonesian
        <option value="ga" />Irish
        <option value="it" />Italian
        <option value="ja" />Japanese
        <option value="kn" />Kannada
        <option value="ko" />Korean
        <option value="la" />Latin
        <option value="lv" />Latvian
        <option value="lt" />Lithuanian
        <option value="mk" />Macedonian
        <option value="ms" />Malay
        <option value="mt" />Maltese
        <option value="no" />Norwegian
        <option value="fa" />Persian
        <option value="pl" />Polish
        <option value="pt" />Portuguese
        <option value="ro" />Romanian
        <option value="ru" />Russian
        <option value="sr" />Serbian
        <option value="sk" />Slovak
        <option value="sl" />Slovenian
        <option value="es" />Spanish
        <option value="sw" />Swahili
        <option value="sv" />Swedish
        <option value="ta" />Tamil
        <option value="te" />Telugu
        <option value="th" />Thai
        <option value="tr" />Turkish
        <option value="uk" />Ukrainian
        <option value="ur" />Urdu
        <option value="vi" />Vietnamese
        <option value="cy" />Welsh
        <option value="yi" />Yiddish
    </select><a id="translate-me" href="#" title="Translate!"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>
Semoga bermanfaat.