الصفحة الرئيسية
Blogger
Coding

How to Add Subscribe Notification In Plus Ui theme

 

Before continuing this tutorial, it's a good idea to make a backup of the blogger theme first. So that if something goes wrong during installation, we can easily restore it. 

ui design with youtube subscribe popup

Today, I am excited and super happy to release my new Blogger project for all blogger lovers where this script will help you make your blog perfect with a clean design. The theme, Plus UI is a new one and has unique features such as live YouTube subscribe popup.

But once your visitors click on the notification icon provided in the header, an attractive animation invokes a popup to request them subscribe for your YouTube channel. This feature gives a professional look to your blog and also helps you grow your YouTube audience side by side. Stay tuned and see how this feature is supposed to work, and integrate it into your own Blogger site yourself!


Let's get straight to the point of this article, which is how to add the subscription to notification script for the any theme. The first step is to copy and paste the two JavaScript codes below right above the code <!--[ </body> close ]-->

Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5:Now add the following JavaScript just  the before closing<!--[ </body> close ]-->tag.



 <script>//<![CDATA[
function popupClossOpem() {
  const clossSvgIcon = document.querySelector('#clossSvgIcon');
  const popupBoxSubsceib = document.querySelector('#popupBoxSubsceib');

  clossSvgIcon.onclick = function() {
    document.querySelector('.contentBoxCnt').style.animationName = 'popupBoxSubsceibCloss';
    clossSvgIcon.style.animationName = 'clossSvgIconCloss';
    clossSvgIcon.style.animationDelay = '0s';
    setTimeout(() => {
      document.querySelector('.contentBoxCnt').style.animationName = 'popupBoxSubsceib';
      popupBoxSubsceib.style.display = 'none'
    }, 2000);
  }
}
popupClossOpem()

function openSunNoti() {
  const openSunNoti = document.querySelector('#openSunNoti');
  const popupBoxSubsceib = document.querySelector('#popupBoxSubsceib');

  openSunNoti.addEventListener('click', function() {
    popupBoxSubsceib.style.display = 'flex';
    clossSvgIcon.style.animationName = 'clossSvgIcon';
    clossSvgIcon.style.animationDelay = '5.10s';
  })
}
openSunNoti()
  
//]]></script>
Step 6: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.

    #popupBoxSubsceib{
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    transition: 0.3s;
    justify-content: center;
    align-items: center;
    animation: gradient-animation 6s ease infinite;
    z-index: 1000;
}

.contentBoxCnt{
  background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    animation-name: popupBoxSubsceib;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    overflow: hidden;
    height: 260px;
    width:260px;
}

@keyframes popupBoxSubsceib{
  0%{
  height: 0;
  width:0;
  }

  40%{
  height: 260px;
  width:260px;
  }
  60%{
  height: 10px;
  width:10px;
  }
  60%{
  height: 160px;
  width:160px;
  }
  100%{
  height: 260px;
  width:260px;
  }
}

@keyframes popupBoxSubsceibCloss{
  0%{
  height: 260px;
  width:260px;
        
  }
  
  60%{
  height: 240px;
  width:240px;
  }
  60%{
  height: 200px;
  width:200px;
  }
90%{
  height: 260px;
  width:260px;
  }
  100%{
  height: 0;
  width:0;  }
}

.TDheading-10{
  background-image: linear-gradient(to right, rgb(37, 170, 225), rgb(68, 129, 235), rgb(4, 190, 254), rgb(63, 134, 237));
  border-radius: 7px;
  color: #fff;
  padding: 10px 10px;
  box-shadow: rgba(65, 132, 234, 0.75) 0px 4px 5px 0px;
  animation-name: TDheading;
  animation-duration: 2s;
  animation-delay: 2.10s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes TDheading{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 100;;
  }
}

.TDheading-4 {
background-image: linear-gradient(to right, rgb(102, 126, 234), rgb(118, 75, 162), rgb(107, 141, 214), rgb(142, 55, 215));
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
box-shadow: rgba(116, 79, 168, 0.75) 0px 4px 15px 0px;
color: white;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
animation-name: TDheading4;
animation-duration: 2s;
animation-delay: 3s;
animation-fill-mode: forwards;
opacity: 0;
font-weight: bold;
}

