I N F I N I T E

Assalamualaikum :)

<style>
#s-m-t-tooltip {
    background: black;
    font-size: 9px;
    line-height: 11px;
    -webkit-animation: zoom 600ms;
    font-family: cambria;
    letter-spacing: 1px;
    text-transform: uppercase!important;
    color: #fff;
    text-align: center;
    padding: 5px 10px 5px 10px;
    display: block;
    border-radius: 5px;
    margin: 24px 14px 7px 12px;
    text-transform: lowercase;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

 title="ayatkorangsendiri"

 <img src="http://data1.whicdn.com/images/172498921/large.jpg"  title="ayatkorangsendiri"  /> 

<style>
#s-m-t-tooltip {
    background: black;
    font-size: 9px;
    line-height: 11px;
    -webkit-animation: zoom 600ms;
    font-family: cambria;
    letter-spacing: 1px;
    text-transform: uppercase!important;
    color: #fff;
    text-align: center;
    padding: 5px 10px 5px 10px;
    display: block;
    border-radius: 5px;
    margin: 24px 14px 7px 12px;
    text-transform: lowercase;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

 title="ayatkorangsendiri"

 <img src="http://data1.whicdn.com/images/172498921/large.jpg"  title="ayatkorangsendiri"  />

Dah lama sangat orang mengrequest tuto nie. Sorry sangat-sangat, baru sekarang dapat buat. Tak tahu nak bagi nama apa so arrien bubuh saja nama Navi Header. Navi sebab dye macam navigation, header sebab dye dekat atas macam header (?) LOL XD Basecode credit to : [Owner]

<style>
@font-face{
font-family:agentletouch;
src:url(http://static.tumblr.com/dep4vzc/GkJmxp429/a_gentle_touch.ttf);}
@font-face {
    font-family: Bebas Neue;
    src: url(http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf);
}
#title2 {
    font: normal 25px "Bebas Neue";
    text-shadow: 0 0 0px #111;
    color: #ccc;
    text-align:center;
    background: url(URL BACKGROUND);
    padding: 20px;
    background-position:50% 50%;
    border-bottom: 10px solid #fff;
    box-shadow: 0px 0px 10px #aaa;
    width: 97%;
    z-index: 9999!important;
    top: 0px;
    position: absolute;
    left: 0px;
}
</style>
<div id="title2">
<div style=" text-width: 600px;  color: #fff; font-family:agentletouch; font-size:50px;  text-align: center;text-shadow: 0 0 10px #000; ">
" YOUR BLOG NAME'S "
</div> <br />
<div class="title2"><div class="btd">
◉<a class="n" href="LINK">ABOUT</a>◉
<a class="n" href="LINK">ENTRY</a>◉
<a class="n" href="LINK">ASK.FM</a>◉
<a href="LINK">STUFF</a>◉
<a href="LINK">SKIN</a>◉
<a href="LINK">ARTWORK</a>◉
<div></div></div></div></div>

<style>
@font-face {
    font-family: Bebas Neue;
    src: url(http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf);
}
#title2 {
    font: normal 25px "Bebas Neue";
    text-shadow: 0 0 10px #111;
    color: #fff;
    text-align:center;
    background: url(URL BACKGROUND);
    padding: 20px;
    background-position:50% 50%;
    border-bottom: 10px solid #fff;
    box-shadow: 0px 0px 10px #aaa;
    width: 97%;
    z-index: 9999!important;
    top: 0px;
    position: absolute;
    left: 0px;
}
</style>
<div id="title2"><center>
<div style=" text-width: 600px;  color: #fff; font-family:agentletouch; font-size:50px;  text-align: center;text-shadow: 0 0 10px #000; ">
" YOUR BLOG NAME'S "
</div> </center><br>
◉
<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('o').innerHTML">home</span> ◉
<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('k').innerHTML">about</span> ◉
<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('p').innerHTML">linkies</span> ◉
<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('s').innerHTML">tutorial</span> ◉
<span class="title2" onClick="document.getElementById('main').innerHTML=document.getElementById('u').innerHTML">free page</span> ◉
</div>

