Cara Menambahkan Tombol Back To Top Efek Scroll Lembut Di Blog

on   in  


Hai gan ketemu lagi ni.walaupun gx sengaja ketemu nya.Ok gan kali ini dan mungkin lain kali gx lagi saya akan nge-share tentang  Cara Menambahkan Tombol Back To Top Efek Scroll Lembut Di Blog ada juga Cara Membuat Tombol Back To Top Efek Scroll Cepat Di Blog yang biasanya berupa gambar panah menuju keatas yang terletak dibawah blog merupakan salah satu widget yang dapat membantu pengunjung untuk lebih mudah kembali keatas halaman page. Dengan Membuat Tombol Back To Top (Kembali Ke Atas) sangat membantu untuk bergerak cepat kembali pada artikel yang Paling diatas, sehingga kita tidak perlu lagi menggunakan fungsi scroll mouse untuk melihat halaman yang telah terlewat.

Nah..!! jika saat ini anda berada pada halaman komentar dan ingin melihat atau membaca ulang artikel yang anda kunjungi, cukup KLIK Tombol Back To Top, maka anda akan diarahkan kehalaman Title Judul Blog atau Header.
Akan tetapi kalau artikel blog  cukup pendek mungkin Tombol Back To Top (Kembali Ke Atas)ini sedikit tidak berlaku, namun jika terkadang artikel blog  kita cukup panjang tentu Tombol Back To Top sangat dapat membantu.


Ok gan Langsung aja
, Berikut Cara Menambahkan Tombol Back To Top Efek Scroll Lembut Di Blog
  1. Log in to akun Blogger
  2. Tata letak >>> tambahkan Gadget
  3. Copy kode berikut lalu Paste pada HTML/JavaScript
Kode script  - Cara Menambahkan Tombol Back To Top Efek Scroll Lembut Di Blog
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script 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 (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNgZS4Jxou4PhU8Zdi_IVr7EcT22gvwEfo_SKyOddmHdZO2Ge-syktAZAhYAZogQxJXFmERoVb6a9UKukx1WAAXNys9E6YYzHMoOhYZ-iVh980PLO79QO2x2Wb-tpHcbtX_HtIZiX6Wnmh/h120/cara+membuat+back+to+top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom 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:'Scroll Back to Top'})
.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>


Keterangan - ganti kode yang berwarna MERAH dengan Url gambar Seelera agan.


Selamat Mencoba...


Share:

Cara Membuat Menu Diatas Header Pada Blog

on   in  


Hai Gan ketemu lagi ni,Kali ini saya akan meng-shared tentang Cara Membuat Menu Diatas Header Pada Blog. Kita bisa menaruh link lebih banyak lagi di blog, dan dari segi keindahan juga tampilan menu diatas header ini membuat blog kelihatan lebih menarik. Langsung saja karena script nya cukup panjang:

-Login ke akun Blogger anda:
-Klik Rancangan
-Edit HTML
-Centang Expand Template Widget

Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya.


/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}

cari lagi kode </head> dan letakkan kode brikut dibawahnya:

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='url / link homepage '>home</a></li>
<li><a href='url / link 1'>Edit</a></li>
<li><a href='url / link 2'>Edit</a></li>
<li><a href='url / link 3'>Edit</a></li>
<li><a href='url / link 4'>Edit</a></li>
<li><a href='url / link 5'>Edit</a></li>
<li><a href='url / link 6'>Edit</a></li>
<li><a href='url / link 7'>Edit</a></li>
<li><a href='url / link 8'>Edit</a></li>
<li><a href='url / link 9'>Edit</a></li>
<li><a href='http://linuxituindah.blogspot.com/2014/06/cara-membuat-menu-diatas-header-pada.html'>+Get</a></li>
</ul>
</div></div>
<div style='clear: both;'/>
</div>

Setelah Selesai Save Dan View Blog,Dan Akan Muncul seperti:


Share:

Cara Mudah Merubah Tampilan Kotak Komentar Pada Blog

