Social share blogspot style

Link demo : https://googledrive.com/host/0Bw9mMVirmSW0WWh2THRzcGJ3dm8

1. Login ke dashboard blog anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code
   
   Code:

   ]]></b:skin>
   

   di bagian setelah ketemu..
4. Copy Code script CSS author box style 1 dibawah ini, pastekan tepat diatas code
   
   Code:

   ]]></b:skin>
   

   yang telah anda temukan tadi, atau bila template blog anda memakai
   
   Code:

   </style>
   

   silahkan pastekan kode subscribe blogspot tepat diatas
   
   Code:

   </style>
   

   template anda.

Code:

[collapsed]/*****************************************
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 ***/[/collapsed]

1. Untuk pemasangan Social share blogspot style pada tutorial kali ini, saya mencoba memasangnya di dalam postingan secara permanen
2. Cari code
   
   Code:

   <data:post.body/>
   

   ( tekan Ctrl+F setelah form terbuka pastekan
   
   Code:

   <data:post.body/>
   

   tekan "ENTER" )
3. Copy Code HTML dibawah ini, paste di bawah code
4. 
   
   Code:

   <data:post.body/>
   

   , Perhatikan dengan baik code
   
   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 bukan pada halaman depan.
5. Edit kode html widget Social share blogspot style ini dan save template anda kemudian lihat hasilnya, selamat ya... atas kerja kerasnya...

Spoiler

Code:

<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='"http://twitter.com/share?url=" + 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='"https://plus.google.com/share?url=" + 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='"http://www.facebook.com/sharer.php?u=" + 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='"http://digg.com/submit?url=" + 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='" http://www.reddit.com/submit?url=" + 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="LINK RSS ANDA" 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=ID FEED ANDA', '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="ID FEED ANDA" name="uri"/>
<input type="hidden" value="ID FEED ANDA" name="title"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit" type="submit" name="submit" value="Subscribe" /></form></div></div></div>

1. Edit semua linknya ganti dengan link anda dan lihat hasilnya semoga bermanfaat..
2. Sumber : http://www.rivai.org/2013/12/share-blogspot-style.html

 

tutorial yang

tutorial yang
terimakasih kawan

 

Thx atas pendapatnya

sama sama gan...

 

melayang

share blogspot yang melayang atau flash mas @rivaiblog
tapi mantep

 

xface2 wrote:

itu subscribe slide hiden show mas, pada demonya silahkan dekatkan cursornya pada tulisannya..