Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Thursday, December 26, 2013

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('http://4.bp.blogspot.com/-zT9iLog2AyE/UmII4UgK-EI/AAAAAAAAB6U/KRyIbQiB3zs/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('http://4.bp.blogspot.com/-y6BHdk-Muow/UmII4gMk8EI/AAAAAAAAB6Y/qJ9Kp3FqJPg/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('http://2.bp.blogspot.com/-9pkIeV8_m_E/UmII5LKNoxI/AAAAAAAAB6k/k5ImtHH3_x0/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('http://2.bp.blogspot.com/-xKcdVzgF17I/UmII6U7W2DI/AAAAAAAAB6s/tgydL9duUio/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('http://1.bp.blogspot.com/-9M9bMIvRaaQ/UmII6nmqNTI/AAAAAAAAB6w/4vLEHrPJ568/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('http://4.bp.blogspot.com/-MKvk9ZQw3CM/UmII-3_0VMI/AAAAAAAAB68/lN2-0_UuXno/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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 5:12 PM

0 komentar :

Post a Comment

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog