Home » Blogger Hack » Cara mengubah jenis font header, judul postingan, judul sidebar dan lain-lain pada blogger

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

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara mengubah jenis font header, judul postingan, judul sidebar dan lain-lain pada blogger. Dengan artikel Cara mengubah jenis font header, judul postingan, judul sidebar dan lain-lain pada blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Cara mengubah jenis font header, judul postingan, judul sidebar dan lain-lain pada blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Cara mengubah jenis font header, judul postingan, judul sidebar dan lain-lain pada blogger selengkapnya:

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(http://4.bp.blogspot.com/-2XXQwhBH8QM/TxSCk2OJy9I/AAAAAAAAAKk/3CivMDyAjWg/s000/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(http://1.bp.blogspot.com/-faUgKbavGNk/TxSClu0xu5I/AAAAAAAAALU/UEdXOVKvUOY/s000/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("http://1.bp.blogspot.com/-faUgKbavGNk/TxSClu0xu5I/AAAAAAAAALU/UEdXOVKvUOY/s000/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(http://1.bp.blogspot.com/-4VJiH2U5w2I/TxSCl0QUZEI/AAAAAAAAALc/o0gXu7gPWw8/s000/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.

Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara mengubah jenis font header, judul postingan, judul sidebar dan lain-lain pada blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.

0 komentar:

Poskan Komentar