Modifikasi Warna ScrollBar Menggunakan CSS

 

Merubah Warna Scroll Bar dengan CSS - Apa arti scrollbar? Scroll bar berarti bar penggulung. Scrollbar biasanya kita lihat berada di samping kanan blog untuk menggulung layar ke atas atau bawah.mengganti scroll bar tidak ada hubungannya dengan SEO. Hal ini digunakan hanya untuk mempercantik tampilan blog agar betah berlama² tinggal di blog kita.

Caranya sangat Mudah ko,sobatMiev cari kode ]]></b:skin>

Pastekan Kode di bawah ini,tepat di ata kode ]]></b:skin>

::-webkit-scrollbar {
height:12px;
width: 15px;
background: #6d6d6d; //warna background scroll
}
::-webkit-scrollbar-thumb {
background-color: #142c3e; //warna scroll
}

"Kode di atas tidak bisa tampil di Firefox atau Internet Explorer, dan hanya tampil di Google Chrome."

Terahir sobatMiev tinggal simpan dan sobatMiev sesuaikan dengan blog sobatMiev !!!

Semoga bermanfaat :D

Read more »

Posted in: CSS

Modifikasi Kotak Komentar Blog Dengan Tema Facebook

 

kali ini Miev share,Tips dan trik seputar Blogger,di sini Miev akan Memposting tips dan trik bagaimana memodifikasi Kotak Komentar Blog dengan Tema Facebook,dan sebelumnya Miev share tentang Menciptakan Efek Blur pada Halaman Blog dengan CSS Gradient . langsung saja masuk ke langkah langkah di bawah ini

1. Masuk ke halaman Edit HTML Template pada blog sobatMiev :

 

2. Cari  kode ]]></b:skin>

3. Salin kode CSS di bawah ini dan letakkan di atasnya:

/* CSS Komentar Blogspot - Tema Facebook
 * Selengkapnya: https://plus.google.com/108949996304093815163/posts
 */

.comments {
  font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  color:rgb(51,51,51);
}

.comments .comments-content a {
  color:#3B5998 !important;
}

.comments h2,
.comments h3,
.comments h4 {
  font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  font-size:16px;
}

.comments .comments-content .comment {
  margin:0 0 0;
  padding:10px 10px;
  border-top:1px solid #e9e9e9;
  border-left:1px solid #ccc;
}

.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {
  margin:0 0 0;
  padding:0 0 0;
  border:none;
  background:transparent;
}

.comments .comment .comment-header {
  margin-bottom:4px;
}

.comments .comment .comment-header .datetime a {
  color:#808080 !important;
}

.comments .comment .comment-actions a {
  padding-right:5px;
}

.comments .thread-toggle .thread-arrow {
  width:7px;
  height:7px;
  padding-right:4px;
}

.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
  border:none;
  padding:0;
  margin:0;
  outline:none;
}

.comments .comment .comment-block {
  margin:0 0 0 60px !important;
}

.comments .comment .comment-thread.inline-thread {
  margin:7px 0 0 22px;
}

.comments .comment .comment-thread.inline-thread ol {
  margin:7px 0 10px !important;
}

.comments .comment .comment-thread.inline-thread .comment {
  background-color:#EDEFF4;
  padding:5px 5px 0;
  margin:1px 0 0;
  border:none;
  border-bottom:1px solid #D2D9E7;
}

.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {
  width:32px;
  height:32px;
}

.comments .comment .comment-thread.inline-thread .comment .comment-block {
  margin:0 0 0 40px !important;
}

.comments .comment .comment-content {
  text-align:left;
}

.comments .comments-content .icon.blog-author {
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:top;
  background:transparent url('/favicon.ico') no-repeat 50% 50%;
}

.comments .comment .comment-thread.inline-thread .comment:last-child {
  border-left:2px solid #A8B2CE !important;
}

Klik Simpan Template dan lihat hasilnya:

Lihat DEMO

Semoga Artikel ini bermanfaat untuk sobatMiev

Read more »

Posted in: CSS