Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Jumat, 04 November 2016

Mempercantik Blog dengan Halaman Intro

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
#intro{
background:#CAD8C9 url(http://lh6.ggpht.com/_pt7i0nbIOCY/TDVAtE_sRoI/AAAAAAAACtU/vYI1BUEhw0g/latar_thumb%5B2%5D.jpg) 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 sobat cari kode </head>
Setelah ketemu taruh kode dibawah ini tepat di atasnya
<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 taruh kode dibawah ini tepat dibawah kode <body>
<div id='intro'><div class='welcome'>Blogger Indonesia</div>
<a href='' onclick='closebar(); return false'><img alt='Kang roni' src='http://3.bp.blogspot.com/_MgfFnb8nlkU/TKMQMjbDbpI/AAAAAAAAEa8/f5k3HvpckFg/s1600/gambar-peta_indonesia.jpg' title='TULISAN MUNCUL'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>KLIK DISINI</a></div>
</div>
7.Save/simpan template dan lihat hasilnya untuk tips mempercantik blog dengan halaman intro.
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.


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi