SUBSCRIBE OUR YOUTUBE CHANNEL 👉
Join in Google News
If You Want Adsense Approval for your blog Contact Us Adsense Ready theme Now!

Add a very cool and beautiful HTML and CSS share button for blogspot

Add a share button using quality and beautiful HTML and CSS to blogspot to help increase interaction between authors and readers as well as increase v

Add a very cool and beautiful HTML and CSS share button for blogspot

Hello guys, I've been a bit busy lately, but yesterday I had a little free time to make a blogspot share button using HTML and CSS without using JS. Initially, I intended to be a contact button only with too many shares, then I changed it to a share button for good and a little different. This code, I also refer to an article on the internet before. 😁😁



This code you can also edit into a contact button or a personal social network information button, I will leave the HTML code of both the share button and the personal social network information for those of you who do not know how to edit!

Guide

Step 1: Add the following CSS code to your theme usually between the <head>...</head>.

< style >
 	.social-container { position :fixed; height : 50px ; width : 50px ; border-radius : 40px ; background-color : var (--widgetbg); bottom : 30px ; left : 30px ; box-shadow : 0  12px  25px  0  rgb (30 30 30 / 4%); transition : 0.3s ease, box-shadow 0.1s  0.3s ease; z-index : 5 }
	.social-check-label { z-index : 10 ; cursor :pointer; position :absolute; height : 50px ; width : 50px ; bottom : 0 ; left : 50% ; transform : translateX (-50%) rotate (0deg); border-radius : 100% ; transition : 0.3s ease}
	.social-check-label :after , .social-check-label :before { content : '' ; position :absolute; top : 50% ; left : 50% ; transform : translate (-50%,-50%); height : 4px ; width : 35% ; border-radius : 2px ; background-color : #7577a9 }
	.social-check-label :after { transform : translate (-50%,-50%) rotate (90deg)}
	.social-button { position :absolute; height : 45px ; width : 45px ; left : 50% ; transform : translate (-50%,-50%) scale (0.75); transition : 0.3s ease, opacity 0.1s ease; background-size :cover !important ; backface-visibility :hidden; opacity : 0 }
	.social-button > span { z-index : 3 ; position :absolute; left :- 100% ; background : #fff ; border-radius : 100px ; top : 50% ; transform : translateY (-50%); white-space :nowrap; box-shadow : 0  12px  25px  0  rgb (30 30 30 / 4%); padding : 8.25px  15px ; pointer-events :none;-webkit-user-select :none; -moz-user-select :none; -ms-user-select :none; user-select :none; opacity : 0 ; transition :all 0.2s ease-in-out}
	.social-button :hover > span { left : calc (100% + 18.25px); opacity : 1 }
	.social-button .facebook { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/facebook-icon.png" ) no-repeat center}
	.social-button .twitter { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/twitter-icon.png" ) no-repeat center}
	.social-button .pinterest { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/pinterest-icon.png" ) no-repeat center}
	.social-button .linkedin { top : 169.5px ; background : url ( "https://cdn.jsdelivr.net/gh/ngylduy/images/linkedin-icon.png" ) no-repeat center}
	#socialcheckbox { display :none}
	#socialcheckbox :checked ~ .social-container { height : 219.5px ; transition : 0.3s ease, box-shadow 0.1s ease}
	#socialcheckbox :checked ~ .social-container > .social-button { opacity : 1 ; cursor :pointer}
	#socialcheckbox :checked ~ .social-container > .social-button .facebook { top : 25px ; transition : 0.3s ease, opacity 0.33s  0.455s ease, top 0.33s  0.405s  cubic-bezier (0,0,0.5,1.6)}
	#socialcheckbox :checked ~ .social-container > .social-button .twitter { top : 61.75px ; transition : 0.3s ease, opacity 0.33s  0.455s ease, top 0.33s  0.405s  cubic-bezier (0,0,0.5,1.6)}
	#socialcheckbox :checked ~ .social-container > .social-button .pinterest { top : 99.25px ; transition : 0.3s ease, opacity 0.33s  0.455s ease, top 0.33s  0.405s  cubic-bezier (0,0,0.5,1.6)}
	#socialcheckbox :checked ~ .social-container > .social-button .linkedin { top : 137.25px ; transition : 0.3s ease, opacity 0.33s  0.455s ease, top 0.33s  0.405s  cubic-bezier (0,0,0.5,1.6)}
	#socialcheckbox :checked ~ .social-container > .social-check-label { transform : translateX (-50%) rotate (225deg)}
</ style >

Step 2: Add the following HTML before the closing tag</body>

If you use the share button then use the code below:

< input  id = 'socialcheckbox'  type = 'checkbox' />
  < div  class = 'social-container' >
    < a  class = 'social-button facebook'  expr:href = '"https://www.facebook.com/sharer.php?u=" + data:view.url.canonical'  rel = 'nofollow noopener'  target = '_blank' > < span > Share to Facebook </ span > </ a >
    < a  class = 'social-button twitter'  expr:href = '"https://twitter.com/intent/tweet?url=" + data:view.url.canonical'  rel = 'nofollow noopener'  target = '_blank' > < span > Share to Twitter </ span > </ a >
    < a  class = 'social-button pinterest'  expr:href = '"https://www.pinterest.com/pin/create/button/?url=" + data:view.url.canonical'  rel = 'nofollow noopener'  target = '_blank' > < span > Share to Pinterset </ span > </ a >
    < a  class = 'social-button linkedin'  expr:href = '"https://www.linkedin.com/sharing/share-offsite/?url=" + data:view.url.canonical'  rel = 'nofollow noopener'  target = '_blank' > < span > Share to Linkedin </ span > </ a >
    < label  class = 'social-check-label'  for = 'socialcheckbox' />
  </ div >

If you are using the personal social media button, use the code below:

< input  id = 'socialcheckbox'  type = 'checkbox' />
  < div  class = 'social-container' >
    < a  class = 'social-button facebook'  href = '#'  rel = 'nofollow noopener'  target = '_blank' > < span > Follow Facebook author </ span > </ a >
    < a  class = 'social-button twitter'  href = '#'  rel = 'nofollow noopener'  target = '_blank' > < span > Follow Twitter author </ span > </ a >
    < a  class = 'social-button pinterest'  href = '#'  rel = 'nofollow noopener'  target = '_blank' > < span > Follow Pinterset Author </ span > </ a >
    < a  class = 'social-button linkedin'  href = '#'  rel = 'nofollow noopener'  target = '_blank' > < span > Follow Linkedin Author </ span > </ a >
    < label  class = 'social-check-label'  for = 'socialcheckbox' />
  </ div >

Button for personal social network information, remember to change the path in the properties href!

Step 3: Save changes.

Demo you can watch directly on this article page, it's in the lower left corner of the screen there. 😛 If
you have any questions, just comment below this article and I will answer.

Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.

Post a Comment