Mempercantik blog sudah menjadi suatu keharusan untuk seorang peblogger
yang mengutamakan pengunjung agar lebih betah, sebelum mempercantik blog
dengan halaman intro alangkah baiknya sobat membaca artikel kang roni
yang berjudul Cara Membuat Blog Cantik dan Menarik dengan Benar.Tutorial
Blog kali ini kang roni akan share sebuah posting yang cukup keren
yaitu cara membuat halaman intro, mengenai tentang apa itu halaman intro
kang roni akan sedikit menjelaskan agar sobat blogger yang baru nwebie
mengerti gambarannya sebelum menerapkan halaman intro pada blog yang di
miliki, yang dimaksud dengan halaman intro adalah halaman blog yang
pertama kali muncul sebelum masuk pada home page atau bisa disebut
sebagai halaman pembuka yang berfungsi untuk mengenalkan blog pada
pengunjung.Untuk melihat demonya sobat klik disini.
Cara membuat halaman Intro
1.Login Blogger.com -> Buka Rancangan/Desain -> Pilih Edit HTML
2.Download Template Lengkap Sebelum mengedit template Anda
3.Beri centang pada kotak Expand Template Widget
4.Cari kode ]]></b:skin>
Setelah ketemu taruh kode dibawah ini tepat di atasnya
Setelah ketemu taruh kode dibawah ini tepat di atasnya
Setelah ketemu taruh kode dibawah ini tepat dibawah kode <body>
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.
Cara membuat halaman Intro
1.Login Blogger.com -> Buka Rancangan/Desain -> Pilih Edit HTML
2.Download Template Lengkap Sebelum mengedit template Anda
3.Beri centang pada kotak Expand Template Widget
4.Cari kode ]]></b:skin>
Setelah ketemu taruh kode dibawah ini tepat di atasnya
5.Langkah selanjutnya sobat cari kode </head>#intro{background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUke0QYBKZ4QTCB4XxTsYpLzJL01H8vf_-AZQhA59zwMH2bcupuQbPAzpPeA9vocSGVU5VcMdqOsd6kaLbvinvZ9K2gJAy-nwib3pqUPi80PeFxj48ATlyyu7JzV1olNTZWhAWHGdRJo/) 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}
Setelah ketemu taruh kode dibawah ini tepat di atasnya
6.Langkah untuk membuat halaman intro selanjutnya sobat cari kode <body><script type='text/javascript'>//<![CDATA[/************************************************ Blogger intro by http://roningasinanblog.blogspot.com**************************************************/var persistclose=1var startX = 0var startY = 0var 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.lengthend = 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").offsetHeightvar 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>
Setelah ketemu taruh kode dibawah ini tepat dibawah kode <body>
7.Save/simpan template dan lihat hasilnya untuk tips mempercantik blog dengan halaman intro.<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/AVvXsEhnPc7eNFrgJW_TbHvzZFDBC6oLWnU7ZpGHGzchY0KaLphjEcqW1rW2YHJaQKjb3lMAP09fRWSpo4alxJfo7cFKSBhq-KS6UufmWMo3XUjDUxGZp_WOAqIBXRz-NnMW57pehZ_5eAmpdBwH/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.