TUTORIAL™

Malam Siang Pagi sobat apa kabar ni seperti biasa
kami mau berbagi sedikit Tutorial
Cara Membuat Tombol Back To Top Untuk Komentar

Nah biasanya Tombol Back To Top di gunakan buat
kembalih lagi pada halaman Awal Blog sobat 


Nah tapi kali ini kami mau terapkan Tombol Back To Top menjadi

Tombol Back To Top Untuk Komentar

tapi fungsinya untuk mempercepat pencarian atau mempercepat
naik ke bagian atas komentar  atau hanya  turun di bagian Kolom komentar
atau bagian komentar Editor.
Kayak nya sedikit bingung kalu di jelaskan mas bro 

Sekarang sobat bisa lihat Demonya tapi di bagian Demo
sobat Lihat di bawah sebelah kanan ada tulisa Komentar sobat Di Klik
maka yang lihat hasilnya nah yang kami pake di bagian komentar Editor
 jadi akan langsung Pada tempat Kolom Komentar
Tapi sobat buka dulu Openpanelnya karna di sini
menggunakan Openpanel komentarnya dulu bos biar bisa lihat 
Demonya

Demo Mas Disini

Buat sobat yang mau pasang silakan caranya sangat mudah
silakan ikuti langkah-langkahnya di bawah
 
Pertama sobat masuk ke blok sobat 
Lalu Copy Kode Css Dan Div Nya Di Bawah

<b:if cond='data:blog.pageType == "item"'>
<a class="sellalink" href="#comment-editor">Comments</a>
</b:if> 



<style type='text/css'>a.sellalink {
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -ms-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -o-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none !important;
box-shadow: 1px 1px 10px grey;
text-shadow: 0 1px 0 white;
border: 1px solid gainsboro;
padding-bottom: 13px;
color:black !important;
text-decoration: none;
display: inline-block;
padding: 10px 23px;
border-radius: 3px;
position: fixed;
z-index: 9999;
bottom: -3px;
right: 3px;
-webkit-transition: all .400s;
-moz-transition: all .400s;
-ms-transition: all .400s;
-o-transition: all .400s;
transition: all .400s;
}

/* Hover Effects */

a.sellalink:hover {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 1px solid #1E1E1E;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #333;
}

/* Effect when it's clicked */

a.sellalink:active {
border-color: darkRed;
color: black;
}</style>
  

Kalu Kode Di Atas Sudah Di Copy
lalu Sobat pilih Tata Letak Pilih Tambahkan Gadget pilih HTML/JavaScript
lalu simpan lihat hasilnya

Ada dua Penerapan dalam Tombol Back To Top Untuk Komentar

Buat Menampilkan bagian paling awal pada halaman Komentar
sobat bisa memake Format Kode di bawah

<a class="sellalink" href="#comments">Comments</a>

Buat Menampilkan bagian komentar Editor Seperti di Demonya
sobat bisa memake Format Kode di bawah

<a class="sellalink" href="#comment-editor">Comments</a>

Contohnya seperti Kode di bawah ini

<b:if cond='data:blog.pageType == "item"'>
<a class="sellalink" href="#comment-editor">Comments</a>
</b:if>

Yang kami kasih warna kuni yang di ganti untuk menampilkannya

Sekian dulu dari kami tentang  
Cara Membuat Tombol Back To Top Untuk Komentar
semoga bermanfaat buat sobat yang membutuhkannya