<center><a href="URL LINK IKLAN"><img src="URL ICON" style=" height: 20px; padding: 4px; padding: 5px;width="20" /></a><a href="URL LINK IKLAN"><img src="URL ICON" style=" height: 20px; padding: 4px; padding: 5px;width="20" /></a><a href="URL LINK IKLAN"><img src="URL ICON" style=" height: 20px; padding: 4px; padding: 5px;width="20" /></a></center>

<center>
<a href="URL LINK IKLAN" target="_blank"><img class="arrien" src="URL ICON" width="50" height="50" title="click"/></a>
<a href="URL LINK IKLAN" target="_blank"><img class="arrien" src="URL ICON" width="50" height="50" title="click"/></a>
<a href="URL LINK IKLAN" target="_blank"><img class="arrien" src="URL ICON" width="50" height="50" title="click"/></a></center><br />

No Re-Post & Re-tuto

<br /><center><div style="background: #fff; border: 2px solid #444444;border-radius:5px; padding: 0px; width: 600px;"><div style="text-align: center;"><marquee behavior="alternate" direction="down" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3"><br />
<a href="Url entry GA"><img src="Url banner GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a> <a href="Url entry GA"><img src="Url banner GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a> <a href="Url entry GA"><img src="Url banner GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a>
</marquee></div></div></center>

<br /><center><div style="background: #fff; border: 2px solid #444444;border-radius:5px; padding: 0px; width: 600px;"><div style="text-align: center;"><marquee behavior="alternate" direction="down" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3"><br />
<a href="Url entry GA"><img src="Url banner GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a> <a href="Url entry GA"><img src="Url banner GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a> <a href="Url entry GA"><img src="Url banner GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a>
</marquee></div></div></center>

div.thingi{
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ;
background:url(URL ICON) ;
color:#555;
background-repeat:no-repeat;
background-size:15px;
padding-left:25px;
line-height:18px;
}
div.thingi:hover{
background:url(URL ICON);
background-repeat:no-repeat;
padding-left:25px;
background-size:15px;
line-height:18px;
color:#666;
}

 <div style="border:1px solid #efefef;background:#fff; width:188px; overflow-x:hidden; overflow-y:scroll;padding:5px; height:100px;text-align:left; ">
<bloggerBloglist>
<div class="thingi"><a href="http://arrienlove.blogspot.com">NAMA BLOG </div></a>
<div class="thingi"><a href="http://arrienlove.blogspot.com">NAMA BLOG </div></a>
<div class="thingi"><a href="http://arrienlove.blogspot.com">NAMA BLOG </div></a>
<div class="thingi"><a href="http://arrienlove.blogspot.com">NAMA BLOG </div></a>
<div class="thingi"><a href="http://arrienlove.blogspot.com">NAMA BLOG </div></a>
<div class="thingi"><a href="http://arrienlove.blogspot.com">NAMA BLOG </div></a></a>
</BloggerBloglist>
</div></div>

Assalamualaikum :)

Tutorial ini telah direquest oleh seorang adik. Nampak gayanya macam nak GA adik yea.. hehe arrien jer belum buat GA sendiri,sebelum nie pun just jadi partner. ahak >< oke tersasar jauh nampak :D Follow button nie memang sesuai bagi orang nak buat GA coz menyenangkan peserta nak follow. So let's go kita buat bagi yang still newbie ^_^

<a class="twitter-follow-button" href="URL TWITTER">Follow @USERNAME</a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>

