s
How to add download button:-
Access your blog Posts > click Edit on any of your posts or add a new post. then switch to HTML area of the post editor and add the below coding anywhere you want to make the table appear.
Now let’s add the styling and important part of the widget, Search for ]]> and just below/after it paste the following coding
.button{
background-color:#2c3e50;
float:left;
padding:5px 12px;
margin:5px;
color:#fff;
text-align:center;
border:0;
cursor:pointer;
border-radius:3px;
display:block;
text-decoration:none;
font-weight:400;
transition:all .3s ease-out !important;
-webkit-transition:all .3s ease-out !important
}
a.button{
color:#fff
}
.button:hover{
background-color:#27ae60;
color:#fff
}
.button.small{
font-size:12px;
padding:5px 12px
}
.button.medium{
font-size:16px;
padding:6px 15px
}
.button.large{
font-size:18px;
padding:8px 18px
}
.small-button{
width:100%;
overflow:hidden;
clear:both
}
.medium-button{
width:100%;
overflow:hidden;
clear:both
}
.large-button{
width:100%;
overflow:hidden;
clear:both
}
.demo:before{
content:"\f06e";
margin-right:5px;
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400;
line-height:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.download:before{
content:"\f019";
margin-right:5px;
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400;
line-height:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
Adding The Fontawesome !important
Adding the fontaweomse is very important for this widget, as showing the icons are necessary for the buttons.
Go To Blogger.com >> Your Blog >> Template
Now Backup your template.
Then select Edit HTML >> Proceed
Don’t forget to Click/Tick the Expand Template Widgets box.
Search for and just below it paste the following CSS code.
All Done : Now everything is completed just Save your Template by pressing Save template button.
Note: You can change the text and buttons accordingly.
Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.
SHARE THIS:
Facebook
Twitter
Pinterest
Linkedin
How to Add Seo Friendly Meta Tags In Blogger 2020
How To Add Pagination Widget In Blogger - 2020
How To Fix "Page Not Eligible For Rich Results" In Rich Result Test Tool
NEXT
How To Setup Sancy Blogger Template
PREVIOUS
How To Setup Himster Blogger Template [OmTemplates]
Phạm Thời DVMFebruary 27, 2020
Thanks!
Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.
POPULAR POSTS
How to Add Sitemap Widget In Blogspot Blogs
How to Add Sitemap Widget In Blogspot Blogs
How To Setup Meed Blogger Templates
How To Setup Meed Blogger Templates
How To Setup Glossy Blogger Template
How To Setup Glossy Blogger Template
How To Setup Enfold Blogger Template [TemplatesYard]
How To Setup Enfold Blogger Template [TemplatesYard]
FACEBOOK
CATEGORIES
BacklinksBlog NicheBlog SecurityBlogger TipsBlogger TutorialsBlogger WidgetsDocumentationSEO
FOLLOWERS
RANDOM POSTS
How To Setup Okiro Blogger Template [Way2Themes]
How To Setup New Maggner Blogger Template [Templateify]
How To Setup UltraNews Blogger Template [TemplatesYard]
How To Setup Ommi Blogger Template
TAGS
BLOG NICHE
BLOG SECURITY
BLOGGER TIPS
BLOGGER TRICKS
BLOGGER TUTORIALS
BLOGGER WIDGETS
DOCUMENTATION
SEO
TIPS
RECENT POSTS
How To Setup Micro Blogger Template [TemplatesYard]
How To Setup Newsify Blogger Template [Templateify]
How To Setup SpotBuzz Blogger Template [Templateify]
How To Setup SoraMart Blogger Template
Copyright © 2022 Sora Blogging Tips | Owned by WebGlint.
No hay comentarios:
Publicar un comentario
Deja tu comentario y en breve te contestaremos