How to Fix HTTPS Mixed Content Errors in Blogger Blogspot Blogs?

Posted On // Leave a Comment
How to Fix HTTPS Mixed Content Errors in Blogspot Blogger Blogs?

After Google Confirms HTTPS as a factor for ranking a site. We know the importance of HTTPS (SSL Certificate) to encrypt blog connections. Blogger users were very excited after Google blogger officially rolled out this feature for blogspot.com Blogs. 

The website's server uses a certificate to prove the website's identity to browsers. Always used certificate from trusted organizations.

What are mixed Content Errors that appear on browsers?

When a blog/website is enabled for https. When a user opened that blog/site then the webpage will download initial HTML content securely over HTTPS then load the follow up content  (such as  images, videos, stylesheets, scripts) over insecure HTTP one by one from top to bottom if in that follow up content any script or image which starts with http will consider as mixed content. This trigger Browser error to display and degrade the HTTPS security and effects badly user experience of your blog/website.

Mixed content can be caused by HTML markup External Stylesheets or JavaScript content in:
  • Blogger Blog Templates Source
  • Post and page source
  • Third Party Gadgets source

How to Check your Blog for Mixed Content Errors?

For the best result use latest version of your browser . Use (Google Chrome the fastest and most user friendly browser)

On your browser, visit your blog using HTTPS Protocol for example :  https://yourblogname.blogspot.com.

Wait for the blog to get fully loaded after that press F12 on your keyboard to open developer tools then click on console to see the errors and warnings .
Or 

Go to Tools >> Developer >> Console 

Or 

Use this shortcut CTRL + SHIFT + J to open the JavaScript console

Look for mixed content errors:



If you are using Google Chrome You will see this type of alerts and warnings at the top left side in the address bar 

The site isn't using a private connection. Someone might be able to see or change the information you send or get through this site. 
You might see a "Login not secure" or "Payment not secure" message. We suggest that you don't enter sensitive details, like passwords or credit cards.
On some sites, you can visit a more secure version of the page:
Select the address bar.Delete http://, and enter https:// instead.If that doesn't work, contact the site owner to ask that they secure the site and your data with HTTPS.
Source :  Google




“Mixed Content: The page at 'https://yourblogname.blogspot.com' was loaded over HTTPS, but requested an insecure script 'http://<some-url>/script.js'. This request has been blocked; the content must be served over HTTPS.”

“Mixed Content: The page at 'https://yourblogname.blogspot.com' was loaded over HTTPS, but requested an insecure image 'https://yourblogname.blogspot.com/image.jpg'. This content should also be served over HTTPS.”

Make a list of unsecured urls and open and check the static pages too.

In Blogger The Most Common mixed content errors found in template and gadgets.

Fixing Mixed Content Errors in Template:

If you see the console and found same error in multiple pages or posts this means the error caused by insecure Scripts, Stylesheets or images.


Go to Blogger >> Template >> Edit HTML >>



Press CTRL + F And Search for :
http://

Find all http:// links replace it with https:// do it for all instances.

After Adding https to all the scripts, image links, external stylesheets now its time to save the template.

Advised To Blogger Users Switching To HTTPS:

Before Enabling HTTPS make sure all the Images, source links, Scripts, External Stylesheets start with https:// 

When you are adding third party widgets from the layout section check whether there is an image, Scripts like Font-awesome, Jquery etc starts with https://

If the Mixed Content error appears on static pages like Contact, About etc or in an individual post then open and edit that page/post in the editor and switch to html and then type ctrl + F then a search box will appear search for http:// then change all the http to https .


Read More >>

Top Hosting Enterprises With Free WordPress Host Transfer Services

Posted On // Leave a Comment

