» » » Baca ya : Cara Membuat Tombol Share Ringan dan Responsive di Blog

Baca ya : Cara Membuat Tombol Share Ringan dan Responsive di Blog

, Edit
Halo semua, kali ini saya akan membagikan bagaimana cara menciptakan tombol share yang ringan dan responsive pada tampilan mobile. Setelah beberapa hari saya tidak punya inspirasi untuk menciptakan artikel alasannya yakni malas dalam hal menulis namun saya paling suka dalam menciptakan css atapun edit-edit css pada blog saya. Maka dari itu daripada saya membisu saya menciptakan tombol share untuk blog yang ringan untuk dipakai 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 alasannya yakni 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 alasannya yakni menghargai karya orang lain itu lebih baik daripada plagiat-plagiat diluaran sana.

kali ini saya akan membagikan bagaimana Baca ya : 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 memakai icon font awesome yang biasanya dipakai pada template-template kini ini yang menciptakan menjadi ringan alasannya yakni sinkron memakai stylesheet css font awesome. Apabila template blog Anda belum terdapat maka masuk ke "Template" > "Edit HTML" dan masukan link stylesheet berikut dibawah isyarat <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 menyerupai 4.7 untuk versi kini ini. Setelah terdapat link stylesheet font awesome maka lakukan klarifikasi berikut. Sebelumnya untuk demo anda sanggup lihat pada syntax demo dibawah ini dan Anda sanggup mencoba untuk menkliknya.


Bagikan ke orang lain!!
Google Facebook Twitter Linkedin

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

    3. <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 Praktis Membuat Daftar Isi Otomatis Super Filter di Blog"

  3. Setelah itu jangan lupa untuk memasukan isyarat CSS untuk tampilan tombol share. Cari terlebih dahulu isyarat ]]></b:skin> lalu salin dan simpan isyarat css berikut sempurna diatasnya.

    4.  /*--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;}}

  4. Setelah semua isyarat script maupun css yang saya berikan sudah dipasang pada template blog maka klik "Simpan template" dan lihat akhirnya 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 isyarat html pada <data:post.body/> tidak tepat, cari kembali isyarat point ke-1 dan simpan kembali isyarat html pada point ke-2 dan coba satu persatu hingga 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 sanggup hubungi saya secara langsung di sosial media saya, terima kasih.
Sumber http://www.bloggars.com/

Subscribe to receive free email updates:

0 Response to "Baca ya : Cara Membuat Tombol Share Ringan dan Responsive di Blog"

Post a Comment

Subscribe to: Post Comments (Atom)