Posts

Showing posts with the label Codes for blogger

6 Colourfull css animation button

Image
How to Create CSS Animation Buttons for Blogger & WordPress Want to make your website more interactive and visually appealing? Adding animated CSS buttons can do just that! Whether you're using Blogger or WordPress , these colorful buttons will grab your visitors' attention and improve user experience. In this guide, we’ll walk you through the HTML & CSS code and show you how to implement it on your site. See the Pen Animated colour full button by Dk technozone ( @Dktechnozone ) on CodePen . HTML Structure: Creating the Buttons First, let’s define the button structure using simple HTML : <div class="dbtn"> <a class="btn blue" href="#">Button 1</a> <a class="btn black" href="#">Button 2</a> <a class="btn crimson" href="#">Button 3</a> <a class="btn green" href="#">Button 4</a> ...

How to fix navigation error in Jetheme

Image
Hello guys today we will discuss about how to fix the navigation error of Jet theme in desktop mode  When you will test your website in page between side or any su analyser tool you will get a warning to add the role in menu items and because of this your accessibility school has been decreased 15% the error looks like {Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children} How to fix the navigation error of Jet theme  To fix this is unit two set up a code it helps to remove this error completely from theme to do this you need to search a code which is provided in the bottom side just copy this code and search in your blogger theme by pressing control +F.   if you are not able to search then you can use hacker keyboard in Android ot has features  to open this functionality , simply it's  enable the computer keyboard in your mobile phone.  Steps to remove the  navigation r...

Powerful anti ad blocker block dns ,brave,etc

Image
 Powerful Anti Ad Blocker Script Are you losing your earnings due to ad blocking on your website? Many times people resort to various technical measures so that their visitors block the ads on their website and this affects their earnings. To solve this problem, we have come up with a powerful script that can help you get rid of this problem. This script is a custom DS Brave browser ad blocker extension that helps you prevent various browsers and extensions from blocking ads on your website. With this, you can easily prevent visitors from blocking ads and keep your website's ads active forever. How to use this powerful ad blocker script: 1. To embed this unique ad blocker script on your website, you need to go to your login dashboard. 2. There, create an add gadget in the sidebar or wherever you see fit and select HTML JavaScript widget. 3. Now, copy this script and paste it into the JavaScript widget. <style> .popSc{position:fixed;z-index:99981;top:0;bottom:0;left...

Telegram floating button with pulse effect html css

Image
  Are you also using social plugins on your site but no one is joining your Telegram group, then you need to attract people's attention towards you, for this you will have to lift your Telegram button from the bottom and put it in the middle so that people always see it and while ignoring it, they click on it and join your channel or group. So to accomplish this today we have brought a code which is made with the help of HTML and CSS which will embed the link of your Telegram channel in the middle of your website and the user cannot remove it even if he wants to and by seeing it again and again, he will definitely join your Telegram channel 🗿| To apply this code in your blogger, first of all you have to go to the Edit HTML section of your blogger and add this CSS above the close </head> there @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5); } 80% { box-shadow: 0 0 0 14px rgba(0, 136, 204, 0); } } .telegram-icon svg { fill: #fff; width: 20px; ...

How to make codebox with copy and and download button in blogger

Image
 Create a stunning code box with copy and download buttons for blogger Are you a Blogger user looking to enhance your website with an attractive and functional code box? Look no further! In this comprehensive guide, we will show you how you can create a code box with a beautiful copy and download button for your Blogger website. This feature will not only improve the aesthetics of your site but also provide your readers with a convenient way to copy and download code snippets. Why do you need a code box? Code snippets are an essential part of many blogs, especially those focusing on programming, web development, or technical tutorials. However, simply pasting code into your blog posts can make it hard to read and copy. A code box organizes your code neatly, making it easier for readers to understand and use. Additionally, the download button allows users to save the code for future reference, enhancing the user experience. how to make code box in blogger Follow these simple steps t...

3 colourfull mobile menu for blogger

Image
  Mobile menu is very important for the website. If your website has a lot of content or if you want to interact with your users, then the mobile menu keeps your entire content at the bottom side from where many people can access it. Or if you want, you can turn on or off any function of your theme by adding a function to it. Today we have brought for you a car type mobile menu in which there are many colors and after effects, with the help of which people will have a lot of fun tokuching or using it and it looks very beautiful. Mobile menus come in many types, some are on the top, some are opened with a toggle and this is our menu which is slide type, meaning that if you slide up, it will be hidden and if you slide up then it will be hidden . , If you slide down from the page, it starts showing, then in this way the user can read his articles in full screen without any interruption and if he wants, he can also access them in your mobile by sliding from the bottom. You can add any ...

Custom YouTube playlist video player

Image
 Hey guys today we are come with the YouTube custom video player playlist which is completely look like YouTube playlist system, you can enjoy videos in playlist like YouTube in blogger  Custom YouTube playlist video player In this Post we will provide the code for creating playlist like YouTube in your blogger website  To do this you need to login dashboard and then create a new post empress the whole code provided by us now you need to see the course and analyse the course to understand the working principle of custom YouTube playlist video player  See the Pen Youtube playlist by Dk technozone ( @Dktechnozone ) on CodePen . Codes for playlist  <div class="video-player"> <div id="videoMain" class="video-main"> <div class="thumbnail-container"> <img id="videoThumbnail" src="" alt="Video Thumbnail"> <div class="play-icon">▶</div> ...

YouTube like playlist video player in blogger

Image
Creating a YouTube-Like Playlist with HTML, CSS, and JavaScript Creating a YouTube-like playlist using HTML, CSS, and JavaScript can greatly enhance the user experience on your website by allowing visitors to browse and watch videos seamlessly. Below, we will walk through how to set this up step-by-step. How to add YouTube like  playlist video player in blogger  To add the playlist vidoe player just follow simple steps  Go to  blogger dashboard  Now create new post  Complete your post writing  Now got to  html view  And go to the place mainly end of post code  Paste the all code provided by us  Important replace the video ID in YouTube vidoe link not all links  In  const videoLinks = [             'https://www.youtube.com/watch?v= Sl8dI1SkV58 ', You need to replace red marked vidoe id with you video id  For example when your video link is https://youtu.be/ AN4-za4Ezns ?si=XDf5QnwccyMNLX...

Top 20+ beautiful CSS button collections

Image
Creating visually appealing and interactive buttons is crucial for enhancing user experience on websites. Here’s a curated list of 20+ beautiful CSS button collections that you can integrate into your projects to make your web interfaces stand out. 1. Gradient Buttons Gradient buttons offer a smooth transition between colors, adding depth and  visual interest.   Gradient Button    2. Neumorphic Buttons Neumorphism combines skeuomorphism and flat design, giving buttons a soft, extruded plastic look.   Neumorphic Button    3. Glassmorphism Buttons Glassmorphism offers a frosted-glass aesthetic with transparency and blurs.   Glassmorphism Button    4. Flat Buttons Flat buttons have a minimalist design without shadows or gradients.   Flat Button    5. Outlined Buttons Outlined buttons use borders to define their shape, often used for secondary actions.   Outlined Button    6. Icon Buttons Icon ...