Html Codes for Jump link, Marquee Text, disable copy button, Animating headings, Floating Slide in Banner, Floating Youtube subscribe button for Blogger website

 

Html code for Blogger website

Welcome back guys.

So, in this post, I will guide you on how to create the following things on the Blogger website. 

Today we are going to see,


  1. Jump link

  2. Marquee Text 

  3. disable copy button

  4. Animating headings

  5. Floating Slide in Banner 

  6. Floating Youtube subscribe button


#1. Jump link 

Jump link is one kind of internal linking strategy. By using a jump link, users can skip unnecessary topics or they can jump to the final answers or any other steps as they want. The jump link strategy gave a better experience to the visitors. This will give easy navigation to the visitors. So let's see,

How to create a jump link strategy in blogger?

STEP:#1

Go to the blog post where you want to add it and switch to HTML mode.


STEP:#2

Add span tag before on heading or paragraph(as you want). Like this

<span id="step1"> </span>
Html code for Blogger


STEP:#3

Then copy the URL of that post and choose the text where you want to link it. Then click link icon and paste URL of that particular post with "#(youridname)".

You can see the following images.

Html code for Blogger



STEP:#4

Then  publish the post and check it.


#2.Marquee Text

Marquee text is an animated text message widget. it gives more attraction to your visitors.


How to add Marquee Text in Blogger

STEP:#1

Go to the blogger layout and choose the section as you want it.


STEP:#2

Click add widget and choose HTML box, paste following code in that.

Html code for Blogger



<marquee bgcolor="#254117"; direction="right"; onmousedown="this.stop();" onmouseup="this.start();" ; behavior="scroll"; scrollamount="6";><a href="http://indbeginners.com/">indbeginners</a>.</marquee>

STEP:#3

Then save the template.


STEP:#4

We have a four queries

✓If you want to add some background  colors then change bgcolor as you want.


✓If you want to change your text in any directions like, Left, right, up and down:

For moving text left add:- direction="left"

For moving text right add:- direction="right"

For moving text up add:- direction="up"

For moving text down add:- direction="down"


✓If you want to change Scrolling Text Behaviour

behavior="alternate"

behavior="slide"

behavior="scroll"


✓If you want to change Scrolling Text With Speed Control scrollamount="6" into as you want it.

#3.Disable copy button

Disabling the copy button is more important for every blog, Because content writing is more difficult. 


How to Disable copy button in blogger

STEP:#1

Go to the blogger theme under the edit html and Search </body>.


STEP:#2

Paste following code just before it,


<script type='text/javascript'> 


if (typeof document.onselectstart != "undefined") { 


document.onselectstart = new Function("return false"); 

} else { 

document.onmouseup = new Function("return false"); 

document.onmousedown = new Function("return false");
}

</script>

STEP:#3

then save the template and check it.


#4.Animating headings

STEP:#1

Go to the blogger theme under the edit html mode and search </head> .


STEP:#2

Paste the following code just before it and save it.


