Download & Demo

• Cara mengaktifkan dan memunculkan Friend's Link.

Masukkan script dibawah ini di Tata Letak -> Javascript/ Html

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
width:300px;
height:400px;
border:5px solid #ccc8cc;
background:#fff repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:5px solid #ff0000;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div style="background:#fff;">
<h2>Friend's Link</h2>
<ul>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
<li><a href="http://www.g-bloog.com/" href" title="klik disini!! jika ingin dirimu gak goblog xd">Go! Blog</a></li>
</ul>
<a href="#" href" title="friend's Link">Link Lainnya...</a>
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><i class='icon-remove-circle icon-2x'/>  </i></a></div>
</div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-620-at.offsetWidth).toString() + "px";
</script>

Penulisan yang distabilo silahkan sobat ganti  dengan link dan nama blog yang sobat inginkan.

• Menu Navigasi 

<div id='menujohanes'>
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'><i class='icon-home'/>  Home</a></li>
<li><a class='menu' href='#'><i class='icon-sitemap icon-large'/>  Sitemap</a>
</li>
<li><a class='menu' href='#'><i class='icon-random icon-large'/>  Exchange</a>
</li>
<li><a class='menu' href='#'><i class='icon-cog icon-large'/>  Tutorial</a>
<ul>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Photoshop</a></li>
</ul>
</li>
<li><a class='menu' href='#'><i class='icon-user icon-large'/>  Contact</a>
<ul>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Google plus</a></li>
</ul>
.........

Merah = Ganti dengan link yang sobat inginkan

Orange = Ganti dengan Nama menu yang sobat inginkan

Nah oke mungkin cuman itu yang dapat saya sampaikan untuk kurang lebihnya silahkan sobat acak- acak sendiri wehehehe... 

 Demikianlah artikel yang dapat saya sampaikan semoga bermanfaat bagi kita semua, ingat!! gunakan dengan bijak hargailah karya orang. Bagi sobat yang ingin bertanya dapat mengajukan pertanyaan melalui kotak komentar yang tersedia dibawah artikel ini. Wassalamualaikum wr. wb