@keyframes TDheading4{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 100;;
  }
}
.TDheading-11 {
background-image: linear-gradient(to right, rgb(237, 110, 160), rgb(236, 140, 105), rgb(247, 24, 106), rgb(251, 176, 59));
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
box-shadow: rgba(236, 116, 149, 0.75) 0px 4px 15px.0px;
color: white;
padding-bottom: 10px; padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
animation-name: TDheading4;
animation-duration: 2s;
animation-delay: 4s;
animation-fill-mode: forwards;
opacity: 0;
font-weight: bold;
}

@keyframes TDheading4{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 100;;
  }
}

.subscribeCnt{
  display: flex;
  text-align: right;
  align-items: right;
  justify-content: right;
}

.subscribeBtn{
  color: #fff;
  text-decoration: none;
  padding: 10px 26px;
  background: black;
  border-radius: 25px;
  font-weight: bold;
  animation-name: TDheading4;
  animation-duration: 2s;
  animation-delay: 4.80s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes TDheading4{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 100;;
  }
}

#clossSvgIconCnt{
  display: flex;
  text-align: right;
  align-items: right;
  justify-content: right;
}
#clossSvgIcon{
  width: auto;
  height: 20px;
  animation-name: clossSvgIcon;
  animation-duration: 1.5s;
  animation-delay: 5.10s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes clossSvgIcon{
  0%{
    opacity: 100;
    rotate: 360deg;
  }
  100%{
    rotate: 0deg;
    opacity: 100;
  }
}

@keyframes clossSvgIconCloss{
  0%{
    opacity: 100;
    rotate: -360deg;
  }
  100%{
    rotate: 0deg;
    opacity: -360deg;
  }
}
Stape 8: Open your website and right click then click on inspect element 

If you want to do inspect element work with your phone then comment I will write an article about on this topic

Then click on highlight Cursor icon
Next you need to open inspect and click on any icon where you want to add notification icon 


so I will click on example translate icon 


Stape 9: Then copy the class and go to your theme edit html and find the class which you want to add 

Stape 10: Then minimise tha li tag and prass enter then paste tha below code after closing li tag, and save it your theme
  <li class='isNoti'>
<label class='navM tDark tIc tDL bIc' expr:aria-label='data:item' id='openSunNoti' role='button'>
                         <svg height='34px' version='1.1' viewBox='-2 0 34 34' width='34px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

