Cara memasang Tombol Back To Top di blog dengan Font Awesome

adscblog

Pasti anda sudah tau Bukan kegunaan dari tombol Back to top ini.dari namanya saja sudah ketahuan,Ya memang benar,tombol Back to top ini tombol yang dimana untuk kemabli kepermulaan artikel atau ke bagian atas,mungkin anda juga sering melihat tombol back to top ini,

Dengan menekan atau menambahkan tombol Back To top di blog memudahkan para pengunjung untuk kembali ke awal artikel,mungkin di sebagian besar blog dan anda pernah mengunjungi blog yang artikel nya sangat panjang lebar dan jelas menerangkan baik itu tentang tutorial blog ataupun tentang artikle lain nya yang sangat di butuhkan oleh para pengunjung tentang manfaat nya

Namun jika suatu blog yang sering menulus artikel nya panjang lebar,mungkin juga akan menyusahkan para pembaca atau para pengunjung blog untuk kembali ke bagian awal artikel,tentu nya mereka harus menarik layar agar bisa kembali ke awal materi

Beda lagi dengan blog yang sudah di pasangi oleh tombol back to top ini,ketika para pembaca artikel yang berada di blog kita sudah atau selesai membaca nya,akan lebih mudah mereka untuk kembali ke bagian awal Artikel dengan cara satu klik saja dengan begitu maka mereka akan kembali ke bagian awal artikel tadi yang sudah di baca

Tombol kembali ke atas / Back To Top menggunakan Font Awesome

Sehingga dengan begitu akan mengurangi waktu mereka agar tidak terbuang sia sia,dan untuk anda para pengguna blog,tentu nya tombol back to top ini sangatlah di butuhkan untuk di terapkan di blog anda,dan baik nya tombol back to top ini menggunakan font awesome sehingga terlihat menarik ketika di gunakan di blog

Jadi jika anda tertarik untuk menggunakan tombol back to top ini,anda bisa menggunakan kode di bawah ini untuk penerapan nya anda juga bisa mengikuti langkah-langkah pemasangan back to top ini sebagai berikut

• Seperti biasa masuk ke bagian blogger
• Setelah itu silahkan anda klik template yang berada di bagian kiri blogger
• Setelah itu klik edit html
• setelah anda berada di peng editan html silahkan anda cari kode </b:skin> atau </style> agar memduahkan pencarian anda,silahkan anda tekan Ctrl+F secara besamaan kemudian letakan kode berikut sebelum kode tersebut

#back-to-top{background:#53bd84;color:#ffffff;padding:8px 10px;font-size:18px;border-radius:10px}


.back-to-top{position:fixed!important;position:absolute;bottom:220px;right:210px;z-index:999}

• Langkah selanjut nya silahkan anda cari lagi kode </body> kemudian silahkan anda letakan kode berikut sebelum kode tersebut

<div class='back-to-top'>
      <a href='#' id='back-to-top' title='back to top'mobile='yes'>
        <i class='fa fa-chevron-up'/>
      </a>
</div>
    <script>
      $(window).scroll(function() {
        if($(this).scrollTop() &gt; 200) {
          $(&#39;#back-to-top&#39;).fadeIn();
            } else {
            $(&#39;#back-to-top&#39;).fadeOut();
            }
            });
          $(&#39;#back-to-top&#39;).hide().click(function() {
            $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
            return false;
            });
    </script>

Setelah itu silahkan Save template dan lihat hasil nya dengan mengklik salah satu artikel anda.maka dengan begitu akan ada muncul tombol back to top tersebut,

Namun apabila tombol tersebut tidak muncul di blog anda,maka langkah selanjut nya pasang kode Font awesome nya sebelum kode </head>

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>

Nah itulah pemasangan tombol back to top di blog,semoga rtikel nya bisa membantu sobat blogger dan semoga berhasil menerapkan tombol tersebut.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 15 Juni and have 0 komentar