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 bahw...

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;
  margin:0 auto;
  margin-top:15px;
  padding:10px;
  width:250px;
  height:auto;
}
.name-author {
  margin:0 0 7px;
  display:block;
  width:100%;
}
.name-author h3 {
  position:relative;
  display:inline;
  background-color:#FA0909 ;
  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 #FA0909 ;
}
@-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:right;
  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:#FA0909;
}
.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><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: #FB0505 ;"> ... Read More My Profil </a>
</div></div>]

4 - Save dan lihat hasilnya - siap .

Info tetapan Widget Profil seperti 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

Contoh Widget Profil  

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

COMMENTS

BLOGGER

$hide=home

Nama

Bicara Islam,43,Doa Harian,8,Info Semasa,8,Lirik Lagu Pilihan,70,Madah Puisi,23,Pengetahuan Am,42,Petua dan Tips,22,Resepi Pilihan,60,Tutorial Blogger,4,
ltr
item
mdruzaidaud: Cara mengubah Profil di blog agar kelihatan menarik dengan menggunakan script CSS
Cara mengubah Profil di blog agar kelihatan menarik dengan menggunakan script CSS
https://3.bp.blogspot.com/-cwXIAITTEQg/Wuh0sO_nJzI/AAAAAAAAHQc/ZkHWg1Ep8QMIG1yXj3VgSLhTerZHeit3ACLcBGAs/s320/myprofilmdruzaidaud.png
https://3.bp.blogspot.com/-cwXIAITTEQg/Wuh0sO_nJzI/AAAAAAAAHQc/ZkHWg1Ep8QMIG1yXj3VgSLhTerZHeit3ACLcBGAs/s72-c/myprofilmdruzaidaud.png
mdruzaidaud
https://mdruzaidaud.blogspot.com/2018/05/cara-mengubah-profil-di-blog-agar.html
https://mdruzaidaud.blogspot.com/
https://mdruzaidaud.blogspot.com/
https://mdruzaidaud.blogspot.com/2018/05/cara-mengubah-profil-di-blog-agar.html
true
8043571688434587218
UTF-8
Loaded All Posts Not found any posts VIEW ALL SETERUSNYA Reply Cancel reply Delete Penulis Utama PAGES ALL POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy