Home / tutorial / blogspot / CARA MEMBUAT PROFILE ABOUT ME

CARA MEMBUAT PROFILE ABOUT ME

CARA MEMBUAT PROFILE ABOUT ME – Bagaimana cara memasang profile about me pada halaman blogger yang unik dan menarik? Halaman ini cocok untuk blogger yang ingin mem-personal branding-kan dan mencoba eksis di dunia maya. Dengan balutan script CSS3 yang sangat powerfull untuk membuat tampilan sebuah web lebih indah.

cara membuat profile about me
cara membuat profile about me

TUTORIAL CARA MEMBUAT HALAMAN PROFILE BLOGGER
Sebenarnya script ini saya dapatkan dari sebuah blog dengan full tutorial css dan javascript yang dimilliki oleh Taufik Nurrohman. Dia sang creator dari pembuat script css ini, kemudian saya modifikasi menjadi sebuah tampilan untuk profile blogger. Langsung saja berikut ini cara membuatnya
1. Seperti biasa kamu harus log in dulu ke halaman dashboard blogger kemudian pilih Pages
2. Buatlah sebuah halaman about me dengan memilih New Page > Blank Page
3. Isi judul page tersebut sesuai keinginan kamu bisa About Me , Tentang Saya, ataupun About Us
4. Pilih mode HTML kemudian paste script berikut ini

<style type="text/css">
/*
Pure CSS3 Secret Book by Taufik Nurrohman
On: 19 December 2011
URL: http://hompimpaalaihumgambreng.blogspot.com/
Note: These experiments are under the Creative Commons Attribution + God Almighty License.
Please do not replace or remove the attribution above if you want to save/modify this project legally.
*/
*{margin:0px;padding:0px;}
.body {
text-align:center;
}
a{color:#666;text-decoration:none;}
a:hover{color:#000;text-decoration:underline;}
#wrap-book{
width:480px;
height:650px;
margin:10px auto 70px;
background:#B40505;
-webkit-border-radius:10px 5px 10px 10px;
-moz-border-radius:10px 5px 10px 10px;
border-radius:10px 5px 10px 10px;
-webkit-box-shadow:1px 1px 7px #000;
-moz-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
position:relative;
overflow:visible !important;
}
#kertas{
width:465px;
height:637px;
position:absolute;
top:3px;
right:5px;
background:#fff;
-webkit-border-radius:0px 0px 5px 0px;
-moz-border-radius:0px 0px 5px 0px;
border-radius:0px 0px 5px 0px;
-webkit-box-shadow:
0px 0px 2px rgba(0,0,0,0.3),
1px 1px 0px #fff,
1px 1px 2px rgba(0,0,0,0.3),
1px 2px 0px #fff,
1px 2px 2px rgba(0,0,0,0.3),
1px 3px 0px #fff,
1px 3px 2px rgba(0,0,0,0.3),
1px 4px 0px #fff,
1px 4px 2px rgba(0,0,0,0.3),
1px 5px 0px #fff,
1px 5px 2px rgba(0,0,0,0.7);
-moz-box-shadow:
0px 0px 2px rgba(0,0,0,0.3),
1px 1px 0px #fff,
1px 1px 2px rgba(0,0,0,0.3),
1px 2px 0px #fff,
1px 2px 2px rgba(0,0,0,0.3),
1px 3px 0px #fff,
1px 3px 2px rgba(0,0,0,0.3),
1px 4px 0px #fff,
1px 4px 2px rgba(0,0,0,0.3),
1px 5px 0px #fff,
1px 5px 2px rgba(0,0,0,0.7);
box-shadow:
0px 0px 2px rgba(0,0,0,0.3),
1px 1px 0px #fff,
1px 1px 2px rgba(0,0,0,0.3),
1px 2px 0px #fff,
1px 2px 2px rgba(0,0,0,0.3),
1px 3px 0px #fff,
1px 3px 2px rgba(0,0,0,0.3),
1px 4px 0px #fff,
1px 4px 2px rgba(0,0,0,0.3),
1px 5px 0px #fff,
1px 5px 2px rgba(0,0,0,0.7);
}
#out-paper{
width:265px;
height:437px;
position:absolute;
top:15px;
right:5px;
background:#fafafa;
-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.4);
box-shadow:1px 1px 3px rgba(0,0,0,0.4);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-ms-transform:rotate(5deg);
-o-transform:rotate(5deg);
transform:rotate(5deg);
}
#book{
width:440px;
height:625px;
padding:10px;
background:#B40505;
background:-webkit-linear-gradient(-45deg, #CB0D08, #AD0D05);
background:-moz-linear-gradient(-45deg, #CB0D08, #AD0D05);
background:-ms-linear-gradient(-45deg, #CB0D08, #AD0D05);
background:-o-linear-gradient(-45deg, #CB0D08, #AD0D05);
background:linear-gradient(-45deg, #CB0D08, #AD0D05);
-webkit-box-shadow:inset 0px 1px 1px rgba(255,255,255,0.5), inset 0px -1px 4px rgba(0,0,0,0.3), 0px 1px 2px rgba(0,0,0,0.7);
-moz-box-shadow:inset 0px 1px 1px rgba(255,255,255,0.5), inset 0px -1px 4px rgba(0,0,0,0.3), 0px 1px 2px rgba(0,0,0,0.7);
box-shadow:inset 0px 1px 1px rgba(255,255,255,0.5), inset 0px -1px 4px rgba(0,0,0,0.3), 0px 1px 2px rgba(0,0,0,0.7);
position:absolute;
top:-4px;
right:5px;
-webkit-border-radius:4px 5px 5px 5px;
-moz-border-radius:4px 5px 5px 5px;
border-radius:4px 5px 5px 5px;
}
#mid-book{
width:440px;
height:625px;
background:#B62011;
background:-webkit-linear-gradient(-35deg, #CB0D08, #AD0D05);
background:-moz-linear-gradient(-35deg, #CB0D08, #AD0D05);
background:-ms-linear-gradient(-35deg, #CB0D08, #AD0D05);
background:-o-linear-gradient(-35deg, #CB0D08, #AD0D05);
background:linear-gradient(-35deg, #CB0D08, #AD0D05);
border:1px dashed rgba(255,255,255,0.4);
-webkit-box-shadow:inset 0px 0px 2px rgba(255,255,255,0.3), 0px 0px 1px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 0px 2px rgba(255,255,255,0.3), 0px 0px 1px rgba(0,0,0,0.4);
box-shadow:inset 0px 0px 2px rgba(255,255,255,0.3), 0px 0px 1px rgba(0,0,0,0.4);
}
#grouper{
width:15px;
height:645px;
-webkit-border-radius:10px / 5px;
-moz-border-radius:10px / 5px;
border-radius:10px / 5px;
position:absolute;
top:-4px;
left:0px;
background:#B40505;
background:-webkit-linear-gradient(left, #CB0D08, #AD0D05);
background:-moz-linear-gradient(left, #CB0D08, #AD0D05);
background:-ms-linear-gradient(left, #CB0D08, #AD0D05);
background:-o-linear-gradient(left, #CB0D08, #AD0D05);
background:linear-gradient(left, #CB0D08, #AD0D05);
-webkit-box-shadow:inset 0px 0px 1px rgba(225,255,255,0.4);
-moz-box-shadow:inset 0px 0px 1px rgba(225,255,255,0.4);
box-shadow:inset 0px 0px 1px rgba(225,255,255,0.4);
}
#title{
position:absolute;
top:40px;
left:60px;
background:#FAF2B1;
background:-webkit-linear-gradient(-45deg, #fff 0%, #FAF2B1 50%, #FCF7D1 51%, #FAF2B1 100%);
background:-moz-linear-gradient(-45deg, #fff 0%, #FAF2B1 50%, #FCF7D1 51%, #FAF2B1 100%);
background:-ms-linear-gradient(-45deg, #fff 0%, #FAF2B1 50%, #FCF7D1 51%, #FAF2B1 100%);
background:-o-linear-gradient(-45deg, #fff 0%, #FAF2B1 50%, #FCF7D1 51%, #FAF2B1 100%);
background:linear-gradient(-45deg, #fff 0%, #FAF2B1 50%, #FCF7D1 51%, #FAF2B1 100%);
border:3px double #DFC65B;
width:330px;
height:auto;
padding:10px 20px 20px;
text-align:left;
position:relative;
font:italic 12px Cambria,Georgia,Serif;
color:#666;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:inset 1px 1px 0px #fff, inset -1px -1px 0px #fff, 0px 1px 2px rgba(0,0,0,0.4);
text-shadow:0px -1px 0px rgba(255,255,255,0.7);
}
.title h2{
margin:0px 0px 7px;
padding:0px 0px 7px;
border-bottom:1px dotted #DFC65B;
font:italic 22px Cambria,Georgia,Serif;
color:#7C6C2C;
}
.middot{
position:absolute;
width:4px;
height:4px;
background:#fff;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.3);
box-shadow:0px 1px 1px rgba(0,0,0,0.3);
}
.s1{top:6px;left:5px;}
.s2{top:6px;right:5px;}
.s3{bottom:6px;left:5px;}
.s4{bottom:6px;right:5px;}
#title-rb{
position:absolute;
bottom:0px;
left:5px;
width:28px;
height:99px;
background:#fff;
border-left:2px solid #1A860A;
border-right:2px solid #1A860A;
background:-webkit-linear-gradient(-30deg, #1A860A 0%, #156A08 100%);
background:-moz-linear-gradient(-30deg, #1A860A 0%, #156A08 100%);
background:-ms-linear-gradient(-30deg, #1A860A 0%, #156A08 100%);
background:-o-linear-gradient(-30deg, #1A860A 0%, #156A08 100%);
background:linear-gradient(-30deg, #1A860A 0%, #156A08 100%);
-webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.4), inset -1px 0px 0px rgba(255,255,255,0.4), 0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.4), inset -1px 0px 0px rgba(255,255,255,0.4), 0px 1px 2px rgba(0,0,0,0.4);
box-shadow:inset 1px 0px 0px rgba(255,255,255,0.4), inset -1px 0px 0px rgba(255,255,255,0.4), 0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:0px 0px 20px 20px;
-moz-border-radius:0px 0px 20px 20px;
border-radius:0px 0px 20px 20px;
}
#title-rb:before, #title-rb:after{
content:"";
width:0px;
height:6px;
display:block;
border-width:10px 18px;
border-style:solid;
border-color:transparent #1A860A transparent #1A860A;
position:absolute;
bottom:100%;
margin-bottom:-14px;
left:-4px;
}
#title-rb:after{
margin-bottom:-22px;
}
#pena{
width:30px;
height:540px;
background:#333;
background:-webkit-linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
background:-moz-linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
background:-ms-linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
background:-o-linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
background:linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
position:absolute;
top:30px;
right:100px;
-webkit-border-radius:30px / 10px;
-moz-border-radius:30px / 10px;
border-radius:30px / 10px;
-webkit-box-shadow:-2px 0px 3px #000;
-moz-box-shadow:-2px 0px 3px #000;
box-shadow:-2px 0px 3px #000;
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
transform:rotate(-10deg);
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
#pena:before{
content:"";
width:30px;
height:520px;
position:absolute;
top:-4px;
left:0px;
z-index:-1;
display:block;
background:#333;
background:-webkit-linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
background:-moz-linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
background:-ms-linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
background:-o-linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
background:linear-gradient(left, #222, #666, #333, #222, #000, #999, #000);
-webkit-border-radius:30px / 10px;
-moz-border-radius:30px / 10px;
border-radius:30px / 10px;
-webkit-box-shadow:-4px 2px 10px rgba(0,0,0,0.7);
-moz-box-shadow:-4px 2px 10px rgba(0,0,0,0.7);
box-shadow:-4px 2px 10px rgba(0,0,0,0.7);
}
#pena:after{
content:"";
width:30px;
height:10px;
background:transparent;
border-top:2px solid #111;
position:absolute;
top:170px;
left:0px;
-webkit-border-radius:30px / 10px;
-moz-border-radius:30px / 10px;
border-radius:30px / 10px;
}
#cantelan{
width:3px;
height:174px;
background:#fff;
background:-webkit-linear-gradient(10deg, #fff 0%, #ccc 50%, #fff 51%, #ddd 100%);
background:-moz-linear-gradient(10deg, #fff 0%, #ccc 50%, #fff 51%, #ddd 100%);
background:-ms-linear-gradient(10deg, #fff 0%, #ccc 50%, #fff 51%, #ddd 100%);
background:-o-linear-gradient(10deg, #fff 0%, #ccc 50%, #fff 51%, #ddd 100%);
background:linear-gradient(10deg, #fff 0%, #ccc 50%, #fff 51%, #ddd 100%);
border-left:2px solid #fff;
border-bottom:1px solid #666;
-webkit-box-shadow:0px 0px 2px #000;
-moz-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
position:absolute;
top:0px;right:-4px;
}
#line{
position:absolute;
bottom:70px;
right:15px;
width:460px;
background:#B62011;
background:-webkit-linear-gradient(-35deg, #CB0D08, #AD0D05);
background:-moz-linear-gradient(-35deg, #CB0D08, #AD0D05);
background:-ms-linear-gradient(-35deg, #CB0D08, #AD0D05);
background:-o-linear-gradient(-35deg, #CB0D08, #AD0D05);
background:linear-gradient(-35deg, #CB0D08, #AD0D05);
border-top:1px dashed rgba(255,255,255,0.4);
-webkit-box-shadow:0px -1px 2px rgba(255,255,255,0.3), 0px 0px 1px rgba(0,0,0,0.4);
-moz-box-shadow:0px -1px 2px rgba(255,255,255,0.3), 0px 0px 1px rgba(0,0,0,0.4);
box-shadow:0px -1px 2px rgba(255,255,255,0.3), 0px 0px 1px rgba(0,0,0,0.4);
}
#foto-wrap{
padding-top:150px;
position:absolute;
top:170px;
left:60px;
z-index:20;
}
#foto{
width:200px;
height:220px;
background:#fff;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
box-shadow:0px 1px 3px rgba(0,0,0,0.7);
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-ms-transform:rotate(10deg);
-o-transform:rotate(10deg);
transform:rotate(10deg);
}
#foto:before{
content:"";
width:100%;
height:100%;
background:#fff;
position:absolute;
top:0px;
left:0px;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
box-shadow:0px 1px 3px rgba(0,0,0,0.7);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-ms-transform:rotate(5deg);
-o-transform:rotate(5deg);
transform:rotate(5deg);
}
#abu{
position:absolute;
bottom:30px;
left:12px;
z-index:1000;
width:180px;
height:180px;
background:#aaa;
-webkit-box-shadow:inset 0px 0px 100px #666;
-moz-box-shadow:inset 0px 0px 100px #666;
box-shadow:inset 0px 0px 100px #666;
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-ms-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
#abu:hover{
-webkit-box-shadow:inset 0px 0px 0px #666;
-moz-box-shadow:inset 0px 0px 0px #666;
box-shadow:inset 0px 0px 0px #666;
}

#wrap-book:hover #pena{
-webkit-transform:rotate(10deg) translate(20px, 0px);
-moz-transform:rotate(10deg) translate(20px, 0px);
-ms-transform:rotate(10deg) translate(20px, 0px);
-o-transform:rotate(10deg) translate(20px, 0px);
transform:rotate(10deg) translate(20px, 0px);
}
</style>
<div class="body">
<div id="wrap-book">
<div id="kertas">
</div>
<div id="out-paper">
</div>
<div id="book">
<div id="mid-book">
</div>
</div>
<div id="grouper">
</div>
<div id="title">
<h2>
My Profile</h2>
Author: NAMA KAMU
Deskripsi kamu

<div style="float: right; padding-right: 50px;">
Salam Blogger

Nama Kamu</div>
<span class="middot s1"></span>
<span class="middot s2"></span>
<span class="middot s3"></span>
<span class="middot s4"></span>
</div>
<div id="line">
</div>
<div id="title-rb">
</div>
<div id="foto-wrap">
<div id="foto">
</div>
<div id="abu">
<img height="180" src="URL GAMBAR FOTO KAMU" width="180" /></div>
</div>
<div id="pena">
<div id="cantelan">
</div>
</div>
</div>
</div>
<!-- wrap-book -->

5. Edit isi yang ada dalam script HTML diatas sesuka hati kamu yang penting jangan meremove tulisan Pure CSS3 Secret Book bla bla bla… Hehe ingat sob hargai sang pembuat karena kamu pasti tau kalo membuat script ini tidaklah mudah. Setelah itu klik Publish

Demikian CARA MEMBUAT PROFILE ABOUT ME semoga bisa membuat tampilan blog kamu jadi tambah keren dan unik.

Beni Iskandar
Title: CARA MEMBUAT PROFILE ABOUT ME
Rating: ★★★★★ 5
Terimakasih telah membaca artikel CARA MEMBUAT PROFILE ABOUT ME . Sobat bisa mem-bookmark halaman artikel ini dengan URL https://www.inblogspot.com/cara-membuat-profile-about-me/. Diharapkan untuk mencantumkan link sumber dari artikel ini apabila sobat ingin menjadikannya sebagai referensi.
CARA MEMBUAT THUMBNAIL BERGERAK
TEMPAT PENYIMPANAN DATA ONLINE GRATIS

Related Posts

  • Cara Memindahkan Blog Ke Akun Blogger Lain

    CARA MEMINDAHKAN BLOG KE AKUN BLOGSPOT LAIN

    CARA MEMINDAHKAN BLOG KE AKUN BLOGSPOT LAIN – Tutorial mudah cara pindahan blogspot dari satu akun ke akun blogger yang lain dengan menggunakan email google. Tidak banyak yang tahu...

  • Cara Setting Domain Namecheap Ke Blogspot

    CARA SETTING DOMAIN NAMECHEAP KE BLOGSPOT

    CARA SETTING DOMAIN NAMECHEAP KE BLOGSPOT – Berikut ini panduan cara setting atau mengatur domain dari namecheap agar terkoneksi dengan blogspot dengan mudah. Syarat dari panduan ini anda telah...

  • CARA BLOGWALKING YANG BAIK DAN BENAR

    CARA BLOGWALKING YANG BAIK DAN BENAR – Cara blogwalking yang efektif praktis mudah gak pake repot. Blogwalking memang sudah menjadi kebiasaan atau bahkan tradisi bagi para blogger aktif yang...

  • CARA MEMBUAT MENU ACCORDION PADA SIDEBAR

    CARA MEMBUAT MENU ACCORDION PADA SIDEBAR – Tampilan menu accordion  merupakan jenis tampilan menu yang paling dicari akhir-akhir ini. Menu ini memiliki bentuk yang simple dan enak dipandang mata....

  • ALASAN MENGAPA MENGGUNAKAN BLOGSPOT

    ALASAN MENGAPA MENGGUNAKAN BLOGSPOT – Blogger atau blogspot merupakan salah satu media penyedia jasa blog gratis yang paling populer. Sampai sekarang sudah tidak terhitung berapa banyaknya artikel yang telah...

Leave a Reply

Your email address will not be published. Required fields are marked *

No Live Link Please! and Leave a Relevant Comment