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

Friday, October 4, 2013

widget share hover sliding up

Widget share dengan sistem hover sliding up dapat anda pasang di halaman blog anda, cara membuat widget share hover sliding up ini sangat praktis tidak terlalu menguras pikiran sebab saya akan memberikan penjelasan tentang pemasangannya secara detail buat anda. Postingan kali ini terinspirasi oleh seorang teman lama yang ingin memiliki widget share yang tampilannya menarik, sehingga saya membuatkan kode widget ini. Setelah beliau sudah mendapatkan kodenya sehingga saya memposting artikel ini buat para teman teman yang membutuhkan. Untuk mengetahui cara pemasangannya pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini, jangan lupa klik DEMO untuk melihat tampilan aslinya dan gambar yang berada dibawah ini merupakan screenshot widget share hover sliding up yang akan kita buat, oke langsung saja menuju TKP :

Demo


Referensi Artikel


  • 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
By : Rivai Silaban | Blog Design
Update : Jumat, 04 September 2013
******************************************/
#bdrshor {
list-style:none;
padding:0;
margin:0;
float: right;
background-color: #FFFFFF;
}
#bdrshor li {
float:left;
padding:3px;
}
#bdrshor a {
display:block;
height: 25px;
text-indent:-999em;
}
#bdrshor a.GPLUS {
width:150px;
background:url('http://1.bp.blogspot.com/-iXF0yYIthyE/Uk2Rw7DWnwI/AAAAAAAAB40/hkBUx1s1-ng/s1600/GOOGLE-PLUS.png') no-repeat 0 0;
}
#bdrshor a.FACEBOOK {
width:150px;
background:url('http://1.bp.blogspot.com/-ThDO1gPUi9Y/Uk2RxTPI6hI/AAAAAAAAB44/OhOpU1TLvvA/s1600/FACEBOOK.png') no-repeat 0 0;
}
#bdrshor a.TWITTER {
width:150px;
background:url('http://4.bp.blogspot.com/-PwtQBWEzXfs/Uk2RyGhjoaI/AAAAAAAAB5E/an1bsyrx_RU/s1600/TWITTER.png') no-repeat 0 0;
}
.textq {
color: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
}


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" src="http://yourjavascript.com/33130177210/jquery-flip.js"></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 style="width:600px; height:50px; background-color:#FFFFFF; padding:10px;"><div style="width:570px; height:auto;border:solid #999 2px;padding:5px;">
<span class="textq">Share this :</span>
<ul id="bdrshor">
<li><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Gplus' class="GPLUS"></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='facebook' class="FACEBOOK"></a></li>
<li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='twitter' class="TWITTER"></a></li>
</ul></div>
</div>
<!-- Rivai Silaban | BLOG DESIGN CODE SHARE End -->



Kesimpulan

Widget share hover sliding up ini memiliki tampilan yang menarik, dan valid HTML 5 dan CSS 3 serta koe 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 share hover sliding up
Jumat, 05 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 : Rivai Silaban Update pada : 10:11 PM

8 comments :

  1. Keren,, Mantep Share Hover Sliding Up Nya Bang.. :)

    ReplyDelete
  2. boxkesimpulan bagaimana membuatnya ???

    ReplyDelete
    Replies
    1. thx atas kunjungannya...
      saya kurang memahami pertanyaannya..
      khusus reques code, kami hanya menjawab untuk join partner blog ini. silahkan join tu blog untuk mempererat hubungan antar sesama partner...

      coba dicari diblog sebelah sob.. mungkin banyak tentang artikel tersebut..

      Delete
    2. Hahaa..
      Sama Lah Bang,, Saya Juga Bingung Melihat Comment Yang Di Tinggalkannya..

      Delete
    3. :)
      sohib kita itu kurang menjelaskan pertanyaan yang dipertanyakan sehingga saya bingung, box kesimpulan gimana yah,, itu yang selalu saya pikirkan, apa seperti pada postingan saya atau gimana.

      lagian seikit kurang enak jawabnya, nanyaknya ma siapa saya juga bingung, ntah bilang salam ke..., mohon bantuan ke.. hehheeh

      thx atas pendapatnya sob Dzhüll Khärnn

      Delete
    4. Hehehee..
      Iya Bang Sama-Sama Bang..

      Sebenarnya Pas Waktu Saya Ngeliat Pertanyaan Yang Di Ajukannya,, Ingin Rasanya Saya Menjawab,, Tapi Saya Mikir..

      Mungkinkah Ini Pertanyaan Pada Post Yang Lain Atau Gimana Ni.. Ya Udah Deh,, Saya Biarkan Aja.. Hehee..

      Slamat Malam Bang.. Dan Salam Sejahtera..

      Delete

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