Hari
ini saya akan memberikan tutorial blogspot tentang bagaimana cara
menghias Judul Posting atau Post Title sehingga terlihat menarik atau
dapat menambah keindahan blog sobat blogger. Teknik yang akan saya
terapkan adalah dengan memberikan efek bingkai (Bingkai dengan round
corner) dan menambahkan background pada judul posting. Kenapa sih kita
harus menghias atau memodifikasi tampilan judul posting? Karena judul
posting adalah salah satu penggerak yang membuat pengunjung blog
tertarik untuk membaca setiap posting yang kita publikasikan di blog.
Untuk menghias tampilan post title atau judul posting yang terdapat di blog, kita akan menggunakan kode CSS. Karena menggunakan kode CSS, sobat blogger pun tidak perlu memeras keringat untuk edit template karena kode CSS dapat kita masukkan ke template kita melalui laman Blogger Template Designer. Untuk lebih detailnya, ikuti tips trik blogspot berikut.
Cara Membuat Bingkai Dan Cara Menambahkan Background Pada Judul Posting
Sign In di blogger.com
Pada Menu drop down, klik Template
Klik tombol Costumize
Klik Advanced dan Pilih Add CSS
Copy Paste salah satu dari kode di bawah ini pada kolom yang tersedia
Kode CSS Pertama
.post-title {background: url("http://i1269.photobucket.com/albums/jj591/aditya9172/h3.png") no-repeat 4px center transparent;font-size: 20px;font-family: Oswald;font-weight:normal;padding: 3px 10px 3px 80px;color: #0274be;/*By blog-toolz.blogspot.com*/border: 3px solid #5bb5f0;text-shadow: 0 1px 0 #CCC;-moz-border-radius: 60px;-webkit-border-radius: 60px;border-radius: 60px;-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;/*By www.tutorialblogspot.com*/box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;margin: 15px 3px;text-transform: uppercase;line-height: 1.3;}
Kode CSS Kedua
.post-title
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:auto;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
transition:width 3s;
width:auto;-moz-transition:width 3s; /* Firefox 4 */
-webkit-transition:width 3s; /* Safari and Chrome */
-o-transition:width 3s; /* Opera */
}
.post-title:hover
{
width:auto;background:#FAFAFA;
}
Klik Appy to Blog untuk menyimpan perubahan.
Tambahan:
Kalau sobat blogger menggunakan template bawaan blogger.com, kode CSS tersebut akan langsung bekerja di template sobat. Bagaiman dengan template hasil download? Kalau kode tersebut tidak bekerja, ganti kode .post-title menjadi .post h2
Kalau sobat blogger masih bingung, mamfaatkan kolom komentar di bawah ini untuk bertanya
Untuk menghias tampilan post title atau judul posting yang terdapat di blog, kita akan menggunakan kode CSS. Karena menggunakan kode CSS, sobat blogger pun tidak perlu memeras keringat untuk edit template karena kode CSS dapat kita masukkan ke template kita melalui laman Blogger Template Designer. Untuk lebih detailnya, ikuti tips trik blogspot berikut.
Cara Membuat Bingkai Dan Cara Menambahkan Background Pada Judul Posting
Sign In di blogger.com
Pada Menu drop down, klik Template
Klik tombol Costumize
Klik Advanced dan Pilih Add CSS
Copy Paste salah satu dari kode di bawah ini pada kolom yang tersedia
Kode CSS Pertama
.post-title {background: url("http://i1269.photobucket.com/albums/jj591/aditya9172/h3.png") no-repeat 4px center transparent;font-size: 20px;font-family: Oswald;font-weight:normal;padding: 3px 10px 3px 80px;color: #0274be;/*By blog-toolz.blogspot.com*/border: 3px solid #5bb5f0;text-shadow: 0 1px 0 #CCC;-moz-border-radius: 60px;-webkit-border-radius: 60px;border-radius: 60px;-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;/*By www.tutorialblogspot.com*/box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;margin: 15px 3px;text-transform: uppercase;line-height: 1.3;}
Kode CSS Kedua
.post-title
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:auto;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
transition:width 3s;
width:auto;-moz-transition:width 3s; /* Firefox 4 */
-webkit-transition:width 3s; /* Safari and Chrome */
-o-transition:width 3s; /* Opera */
}
.post-title:hover
{
width:auto;background:#FAFAFA;
}
Klik Appy to Blog untuk menyimpan perubahan.
Tambahan:
Kalau sobat blogger menggunakan template bawaan blogger.com, kode CSS tersebut akan langsung bekerja di template sobat. Bagaiman dengan template hasil download? Kalau kode tersebut tidak bekerja, ganti kode .post-title menjadi .post h2
Kalau sobat blogger masih bingung, mamfaatkan kolom komentar di bawah ini untuk bertanya
Comments
Post a Comment
Syarat-syarat Berkomentar:
☻) Berkomentarlah Dengan Bahasa Yang Sopan;
☻) Berkomentarlah Dengan Bijak;
☻) Berkomentarlah Dengan Komentar Yang Berhubungan Dengan Postingan Ini;
☻) Dilarang Berkomentar Yang Berhunbungan Dengan PORNO/SARA
☻) Dilarang Berkomentar SPAM
NB: Jika sahabat melanggar syarat-syarat diatas maka Komentar sahabat akan dihapus.
Terima Kasih.