Karena alasan itulah, saya akan sharing tentang bagaimana cara memodifikasi tampilan Newer Post, Home dan Older Post supaya ketiga teks tersebut terlihat indah dengan tampilan bingkai dan background yang menghiasinya. Untuk menghias tampilan Newer Post, Home dan Older Post, sobat blogger hanya membutuhkan sedikit penambahan kode CSS yang dimasukkan melalui laman Blogger Template Designer. Berarti saya tidak perlu edit template? Ya... Sobat blogger tidak perlu edit template untuk memperindah tampilan Posting Baru, Beranda dan Posting Lama.
Cara Mempercantik Newer Post, Home dan Older Post
- Sign In di blogger.com
- Pada Menu Drop Down pilih template
- Klik tombol Costumize
- Klik Advanced dan klik Add CSS
- Copy Paste kode berikut pada kolom yang tersedia
.blog-pager-newer-link
{
color: #6E6E6E;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 white;
background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
text-align: center;
width: 70px;
}
.blog-pager-older-link
{
color: #6E6E6E;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 white;
background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
text-align: center;
width: 70px;
}
.home-link
{
color: #6E6E6E;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 white;
background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
text-align: center;
width: 70px;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
- Terakhir, klik Apply to blog
Alangkah berartinya trik ini jika ada pesan, saran atau komentar dari sobat blogger yang dicantumkan melalui kolom komentar yang kami sediakan.
Post a Comment