2018
November 24, 2018
1
Twitter Facebook

 

How do you embed a YouTube subscribe button to your website?

  1. Go to Google’s HTML embed code generator Here.
  2. Enter your YouTube username (not channel name), user ID or channel ID. Use the retrieve channel ID feature on the left panel.
  3. Select your layout and preference for the button.
  4. Google will automatically generate the code for you.
  5. Copy the entire code.
  6. Paste it on your website’s HTML.
Keep in mind that custom website templates might need more steps. Consult your website developer if that’s the case. This is how the page will look like once you’ve entered the correct channel ID or username.

YouTube’s Terms of Use for Subscribe Button Widget

As a precaution, before adding this button we recommend you read and learn YouTube’s terms of use. We’ve outlined the relevant points below:
  1. The subscribe button must be shown clearly on the user’s web page.
  2. Users are not allowed to promote prizes and rewards for people in exchange for clicking subscribe.
  3. Users are strictly prohibited to use the button to track or save subscriber’s data.
There are many other apps that have made website plugins like this, but from a content marketing perspective, the integration between YouTube and a company’s website is highly valuable to improve visitors’ experience.

Benefits of Adding the Subscribe Button To Your Site

  1. If you use both website and YouTube as content marketing channels, this integration offers a bridge that connects both of them together.
  2. From a UX perspective, it saves one click for visitors to subscribe to your channel.
  3. It’s really easy to do, so you might as well do it.
If you’re interested in YouTube video marketing and wish to do something great for your online business.
November 16, 2018
Twitter Facebook

Animation text is use to attract the visitor to tell your visitors what will be your next updates or if you repair a broken link and tell to visitor about broken link using marquee.Animation text (also called Marquee).Moving text which you can put or add anywhere in your blog and in posts.I'm going to explain you How to add marquee text for Blog.and we can customize Moving text in many ways.like change text direction,change text background and control marquee speed.I am Customize text with Using CSS. Now I am going to show ,how to marquee text.if you want to move text. use the codes given below.

Example:1
<marquee>ADD YOUR TEXT HERE.</marquee>
RESULT: ADD YOUR TEXT HEREIn this code text is simple and move text from right to left.
Example:2
<marquee direction="right">ADD YOUR TEXT HERE.</marquee>
<marquee direction="left">ADD YOUR TEXT HERE..</marquee>
RESULT: ADD YOUR TEXT HERE....ADD YOUR TEXT HERE....you can change the direction of the marquee text adding 'direction' attribute. 
Example:3
 <marquee direction="right" width='90%'>ADD YOUR TEXT HERE....</marquee>
RESULT:
ADD YOUR TEXT HERE....
You can change the moving width of marquee text. 
Example:4

 <marquee direction="right" width="100%" style="background:#FF6310"><font color="#000">ADD YOUR TEXT HERE....</font></marquee>
<marquee direction="left" width="100%" style="background:#0080ff"><font color="#000">ADD YOUR TEXT HERE....</font></marquee>
RESULT:
ADD YOUR TEXT HERE....ADD YOUR TEXT HERE....
Now I add text color,text background color for the text.You may replace #ff6310 and #0080ff with hexadecimal color number for background color of Marquee text and also replace #000 with hexadecimal color number for text color.
Example:5
 <marquee direction="right" scrollamount="1">ADD YOUR TEXT HERE WITH CONTROL SPEED.</marquee>
RESULT:
ADD YOUR TEXT HERE WITH CONTROL SPEED.Now in this example I add scrollamount="1" to control marquee speed.if you want to customize the speed then change bold text in above code with your number.and also change  text direction just replace right with left.

Example:6
<marquee direction="left"width="90%"><a href='http://creative-sj.blogspot.com/2013/04/how-to-create-move-text-in-blog.html'>How to add marquee text for  Blogger</a></marquee>
RESULT: How to add marquee text for Blogger
Now in this example move text with link. replace Red color url with your post address.and Replace bold words with your text.
That's All Take 5 second and share this article with friends.

