Cara Membuat/Menambahkan Halaman Pembuka Pada Blog

06.05 | Diposting oleh D'Amateur |
membuat tampilan blog menarik tentu saja salah satu pra-syarat penting yang diperlukan untuk membantu meningkatkan jumlah pengunjung blog. Selain itu, design yang menarik dapat membuat pengunjung blog anda betah didalamnya. Terbukti dengan maraknya tutorial blog yang tersedia di berbagai blog/website, dan 60% diantaranya seputar trik n tips memperindah tampilan blog. Begitu juga Focus, yang kali ini sebagai admin coba saya jadikan wadah membagikan tutorial blogger lainnya.

Beberapa website mempunyai awalan yang bersifat intro atau halaman pembuka, halaman ini selain membuat website terlihat semakin menarik juga beradab, :D. Jelas beradab, karena sebelum masuk tentunya harus memberikan salam terlebih dahulu, layaknya berkunjung kerumah seseorang. Pertanyaannya kemudian adalah, bisakah Blog memiliki halaman serupa ?. halaman awal yang memberikan kesan bahwa pemiliknya adalah orang beradab :D. Mengutip bahasa para motivator "tidak ada yang tidak bisa", tentu saja halaman pembuka seperti yang dimiliki beberapa website tersebut juga bisa dimiliki oleh Blog. gimana ?, menarik bukan jika blog kita dipasangi halaman pembuka ???.. caranya tidak sulit koq.. (tidak ada perubahan template. yang dibutuhkan hanyalah menambahkan beberapa kode berikut kedalam template anda.

Sebelumnya perlu saya tegaskan, Halaman ini beda dengan halaman iklan melayang seperti yang dapat ditemukan pada banyak blog.

ini dia nigh, cara memasang kode yang dibutuhkan untuk menambahkan halaman pembuka pada blog anda:

Silahkan ikuti langkah-langkah berikut ini :
1. Login ke blogger
2. Klik Rancangan
3. Klik menu Edit HTML, lalu...

Cari kode berikut pada template anda ]]></b:skin> (untuk mempermudah pencarian ketiklah ctrl+f), setelah menemukan kode yang dimaksud, letakkan kode berikut diatasnya:


#intro{
background:#000000;
position:fixed;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:100;
text-align:center;
visibility:hidden;
}
* html #intro{
position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#intro .welcome{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
font-size:30px;
margin-top:10%;
margin-bottom:1%;
text-shadow:1px 1px 1px #fff;
}
#intro a img{border:none}
.gohome, .gohome a,.gohome a:visited,.gohome a:active{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
margin-top:4%;
font-size:25px;
text-shadow:1px 1px 1px #fff
}
.gohome a:hover{
color:#ffffff;
text-shadow:1px 1px 1px #f00;
text-decoration:none
}


Kemudian, letakkan kode scrip berikut diatas kode: </head>


<script src='http://h1.ripway.com/tropicboy/intro.js' type='text/javascript'/>


Langkah terakhir adalah, menempatkan kode dibawah ini diatas kode </body>


<div id='intro'><div class='welcome'>Welcome to my blog</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='http://i1044.photobucket.com/albums/b449/Tomocchan/pervy-gif.gif' title='enter'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
<script src='http://h1.ripway.com/tropicboy/TOCcategory.js' type='text/javascript'/>
</div>


Ubah suaikan:
url yang berwarna biru adalah url gambar yang akan tampil di halaman intro/pembuka, silahkan ganti url tersebut dengan url gambar pilihan anda agar lebih matching dengan blog anda :D


Gimana ?, gampang bukan ?.. silahkan dicoba
Label: