Selamat Jelang Pagi Guys .. yang masih melek yuk merapat sini .. mau bagi - bagi ni .. mau tau apa yang mau saya bagikan ?? .. 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 :

• Cara Cepat Dan Mudah Buat Website Plus Domain Gratis


• Cara Pasang Google Breadcrumb di Xtgem Dan WordPress Tanpa Plugin


• Apa Itu Google Dork ?? pengertian Dork Dan Sebagai Senjata Hacking Deface Website bisa juga untuk segala cara


• Cara Menampilkan kode HTML dalam Postingan



• Cara Buat Pop Up Like Box Fanspage Fb / Google Plus / Twitter Terbaru



• Cara Buat Efek Load Page Pada Blogspot



• Cara Mudah Dan Simple Buat Menu Tab

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

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

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

• 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 :

• 8 Aplikasi Pemutar Musik Terbaik Di Tahun 2016


• 5 Aplikasi Builder Terbaik Untuk Membuat Aplikasi Android, iPhone, BlackBerry, iPad, Windows Mobile ( Bagi Pemula )

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

.touchme a {

display:block;

height:50px;

width:45px;

padding:0 4px;

margin-top:10px;

float:left;

background:transparent

url(http://1.bp.blogspot.com/-LcpFcjk1OXs/UdBRd-mQ_mI/AAAAAAAABrg/QRU5DBFAqBM/s1600/Sharing+Touch+Me.png) no-repeat;

-webkit-transition: ease-in 0.2s all;

-moz-transition: ease-in 0.2s all;

-o-transition: ease-in 0.2s all;

-ms-transition: ease-in 0.2s all;

transition: ease-in 0.2s all;

cursor:pointer;

}


.touchme a.googleplus {

background-position: 0px -58px;

}

.touchme a.googleplus:hover {

background-position: 0px 0px;

}

.touchme a.twitter {

background-position: 0px -290px;

}

.touchme a.twitter:hover {

background-position: 0px -232px;

}

.touchme a.facebook {

background-position: 0px -406px;

}

.touchme a.facebook:hover {

background-position: 0px -348px;

}

.touchme a.rss {

background-position: 0px -174px;

}

.touchme a.rss:hover {

background-position: 0px -116px;

}

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

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

• 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 :

• Cara Buat Pop Up Like Box Fanspage Fb / Google Plus / Twitter Terbaru



• Cara Buat Efek Load Page Pada Blogspot



• Cara Mudah Dan Simple Buat Menu Tab



• Cara Buat Blockquote Keren Ala Author Box



• Cara Mudah Buat Menu Keren Dengan Target Gambar



• Cara Mudah Buat Panel Split Teks Pada Gambar



• Cara Buat Efek Hover Pada Text Dengan CSS



• Cara Buat Author Box Otomatis Dibawah Postingan Terbaru 2016 Untuk Blogger

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




Itulah Postingan kali ini .. mengenai » Cara Mudah Dan Simple Buat Profil Author Dengan Efek Hover « .. yang bisa saya bagikan .. Pada kesempatan yang ke Sekian Kalinya .. 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 ..

• Original Posted By ; BLOG PONSEL SI OON