<defs>
<linearGradient id='linearGradient-1' x1='50%' x2='50%' y1='0%' y2='100%'>
<stop offset='0%' stop-color='#FFC923'/>
<stop offset='100%' stop-color='#FFAD41'/>
</linearGradient>
<linearGradient id='linearGradient-2' x1='50%' x2='50%' y1='0%' y2='100%'>
<stop offset='0%' stop-color='#FE9F15'/>
<stop offset='100%' stop-color='#FFB03C'/>
</linearGradient>
<linearGradient id='linearGradient-3' x1='50%' x2='50%' y1='0%' y2='100%'>
<stop offset='0%' stop-color='#FFB637'/>
<stop offset='100%' stop-color='#FFBE2F'/>
</linearGradient>
<linearGradient id='linearGradient-4' x1='50%' x2='50%' y1='0%' y2='100%'>
<stop offset='0%' stop-color='#FFC226'/>
<stop offset='100%' stop-color='#FFE825'/>
</linearGradient>
<linearGradient id='linearGradient-5' x1='50%' x2='50%' y1='0%' y2='100%'>
<stop offset='0%' stop-color='#EB2E2E'/>
<stop offset='100%' stop-color='#D71919'/>
</linearGradient>
</defs>
<g fill='none' fill-rule='evenodd' id='icons' stroke='none' stroke-width='1'>
<g fill-rule='nonzero' id='ui-gambling-website-lined-icnos-casinoshunter' transform='translate(-1385.000000, -1904.000000)'>
<g id='4' transform='translate(50.000000, 1871.000000)'>
<g id='notification' transform='translate(1335.000000, 33.000000)'>
<path d='M26,24.6895899 L26,14 C26,7.92486775 21.0751322,3 15,3 C8.92486775,3 4,7.92486775 4,14 L4,24.6895899 L6,24.6895899 C8.6862915,24.6895899 11.6862915,24.6895899 15,24.6895899 C18.3137085,24.6895899 21.3137085,24.6895899 24,24.6895899 L26,24.6895899 Z' fill='url(#linearGradient-1)' id='Path'/>
<path d='M26.5,23 C28.4329966,23 30,24.5670034 30,26.5 C30,28.4329966 28.4329966,30 26.5,30 L3.5,30 C1.56700338,30 0,28.4329966 0,26.5 C0,24.5670034 1.56700338,23 3.5,23 L26.5,23 Z' fill='url(#linearGradient-2)' id='Path'/>
<path d='M21,34 C21,30.6862915 18.3137085,28 15,28 C11.6862915,28 9,30.6862915 9,34 L21,34 Z' fill='url(#linearGradient-3)' id='Oval' transform='translate(15.000000, 31.000000) rotate(-180.000000) translate(-15.000000, -31.000000) '/>
<path d='M17,2.13162821e-14 L13,2.13162821e-14 L11,2.13162821e-14 L11,1.56280256 C11,3.49579918 12.5670034,5.06280256 14.5,5.06280256 L15.5,5.06280256 C17.4329966,5.06280256 19,3.49579918 19,1.56280256 L19,2.13162821e-14 L17,2.13162821e-14 Z' fill='url(#linearGradient-4)' id='Rectangle-Copy-11' transform='translate(15.000000, 2.531401) rotate(-180.000000) translate(-15.000000, -2.531401) '/>
<path d='M24,3 C21.2385763,3 19,5.23857625 19,8 C19,10.7614237 21.2385763,13 24,13 C26.7614237,13 29,10.7614237 29,8 C29,5.23857625 26.7614237,3 24,3 Z' fill='url(#linearGradient-5)' id='Path'/>
</g></g></g></g>
</svg>
                                
                                 <!--<b:include name='moon-sun-icon'/>-->
                                </label>
      
      
        
             <div id='popupBoxSubsceib'>
<div class='contentBoxCnt'>
<div id='clossSvgIconCnt'>
    <svg fill='#000000' id='clossSvgIcon' version='1.1' viewBox='0 0 1792 1792' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d='M1082.2,896.6l410.2-410c51.5-51.5,51.5-134.6,0-186.1s-134.6-51.5-186.1,0l-410.2,410L486,300.4  c-51.5-51.5-134.6-51.5-186.1,0s-51.5,134.6,0,186.1l410.2,410l-410.2,410c-51.5,51.5-51.5,134.6,0,186.1  c51.6,51.5,135,51.5,186.1,0l410.2-410l410.2,410c51.5,51.5,134.6,51.5,186.1,0c51.1-51.5,51.1-134.6-0.5-186.2L1082.2,896.6z'/>
</svg>
</div>
<div class='additionaltitle'>
<p class='TDheading-10' style='text-align: left;'><b>🎯 Notification&#39;s</b></p></div>
<div class='notiftext'>
<p class='TDheading-4' style='text-align: left;'> &#11088; Subscribe Us On Youtube.</p><p class='TDheading-11' style='text-align: left;'>💡To Get Latest Updates And News.</p>
</div>
<div class='subscribeCnt'>
  <a class='subscribeBtn' href='' title='Subscribe'>Subscribe</a>
</div>
</div>
</div>
      </li>
 
After that if such notification icon does not come then below CSS code Paste below the html code pasted earlier 
 <style> 
    #popupBoxSubsceib{
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    transition: 0.3s;
    justify-content: center;
    align-items: center;
    animation: gradient-animation 6s ease infinite;
    z-index: 1000;
}

.contentBoxCnt{
  background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    animation-name: popupBoxSubsceib;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    overflow: hidden;
    height: 260px;
    width:260px;
}

