Pada postingan sebelum saya pernah bahas tentang Cara Memasang Tombol Share Whatsapp With Thumbnail. Dan untuk postingan kali ini saya akan membuatkan Cara menciptakan tombol social share serta tombol whatsapp di blog. Tombol social yang saya akan bahas kali ini sangat cocok buat kalian yang template nya sama sekali tidak ada tombol share social nya. Tapi enggak mungkin juga sih kalo template kalian sama sekali tidak ada tombol share nya. Tapi jika kalian ingin mencoba nya tidak ada salah nya untuk menggantikan tombol share yang sudah kalian punya dengan tombol share yang saya akan bagikan kali ini.
Kelebihan dari tombol share social ini bagi saya cukup simple dan tidak berat ketika jika mana ada pengunjung yang singgah di artikel blog kalian. Apalagi buat kalian yang aktif di dunia maya yang selalu share di media social ibarat Fb, twitter, google+ bahkan hingga di grup whatsapp sekalipun. Untuk pola ibarat apa sih tampilan nya,, kalian sanggup lihat di tombol share social yang saya miliki di atas postingan. Bagamana berdasarkan kalian? Lumayan lah yaa,, hahaha... :D
Ok jika kalian ingin juga memasang nya di template kalian silahkan simak baik" tutorial yang saya bagikan kali ini.
Cara menciptakan tombol social share serta tombol whatsapp di blog
1. Silahkan kalian copy code di bawah ini sempurna di bab atas code ]]></b:skin> atau </style>
/* Social Sharing Widget */ .share-box { position: relative; margin: 10px 0 0; border-top: 1px solid #ddd; padding-top: 10px; } .share-title { color: #010101; display: inline-block; box-shadow: inset 0 -7px 0 rgba(2, 171, 104, 0.16); font-size: 15px; font-weight: 500; position: relative; } .share-art { float: right; padding: 0; padding-top: 0; font-size: 13px; font-weight: 400; text-transform: capitalize; } .share-art a { color: #fff; padding: 3px 8px; margin-left: 4px; border-radius: 2px; display: inline-block; margin-right: 0; background: #010101; } .share-art a span { display: none; } .item .share-art a span { display: inline-block; margin-left: 5px; } .share-art a:hover{color:#fff} .share-art .fac-art{background:#3b5998} .share-art .fac-art:hover{background:rgba(49,77,145,0.7)} .share-art .twi-art{background:#00acee} .share-art .twi-art:hover{background:rgba(7,190,237,0.7)} .share-art .goo-art{background:#db4a39} .share-art .goo-art:hover{background:rgba(221,75,56,0.7)} .share-art .pin-art{background:#CA2127} .share-art .pin-art:hover{background:rgba(202,33,39,0.7)} .share-art .lin-art{background:#0077B5} .share-art .lin-art:hover{background:rgba(0,119,181,0.7)} .share-art .wat-art{background:#25d266;display:none;} .share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)} @media only screen and (max-width: 768px) { .share-art .wat-art{display:inline-block;} .item .share-art a span {display:none;}} Dan silahkan tambahkan code css untuk media screen mobile di bawah ini dan letakan di bawah nya code css yang di atas tadi.
@media only screen and (max-width:480px){ .share-box {text-align: center;} .share-title {display: none;} .share-art {float: none;}} 2. Dan untuk code pemanggilnya silahkan kalian copy code di bawah ini dan paste di bab yang yang kalian ingin kan. Seperti pola jika mana kalian ingin memasang nya di bawah judul artikel kalian sanggup taro code tersebut di atas code <data:post.body/> dan jika kalian ingin memasang nya di bawah artikel kalian sanggup letakan code nya di bawah code <data:post.body/>
<div class='share-box'> <h8 class='share-title'>Share This:</h8> <div class='share-art'> <a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a> <a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a> <a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a> <a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a> <a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a> <whatsapp expr:href='data:post.url' expr:text='data:post.title'/> <a class='wat-art' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a> </div> </div> <div style='clear:both'/> Perlu di perhatikan pada code <data:post.body/> kemungkinan ada code yang sama di template kalian. Kaprikornus kalian sanggup coba satu persatu yang berdasarkan kalian posisi nya sempurna pada bab yang kalian ingin kan. Atau kalian sanggup ganti code tombol share yang sudah ada di template kalian dengan code yang kini ini.
Bila ukuran share social na tidak pas sesuai sama template kalian, kalian cukup edit code css nya saja. Mungkin itu saja yang sanggup saya bagikan di tutorial kali ini, biar artikel ini sanggup bermanfaat buat sahabat yang sedang mencari Cara menciptakan tombol social share serta tombol whatsapp di blog. Selamat mencoba!
