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

Saturday, October 19, 2013

widget share

Widget share dengan efek sliding up, merupakan widget share elegan style, cara membuat widget share ini pun sudah di desain agar lebih mudah anda pasang pada halaman blog kesayangan anda., tampilan yang menarik dan elegan serta memiliki struktur kode yang ringan dan ditambah satu widget subscribe yang menyempurnakan widget share ini menjadi suatu widget share yang handal untuk keperluan blogging. Bila anda berkenan silahkan klik demonya, tulisan " Widget share demo " dan uji kemanpuan widget share ini, jangan lupa isimak penjelasan cara membuat widget share ini dihalaman blog, langsung saja menuju TKP:

Demo


Referensi Artikel


  • Widget share style efect
  • 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 Share sliding hover up with subscribe
By : Rivai Silaban | Blog Design
Update : Sabtu, 19 Oktober 2013
******************************************/
#BDRS-widget {
width: 580px;
margin: 5px auto;
border:solid #999 1px;
height:40px;
background-color: #CCCCCC;
text-shadow: 0 -2 2px #999;
}
#BDRS-widget .social-bookmarks {
padding: 0 0 0 10px;
margin-top:-25px;
list-style-type: none;
}
#BDRS-widget .section-title .social-bookmarks {
float: right;
}
#BDRS-widget .social-bookmarks li, .widget .social-bookmarks li, #footer .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;
}
#BDRS-widget .social-bookmarks li a {
-moz-transition: all 0.3s ease 0s;
display: block;
float: left;
height: 100%;
margin: 0;
padding: 0;
width: 40px;
height: 40px;
text-indent: -9999px;
}
#BDRS-widget .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;
}
#BDRS-widget .social-bookmarks li.digg a:hover {
background-color: #2882c6;
}

#BDRS-widget .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;
}
#BDRS-widget .social-bookmarks li.facebook a:hover {
background-color: #3b5998;
}

#BDRS-widget .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;
}
#BDRS-widget .social-bookmarks li.googleplus a:hover {
background-color: #d94a39;
}

#BDRS-widget .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;
}
#BDRS-widget .social-bookmarks li.reddit a:hover {
background-color: #bfd0e2;
}
#BDRS-widget .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;
}
#BDRS-widget .social-bookmarks li.rss a:hover {
background-color: #fe9900;
}
#BDRS-widget .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;
}
#BDRS-widget .social-bookmarks li.twitter a:hover {
background-color: #48c4d2;
}
#BDRS-widget .social-bookmarks li a:hover {
background-position: 0 -40px;
}
#BDRS-widget input.BDmail {
border: 1px solid;
color: #666666;
padding: 5px;
width: 150px;
border-radius: 3px 0 0 3px;
font-size: 13px;
border-color: #990000;
padding:5px
}
#BDRS-widget input.BDmail:hover {
box-shadow:0 0 2px #FF0000;
}
#BDRS-widget .BD_tumb {
border: 0px solid #dedede;
background-color: #990000;
border-radius:0 5px 5px 0;
color: #FFFFFF;padding:5px;
box-shadow:0 0 3px 1px #000 inset;
}
#BDRS-widget .BD_tumb:hover { background-color: #CC0000; cursor: inherit;box-shadow:0 0 3px #000 inset;}



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 id="BDRS-widget"> <div style="margin:13px 0 -10px 5px; font-family:verdana; font-size:10px; font-weight:bold; text-shadow: -1px -1px 1px #fff; color:#000">Share : </div><div class="social-bookmarks"><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://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 Reddit">reddit</a></li>
<li class="rss"><a target="_blank" href="URL RSS ANDA " title="rss">rss</a></li>
</ul></div>
<div style="text-align:right; margin-top:-35px;margin-right:5px;"><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onSubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri= ID FEEDBUENER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class="BDmail" name="email" placeholder="Enter email here.." type="text" /><input class="BD_tumb" value="Subscribe" type="submit" /><input name="uri" value=" ID FEEDBUENER" type="hidden" /><input name="loc" value="en_US" type="hidden" /></form></div></div>
<!-- Rivai Silaban | BLOG DESIGN CODE SHARE End -->



Kesimpulan

Widget share dengan efect sliding menjai suatu tampilan yang menarik untuk widget share ini. Lihat kode HTML warna merah, ganti dengan link anda sesuai dengan yang tertulis..

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 share for Blogspot
Sabtu, 19 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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 12:38 PM

17 comments :

  1. Replies
    1. heheh bentar ya habis salah ketik tadi linknya yang sabar..
      btw kirain ngak perlu sob kwkwkwk :)

      Delete
  2. Maaf sob sy cuma mau tanya ada gak widget vote kayak dapat bintang berapa gitu...?
    Terimakasih

    ReplyDelete
    Replies
    1. silahkan sob, untuk wiget vote saya belum buat tapi wiget dengan permintaan anda itu gampang dicari sebab widget devault blogspot sudah memberikan fasilitas tersebut silahkan ilihat lihat..
      thx atas kunjungannya salam kenal dan saya coma mau jawab juga hehehheeh :)

      Delete
  3. Maaf sob saya cuma tanya aja nih sob, gimana ea sob widget yg bisa org vote dan kita dpt bintang brp gtu...? Ada g widget kayak gitu

    ReplyDelete
    Replies
    1. saya rasa jawabannya sudah diatas sob ngak perlu lagi dijawab balikkan ? heheheh :)

      Delete
  4. mas rivai cara bikin footer sepeti punya mas gimana ya mas..

    ReplyDelete
    Replies
    1. wah untuk pertanyaan ini saya belum bisa menjawab sob, sebab dari hasil yang telah saya test ternyata masih belum dapat diposting sebab tidak semua blog dapat menerapkannya, jadi sedikit rumit untuk menjelaskannya, dan kami masih mencoba untuk membuat solusinya..

      heheeh coba dilihat di blog tetangga banyak kok artikel tentang ini, dan saran saya sedikit sob, artikel yang diatas widget share bukan footer jadi kurang etis kita ngomongin itu disini nanti pembaca artikel ini marah ma kita kwkwkwk :

      Delete
    2. hahaha maaf mas dihapus saja deh .. komentarnya .. jadi gak enak habis punya mas .. ini gak ada fungsi pencariannya saya jadi bingung nyari kemana .. :D

      Delete
    3. heheeh udah ngak apa2 ntar kita permisi aja pada para pembaca kita ini hanya numpang ngobrol disini heheheh :)

      Btw Anw, soal search artikelnya, memang mau tak pasang kemarin tapi saya masih memikirkan tempatnya dimana biar blog ini keren dikit, yah coba coba buat blog keren sob hehehehhe

      Delete
    4. biar keren mas .. pasang di bawah header tuh bisa atau difooter di bawah Subscribe atau di pojok kiri profil blog mas..

      Delete
    5. thx atas himbauannya akan kami pikirkan sob..

      Delete
    6. oke sobb sama-sama demi kenyamanan bersama juga ..

      Delete
  5. sipppppp..

    http://moeclazh.blogspot.com/

    ReplyDelete
    Replies
    1. makasih atas pendapatnya sob,, salam kenal dari saya..
      thx atas kunjungannya...

      Delete
  6. good gan
    menarik ,, salam kenal

    ReplyDelete

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