oto: October 2012

Tutorial cara melakukan redirect url/ pengalihan link pada halaman blog menggunakan teknik html, javascript dan php berikut ini disajikan sebagi dokumentasi bagi saya dan mudah-mudan bermanfaat juga bagi blogger lainnya :)

Adakalanya redirect url atau pengalihan link ini berguna terutama untuk suatu halaman yang tidak lagi aktif maupun error dan bisa juga untuk mengarahkan pengunjung blog kesebuah halaman khusus yang diinginkan.

Dibawah ini dituliskan beberapa cara untuk merubah arah dari link, baik dengan menggunakan HTML Redirect, JAVASCRIPT Redirect dan PHP Redirect.

Teknik mengarahkan link menggunakan HTML; letakkan kode ini diatas </head>

<meta http-equiv="Refresh" content="5; url=http://url_blog_yang_dituju"/>

Teknik mengalihkan url menggunakan Javascript; ; letakkan kode ini diatas </head>

<script type="text/javascript">
window.location = "http://url_blog_yang_dituju"
</script>

atau

<script language="javascript" type="text/javascript">
window.location.href="http://url_blog_yang_dituju?backurl="+window.location.href;
</script>

atau

<script language="javascript">
alert("back");
window.history.back(-1);
</script>

atau

<script language="javascript">
window.navigate("http://url_blog_yang_dituju");
</script>

atau

<script language="JavaScript">
self.location="http://url_blog_yang_dituju";
</script>

atau

<script language="javascript">
alert("Access Violation");
top.location="http://url_blog_yang_dituju";
</script>


Melakukan redirect url dengan php; letakkan kode ini dibagian paling atas dari script php
<?php header( 'Location: http://url_blog_yang_dituju' ) ;?>

Mempercantik navigasi Next Post (blog-pager-newer-link), Previous Post (blog-pager-older-link) dan Home (home-link) dapat dilakukan dengan merubah teks Navigasi Older Post, Newer Post dan Home atau bisa juga dengan Memberi tombol navigasi older, new post dan home page.

Untuk merubah Navigasi Blogger dengan Text maupun Tombol agar menjadi lebih indah dan menarik, dapat dilakukan dengan menerapkan langkah-langkah berikut ini:

Cara Merubah Text Navigasi Dan Membuat Tombol Navigasi Blogspot

Temukan dengan Ctrl+F

<b:includable id='nextprev'>

Ganti navigasi default blogspot yang ada dibawahnya dengan:

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='nav-item nav-prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
        <span class='text'>Next</span></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='nav-item nav-next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
      <span class='text'>Prev</span></a>
      </span>
    </b:if>
    
    <span id='home-link'>
    <a expr:href='data:blog.homepageUrl'><span class='text'>Home</span></a>
    </span>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>

Beri penggaya dengan CSS, letakkan diatas ]]></b:skin>

#blog-pager #home-link,#blog-pager-newer-link,#blog-pager-older-link{opacity:.3;-moz-transition-property:opacity;-moz-transition-duration:1.5s;-moz-transition-delay:.75s;-webkit-transition-property:opacity;-webkit-transition-duration:1.5s;-webkit-transition-delay:.75s;-o-transition-property:opacity;-o-transition-duration:1.5s;-o-transition-delay:.75s;transition-property:opacity;transition-duration:1.5s;transition-delay:.75s;}#blog-pager #home-link:hover,#blog-pager-newer-link:hover,#blog-pager-older-link:hover{opacity:1;}#blog-pager #home-link,#blog-pager-newer-link,#blog-pager-older-link{width:100px;height:100px;border-bottom:2px solid #eee;background-image:-webkit-linear-gradient(top, #999, #d0d0d0 80%);background-image:-moz-linear-gradient(top, #999, #d0d0d0 80%);background-image:-ms-linear-gradient(top, #999, #d0d0d0 80%);background-image:-o-linear-gradient(top, #999, #d0d0d0 80%);background-image:linear-gradient(top, #999, #d0d0d0 80%);-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;box-shadow:inset rgba(0,0,0,.2) 0 5px 6px;}.text{position:absolute;width:80px;height:52px;left:10px;top:10px;cursor:pointer;font-family:&quot;Lucida Sans&quot;;font-weight:bold;font-size:23px;color:#888;text-shadow:0 1px 0 #fff;text-align:center;padding-top:28px;-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;background-image:-webkit-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:-moz-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:-ms-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:-o-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-position:0 6px;background-color:#eee;background-repeat:no-repeat;-webkit-box-shadow:rgba(0,0,0,.4) 0 3px 6px;-moz-box-shadow:rgba(0,0,0,.4) 0 3px 6px;box-shadow:rgba(0,0,0,.4) 0 3px 6px;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-ms-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in;opacity:1;}.text:hover{background-position:0 0;-webkit-box-shadow:rgba(0,0,0,.4) 0 3px 8px;-moz-box-shadow:rgba(0,0,0,.4) 0 3px 8px;box-shadow:rgba(0,0,0,.4) 0 3px 8px;}.text:active{width:76px;height:48px;margin:2px 0 0 2px;border-bottom:1px solid #fff;font-size:21px;color:#777;-webkit-box-shadow:inset rgba(0,0,0,.5) 0px 5px 10px;-moz-box-shadow:inset rgba(0,0,0,.5) 0px 5px 10px;box-shadow:inset rgba(0,0,0,.5) 0px 5px 10px;}

Atur posisinya berdasarkan jenis halaman, letakkan kode berikut diatas </head>

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
.nav{z-index:9999;position:fixed;top:35%;}#blog-pager #home-link{position:fixed;left:25px;z-index:99999;bottom:55%;}#blog-pager-newer-link{position:fixed;left:25px;z-index:99999;bottom:35%;}#blog-pager-older-link{position:fixed;left:25px;z-index:99999;bottom:15%;}
</b:if>
</style>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
.nav{z-index:9999;position:fixed;top:35%;}#blog-pager #home-link{position:fixed;left:50%;margin-left:-50px;bottom:0;z-index:99999;}#blog-pager-newer-link{position:fixed;left:25px;z-index:99999;bottom:35%;}#blog-pager-older-link{position:fixed;right:25px;z-index:99999;bottom:35%;}#blog-pager #home-link{opacity:.2;}
</b:if>
</style>

SAVE & FINISH

oto

Wednesday 24 October 2012

Cara Membuat Redirect URL

Wednesday 10 October 2012

Cara Mengganti Text Dan Tombol Navigasi Blogspot

Blog Archive

Labels