on   in  
Hai Gan ketemu lagi ni,Kali ini saya akan meng-shared tentang Cara Mudah Merubah Tampilan Kotak Komentar Pada Blog.Agar terlihat lebih rapi, dengan cara menambahkan background, box-shawod, warna, serta ukuran dari tulisan yang ada didalam komentar blog.

Contohnya seperti gambar diatas.




Untuk lebih jelasnya tentang cara merubah tampilan kotak komentar blog. Ikuti langkah-langkah dibawah ini.
Login ke blogger, pilih pengaturan Tata Letak > Desainer Templates.
Lalu pilih Tingkat Lanjut > Tambahkan Css
Dan masukan kode ini kedalamnya.


.comments h4 {Color:#0b5394;margin:0;}
.comments {
border:1px solid #cccccc;
margin:0px 10px 20px 10px;
padding:10px;
box-shadow:0px 1px 10px #aaaaaa;
background:#ffffff;
background-image: -moz-linear-gradient(center top , #fff 0%, #f3f3f3 100%);}

.comments .comments-content {
background:transparent;
margin:-20px 0px -50px 0px;
font-size:13px;
text-align:left;}

.comments .comments-content .user a{
color:#1780dd;
font-size:14px;
font-weight:700;}

.comments .comment-replies .comment-thread{
border:1px solid #dddddd;
box-shadow:1px 1px 1px #bbbbbb;
background-image: -moz-linear-gradient(center top , #fff 0%, #e6e6e6 100%);
margin:0px 0px 0px 12px;}

.comments .continue{border-top:none;}
.comments .comments-content .comment {margin:0px 0px -10px 0px;}
.comments .comments-content .datetime{
font-size:11px;
margin:3px 0px 0px 0px;
float:right;font-weight:700;}


Selesai.....

Keterangan Kode:
.comments h4 { untuk mengatur warna tulisan dari jumlah komentar.
.comments { untuk mengatur warna background dari seluruh kotak komentar blog.
.comments .comments-content { untuk mengatur warna, ukuran tulisan dari isi komentar, dan jarak tinggi komentar blog.
.comments .comments-content .user a{ untuk mengatur warna dari seluruh nama yang ada dikotak komentar.
.comments .comment-replies .comment-thread{ untuk mengatur warna background dari komentar balasan.
.comments .continue{ untuk mengatur tombol Balas.
.comments .comments-content .comment { untuk mengatur jarak antar komentar balasan.
.comments .comments-content .datetime{ untuk mengatur warna dan posisi tanggal.


Selamat Mencoba...
Share:

Cara Mudah MengInstall Ubuntu

on   in  
Hai gan Ketemu lagi ni,kali ini saya akan meng-Shared tentang Cara Mudah MengInstall Ubuntu.Ijinkanlah Saya Memberi tau Sedikit tentang Ubuntu. Ubuntu merupakan salah satu distribusi Linux yang berbasis Debian dan didistribusikan sebagai perangkat lunak bebas. Nama Ubuntu berasal dari filosofi dari Afrika Selatan yang berarti "kemanusiaan kepada sesama". Ubuntu dirancang untuk kepentingan penggunaan pribadi, namun versi server Ubuntu juga tersedia, dan telah dipakai secara luas.Proyek Ubuntu resmi disponsori oleh Canonical Ltd. yang merupakan sebuah perusahaan yang dimiliki oleh pengusaha Afrika Selatan Mark Shuttleworth. Tujuan dari distribusi Linux Ubuntu adalah membawa semangat yang terkandung di dalam filosofi Ubuntu ke dalam dunia perangkat lunak.
Share:

Cara Mudah Instalasi FreeBSD

on   in  
FreeBSD

                 Ketemu lagi ni gan dengan saya dan dengan topik yang berbeda,kali ini saya akan ngeshared tentang  Cara Mudah Instalasi FreeBSD. FreeBSD adalah sebuah operating system nonkomersial yang biasa kita sebut freeware, gratisan.tetapi tidak semua yang gratisan itu kualitasnya lebih jelek dari yang berbayar, hal itu dibuktiin sama sahabat kita ini. Bahkan sebuah situs yang namanya tidak bisa disebutin membandingkan semua hal baik performance, security, kompabilitas dll antara FreeBSD dengan linux,
Share:

Cara Menginstall Windows Xp Dengan Mudah

on   in  


Hai gan ketemu lagi ni.walaupun gx sengaja ketemu nya.Ok gan kali ini dan mungkin lain kali gx lagi saya akan nge-share tentang Cara Menginstall Windows Xp Dengan Mudah.Windows XP merupakan salah satu dari sistim operasi komputer yang masih sering digunakan sampai saat ini. Terdapat beberapa versi dari Windows XP diantaranya yaitu : windows xp home edition , windows xp professional edition, dan lain-lain. Windows XP  tergolong mudah dan tidak membingungkan dalam penggunaannya karena tampilannya mudah dimengerti oleh pengguna,
Share:

Cara Menampilkan Folder Dan file yang TerHidden oleh Virus Dari CMD

on   in  

Hai gan Ketemu lagi ni,kali ini saya akan meng-Shared tentang Cara Menampilkan Folder Dan file yang TerHidden oleh Virus Untuk menghilangkan atribut hidden pada folder-folder anda, berikut caranya.
Buka Start => Run. Ketik cmd kembudian OK.
Setelah tampil layar hitam, ketik drive flashdish misalkan flashdish saya adalah  F, ketik F: kemudian Enter
setelah itu ikuti command berikut untuk menampilkan folder dan file, jika anda masih dalam keadaan membuka jendela flashdish, tutuplah dahulu saat proses ini.

Ketik  : attrib -s -h *.* /s /d
tekan Enter
Menampilkan file dan folder yang tersembunyi

Proses akan berlangsung agak lama tergantung jumlah file yang ada didalam flashdish anda. Ketika telah muncul F:\> berarti proses telah selesai. Lihat pada flashdisk, lihat foldernya apakah sudah kembali normal atau tidak??

 Note : F itu adalah letak flaskdisk,untuk mengeceknya buka aja my Computer 

Selamat Mencoba...
Share:

Cara Mudah Memberi Password Pada File/Folder yang di Compress Dengan Winrar

on   in  

Hai gan ketemu lagi ni dengan saya hehe.Padahal gx sengaja kan ketemu nya
ok lah kali ini saya akan meng-share tentang Cara memberi password pada file yang di compress dengan winrar
Nah.. buat kamu yang punya file/folder pribadi yang orang lain gak boleh tau isinya.
Caranya menggunakan Winrar.. tentu kalian sudah tau kan apa itu Winrar.. hehee..
okelah langsung saja, ikuti langkah-langkah di bawah ini:

1. Pastikan komputer kamu sudah terinstal program winrar, jika belum download aja disini atau disini.
 
2. Siapkan file atau folder yang akan dikompresi dengan winrar.
 
3. Klik kanan pada file / folder tersebut, kemudian klik "Add to Archive..." 
4. Pada tab General kamu bisa memilih file/ foder tersebut mau dikompres dengan format Rar atau Zip (centang satu untuk memilih..)
 
5. Pindah ke >> Tab Advanced, kemudian klik >> Set password...
 
6. Maka akan muncul kotak doialog seperti di bawah ini:

 
7. Isikan password pada kotak "Enter password" dan isikan kembali password yang telah diisikan pada kotak "Reenter pasword for verification".
 
keterangan:
1. Show password: password yang kamu ketikkan akan terlihat.
2. Encrypt file names: berfungsi jika file yang telah kamu kompres dibuka maka filenya tidak akan terlihat, yang ditampilkan hanyalah kotak dialog yang meminta untuk mengisi password saja.
 
8. klik >> OK. Selesai 

 Selamat Mencoba...
Share: