Tampilan Blog bergaya WEB punya
Selamat berjumpa lagi kawan, mudah-mudahan semua dalam keadaan sehat-sehat dan selalu dilindungan Tuhan Yang Maha Esa.....Amin !
Ada beberapa kawan bertanya yang disampaikan lewat Komentar tentang cara membuat tampilan seperti Blog saya ini, tapi sebelumnya saya mohon maaf karena keterlambatan mempostingnya, hal ini disebabkan saya perlu praktekan lebih dahulu agar sesuai dengan keinginan Blog ini yaitu Semua Artikel / postingan sudah diuji coba dan berhasil dengan sukses.
Sebelum lanjut perlu kawan ketahui, bahwa tampilan depan (Beranda / Home) Blog kita akan tampil seperti gambar diatas dan itupun tidak mutlak begitu, karena semuanya bisa disembunyikan sesuai selera masing-masing.
Hal ini pernah dibahas oleh Kang Rohman, yaitu "Buat halaman Intro di Blogger" kalau kawan ingin mengetahui dan membacanya silahkan disini, tapi yang saya sampaikan sekarang sedikit beda, bedanya dimana ?! »» Bedanya yang ini langsung tampil (penciptanya Mas Adam seorang Blogger Design).
Caranya :
Kawan bisa merubah warna tampilan dengan mengganti tulisan yang berwarna merah diatas dengan warna selera kawan, karena script tersebut akan menampilkan Judul dari Artikel Blog kawan
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<a href='http://tips-blogbego.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke TIPS BLOGBEGO...'>
<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinwpm8oDRqdUPWzUqbYlYEN8JIycrRy_t90s7Y6sNWTLDEmvhfpbYl89RokCimO9V64lcWwl43O-DLiFXXrmfSHCSbTOAmNiPAEtV7E3Ri-h6gGO6hwIuVw2fFMNIVg792W8VdBBg_qoM/s320/anjing+menggonggong.jpg' width='200'/>
</a>
</div>
<div class='status-msg-hidden'>
<a href='http://tips-blogbego.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke TIPS BLOGBEGO...'>
<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinwpm8oDRqdUPWzUqbYlYEN8JIycrRy_t90s7Y6sNWTLDEmvhfpbYl89RokCimO9V64lcWwl43O-DLiFXXrmfSHCSbTOAmNiPAEtV7E3Ri-h6gGO6hwIuVw2fFMNIVg792W8VdBBg_qoM/s320/anjing+menggonggong.jpg' width='200'/></a>
</div>
</div>
<div style='clear: both;'/>
</b:if></b:includable>
Caranya :
- Masuk ke Account Blogger dengan ID kawan
- Klik Pengaturan - Format - Tampilkan sebanyak mungkin : ganti jumlahnya menjadi 0 (Nol) posting di halaman utama - Simpan Setelan.
- Klik Rancangan - Edit HTML - Simpan / Download Template kawan dulu
- Beri tanda centang pada radio disamping tulisan Expand Template Widget.
- Cari kode berikut <b:include data='post' name='post'/>
- Hapus / Ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <div style='float:center; padding:4px;margin:5px;border:2px solid #000000; -moz-border-radius:10px;-webkit-border-radius:10px; background:#FFFFFF; font size: 16px; text-decoration: none; line-height:normal;'> <a expr:href='data:post.url' style='text-decoration:none;'> <data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>
Kawan bisa merubah warna tampilan dengan mengganti tulisan yang berwarna merah diatas dengan warna selera kawan, karena script tersebut akan menampilkan Judul dari Artikel Blog kawan
- Geser mouse kebawah atau cari kode seperti ini : .comment-link{
- Hapus / atau ganti kode tersebut dengan kode script berikut :
.comment-link {float:right; overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:2px 5px 0px 0px;}
- Selanjutnya cari kode : <b:includable id='status-message'>
- Atau kurang lebih kodenya seperti berikut :
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if></b:includable> - Hapus atau Ganti Kode script tersebut dengan :
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<a href='http://tips-blogbego.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke TIPS BLOGBEGO...'>
<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinwpm8oDRqdUPWzUqbYlYEN8JIycrRy_t90s7Y6sNWTLDEmvhfpbYl89RokCimO9V64lcWwl43O-DLiFXXrmfSHCSbTOAmNiPAEtV7E3Ri-h6gGO6hwIuVw2fFMNIVg792W8VdBBg_qoM/s320/anjing+menggonggong.jpg' width='200'/>
</a>
</div>
<div class='status-msg-hidden'>
<a href='http://tips-blogbego.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke TIPS BLOGBEGO...'>
<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinwpm8oDRqdUPWzUqbYlYEN8JIycrRy_t90s7Y6sNWTLDEmvhfpbYl89RokCimO9V64lcWwl43O-DLiFXXrmfSHCSbTOAmNiPAEtV7E3Ri-h6gGO6hwIuVw2fFMNIVg792W8VdBBg_qoM/s320/anjing+menggonggong.jpg' width='200'/></a>
</div>
</div>
<div style='clear: both;'/>
</b:if></b:includable>
- Script tersebut diatas akan menjadi tampilan utama Blog kawan
- Kawan bisa berkreasi misalnya menambah Tulisan atau Gambar/Image
- Ganti url Blog saya dengan url Blog kawan
- Ganti Gambar / Image tersebut dengan gambar / image milik kawan
- Simpan Template dan lihat hasilnya
sumber:
http://tips-blogbego.blogspot.com
Semoga artikel Tampilan Blog bergaya WEB punya bermanfaat bagi Anda.
)
Post a Comment