Add preview and download buttons for blogger blogs

Today’s lesson is how to customize and download buttons and make them look beautiful for blog surfers, these buttons give an aesthetic blog and attract the visitor to the site, if you want to influence and gain the trust of followers, you need professional additions in the sense of the word, this is how most bloggers are entitled to advanced positions in the web.

Add preview and download buttons for blogger blogs

• First copy and paste the following CSS code or put it in 👈 Template 👈 Edit HTML Find the </ head> code and add the code above it.

<style>.TIMbutton{padding:15px;margin:15px;width:100%;text-align:center}.TIMdownload{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,#16a085 0%,#F5D76E 50%,#D24D57 100%);background-size:500%;border-radius:5rem;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.5rem 1rem rgba(0,0,0,0.15)}.TIMdownload: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}.TIMdownload:after{content:"\f019";font-family:fontawesome;font-size:14px;padding-right:10px}.TIMdemo{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,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background-size:500%;border-radius:5rem;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.5rem 1rem rgba(0,0,0,0.15)}.TIMdemo: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}.TIMdemo:after{content:"\f1d8";font-family:fontawesome;font-size:14px;padding-left:10px}@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100%}}</style>

• Drop the template, To learn how to use it, please copy and paste the following HTML code into each post of your blog that you want to demo and download. Remember, in HTML it does not compose.

<div class="TIMbutton"> <a <a class="TIMdemo" href="#" target="_blank">معاينة</a> <a <a class="TIMdownload" href="#" target="_blank">تحميل</a> </div>

If the icons on the Preview and Download button 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' type='text/css'/>

Add preview and download buttons for blogger blogs

client id analytics leads google analytics data studio analytics paid search google analytics google tag manager server side tracking