Membuat Halaman About Me Dengan Sentuhan Animasi

Membuat Halaman About Me Ala Blog Info [K-moe]
About Me Ala Blog Info [K-moe]
Membuat Halaman About Me Dengan Sentuhan Animasi. Halaman about me umumnya berisi keterangan penulis atau juga berisi keterangan tentang blog tersebut. Berkaitan dengan hal itu, beberapa waktu lalu ada sobat blogger yang menanyakan sekaligus merequest cara bikin halaman about me seperti blog ini. Lebih tepatnya dengan dibubuhi animasi dengan memadukan JQuery Easing

Membuat Halaman About Me Dengan Sentuhan Animasi

1. Pastikan blog sobat sudah memasang Jquery min.js dan Jquery Easing
2. Pada akun blogger sobat, pilih tata letak kemudian tambahkan gadget, lalu pilih HTML dan JavaScript.
3. Copy kode HTML di bawah ini

Menambahkan HTML

<div class="tanda">
        <div class="about">
            <div class="gar">
                <div class="gar3">
                    <div class="gar2">
                        <div class="you_about-panel no-print text-justify" id="you_about-panel"><a href="#close"  id="close-about" class="close-button pull-right" title="Tutup"> Close</a> 
Isi Keterangan Disini
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
4. Simpan
5. Kemudian pilih edit template dan masukkan CSS dibawah ini tepat sebelum ]]></b:skin>

Menambahkan CSS

.pull-right {
    float:right
}
.you_about-panel .close-button {
    position:relative;
    display:inline;
    margin-top:-10px;
    width:100%
}
.about {
    top:36px;
    max-width:640px;
    width:100%;
}
#you_about-panel {
    display:none;
    padding:20px;
    line-height:1.8em;
    max-height:620px;
    right:-3px;
    position:absolute;
    background-color:#242424;
    overflow:hidden;
    z-index:1;
}
.you_about-panel {
    border:1px solid #383636;
    -webkit-box-shadow:0 1px 3px black;
    -moz-box-shadow:0 1px 3px black;
    box-shadow:0 1px 3px black;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px
}
.tanda {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 30px;
    background-color: #292929;
    border: 1px solid #303030;
    box-shadow: 0 4px 15px -4px rgba(0, 0, 0, .4) !important;
}
.gar {
    z-index: -9999;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    height: 5px;
    background: #222;
    border-top: 1px solid #292929;
    border-bottom: 1px solid #222;
    -webkit-box-shadow: 0 1px 3px black;
    box-shadow: 0 1px 3px black;
}
.gar2 {
    z-index:999;
    margin:-1px 0 0 -3px;
    background:#292929;
    position:absolute;
    width:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    border-top:1px solid #292929;
    border-bottom:1px solid #222;
    -webkit-box-shadow:0 1px 3px black;
    -moz-box-shadow:0 1px 3px black;
    box-shadow:0 1px 3px black;
    top:-2px;
    right:0
}
.gar3 {
    display:none;
    margin: 3px 3px 0 -3px;
    background: #292929;
    position: absolute;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border-top: 1px solid #292929;
    border-bottom: 1px solid #222;
    -webkit-box-shadow: 0 1px 3px black;
    box-shadow: 0 1px 3px black;
    top: -2px;
    left: 31px;
    width:0;
    height:0;
}
5. Cari code </body> kemudian tambahkan Javascript di bawah ini tepat di atas code </body>.

Menambahkan JavaScript

$(".show-about").click(function () {
    $(".tanda").delay(1000).animate({
        top: 172
    }, 3000, "easeOutExpo").stickyBar({
        animated: true,
        speed: 2000,
        easing: "swing",
        top: 195
    })
    $(".about").delay(1000).animate({
        top: 172
    }, 3000, "easeOutExpo").show(1000);
    $(".gar").delay(3000).animate({
        width: 30
    }, 1500, "easeOutExpo", function () {
        $(".gar3").delay(100).show().animate({
            width: 600
        }, 1200, "easeOutExpo", function () {
            $(".gar2").animate({
                height: 550,
                marginTop: -150
            }, 1200, "easeOutExpo", function () {
                $(".you_about-panel").show().animate({
                    width: 535
                }, 1200, "easeOutExpo")
            })
        })
    })
});
$(".close-button").click(function () {
    $(".you_about-panel").animate({
        width: 0
    }, 1200, "easeOutExpo").fadeOut(100, function () {
        $(".gar2").animate({
            height: 0,
            marginTop: 0
        }, 1200, "easeOutExpo", function () {
            $(".gar3").delay(100).animate({
                width: 0
            }, 1200, "easeOutExpo", function () {
                $(".gar").delay(800).animate({
                    width: 0
                }, 1000, "easeOutExpo", function () {
                    $(".gar3").hide()
                })
            })
        })
    })
});
Untuk gaya silahkan berkreasi sendiri sesuai dengan selera anda semua. Lihat demo lengkapnya dengan mengklik tombol di bawah.



Meskipun berbeda tetapi halaman about me ini terinspirasi dari Blog DTE.. http://www.dte.web.id

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel