Kreasikan Tombol Back to Top dengan CSS

22

Melanjutkan postingan sebelumnya mengenai cara membuat tombol scroll to top, kali ini Xceria akan memberikan tutorial serupa tapi ini lebih kepada desain tombolnya.

Jika pada tulisan sebelumnya ada 7 jenis tombol, pada tulisan ini Xceria akan memberikan satu image saja tapi bisa dikreasikan menjadi berbagai bentuk atau desain untuk digunakan sebagai tombol back to top.

Gambar yang Digunakan Sebagai Tombol

Berikut image atau gambarnya:

Gambar di atas adalah gambar tanda panah tanpa menggunakan background.

Kita bisa membuat berbagai bentuk tombol hanya dengan menggunakan satu gambar ini. Lalu bagaimana caranya?

Caranya cukup dengan mengubah style pada kode CSS-nya.

Contoh tombolnya seperti yang digunakan pada blog ini. Sedangkan untuk cara pemasangannya bisa melihat tulisan sebelumnya mengenai cara membuat tombol back to top.

Mengubah Desain Tombol Back to Top

Pertama yang perlu dilakukan adalah mengubah URL gambar tombol scroll to top. Karena Xceria menggunakan gambar tanda panah tadi, maka ubah image url-nya menjadi seperti di bawah ini.

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4s61wzRjgreauvF-c9cuqtL81tYcV7_2Hui4beJpEf46hjCScygBw1aeTbg1KiN1pMN1biTva37WeFBPdhtfy9Eo3ZuXWCaAyeKNCiGEVi6JsCTMG6ybGipPeiHzzzl3XTc0oIbHMZgV/s1600/back-to-top-arrow-white.png'/>

Gambar tanda panah yang diberikan di atas berwarna putih. Jika ingin yang berwarna hitam, ganti dengan URL berikut.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTKjR9-O90h-DcQeSkUT7Ay4wKqycyIODrMQ2rg3zMVy6uwJ6XYrlSQk86A3PvPA8o3vmCWTArQHv_96yuMip7K-bOp8lm1UM0EX62KyKCQ09pXIfGXF-dqBaQE-lXUmGaLW_LeEpkaNZu/s1600/back-to-top-arrow-black.png
Untuk dapat membentuk tombol di atas dengan berbagai kreasi, kita akan menggunakan kode CSS. Di bawah ini ada beberapa perubahan model atau desain yang bisa Anda lakukan dengan CSS.

Untuk dapat menerapkannya, cari kode </b:skin> kemudian tambahkan kode CSS #ScrollToTop berikut di atasnya.

Menambahkan Background

Untuk dapat mengganti warna tombol, tidak perlu mengganti URL gambarnya. Tapi cukup dengan mengubah background.

#ScrollToTop img {background: blue;}

atau

#ScrollToTop img {background: #0000ff;}

Anda bisa mengubah warna background pada tulisan berwarna merah sesuai keinginan.

Mengubah Background Saat Hover

Dengan kode di bawah ini, warna background akan berubah pada saat mouse diarahkan ke tombol.

#ScrollToTop img {background: #0000ff;}
#ScrollToTop img:hover {background: #000000;}

Ubah kode warna pada tulisan berwarna merah sesuai keinginan.

Menambah Efek Transparan pada Background

Cara berikut sama dengan postingan sebelumnya.

#ScrollToTop img {filter: alpha(50); opacity: 0.50;}
#ScrollToTop img:hover {filter: alpha(100); opacity: 1.00;}

Ubah angka berwarna merah untuk mengatur transparansi tombol.

Mengubah Ukuran Tombol

Untuk mengubah ukuran tombol, cukup dengan menambahkan padding.

#ScrollToTop img {padding: 5px;}

Ubah angka 5px untuk mengubah ukuran tombol menjadi lebih besar atau lebih kecil.

Mengubah Kelengkungan Sudut Tombol

Tambahkan kode berikut untuk mengubah radius dari border tombol.

#ScrollToTop img {border-radius: 3px;}

Anda juga bisa membuat tombol menjadi berbentuk bulat atau lingkaran dengan mengubah angka 3px menjadi 50%.

Dengan kode CSS di atas Anda bisa mengubah bentuk tombol sesuai kreasi sendiri. Di bawah ini ada 2 contoh tombol yang bisa Anda gunakan.

#ScrollToTop img {background: #0000ff; border-radius: 3px;}

#ScrollToTop img {background: #202020; padding: 3px; border-radius: 50%;}

Sekian tutorial kali ini mengenai tombol back to top. Semoga tulisan ini berguna.

Membuat Komentar Admin Berbeda di Blogger (5 Style)

28

Hari ini Xceria akan menulis tutorial blog seputar komentar di blogger, yaitu cara membuat komentar admin blog berbeda dengan komentar yang diberikan oleh pengunjung.

Apa kegunaan yang didapatkan?

Dengan melakukan hal ini, maka pengunjung akan mudah dalam membedakan yang mana komentar admin dan yang mana komentar pengunjung blog.

Dengan begitu ini akan memudahkan pengunjung yang ingin melihat komentar balasan admin terhadap pertanyaan yang mereka berikan.

CSS Styles

