Membuat Blog Redirect / Dialihkan ke Halaman Lain
1. Masuk ke dashboard blogger
2. Klik template, klik edit HTML, lalu pilih lanjutkan
3. Cari kode <body> gunakan CTRL+F untuk mencarinya
4. Jika sudah ketemu, hapus kode <body> tersebut lalu gantikan dengan kode berikut:
<body onload='window.location.href="http://oktriblogger.blogspot.com"'>
<script language="JavaScript" type="text/javascript">
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";
var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"></div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"></div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"></div>');
}
if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;
for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}
function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}
if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>
<nav id='sidenav'>
<ul>
<li><a class='main home' href='/'>Home</a></li>
<li><a class='main about' href='#'>About</a>
<ul class='fallback'>
<li><a class='social blogger' href='#'>Me on Blogger</a></li>
<li><a class='social facebook' href='#'>Me on Facebook</a></li>
<li><a class='social twitter' href='#'>Me on Twitter</a></li>
<li><a class='social googleplus' href='#'>Me on Google+</a></li>
</ul>
</li>
<li><a class='main archive' href='#'>Archives</a>
<ul class='fallback'>
<li><a href='#'>Table of Contents</a></li>
<li><a href='#'>Recent Articles</a></li>
<li><a href='#'>Recent Comments</a></li>
</ul>
</li>
<li><a class='main share' href='#'>Share</a>
<ul class='fallback'>
<li><a class='social blogger' href='#'>Blogger</a></li>
<li><a class='social facebook' href='#'>Facebook</a></li>
<li><a class='social twitter' href='#'>Twitter</a></li>
<li><a class='social googleplus' href='#'>Google+</a></li>
<li><a class='social flickr' href='#'>Flickr</a></li>
<li><a class='social rss' href='#'>RSS</a></li>
<li><a class='social mail' href='#'>Mail</a></li>
</ul>
</li>
<li><a class='main photos' href='#'>Screencast</a></li>
<li><a class='main contact' href='#'>Contact</a>
<ul class='fallback' style='font-weight:bold;'>
<li><a class='social facebook' href='#'>Facebook</a></li>
<li><a class='social twitter' href='#'>Twitter</a></li>
<li><a class='social mail' href='#'>Mail</a></li>
</ul>
</li>
</ul>
</nav>
#sidenav {
position:fixed !important;
position:absolute; /* IE6 Fallback */
top:60px;
left:0px;
z-index:999;
background-color:#eee;
border:1px solid #ccc;
width:auto;
height:auto;
text-indent:-99999px;
font:normal 12px Arial,Sans-Serif !important;
-webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
}
#sidenav ul {
margin:0px 0px;
padding:0px 0px;
}
#sidenav li {
margin:0px 0px;
padding:0px 0px;
list-style:none;
display:block;
position:relative;
}
#sidenav a {
display:block;
width:20px;
border-bottom:1px solid #ccc;
color:#666;
text-decoration:none;
-webkit-box-shadow:inset 0px 0px 0px 1px white;
-moz-box-shadow:inset 0px 0px 0px 1px white;
box-shadow:inset 0px 0px 0px 1px white;
}
#sidenav li:last-child a {
border-bottom:none;
}
#sidenav span.ttp {
display:block;
position:absolute;
top:0px;
font:normal 94% Arial,Sans-Serif;
background-color:#39f;
color:white;
padding:0px 10px;
line-height:22px;
height:22px;
width:auto;
left:100%;
z-index:77;
margin-left:17px;
text-indent:0px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:none;
}
#sidenav span.ttp em {
display:block;
width:0px;
height:0px;
border:4px solid transparent;
border-right-color:#39f;
position:absolute;
top:7px;
right:100%;
}
#sidenav li ul {
width:150px;
height:auto;
background:transparent;
border:none;
position:absolute;
top:-1px;
left:100%;
-webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
display:none;
}
#sidenav li ul a {
border:1px solid #ccc;
border-bottom:none;
background-color:#eee;
display:block;
width:auto;
padding:0px 10px;
line-height:25px;
text-indent:0px;
-webkit-box-shadow:inset 0px 0px 0px 1px white;
-moz-box-shadow:inset 0px 0px 0px 1px white;
box-shadow:inset 0px 0px 0px 1px white;
}
#sidenav li a:hover {background-color:#ddd;}
#sidenav li ul li:last-child a {
border-bottom:1px solid #ccc;
}
/* CSS Sprites */
#sidenav a.main {
background-image:url('main-sprites.png');
background-repeat:no-repeat;
width:26px;
height:25px;
}
#sidenav a.home {background-position:5px 4px; }
#sidenav a.about {background-position:5px -22px; }
#sidenav a.archive {background-position:5px -48px; }
#sidenav a.share {background-position:5px -73px; }
#sidenav a.photos {background-position:5px -100px;}
#sidenav a.contact {background-position:5px -126px;}
#sidenav li ul a.social {
background-image:url('social-sprites.png');
background-repeat:no-repeat;
padding-left:30px !important;
}
#sidenav li ul a.blogger {background-position:5px 4px; }
#sidenav li ul a.facebook {background-position:5px -21px; }
#sidenav li ul a.twitter {background-position:5px -47px; }
#sidenav li ul a.googleplus {background-position:5px -73px; }
#sidenav li ul a.flickr {background-position:5px -99px; }
#sidenav li ul a.rss {background-position:5px -125px;}
#sidenav li ul a.mail {background-position:5px -151px;}
/* CSS Fallback */
#sidenav li:hover .fallback {display:block;}
$(function() {
// Menonaktifkan fallback CSS (Saya akan membahas ini suatu saat nanti)
$('#sidenav .fallback').removeClass('fallback');
// Menampilkan dan menyembunyikan tooltip
$('#sidenav li a.main').hover(function() {
$(this).append('<span class="ttp">' + $(this).text() + '<em></em></span>');
$('span.ttp', this).stop().animate({marginLeft:7, opacity:"show"}, 200);
}, function() {
$('span.ttp', this).stop().animate({marginLeft:10, opacity:"hide"}, 100, function() {
$(this).remove();
});
});
// Saat elemen <a> diklik...
$('#sidenav li a[href="#"]').click(function(e) {
// Hilangkan semua anak <ul> dan tooltip yang tampil
$('#sidenav li ul:visible, span.ttp:visible').hide();
// Tampilkan elemen setelahnya (dalam hal ini adalah elemen <ul>)
// dengan efek .show('fast') dan set nilai margin-left menjadi 10 piksel untuk menciptakan jarak
$(this).next().css('margin-left', '10px').show('fast');
// Jangan biarkan event .click() pada elemen ini mempengaruhi elemen lain di dalam dokumen
// Selengkapnya: http://api.jquery.com/event.stopPropagation/
e.stopPropagation();
return false;
});
// Hilangkan semua anak elemen <ul> dan tooltip yang tampil saat elemen selain menu diklik
$(document).click(function() {
$('#sidenav li ul:visible, span.ttp:visible').hide();
});
});<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
/*
Visit: http://tutorialbelajarblogger.blogspot.com/
*/
#paneloktri {display:block;}
#panel {background-color:#CF4C23;border:2px solid #CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;
font:normal 12px "Consolas","Courier New",Courier,mono,serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}
.tombolpanel {position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #CF4C23;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}
.tombolpanel:hover {color:#ccc;}
.tombolpanel:after {content:'';position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tombolpanel').click(function() {
$('#panel').slideToggle('slow');
$('.tombolpanel span.in').toggle();
});
});
</script>
<div id="paneloktri">
<div id="panel">
... ISI KONTEN DI SINI ...
</div>
<div class="tombolpanel">
<span class="in">Buka Panel</span>
<span class="in" style="display:none;">Tutup Panel</span>
</div>
</div>
<style>#oktri img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#oktri img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>
<div id="oktri">
<a href="http://http://tutorialbelajarblogger.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjegaT9iWVWUWVVLrdabiIP7gY93IZw5F-FjwvR9sDk4SyF3W9gQtJ1tNaatSnujkyYGKiIhPDMf_TV_yDF4qY3PuCIgO3pOUs4f4v8fKykkLYhonNc4lABVG6TGopiOlbpsjQPYjG5XXU0/s200/naruto+dont+copy.png" /></a></div>
7. Sobat Preview dahulu, setelah berhasil baru di SAVE#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
.gambargetar {
position: relative;
}
<script src="http://tips-goooogle.googlecode.com/files/gambargetar%20Xtteme.js?attachauth=ANoY7crTQ4Lxnhf7dmkwVCDEuTh7tAEnUb24VQITeydgTn0GgWS6i13WBvtATMNH-03ZLeomrsDAaJdTYlyazR9wt1cIcZXm2h5BMS3bFaRzpwe3BVjMe-I_pzEALIgg97q3b1EWvttUKoUP8X3qebNDdmwO20x_okkWFa3AV68yosoYqixie957Grgnn8lIWESG-jcKGZG78t4wvT6zh2Svz3cpYleeSYekUxbpT2LfB9Qj1Q6pHvA%3D&attredirects=0" type="text/javascript">Jika sudah ini kode untuk memanggil gambarnya :
<img style="left: 0pt; top: 0pt;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjskrc_u3EtXvUBs06gOBYj6N7XGcD_z9nzwaLVEY7LU9vhERn_AVuocc1kCNcZyaUKYF3I4F8A8Tut8cEG7XtBD24pubveM25N3PCFW47yCmW5V6ImLgsJCk6KuuAoXf5IpdFCPMGEhXk/s640/nenek+gaul.jpg" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()" class="gambargetar">
