share blogspot style

Share blogspot style - cara memasang widget share blogspot style atau share blogspot style ini tergolong mudah bahkan buat para blogger baru kayak saya juga pasti bisa. Widget share blogspot style ini memiliki tampilan yang unik, dan sangat jarang anda temui tampilan share blogspot style seperti ini. Buat para teman teman blogger yang menginginkan tampilan share yang unik seperti tampilan widget share blogspot style ini silahkan lihat demonya melalui link demo dibawah ini dekatkan cursor anda pada tulisannya., bila anda tertarik memasang share blogspot style ini di halaman blogspot anda silahkan simak tutorial dibawah ini, langsung saja menuju TKP.

Demo

Code CSS here..

/*****************************************
Name : share blogspot style
By : Rivai Silaban | Blog Design
Update :Kamis 26, Desember 2013
site : www.rivai.org
******************************************/
.share-blogspot-style div {
display: inline;
margin-left: 15px;
cursor:pointer;
}.share-blogspot-style div > div {
width: 350px;
position: absolute;
display: inline;
margin-left: -120px;
padding: 5px;
visibility:hidden;
opacity: 0;
margin-top: -125px;
background: #ffffff;
font-size:1em;
transition: all 0.5s ease-in-out;
background-color: #333333;
text-align: center;
}.share-blogspot-style div:hover > div {
visibility:visible;
opacity: 1;
margin-top: -110px;
transition: all 0.5s ease-in-out;
}.share-blogspot-style .social-bookmarks {
padding: 0 0 0 10px;
list-style-type: none;
}.share-blogspot-style .social-bookmarks h3 {
font-size: 14px;
color: #FFFFFF;
text-align: center;
}.share-blogspot-style .section-title .social-bookmarks {
float: right;
}.share-blogspot-style .social-bookmarks li{
float: left;
margin-bottom: 2px;
padding: 0px;
background-color: #B6B6B6;
display: inline;
width: auto;
border:solid #000 1px;
box-shadow:0 0 2px 4px #fff inset;
margin:20px 2px;
}.share-blogspot-style .social-bookmarks li a {
transition: all 0.5s ease-in-out;
display: block;
float: left;
height: 100%;
margin: 0;
padding: 0;
width: 40px;
height: 40px;
text-indent: -9999px;
}.share-blogspot-style .social-bookmarks li.digg a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQrGmYVX3v1Y2CqyniOTlWdUss1zrXIyQtAXz3fnejDsAM35SO2QC_kvJUK4azuhA1cejeE_Ou8Z9HS_WeAz2ahZyAC_p47QDvYZ9w2hkIuY4Tvnf_3ausQA3p1Zpwx0fQhZUI8_ZZUyI/s1600/digg.png') no-repeat 0 0;
}.share-blogspot-style .social-bookmarks li.digg a:hover {
background-color: #2882c6;
}.share-blogspot-style .social-bookmarks li.facebook a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkSf4UMjt1dmBGN2MmrhFIN0XxgkKlg4yR7BVa6dOdtO-c7jdbhEs0sNrb1vITBPd67zl27anWuYngqvD9a3Y0qH6tTRKxMHOQc643NttWguyn_tQ7xN9ULEDjnx9TwI82-SQitj5uz0/s1600/facebook.png') no-repeat 0 0;
}.share-blogspot-style .social-bookmarks li.facebook a:hover {
background-color: #3b5998;
}.share-blogspot-style .social-bookmarks li.googleplus a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcUDhc12f-lq-8kmaBQC79IXhdz05LqUu3l8yEPJTXYyREOWV6djnJVkKfbRVUKPFVdu1VXwFgTZMfE-FG-3gZ3Y45s35SCSEpzureHoWFbSir3wr1rgvjUkSATCopwjDZ1uO1d6-8po/s1600/googleplus.png') no-repeat 0 0;
}.share-blogspot-style .social-bookmarks li.googleplus a:hover {
background-color: #d94a39;
}.share-blogspot-style .social-bookmarks li.reddit a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9o4TFOejDHylTqOob-C8v0AHhHxOQGnYWVs0bRKw8GPW4QiDkM2s-SsJvRGlLKETUCOqcVEGWYp5v53QXWz5nQzdZToJjJShcyxiyzaHOMnSWk_A2drYZw9ZdagaTYeH9iAy3xDdzCE/s1600/reddit.png') no-repeat 0 0;
}.share-blogspot-style .social-bookmarks li.reddit a:hover {
background-color: #bfd0e2;
}.share-blogspot-style .social-bookmarks li.rss a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXaJGHdZjAAera4ndnuxWcrXaCtw9ttV-qsx5wQovnZHtGwQEj_GmPHzeYW6ePGzzQ-mQsLbrZEUe6ac-GXP6GFN_P2l_n4EmZOhLghYp60OTwJ66hvn7GiVCP92Qh4E41lsu1X7fJp4/s1600/rss.png') no-repeat 0 0;
}.share-blogspot-style .social-bookmarks li.rss a:hover {
background-color: #fe9900;
}.share-blogspot-style .social-bookmarks li.twitter a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNOU24WRWYG844XbCzLiQNet5oInw156keut_nlABbnsXIyU-gK2NpXlaEQfxk2YPpXwwnhPvx9g-Bl8jFDrqAEIvoz_AYSfxaGdBNio79OjkT8h21tneoBtCUreg2N8W93MqzPMpHXJI/s1600/twitter.png') no-repeat 0 0;
}.share-blogspot-style .social-bookmarks li.twitter a:hover {
background-color: #48c4d2;
}.share-blogspot-style .social-bookmarks li a:hover {
background-position: 0 -40px;
}.share-blogspot-style .email{font-size: 12px;
padding: 5px;
width: 195px;
color: #666;
font-family: georgia;
margin-bottom: 15px;
border: 1px solid #999;}
.share-blogspot-style .submit{background-color:#5D5D5D;border:1px solid black;border-radius:2px;color:white;cursor:pointer;display:inline-block;font-family:arial;font-size: 0.9em;font-weight:bold;height:28px;padding:4px 8px;text-align:center;text-decoration:none;text-shadow: 1px 1px 1px #000;}
.share-blogspot-style .submit:hover{box-shadow:1px 1px 0 #626262 inset;background-color:#373737}
/*** share blogspot style and ***/

Code HTML here..

<!-- share blogspot style code start-->
<div class="share-blogspot-style"><div>Silahkan bagikan artikel ini
<div class="social-bookmarks"><h3>Share article with or Subscribe</h3><ul>
<li class="twitter"><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</a></li>
<li class="googleplus"><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 false;" rel="nofollow" title="Share this on Gplus">googleplus</a></li>
<li class="facebook"><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</a></li>
<li class="digg"><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Digg">digg</a></li>
<li class="reddit"><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Reddit">reddit</a></li>
<li class="rss"><a target="_blank" href="http://feeds.feedburner.com/rivai-site" title="rss">rss</a></li>
</ul>
<form class="subscribe-form" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=rivai-site', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" name="email" value="E-mail here..." onfocus="if (this.value == 'E-mail here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'E-mail here...';}" />
<input type="hidden" value="rivai-site" name="uri"/>
<input type="hidden" value="rivai-site" name="title"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit" type="submit" name="submit" value="Subscribe" /></form></div></div></div><!-- share blogspot style code end-->

Code diatas merupakan code CSS dan code tag HTML dari widget share blogspot style yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama kayak saya silahkan kunjungi halaman tata cara pemasangan widget share blogspot style..

http://www.rivai.org/2013/12/share-blogspot-style.html

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 : 5:12 PM