Cara Membuat Read More Dengan Background Warna

Ini adalah salah satu cara untuk memoles tampilan link "read more" di blog anda. Link Read more anda bisa ditambahkan background dengan warna.

Cara ini untuk memperindah tampilan link Read more di blog anda.

Untuk memodifikasi background link "Read More", memang diharuskan untuk mengedit kode HTML blog anda. Untuk membuatnya berikut ini caranya.

Login ke blogger.com
klik Dashboard
Klik Rancangan
klik Edit HTML
Tapi Pertama-tama download dulu kode HTML blog anda untuk jaga-jaga kalau anda ingin kembali ke tampilan blog sebelumnya.

Setelah itu copy paste kodenya di bawah ini

.jump-link a{
  -moz-border-radius:5px;
  -khtml-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding:2px 12px;
  font-style: italic;
  border:1px solid #b7b7b6;
  margin:10px 0px;
  text-decoration:none;
  color:#000;
  background:#ccc;
  text-align:right;
  float:right;
}
.jump-link a:hover{
  border:1px solid #545353;
  color:#fff;
  background:#797878;
}

Taruh kodenya diatas ]]></b:skin>
Untuk mempercepat pencarian kode ]]></b:skin>, tekan CTRL+F di keyboard anda.
Kemudian klik SAVE.
Selesai.

Anda masih dapat mengubah kode CSS seperti yang Anda inginkan, berdasarkan desain blog Anda. Warna yang diberikan adalah abu-abu, tetapi Anda dapat mengubahnya dengan warna lain, misalnya

background: # ccc;

Ganti kode warna dengan kode warna favorit Anda, seperti:

background: # 1881f7;

Jika Anda memiliki kode diedit, jangan lupa untuk Simpan Template.

Diposting oleh Ari Purwoko

"START SHARING NOT SELLING"

Artikel Terkait :