November 16, 2018
Twitter Facebook

Embed a playlist

  1. Sign in to your YouTube account on a computer.
  2. On the left side of the page, select the playlist you want to embed.
  3. Copy the playlist ID from the URL.
  4. Modify the embed code for an individual video by doing the following:
    • In the place of the video ID (after "embed/"), substitute "videoseries?list=".
    • Then paste the playlist ID after the "=".
    • Paste the code into your blog or website HTML.
Example:
  • <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/videoseries?list=PLGLLZAXZDFNpYmh-259GXdoyJu0rE_cGY" width="560"></iframe>

November 16, 2018
2
Twitter Facebook

Embed a video

  1. On a computer, go to the YouTube video you want to embed.
  2. Under the video, click SHARE Share.
  3. Click Embed.
  4. From the box that appears, copy the HTML code.
  5. Paste the code into your blog or website HTML.
Make an embedded video play automatically
To make an embedded video autoplay, add "&autoplay=1" to the video’s embed code right after the video ID (the series of letters that follows "embed/").
Embedded videos that are autoplayed don't increment video views.
Example:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/D6Ac5JpCHmI?&autoplay=1"frameborder="0" 
allowfullscreen></iframe>

November 16, 2018
1
,
Twitter Facebook

Embed a video

  1. On a computer, go to the YouTube video you want to embed.
  2. Under the video, click SHARE Share.
  3. Click Embed.
  4. From the box that appears, copy the HTML code.
  5. Paste the code into your blog or website HTML.
Image result for watch video

                                                                                                                                          
November 16, 2018
Twitter Facebook

Split up blogger pagesHey! It has been long time since I posted my previous post at ABT, so today I am back with yet another post which teaches you how you can split up your blogger post into different pages just like in blogs like Mashable and other WordPress blogs.

To create engagement and to divide the posts in section this method can be very useful. Also if you have a very long post you may use this method so the long post will now be splited into many shorts pages.



You can see the live demo of how it works by clicking the below button

Live Demo


Once you have seen the demo to split up your post what you need to do is just follow the below steps.


Add the code in Post Editor


Firstly open the post editor and switch to HTML tab. By default the Compose tab is selected. After opening it paste the below code

<style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

<div class="content_1">

Add content here

</div>

<div class="content_2" style="display: none;">

Add content here

</div>

<div class="content_3" style="display: none;">

Add content here

</div>

<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Now replace Add content here with the text you want in the respective pages and publish the post.

Important Points to Note before you move on


There are some points you need to note as they are very crucial for this particular splitting.

  1.  Make sure you have the jquery plugin in your blog, if not then add the below code just below the code <head> in your template

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  2.  It is preferred that you first draft the post and at the last point add this code and make respective changes as due to changing of tabs from Compose to HTML and vice versa the code may automatically get changed.
     
  3. You may have got the idea of the code pattern and I guess one can add more pages if they want (here the tut is given only for 3 pages) in case you have any problem drop a comment below and I will try to help you as soon as possible.

Thats it, you are done now. Now you and your visitors can see long posts divided just as you would see in WP posts.
November 16, 2018
Twitter Facebook

How To Create Sticky Floating Bar Fixed at top in blogger blogs?


How To Create Sticky Floating Bar Fixed at top in blogger blogs



Live Demo


Everyone wants a  sticky Floating bar for their blog where they can show the latest announcements or changes they made in blog, blog posts, privacy policy, or to highlight some important posts. you can also say your users to follow you on social networking sites.

We have created this Sticky Floating bar with toggle feature where your users can show or hide this sticky bar according to their desire.

Floating Sticky Bar is is recommended because this sticky widget will be at fixed position at the top of your blog where this widget will get maximum exposure. Like we said above you can show so many things inside this sticky bar. This widget will be full width and has a hide and show feature called toggle. Using this widget you can increase your pageviews. You can take users to your most important post or page.

