Cara Membuat Tombol Share Ringan dan Responsive di Blog


Halo semua, kali ini saya akan membagikan bagaimana cara membuat tombol share yang ringan dan responsive pada tampilan mobile. Setelah beberapa hari saya tidak punya ide untuk membuat artikel karena malas dalam hal menulis namun saya paling suka dalam membuat css atapun edit-edit css pada blog saya. Maka dari itu daripada saya diam saya membuat tombol share untuk blog yang ringan untuk digunakan pada blog Anda.

Tombol share sangat memudahkan bagi pengunjung yang ingin membagikan artikel pada blog Anda ke sosial medianya dan itupun sangat menguntungkan bagi Anda dan blog Anda karena dengan artikel dibagikan oleh pengunjung maka sangat memungkinkan artikel dibaca oleh banyak orang atau teman dari orang yang membagikan artikel tersebut.

Membuat Tombol Share Ringan dan Responsive di Blog

Tombol share yang saya bagikan ini real buatan saya sendiri dari nol, maka dari itu apabila Anda ingin membagikannya kembali pada blog Anda diharap mencantumkan link ke artikel ini untuk menghargai karya saya ini karena menghargai karya orang lain itu lebih baik daripada plagiat-plagiat diluaran sana.

Cara Membuat Tombol Share Ringan dan Responsive di Blog

Dalam tombol share yang ini terdapat empat sosial media antara lain facebook, google plus, linkedin dan twitter. Dengan menggunakan icon font awesome yang biasanya digunakan pada template-template sekarang ini yang membuat menjadi ringan karena sinkron menggunakan stylesheet css font awesome. Apabila template blog Anda belum terdapat maka masuk ke "Template" > "Edit HTML" dan masukan link stylesheet berikut dibawah kode <head>.

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Namun ingat pastikan css diatas dengan versi 4.5 atau lebih seperti 4.7 untuk versi sekarang ini. Setelah terdapat link stylesheet font awesome maka lakukan penjelasan berikut. Sebelumnya untuk demo anda bisa lihat pada syntax demo dibawah ini dan Anda bisa mencoba untuk menkliknya.


Bagikan ke orang lain!!

  1. Masih pada Edit HTML, pertama tekan keyboard "Ctrl+F" dan cari kode script seperti berikut.
  2. <data:post.body/>
  3. Ada beberapa kode tersebut pada html template, simpan kode HTML berikut dibawah kode script point 1 pada akhirannya. Cobalah dibeberapa kode sampai tombol share benar-benar dibawah postingan blog.

  4. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='bg-teks'>Bagikan ke orang lain!!</div>
    <div class='tombol-berbagi'>
    <a class='berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
    <i class="fa fa-google-plus" aria-hidden="true"></i> Google
    </a>
    <a class='berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='blank'>
    <i class="fa fa-facebook" aria-hidden="true"></i> Facebook
    </a>
    <a class='berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='blank'>
    <i class="fa fa-twitter" aria-hidden="true"></i> Twitter
    </a>
    <a class='berbagi-in' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='blank'>
    <i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin
    </a>
    </div>
    </b:if>

    Baca juga "Cara Mudah Membuat Daftar Isi Otomatis Super Filter di Blog"

  5. Setelah itu jangan lupa untuk memasukan kode CSS untuk tampilan tombol share. Cari terlebih dahulu kode ]]></b:skin> kemudian salin dan simpan kode css berikut tepat diatasnya.

  6.  /*--Tombol Share Bloggars.com Design--*/
    .tombol-berbagi {border-top: 2px solid;padding: 5px 10px 10px 5px;width: 100%;}
    .tombol-berbagi a {color:#FFF;}
    .tombol-berbagi a i {border-right: 1px solid;padding-right: 5px;}
    .bg-teks {font-size: 16px;margin: 5px;text-align: left;font-weight: bold;}
    .berbagi-gp, .berbagi-fb, .berbagi-tw, .berbagi-in {color: #fff;display: inline-block;font-size: 13px;line-height: 100%;margin: 7px;border-radius: 5px;margin: 2px;padding: 7px;text-align: center;}
    .berbagi-gp {background: #dc4e41;}
    .berbagi-fb {background:#3d5b99;}
    .berbagi-tw {background:#1da1f2;}
    .berbagi-in {background:#0077b5;}
    @media only screen and (max-width:480px){
    .berbagi-gp, .berbagi-fb, .berbagi-tw, .berbagi-in {width: 100px;}}

  7. Setelah semua kode script maupun css yang saya berikan sudah dipasang pada template blog maka klik "Simpan template" dan lihat hasilnya pada postingan blog Anda.
Baca juga "Cara Memasang Back To Top pada HTML Blog"

Apabila tidak terdapat tombol share maka biasanya kesalah pada point ke-2 yaitu penyimpanan kode html pada <data:post.body/> tidak tepat, cari kembali kode point ke-1 dan simpan kembali kode html pada point ke-2 dan coba satu persatu sampai berhasil dipasang tombol share ringan dan responsive yang saya berikan pada artikel ini.

Begitulah artikel kali ini yang menjelaskan "Cara Membuat Tombol Share Ringan dan Responsive di Blog", apabila masih ada yang ingin ditanyakan silakan tanyakan pada kolom komentar atau bisa hubungi saya secara pribadi di sosial media saya, terima kasih.

Related Posts:

9 comments:

Beri komentar dengan menggunakan Bahasa yang Baik dan Sopan!
Didalam komentar dilarang mencantumkan link hidup dan apabila Anda melakukannya maka Admin berhak menghapusnya.

Powered by Blogger.