Ini blogku :
1. Navigation
Ini kodenya :
<style>
a.jeonjin {
display:inline-block;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
padding-top:15px;
padding-bottom:5px;
border-top-right-radius:40px;
border-top-left-radius:40px;
width:115px;
text-decoration:none;
font-family:Delius Swash Caps;
font-size:13px;
height:20px;
text-transform:uppercase;
color: #fff;
background: #FFCC66;
text-align:center;
cursor:vertical-text;
}
a.jeonjin:hover{
color: #fff;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-webkit-transform: rotateX(180deg) ;
-moz-transform: rotateX(180deg) ;
-o-transform: rotateX(180deg) ;
-ms-transform: rotateX(180deg) ;
background:#FFCC66;}
</style>
<center>
<a class="jeonjin" href="http://boboiboy-bloggie.blogspot.com/">Home</a>
<a class="jeonjin" href="http://boboiboy-bloggie.blogspot.com/p/srchttp4.html">About</a>
<a class="jeonjin" href="http://boboiboy-bloggie.blogspot.com/p/blog-page.html">Link</a>
<a class="jeonjin" href="http://boboiboy-bloggie.blogspot.com/p/classseparator-styleclear-both-text.html">Stuff</a>
<a class="jeonjin" href="http://boboiboy-bloggie.blogspot.com/p/request.html">Request</a>
</center>
Paste di kolom HTML/JavaScript untuk Designer Template. Untuk blogskins, di bagian navigationnya ya!
2. Scrollbar
Tuto ini dari kak Tiara. Kredit ya kak!
Kamu pergi dulu ke Template (for Skins). Ke edit HTML untuk designer.
Cari kode ]]></b:skin>
Copy kode di bawah ini dan paste di ATAS kode yang kamu cari tadi.
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { height: 10px; width: 10px; display: block; background: #ffffff; border: 1px solid #FFCC33; } ::-webkit-scrollbar-track-piece { background-color: #FFCC33; border: 4px solid #ffffff; } ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal { background-color: #eee; border: 3px solid #FFCC33; border-radius:10px; } ::selection {background:#FFCC66;color#6699FF;} ::moz-selection {background:#FFCC66;color:#6699FF;} ::webkit-selection {background"#FFCC66;color#6699FF:}
Klik save!
3. Judul Post
Masih di edit HTML, cari kode h3.post-title { ya! Pakai Ctrl + F supaya lebih mudah.
Copy kode di bawah ini dan paste di BAWAH kode yang kamu cari tadi.
background:url(http://i1074.photobucket.com/albums/w419/amaninaonly/polkadotbiru.gif#sthash.W6R7mm1S.dpuf); padding:10px; font-family: Delius Swash Caps; color:#FF9966; text-align: center; border:1px solid #EAF1FB; border-bottom:5px solid #EAF1FB; box-shadow:inset 0px 0px 2px 2px #CEDEF4; text-shadow:0 0 6px #ccc; line-height:20px; font-size:16px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; letter-spacing:1px; -webkit-transition:All 0.4s ease ; -moz-transition:All 0.4s ease ; -o-transition:All 0.4s ease ; }
Klik save!
4. Sidebar dengan Background
Lagi-lagi di edit HTML! Oke deh... langsung aja
Cari kode h2 {
Copy kode ini dan paste di BAWAH kode tadi.
font-family:delius; font-size:16px; background:url(http://i1074.photobucket.com/albums/w419/amaninaonly/polkadotbiru.gif#sthash.W6R7mm1S.dpuf); border: 2px solid #FFFFFF; -moz-box-shadow: 0 0 3px 3px #DBEDFF; -webkit-box-shadow: 0 0 3px 3px #DBEDFF; box-shadow: 0 0 2px 2px #DBEDFF; color:#99C7FF; text-shadow:0 0 6px #ccc; font family: Normal 12px Short Stack; text-align:center; border-radius:10px; }
Klik save!
5. Back to Top
Ke Tata Letak, tambah Add Gadget. Pilih HTML/JavaScript. Kodenya :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script language="Javascript" type="text/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 TOPNYA" />', //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, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:"TOOLTIPSNYA"})
.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>
Oke tak? Wassalam...
makasih banget ya kak
BalasHapusSama-sama
Hapuskak kalau cara buat blockquote yang ber-scrollbar gimana?
BalasHapus