Jumat, 30 Maret 2012
Membuat Static Page pada Template Magazine
Postingan kali ini saya tulis khusus untuk pengguna template blogger magazine buatan saya dan mungkin bisa juga dipakai untuk template lain yang tampilannya magazine. Banyak sekali yang bertanya lewat kotak komentar maupun email tentang bagaimana menambahkan halaman statis (static page) pada template tersebut. Mohon maaf karena kesibukan di dunia nyata saya tidak sempat bereksperimen untuk menambahkan fitur static page, baru sekarang saya mengutak-atik template dan menambahkan statc page pada template-template magazine tersebut.
Tutorial membuat static page pada template blogger style magazine ini sudah saya coba dan terapkan disini, dan yang jelas pasti akan saya bagikan penemuan saya ini kepada para teman-teman blogger pengguna template magazine. Oke langsung saja pada cara pembuatannya :
- Langkah awal login ke blogger dengan Akun anda.
- Masuk ke Template kemudian klik Edit HTML
- Jangan lupa untuk mencentang kotak expand widget templates, dan untuk berjaga-jaga backup dulu template Anda.
- Kemudian cari kode seperti dibawah ini, letaknya dibawah ]]></b:skin> :
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>#main-wrapper {width: 370px;padding-left:10px;}h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {display:none}.post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh087LZTS-XG119bPgnHMH5j6atrNsbYRrSIcYySIOCknqc85tW-kb7oBzQSm6c35QL5Gf_17UQsDAYrplv91DldViG8FTHFdcFUT7BkK6eUyqwtdVaxq0cuONYD50lyX4NN5WaHgOKqsI/s1600/arrowList_2.gif) no-repeat 0px 3px;font:normal 12px Arial;margin:0 0 0 2px;padding:4px 6px 4px 15px;line-height:1.3em;position:relative;}.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:normal}.post h3 strong, .post h3 a:hover {color:#FF8000;}.post {border:none}.post {border-bottom:1px dotted silver;margin:0px;padding:0px;}#blog-pager {font:normal 11px Arial;text-align:left;margin:6px 0 1px 0;padding:7px 0px 7px 0px;}</b:if>
</style> - Yang harus Anda perhatikan adalah kode diatas yang berwarna merah, kode lain (yang berwarna hitam) berbeda-beda tiap template. Ganti kode warna merah dengan kode berikut :Sehingga susunannya akan seperti ini :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
...................................
...................................
...................................
</style>
</b:if></b:if><b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>#main-wrapper {width: 370px;padding-left:10px;}h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {display:none}.post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh087LZTS-XG119bPgnHMH5j6atrNsbYRrSIcYySIOCknqc85tW-kb7oBzQSm6c35QL5Gf_17UQsDAYrplv91DldViG8FTHFdcFUT7BkK6eUyqwtdVaxq0cuONYD50lyX4NN5WaHgOKqsI/s1600/arrowList_2.gif) no-repeat 0px 3px;font:normal 12px Arial;margin:0 0 0 2px;padding:4px 6px 4px 15px;line-height:1.3em;position:relative;}.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:normal}.post h3 strong, .post h3 a:hover {color:#FF8000;}.post {border:none}.post {border-bottom:1px dotted silver;margin:0px;padding:0px;}#blog-pager {font:normal 11px Arial;text-align:left;margin:6px 0 1px 0;padding:7px 0px 7px 0px;}</style>
</b:if></b:if> - Masih pada posisi Edit HTML, scroll jauh ke bawah temukan kode berikut ini :
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<div id='artikel'>
<data:post.body/>
</div>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> - Kode yang saya cetak tebal diatas, tiap template berbeda-beda, setelah ketemu ganti dengan kode di bawah ini :
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> - Terakhir Save Templates, langkah membuat static page selesai.
Sebenarnya sampai pada langkah ini static page (halaman statis) pada template Anda sudah muncul. Tapi biasanya widget yang ada di tengah atau disebelah postingan terbaru akan nampak pada halaman statis. Untuk menghilangkan widget tersebut dari halaman statis ikuti langkah di bawah ini :
- Pada posisi Edit HTML (centang expand widget templates) cari dulu ID widget yang ikut muncul pada halaman statis. Di bawah ini adalah contoh dari ID widget (perhatikan kode yang dicetak tebal)
<b:section class='sidebarleft' id='sidebarleft' preferred='yes'>
Sebagai contoh saya ambil dari template Johny Simple Magazine 2, widget Adsense dan World News mempunyai ID : sidebarleft - Setelah itu cari kode <div id='sidebarleft-wrapper'>, kemudian tambahkan kode berikut ini diatasnya :
<b:if cond='data:blog.pageType != "static_page"'>
- Scroll ke bawah sampai Anda menemukan kode </div> penutup dari <div id='sidebarleft-wrapper'>. Kemudian letakkan kode </b:if> di bawahnya sebagai penutup. Susunannya seperti ini :
<b:if cond='data:blog.pageType != "static_page"'>
<div id='sidebarleft-wrapper'>
........................................................
........................................................
........................................................
</div>
</b:if> - Jika Anda ingin format timestamp tidak tampak pada halaman statis, cari kode di bawah ini :<b:if cond='data:blog.pageType != "item"'></b:if>
<span class='post-timestamp'><data:post.timestamp/></span> - Ganti dengan kode berikut :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<span class='post-timestamp'><data:post.timestamp/></span>
</b:if>
</b:if> - Terakhir Save Templates, langkah membuat statis page untuk template magazine sudah selesai dan lihat hasilnya.
Langkah-langkah diatas saya khususkan bagi para pengguna template magazine buatan saya, seperti Johny Simple Magazine 2, Johny Magazine, Johny Magazine 2 Light, Johny Portal dan Johny Portal 2, Mas Paper Template, Johny Papers Magazine. Silahkan Anda coba dulu jika masih ada kesulitan bisa ditanyakan lewat kotak komentar yang ada di bawah. Demikian tutorial singkat kali ini, selamat mencoba dan semoga bermanfaat.
Label:
tutorial blog