widget profil share

Widget share dengan sistem slide hover media share ini memiliki tampilan yang menarik, cara membuat widget profil share dengan efect slide hover backround tranparant ini sangat simpel sebab saya akan menjelaskan secara detail tutorial pemasangannya untuk halaman blog kesayangan anda. Bila anda suka dengan widget profil share ini, silahkan simak penjelasan tutorial dibawah ini, sekalian lihat demonya pada icon DEMO dibawah ini, langsung saja menuju TKP.

Demo

Referensi Artikel

• Widget share hover sliding Up
• Cara membuat widget share image hover
• Widget Floating share
• Widget fermalink with social share
• Jquery sliding tab with share sicial media
• Related Post with social share
• Widget social share with subscribe
• Widget social share image sliding

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Wiget profil share
By : Rivai Silaban | Blog Design
Update : Senin, 07 September 2013
******************************************/
.bdbox{
width: 580px;
height: 100px;
margin:3px;
float:left;
border: solid 1px #111;
overflow: hidden;
position: relative;
background-color: #FFFFFF;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
box-shadow:0 0 3px #333;
}
.bdbox img{
position: absolute;
top: 0;
left: 0;
border: 0;
width: 100;
height:100;
}
.bdbox p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}

.bdrsbox{
position: absolute;
background: #000;
height: 200px;
width: 100%;
opacity: .8;
}
.bdrsbox h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
.bdrsbox a{
font-family: Arial;
font-size: 14px;
color: #FFFF00;
font-weight: bold;
text-decoration: none;
text-transform: capitalize;
cursor: default;
}
.bdrsbox a:hover{
color: #FF9900;
}
.rivcapfull .bdrsbox {
top: 260;
left: 0;
}
.rivcap .bdrsbox {
top: 220;
left: 0;
}

Install Script

1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
2. Pada Edit HTML template anda silahkan cari kode </head>
3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
4. Kode Jquery ini mempunyai lisensi masing masing, anda tidak diperbolehkan untuk mengeditnya.
5. Bila template anda sudah memiliki script JQUERY versi diatas ( 1.4.2 ) kode yang berwarna biru tidak usah di copy, sebab bila ada 2 script Jquery pada satu template akan mengakibatkan error.

<!-- Rivai Silaban | BLOG DESIGN script share start -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.bdbox.rivcap').hover(function(){
$(".rivcov", this).stop().animate({top:'0px'},{queue:false,duration:160});
}, function() {
$(".rivcov", this).stop().animate({top:'120px'},{queue:false,duration:160});
});
});
</script>
<!-- Rivai Silaban | BLOG DESIGN script share End -->

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
  
  
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
• Save template anda dan lihat hasilnya, selamat berkarya.

<!-- Rivai Silaban | BLOG DESIGN CODE SHARE start -->
<div class="bdbox rivcap">
<div><span >
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' alt='Rivai Silaban' title="my image"/>
</span><span style="width:80%; float:right; text-align:left; padding:5px 5px 5px 15px;">Salam Bloger...<br/>Terimakasih atas kunjungannya, semoga artikel ini dapat membantu anda, Bila anda menyukai artikel yang terposting silahkan share melalui media share dibawah ini.
<br/>
<br/>
Share with social media: <strong><em>Google plus</em></strong> - <strong><em>Facebook</em></strong> - T<strong><em>witter</em> </strong></span></div>
<br/>
<div class="rivcov bdrsbox">
<h3>Share This Article</h3>
<p>Share artikel postingan ini melalui social media dibawah ini<br/>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick="window.open(this.href,'sharer',
'toolbar=0,status=0,width=626,height=436');
return true;" rel="nofollow"
title="Share this on Gplus">Google Plus</a> | <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url'
onClick="window.open(this.href,'sharer',
'toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on facebook'>
Facebook Share</a> |
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick="window.open(this.href,'sharer',
'toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on twitter'>
Twitter Share</a> </p>
</div>
</div>
<!-- Rivai Silaban | BLOG DESIGN CODE SHARE End -->

Keterangan Code

• Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, sesuaikan ukuran lebar dengan main template anda ukuran widget 580px.
• Untuk tag Htmlnya silahkan ganti kode tulisan warna HIJAU dengan text anda.
• Tulisan kode warna KUNING silahkan ganti dengan link gambar anda

Kesimpulan

Widget profil share dengan efect hover slide up background tranparant ini memiliki tampilan yang menarik, dan valid HTML 5 dan CSS 3 serta kode yang ringan dan penulisan tag html yang SEO Friendly.

Bila anda mengalami masalah dalam pemasangan widget share hover sliding up ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.

Widget profil share
Senin, 07 Oktober 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 2:03 PM