Membuat Intro Page Keren - Saya ga tau apa ya kata-kata awal yang tepat untuk mengisi artikel ini :v Bagaimana kabar sobat semua? pasti baik yaa :D Apa itu Intro Page? Ya ini istilah saya sendiri sih setelah membuatnya :v
Di tutorial ini saya menggunakan tag conditional sebagai dasarnya agar hanya tampil di homepage. Tapi jika sobat ingin tampil tidak hanya di homepage ya utak-atik sendiri ya :3
Kode CSS :
.muncul-hilangsz {
background: #31ace8;
color: white;
text-align: center;
padding: 16px 24px;
font-family: Tahoma, Verdana;
font-size: 13px;
border-radius: 5px;
cursor: pointer;
position: fixed;
bottom: 40%;
left: 50%;
margin-left: -35px;
z-index: 99999;
}
Kode Jquery (Blog sobat harus sudah dipasang Jquery terlebih dahulu) :
<script type='text/javascript'>
$(document).ready(function() {
$('.muncul-hilangsz').click(function() {
$('#sad').toggle(500);
});
});
</script>
Kode HTML (Taruh dibawah <body>) :
<b:if cond="data:blog.url == data:blog.homepageUrl">Kode HTML (Taruh di atas </body>)
<div id='sad'><h3>INTRO</h3>
<h4>Selamat Datang Di Blog Saya</h4>
<p>Tidak ada yang spesial di blog saya ini, saya hanya ingin berbagi ilmu kepada sobat semua. Ya tetapi saya masih seperti blogger-blogger lainnya yang menginginkan uang. Namun jujur saya tidak ingin terburu-buru. Saya ingin membuat artikel berguna dulu untuk sobat semua agar nantinya bukan saya yang mencari pengunjung namun pengunjung yang mencari blog saya :)</p>
<span class='muncul-hilangsz'>Close</span>
</div>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>Sekarang coba lihat hasilnya
<span class='muncul-hilangs'>Show/Hide Header</span>
<style type='text/css'>
#sad {
background-image:url(http://upload.wikimedia.org/wikipedia/en/3/3b/Jakarta-Panorama.jpg);
z-index:9999;
width:100%;
position:fixed;
background-size:100%;
height:100%;
top:0;left:0;
color:#333;
font-family:'verdana',arial;
}
#sad h3 {
color:#333;
font-size:300%;
}
#sad h4 {
font-size:230%;
}
#sad
overflow:none;
}
</style>
</b:if>
Lebih lanjut :
Ganti teks warna merah dengan url gambar.
Ganti teks jingga dengan teks intro
Terima kasih ^_^ Sampai jumpa lagi yo
#CORET BERANDA
Nama saya Rishad Harisdias, seorang anak SMA yang mempunyai hobi blogging walaupun belum ada blog yang didalaminya :)
ConversionConversion EmoticonEmoticon