|
Looking for what?!
|
Assalamualaikum!!
Yeah, akhirnya selesai juga UTS pertama *ngelap kaki*
Jujur aja, rasanya agak berat ngejalanin UTS yang ini. Capek,pegel, terus heheheh, males. Gak tau sih kenapa tapi bawaannya males berat. Uuh.
Yaudahlah, mendingan aku share cara buat back to top button di blogger. Tau nggak yang mana tu? *nyombong, heheh*
Itu loh.. yang di pojok kanan bawah..
Nah, yang mau aku share ini yang JQUERY. Apa lagi tu? Oke. Jquery itu maksudnya back to top button nya baru muncul waktu scroll bar nya di tarik kebawah. Waktu masih di paling atas halaman, back to top buttonnya gak nampak. Ngerti? Gak? Yaudahlah. *pasrah*
Terus, kalau Jquery ini naiknya pelan-pelan alias slow motion alias perlahan alias lambat alias kayak terbang. Panjang ya? Hahahahah. Biarlah, biar jelas. Oke.. kita mulai :D
1. Buka blogger, log in.
2 Buka Tata Letak
3. Klik add gadget / tambahkan gadget.
4. Klik yang HTML / JavaScript.
5. Copy kode ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified byNovita Lesyani***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL BACK TO TOP BUTTON KALIAN" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
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
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:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
NB :
Ganti kode yang warna merah sama kode gambar button yang kalian suka.
6. Save, terus preview.
Oiya, aku punya beberapa gambar buat back to top button ini. Tenang aja, semuanya transparent kok. Credit to Novita Lesyani. Masukkan kodenya buat ganti tulisan yang warna merah itu ya :)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl5hxdg4dvc7O3cjDRTso8pj75ELKXiF0fUub_6y8xqF28h06mofigYmK2kv0fZ2_GZrJE94Xv8S0KdwecKfiSYeS1vlotq8Kg26Vey6V8dARBD2hilWxdfTAvW747nxKOUI-y7kBRkAI/s1600/back+to+top+by+me.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3M2LuqDzNnggRU6MSKwg2PG2Gq9uF8jhNYamYS8A2PZQ0mEBiMeKf7SPu1aEIt_bEuBvBoBjGC5aQ8ugXxfCFgE2sUYBMSqhdVKcsJTthpZPvbOzucZHR_O-e2w-0QVEmVa57WSRVDqg/s1600/back+to+top+2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3spZgh53NNQp1aRDiu6dFoZb6eSGyL_QAtofJ_IERDBLpGxTDKmb8s4_ZQ976nL5pwybpq6MSUaZ69Fb0LQZozFvn8Us-H-JqbisA1wHx3hlqq4eCk8eI6-y2G2z9I4NN_ScpaUUOc4/s1600/back+to+top+3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQdV-VqReK6T-8Fr7sPwnBP-2Lzryub_4JEq6D11uml_V1odtubddTttBnTduZDRgTMNKC1bfZ-pBx3qTHV9At9_azthe_pGPFKxEmotquSXeyotYMaKkDeEXQ04gf37Z7074HtMA_U4/s1600/back+to+top+4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZf5gO9euEaq4Mnau5DfQYaPcQWanj6WB0dx1VHfBwbhU3BFNdduN9iYa49t49SAtTBgv0-U09Y9iqNmbFhCj7Rnc8vvU6BpxqXNwKoDVul-3usxih7uJ7k5nO6ycRuRHHZNMnbajO0E/s1600/back+to+top+5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnR0VUjnKzEt3-loFy-QTJGV38z2e30FTpWab1QFluQIVk9Xr7UFyerIUAZbef7h38wX5ouO5hPPMNJKAgbf7iNYKEUIONhK5mWlfjdSaQ3vb9hE04gnE-wVM1Kpy2MN21Bm-8ScHTOWA/s1600/back+to+top+6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQvPym86i09Q7pTONw3cunKZ1hiWNzSsg-ctXcXa9ybeIJQGePtPvg23Hvk_Al0iGP1CMx7yfM643D_d3xSz8uIlhpltpqZ2WGH4FgZT_sLwphhNUjLW7TLz8EjhPnjS2VnmvF7Slr-g/s1600/back+to+top+7.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij3NflutXG1F-WC0bGM77wbidMlVJINTh3I_c2NdpdZ8QBB16tx6Fqan-Kr3Wf-YTayww2cQPxvwRT0Cczi-uhM1LGPQe2wtPHySJn5zG6yV6pg047ZbW07HYYSot7rhx_i-HnAYGePng/s1600/back+to+top+8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijv3Vh669BDdkb_KZ2w06UpfhXKs3gQ49Z8twzeJZrA4MibKCSdaFPkkPM9xUTUyA9Ue77CLRXEBO5xURgX_ESabPXGw994Dhyry5GE1DhdrE4hZOtZ8GG6qcth0hwdd_VHvHyP8COkh0/s1600/back+to+top+9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuEeC4CLtWo-sTYiSRw2cU2BIzPlO0s_aUdLogk06XDOAbRa-5zLZob0JpHL0NGlsdkPmVkt7xaHCvtLMxIael0p5sA5HMHkNnYuA6nPYPr9nZvtQauXAw8wQywnlzyOdBZDrOKWgnAks/s1600/back+to+top+10.png
Nah, ceritanya aku capek nulis link nya. Jadi, buat gambar dibawah tinggal klik kanan terus 'copy image url' atau 'salin url gambar' aja ya ! :D
Nah, udah lah segitu dulu. Oiya rupanya Cr nya ke Salsa :D
Salam Kunyuk,
Lin~
Label: Back To Top, Back To Top Button, Comel, Cumel, Cute, Freebies, Freebies Back To Top Button, Gadget, Stuff, Tutobies, Tutorial, Tutorial Back To Top Button, Wigdet
|
Assalamualaikum!!
Yeah, akhirnya selesai juga UTS pertama *ngelap kaki*
Jujur aja, rasanya agak berat ngejalanin UTS yang ini. Capek,pegel, terus heheheh, males. Gak tau sih kenapa tapi bawaannya males berat. Uuh.
Yaudahlah, mendingan aku share cara buat back to top button di blogger. Tau nggak yang mana tu? *nyombong, heheh*
Itu loh.. yang di pojok kanan bawah..
Nah, yang mau aku share ini yang JQUERY. Apa lagi tu? Oke. Jquery itu maksudnya back to top button nya baru muncul waktu scroll bar nya di tarik kebawah. Waktu masih di paling atas halaman, back to top buttonnya gak nampak. Ngerti? Gak? Yaudahlah. *pasrah*
Terus, kalau Jquery ini naiknya pelan-pelan alias slow motion alias perlahan alias lambat alias kayak terbang. Panjang ya? Hahahahah. Biarlah, biar jelas. Oke.. kita mulai :D
1. Buka blogger, log in.
2 Buka Tata Letak
3. Klik add gadget / tambahkan gadget.
4. Klik yang HTML / JavaScript.
5. Copy kode ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified byNovita Lesyani***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URL BACK TO TOP BUTTON KALIAN" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
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
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:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
NB :
Ganti kode yang warna merah sama kode gambar button yang kalian suka.
6. Save, terus preview.
Oiya, aku punya beberapa gambar buat back to top button ini. Tenang aja, semuanya transparent kok. Credit to Novita Lesyani. Masukkan kodenya buat ganti tulisan yang warna merah itu ya :)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl5hxdg4dvc7O3cjDRTso8pj75ELKXiF0fUub_6y8xqF28h06mofigYmK2kv0fZ2_GZrJE94Xv8S0KdwecKfiSYeS1vlotq8Kg26Vey6V8dARBD2hilWxdfTAvW747nxKOUI-y7kBRkAI/s1600/back+to+top+by+me.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3M2LuqDzNnggRU6MSKwg2PG2Gq9uF8jhNYamYS8A2PZQ0mEBiMeKf7SPu1aEIt_bEuBvBoBjGC5aQ8ugXxfCFgE2sUYBMSqhdVKcsJTthpZPvbOzucZHR_O-e2w-0QVEmVa57WSRVDqg/s1600/back+to+top+2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3spZgh53NNQp1aRDiu6dFoZb6eSGyL_QAtofJ_IERDBLpGxTDKmb8s4_ZQ976nL5pwybpq6MSUaZ69Fb0LQZozFvn8Us-H-JqbisA1wHx3hlqq4eCk8eI6-y2G2z9I4NN_ScpaUUOc4/s1600/back+to+top+3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQdV-VqReK6T-8Fr7sPwnBP-2Lzryub_4JEq6D11uml_V1odtubddTttBnTduZDRgTMNKC1bfZ-pBx3qTHV9At9_azthe_pGPFKxEmotquSXeyotYMaKkDeEXQ04gf37Z7074HtMA_U4/s1600/back+to+top+4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZf5gO9euEaq4Mnau5DfQYaPcQWanj6WB0dx1VHfBwbhU3BFNdduN9iYa49t49SAtTBgv0-U09Y9iqNmbFhCj7Rnc8vvU6BpxqXNwKoDVul-3usxih7uJ7k5nO6ycRuRHHZNMnbajO0E/s1600/back+to+top+5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnR0VUjnKzEt3-loFy-QTJGV38z2e30FTpWab1QFluQIVk9Xr7UFyerIUAZbef7h38wX5ouO5hPPMNJKAgbf7iNYKEUIONhK5mWlfjdSaQ3vb9hE04gnE-wVM1Kpy2MN21Bm-8ScHTOWA/s1600/back+to+top+6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQvPym86i09Q7pTONw3cunKZ1hiWNzSsg-ctXcXa9ybeIJQGePtPvg23Hvk_Al0iGP1CMx7yfM643D_d3xSz8uIlhpltpqZ2WGH4FgZT_sLwphhNUjLW7TLz8EjhPnjS2VnmvF7Slr-g/s1600/back+to+top+7.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij3NflutXG1F-WC0bGM77wbidMlVJINTh3I_c2NdpdZ8QBB16tx6Fqan-Kr3Wf-YTayww2cQPxvwRT0Cczi-uhM1LGPQe2wtPHySJn5zG6yV6pg047ZbW07HYYSot7rhx_i-HnAYGePng/s1600/back+to+top+8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijv3Vh669BDdkb_KZ2w06UpfhXKs3gQ49Z8twzeJZrA4MibKCSdaFPkkPM9xUTUyA9Ue77CLRXEBO5xURgX_ESabPXGw994Dhyry5GE1DhdrE4hZOtZ8GG6qcth0hwdd_VHvHyP8COkh0/s1600/back+to+top+9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuEeC4CLtWo-sTYiSRw2cU2BIzPlO0s_aUdLogk06XDOAbRa-5zLZob0JpHL0NGlsdkPmVkt7xaHCvtLMxIael0p5sA5HMHkNnYuA6nPYPr9nZvtQauXAw8wQywnlzyOdBZDrOKWgnAks/s1600/back+to+top+10.png
Nah, ceritanya aku capek nulis link nya. Jadi, buat gambar dibawah tinggal klik kanan terus 'copy image url' atau 'salin url gambar' aja ya ! :D
Nah, udah lah segitu dulu. Oiya rupanya Cr nya ke Salsa :D
Salam Kunyuk,
Lin~
Label: Back To Top, Back To Top Button, Comel, Cumel, Cute, Freebies, Freebies Back To Top Button, Gadget, Stuff, Tutobies, Tutorial, Tutorial Back To Top Button, Wigdet
|
Blog Owner
Full Name : Lintang A Pramesti
Nick Name : Lintang
Birth : November 2000
Age : 14
School : Cendana JHS Pekanbaru (for now)
Country : Indonesia
City : Pekanbaru
Owner speaking here :v
Okay, let me introduce myself.
You can call me Lintang for short. I'm 14 years old now, and i'm a moslem. Enjoying a teen-school-life like other tenaagers do. I graduated from my elementary school on 2013, and 2016 for my junior high school InshaAllah. I'm a main secretary of interschool student organization (knows as 'OSIS') in my school now, a part of Red Cross Youth Associate (has been known as 'Palang Merah Remaja tingkat Madya' in Indonesia), and active in some other organizations and groups.
My daily activities was managing my study and organizations, making some short stories and poems, reading books, novels and good thoughts on internet, and certainly posting random posts to this blog page ehehehe.
I'm blessed to have such as happy life. Cause life its NOT about finding yourself. It's about CREATING yourself. :)
PS : if you want to know more or had any inquiries, contact me by my social media that i located in the left sidebar, above the 'Hello' section. Thankyou and have a nice journey on this blog! :) :)
"I don't mind waiting for people,
because the longer you wait,
when you do meet...you'll be more happy"
- Mouri Ran
|
Lets Be Friend(s)
Wanna exlink? Just tell me here!
Yuki
Alya
Inex
Syifa
Affa
Indah
Fryda
Salwa
Dayang
Anya
Ayuz
Hafidzoh
Tiara
Next?
Next?
|
This is free for you
Tutorials
TUTORIAL
Status Box Cute
Back To Top Button Jquery
Ubah Font Blogskin
Ubah newer,older, home button
Buat Chat Box
Buat Rules Cbox
Highlight Color
Lagu di Blog
Find Your BlogID
Image Hover Melengkung
Make Your Own Cursor
Sidebar Like Mine
Freebies
Font For Post
Pusheen Header
|
comelnya ;)
Nicee :))
Ijin ambil satu yah ;;)
Boleyn Copas nggak? Cr kok plis
Colored ^_^ thankyou
Cute banget ! Gue ambil satu ya :D
Thank you yaaaa
makasii :))
thanks
ambil satu ya!
cute :)
izin ambil satu ya kak :)
izin ambil satu ya..thanks..:)
Blognya bagusss
haaii.. aku mau juga yaa :D
Ambil
Kak, Aku ambil yang Gadis muslim itu ya.. boleh tak?
Ambil satu, ya, Kak... makasih!!! ^^
saya ambil satu. tq ya
makasih yaaa. ;)
haii im one of malaysian blogger. nice blog btw. thanks for da freebies . saya ambil satu ye??
pake ya kak
Kawaii... Ambil satu ya kak
Posting Komentar
Napa? Bingung? Ndak ngerti? Mau copas?
Komen lah ha komen~