VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara Membuat Widget Share Button Mirip El Creative

Kurniawan
Kurniawan
Update:
... menit baca
Dengarkan

Serieswans.com - Halo sobat blogger, pada kesempatan kali ini saya akan membahas mengenai cara membuat widget share button mirip seperti punya el creative. seperti yang sudah saya jelaskan sebelumnya di artikel cara membuat tombol share sticky tombol share ini sangatlah begitu penting di pasang di halaman situs website atau blog anda.

karena hal ini menjadi bagian dari kepopuleran blog anda, sebab semakin banyak pengunjung yang membagikan artikel kita baik itu sosial media, maka semakin banyak juga traffic yang di dapatkan dari hasil membagikan artikel tersebut. 


Cara Membuat Widget Share Button Mirip El Creative
Widget Share Button Mirip ElCreative

Ada banyak sekali platform sosial media yang dapat kita gunakan untuk mempromosikan postingan atau artikel kita, contohnya platform berskala besar seperti Facebook, Twitter, Linkedin, Reddit, Instagram, Pinterest, Whatsapp, Gmail. 

Oke tidak usah basa basi lagi, kita langsung saja ke tutorial cara membuat widget share button mirip el creative.

Cara Membuat Widget Share Button Mirip El Creative

  • Masuk terlebih dahulu ke blogger
  • Setelah masuk ke Dashboard,pilih menu Tema => Edit HTML
  • Selanjutnya copy kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> atau </style> 
