Before going to the tutorial for you who have never seen igniel's blog, you might be able to see directly the share button that I have, and maybe you want to try to share the article.
🔹This share button is almost similar to having Themezest, but the difference in the search button is that there are no counters or shared numbers .
How To Make A Similar Igniel Share Button
1) First enter your blog, then look for the code below, if you don't use the Viomagz template then you have to adjust the code first
#wrapper { background: $(posts.background.color); max-width: 1000px; margin: 0 auto; padding: 70px 30px 30px; overflow: hidden; }
2) Then delete the code that I marked and replace it with unset , roughly the results will be as below.
#wrapper { background: $(posts.background.color); max-width: 1000px; margin: 0 auto; padding: 70px 30px 30px; overflow: unset; }
3) Next, delete the default CSS Share button template template, if you use Themezest template then the code will look like this.
/* Share button By TopBlog Pk */ .share-this-pleaseeeee { display: inline-block; margin: 0; color: $(label.color);; text-transform: uppercase; font-size: 16px; background: $(label.bg.color); z-index: 1; position: relative; padding: 0 10px; font-weight: bold; } #share-container { margin: 20px auto 30px; overflow: hidden; } #share { width: 100%; text-align: center; } #share a { width: 25%; height: 40px; display: block; font-size: 24px; color: #fff; transition: opacity 0.15s linear; float: left; } #share a:hover { opacity: 0.8; } #share i { position: relative; top: 50%; transform: translateY(-50%); } .facebook { background: #3b5998; } .twitter { background: #55acee; } .linkedin { background: #0077b5; } .pinterest { background: #cb2027; } .whatsapp { background: #25d366; }
4) What was done after finding the code above? Just delete the code and then replace with the code below.
/* Share Container By TopBlog Pk */ #share-container { width:100%; display: inline-block; flex-wrap: nowrap; align-items: center; background-color: transparent; margin-top: 10px; padding: 10px 0px 0px; position: sticky; position: -webkit-sticky; bottom: 0px; z-index: 1; }
5) Then we put the following CSS code above
]]></b:skin>
/* Share Button By topblogpk.blogspot.com */ .jagoShare{position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;background-color:#fff;color:#fff;padding:10px 0;border-top:7px dotted #ddd;z-index:1;transition:all .3s ease}.jagoShare.show{position:sticky;position:-webkit-sticky;bottom:0}.jagoShare svg{width:17px;height:17px;margin:auto;text-align:center}.jagoShare .facebook svg,.jagoShare .pinterest svg,.jagoShare .tumblr svg{margin:0}.jagoShare svg path{fill:#fff} .jagoShare .count{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;font-weight:500;color:#008080;font-size:1.5em;margin-right:20px}.jagoShare .count svg path{fill:#008080}.jagoShare i{font-style:normal;margin:0 3px;line-height:0}.jagoShare a{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;width:100%;color:#fff;padding:7px;border-radius:25px;box-shadow:none;transition:all .3s ease}.jagoShare a:not(:last-child){margin-right:7px}.jagoShare a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}.jagoShare a.facebook{background-color:#3a579a}.jagoShare a.twitter{background-color:#00abf0}.jagoShare a.pinterest{background-color:#cd1c1f}.jagoShare a.linkedin{background-color:#2554BF}.jagoShare a.tumblr{background-color:#314358} .jagoShare i{display:none}.jagoShare .facebook svg,.jagoShare .pinterest svg,.jagoShare .tumblr svg{margin:auto} @media screen and (max-width:900px){ .jagoShare i{display:block}.jagoShare .facebook svg,.jagoShare .pinterest svg,.jagoShare .tumblr svg{margin:0}} @media screen and (max-width:680px){ .jagoShare{justify-content:space-between}.jagoShare a i{display:none}.jagoShare a{justify-content:center}.jagoShare a:not(:last-child){margin-right:5px}.jagoShare .facebook svg,.jagoShare .pinterest svg,.jagoShare .tumblr svg{margin:auto}} @media screen and (max-width:480px){ .jagoShare a:not(:last-child){margin-right:3px}.jagoShare .count{margin-right:15px}} /* Setting Mode Malam Tombol Share */ .Night .jagoShare {background-color: #292e38;border-top: 7px dotted #008080;}.Night .jagoShare .count svg path {fill: #008080;}.Night .jagoShare .count{color: #008080;}
6) Then search for <div id = 'share-container'>, something like below.
<div id = 'share-container'> <div class = 'label-line-c'> <p class = 'share-this-pleaseeeee'> <b: switch var = 'data: blog.locale'> <b: case value = 'id' /> Share this article <b: default /> Share this post < / b: switch> </p> </div> <div id = 'share'> <! - Facebook -> <a class = 'facebook' expr: href = '& quot; http: //www.facebook.com/sharer.php? u = & quot; + data: blog.url 'rel =' nofollow 'target =' _ blank '> <i class =' fa fa-facebook '/> </a> <! - twitter -> <a class = 'twitter' expr: href = '& quot; https: //twitter.com/intent/tweet? text = & quot; + data: post.title + & quot; & amp; url = & quot; + data: post.url 'rel =' nofollow 'target =' _ blank '> <i class =' fa-twitter '/> </a> <! - pinterest -> <a class = 'pinterest' expr: href = '& quot; http: //pinterest.com/pin/create/button/? url = & quot; + data: post.url + & quot; & amp; media = & quot; + data: blog.postImageUrl + & quot; & amp; description = & quot; + data: post.title 'rel =' nofollow 'target =' _ blank '> <i class =' fa fa-pinterest-p '/> </a> <! - whatsapp -> <a class = 'whatsapp' expr: href = '& quot; https: //api.whatsapp.com/send? phone = & amp; text = & quot; + data: post.title + &%;% 20% 2D% 20 & quot; + data: post.url '> <i aria-hidden =' true 'class =' fa fa-whatsapp '/> </a> </div> </div>
7) Then replace all the codes with the following code.
<div id = 'share-container'> <div class = "jagoShare"> <span class = "count"> <svg viewbox = "0 0 24 24"> <path d = "M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96.7.19C16. 5,7.69 17.21,8 18.8A3.3 0 0.0 21.5A3.3 0 0.0 18.2A3.3 0 0.0 15.5C15.5.24 15.04.5.47 15.09.5.7L8.04.9.81C7 .5,9.31 6.79.9 6.9A3.3 0 0.0 3.12A3.3 0 0.0 6.15C6.79.15 7.5.14.69 8.04.14.19L15.16,18.34C15.11,18.55 15.08, 18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0.0 18,16.08Z "> </path> </svg> <i> SHARE </i> </span> <a class = "facebook" expr: href = '& quot; https: //www.facebook.com/sharer.php? u = & quot; + data: blog.url 'onclick = "window.open (this.href, & quot; sharer & quot;, & quot; toolbar = 0, status = 0, width = 626, height = 436 & quot;); return false;" rel = "nofollow" title = "Share to Facebook"> <svg viewbox = "0 0 24 24"> <path d = "M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4.4 0 0.1 14.2H17Z"> </path> </svg> <i> Share </i> </a> <a class = "whatsapp" expr: href = '& quot; https: //api.whatsapp.com/send? phone = & amp; text = & quot; + data: post.title + &%;% 20% 2D% 20 & quot; + data: post.url ' onclick = "window.open (encodeURI (this.href), & quot; sharer & quot;, & quot; toolbar = 0, status = 0, width = 626, height = 500 & quot;); return false;" rel = "nofollow" title = "Share to WhatsApp"> <svg viewbox = "0 0 24 24"> <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.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 "> </path> </svg> </a> <a class="messenger" href='fb-messenger://share?link= data:post.url' rel="nofollow" title="Share to WhatsApp"> <svg viewbox = "0 0 24 24"> <path d = "M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5,65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12 , 20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12.2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31, 8.78L13.03,14.41Z "> </path> </svg> </a> <a class = "twitter" expr: href = '& quot; https: //twitter.com/intent/tweet? text = & quot; + data: post.title + & quot; & amp; url = & quot; + data: post.url 'onclick = "window.open (this.href, & quot; sharer & quot;, & quot; toolbar = 0, status = 0, width = 626, height = 436 & quot;); return false;" rel = "nofollow" title = "Share to Twitter"> <svg viewbox = "0 0 24 24"> <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 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.39 C4.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,13 , 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 "> </path> </svg> </a> <a class = "pinterest" data-pin-config = "beside" expr: href = '& 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 'onclick = "window.open (this.href, & quot; sharer & quot;, & quot; toolbar = 0, status = 0, width = 626, height = 500 & quot;); return false;" rel = "nofollow" title = "Share to Pinterest"> <svg viewbox = "0 0 24 24"> <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, 9.34. 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.46C9.24.716.08 16.22.14.18 16.22,11.5C16.22.9.1 14.5.7.46 12.03.7.46C9.21.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.817,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 "> </path> </svg> <i> Pin </i> </a> <a class = "linkedin" expr: href = '& quot; https: //www.linkedin.com/shareArticle? mini = true & amp; url = & quot; + data: post.canonicalUrl 'onclick = "window.open (this.href, & quot; sharer & quot;, & quot; toolbar = 0, status = 0, width = 626, height = 500 & quot;); return false;" rel = "nofollow" title = "Share to Linkedin"> <svg viewbox = "0 0 24 24"> <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 , 21H3V9H7V21M5.3A2.2 0 0.1 7.5A2.2 0 0.1 5.AA2.2 0 0.1 3.5A2.2 0 0.1 5.3Z "> </path> </svg> </a> <a class = "tumblr" data-notes = "right" expr: href = '& quot; https: //tumblr.com/share/link? url = & quot; + data: post.canonicalUrl + & quot; & amp; name = & quot; + data: post.title + & quot; & amp; description = & quot; + data: post.snippet 'onclick = "window.open (this.href, & quot; sharer & quot;, & quot; toolbar = 0, status = 0, width = 626, height = 500 & quot;); return false;" rel = "nofollow" title = "Share to Tumblr"> <svg viewbox = "0 0 24 24"> <path d = "M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5.19 9.5.16.75V11H7V7C10.07.6.74 10.27.4.5 10.5.3H13V7H17"> </path> </svg><i><i>Share</i> </i> </a> </div> </div>
Then click the save button then see the results.
How similar right? If there is anything that is not understood, you can write it in the comments / column or contact us via the Contact page .
A few tutorials from me, if this article is useful, don't forget to share.