Cara Menciptakan Tombol Share Ringan Dan Responsive Di Blog
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 wangsit untuk menciptakan artikel alasannya yaitu 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 yaitu dengan artikel dibagikan oleh pengunjung maka sangat memungkinkan artikel dibaca oleh banyak orang atau teman dari orang yang membagikan artikel tersebut.
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 yaitu sinkron memakai stylesheet css font awesome. Apabila template blog Anda belum terdapat maka masuk ke "Template" > "Edit HTML" dan masukan link stylesheet berikut dibawah instruksi <head>.
Apabila tidak terdapat tombol share maka biasanya kesalah pada point ke-2 yaitu penyimpanan instruksi html pada <data:post.body/> tidak tepat, cari kembali instruksi point ke-1 dan simpan kembali instruksi 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/
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 yaitu 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 yaitu menghargai karya orang lain itu lebih baik daripada plagiat-plagiat diluaran sana.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.<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
- Masih pada Edit HTML, pertama tekan keyboard "Ctrl+F" dan cari instruksi script menyerupai berikut.
- Ada beberapa instruksi tersebut pada html template, simpan instruksi HTML berikut dibawah instruksi script point 1 pada akhirannya. Cobalah dibeberapa instruksi hingga tombol share benar-benar dibawah postingan blog.
- Setelah itu jangan lupa untuk memasukan instruksi CSS untuk tampilan tombol share. Cari terlebih dahulu instruksi ]]></b:skin> lalu salin dan simpan instruksi css berikut sempurna diatasnya.
- Setelah semua instruksi script maupun css yang saya berikan sudah dipasang pada template blog maka klik "Simpan template" dan lihat jadinya pada postingan blog Anda.
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='bg-teks'>Bagikan ke orang lain!!</div>
<div class='tombol-berbagi'>
<a class='berbagi-gp' expr:href='"https://plus.google.com/share?url=" + 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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='blank'>
<i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin
</a>
</div>
</b:if>
<div class='bg-teks'>Bagikan ke orang lain!!</div>
<div class='tombol-berbagi'>
<a class='berbagi-gp' expr:href='"https://plus.google.com/share?url=" + 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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='blank'>
<i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin
</a>
</div>
</b:if>
/*--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;}}
.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;}}
Baca juga "Cara Memasang Back To Top pada HTML Blog"
Apabila tidak terdapat tombol share maka biasanya kesalah pada point ke-2 yaitu penyimpanan instruksi html pada <data:post.body/> tidak tepat, cari kembali instruksi point ke-1 dan simpan kembali instruksi 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/