.blogger-labels {
border-top: 2px solid #c5c49c; border-bottom: 2px solid #c5c49c; color: #c5c49c; padding: 1px; font: 10px times; text-transform: uppercase; opacity: 0.80; margin-top: 35px; text-align:center;}

<script language="JavaScript">
var a1 = " TITLE1 ";var a2 = "TITLE2 ";var a3 = " TITLE3";
var a4 = " TITLE4"; var a5 = "TITLE5"; var a6 = "TITLE6 ";
var a7=" TITLE7";var a8 = " TITLE8";
var delay = 0400;
b1();b2();b3();b4();b5();b6();b7();b8();
function b1() {ID = setTimeout("b2()",delay);document.title = (a1);}
function b2() {ID = setTimeout("b3()",delay);document.title = (a2);}
function b3() {ID = setTimeout("b4()",delay);document.title = (a3);}
function b4() {ID = setTimeout("b5()",delay);document.title = (a4);}
function b5() {ID = setTimeout("b6()",delay);document.title = (a5);}
function b6() {ID = setTimeout("b7()",delay);document.title = (a6);}
function b7() {ID = setTimeout("b8()",delay);document.title = (a7);}
function b8() {ID = setTimeout("b1()",delay);document.title = (a8);}
</script>

<script type="text/javascript">

<script language="JavaScript">
var a1 = " TITLE1 ";var a2 = "TITLE2 ";var a3 = " TITLE3";
var a4 = " TITLE4"; var a5 = "TITLE5"; var a6 = "TITLE6 ";
var a7=" TITLE7";var a8 = " TITLE8";
var delay = 0400;
b1();b2();b3();b4();b5();b6();b7();b8();
function b1() {ID = setTimeout("b2()",delay);document.title = (a1);}
function b2() {ID = setTimeout("b3()",delay);document.title = (a2);}
function b3() {ID = setTimeout("b4()",delay);document.title = (a3);}
function b4() {ID = setTimeout("b5()",delay);document.title = (a4);}
function b5() {ID = setTimeout("b6()",delay);document.title = (a5);}
function b6() {ID = setTimeout("b7()",delay);document.title = (a6);}
function b7() {ID = setTimeout("b8()",delay);document.title = (a7);}
function b8() {ID = setTimeout("b1()",delay);document.title = (a8);}
</script>

#post img{max-width:540px;padding:3px;margin-bottom:5px;border:1px solid #ddd;
}

<a href="Url Link Entry GA"><img src="Url Image GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a><br />
<a href="Url Link Entry GA"><img src="Url Image GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a><br />

<a href="Url Link Entry GA"><img src="Url Image GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a><br />
<a href="Url Link Entry GA"><img src="Url Image GA" style="border: 1px solid #D4D3D3; height: 100px; padding: 4px; padding: 5px;width=" 160" /></a><br />

Kalau pada entry sebelum nie,arrien kata arrien nak update tuto yang telah lama request,right? but sorry coz tuto yang direquest mengambil masa yang agak lama untuk diupdate,so arrien ambil keputusan untuk update mana tuto yang senang dulu oke :) Tuto nie direquest oleh adik syahmi, dye tanya macam mana nak buat status bergerak yang macam dekat blog arrien yang dekat bahagian owner tu,nampak kan?? :D But code nie bukan arrien punya,arrien guna unnie ayuni punya,so full credit to her ^_^

<br></div><marquee> AYAT </marquee><br>

Sorry for late update this tuto,haha.. agak buzy coz sekarang dah dekat dengan peperiksaan,lepas nie maybe akan update just hujung minggu or bila ada masa XD so have some one tanya macam mana nak tukar older & newer ke icon,selalunye untuk template designer je kan,so nie untuk blogskin ^^ But make sure korang padam dulu code older&newer post kalau ada oke,kalau tak tahu nak padam yang mana,code tu selalunya dekat2 dengan code yang arrien suruh cari nanty :)

<div style="float: left;"><a class="leposts" href=<$NewerPosts$>>
<img src="URL NEWER ICON" border="0" /></a></div>
<div style="float: right;"><a class="leposts" href=<$OlderPosts$>>
<img src="URL OLDER ICON" border="0" /></a>

<div style="float: left;"><a class="leposts" href=<$NewerPosts$>>
<img src="URL NEWER ICON" border="0" /></a></div>
<center><a href="URL BLOG"><img src="URL HOME ICON" border="0" />
<div style="float: right;"><a class="leposts" href=<$OlderPosts$>>
<img src="URL OLDER ICON" border="0" /></a>

border-bottom:none;

border-top:none;

<div style="width:ancho;height:250px;overflow:auto; ">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:9 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:right;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;margin-left:17px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 10,
showAvatar = true,
avatarSize = 44,
roundAvatar = true,
characters = 40,
showMorelink = true,
moreLinktext = " &#187;",
defaultAvatar = "http://24.media.tumblr.com/2691224fccc37256f6b94c8372e9499c/tumblr_mn0j7dgfcZ1s4nyxho1_500.jpg",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="URLBLOGfeeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>
</div><br>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL IMG" width="70px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, left:mainobj.controlattrs.offsetx, opacity:0, cursor:'http://cur.cursors-4u.net/cursors/cur-9/cur817.cur'})
.attr({title:"fly, angel"})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>