Insert Stylish Social Profile Widgets Into Your Blogger Web Log

  • Share

Within 1 month of adding our social profile buttons on Showeblogin, nosotros have received thousands of asking to share SWT social profile widget for Blogger as well as WordPress users. As more than than 68 per centum requests come from the blogger weblog users, I am writing this tutorial particularly for BlogSpot.com web log. One of the best features of this widget is that it plant on all devices ane.e. it is totally responsive amongst best customization options.

However, WordPress users inward fact whatever website owner may likewise add together this widget into their ain weblog/site equally the CSS as well as HTML codes industrial plant for whatsoever webpage on net. Thus, delight read all instructions really carefully and follow all steps too at concluding y’all volition encounter a transition effects with changing colors responsive social profile widget to your alive web log. For present y’all may run into the footer of this site.

Add SWT Social Profile Widgets to Blogger Blog

Step-ane:

Login into your blogger account together with select the detail web log inward which you lot desire to add SWT Social Profile Widget.

Step-ii:

Go to the Layout tab of your blogger weblog and click on Add a Gadget text link from the sidebar, header or footer.

Step-three:

Scroll downward too click on HTML/JavaScript (Add 3rd-party functionality or other code to your web log.) as well as inward the content champaign of open window, glue the following codes.




Now, supervene upon the following links/terms alongside your own respective social profiles address/mention:

Line x: https://www.facebook.com/SuperWebTricks
Line xi: https://twitter.com/SuperWebTricks
Line 12: https://plus.google.com/110825980327179111685
Line xiii: Showeblogin-SuperWebTricks
Line fourteen: https://www.youtube.com/Showeblogin

Note: Please respect the copyright in addition to our hard run indicated in line of work issue fifteen. It volition never hurt your weblog/site inwards whatever mode and therefore do not edit the occupation which indicates the license of this widget.

As this widget is responsible you may click too drag it to anywhere you desire to appear viz. Sidebar, Footer, as well as Header as well as above or below the Blog Posts widget on the layout. Now, click on Save system push button from the correct corner.

Step-4:

Go to the Template tab as well as click on Edit HTML text link push button. Now, click anywhere inwards the open up template editor together with search for closing tag as well as paste the next codes earlier/in a higher place the


Step-5:

Search for as well as scroll downwardly to the terminal as well as later on/below that line paste these Variable definitions.






Now, search for ]]> together with paste the following CSS codes in a higher place/earlier it.

/* SWT Social Profile Buttons
----------------------------------------------- */
.swtSocial /* SWT Social Profile Widget by Showeblogin */
display:inline-block; margin:2px; .swtSocial a float:inherit #swtSocialRight background:#44546a; color: #000; #swtSocialRight:hover background:#000; color: #FFF; .swtSocial float:left; display:inline; content:attr(data-alt); line-height:32px; .swtSocial a font-family: 'Georgia', sans-serif; text-decoration: none; display:block; text-align:center; opacity: 0.4; filter: alpha(opacity=40); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; .swtSocial a:hover opacity: 1.0; filter: alpha(opacity=100); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
#swtFacebook background-color: $(swtF.background.color); color: $(swtF.text.color); #swtFacebook:hover background-color: $(swtF.hover.background.color); color: $(swtF.hover.text.color); #swtTwitter background-color: $(swtT.background.color); color: $(swtT.text.color); #swtTwitter:hover background-color: $(swtT.hover.background.color); color: $(swtT.hover.text.color); #swtGooglePlus background-color: $(swtG.background.color); color: $(swtG.text.color); #swtGooglePlus:hover background-color: $(swtG.hover.background.color); color: $(swtG.hover.text.color); #swtRSS background-color: $(swtR.background.color); color: $(swtR.text.color); #swtRSS:hover background-color: $(swtR.hover.background.color); color: $(swtR.hover.text.color); #swtYouTube background-color: $(swtY.background.color); color: $(swtY.text.color); #swtYouTube:hover background-color: $(swtY.hover.background.color); color: $(swtY.hover.text.color);

Now, click on Save template as well as relish!

How to customize SWT Social Profile widget

Go to the Template tab over again in addition to click on Customise push button to open up the Blogger Template Designer. Now, pick out Advanced from the left.

From in that location, you’ll be able to pick out as well as customize the respective SWT Social Profile buttons viz. SWT-Facebook, SWT-Twitter, SWT-YouTube etc. You may straight off modify the colors of text and background colors equally yous prefer together with jibe for your blogger web log.

  • Share