Kamis, 20 November 2014
Assalamu'alaikum wr. wb , pada kesempatan kali ini saya ingin berbagi sedikit TIPS Blogger, TIPS kali ini adalah menghilangkan/menyembunyikan Judul Blog di Header, bukan menghapusnya.
Sebuah
judul pada sebuah blogger sangat penting, namun terkadang keberadaannya
bisa sangat mengganggu ketika Anda tidak menginginkannya tampil pada
header blog baru Anda. Tampilan judul bawaan memang terlihat kaku dan
sulit bagi newbie dalam menyesuaikan-nya ke dalam header. Maka dengan
cara menghilangkan atau menyembunyikan judul blog dan mengkreasikan
judul blog kedalam headernya sendiri akan membuat tampilan blog Anda
semakin menarik.
Selain
judul blog, deskripsi blog akan ditampilkan secara otomatis di bawah
judul blog, maka Anda perlu menyembunyikannya juga. Setelah Anda membuat header blog yang cantik maka tinggal menerapkan trik dibawah.
Cara menyembunyikan keduanya silahkan ikuti langkah-langkah berikut ini:
- Log in blogger
- Pada dashboard > klik template kemudian pilih "Edit HTML"
- Cari kode yang mirip seperti ini
Judul Blog
#header{
width: 1065px;
position: relative;
margin: auto;
height: 399px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCG46_undUDTryrOczPegIJ70zKjhMPw3OsnU1ke2V38cMxwVNLnga7OmERvusd0BaPs9TfNbTCegCGaF7VjN_5dIPCJ1tW_xEW_EGusOstdODlLpoeqTo81lDup_59clVmlM0SeUEduI/s1600/header2.png) no-repeat top center;
overflow: hidden;
}
h1#blog-title {
text-align: center;
margin-top: 195px;
font-family: 'Playfair Display SC', serif;
font-weight: 200;
font-size: 65pt;
letter-spacing: -6px;
color: #fff;
line-height: 50px;
padding: 10px;
text-shadow: 1px 1px 0px #222, -1px -1px 0px #222, -1px 1px 0px #000, 1px -1px 0px #000, 0px 0px 30px #000, 0px 0px 30px #000, 0px 0px 30px #000;
visibility:hidden;
}
h1#blog-title a {padding:5px;color:#000;}
h1#blog-title a:link,h1#blog-title a:visited {
color: #fff;
border-radius: 15px/45px;
background-size: 6px;
}
Deskripsi Blog: h2#blog-desc span{background: #3F3C47;
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.8), 0 1px 0 #000;
padding: 0px 15px 5px 15px;
border-radius: 5px;
border: 1px solid #222;}
h2#blog-desc {
padding: 25px 5px 5px 5px;
text-align: center;
font-weight: 200;
font-size: 17pt;
letter-spacing: 4px;
color: #fff;
text-shadow: 2px 2px 2px #222, -2px -2px 2px #222;
font-family: 'Playfair Display SC', serif;
}
.title h2{
text-decoration: none;
padding: 10px;
margin-bottom: 15px;
line-height: 30px;
text-align: left;
font-weight: normal;
margin: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 20pt;
letter-spacing: 0.01em;
color: #fff;
}
.title h2 a:link, .title h2 a:visited{
color:#000;text-decoration: none;
}
- Setelah ditemukan, silahkan tambahkan kode berikut: visibility:hidden; sehingga menjadi seperti dibawah:
Judul Blog:#header{
width: 1065px;
position: relative;
margin: auto;
height: 399px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCG46_undUDTryrOczPegIJ70zKjhMPw3OsnU1ke2V38cMxwVNLnga7OmERvusd0BaPs9TfNbTCegCGaF7VjN_5dIPCJ1tW_xEW_EGusOstdODlLpoeqTo81lDup_59clVmlM0SeUEduI/s1600/header2.png) no-repeat top center;
overflow: hidden;
}
h1#blog-title {
text-align: center;
margin-top: 195px;
font-family: 'Playfair Display SC', serif;
font-weight: 200;
font-size: 65pt;
letter-spacing: -6px;
color: #fff;
line-height: 50px;
padding: 10px;
text-shadow: 1px 1px 0px #222, -1px -1px 0px #222, -1px 1px 0px #000, 1px -1px 0px #000, 0px 0px 30px #000, 0px 0px 30px #000, 0px 0px 30px #000;
visibility:hidden;
}
h1#blog-title a {padding:5px;color:#000;}
h1#blog-title a:link,h1#blog-title a:visited {
color: #fff;
border-radius: 15px/45px;
background-size: 6px;
}
Deskripsi Blog: h2#blog-desc span{background: #3F3C47;
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.8), 0 1px 0 #000;
padding: 0px 15px 5px 15px;
border-radius: 5px;
border: 1px solid #222;}
h2#blog-desc {
padding: 25px 5px 5px 5px;
text-align: center;
font-weight: 200;
font-size: 17pt;
letter-spacing: 4px;
color: #fff;
text-shadow: 2px 2px 2px #222, -2px -2px 2px #222;
font-family: 'Playfair Display SC', serif;
visibility:hidden; }
.title h2{
text-decoration: none;
padding: 10px;
margin-bottom: 15px;
line-height: 30px;
text-align: left;
font-weight: normal;
margin: auto;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 20pt;
letter-spacing: 0.01em;
color: #fff;
}
.title h2 a:link, .title h2 a:visited{
color:#000;text-decoration: none;
} - Untuk memastikan berhasil tidaknya judul dan deskripsi bisa disembunyikan, silahkan klik "preview template" pada halaman editing.
- Apabila berhasil, silahkan simpan pekerjaan Anda dengan meng klik "save template".
- Lihat hasilnya.
Catatan:
Cara ini lebih tepatnya adalah menyembunyikan, bukan menghilangkan
karena judul blog dan deskripsi sangatlah penting untuk search engine.
Maka pengisian Judul blog dan deskrissi blog tetap harus dijalankan pada
menu Setting > Basic.
Demikian sedikit info cara menghilangkan judul blog dari saya.. selamat mencoba.
Demikian sedikit info cara menghilangkan judul blog dari saya.. selamat mencoba.
