membuat profil pengarang blog dengan efek hover dan readmore...

Dalam sebuah blog sebenarnya sudah dilengkapi dengan widget MENGENAI SAYA versi standart.namun tampilanya selain kurang menarik juga terlihat umum.

Kali ini blog data supry akan membagikan sebuah tutorial membuat profil pengarang blog(mengenai saya) dengan efek gambar hover dan readmore..

efek gambar hover adalah sebuah efek gambar yang jika diarahin cursor akan bergerak sesuai efek yang diterapin pada sebuah gambar.

Lihat  dibawah

Contoh profil pengarang:

Mengenai Saya...Read More

Jika tertarik ingin membuat profil pengarang diblog anda silahkan ikuti tutorial dibawah ini

Profil pengarang ini bisa ditaruh di setiap akhir postingan atau di sidebar bisa juga diwidget footer.tergantung kesukaan kita dalam mendesain sebuah blog.

Yang harus diketahui adalah cara meletakkan kodenya jika mau menaruhnya dimana kita msuka.dibawah ini saya bagikan lengkap mulai dari kode,keterangan dan cara penempatanya.silahkan disimak;

Berikut kodenya;

<style>
#profileSupryplasadewa{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileSupryplasadewa:hover {
border:2px solid #ccc;
cursor:pointer;
}
.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;
}
</style>
   <!--[endif]---->

<img align="left" class="opacity" id="#profileSupryplasadewa" src="https://z-1-scontent-lax3-1.xx.fbcdn.net/hphotos-frc3/v/t1.0-0/cp0/e15/q65/p240x240/1385688_532942386782444_1116419877_n.jpg?efg=eyJpIjoiYiJ9&oh=17d915ae2373a486280ae997e9d04f7b&oe=5738E73B" />Mengenai Saya<a href="http://datasupry.blogspot.com/p/mengenai-saya.html" style="color: #888888;">...Read More</a><!--![endif]---->

<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="http://www.blogger.com/blogID=2849412362217171241&amp;widgetType=Profile&amp;widgetId=Profile1&amp;action=editWidget&amp;sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML1&quot;));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<br />
<div class="clear">
</div>

KETERANGAN

==>   profilsupryplasadewa  

. -->  ganti dengan nama poril anda

==>   https://z-1-scontent-lax3-1.xx.fbcdn.net/hphotos-frc3/v/t1.0-0/cp0/e15/q65/p240x240/1385688_532942386782444_1116419877_n.jpg?efg=eyJpIjoiYiJ9&oh=17d915ae2373a486280ae997e9d04f7b&oe=5738E73B. -->  ganti dengan URL FOTO YANG AKAN DITAMPILKAN 

==>   http://datasupry.blogspot.com/p/mengenai-saya.html. -->  ganti dengan URL LAMAN mengenai anda(jika belum punya buat dulu sebuah postingan diblog anda melalui menu laman,beri judul mengenai saya dan isikan mengenai anda atau tentang blog anda.terakhir terbitkan dan lihat urlnya.

MEMASANG DITIAP AKHIR POSTINGAN

==>   masuk kedasbord blog anda

==>   pilih menu template dan edit HTML

==>   klik kanan pilih expand widget

==> cari kode (<data:post.body>) gunakan CTR F untuk memudahkan pencarian.biasanya kode tersebut lebih dari satu,pilih kode yang no.2 atau no.3 dan taruh kode diatas tepat dibawah kode <data:post.body>.

==>cek dengan petinjau jika tidak error lanjut simpan template.

!==>   selesai dan lihat hasilnya

MEMASANG DIWIDGET SIDEBAR/FOOTER

==>   masuk dasbord blog

==>   pilih menu TATA LETAK

==>   tambah widget sesuai keinginan,disidebar atau difooter

==>   pilih JAVA SCRIPT dan masukkan kode diatas.

==>   Simpan dan selesai

Selamat mencoba.
semoga bermanfaat

Terimakasih Anda telah membaca tulisan / artikel di atas tentang :
Judul: membuat profil pengarang blog dengan efek hover dan readmore...
Rating: 100% based on 99998 ratings. **9 user reviews.
Ditulis Oleh supryplasadewa
Semoga informasi mengenai membuat profil pengarang blog dengan efek hover dan readmore... bisa memberikan manfaat bagi Anda. Jangan lupa Komentar Anda saya tunggu di kolom bagian bawah ini.

Tweet