Top hosting companies that offer free WordPress host migration services





    Are you an aspiring writer who wants to start blogging? You are determined to create quality content on your blog to gain heavy traffic. First, you have to create a website and for this, a website hosting provider is required that charges to create a domain name. 

    We always end up choosing anything which is cheap and a writer does exactly the same thing by picking up the cheapest hosting option and registers his website domain name. Finally, you can start blogging with all the effort and enthusiasm! 

    What if, the website goes well for a few months as it is content-rich, ultimately leading to a heavy traffic but suddenly one day, it stops working? "There might be virus on your website" is the excuse you receive from the customer care service of the hosting provider. Cheap hosting providers do not guarantee fast and reliable servers. While money should not be a factor while choosing a hosting provider, there are some important factors in this decision.

    1) Customer Support Channels – This refers to the diversity of support channels that characterize customer support service of by your hosting provider.

    2)Control Panel which is user-friendly – A good hosting provider must have an easy-to-understand control panel, so that consumers can control their accounts easily, thus getting a user-friendly experience. A must-have!

    3)Type of hosting – This is important as well. Before you sign up for a web hosting provider, it is important to know what kind of service your website will require, the kind of server your business needs, your budget and the type of services the hosting provider will offer. 

    4) The speed of the servers – Another important factor, the speed of the server of the hosting provider you choose must be fast so that pages load fast. This will give a smooth user experience and faster page-loading timings.

    5) Service Level Agreement(SLA) – A proper hosting provider must have a service level agreement that defines the service level expected from the provider. So, before you opt for any provider, make sure to check its service level agreement.

    6) Customized Plan – Having a customized plan is important for any hosting provider to give users the flexibility to customize their website so that not only them but the clients can have a good user-experience as well.

    Now that we have seen all the factors in choosing a proper hosting, let us discuss the top hosting companies that offer free WordPress host migration services.

    SiteGround :

    Established in 2004, SiteGround is the highest-rated hosting provider in the WordPress community and equally popular, providing the best service quality. 

    Starting at just $3.95 per month, the WordPress hosting service of SiteGround that is engineered for a speedy performance and designed to give you the best security and most importantly, crafted for WordPress. 

    It also gives you amazing WordPress tools like 1-Click Installer, Auto-updates, WordPress Staging and more. Ever more reason to get this!

    Built on the latest SSD hardware, the server speed is fabulous. With SiteGround’s very own SuperCacher, your WordPress speed will increase drastically!

    There is transparency in the services and plan for your maximum convenience. In addition, the security tools are free along with auto-managed WordPress hosting. With a helpful 24x7 customer support and easy plans for web hosting services, SiteGround is definitely one of the best!

    InMotion Hosting :

    A top-rated US-based web hosting company, InMotion Hosting is made for active bloggers which definitely proves to be a boon for increasing the growth of the blog. Shared Server is not overbooked by InMotion Hosting, which eventually gives you a good speed! 
    InMotion Hosting has a commitment to all open sources like WordPress, b2evolution, and Joomla. With a superb customer service that handles everything from billings to customer support, this is definitely one of the best hosting services!

    Inmotion is loved by many around the world and why not? It provides amazing services like: -

    • Unlimited disk space.
    • Free SSD Drives.
    • Restore option.
    • Free site transfer.
    • Free Data backup.


    The best thing is that a separate login is not required for domains and Control Panel, both can be accessed by a single login! Inmotion Hosting gives you a fast web hosting, secure servers so you have nothing to worry about, and an easy to setup with a free website migration service and other features. So, go ahead and give this one a try!

    Bluehost :

    Rated as No.1 in web hosting for small businesses, Bluehost offers unlimited hosting resources. 

    Bluehost has an optimized hosting for WordPress that is fast, secure and simple. It gives you a scalable cloud infrastructure and an easy-to-use dashboard. Convenient, isn’t it? In addition, you also get a great backup feature and highly-integrated security for your site.

    With smooth email management and an intuitive control panel for all users, Bluehost offers you great features like free Site Builder with templates, free domain, and free SSL certificates. Some other arrays of features are mentioned here below: -

    • Instant scaling
    • Automated failover
    • Data mirroring 
    • Integrated Caching and CDN


    With seamless backup and security, Bluehost offers expert customer support, 24x7! 

    DreamHost :

    A Los Angeles- based award-winning WordPress hosting, DreamHost, gives you the chance to host unlimited sites along with unlimited subdomains and addon domains! 
    DreamHost has hosting plans that include automatic updates and backups, easy setup and 100% network uptime without any bandwidth limitations. 

    Wow! Being of the oldest web hosts, reliable hosting solutions are provided by DreamHost. Website files can be accessed through SSH, FTP, SFTP, and Shell. Also, the free domain comes with Whois Privacy. You can create an unlimited SQL database. DreamHost provides an affordable WordPress hosting for new users, starting at just $7.95/month!

    With 24x7 WordPress Support, fast optimum performance and WordPress pre-installed, there is no reason why you should not try this WordPress hosting service!

    Kinsta :

    Website migration can often be a headache but not with Kinsta! With over 8 years of experience with WordPress, Kinsta is the best-managed WordPress hosting solution available currently. Apart from impressive air-tight security and lightning-fast page load times, let’s look at some of its other features as well: -

    Free Site Migrations – Kinsta’s expert migration team helps you migrate in a jiffy! Kinsta assigns a temporary domain to your migrated site, allowing you to check everything before you point your domain to Kinsta servers.

    Speed Obsessive Architecture – Kinsta comes with a lightning fast structure, powered by PHP 7, Nginx, LXD containers and MariaDB to ensure blazing-fast website load times!


    High-Security Network – Kinsta ensures you top-notch security. With 24x7-monitoring of your sites and detecting malicious activities, you will have nothing to worry about.

    Powerful Admin Dashboard – Kinsta also comes with a user-friendly dashboard, giving you easy access to all the features.

    Although Kinsta is one of the best hosting sites, it is also one of the highest-priced as well, with a starting price of $100. Ouch!
    So, if money is not too big a factor for you, Kinsta is a must-have with a cavalry of features and stability.

    Conclusion:

    You must move your site ASAP if you are facing any website downtime issues or any internal server errors. But, migrating is a hassle for many bloggers and digital marketers who are non-techy. Thanks to some of the top hosting companies offering free website migration, you can now put your focus on running your websites properly. 

    So, if you are a blogger or just anyone, looking for a proper WordPress hosting provider, go through these and choose the best one for you for a proper migration as well. All the best!


    That's It Thanks For Following our Tutorial '' Top Hosting Enterprises With Free WordPress Host Transfer Services '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.


    Read More >>

    12 Best WordPress Plugins For Bloggers Creating Online Courses

    Posted On // Leave a Comment

    12 Best WordPress Plugins for Creating Online Courses




      Are you someone who loves sharing his ideas? Let’s assume you have done everything right – from blogging to collecting emails and giving back to the people through your content. Everyone loves your work and are eagerly waiting for you to announce a book, maybe a product or just something they can purchase! You can easily do this by creating an online course by using WordPress, without putting too big a hole in your pocket. Using WordPress is easy as well!

      Anyone who wants to create an online course for any purpose whatsoever can make use of WordPress plugins. Like everything in the world, they too come with their pros and cons. So, let’s take a look at some of the best WordPress Plugins in the tech market.


      Zippy Courses :

      Zippy Courses

      If you are looking to sell a course on its own website, this is the one to go with.Featuring an offer launch for windows, universal login for various courses, a crisp and easy interface, and content drip delivery, Zippy Courses is definitely a fantastic choice! Its widgets also make course navigation a piece of cake. In addition, Zippy Courses now feature its own social triggers theme, which is a bonus if you are not a designer. Kudos!

      Pros: -
      • This is an independent solution, requiring no other plugins.
      • Supports dripping content out.
      • Seamlessly runs more than one course per site.

      Cons: -
      • It requires its own site and cannot be part of a larger one.
      • Does not support certificates or coupons yet.
      • Does not support a random selection of quiz questions.

      Integrations– PayPal, MailChimp, Stripe, and Infusionsoft.
      Cost - $199 to $299

      LifterLMS :

      LifterLMS

      LifterLMS is hands-down one of the best plugins for WordPress! With a built-in payment process, membership options, and gamification, it works well as a stand-alone plugin but can also be put on another site with contents in it. LifterLMS gives you plenty of flexibility since it does not require a site of its own; you can easily install it on the same site as your blog. As a bonus, it also has an extension for InfusionSoft as well! Yay!

      Pros: -

      • Supports coupons and certificates.
      • Supports course scheduling as well as prerequisites.
      • Has BuddyPress support and WooCommerce integration as well!
      Cons: -
      • Incorrect metabox placement issue, almost missing the drip feature.
      • No random questions though question banks are supported.
      Integrations – Add-on integrations with PayPal, Stripe, WooCommerce,Ontraport, and others.
      Cost - $0 to $499

      LearnDash :

      LearnDash

      If you are serious about creating an online course, have the time to learn and want all the features without any tweaking,LearnDash is the one of the best options for you. It is seriously powerful with a ton of features. For example , it is a plugin that is totally capable of integrating with WooCommerce, iThemes Exchange or EDD for payment methods. Need I say more? Let us see the other features mentioned in the Pros section. 

      Pros: -
      • Has everything, including certificates and quizzes.
      • Choice of lesson dripping and/or scheduling.
      • Supports assigned homework and allow instructors to review uploaded assignments as well.
      • Compulsory timer before any lesson can be marked as complete.
      Cons: -
      • Takes time to learn all its features. 
      • Customizing features is not easy for developers.
      Integrations – BuddyPress, WooCommerce, Stripe, and others.
      Cost - $19 to $299

      New Rainmaker :

      As if Rainmaker was not amazing enough, CopyBlogger introduced a new Rainmaker platform that snow supports online courses and lessons as well! If you want a plugin to do everything instead of making your site a DIY project, try this one! Rainmaker packs all the features to help you create a wonderful online course and provides beautiful landing pages to sell all your courses as well! 

      Pros: -
      • If you are already a Rainmaker member, no other integration is required.
      • Included in the plan, so no plugin is needed.
      • Helps you treat your customers as a whole – from members to students.
      Cons: -
      • It is just the first version, so be ready for issues and bugs.
      • Features cannot be customized. 
      • There is still no clue about the release of its full list of features.

      Integration – WooCommerce, BuddyPress, Ontraport, and others.
      Cost - $99 to $175

      WP Courseware :

      WP Courseware

      WP Courseware is a plugin that gives the best of both worlds. It can be used by a beginner, who is about to create his first online course and can also fulfil the desire of a developer to jump in and tweak some of the features! It comes packed with tons of features for creating small as well as large online courses, and each course can have several modules, units, and quiz banks. Supporting content drip features and pre-requisites, and promising the ease of usability and ability of tweaking features, this is definitely a plugin worth trying! Go ahead!

      Pros: -
      • One of the cheapest solutions with a price point of $99-$175
      • Works well with other plugins on your site.
      • Supports certificates and quiz timers.
      • Has integration with memberships and eCommerce plugins as well.
      Cons: -
      • Uploading assignments are not very robust.
      • Lesson times are not available.
      • To drip lessons, a membership plugin is required.

      Integration – WooCommerce, BuddyPress, Ontraport, and others.
      Cost - $99 to $175

      Sensei :

      Sensei

      Created by the folks of WooCommerce, Sensei is a powerful WordPress plugin that is easy to use and flexible. Course creation is very easy with this plugin, that also allows you to run quizzes and assignments, and grade them as well.A feature-rich plugin, Woothemes Sensei is easy to use and is definitely a good choice as it now has the ability to drip course content.

      Pros: -
      • Integrates seamlessly with WooCommerce.
      • Has a quiz bank, supporting random questions.
      • Includes course analytics, unlike other plugins.
      • Allows certificates and badges for students.

      Cons: -
      • No timers for quiz questions and lessons.
      • Assignment uploads are not robust here as well.

      Integrations – It integrates with WooCommerce plugins for membership.
      Cost - $129 – 299

      LearnPress :

      LearnPress

      A free plugin, LearnPresscomes without a setup wizard, which means that you can set it up in a way you want. Convenient, right?
      LearnPress has several free and paid add-ons, allowing you to extend its features. It also has prerequisites, certificates, and quizzes as well, making it a must-try plugin for all!

      Pros: -
      • Supports course categories.
      • Course creation process is easy via lessons, questions, etc.
      • Supports content exporting.
      Cons: -
      • Initial setup is difficult for beginners.
      Integrations – PayPal, Stripe, WooCommerce, and others.
      Cost – Free with paid add-ons.

      CoursePress Pro :

      CoursePress Pro

      Another free-to-use plugin, CoursePress Pro offers online marketing and creating courses in an efficient way. A plugin with easy-to-setup courses, grading and reporting, this is a treat for beginners who are looking to open their first online course. With wonderful features and high efficiency, CoursePress Pro is definitely worth a try.

      Pros: -
      • Supports quizzes, certificates and automated assessments.
      • Allows content drip delivery.
      Cons: -
      • Assignment uploads are not up to the mark.
      Integrations – PayPal, WooCommerce, and MarketPress.
      Cost – Free

      Namaste LMS :

      Namaste LMS

      A new-comer in the world of plugins, Namaste LMS is a promising plugin, giving you benefits of a system of grading points for students, as well as a gradebook. Online course creation is easy as well, with easy-to-use features. Due to its consistent nature, this plugin has received a lot of great reviews and is widely used by many professionals also.

      Pros: -
      • Supports certificates.
      • Supports a grading points system and Gradebooks!

      Cons: -
      • Shopping cart and coupons are only available when one upgrades to Namaste! Pro.

      Integrations – Watu for creating tests; Stripe and PayPal for payments.
      Cost - $0 to $127

      LucidLMS :

      LucidLMS

      As the name itself suggests, this plugin is very lucid and user-friendly. Just like other plugins, it also offers the usual like quiz banks and certificates, but an added feature is course outlining, making the task easier for students. You could definitely give this a try if you are looking for something easy-to-go and a little different. 

      Pros: -
      • Supports certificates and quizzes.
      • Comes with course outlining.

      Cons: -
      • It comes with a time-limited course access.
      Integrations – BuddyPress, PayPal, and WooCommerce.
      Cost – Free

      WorldClass :

      WorldClass

      This is a plugin that is loaded with features! From course sales pages to analytics and gamification, it is bound to satisfy all your WordPress needs. WorldClass aims at making online course creation easier. Add to that, it is a plugin that has its own mobile app! Go ahead and try it!

      Pros: -
      • Supports social logins and single sign-on.
      • Enables course sales pages and has memberships.
      • Supports quizzes and tests.

      Cons: -
      • Can be expensive, depending upon usage.
      Integrations – PayPal, MailChimp, Stripe, and others.
      Cost - $0 to $455 per month.

      WPLMS :

      As the last plugin for this list, I would like to mention WPLMS, also a newcomer plugin but is equipped with good features. Along with course sales pages, it also offers you a messaging system, besides the usual features of all plugins. This will allow you to communicate with your students and anyone with any queries. This is worth a try too, as its messaging system is a major plus-point. 

      Pros: -
      • Supports quizzes, examinations, and assignments.
      • Supports a course sales pages system and certificates.
      Cons: -

      • No other integration other than PayPal is supported.

      Integrations – PayPal
      Cost - $29 to $145

      Conclusion:

      All these plugins are not ordered in any way, none of them are superior to the other but each of them has many things to offer you. Thus, if you are a budding online course creator, go through this list of plugins and choose the one that suits you best!

      See we have shared the positive and negative factors of the plugins now it is your choice which feature suit you and your topic you want to teach. Many plugins have certificate issuing options after the completion of the course. Many have Progress tracker which will track the progress of the student.

      If you are a beginner and you don't know how to use this plugins then try the free or trail versions after knowing properly you can go with premium versions. Try the most affordable plugin and most featured plugin. Before choosing plugin see whether the author  updating the plugins at right intervals of time.

      What type of course you are thinking to create? Have you already created an online course ? Please share your thoughts in the comments below. If you see any plugin does not deserve to be in the list then please share your valuable feedback with reasons. 


      That's It Thanks For Following our Tutorial '' 18 Most Valuable Google Chrome Extensions Every Blogger Must Have'' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.


      Read More >>

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

      Posted On // 2 comments
      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.


        That's It Thanks For Following our Tutorial '' How To Create Sticky Floating Bar Fixed at top in blogger blogs? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

        Incoming Search Terms:


        Read More >>