Cara Buat Halaman Intro Pada Blog

Tutorial Blog kali ini Saya akan Share sebuah posting yang cukup keren yaitu cara Membuat Halaman Intro .
Oke Saya akan sedikit menjelaskan apa itu Halaman Intro , Halaman Intro adalah Halaman Blog yang pertama kali muncul sebelum masuk ke halaman Home Page atau bisa disebut Halaman Pembuka yang berfungsi untuk mengenalkan Blog Sobat pada pengunjung . Untuk melihat Demo nya silahkan Sobat klik disini.

Gimana Menarik bukan ?? baiklah kita langsung saja kita ke TKP .

1. Login ke Blogger.com --> Buka Rancangan/Desain --> pilih Edit HTML .
2. Download Template Lengkap Sebelum mengedit template Anda .
3. Centang pada Expand Template Widget .
4. Cari kode ]]></b:skin>  

Setelah ketemu letakkan kode berikut di atas kode ]]></b:skin>   

    #intro{
    background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi50W3tSqRHm3fownbeb9VuBxvv9eDKTeHcVSfR4hZC1FJf08LaUGSmsJPqJpSTJMGIArLHdNJIPOikmZNPuRLzx3NdBqqCuGLXH43OVEDb47MdLU0eHqbKzD5_PqtzjzUxmyEbnGosu74/) repeat-x top left fixed;
    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
    }

 5. Langkah selanjutnya cari kode </head>
Setelah ketemu letakkan kode berikut di atas kode </head>

    <script type='text/javascript'>
    //<![CDATA[
    /***********************************************
    * Blogger intro by http://roningasinanblog.blogspot.com
    **************************************************/
    var persistclose=1
    var startX = 0
    var startY = 0
    var verticalpos="fromtop"
    function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }}return returnvalue;}
    function closebar(){
    if (persistclose)
    document.cookie="remainclosed=1"

    document.getElementById("intro").style.visibility="hidden";}
    function staticbar(){
    barheight=document.getElementById("intro").offsetHeight
    var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
    var d = document;
    function ml(id){
    var el=d.getElementById(id);
    if (!persistclose || persistclose && get_cookie("remainclosed")=="")
    el.style.visibility="visible"
    if(d.layers)el.style=el;
    el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}
    el.x = startX;
    if (verticalpos=="fromtop")
    el.y = startY;
    else{
    el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
    el.y -= startY; }
    return el; }
    window.stayTopLeft=function(){
    if (verticalpos=="fromtop"){
    var pY = ns ? pageYOffset : iecompattest().scrollTop;
    ftlObj.y == (pY + startY - ftlObj.y)/0;}
    else{
    var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
    ftlObj.y == (pY - startY - ftlObj.y)/0;
    }
    ftlObj.sP(ftlObj.x, ftlObj.y);
    setTimeout("stayTopLeft()", 10); }
    ftlObj = ml("intro");
    stayTopLeft();}
    if (window.addEventListener)
    window.addEventListener("load", staticbar, false)
    else if (window.attachEvent)
    window.attachEvent("onload", staticbar)
    else if (document.getElementById)
    window.onload=staticbar
    //]]>
    </script>

 6. Langkah untuk membuat Halaman Intro selanjutnya Sobat cari Kode <body>
Setelah ketemu letakkan kode berikut di bawah kode <body>

    <div id='intro'><div class='welcome'>Blogger Indonesia</div>
    <a href='' onclick='closebar(); return false'><img alt='Kang roni' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6tfdgZohFXaq0ro7mDimpp1W9y6Qsiif_v0F9McMh1pQN2cf8DbZ1YnD91PCNul-QRZZDH_OdjyIHK0vda0j_6Q-g7AwTb7td1pOXaWWWEArQkqu3S-MMQaXSFEU19ynSe6RVoJLtRUeJ/s1600/gambar-peta_indonesia.jpg' title='TULISAN MUNCUL'/></a>
    <div class='gohome'><a href='' onclick='closebar(); return false'>KLIK DISINI</a></div>
    </div>

 Ket: Untuk tulisan yang diberi warna merah boleh sobat ganti dengan kata-kata yang sobat inginkan dan kode yang diberi warna biru itu adalah gambar untuk halaman intro sobat bisa menggantinya untuk menyesuaikan tema blog. 

7. Save Template Sobat dan lihat Hasilnya .


Sekian untuk Tutorial kali ini , Semoga Bermanfaat bagi Sobat .

Cassanova In The Hoy~02.56