.menu-share-container {
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 0;
    margin: 0;
    border-top: 0.0625rem solid #dadce0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
ul.menu-share-links {
    position: relative;
}
.menu-share-links li {
    float: left;
    overflow: hidden;
    margin: 5px 5px 0 0;
    border-radius: 100px;
}
.menu-share-links li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 34px;
    height: 34px;
    line-height: 34px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0.0625rem solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.menu-share-links svg {
    width: 32px;
    fill: currentColor;
}
.index .menu-share-links li a {
    width: auto;
}
.menu-share-links li a.facebook,
.menu-share-links li a.twitter {
    width: auto;
}
.menu-share-links li a span {
    font-size: 14px;
    padding-right: 15px;
    padding-left: 10px;
}
.menu-share-links li a:hover {
    opacity: 0.8;
}
.menu-share-links .menu-show-hid a {
    font-size: 14px;
    color: #656565;
    width: auto;
    border: 0;
}
.menu-share-links .menu-show-hid .less,
.menu-share-links.menu-menu-show-hidden .menu-show-hid .more {
    display: none;
}
.menu-share-links .less,
.menu-share-links .more {
    font-size: 25px;
}
.menu-share-links.menu-menu-show-hidden .menu-show-hid .less {
    display: block;
}
.index .menu-share-links li.linkedin,
.index .menu-share-links li.reddit,
.menu-share-links li.telegram,
.index .menu-share-links li.whatsapp {
    display: inherit;
}
.menu-share-links li.linkedin,
.menu-share-links li.reddit,
.menu-share-links li.telegram,
.menu-share-links li.whatsapp {
    display: none;
}
.menu-menu-show-hidden li.linkedin,
.menu-menu-show-hidden li.reddit,
.menu-menu-show-hidden li.telegram,
.menu-menu-show-hidden li.whatsapp {
    display: inline-block;
}

.background-sosmed .blogger a,
.background-sosmed-hover .blogger a:hover {
    background-color: #ff5722;
}
.background-sosmed .facebook a,
.background-sosmed .facebook-f a,
.background-sosmed-hover .facebook a:hover,
.background-sosmed-hover .facebook-f a:hover {
    background-color: #3b5999;
}
.background-sosmed .twitter a,
.background-sosmed-hover .twitter a:hover {
    background-color: #00acee;
}
.background-sosmed .youtube a,
.background-sosmed-hover .youtube a:hover {
    background-color: #f50000;
}
.background-sosmed .instagram a,
.background-sosmed-hover .instagram a:hover {
    background: -o-linear-gradient(75deg, #ffb13d, #dd277b, #4d5ed4);
    background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4);
}
.background-sosmed .pinterest a,
.background-sosmed .pinterest-p a,
.background-sosmed-hover .pinterest a:hover,
.background-sosmed-hover .pinterest-p a:hover {
    background-color: #ca2127;
}
.background-sosmed .dribbble a,
.background-sosmed-hover .dribbble a:hover {
    background-color: #ea4c89;
}
.background-sosmed .linkedin a,
.background-sosmed-hover .linkedin a:hover {
    background-color: #0077b5;
}
.background-sosmed .tumblr a,
.background-sosmed-hover .tumblr a:hover {
    background-color: #365069;
}
.background-sosmed .twitch a,
.background-sosmed-hover .twitch a:hover {
    background-color: #6441a5;
}
.background-sosmed .rss a,
.background-sosmed-hover .rss a:hover {
    background-color: #ffc200;
}
.background-sosmed .skype a,
.background-sosmed-hover .skype a:hover {
    background-color: #00aff0;
}
.background-sosmed .stumbleupon a,
.background-sosmed-hover .stumbleupon a:hover {
    background-color: #eb4823;
}
.background-sosmed .vk a,
.background-sosmed-hover .vk a:hover {
    background-color: #4a76a8;
}
.background-sosmed .stack-overflow a,
.background-sosmed-hover .stack-overflow a:hover {
    background-color: #f48024;
}
.background-sosmed .github a,
.background-sosmed-hover .github a:hover {
    background-color: #24292e;
}
.background-sosmed .soundcloud a,
.background-sosmed-hover .soundcloud a:hover {
    background: -o-linear-gradient(#ff7400, #ff3400);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff7400), to(#ff3400));
    background: linear-gradient(#ff7400, #ff3400);
}
.background-sosmed .behance a,
.background-sosmed-hover .behance a:hover {
    background-color: #191919;
}
.background-sosmed .digg a,
.background-sosmed-hover .digg a:hover {
    background-color: #1b1a19;
}
.background-sosmed .delicious a,
.background-sosmed-hover .delicious a:hover {
    background-color: #0076e8;
}
.background-sosmed .codepen a,
.background-sosmed-hover .codepen a:hover {
    background-color: #000;
}
.background-sosmed .flipboard a,
.background-sosmed-hover .flipboard a:hover {
    background-color: #f52828;
}
.background-sosmed .reddit a,
.background-sosmed-hover .reddit a:hover {
    background-color: #ff4500;
}
.background-sosmed .whatsapp a,
.background-sosmed-hover .whatsapp a:hover {
    background-color: #3fbb50;
}
.background-sosmed .messenger a,
.background-sosmed-hover .messenger a:hover {
    background-color: #0084ff;
}
.background-sosmed .snapchat a,
.background-sosmed-hover .snapchat a:hover {
    background-color: #ffe700;
}
.background-sosmed .telegram a,
.background-sosmed-hover .telegram a:hover {
    background-color: #179cde;
}
.background-sosmed .discord a,
.background-sosmed-hover .discord a:hover {
    background-color: #7289da;
}
.background-sosmed .share a,
.background-sosmed-hover .share a:hover {
    background-color: #656565;
}
.background-sosmed .email a,
.background-sosmed-hover .email a:hover {
    background-color: #888;
}
.background-sosmed .external-link a,
.background-sosmed-hover .external-link a:hover {
    background-color: #0039cb;
}
.warna-sosmed .blogger a,
.warna-sosmed-hover .blogger a:hover {
    color: #ff5722;
}
.warna-sosmed .facebook a,
.warna-sosmed .facebook-f a,
.warna-sosmed-hover .facebook a:hover,
.warna-sosmed-hover .facebook-f a:hover {
    color: #3b5999;
}
.warna-sosmed .twitter a,
.warna-sosmed-hover .twitter a:hover {
    color: #00acee;
}
.warna-sosmed .youtube a,
.warna-sosmed-hover .youtube a:hover {
    color: #f50000;
}
.warna-sosmed .instagram a,
.warna-sosmed-hover .instagram a:hover {
    color: #dd277b;
}
.warna-sosmed .pinterest a,
.warna-sosmed .pinterest-p a,
.warna-sosmed-hover .pinterest a:hover,
.warna-sosmed-hover .pinterest-p a:hover {
    color: #ca2127;
}
.warna-sosmed .dribbble a,
.warna-sosmed-hover .dribbble a:hover {
    color: #ea4c89;
}
.warna-sosmed .linkedin a,
.warna-sosmed-hover .linkedin a:hover {
    color: #0077b5;
}
.warna-sosmed .tumblr a,
.warna-sosmed-hover .tumblr a:hover {
    color: #365069;
}
.warna-sosmed .twitch a,
.warna-sosmed-hover .twitch a:hover {
    color: #6441a5;
}
.warna-sosmed .rss a,
.warna-sosmed-hover .rss a:hover {
    color: #ffc200;
}
.warna-sosmed .skype a,
.warna-sosmed-hover .skype a:hover {
    color: #00aff0;
}
.warna-sosmed .stumbleupon a,
.warna-sosmed-hover .stumbleupon a:hover {
    color: #eb4823;
}
.warna-sosmed .vk a,
.warna-sosmed-hover .vk a:hover {
    color: #4a76a8;
}
.warna-sosmed .stack-overflow a,
.warna-sosmed-hover .stack-overflow a:hover {
    color: #f48024;
}
.warna-sosmed .github a,
.warna-sosmed-hover .github a:hover {
    color: #24292e;
}
.warna-sosmed .soundcloud a,
.warna-sosmed-hover .soundcloud a:hover {
    color: #ff7400;
}
.warna-sosmed .behance a,
.warna-sosmed-hover .behance a:hover {
    color: #191919;
}
.warna-sosmed .digg a,
.warna-sosmed-hover .digg a:hover {
    color: #1b1a19;
}
.warna-sosmed .delicious a,
.warna-sosmed-hover .delicious a:hover {
    color: #0076e8;
}
.warna-sosmed .codepen a,
.warna-sosmed-hover .codepen a:hover {
    color: #000;
}
.warna-sosmed .flipboard a,
.warna-sosmed-hover .flipboard a:hover {
    color: #f52828;
}
.warna-sosmed .reddit a,
.warna-sosmed-hover .reddit a:hover {
    color: #ff4500;
}
.warna-sosmed .whatsapp a,
.warna-sosmed-hover .whatsapp a:hover {
    color: #3fbb50;
}
.warna-sosmed .messenger a,
.warna-sosmed-hover .messenger a:hover {
    color: #0084ff;
}
.warna-sosmed .snapchat a,
.warna-sosmed-hover .snapchat a:hover {
    color: #ffe700;
}
.warna-sosmed .telegram a,
.warna-sosmed-hover .telegram a:hover {
    color: #179cde;
}
.warna-sosmed .discord a,
.warna-sosmed-hover .discord a:hover {
    color: #7289da;
}
.warna-sosmed .share a,
.warna-sosmed-hover .share a:hover {
    color: #656565;
}
.warna-sosmed .email a,
.warna-sosmed-hover .email a:hover {
    color: #888;
}
.warna-sosmed .external-link a,
.warna-sosmed-hover .external-link a:hover {
    color: #0039cb;
}
.box-content-atas {
	    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
    padding: 0 0 0px;
    margin: 0 0 20px;
    border-bottom: thin solid #5f6368;
}
  • Kemudian copy kode HTML di bawah ini dan letakan sesudah kode <data:post.body/> atau di atas kode </article>
<div class='menu-share-container'>
<ul class='menu-share-links social background-sosmed'>
<li class='facebook-f'>
<a class='facebook new-window' data-height='650' data-url='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.canonicalUrl' data-width='550' href='javascript:;' rel='nofollow noopener' title='Facebook'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg>
<span>Facebook</span>
</a>
</li>
<li class='twitter'>
<a class='twitter new-window' data-height='460' data-url='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.canonicalUrl' data-width='550' href='javascript:;' rel='nofollow noopener' title='Twitter'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg>
<span>Twitter</span>
</a>
</li>
<li class='pinterest-p'>
<a class='pinterest new-window' data-height='750' data-url='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' data-width='735' href='javascript:;' rel='nofollow noopener' title='Pinterest'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg>
</a>
</li>
<li class='linkedin'>
<a class='linkedin new-window' data-height='700' data-url='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl' data-width='1000' href='javascript:;' rel='nofollow noopener' title='LinkedIn'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg>
</a>
</li>
<li class='reddit'>
<a class='reddit new-window' data-height='460' data-url='&quot;https://reddit.com/submit/?url=&quot; + data:post.canonicalUrl + &quot;&amp;resubmit=true&amp;title=&quot; + data:post.title' data-width='550' href='javascript:;' rel='nofollow noopener' title='Reddit'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z'/></svg>
</a>
</li>
<li class='whatsapp'>
<a class='whatsapp new-window' data-height='550' data-url='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%3A%20&quot; + data:post.canonicalUrl' data-width='900' href='javascript:;' rel='nofollow noopener' title='WhatsApp'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg>
</a>
</li>
<li class='email'>
<a class='email new-window' data-height='460' data-url='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.canonicalUrl' data-width='550' href='javascript:;' rel='nofollow noopener' title='Email'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z'/></svg>
</a>
</li>
<li class='menu-show-hid'>
<a href='javascript:;' rel='nofollow noopener'>
<span class='more'>+</span>
<span class='less'>-</span>
</a>
</li>
</ul>
</div>
tips — Untuk kode <data:post.body/> ini biasanya ada 3, pilih kode diantara kode  ke 2 atau yang ke 3. silahkan anda coba saja satu persatu.Bagi pengguna template viomagz silahkan cari kode  <b:includable id='postsharebutton' var='post'> dan taruh kode HTML diatas. 
  • Selanjutnya copy kode Javascript di bawah ini dan letakan di atas kode </body>
<script type='text/javascript'>//<![CDATA[
					$(".menu-share-links .new-window").on("click", function() {
					var t = $(this),
					e = t.data("url"),
					a = t.data("width");
					t = t.data("height"), window.open(e, "_blank", "scrollbars=yes,resizable=yes,toolbar=no,location=yes,width=" + a + ",height=" + t + ",left=" + Math.round(window.screen.width / 2 - a / 2) + ",top=" + Math.round(window.screen.height / 2 - t / 2)).focus()
					}), $(".menu-share-links").each(function() {
					var t = $(this);
					t.find(".menu-show-hid a").on("click", function() {
					t.toggleClass("menu-menu-show-hidden")
					})
					})
	//]]>
				</script>
  • Terakhir tinggal simpan Tema dan cek hasilnya.
Untuk tutorial di atas ini hanya muncul satu widget saja yaitu di bagian bawah. anda bisa melihat demonya di bawah ini.
Cara Membuat Widget Share Button Mirip El Creative
Widget Share Button ElCA di bawah Artikel


Sedangkan di blog elcreative ini menampilkan dua widget share button yaitu di bagian atas sesudah judul dan di bagian bawah postingan. jika anda ingin menampilkan kedua widget tersebut, anda hanya menambahkan kode HTMLnya lagi. caranya sebagai berikut

  • Silahkan cari kode yang di dalam tag halaman item, contohnya kode <data:post.body/> yang berada di dalam tag tersebut dan cari kode tag HTML judul
  • Contoh kodenya seperti ini <b:if cond='data:post.title'> atau <a expr:id='data:post.id'/>. 
  • jika sudah ketemu, kemudian tambahkan kode di bawah ini diatas kode  <b:if cond='data:post.title'> atau <a expr:id='data:post.id'/>
<div class='box-content-atas'>
  • dan jangan lupa kasih tag penutupnya sesudah kode HTML widget share button, untuk keselurahn kodenya seperti berikut. 
<!-- Posting halaman item -->
	  <div>
	  <b:if cond='data:post.firstImageUrl'>
		<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
	  </b:if>
          <div class='box-content-atas'>
	  <a expr:id='data:post.id'/>
	    <b:if cond='data:post.title'>
          <h1 class='post-title entry-title' itemprop='name headline'>
            <b:if cond='data:post.link'>
              <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
              <b:if cond='data:post.url'>
                <b:if cond='data:blog.url != data:post.url'>
                  <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>
                  <data:post.title/>
                </b:if>
                <b:else/>
                  <data:post.title/>
              </b:if>
            </b:if>
          </h1>
		</b:if>
		
	<div class='post-info info-3'>
			<b:include data='post' name='postauthorinfo'/> 
			<b:include data='post' name='postdateinfo'/>
			<b:include data='post' name='postcommentinfo2'/>
			<b:include data='post' name='postQuickEdit'/>
		</div>
        <div class='menu-share-container'>
<ul class='menu-share-links social background-sosmed'>
<li class='facebook-f'>
<a class='facebook new-window' data-height='650' data-url='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.canonicalUrl' data-width='550' href='javascript:;' rel='nofollow noopener' title='Facebook'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg>
<span>Facebook</span>
</a>
</li>
<li class='twitter'>
<a class='twitter new-window' data-height='460' data-url='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.canonicalUrl' data-width='550' href='javascript:;' rel='nofollow noopener' title='Twitter'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg>
<span>Twitter</span>
</a>
</li>
<li class='pinterest-p'>
<a class='pinterest new-window' data-height='750' data-url='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' data-width='735' href='javascript:;' rel='nofollow noopener' title='Pinterest'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/></svg>
</a>
</li>
<li class='linkedin'>
<a class='linkedin new-window' data-height='700' data-url='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl' data-width='1000' href='javascript:;' rel='nofollow noopener' title='LinkedIn'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg>
</a>
</li>
<li class='reddit'>
<a class='reddit new-window' data-height='460' data-url='&quot;https://reddit.com/submit/?url=&quot; + data:post.canonicalUrl + &quot;&amp;resubmit=true&amp;title=&quot; + data:post.title' data-width='550' href='javascript:;' rel='nofollow noopener' title='Reddit'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z'/></svg>
</a>
</li>
<li class='whatsapp'>
<a class='whatsapp new-window' data-height='550' data-url='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%3A%20&quot; + data:post.canonicalUrl' data-width='900' href='javascript:;' rel='nofollow noopener' title='WhatsApp'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg>
</a>
</li>
<li class='email'>
<a class='email new-window' data-height='460' data-url='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.canonicalUrl' data-width='550' href='javascript:;' rel='nofollow noopener' title='Email'>
<svg height='20' viewBox='0 0 24 24' width='20'><path d='M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z'/></svg>
</a>
</li>
<li class='menu-show-hid'>
<a href='javascript:;' rel='nofollow noopener'>
<span class='more'>+</span>
<span class='less'>-</span>
</a>
</li>
</ul>
</div>
      </div>
  • Jika sudah silahkan tinggal simpan tema dan cek hasilnya. untuk demo silahkan anda bisa lihat gambar dibawah ini.
Cara Membuat Widget Share Button Mirip El Creative
Widget Share Button ElCA di atas Artikel


Akhir Kata
Demikian pembahasan kali ini mengenai Cara Membuat Widget Share Button Mirip El Creative. jika anda masih kebingungan cara menerapkanya silahkan tanyakan dikolom komentar ya sob. semoga bermanfaat.
Related Posts
0
Diposting oleh:
Kurniawan
Kurniawan
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses

Related Posts

Posting Komentar