Home css html Cara Membuat Tombol Share Artikel Keren DiBlogger | nafasmedia

Cara Membuat Tombol Share Artikel Keren DiBlogger | nafasmedia

Cara Membuat Tombol Share Artikel Keren DiBlogger | nafasmedia

nafasmedia | halo semua apa kabar? mari kita lanjutkan seri mempercantik blog. dan maaf bila seri ini saya tunda dengan postingan saya yang Cara mendapatkan dollar, Sekarang saya akan memberikan tutorial Cara membuat tombol share keren untuk dipasang di bogger. yup tombol ini sangat berguna dibandingkan dengan tombol download yang sudah saya share kemarin. karena dengan tombol share ini disuatu saat seseorang mengunjungi blog anda dan melihat tombol share tersebut lalu dia merasa kalau konten anda bagus maka dia akan menyebarkan blog anda ke media sosialnya dan blog anda pun akan ramai dengan pengunjung.

Namun jika tombol share diblog kalian terlihat jelek atau usang emang ada yang mau share? ada sih tapi dengan tombol share yang bagus mereka akan tertarik. contohnya barang yang ada ditoko kalau terlihat jelek kan ngga ada yang mau beli, ya kan? kalau  kalian penasaran bagaimana bentuk dari tombol share yang akan kita buat kalian bisa melihat nya di Codepen atau kalian tekan saja tombol demo dibawah.

Bagaimana tertarik untuk membuatnya? jika ia silahkan ikuti semua arahaan saya dibawah ya. eitt tapi sebelum itu kalian perlu untuk menghapus tombol share bawaan blog kalian. biasanya kode tersebut berada di bawah atau didekat kode </article> tapi tidak semua template blog itu sama, jika kalian kesusahan untuk mencari kode tersebut, kalian bisa mencari dengan kata kunci dari tombol share kalian itu.  misalnya ada tulisan "bagikan ini" maka coba kalian cari di template kalian, ada tidak tulisan tersebut. jika ada berarti tempatnya ada disitu.

Jika tidak coba cari url share nya. misalnya tombol share tersebut adalah tombol share menuju facebook, maka cari lah url ini.
https://web.facebook.com/sharer.php?u=
jika ketemu berarti disitulah tempat tombol share kalian. dan jika sudah ketemu silahkan hapus kode pembuka sampai penutupnya. kalau sudah semua langsung saja kita terapkan tombol share yang akan kita buat ini.

TUTORIALNYA:

Hal pertama yang harus kalian lakikan adalah masuk ke akun blogger kalian masing masing, lalu masuk ke Template lalu edit html. Karena tombol share ini menggunakan font awesome jadi silahkan pasang terlebih dahulu font awesomenya caranya copy link dibawah dan letakkan dibawah atau sesudah kode <head>.
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/>

Lalu copy semua kode css dibawah ini dan letakkan diatas atau sesudah kode </style> atau ]]><b:skin>.
.share-post{text-align:left;border-top:1px solid #eee;margin-bottom:40px;margin-top:15px;padding:14px 0}
.share-post ul{padding:0;margin:10px auto;width:300px;max-width:100%}
.share-post li{float:left;margin:0;padding:0;list-style:none;position:relative}
.share-post li a{padding:5px;margin-right:4px;border-radius:5px;width:42px;text-align:center;color:#fff;display:block;font-size:13px;transition:all .6s ease-out}
.share-post li a:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2)}
.share-post li .twitter{background-color:#1da1f2}.share-post li .facebook{background-color:#4867aa}.share-post li .xmail{background-color:#650582}.share-post li .pinterest{background-color:#c82828}.share-post li .wa{background:#0dc143}.share-post li .tumblr{background-color:rgba(48,78,108,0.98)}.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .xmail:hover,.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff}.share-post li:last-child{margin-right:0}.share-post li .fa:before{top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;font-size:17px;transition:all .6s ease-out}.share-post li .fa{display:initial}
enter}}@media screen and (max-width:320px){.spanshare,#emotext,.comments-publish,.tumblr,.idb-pager{display:none!important};text-align:center;margin:25px auto}.spanshare{text-align:center;font-size:16px;text-transform:uppercase;font-weight:500}

Lalu copy semua kode html dibawah ini dan letakkan dibawah kode </article> ini akan menempatkan tombol share tepat dibawah artikel blog kalian. atau letakkan dibekas kode tombol share bawaan blog kalian. 

<div class='spanshare'>Share This :</div>
<div class='share-post'><ul><li><a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share To Facebook'><i class='fa fa-facebook'/></a></li></i><li><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share To Twitter'><i class='fa fa-twitter'/></a></li></i><li><a class='xmail' expr:href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=email&quot;' rel='nofollow' target='_blank' title='Share To Email'><i class='fa fa-envelope'/></a></li></i><li><a class='wa' expr:href='&quot;https://api.whatsapp.com/send?text=Check This Article! : &quot; + data:post.url' target='_blank' title='Share To Whatsapp'><i aria-hidden='true' class='fa fa-whatsapp'/></a></li></i>
<li><a class='pinterest' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' rel='nofollow' target='_blank' title='Share To Pinterest'><i class='fa fa-pinterest'/></a></li></i>
</ul></div>

Jangan lupa simpan template dan lihat hasilnya. Ada yang error? mungkin ada kode bawaan yang belum dihapus dengan benar. coba cek lagi, harus teliti lho ya! karena tombol share bawaan itu terletak berdekatan dengan kode inti sebuah template, jadi kalau salah hapus template kalian mungkin akan rusak tampilannya.

PENUTUP:

Itu dia cara membuat tombol share agar blog/website kalian tampil lebih kece. jika ada yang error atau kesusahan tanyakan saja di kolom komentar. Mungkin itu saja yang bisa saya sampaikan terimakasih sudah berkunjung, sampai jumpa di next artikel.
More From Author