Loading...


Baca Juga

Assalamu Alaikum WR.WB


Cara Mudah Buat Profil Author Di Web www.n.nu Dengan Efek Hover


Selamat malam mblo .. yang gak malam mingguan yuk merapat sini .. kali aja dapat jodoh haha .. kidding mblo .. baiklah setelah kemaren saya post soal Cara Cepat Dan Mudah Buat Website Plus Domain Gratis .. rasa nya kurang cukup .. jika suatu web atau blog .. tidak dilengkapi dengan profil author .. maka dari itu .. di kesempatan malam hari ini .. akan saya sedikit berbagi bagaimana cara membuat profil author di Web www.n.nu .. cara nya cukup mudah saja .. yaitu cukup dengan menggunakan CSS sebagai dasar nya .. yang nanti nya tinggal kita pasang kode HTML .. dimana pun yang kita inginkan .. bisa di sidebar .. di dalam postingan maupum di footer .. dan cara ini bukan hanya untuk di web www.n.nu saja ya .. di pasang di platfrom blog lain juga bisa .. sekalipun yang tidak mendukung kode JavaScript / jQuery maupun PHP dan sejenisnya .. krna kode itu tidak di pergunakan .. cukup dengan CSS & HTML saja ..

Tutorial Blogging >> Baca Juga :



OK NEXT .. langsung saja keintinya ..

  • pertama - tama .. silahkan sign in dulu ke web www.n.nu .. dengan cara >> www.namawebmu.n.nu/admin .. untuk lebih mudah silahkan Klik Disini .. dan jika yang belum punya .. silahkan sign up / daftar dulu Klik Disini .. jika belum tau cara nya .. silahkan baca postingan saya yang kemaren Klik Disini .. jika sudah sign in ( masuk ) / sign up ( daftar ) .. lanjut ke tahap ke dua ..
  • tahap kedua .. setelah masuk ke control panel .. atau dashbor .. silahkan klik >> settings >> Change css .. untuk lebih jelas .. silahkan lihat gambar di bawah ini ..

Setting.jpg

  • tahap ke tiga .. setelah step dua terbuka .. akan muncul halaman baru .. untuk ngedit template / CSS .. lebih jelas nya .. lihat gambar di bawah ..

Editcss.png


  • Jika sudah terbuka .. halaman sperti gambar di atas .. silahkan copas kode css di bawah ini .. ketempat yang saya beri tanda panah di atas .. jangan takut CSS / Template rusak / error dsb .. karena dibawah nya ada review .. jadi terlihat jika ada kode yang salah .. bisa di peebaiki letak kesalahan nya .. dan berikut ini .. Code CSS Profil Efek Hover nya ..


#profile {
border:2px solid #888;
margin:2px 5px 0px 0px;
padding:2px;text-align:justify;
height: 130px;width: 90px;
}

#profile:hover {
border:2px solid #ccc;
cursor:pointer;
text-align:justify;
}

.opacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:
DXImageTransform.
Microsoft.Matrix(
M11=0.9961946980917455,
M12=-0.08715574274765817,
M21=0.08715574274765817,
M22=0.9961946980917455,
sizingMethod='auto
expand'); zoom: 1;
}

.opacity:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:
DXImageTransform.
Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1,
sizingMethod='auto
expand'); zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}





  • Jika Kode CSS diatas sudah terpasang .. berikut nya .. copy Kode HTML nya .. Copas Semua Kode Ini .. jika semua kode sudah di copas .. maka hasil nya akan seperti gambar di bawah ini ..


Sharebefore.jpg
Gambar Profil sebelum diklik


Profilbefore.jpg
Gambar Profil sesudah diklik


  • dari perbedaan kedua gambar diatas sudah jelaskan terlihat .. bagian poto profil .. nampak berbeda posisi dan warna .. sebelum dan sesudah di hover .. atau di klik .. dan di bawah ini .. cara menampilkan tombol button share dengan gaya hover nya ..


Baca Juga :




  • Stelah semua Kode CSS di atas di copas .. sekarang tinggal copas kode tombol share nya ..






  • Jika Kode CSS diatas sudah terpasang .. berikut nya .. copy Kode HTML nya .. Copas Semua Kode Ini .. jika semua kode sudah di copas .. maka hasil nya akan seperti gambar di bawah ini ..


Sharebefore.jpg
Gambar Tombol sebelum diklik


Shareafter.jpg
Gambar Tombol sesudah diklik


  • dari perbedaan kedua gambar diatas sudah jelaskan terlihat .. contoh diatas saya klik tombol button share facebook .. nampak berbeda warna .. sebelum dan sesudah di hover .. atau di klik .. dan di bawah ini .. hasil akhir pembuatan Cara Mudah Buat Profil Author Di Web www.n.nu Dengan Efek Hover ..


Akhir.jpg
Hasil Akhir Peletakan Profil dibagian Sidebar atas


  • gimana .. sangat mudah banget bukan ?? .. tinggal copas jadi dweh .. profil yang keren hehe .. untuk peletakan kode HTML nya .. terserah mau di pasang bagian mana saja .. di atas cuma sekedar contoh .. disitu saya terapkan kode HTML nya .. dibagian sidebar paling atas .. dan untuk kode nya silahkan Copas Semua Kode disini ..


Tutorial Blogging >> Post Unggulan :




Udah cuma segitu aja .. untuk review silahkan kunjungi web saya .. di www.0chaw3b.n.nu

Penulis
Casa.png Dari, Majalengka, Rajagaluh - Jawa Barat
MyProfil.pngUser.png OCHA
Jangan jadikan sesuatu ke gagalan sebagai ketakutan untuk mengulang nya kembali .. Sehingga anda tak mau mencoba nya lagi .. Tapi jadikan lah ke gagalan sebagai awal ke suksesan untuk menjadi yang lebih baik dari sebelum nya ..." [View More]

twitter-icon.png facebook-icon.png google-icon.png Add Friend

4f2396db8f1172a17b478a5a5.png



Itulah Postingan kali ini .. mengenai » Cara Mudah Buat Profil Author Di Web www.n.nu Dengan Efek Hover « .. yang bisa saya bagikan .. Pada kesempatan yang ke 72x nya ini .. Kurang lebih nya mohon di maklum aja .. Jika ada salah - salah kata atau pun penulisan .. Semoga bermanfaat dan sampe ketemu lagi di lain waktu dan lain kesempatan .. Akhir kata saya ucapkan ..



Wassalamu'Alaikum WR.WB

 
Top
Loading...