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
Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar