Elevate Your Blogger Template: Add Download and Preview Buttons with Style
As a Blogger user, you're likely always looking for ways to enhance your blog's design and functionality. One simple yet effective way to do this is to add download and preview buttons to your template. These buttons provide a clear call to action for your readers and can also add a touch of professionalism to your blog.
In this article, we'll show you how to add download and preview buttons to your Blogger template in a distinctive way. We'll also provide some inspiration for designing your buttons and a code snippet to get you started.
Why Add Download and Preview Buttons?
Before we dive into the tutorial, let's quickly discuss why adding download and preview buttons is a good idea:
- Improved user experience: Clear calls to action can help your readers find and download the resources they need.
- Increased engagement: Download and preview buttons can encourage readers to interact with your content more deeply, which can lead to increased engagement and loyalty.
- Enhanced professionalism: Adding download and preview buttons can give your blog a more polished, professional look that sets you apart from other bloggers.
Design Inspiration for Download and Preview Buttons
When it comes to designing your download and preview buttons, the possibilities are endless. Here are a few ideas to get you started:
- Material Design Buttons: Use a material design-inspired button style with bold colors and clean typography.
- Gradient Buttons: Add a touch of elegance with gradient buttons that transition from one color to another.
- Rounded Corner Buttons: Use rounded corner buttons to add a soft, friendly touch to your Blogger template.
- Hover Effects: Add hover effects to your buttons to create a sense of interactivity and engagement.
- Custom Icons: Use custom icons to make your download and preview buttons stand out.
Adding Download and Preview Buttons to Your Blogger Template
Now that we've covered the benefits and design inspiration for download and preview buttons, let's dive into the tutorial. Here's how to add download and preview buttons to your Blogger template:
Add-on installation explanation
- First, copy the following CSS code and paste it or place it in the ?? template ??
- Edit HTML Find the
</head>symbol and add the code above it.
<style>
.NIAbutton{padding:15px;margin:15px;width:100%;text-align:center}
.NIAdownload{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);background:linear-gradient(to right,#f10000 5%,#ffe075 50%,#ff7800 100%);background-size:500%;border-radius:5px;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.2rem 1rem rgba(0,0,0,0.15)}
.NIAdownload:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.NIAdownload:after{content:"\f019";font-family:fontawesome;font-size:14px;padding-right:10px}
.NIAdemo{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background:linear-gradient(to right,#0581d2 9%,#eff16d 50%,#e67e22 100%);background-size:500%;border-radius:5px;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.2rem 1rem rgba(0,0,0,0.15)}
.NIAdemo:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.NIAdemo:after{content:"\f1d8";font-family:fontawesome;font-size:14px;padding-right: 13px;}
@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100%}}
</style>Add buttons to the topic
- Moving to HTML when writing a blog post
<div class="NIAbutton">
<a class="NIAdemo" href="#" target="_blank">Preview</a>
<a class="NIAdownload" href="#" target="_blank">Download</a>
</div>Show icons
- If the icons on the Preview and Download buttons do not appear, please copy and paste the following code above the
</head>or</body>icon.
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>- Click "Apply" to save the changes.
That's it! With these simple steps, you can add download and preview buttons to your Blogger template and enhance your blog's design and functionality.
Conclusion
Adding download and preview buttons to your Blogger template is a simple yet effective way to enhance your blog's design and functionality. By providing clear calls to action and encouraging readers to interact with your content, you can improve the user experience, increase engagement, and enhance your blog's professionalism.