Pada tutorial blog ini saya menggunakan CSS untuk membuat komentar admin berbeda. Anda cukup menambahkan CSS yang sederhana untuk bisa melakukannya. Saya juga sudah menyediakan 5 style berbeda. Silahkan dipilih sesuai selera.

Komentar Admin Berbeda - Style 1

.comments .comments-content .icon.blog-author {margin: 0 0 -13px 15px; width: auto; background: #ec3f0c; color: #fff; padding: 3px 7px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.comments .comments-content .icon.blog-author:before {content: 'ADMIN';}

Komentar Admin Berbeda - Style 2

.comments .comments-content .user.blog-author {background: #ec3f0c; padding: 3px 7px;}
.comments .comments-content .user.blog-author a {color: #fff;}
.comments .comments-content .icon.blog-author {background: none;}

Komentar Admin Berbeda - Style 3

.comments .comments-content .icon.blog-author {width: 30px; height: 30px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRquGKzfzcgdk-Mzil5slwM0I-OvAYCxb-pKMZdn87ZG7z9mOC0GhZX6dC0JJTvxSlBUIIJQGTDNKbEz51OpyhlnB99SngXd9hASqxE2Rv123BbTFFI-qko7drwtKtt7WkNwHL5gSo8ANi/s1600/image.png) no-repeat; margin: 0px 0 -13px 6px;}

Komentar Admin Berbeda - Style 4

.comments .comments-content .icon.blog-author {width: 100%; position: absolute; left: 0; height: 2px; background: #ec3f0c; margin: 0; padding: 0; display: block;}

Komentar Admin Berbeda - Style 5

.comments .comments-content .icon.blog-author {width: 100%; position: absolute; left: 0; z-index: 0; background: #f2f2f2; margin: -5px 0; padding: 3px 0;}
.comments .comments-content .datetime, .comments .comments-content .blog-author {position: relative; z-index: 1;}

Cara Membuat Komentar Admin Berbeda di Blogspot

Jika ingin menerapkannya di blog Anda, cukup ikuti langkah-langkah di bawah ini.

1. Log in ke blogger.
2. Pilih tab Template.
3. Klik tombol Edit HTML.
4. Cari kode ]]></b:skin>
5. Pilih salah satu style dari kelima style di atas, kemudian tambahkan kodenya di atas kode ]]></b:skin> tersebut.
6. Simpan template.

Kelima style di atas hanya bisa diterapkan pada blogger threaded comment

Sekarang lihat hasilnya pada salah satu posting Anda. Jika belum ada komentar Anda di dalamnya, coba lakukan tes komentar sebagai admin (akun google).

Sekian posting kali ini tentang komentar admin di blogger. Semoga berguna dan dapat membuat kolom komentar blog Anda menjadi lebih bagus dan indah dipandang.

Cara Memposting Kode HTML di Blog

48

Cara memposting kode HTML di blog. Jika anda ingin menulis kode HTML atau script lainnya di postingan anda, anda harus memparsenya terlebih dahulu. Banyak mungkin yang sudah mengetahui tentang ini dan memang banyak blog yang menulis beberapa script di postingnya.

Bagaimana anda bisa mengatasi masalah penulisan kode HTML ini? Sebenarnya tidak rumit untuk melakukannya. Di bawah ini ada 3 kode yang sering digunakan dalam penulisan kode HTML.

< » ganti dengan &lt;
> » ganti dengan &gt;
& » ganti dengan &amp;

Tapi jika script yang ingin ditulis dalam jumlah besar tentu akan repot untuk mengganti satu persatu kode tersebut. Untuk mengatasi ini, ada tool online yang bisa anda gunakan untuk memparse kode HTML ke dalam bentuk teks.

Untuk melakukannya kunjungi link berikut.
http://centricle.com/tools/html-entities/

1. Copy-paste kode HTML yang ingin anda parse ke dalam kotak yang disediakan.
2. Tekan tombol encode.
3. Terakhir, copy kode HTML yang sudah diparse ke dalam postingan anda.

Dengan tool ini dalam seketika kode HTML atau script yang anda masukkan akan segera berubah dan siap dimasukkan ke dalam postingan anda.

Ada satu lagi yang mau saya tulis berhubungan dengan penulisan kode HTML di website, yaitu seputar background yang digunakan. Kebanyakan para blogger memberi background yang berbeda pada script yang ditulisnya. Ini tentu akan memudahkan pengunjung dalam membaca tulisan atau tutorial yang telah dibuat.

Langsung saja ikuti tutorial di bawah ini untuk menerapkannya di blog anda.

CSS

1. Sign in ke blogger.
2. Pilih menu Layout (Tata Letak) » Edit HTML.
3. Cari kode ]]></b:skin>.
4. Copy kode berikut ke atas kode tadi.
   
   
   .code {background: #f1f1f1; border: 1px solid #cccccc; border-left: 5px solid #cccccc; padding: 15px;}
   
   
5. Simpan template.
   

HTML

Pada posting gunakan format seperti di bawah ini untuk menerapkan kode css di atas.

<div class="code">
ketik scriptnya di sini
</div>

Cukup sampai di sini dulu posting kali ini mengenai cara memposting kode HTML di blogspot, semoga bermanfaat.

Selamat mencoba!