» » » Cara Membuat Tombol Share Responsive Keren dan Lengkap Seperti Arlina Design

Cara Membuat Tombol Share Responsive Keren dan Lengkap Seperti Arlina Design

,
Cara Membuat Tombol Share Responsive Keren dan Lengkap Seperti Arlina Design
Cara Membuat Tombol Share Responsive Keren dan Lengkap Seperti Arlina Design


Cara Membuat Tombol Share Responsive Keren dan Lengkap - Halo sobat blogger, Hayoo siapa dari kalian yang gak tau tentang blog yang terkenal ini ? Semua blogger menurut saya pasti sangat mengenalinya karena blog ini merupakan situs yang memiliki konten yang berkualitas dan banyak manfaatnya bagi blogger awam maupun blogger pro. Situ ini menyediakan template blog yang dapat kita download secara gratis dan ada juga yang berbayar, Selain itu juga menyediakan tutorial blogger, saya sendiri banyak belajar dari sini, karena menurut saya blog ini slalu membawa saya untuk berkreatif.
Nah dan Uniknya lagi yang membuat saya sangat senang ketika melihat tampilannya adalah tentang tombol sosmed yang sangat responsive dan bagus saat kita pandang, Nah pada artikel yang bakal saya bawakan pada artikel ini adalah mengenai cara untuk membuat tombol share yang sangat mirip dengan milik arlina design.

Seperti yang kita ketahui sendiri tombol sosmed ini sangat penting bagi setiap template blog, Karena tanpa tombol share tersebut terasa template kita seperti halnya kita berada di hutan dan ingin berteriak minta tolong sulit karena terganggu dengan tidak adanya sinyal proveder. Maka dari itu tombol share ini sangat wajib dan di haruskan untuk semua blogger supaya pembaca kita lebih mudah saat ingin membagikan artikel yang kita buat. Ok, Sesuai dengan judul diatas agar saya tidak terlalu basi - basi , Yuuk kita simak tutorialnya.

Tahap Pembuatan :

1. Masuk Blogger
2. Template > Edit HTML
3. Copy-kan kode dibawah ini dan tempelkan tepat di atas ]]></b:skin>


/* CSS Share Button */
#dsop_gratishare{margin:20px auto;padding:0}
.showother{display:none}
.dsop_gratishare{position:relative;margin:0;padding:0;display:block;overflow:hidden}
.dsop_gratishare ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px}
.dsop_gratishare ul li{float:left;display:inline-block;overflow:hidden}
.dsop_gratishare li a,.shareplus{color:#fff;padding:0;width:40px;display:block;text-align:center;height:35px;line-height:35px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;letter-spacing:1px;border-radius:4px;overflow:hidden}
.dsop_gratishare ul li span{padding:0;margin:0}
.dsop_gratishare i{font-size:16px;padding:0;margin:0;line-height:35px;text-align:center}
.shareplus{padding:0;background:#bdc3c7;cursor:pointer}
.dsop_gratishare li a.fb i,.share_btn li a.tw i{width:20px;text-align:left}
.dsop_gratishare a:hover{background:#333;color:#fff}
.dsop_gratishare li a.fb{background:#4867aa;padding:0 35px;width:auto}
.dsop_gratishare li a.tw{background:#1da1f2;padding:0 35px;width:auto}
.dsop_gratishare li a.gp{background:#dc4a38}
.dsop_gratishare li a.pt{background:#ca2128}
.dsop_gratishare li a.le{background:#0673ab}
.dsop_gratishare li a.tr{background:#43556e}
.dsop_gratisharen li a.em{background:#141b23}
.dsop_gratishare li a.ln{background:#00c300}
.dsop_gratishare li a.bm{background:#000}
.dsop_gratishare li a.wa{background:#4dc247}
.dsop_gratishare li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%)}
4. Selanjutnya anda cari lagi kode <b:includable id='status-message'>....</b:includable> dan Copykan kode dibawah ini tepat diatasnya.

 

<b:includable id='sharethis' var='post'>
<div class='dsop_gratishare'><ul>
<li><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=626,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/> <span class='hidetitle'>Share</span></a></li>
<li><a class='tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> <span class='hidetitle'>Share</span></a></li>
<li><a class='gp' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'/></a></li>
<li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-plus'/></span></div></li></ul>
<ul class='showother' id='showother'>
<li><a class='pt' expr:href='&quot;http://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;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' target='_blank'><i class='fa fa-pinterest'/></a></li>
<li><a class='le' 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' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on LinkEdin'><i aria-hidden='true' class='fa fa-linkedin'/></a></li>
<li><a class='tr' href='http://www.tumblr.com/share' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li>
<li><a class='ln' expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target='_blank' title='Share On Line'>
  <svg class='icon icons8-LINE' viewBox='0 0 48 48'>
    <path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23      C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
    <path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637      c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185      c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001      C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687      C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652      c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688      c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035      c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z      M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917      c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603      c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604      c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/>
  </svg>
  </a></li>
<li><whatsapp expr:href='data:post.url' expr:text='data:post.title'/><a class='wa' data-action='share/whatsapp/share' href='dsopgratis'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:24px!important'/></a></li>
<li><a class='em' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=email&quot;' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and data:blog.pageType == &quot;item&quot;'>
<li><a class='bm' expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title' target='_blank' title='Share On BBM'>
  <svg class='icon BlackBerry-Icon' viewBox='-350 0 5950 8390'>
    <rect height='5600' rx='600' ry='600' style='fill: black;width:40px;overflow:hidden' width='6500'/>
    <g>
      <path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/>
      <path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/>
      <path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
      <path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/>
      <path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
      <path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/>
    </g>
  </svg>
  </a></li>
  </b:if>
<li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-minus'/></span></div></li>
  </ul>
  </div>
</b:includable>
5. Masih di tahap edit HTML, Selanjutnya silakan anda cari kode <data:post.body/> , kode ini biasa terdapat lebih dari 1 , Lalu anda Copy kode dibawah ini, pastikan anda menyimpannya tempat diatasnya kode <data:post.body/>.

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-wrapper' id='dsop_gratishare'>
<b:include data='post' name='sharethis'/>
  </div>
</b:if>
6. Save dan lihat hasilnya.
Bagaimana mudah kan untuk membuat tombol share seperti arlina ? Mungkin hanya inilah yang dapat saya share di artikel ini, Jika anda ingin menyampaikan sesuatu di artikel ini, Silakan share komentar anda di kolom komentar, Terimah kasih atas kesetiaan anda untuk slalu mengunjung blog kecil saya, Semoga isi artikel yang saya tulis bisa slalu bermanfaat untuk anda. " Salam sukses "
Source Code : https://www.bungfrangki.com/2017/07/ share-button-responsive-dilengkapi-whatsapp-line-bbm.html
Share:
Facebook
Twitter
Google+
LinkedIn

No comments:

Post a Comment

Terimah kasih atas kunjungan anda di blog ini, Smoga isi dari blog ini bisa membantu anda.

" SALAM SUKSES"

Subscribe to: Post Comments (Atom)