Trik ini saya gunakan di Test Gaya Blogazine di Mesin Blogger, di halaman index kalau mau melihat hasilnya.
Hal Penting yang Perlu di Perhatikan
Sebelum mempraktekan trik ini sebaiknya anda 'backup template' anda, atau uji coba dulu di blog 'dummy' anda. Sebab trik ini akan mempengaruhi 'page element' pada 'dashboard'. Jadi pada 'page element' nanti hanya menampilkan halaman frontpage.Untuk itu sebelum mempraktekannya, yakinkan page element anda sebelumnya sudah sesuai dengan keinginan anda terutama dalam hal widget. Tapi apabila anda sudah mempraktekan trik ini dan kemudian anda ingin menambah widget di halaman blognya, anda harus menghapus trik ini, sehingga page element nya kembali menampilkan halaman blognya.
Prinsip dari Trik ini
Prinsip dari trik ini menggunakan:<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- (untuk halaman frontpage) -->
<b:else/>
<!-- (untuk halaman blog) -->
</b:if> Tahapan
Masuk kehalaman Edit HTML di dashboard.
1. Kode HTML
Masukan kode berikut dibawah
<body> :<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- (kode HTML untuk halaman frontpage) -->
<b:else/> kemudian masukan pula ini diatas
</body> :</b:if> Apabila anda sudah memasukan kode tersebut, jika anda preview atau anda save maka halaman blog anda akan kosong atau blank. Untuk itu anda perlu mengisi halaman frontpage nya, misal dengan judul blog, navigasi (untuk mengaitkan kehalaman blog anda) dan juga menambahkan widget yang diinginkan, atau juga kalau mau pasang 'Slide Show'.
Untuk menambahkan widget, masukan kode berikut (diatas
<b:else/>) : <div id='frontpage-wrapper'>
<b:section class='frontpage' id='frontpage'/>
</div> Setelah anda masukan kode tersebut maka di page elemen akan muncul add gadget baru, yang sebelumnya kosong karena trik diatas.
2. Kode CSS
Untuk kode CSS nya anda buat style baru seperti berikut simpan diatas
</head>:<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
/* isi CSS nya disini */
</b:if>
</style> Contoh kode Frontpage di Blogger Bergaya Blogazine
1. Kode HTML:
<div id='frontpage'>
<h1><a href='/'><data:blog.title/></a></h1>
<ul class='nav'>
<li><a href='/'>Home</a><span class='special-character'>/</span></li>
<li><a href='/'>Contact</a><span class='special-character'>/</span></li>
<li><a href='/atom.xml'>RSS</a><span class='special-character'>/</span></li>
</ul><!-- end nav -->
<div class='clear'> </div>
<div id='terbaru'>
<b:section class='terbaru' id='terbaru1'>
<b:widget id='Feed1' locked='false' title='Recent Post' type='Feed'/>
</b:section>
</div>
<p>§</p>
</div> 2. Kode CSS:
body{background:#900;font-size:22px;text-align:center;text-shadow:1px 2px 2px #600}frontpage{position:relative}h1{font-size:94px;line-height:120px}h2{font-size:24px;line-height:70px}.widget-content{line-height:30px;text-align:center}.nav li{list-style:none;margin:0 50px;text-align:left}.nav li a{font-size:32px;line-height:70px}a{color:#222;text-shadow:1px 2px 2px #b00}a:hover{color:#111}a:focus{color:#000}#terbaru{-moz-border-radius:12px;-webkit-border-radius:12px;bottom:0;color:#eee;margin:20px;padding:20px;position:absolute;right:0;width:450px}#terbaru:hover{-moz-box-shadow:0 0 8px #580000;box-shadow:0 0 8px #580000}p{color:#222;font-size:140px;text-shadow:1px 2px 2px #c00}.special-character{color:#333;text-shadow:1px 2px 2px #c00;font-weight:700;font-size:28px} 
0 comments:
Post a Comment