@keyframes popupBoxSubsceib{
  0%{
  height: 0;
  width:0;
  }

  40%{
  height: 260px;
  width:260px;
  }
  60%{
  height: 10px;
  width:10px;
  }
  60%{
  height: 160px;
  width:160px;
  }
  100%{
  height: 260px;
  width:260px;
  }
}

@keyframes popupBoxSubsceibCloss{
  0%{
  height: 260px;
  width:260px;
        
  }
  
  60%{
  height: 240px;
  width:240px;
  }
  60%{
  height: 200px;
  width:200px;
  }
90%{
  height: 260px;
  width:260px;
  }
  100%{
  height: 0;
  width:0;  }
}

.TDheading-10{
  background-image: linear-gradient(to right, rgb(37, 170, 225), rgb(68, 129, 235), rgb(4, 190, 254), rgb(63, 134, 237));
  border-radius: 7px;
  color: #fff;
  padding: 10px 10px;
  box-shadow: rgba(65, 132, 234, 0.75) 0px 4px 5px 0px;
  animation-name: TDheading;
  animation-duration: 2s;
  animation-delay: 2.10s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes TDheading{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 100;;
  }
}

.TDheading-4 {
background-image: linear-gradient(to right, rgb(102, 126, 234), rgb(118, 75, 162), rgb(107, 141, 214), rgb(142, 55, 215));
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
box-shadow: rgba(116, 79, 168, 0.75) 0px 4px 15px 0px;
color: white;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
animation-name: TDheading4;
animation-duration: 2s;
animation-delay: 3s;
animation-fill-mode: forwards;
opacity: 0;
font-weight: bold;
}

@keyframes TDheading4{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 100;;
  }
}
.TDheading-11 {
background-image: linear-gradient(to right, rgb(237, 110, 160), rgb(236, 140, 105), rgb(247, 24, 106), rgb(251, 176, 59));
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
box-shadow: rgba(236, 116, 149, 0.75) 0px 4px 15px.0px;
color: white;
padding-bottom: 10px; padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
animation-name: TDheading4;
animation-duration: 2s;
animation-delay: 4s;
animation-fill-mode: forwards;
opacity: 0;
font-weight: bold;
}

@keyframes TDheading4{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 100;;
  }
}

.subscribeCnt{
  display: flex;
  text-align: right;
  align-items: right;
  justify-content: right;
}

.subscribeBtn{
  color: #fff;
  text-decoration: none;
  padding: 10px 26px;
  background: black;
  border-radius: 25px;
  font-weight: bold;
  animation-name: TDheading4;
  animation-duration: 2s;
  animation-delay: 4.80s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes TDheading4{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 100;;
  }
}

#clossSvgIconCnt{
  display: flex;
  text-align: right;
  align-items: right;
  justify-content: right;
}
#clossSvgIcon{
  width: auto;
  height: 20px;
  animation-name: clossSvgIcon;
  animation-duration: 1.5s;
  animation-delay: 5.10s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes clossSvgIcon{
  0%{
    opacity: 100;
    rotate: 360deg;
  }
  100%{
    rotate: 0deg;
    opacity: 100;
  }
}

@keyframes clossSvgIconCloss{
  0%{
    opacity: 100;
    rotate: -360deg;
  }
  100%{
    rotate: 0deg;
    opacity: -360deg;
  }
}
</style>


Project: Plus UI Theme for Blogger with Animated YouTube Subscription Popup

An Elegant and Modern Plus UI Theme [New Project]If you are a BlogSpot blogger here is a new project for you to import. A unique touch in this project is the interactive notification icon on top right. An animation will engage users, appearing when they click on this icon and hiding the popup asking visitors to subscribe your YouTube channel. This is quite visually appealing and also an amazing idea, which will give you a chance to increase YouTube subscribers directly from your blog.

Important information: This project took a lot of time and effort to develop. Do not copy or redistribute without permission. If you got interested in the project, just get in touch or download it following this URL. This project is copyrighted and unauthorized copying or reposting on other blogs/platforms will be treated as a violation of copyright.

#Blogger #Coding

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.