/* Animation Text */
.post h1,.post h2,.post h3,.post h4,.post h5,.post h6{
       -webkit-background-clip:text;
       -webkit-text-fill-color:transparent;
       background-image:linear-gradient( to right, #82CAFF, #98AFC7 50%, #000 50%);
       background-size:200% 100%;
       background-position:100%;
       transition:all 2s cubic-bezier(0.000,0.000,0.230,1)
}
.post h1:hover,.post h2:hover,.post h3:hover,.post h4:hover,.post h5:hover,.post h6:hover{
         background-position:0%
}

#5.Floating Slide in Banner

Floating Slide in banners mostly used for promoting something like affiliate products or services or anything as you want.


How to create floating Slide in banner on blogger

STEP:#1

Go to blogger theme section under the edit html and find </head> and paste following css code before that


<style>
.ind-banner {
         top: 0; 
         right: 0;
         left: 0;
         z-index: 999999; 
         position: fixed;
         background:#ff4f70;
         width: 100%; 
         border-bottom: 1px solid;
         border-color: #c1f0db; 
         box-sizing: border-box;
         transform: translateY(-150%); 
         color: #fff;
         font-family: "Open Sans", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        animation: ind-banner-slide-in 0.8s ease forwards; 
} 
.ind-banner__container {
         display: flex;
         align-items: center; 
         flex-direction: row;
         justify-content: center;
         width: 90%; 
         margin: 0 auto;
         padding: 10px 40px;
         box-sizing: border-box;
 }
.ind-banner__title {
          font-size: 18px;
 } 
.ind-banner__text {
          margin: 0 20px 0 0; 
} 
.ind-banner__button {
         display: inline-block; 
         background: #fff; 
         height: 30px; 
         border: 0; 
         border-radius: 2px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
        padding: 0 20px; 
        color: #974df3;
        font-size: 12px; 
        font-weight: 700; 
        line-height: 30px;
        text-decoration: none; 
        white-space: nowrap;
 } 
.ind-banner-close {
        position: absolute; 
        top: 50%;
        right: 20px; 
        width: 20px; 
        height: 20px;
        transform: translateY(-50%);
        cursor: pointer;
 } 
.ind-banner-close:before, .ind-banner-close:after { 
        content: "";
        position: absolute; 
        top: 50%;
        left: 50%; 
        display: block;
        background: #fff; 
        width: 100%;
        height: 3px;
        border-radius: 2px; 
        transform-origin: center; 
} 
.ind-banner-close:before { 
        transform: translate(-50%, -50%) rotate(-45deg);
 } 
.ind-banner-close:after { 
        transform: translate(-50%, -50%) rotate(45deg); 
} 
@keyframes ind-banner-slide-in { 0% { transform: translateY(-150%); } 100% { transform: translateY(0%); } } 
 
    </style>

STEP:#2

Go to the blogger theme section under the edit html and find <body> and paste following HTML code after that.


<div class="ind-banner" id='indbeg'>
  <div class="ind-banner__container">
    <div class="ind-banner__text">indbeginners.com</div>
    <a class="ind-banner__button" href="/">join Now</a>
  </div>
  <div class='ind-banner-close' onclick='document.getElementById(&quot;indbeg&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
</div>

STEP:#3

✓For changing text then replace "Indbeginners.com" into your text 


✓For button change "join now" to your text.


✓For link replace"#" into your link.


<div class="ind-banner__text">indbeginners.com</div>

    <a class="ind-banner__button" href="#">join Now</a>


#6.Floating Youtube subscribe button

It will increase your youtube subscribe count. This button is floating on your website. Whenever your visitors reload a page it's Automatically presented.


How to create floating Youtube subscribe button in blogger

STEP:#1

Go to the blogger theme section under the edit html mode and search </head> and paste following code just before it.


<style>
/* Youtube Subscribe button */
.IND-sub { 
         position: fixed;
         left: 55px; 
         bottom: 20px; 
         background-color: #f2f2f2; 
         padding: 12px 15px 12px 12px;
         border-radius: 15px; 
         box-shadow: 0 4px 12px 0 rgba(9,32,76,.05);
        display: flex; 
        align-items: center; 
        max-width: 300px; 
        min-width: 280px; 
        color: #000000; 
        overflow: hidden; 
        z-index: 50;
} 
.IND-sub .IND-sub-close { 
        position: absolute;
       top: 4px; 
       right: 8px; 
} 
.IND-sub .IND-sub-close svg { 
       width: 22px; 
       height: 22px; 
       fill: #000; 
} 
.IND-sub .IND-sub-img {
        width: 70px;
        height: 50px;
 } 
.IND-sub .IND-sub-img img {
        display: flex;
        align-items: center; 
        justify-content: center; 
        width: 50px; 
} 
.IND-sub .IND-sub-content { 
       width: calc(100% - 70px); 
       padding-left: 1px; 
} 
.IND-sub .IND-sub-content a { 
        display: block; 
        color: inherit;
 } 
.ind-btn{
        font-weight: 700; 
        font-size: 11px; 
        display: flex; 
        align-items: center; 
        justify-content: flex-end; 
        width: 73px;
         height: 25px; 
         padding-right: 12px;
         background-color: #e4393c;
         border-radius: 4px; 
         color: #fff; 
         margin-top: 12px; 
         bottom: 0; 
         right: 0; 
} 
.IND-sub .IND-sub-content .title {
        display: block;
        font-weight: 700; 
        font-size: 13px; 
        text-align: left; 
        padding-left: 12px 
}
.IND-sub .ind-btn a {
        display: block; 
        color: inherit; 
        color:#fff; 
} 
.IND-sub .IND-sub-content .desc {
        display: block; 
        font-size: 10px; 
        margin-top: 5px;
        color: #000;
        text-align: left;
        padding-left: 12px 
}
.bt-text{
        margin-left:9px
}
</style>

STEP:#2

Go to the blogger theme section under the edit html mode and search <body> and paste following code just below it.


<div class='IND-sub ' id='indbeg'>
<div class='IND-sub-close' onclick='document.getElementById(&quot;indbeg&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
<div class='IND-sub-img'><img alt='INDBEGINNERS' src='#'/>
</div>
<div class='IND-sub-content'>
<span class='title'>INDBEGINNERS</span>
<span class='desc'>Subscribe our Youtube Channel</span>
</div>
  <div class='ind-btn'>
  <a href='your youtube channel link'?sub_confirmation=true' target='_blank'>
  <span class='bt-text'>Subscribe</span></a>
</div></div>

Conclusion

Finally we successfully Html Codes for Jump link, Marquee Text, disable copy button, Animating headings, Floating Slide in Banner, Floating Youtube subscribe button for Blogger website. If you are facing any problems please comment below. If you like this post please share your social media profiles. 


Comments

Post a Comment

Popular posts from this blog

How do I start blogging in 2021-full guide for beginners

Image
 In this post, we will see how to create a blog  How to Start a Blog in 6 Easy Steps Step # 1: Select a perfect niche for your blog Step # 2: Choose a blogging platform Step # 3: Pick a domain name Step # 4: Starting a blog on WordPress and blogger Step # 5: Select a theme and design your blog Step # 6: submitting your site to Google, Bing, Yahoo, and so on.
Read more

Top five FeedBurner alternative for Blogger website

Image
  Google Feedburner announced RSS feeds email service will be removed after this July. What are they going to do? The FeedBurner are transitioning FeedBurner into a more stable, modern infrastructure. They will be turning down most non-core feed management features, including email subscriptions. What we can expect? All existing feeds will continue to serve uninterrupted, and you can continue to create new accounts and burn new feeds. Some management functionality will continue to be supported, such as the ability to change the URL, source feed, title, and podcast metadata of your feed. How to download your FeedBurner email subscriber data Click Analyse, and select Subscribers. Under View Subscriber Details, click CSV (next to "Export"). Top five FeedBurner alternative for Blogger website RapidFeeds Feedity  FeedPress Feedblitz RevResponse #1.RapidFeeds The Rapid feeds, RSS feeds, and display RSS feeds on your website with FREE and simple online RSS service. We can also Publ...
Read more