Features of Sticky Floating Bar Fixed at top in blogger blogs hide button:

Toggle Feature:

We have added toggle button at the right side of the widget so that users can hide and show the fixed floating bar based on their choice. When visitors clicked on UP Arrow the widget will hide and instantly the down arrow will appear and when click on it the widget will display again.

Notifications Fixed bar at top blogger

Less Impact on Loading Speed of your Blog:


We have used very less JavaScript so widget will load fast. And It will not impact much on the loading speed of your blog. 

Design & Color Theme: 


The Design is cool and theme used is dark to bring the premium look to the widget. This theme looks good in light theme blog and dark themes blogs as well. You can customized the colors with few tweaks and can add your favorite colors that match your blog theme.

Installation of Widget:

We know some of you are still not familiar with the codes in the blog templates and don't want to their hand to get dirty. So we have made this widget easy to install. you can add this widget like you add blogger third party widgets from the layout section. 

ChangeLog for Recommended Post For You Widget:

  1. Added Toggle Functionality.
We Checked in Many Templates This Widget Works Very Smoothly and loads very fast. 

Adding This Widget is very easy in less than one minute you can add this widget in your blog.

Adding The Widget in the Blog:

STEP 1:Log in to your Blogger account and Go to your Blogger Dashboard

Blogger Layout

STEP 2:In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

Add a Gadget

STEP 3:Click On "Add a Gadget" As highlighted in the image above.



STEP 4: After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.


STEP 5: Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

 If you have already added Font-awesome link and JQuery script in your blog then don't add this two scripts highlighted in orange color.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
 *{
   margin:0px;
   padding:0px;
   box-sizing: border-box;
 }
        
 :root{
    --AllBloggerTricks_BG_Color: #000; 
    --ABT_Font_Color: #FFF;
 }
    
#ABT_Notification_Wrap {
min-width: 100%;
max-width: 100%;
margin:0px!important;
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:100;
text-align: center;
min-height: 45px;
max-height:45px;
overflow: hidden;
background-color: var(--AllBloggerTricks_BG_Color);
box-shadow: 1px 2px 9px #1B1B1B;
border-bottom: 2px solid #1B1B1B;
}
    
.ABT_Notifications_innerWrap {
text-decoration: none;
color: #FFF056;
font-family: oswald, arial, sans-serif;
font-size: 13px;
font-weight: bold;
margin-top: 14px;
position: relative;
}
        
.ABT_All_Notifications{
 margin-left: 80px;
 margin-right: 80px;

 }        

.ABT_All_Notifications a {
text-decoration: none;
color: var(--ABT_Font_Color)!important;
text-shadow: 0px 0px 2px #242729!important;
font-size: 14px;
}
.ABT_Notification_HeadLines {
margin-left: 10px;
}
.ABT_Notification_HeadLines a:hover {
border-bottom: 1px dotted #FFF056;
}
        
#button { 
position: fixed; 
top: 0px; 
right: 15px;
z-index: 999999999999; 
font-size: 25px; 
color: var(--ABT_Font_Color); 
cursor: pointer; 
padding: 10px 10px;
min-height: 40px;
max-height:40px;
width: 40px;
}
        
#ABT_Brand { 
position: fixed; 
top: 1px; 
left: 10px;
z-index: 999999999999; 
font-size: 19px; 
color: var(--ABT_Font_Color); 
cursor: pointer; 
padding: 10px 10px;
min-height: 40px;
max-height:40px;
opacity: 0.4;
}
    
#ABT_Brand a{ 
color: var(--ABT_Font_Color);
text-decoration: none;
font-weight: bold;
} 

#ABT_Brand:hover{
  opacity: 1;          
}
        
.open{
overflow: hidden;
background: var(--AllBloggerTricks_BG_Color);
min-height: 40px;
max-height:40px;
border:unset!important;
position: fixed; 
top: 0px; 
right: 15px;
border-left: 2px solid #1B1B1B;
border-right: 2px solid #1B1B1B;
cursor: pointer;
width: 40px;
z-index: 999999999999;
font-size: 25px!important;
border-radius: 0px 0px 5px 5px;
box-shadow: 1px 2px 9px #1B1B1B;
border-bottom: 2px solid #1B1B1B;
padding: 8px 8px;
color: var(--ABT_Font_Color); 
}

</style>

<span id='button' class='fa fa-arrow-up' aria-hidden='true'></span>

<div class='ABT_Notification_Wrap' id='ABT_Notification_Wrap'>
<span id='ABT_Brand'><a href='http://www.allbloggertricks.com/' title='All Blogger Tricks'>ABT</a></span>
    <div class="ABT_Notifications_innerWrap">
        <div class="ABT_All_Notifications">
            <span class="ABT_Notification_HeadLines">
            
            <i class="fa fa-line-chart" aria-hidden="true"></i> Trending Today: <a class="ABT_Notification_text" href='http://www.allbloggertricks.com/2017/09/18-most-valuable-google-chrome-addons.html'>18 Most Valuable Google Chrome Extensions</a> 
            
            </span> 

            <span class="ABT_Notification_HeadLines"><i class="fa fa-bullhorn" aria-hidden="true"></i> Announcement:  <a class="ABT_Notification_text" href='#'>Like Us On Facebook</a> </span>
            </div>

        </div>

</div>

<script type='text/javascript'>       
   $(function() {         
$('#button').click(function(e) { 
                
    if ($('#ABT_Notification_Wrap').is(':visible')) {   
     $(this).removeAttr("id").removeClass("fa fa-arrow-down").addClass("open fa fa-arrow-down"); 
     $('#ABT_Notification_Wrap').fadeToggle(); 
    } else { 
    $(this).attr("id", "button").removeClass("open fa fa-arrow-down").addClass("fa fa-arrow-up"); 
    $('#ABT_Notification_Wrap').fadeToggle(); 
    } 
    });     
});
       
</script>

That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.

Customization:

  • The Orange Highlighted Text is responsible for Font-awesome Style-sheet and Jquery Scripts if you already included this style-sheet and script in your blog template then please don't add this both in your blog .
  • The Green Highlighted Text is Responsible for Background Color of the Floating Sticky bar and toggle button. Replace this with your desired color to change the theme.
  • The Light-blue Highlighted Text is Responsible For Font Color  or Text Color of the Floating Sticky bar change this to your desired color.

Changing The Main Notifications and Announcements:

  • The Lightblue Highlighted Text is Responsible For The Link to your desired post or page.
  • The Red Color Text is Responsible for The Link Anchor Text. 

Yo can add more links in the Sticky bar if you want to add more links then add this code after the end of </a>.

<a class="ABT_Notification_text" href='http://www.allbloggertricks.com/2017/09/18-most-valuable-google-chrome-addons.html'>
Your Text
</a>

You also can add your own section by removing our default section.

Just add the below code if you want to add one more section then change according to your need

<span class="ABT_Notification_HeadLines"><i class="fa fa-bullhorn" aria-hidden="true"></i> Your Heading:  
<a class="ABT_Notification_text" href='#your-blog-link-here'>
Like Us On Facebook
</a> 
</span>

STEP 6:  All Done Save the Gadget and Check it in your blog.

    Conclusion:

    We finally added the widget now its time to check and edit the widget according to the need. If you are confused in add links or separate section the comment below we will help you. 

    And those who have added this widget successfully without any hurdles congrats to them. and if you want any styling or improvement notify us we will try to add it for you.


    W3Learners.com

    Contact Form

    Name

    Email *

    Message *

    Powered by Blogger.
    Javascript DisablePlease Enable Javascript To See All Widget