mitrabaraya : Online & Tutorial: 07/06/14

CSS3 Effects jQuery Ngagulung to top plus ieu hanteu benten jeung nusanesna anu sami sadayana diblog liana. Ampir sakabehna bersumber ti dinamicdrive.com. Anu ngabedakeun dina sakabeh posting ieu jeung nusejena ngeunaan "jQuery Ngagulung to top plus" nyaeta dina pamakean css3 anu boga fungsi keur mintonkeun sababaraha effek anyar supados katempona langkung dinamis. Lamun scroll to top anu sanes ngagunakeun wangun " tips/tooltips " default browser,anu inipun benten oge margi melibatkeun css2 anu dipadu kalawan css3. Supados langkung tangtos kumaha " wangun penampilan benten " ti Effects jQuery Ngagulung to top plus anu tos dihijikeun dina css3 ieu mangga alo cobian tur pencet sakaligus klik Effects jQuery Ngagulung to top plus di tungtung handap palih katuhu halaman. Anjeun oge tiasa mecakan na dina controll back to top anu mangrupi teks link handap kode css.

Javascript :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://mitrabarayaproject.googlecode.com/svn/jqMBngagulung.js" type="text/javascript"></script>

Kode CSS :

.jqMBngagulung{
        position:relative;
        font-weight:bold;
        padding:2px 4px;
        text-decoration:blink;
        color:#eee;
        background:#900;
        margin:20px;
        display:inline-block;
        opacity:0.5;
        filter:alpha(opacity=50);      
}
.jqMBngagulung:hover{
        opacity:1.0;
        filter:alpha(opacity=100); 
}
.jqMBngagulung:after{
        font-size:16px;
        font-weight:bold;
        font-family:Courier, monospace;
        text-align:center;
        position:absolute;
        right:-200px;
        top:-50px;
        content:"Scroll Back to Top";
        line-height:30px;
        width:30px;overflow:hidden;
        height:30px;
        background:#888;
        border-radius:4px;
        border:3px double #aaa;
        color:#eee;
        text-shadow:1px 1px 1px #000;
        opacity:0;
        filter:alpha(opacity=0);
        z-index:-10;
}
.MBngagulung,.jqMBngagulung:after{
        transition:0.6s linear;
        -o-transition:0.6s linear;
        -moz-transition:0.6s linear;
        -webkit-transition:0.6s linear;
        -ms-transition:0.6s linear;
}
.jqMBngagulung:hover:after{
        width:190px;
        right:0;
        z-index:12;
        opacity:1.0;
        filter:alpha(opacity=100);
        box-shadow:2px 2px 4px #000;
}
.MBngagulung{
        width:37px;
        height:40px;
        opacity:0.4;
        background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVtbK1uJ9gORlx-HLHK7rGa4UzqYAqmz9XXNVyj7-3BACi4W_PMTfbPY1lhyphenhyphenFSUE1ecZWm4bQD4lto6z1_cFvMkz4u39_plwzYSaH3uBRQyEchqo16gD7_Tvwmf2NxwXyDrrz5EKDJChtx/s120/MBngagulung.png) center no-repeat;
        background-size:35px 38px;
        filter:alpha(opacity=40);
        border:3px double transparent;
        padding:5px;
        border-radius:10%; 
} 
.MBngagulung:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        background:rgba(0,0,0,.4) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVtbK1uJ9gORlx-HLHK7rGa4UzqYAqmz9XXNVyj7-3BACi4W_PMTfbPY1lhyphenhyphenFSUE1ecZWm4bQD4lto6z1_cFvMkz4u39_plwzYSaH3uBRQyEchqo16gD7_Tvwmf2NxwXyDrrz5EKDJChtx/s120/MBngagulung.png) center no-repeat;
        background-size:35px 38px;
        border:3px double #930;
        border-radius:50%;
}

Login ke Blogger.
Halaman Dasbor/Dasboard :
Klik "Rancangan/Design".
Klik "Edit HTML".
Sok di Backup Template heula.
Cari Kode ]]></b:skin>
Copy javascript dan tempelkeun di handapna ]]></b:skin>
Copy kode CSS jeung tempelkeun di luhurna ]]></b:skin>
Klik "Simpen Template/Save Template".

Lamun Alo hayang ngagunakeun hiji linK controll kanggo back to top sepertos anu di luhur kode css,gunakeun wae xhtml di handap iyeu:

xHTML link jQuery Ngagulung to top plus :

<a class="jqMBngagulung" href="#MBtop">Back to TOP</a>

Catetan/Kateranganana :

Keur ngagantian gabar atawa image anu dipake conto,gantiwae 2 background ku alamat:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVtbK1uJ9gORlx-HLHK7rGa4UzqYAqmz9XXNVyj7-3BACi4W_PMTfbPY1lhyphenhyphenFSUE1ecZWm4bQD4lto6z1_cFvMkz4u39_plwzYSaH3uBRQyEchqo16gD7_Tvwmf2NxwXyDrrz5EKDJChtx/s120/MBngagulung.png.
Tah lamun hayang ngarobah ukuran gambar atawa image conto,sok atuh rubah deui dina :
background-size:35px 38px;
Panduan langkung pepek tur kumplit kode css anu langkung beda tiasa Alo buka didieu!

mitrabaraya : Online & Tutorial

Minggu, 06 Juli 2014

URLs found in the page: URL - Times Found

CSS3 Effects jQuery Ngagulung to top plus

Javascript :

Kode CSS :

xHTML link jQuery Ngagulung to top plus :