14+ Tampilan Warna Scrollbar yang Keren di Blogger

Diposting pada

Tampilan Warna Scrollbar yang Keren di Blogger

14+ Tampilan Warna Scrollbar yang Keren di Blogger – Jika Anda ingin menyesuaikan scrollbar blogger untuk memberikan tampilan yang menarik pada blog Anda, daftar ini akan memungkinkan Anda melakukannya dengan cara yang sederhana. Bahkan, Anda juga akan memiliki beberapa tampilan scrollbar untuk diterapkan di blog Anda dalam beberapa klik. Anda mungkin telah melihat bahwa banyak ikon web seperti Google dan Facebook menggunakan bilah gulir sendiri untuk situs web mereka. Dengan demikian, Anda juga dapat membuat blog Anda terlihat berbeda dengan modifikasi kecil ini.

Sebenarnya, tampilan unik penting untuk meningkatkan pengalaman pengguna blog kita. Menerapkan salah satu dari desain scrollbar blogger bergaya berikut akan memberikan peningkatan tambahan dari keseluruhan keindahan blog Anda. Sebagai soal fakta, jika Anda bukan seorang desainer web, Anda bisa mengambil salah satu gaya blogger scrollbar berikut. Sekarang mari saya tunjukan cara mengganti scrollbar pada blog blogger anda, beserta 14+ tampilan warna scrollbar yang keren untuk blogger.

Bagaimana Cara Memasang Scrollbar di Blog dengan CSS?

Sangat mudah untuk menyesuaikan scrollbar browser default. Sebenarnya, sebagian besar pengembang template blogger pihak ketiga tidak menerapkan scrollbar khusus dalam template mereka. Jadi, Anda harus melakukannya sendiri. Cukup ikuti instruksi langkah demi langkah berikut ini:

1. Pertama-tama, masuk ke akun Blogger Anda.

2. Lalu klik pada Tema dan pilih Edit HTML.

2. Lalu cari kode ]]></b:skin> pada template yang anda gunakan.

Selanjutnya copy kode Tampilan Scrollbar dibawah ini dan letakan kode tersebut di atas kode ]]></b:skin>. Lalu klik Simpan Tema.

Berikut 14+ Tampilan Warna Scrollbar yang Keren di Blogger dengan CSS

Biasanya, kita melihat scrollbar abu-abu secara default untuk banyak browser modern seperti Google Chrome, Firefox, Microsoft edge dll. Kita akan mengubahnya. Cukup pilih gaya scrollbar apa pun dari daftar ini dan masukkan ke blog blogger anda seperti yang sudah saya tunjukkan di atas.

Scrollbar Style 1:

Tampilan Warna Scrollbar yang Keren

::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	background-color: #ecf400;
	background: #BA8B02;
	background: -webkit-linear-gradient(to right, #181818, #BA8B02);
	background: linear-gradient(to right, #181818, #BA8B02);
}
::-webkit-scrollbar-thumb:hover {
	background: #333;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}

Ini adalah scrollbar blogger yang sangat sederhana namun bergaya. Sebenarnya, ibu jari dari scroll bar ini memiliki kombinasi warna yang indah dengan sedikit efek Shadow. Selain itu, jalur transparan membuatnya lebih indah dan menarik.

Scrollbar Style 2:

Tampilan Warna Scrollbar yang Keren

::-webkit-scrollbar {
	width: 11px;
}
::-webkit-scrollbar-thumb {
	background: #0080ff;
	border: 0px none #ffffff;
	background: #1a2a6c;
	background: -webkit-linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
	background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
}
::-webkit-scrollbar-thumb:hover {
	background: #b21f1f;
}
::-webkit-scrollbar-thumb:active {
	background: darkred;
}
::-webkit-scrollbar-track {
	background: #e2e2e2;
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar cantik lain yang sesuai dengan semua jenis blog. Anda akan menemukan kombinasi warna yang menakjubkan di antara gulir aktif dan kursor ini. Selain itu, trek terlihat untuk gaya ini.

Scrollbar Style 3: Stripe

Tampilan Warna Scrollbar yang Keren

::-webkit-scrollbar {
	width: 10px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
	background-color: #6D6027;  background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
	transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,
	transparent 75%,transparent)
}
::-webkit-scrollbar-thumb:active {
	background: #0B3B0B;
}
::-webkit-scrollbar-track {
background-color: #e2e2e2;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar stripe ini adalah contoh dari keindahan mutlak. Meskipun tidak menggunakan efek hover, ibu jari aktif dan trek yang indah membuatnya menarik dan ramah pengguna.

Scrollbar Style 4:

::-webkit-scrollbar{
    width: 11px;
}
::-webkit-scrollbar-track{
	background: #c4c6c8;
}
::-webkit-scrollbar-thumb{
	background: #105B74;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover{ 
	background: #08A67C;
}

Ini adalah scrollbar blogger sederhana lain dengan sudut membulat. Gaya ini sangat populer dan banyak digunakan. Bahkan, Anda mungkin sudah melihat scroll bar semacam ini di banyak blog. Untuk alasan ini, saya terinspirasi untuk berbagi gaya ini.

Scrollbar Style 5:

::-webkit-scrollbar {
	width: 11px;
	height: auto;
}
::-webkit-scrollbar-track {
	border-radius: 10px;
	box-shadow: inset 0 0 8px #00B141;

}
::-webkit-scrollbar-thumb {
	background: yellowgreen;
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:hover {
	background: green;
}
::-webkit-scrollbar-thumb:active {
	background: #000;
}

Sebenarnya, desain scrollbar ini sangat mirip dengan yang di atas, tetapi Anda akan menemukan perbedaan dalam melayang, aktif, dan melacak bilah. Track dan jempol memiliki sudut membulat dan efek bayangan inset yang indah yang membuat bilah gulir ini berbeda dari yang lain.

Scrollbar Style 6: Google

::-webkit-scrollbar {
	background: transparent;
	width: 10px;
}
::-webkit-scrollbar-thumb {
	background-color: #C2C2C2;
	box-shadow: inset 0 0 5px #AEAEAE;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #8A8A8A;
}
::-webkit-scrollbar-thumb:active {
	background-color: #727272;
	box-shadow: inset 0 0 5px #595959;
}
::-webkit-scrollbar-track:hover {
	background-color: #E6E6E6;
	border: 1px solid #CFCFCF;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar Style 7: Codepen

::-webkit-scrollbar {
	background: transparent;
	width: 6px;
}
::-webkit-scrollbar-thumb {
	background-color: #555;
	box-shadow: inset 0 0 2px #333;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar Style 8: Blue-G

::-webkit-scrollbar {
	width: 10px;
	height: auto;
}
::-webkit-scrollbar-button {
	width: 0px;
	height: 0px;
}
::-webkit-scrollbar-thumb {
	background: #0080ff;
	border: 0px none #ffffff;
	border-radius: 50px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #09123c), color-stop(1.00, #0e3e8d));
	background: -webkit-linear-gradient(#09123c, #0e3e8d);
	background: -moz-linear-gradient(#09123c, #0e3e8d);
	background: -o-linear-gradient(#09123c, #0e3e8d);
	background: -ms-linear-gradient(#09123c, #0e3e8d);
	background: linear-gradient(#09123c, #0e3e8d);
}
::-webkit-scrollbar-thumb:hover {
	background: #0000a0;
}
::-webkit-scrollbar-thumb:active {
	background: #000000;
}
::-webkit-scrollbar-track {
	background: #e2e2e2;
	border: 0px none #ffffff;
	border-radius: 50px;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar Style 9: Light Blue-G

::-webkit-scrollbar {
	width: 11px;
	height: auto;
}
::-webkit-scrollbar-thumb {
	background: #0080ff;
	border: 0px none #ffffff;
	border-radius: 50px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd));
	background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
	background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
	background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
	background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
	background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
}
::-webkit-scrollbar-thumb:hover {
	background: #2E9AFE;
}
::-webkit-scrollbar-thumb:active {
	background: #555;
}
::-webkit-scrollbar-track {
	background: #e2e2e2;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar Style 10: Green Shadow

::-webkit-scrollbar {
	width: 11px;
	height: auto;
}
::-webkit-scrollbar-thumb {
	background: #0080ff;
	border: 0px none #ffffff;
	border-radius: 50px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #52d352), color-stop(0.73, #4a944b), color-stop(0.53, #2e7c2f), color-stop(0.28, #2c7a2d), color-stop(0.00, #7cff7f));
	background: -webkit-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
	background: -moz-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
	background: -o-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
	background: -ms-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
	background: linear-gradient(to bottom, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
}
::-webkit-scrollbar-thumb:hover {
	background: #008542;
}
::-webkit-scrollbar-thumb:active {
	background: #004522;
}
::-webkit-scrollbar-track {
	background: #e2e2e2;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar Style 11: Orange-G

::-webkit-scrollbar {
	width: 11px;
	height: auto;
}
::-webkit-scrollbar-thumb {
	background: #0080ff;
	border: 0px none #ffffff;
	border-radius: 50px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff8a16), color-stop(0.79, #ffae5e), color-stop(0.51, #ff8916), color-stop(0.41, #ff9d3d), color-stop(0.00, #ffb268));
	background: -webkit-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
	background: -moz-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
	background: -o-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
	background: -ms-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
	background: linear-gradient(to bottom, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
}
::-webkit-scrollbar-thumb:hover {
	background: #FF9615;
}
::-webkit-scrollbar-thumb:active {
	background: #904F00;
}
::-webkit-scrollbar-track {
	background: #e2e2e2;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar Style 12: Multi-Red Thin

::-webkit-scrollbar {
	width: 8px;
	height: auto;
}
::-webkit-scrollbar-thumb {
	background: #0080ff;
	border: 0px none #ffffff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #f60), color-stop(0.63, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.20, #ea2804));
	background: -webkit-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
	background: -moz-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
	background: -o-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
	background: -ms-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
	background: linear-gradient(to bottom, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
}
::-webkit-scrollbar-thumb:hover {
	background: red;
}
::-webkit-scrollbar-thumb:active {
	background: darkred;
}
::-webkit-scrollbar-track {
	background: #e2e2e2;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar Style 13: Smooth Magenta

::-webkit-scrollbar {
	width: 12px;
	height: auto;
}
::-webkit-scrollbar-thumb {
	background: #0080ff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f600fe), color-stop(1.00, #fd63ff));
	background: -webkit-linear-gradient(#f600fe, #fd63ff);
	background: -moz-linear-gradient(#f600fe, #fd63ff);
	background: -o-linear-gradient(#f600fe, #fd63ff);
	background: -ms-linear-gradient(#f600fe, #fd63ff);
	background: linear-gradient(#f600fe, #fd63ff);
}
::-webkit-scrollbar-thumb:hover {
	background: #C60088;
}
::-webkit-scrollbar-thumb:active {
	background: #6D024B;
}
::-webkit-scrollbar-track {
	background: #F6E4F0;
}
::-webkit-scrollbar-track:active {
  background: #FCC9EC;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Scrollbar Style 14: Silver Shine

::-webkit-scrollbar {
	width: 9px;
	height: auto;
}
::-webkit-scrollbar-thumb {
	background: #0080ff;
	border: 0px none #ffffff;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #bdbbbb), color-stop(1.00, #777));
	background: -webkit-linear-gradient(#bdbbbb, #777);
	background: -moz-linear-gradient(#bdbbbb, #777);
	background: -o-linear-gradient(#bdbbbb, #777);
	background: -ms-linear-gradient(#bdbbbb, #777);
	background: linear-gradient(#bdbbbb, #777);
}
::-webkit-scrollbar-thumb:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #4b4b4b), color-stop(1.00, #131313));
	background: -webkit-linear-gradient(#4b4b4b, #131313);
	background: -moz-linear-gradient(#4b4b4b, #131313);
	background: -o-linear-gradient(#4b4b4b, #131313);
	background: -ms-linear-gradient(#4b4b4b, #131313);
	background: linear-gradient(#4b4b4b, #131313);
}
::-webkit-scrollbar-thumb:active {
	background: #111;
}
::-webkit-scrollbar-track {
	background: #e2e2e2;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

Nah, itulah 14+ Tampilan Warna Scrollbar yang Keren untuk blogger yang bisa anda coba untuk memperindah tampilan gaya Scrollbar pada template yang anda gunakan, silahkan sesuaikan dengan warna template anda. Selamat mencoba!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *