Cara mengubah Profil di blog agar kelihatan menarik dengan menggunakan script CSS

Profil adalah keadaan atau potensi dan gambaran yang ada dalam diri seseorang , organisasi atau sebagainya ,ada juga yang menganggap bahwa profil merupakan salah satu faktor penting yang menentukan kewibawaan seseorang dalam berprestasi .Bila kita menambahkan beberapa sentuhan biasa yang menarik pada widget Profil ,ianya mungkin akan menarik perhatian pengunjung menjadi pembaca setia kepada blog dan mungkin akan kembali lagi ke blog anda .

Secara umum widget profil diterapkan untuk melengkapi sebuah blog dengan informasi tentang pemilik blog ,biodata ,tagline dan sebagainya .Biasanya widget profil blogger cukup ringkas serta tampilan kurang menarik dan terhad ,dengan menggunakan script CSS widget profil dapat memberi sentuhan atau tampilan yang menarik .

1 - Login ke dashboard Blogger

2 - Pilih Tata Letak > Tambah Gadget > HTML/JavaScripts

3 - Masukan code di bawah ke dalam kotak HTML/JavaScript

<style>#aboutme { background-color:#fff; -moz-box-shadow:0 0 3px #e0e0e0; -webkit-box-shadow:0 0 3px #e0e0e0; box-shadow:0 0 3px #e0e0e0; border:1px solid #666; padding:3px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; margin:0 auto; margin-top:15px; padding:10px; width:270px; height:auto;}.name-author { margin:0 0 7px; display:block; width:100%;}.name-author h3 { position:relative; display:inline; background-color:#0097BD; color:#FFF; font-family:Segoe UI; font-size:15px; font-weight:bold; margin:0 0 0 -3px; padding:3px 5px 3px 10px; width:100%; -moz-text-shadow:0 1px 0 black; -webkit-text-shadow:0 1px 0 black; text-shadow:0 1px 0 black;}.name-author h3:after { content:" "; width:0; height:0; position:absolute; left:100%; top:0; border-width:13px; border-style:solid; border-color:transparent transparent transparent #0097BD;}@-webkit-keyframes name-author { 0% {color:white} 20% {color:Orange} 40% {color:pink} 60% {color:Orchid} 80% {color:gold} 100% {color:white}}@-moz-keyframes name-author { 0% {color:white} 20% {color:Orange} 40% {color:pink} 60% {color:Orchid} 80% {color:gold} 100% {color:white}}@-keyframes name-author { 0% {color:white} 20% {color:Orange} 40% {color:pink} 60% {color:Orchid} 80% {color:gold} 100% {color:white}}/* Penerapan efek pada element yang akan diberi efek*/.name-author h3 {/* Waktu 10 detik */ animation:10s infinite name-author linear; -webkit-animation:10s infinite name-author linear;}.aboutme-text { font-size:12px; text-align:left; margin:0;}.aboutme-image-container { float:left; width:70px; height:70px; margin-right:75px; z-index:1;}.aboutme-image-container { margin:-20px 0 5px 0; padding:9px; position:relative; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:100%; -moz-border-radius-bottomright:100%; -moz-border-radius-bottomleft:100%; border-bottom-right-radius:100%; border-bottom-left-radius:100%; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; background-color:#59B52E;}.aboutme-image-container:before { content:' '; position:absolute; top:0; left:-10px; width:0; height:0; border-style:solid; border-width:0 0 10px 10px; border-color:transparent transparent #333 transparent;}.aboutme-image-container:after { content:' '; position:absolute; top:0; right:-10px; width:0; height:0; border-style:solid; border-width:10px 0 0 10px; border-color:transparent transparent transparent #333;}.aboutme-image-container img { width:100%; height:100%; border:2px solid yellow; border-radius:100%; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000;}.aboutme-image-container img:hover { border:2px solid GOld; cursor:pointer; margin-left:0; -moz-transform:scale(1.2) rotate(360deg); -webkit-transform:scale(1.2) rotate(360deg); -o-transform:scale(1.2) rotate(360deg); -ms-transform:scale(1) rotate(-360deg); transform:scale(1.2) rotate(360deg); -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000;}</style><br /> <div id="aboutme"> <div class="aboutme-image-container"> <img src=" Isikan dengan url gambar" /></div> <div class="name-author"> <h3> Isikan dengan nama sendiri</h3> </div> <div class="aboutme-text"> Isikan dengan ayat sendiri <a href="Isikan dengan url profil" style="color: #666666;">...Read More...</a></div> </div>.

4 - Save dan lihat hasilnya - siap .

Tetapan Widget Profil di atas seperti keterangan di bawah
Isikan dengan nama sendiri	- Nama Profil Anda
Isikan dengan url gambar	- Isikan dengan url gambar/foto Profil Anda
Isikan dengan url profil	- Isikan dengan url/link Profil Anda seperti Google Plus
Isikan dengan ayat sendiri	- Isikan dengan tagline atau ayat sendiri

Selesai tutorial ringkas untuk blogger ,cara mengubah profil di blog agar kelihatan menarik dengan menggunakan script CSS . Sumber script asal dari blog - zainelhasany.com - Tutorial Komputer Dan Internet Gratis dan diedit tampilan mengikut citarasa kami agar bersesuaian dengan warna tema blog .Selamat Mencuba.

Share this post

Dapatkan artikel terkini terus ke inbox email anda :

PENAFIAN ( DISCLAIMER ) : Pelbagai bentuk imej, gambar, artikel, video dan pautan yang terkandung dalam blog ini diambil dari sumber - sumber lain .Oleh yang demikian dengan itu HAK CIPTA / COPYRIGHT dimiliki sepenuhnya oleh pemilik sumber tersebut .