Skip to main content

Posts

Showing posts with the label Button

How to Add Back To top Button with Progress Bar Animation

The useful Back to top button makes it easier for readers to return to the top of the article without having to scroll / scroll manually, it feels almost mandatory to have a blog. The addition of a feature that is not too obvious but very useful is almost rarely noticed, especially for the blog owner. However, for the convenience of the reader, the placement of this button must still be considered. On the Blogger Dashboard select then . If so, let's continue. Theme Backup How to make Back to Top Button with Progress Bar Installing this button requires jQuery . If your blog doesn't exist, please add the following code above the tag </head> . <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> Steps to install the Back to top button with a progress bar indicator: Step 1: Please enter your Blogger Dashboard . Then click Theme Edit HTML Step 2: Paste the following css code just above the code ]]><

Add a Call Button with hover effects in Blog and Website

Currently, web design, whether it's a cheap web design, or a Google blogspot design , requires that it be compatible with mobile devices, such as a mobile-compatible website, or a mobile-compatible blogspot and PC, comes with the included module utilities such as the call button for the website (the call button for blogspot). Demo Call button for website (Call button for blogspot) Demo By the way of designing a new blogspot for guests, TrickPk installed the below code in the sales blogspot template and instructed those who do not know the code to copy and use it. How to create a Call Button for Website Here, I show you how to use blogspot, you can also create a new widget and paste the following code in it. For Blogspot: Login => Layout => Create a JavaScript/HTML widget => Paste the call button code for the website, the call button code for blogspot as below:  <style> /* Call Button By TrickPk */ .trickpk-call-phone {position:fixed;visibil

How to Make a Time Pop up Download Button on Blogger

Hi, hello everyone, in this article, TrickPk will discuss how to create a timed pop up download button on Blogger . I have previously made this tutorial in the article How to Create a Popup Download Button Contains time (Insert Ads) but there are many reports from visitors to my blog, he said after the button was clicked the download button disappeared and could not be clicked again. And in this article I share the widget again and I have tried the code and it works 100% How does this pop up download button work? After you add this button in your post, or on your blogger page and click on the button, a pop up will appear, and it will contain the specified time. If the time is up, the download button will appear and you can click it. Demo How to Make a Popup Download Button with Timer First of all Login to blogger dashboard click Theme>Edit html Next, copy the code below and place it above the code ]]></b:skin> or </style> if using median ui 1.6 or an

Download Button Code to Display File Information

At the request of some of you, today I will share the download button that displays file information that TrickPk often uses. Demo Share code download button to display file information This button is installed by default in the Median UI template , I took it out and tweaked it a bit and of course now any template can be used. Let's see now! Instructions for it's installation and usage as below. First of all Copy the entire CSS below.  /* Download Button CSS Codes by TrickPk */ <style type='text/css'> .trickpk-icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}.trickpk-icon.trickpk-download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width=