Cara mengubah jenis font header, judul postingan, judul sidebar dan lain-lain pada blogger

Tweet

Menghias blog memang adalah pekerjaan seorang pemilik blog. Tetapi seberapa sering Anda berkunjung ke blog-blog Indonesia? Apa pendapat Anda? Unik? Lumayan? Keren? atau... lebay? Yapp, saya setuju kalau blog-blog Indonesia rata-rata lebay. Bandingkan dengan blog-blog India yang rata-ratanya sesuai kaidah SEO, simple, biasa, namun enak dipandang. Memeng selera orang berbeda-beda, tetapi tetap juga harus simple, biasa, namun enak dipang.

Mengubah jenis font memang mendukung blog menjadi lebih enak, tetapi juga haru tetep jangan sampai memakai font yang terlalu lebay. Berikut cara bagaimana engubah font header, judul postingan, judul sidebar dan lain-lain pada blogger :

Langkah :

1. Buka akun blogger Anda
2. Masuk ke menu Template > Edit HTML > Proceed > centang 'Expand Template Widget'
3. Cari kode-kode yang mirip pada kode dibawah ini :

• Kode dibawah ini mengubah jenis font judul postingan (ubah pada jenis font yang berwarna biru)

/* Posts-----------------------------------------------*/
h2.date-header{margin:1.5em 0 .5em;display:none;}
.wrapfullpost{}
.post{margin-bottom:15px;border-bottom:1px dashed #eee;text-align: justify;}
.post-title{color:#333333;margin:0 0 10px 0;padding:0;font-family:'Candy Round BTN', Arial, Times New Roman Times, Serif;font-size:24px;line-height:24px;font-weight:bold;}

•  Kode dibawah ini mengubah jenis font header (karena saya memakai laman diatas header dan menaruh labels dibawah header, ubah jenis yang berwarna biru pada laman diatas header dan merah untuk label dibawah header)

.menu-primary{}
.menu-primary ul{min-width:160px}
.menu-primary li a{color:#555;text-shadow:0px 1px 0px #fff;padding:19px 15px 19px 15px;line-height:11px !important;text-decoration:none;text-transform:uppercase;font:normal 11px 'Oswald',sans-serif;border-bottom:3px solid #F1F1F1}
.menu-primary li a:hover,.menu-primary li a:active,.menu-primary li a:focus,.menu-primary li:hover > a,.menu-primary li.current-cat > a,.menu-primary li.current_page_item > a,.menu-primary li.current-menu-item > a{color:#F80508;text-shadow:0px 1px 0px #fff;outline:0;border-bottom:3px solid #F70413}
.menu-primary li li a{color:#fff;text-shadow:0px 1px 0px #000;text-transform:none;background:#F70413;padding:10px 15px;margin:0;border:0;font-weight:normal}
.menu-primary li li a:hover,.menu-primary li li a:active,.menu-primary li li a:focus,.menu-primary li li:hover > a,.menu-primary li li.current-cat > a,.menu-primary li li.current_page_item > a,.menu-primary li li.current-menu-item > a{color:#fff;text-shadow:0px 1px 0px #000;background:#D30A10;outline:0;border-bottom:0;text-decoration:none}
.menu-primary a.sf-with-ul{padding-right:20px;min-width:1px}
.menu-primary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:18px 10px 0 0}
.menu-primary li li .sf-sub-indicator{padding:9px 10px 0 0}
.wrap-menu-primary .sf-shadow ul{background:url('http://4.bp.blogspot.com/-ikPchf9jrlY/TxSCkhMTqDI/AAAAAAAAAKc/u7oabJSf9S0/s000/menu-primary-shadow.png') no-repeat bottom right}
.menu-secondary-container{position:relative;height:40px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju0GqSlyGWbXIUfg6cmEgCXC2JzyZpxWl8xfeczNqDwJLUrGyNoaBIfk9jqigXppG-Xpzn-MzvJFL5uqsc5B10WxUX1JR8R2jyX5zhLhlPbH8fYacrB2mJmL3_7Y_wVuULnKiugQBPalu-/s0/menu-secondary-bg.png) left top repeat-x;padding-left:5px}
.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#555;padding:12px 15px 11px 15px;text-decoration:none;font:12px 'Oswald',sans-serif;text-transform:uppercase}

• Kode dibawah ini mengubah jenis font judul sidebar (ubah pada kode biru)

/* Sidebar Content----------------------------------------------- */
.sidebar{margin:0 0 10px 0;font-size:13px;color:#555555;}
.sidebar a{text-decoration:none;color:#555555;}
.sidebar a:hover{text-decoration:none;color:#F70413;}
.sidebar h2{background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlp1rlPim5o1bvliY67_HrErt3rYbRsxSQFGtUxwkqPBsEm4LDqA0h8HpEWBO3WVuvRy14kNp5JiIMZUrJzdqXbIReF_uOTwt3eLQhEBlzAak4-h6wG2jgH4bJhvm3Tsss0ofWmGL51an2/s0/widgettitle-list.png) 4px center no-repeat;margin:0 0 10px 0;padding:9px 0 9px 20px;border:1px solid #E0E0E0;color:#666;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;text-decoration:none;text-transform:uppercase;}
.sidebar ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}

• Kode dibawah ini mengubah judul footer

/* FOOTER ----------------------------------------------- */
#footer{width:960px;margin:0px 0px 15px 0px;text-shadow:0px 1px 0px #fff;}
#copyrights{color:#434141;background:#FFF;text-align:center;padding:25px 0}
#copyrights a{color:#434141}
#copyrights a:hover{color:#434141;text-decoration:none}
#credits{color:#434141;font-size:11px;text-align:center;padding-top:15px}
#credits a{color:#434141;text-decoration:none}
#credits a:hover{text-decoration:none;color:#434141}
#footer-widgets{width:960px;background:#F6F6F6;padding:20px 0 0 0;border-top:1px solid #DBDBDB;border-top:1px solid #DBDBDB}
.footer-widget-box{width:225px;float:left;margin-left:12px}
.footer-widget-box-last{}
#footer-widgets .widget-container{color:#555;text-shadow:0px 1px 0px #fff;}
#footer-widgets .widget-container a{color:#555;text-decoration:none}
#footer-widgets .widget-container a:hover{color:#F70413;text-decoration:underline}
#footer-widgets h2{color:#333333;font-family:'Oswald',sans-serif;font-size:16px;line-height:16px;text-decoration:none;text-transform:uppercase;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlp1rlPim5o1bvliY67_HrErt3rYbRsxSQFGtUxwkqPBsEm4LDqA0h8HpEWBO3WVuvRy14kNp5JiIMZUrJzdqXbIReF_uOTwt3eLQhEBlzAak4-h6wG2jgH4bJhvm3Tsss0ofWmGL51an2/s0/widgettitle-list.png") no-repeat scroll 4px center #F2F2F2;border:1px solid #E0E0E0;margin:0 0 10px;padding:9px 0 9px 20px;font-weight:normal;margin-bottom:16px;}

• Kode dibawah ini mengubah jenis font pada isi konten sidebar

#crosscol-wrapper{display:none;}
.PopularPosts .item-title{font-weight:bold;padding-bottom:0.2em;text-shadow:0px 1px 0px #fff;}
.PopularPosts .widget-content ul li{padding:0.7em 0;background:none}
.widget-container{list-style-type:none;list-style:none;margin:0 0 15px 0;padding:0;color:#555;font-size:13px}
.widget-container2{list-style-type:none;list-style:none;margin:4px 0 15px 10px;padding:0;color:#3E3E3E;font-size:13px}
h3.widgettitle{background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf9mkTI74LSs07aXlBSuycMRiOb45JpN_YI5sg4uD_bN7Qy9kUYD_2ncGTnyNj2gF5uugR9JA0pewwxViUV3TsYVNjDjAk-prd8g-dLrp3dwbh3noO5Krqwx5kastmDCwbeqgAhg4D9ZWC/s0/widget-list.png) 4px center no-repeat;margin:0 0 10px 0;padding:9px 0 9px 20px;border:1px solid #E0E0E0;color:#666;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;text-decoration:none;text-transform:uppercase;}

Keterangan :

1. Lakukan perubahan pada kode (jenis font) pada warna biru
2. Anda bisa mengetahui jenis font dengan menggunakan font-font dari Microsoft Word ataupun Google Web Font
3. Preview terlebih dahulu
4. Save template Anda.