Buat Halaman Intro Di blogger

Ada beberapa orang yang menanyakan , bisakah di blogger membuat halaman introseperti pada website-website tertentu? jawabannya mungkin bisa saja kali,

Apa yang dimaksud intro disini? mungkin yang dimaksud oleh si penanya adalah pada website-website tertentu, apabila website tersebut dikunjungi tidak langsung ke halaman utama, namun terlebih dahulu disuguhkan oleh sebuah halaman yang umumnya adalah ucapan selamat datang atau navigasi, ada juga yang berupa gambar animasi ataupun dalam bentuk flash.
Secara umum, blog diblogger agak sulit untuk membuat halaman intro, namun bukan berarti tidak mungkin. Terkait masalah intro ini, pernah juga beberapa blogger membahasnya,
Tertarik akan topik ini, kang Rohman mencoba untuk membuat sebuah halaman intro yang bisa dipakai di blogger.

Dengan bermodalkan sebuah script iklan dari dynamicdrive, dan tentu saja terjadi modifikasi dibeberapa titik, akhirnya halaman yang mirip intro bisa juga dibuat. Yang penasaran mungkin bisa melihat halaman demonya disini.
Jika sesuai skenario, pada halaman tersebut anda disuguhi sebuah halaman intro berupa ucapan selamat datang dan sebuah animasi gif dari winnie the pooh, dan untuk melihat halaman asli dari blog tersebut anda bisa klik tulisan “Go to Homepage” atau pada animasi winnie the pooh nya.
Apabila anda telah masuk ke homepage halaman aslinya, anda tidak akan melihat kembali halaman intro tersebut, dengan kata lain anda tidak akan diganggu lagi oleh kehadirannya. Kapan anda bisa melihat kembali halaman intro tersebut? halaman intro tersebut akan muncul kembali apabila anda menutup browser yang digunakan, kemudian mengunjungi kembali halaman tersebut. Namun efek tersebut berlaku apabila komputer yang anda gunakan tidak mematikan fungsi cookie karena script yang digunakan menggunakan meninggalkan jejak di cookie komputer sebagai pengingat.
Ah kang Rohman terlalu banyak basa basi, langsung ke tutorial pemasangan script tersebut dong? Eith, sabar dulu dong. Kalau orang dewasa bilang perlu foreplay agar terasa lebih nikmat…. upsss itu sih untuk tujuh belas tahun keatas
Tapi jika terlalu kepanjangan jadi bosen juga yah, mending langsung aja deh ke tutorial bagaimana cara memasang script intro ke blogger.

Cara Pasang Script Intro Ke blogger

Silahkan ikuti langkah-langkah berikut ini :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Rancangan.
   
3. Klik menu Edit HTML
   
4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
   
5. Silahkan cari kode berikut pada template anda :
   

   ]]></b:skin>

6. Silahkan copy, lalu paste kode berikut diatas kode ]]></b:skin>
   

   #intro{
     background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_-Lve7Yu2tNdp8XwIYmkL2JHUpT0tWQqs52uVETAdwEouA1NwlN5IHC2RnPTBHwtiQKbVVIfvIuKw0JveSVyj2eC18jWZ8kjT4W5OU1HFePasTFKFB8mVu_dIuGa0akjQIPGEJwQKzro/) 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
     }

7. Silahkan cari kode berikut pada template anda :
   

   </head>

8. Silahkan copy, lalu paste script berikut diatas kode </head>
   

   <script type='text/javascript'> 
   //<![CDATA[
    /***********************************************
   * Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
   * Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
   * This notice must stay intact for legal use.
   * Visit http://www.dynamicdrive.com/ for full source code
   ***********************************************/
   /*************************************************
   * Blogger intro by http://www.blogspottutorial.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>

9. Cari kode berikut pada template anda <body>
10. Copy, lalu paste kode berikut dibawah 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://i234.photobucket.com/albums/ee208/decnote/cute-comment/Cute-hi5-60.gif' title='go to my homepage'/></a>
    <div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
    </div>

11. Klik tombol SIMPAN SETELAN.
12. Silahkan lihat hasilnya. Selesai.