Split page in post With Navigation Number in blogger.

Split page in post With Navigation Number in blogger.

How to add Split Pages in Posts by Navigation Number with Gradient Colour(New Version)


Split page in post with Navigation Number.



Some time ago I shared a post about How to Add Checkmark in Blogger post Title? and in this post, BPF will share tips on how to Split Pages in Posts with Navigation Numbers.


#Whar is Split Page in Post with Navigation Number?


Maybe you have visited a news site or comic reading site where the contents of each post are divided into several pages, usually, in these posts, there is a Next button which when we press the button will lead to the next page. Likewise, with the tips that I will provide, the way it works is to divide a few paragraphs from the post content into sections according to your friend's wishes.




#Advantage of the Split page in the post by Navigation Number


Some of the benefits that you can get if you apply these tips include:



  • The page will feel tidier, suitable for friends who have articles with long content, and save space so that visitors are not tired of scrolling the page.
  • Suitable for news sites and comic reading sites.
  • Can be used as a marker for visitors on which page to continue reading later.
  • Increase the number of Pageviews because there is a page refresh function when pressing the navigation button to the next page.


Well, for those of you who want to add this method to their blog, please follow the steps below.



Split Pages in Posts by Navigation Number



As usual, open the Blogger page》 Click the Themes and Backup》than click the Edit HTML button > Add below CSS code before</head>


<b:if cond='data:view.isSingleItem'>
<style>
/* Membagi Halaman di Postingan */
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{margin:30px auto;text-align:center;padding:0;overflow:hidden}.pagearl .buttonar{background:#fff;font-weight:400;display:inline-block;color:#222;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,0.1);border-right:0;margin:auto;font-size:14px;padding:.4rem .75rem;transition:all .1s}.pagearl .buttonar:last-child{border-right:1px solid rgba(0,0,0,0.1)}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#fafafa;color:#222}.buttonar.arlinapage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.arlinapage:hover{background:#2980B9;border-color:#2980B9;color:#fff}
</style>
</b:if> 

Again Add the following below code before </body>

<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
function get_n(halaman){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===halaman)return void 0===o[1]||o[1]}$(document).ready(function(){var halaman=get_n("halaman");$(".post-content").hide(),void 0===halaman?$(".content_1").show():$(".content_"+halaman).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagearl").append($('<a href="'+t+"?halaman="+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $(".pagearl").hide();void 0==halaman&&$(".buttonar.n1").toggleClass("arlinapage"),halaman==halaman&&$(".buttonar.n"+halaman).toggleClass("arlinapage")});
//]]>
</script>
</b:if>


Then click the Save theme button .


Then for the caller code, please open the post editor and add the following markup on the HTML tab (Not Compose)


<div class="post-content content_1">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_2">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_3">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_4">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_5">
ISI ARTIKEL DI SINI
</div>
To CONTENTS ARTICLES HERE replaced with the content of posts and to content_1 until content_5 signifies the number of navigation from posting content that you want to share. To add the pages you want to split, simply change the numbers from content_5 to content_6 and so on.


Examples like this:


<div class="post-content content_4">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_5">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_6">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_7">
ISI ARTIKEL DI SINI
</div>
<div class="post-content content_8">
ISI ARTIKEL DI SINI
</div>


Then add the navigation code below at the end of the post.


<div class="arlinapage">
</div>
<div class="pagearl">
</div>


But if my friend wants to bring up the navigation code in each post automatically, try adding the code above below the code <data:post.body/>(Post body specifically for posting pages).

Examples of application like this:

<data:post.body/>
<div class='arlinapage'/>
<div class='pagearl'/>

Finish and see the results on your blog.


Replace the CSS code if you want to add it with a minimalist look 


# Minimalist Look

<style type='text/css'>
/* Membagi Halaman di Postingan */
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{position:relative;background:#fff;margin:0 auto 20px auto;text-align:center;padding:20px;font-size:14px}.pagearl .buttonar{background:#e74c3c;font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 4px 0 0;border-radius:3px;transition:all .2s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#c0392b;color:#fff}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:#333;color:#fff}
</style>

Then save it and see Result.

 

Or replace it with this CSS code if you want to add it with a Gradient animation display

#Gradient Animation

<style>
/* Membagi Halaman di Postingan */
@keyframes Gradients{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{background:#517aef;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;margin:30px auto;text-align:center;padding:10px;border-radius:3px;overflow:hidden;box-shadow:0 10px 10px -5px rgba(0,0,0,0.15);animation:Gradients 15s ease infinite}.pagearl .buttonar{background:rgba(255,255,255,.2);font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 5px 0 0;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,0.1);transition:all .6s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:rgba(255,255,255,.45);color:#fff;box-shadow:0 1px 10px rgba(0,0,0,0.1)}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:rgba(255,255,255,.95);color:#0984e3}
</style>

Save it and see Result.

Result


Related Posts

》Recommended Slide Box Widget on Blogger.
》Gradient Newsletter Widget on Blogger in 2020.

》How to install Go up and Down botton in Blogger?

》How to Add Sitemap page on Blogger.


Okay, that's all from Blog Plugin free on how to  add Split Pages in Posts with Navigation Numbers . Hopefully this is useful for my friend. If any problem with this code please contact us or comment 

Thanks.

All code Credit goes to Arlina code.
How to Add Sitemap page on Blogger.

How to Add Sitemap page on Blogger.

Sitemap Widget on Blogger||How to Add Sitemap page on Blogger 2020? 

Add Sitemap page on Blogger.

Today, I am going to share another Most important Blogger Widgets by Demand of many bloggers that is how to add a sitemap widget on Blogger. In this post, you will know about the Sitemap Widget and its Benefit.


Table of Contents

  • What is Sitemap on the blogger?
  • What is its Benefit or Advantage?
  • How to Install on blogger?
  • Final decision or Conclusion.

What is Sitemap on Blogger?


In the Blogger, an Archive widget had provided that contains an archive of all blog articles based on publish time. Many templates provide a Sitemap page in the HTML section but sitemap work only on a premium template. You can't paste any outer code in the Html edit templet section because all are not user Friendly or Responsive code. 


However, because it is the package in the form of a widget, the customization is limit and the aesthetic of the layout is hard to adjust. So to make it more organized and Unique, here Blog Plugin Free will share a Users friendly and Responsive Html code on How to Add a Sitemap Widget on Blogger.



 What's it Benefit? ( Sitemap on Blogger)


The advantage of Sitemap How to Add a Sitemap Widget on Blogger is that the blog appears more professional than before. Besides, visitors can also view and search for all of our blog articles easily. Of course, it will add a plus for the blog when visitors open any articles on this sitemap widget.


  • The blog looks Professional
  • Visitors easy find your blog
  • Plus number for your blog
  • All blog appears directly in Sitemap with labels, post title and published date 




Now, It's your time to make your blog professional and attract more visitors.


Note: All code Provided by Arlina Code. This code is Unique and Responsive for only bloggers.



Related Post




Okay, now get on with it, the way to apply is easy.

Please follow the steps below:



How to Add a Sitemap Widget on Blogger


First, go to blogspot> Pages> Create a new Page> Add the code below on the HTML tab of the page post and Publish it.

<div class="separator" style="clear: both; text-align: center;"> <a href="#" style="margin-left: 1em; margin-right: 1em;"><img alt="Sitemap" class="lazyload" style="border: none;" data-original-height="444" data-original-width="1200" src="#" title="Sitemap Arlina Code" /></a></div> <div id="bp_toc"> </div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=99999&amp;callback=loadtoc" type="text/javascript"></script> <style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none}#bp_toc{color:#000;margin:0 auto;max-height:686px;overflow:hidden;overflow-y:auto}span.toc-note{margin:0 auto 25px auto;text-align:center;line-height:normal;display:table;position:relative;overflow:hidden;font-size:14px;padding:10px 20px;background:#007bff;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:100%;color:#fff;border-radius:99em;font-weight:500;transition:all .3s}span.toc-note:hover{background-size:200%}.toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px}.toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px}.toc-header-col3{padding:10px;background-color:#fff;width:125px}#bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:1px solid rgba(0,0,0,0.05);background:#fff}#bp_toc td.toc-header-col1{}#bp_toc td.toc-header-col2{}#bp_toc td.toc-header-col3{}.post td{background:transparent}#bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:1px solid rgba(0,0,0,0.05)}#bp_toc td a{background:transparent;color:#222;float:none;border-radius:0;padding:0;font-size:100%;display:initial;box-shadow:none}#bp_toc td a:hover{color:#0984e3}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-weight:500;letter-spacing:0.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db}#bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber}.toc-entry-col1{counter-increment:rowNumber}#bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);display:inline-block;min-width:38px;margin-right:.7em;background:#fc5c65;color:#fff;border-radius:99em;font-weight:500;text-align:center;font-size:12px;padding:0;line-height:1.7} #bp_toc td.toc-entry-col1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px} #bp_toc::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}#bp_toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}#bp_toc::-webkit-scrollbar-track{background-color:transparent}#bp_toc::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.25)} @media screen and (max-width:768px) { #bp_toc td.toc-entry-col1{white-space:normal;overflow:visible;text-overflow:initial;max-width:100%}#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3,#bp_toc table tr td.toc-entry-col1:first-child::before{display:none}} </style> 

Then click Publish page and See result.


Result



After pasting any code in the Html page if you want to make a few changes with your style here you can change.


<a href="#" with your image (Imgae format Webp) url , <img alt="#" enter title only.

Height =444 and width =1200 You can change with your Compatibility.

Src="#" enter image url



Finally

That's it from Blog Plugin Free on how to add sitemap on Blogger. I hope you like this post and want to add in your website. I hope before paste any code to your website you read and follow above steps Carefully. If you have any problems with this code please contact us. We will help you.

Thanks.




Gradient Newsletter Widget on Blogger in 2020.

Gradient Newsletter Widget on Blogger in 2020.

Gradient Newsletter Widget on Blogger in 2020||How to install a Gradient and Responsive Email or Newsletter Subscription Box on Blogger?



Install a Gradient Newsletter Widget on Blogger in 2020.



Today, I am going to share with you another Blogger Widgets on jow to install a Newsletter Widget on Blogger. In a Past post, I shared with you how to Delay Image Loading Before Scrolling Pages in Blogger. You can check it now.



Now, This time is How to install a Newsletter Widget on Blogger From Blog Plugin Free. I made this post at the demand of Blogger Friends who wants to install a Gradient and Responsive Subscription Box on their Blog. You can also install Subscription Box From Blogspot without adding any Code but it is not Gradient Box. 


Before You install any Subscription Box on Blogger you might know about what is Subscription Box, Its Benefit, and How to install it. So, Let's Know it.




What is the Responsive Subscription Box on Blogger?


Responsive Subscription Box is Blogger Widgets where users Contact or Subscribe to your Newsletter. While users Subscribe your Newsletter, they get First Notifications about your New Post. It is a Responsive and Users Friendly Blogger Widgets. So, don't worry about it.




It's Benefit or Advantage.


  • Responsive Subscription Box so it is user friendly

  • Users Easily Find your New post.

  • Users Can Easily Subscribe Newsletter.

  • Your blog has Gradient and Good looking Subscribe Box.

  • Attractive more users to visit



Note:All code provided Arlina Code. Provided all in this website is 100 percent Unique and Responsive only for blogger.



Users Notice.


Those of you who are familiar with blog coding might have no trouble finding the code on a blog page because all the desired code will be very easily copied via Inspect Elements or Page Source from the blog page. However, as an ethical human being, asking permission is the best thing. 


 If you want to install a Gradient and Responsive Subscription Box in Your Blog and want to make a Good Subscription Box for Your blog, you must follow a few steps.



Immediately, here you only need to follow these simple below steps.


 How to Install a Newsletter Widget on Blogger


  •  First, open Blogger》Click the Themes menu and Backup 》 Click Edit HTML> Then find and add the code below before </head>


<style> /* Subscribe Box */ *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input,select,textarea{width:100%}#subscribe-box p{font-size:14px;color:#767676;margin:0 0 15px;padding:0;line-height:normal}#subscribe-box .emailfield{position:relative;margin:auto;z-index:1}#subscribe-box .emailfield input{background:rgba(255,255,255,.9);padding:13px 20px;color:#aaa;border:1px solid rgba(0,0,0,0.05);font-size:14px;margin-bottom:16px;border-radius:99em}#subscribe-box .emailfield input:focus{color:#222;outline:none;border-color:rgba(0,0,0,0.05);box-shadow:inset 0 0 0 3px rgba(0,0,0,0.05)}#subscribe-box .emailfield .submitbutton{display:block;position:relative;overflow:hidden;background:rgba(255,255,255,.25);color:#fff;width:100%;font-size:15px;font-weight:bold;border:0;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.13);transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(255,255,255,.35);color:#fff;box-shadow:0 3px 3px rgba(0,0,0,0.1), 0 3px 4px rgba(0,0,0,0.13)}#subscribe-box .emailfield input:focus.submitbutton{color:#fff}#subscribe-box .emailfield form{position:relative}#subscribe-box .emailfield .submitbuttonlabel{position:absolute;top:3px;right:8px;display:inline;padding:8px 12.5px 8px 20px;cursor:pointer;font-size:13px}#subscribe-box .emailfield .submitbuttonlabel svg{fill:#767676;width:22px;height:22px;vertical-align:middle;transition:all .3s}#subscribe-box .emailfield .submitbuttonlabel svg:hover,#subscribe-box .emailfield .submitbuttonlabel svg:focus{fill:#568af5}#HTML98{position:relative;overflow:hidden;padding:20px;border:1px solid #fff}#HTML98:after{content:&#39;&#39;;display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-repeat:no-repeat;border-radius:120px 0 0;transition:opacity .3s;opacity:1}#HTML98:before{content:&#39;&#39;;display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(230deg,#ff4169,#8b41f6);background-repeat:no-repeat;border-radius:120px 0 0;transition:opacity .3s;opacity:1}#HTML98:hover:after{opacity:0}#HTML98:hover:before{opacity:1}#HTML98 h2:after,#HTML98 h3:after,#subscribe-box .emailfield input[type=submit]{display:none} </style>



  • Then click the Save theme button.


  • Then click the Layout menu> Create a New HTML  section / JavaScript widget> Then add the markup code below in it.


<div id='subscribe-box'> <p>Get notifications from this blog</p> <div class='emailfield'> <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=ArlinaCode&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input required='required' type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email Address&quot;;}' onfocus='if (this.value == &quot;Email Address&quot;) {this.value = &quot;&quot;;}' value='Email Address'/> <input class="submitbutton" type="submit" id="email-submit" value="Subscribe"/> <label class="submitbuttonlabel" for="email-submit"> <svg class="icon" viewbox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><g transform="translate(2.000000, 3.000000)"><path d="M14.1972579,8.17124146e-14 C17.3979916,0.00978563072 19.990286,2.62120148 20,5.84554455 L20,5.84554455 L20,7.30693069 L19.99354,7.4036631 C19.9466817,7.75161611 19.6506049,8.01980198 19.2923485,8.01980198 L19.2923485,8.01980198 L19.2835029,8.0019802 L19.1721336,7.99309967 C19.0257158,7.96959451 18.889286,7.90013647 18.7831177,7.79318503 C18.6504073,7.65949573 18.5758514,7.47817413 18.5758514,7.28910891 L18.5758514,7.28910891 L18.5758514,5.84554455 C18.5518871,3.41954659 16.6054921,1.45879454 14.1972579,1.43465347 L14.1972579,1.43465347 L5.80274215,1.43465347 C3.39450789,1.45879454 1.44811291,3.41954659 1.42414861,5.84554455 L1.42414861,5.84554455 L1.42414861,12.1544554 C1.44811291,14.5804534 3.39450789,16.5412055 5.80274215,16.5653465 L5.80274215,16.5653465 L14.1972579,16.5653465 C16.6054921,16.5412055 18.5518871,14.5804534 18.5758514,12.1544554 C18.6163388,11.7890822 18.922975,11.5127474 19.2879257,11.5127474 C19.6528764,11.5127474 19.9595126,11.7890822 20,12.1544554 C19.990286,15.3787985 17.3979916,17.9902144 14.1972579,18 L14.1972579,18 L5.80274215,18 C2.599996,17.995093 0.00487110525,15.3808258 -1.42108547e-14,12.1544554 L-1.42108547e-14,12.1544554 L-1.42108547e-14,5.84554455 C-1.42108547e-14,2.61713944 2.59797615,8.17124146e-14 5.80274215,8.17124146e-14 L5.80274215,8.17124146e-14 Z M4.29443312,5.38692655 C4.48070099,5.36682207 4.6671823,5.42289927 4.81203008,5.54257426 L4.81203008,5.54257426 L8.96948253,8.85742574 C9.48880627,9.2678976 10.2192875,9.2678976 10.7386112,8.85742574 L10.7386112,8.85742574 L14.8518355,5.54257426 L14.8606811,5.54257426 L14.9473987,5.48291804 C15.2462388,5.30808809 15.6344967,5.37260085 15.8602388,5.64950495 C15.9785304,5.79800076 16.0329385,5.98799536 16.0113373,6.17714498 C15.9897361,6.36629461 15.8939207,6.53887938 15.7452455,6.65643564 L15.7452455,6.65643564 L11.6320212,9.98019802 C10.5861526,10.8280382 9.09540423,10.8280382 8.0495356,9.98019802 L8.0495356,9.98019802 L3.92746572,6.65643564 L3.8513546,6.58355583 C3.61891283,6.32594359 3.59998262,5.92999594 3.821318,5.64950495 C3.93770999,5.50163353 4.10816526,5.40703103 4.29443312,5.38692655 Z"></path></g></svg> </label> <input name='uri' type='hidden' value='ArlinaCode'/> <input name='loc' type='hidden' value='en_US'/> </form> </div> </div>


Replace all codes marked with ArlinaCode with your blog's feedburner ID

  • After that, click the Save theme button and see the results.



 Additional


Install Gradient Newsletter Widget on Blogger in 2020.


Change the ID of the newly created widget for the Newsletter widget, for example, the new widget ID has HTML1 ID then replace that ID with HTML98


And this is for the Partner widget on the Sidebar, add the below code before </head>


<style> /* Partner Sidebar */ .sidebar512{max-width:300px;margin:auto;text-align:center;display:block;font-size:0;background-color:#fff}.sidebar12{color:#294db4;width:128px;height:33px;line-height:30px;display:inline-block;border-radius:22px;margin:6px;border:2px solid;transition:all .1s}.sidebar12:hover{background:#294db4;color:#fff;border-color:#294db4;box-shadow:0 2px 0.8rem -0.8rem rgba(0,0,0,0.8),0 0 0 1px rgba(0,0,0,0.05)}.sidebar512 a{color:#294db4;margin:auto;text-align:center;font-size:14px;font-weight:500;padding:5px 16px;border-radius:3px;transition:all .1s}.sidebar12:hover a{color:#fff} </style>


 Add New HTML / JavaScript widget in Layout> Then add below markup in it.


<div class="sidebar512"> <div class="sidebar12 onet"><a href="#" title="Visit the Site" rel="nofollow noopener" target="_blank" class='ripplelink'><span>Your Site</span></a></div> <div class="sidebar12 onar"><a href="#" title="Visit the Site" rel="nofollow noopener" target="_blank" class='ripplelink'><span>Your Site</span></a></div> <div class="sidebar12 onet"><a href="#" title="Visit the Site" rel="nofollow noopener" target="_blank" class='ripplelink'><span>Your Site</span></a></div> <div class="sidebar12 onar"><a href="#" title="Visit the Site" rel="nofollow noopener" target="_blank" class='ripplelink'><span>Your Site</span></a></div> </div

Conclusion 


This is the tutorial on How to Install a Newsletter Widget on Blogger. I hope it is useful and you want to install it. If you have any problems to install code please comment or Contact us. We are ready to help you.

Thanks..

 

Delay image Loading on blogger.

Delay image Loading on blogger.

How to Delay Image Loading Before Scrolling Pages in Blogger Free.||Increase Blog Load speed with LazySizes Code.


Delay image Loading on blogger Before Scrolling Page.


Today, I am going to share with a Best Blogger Widgets(Delay Image Loading Before Scrolling Pages)

One of the factors that contribute to the loading load on a blog is image content, here Blog Plugin Free will provide tips on how to Delay Image Loading Before Scrolling the Page. 


What is Delay Image Loading Before Scrolling the page ?(In Blogger)


Delaying Loading Images Before Scrolling Pages here is when loading a page the image will not be too loaded until we scroll the page and it will increase the speed of the blog. And it give to user a better experience. While You Scrolling Page or Post on blogger you will see that image in the Template take few second, That is Delay Image Loading Before Scrolling Pages.


Before implement code in your own website please see its benefit.

Benefit of Delay Image Loading Before Scrolling Pages in Blogger.

  • Make Your Post stylish
  • Increase Speed of Your Website
  • Magical look and better experiences
  • Users Friendly and Increas Blog Load


Note:All code provided by Arlina Code . All Code are Responsive and Users Friendly.


Now, You  know benefit of Delay Image Loading Before Scrolling Pages. If you think to implement a Code into your website, I have shared a process like this here React lazy load images on scroll pages.


How to Delay Image Loading Before Scrolling Pages(In Blogger)


Please !, Follow the below steps Carefully otherwise Blog Plugin Free not take responsibility while any damage in your website.


First, open Blogger 》Click the Themes menu and Backup themes 》 than Click Edit HTML 》 And  find and add the code below before </body


1st Code

<script>

//<![CDATA[

// LazyLoad

function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>


For friends who have already added the Lazysizes code, Just replace the code with this a new version of Lazy Sizes Code.


Sec Code

//<![CDATA[

// Lazysizes

var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazysarline.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);

//]]>

</script>

 

Choose one of the codes  from above


The application is almost the same as in the post about Lazy sizes . You only need to find everything img in the theme. The code will look like this:

<img...

 

Example :


<img src='//www.blogger.com/img/icon_delete13.gif'/>


Add class='lazy'for Code 1 and class='lazyload'for Code 2 to the markup like this:


src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>


Change src to data-src and add src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='after data-src


Or for this example:


img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>


So like this :


<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>



Do the above for all the images markup on the theme. What if the IMG markup already contains a class? Then you only need to add lazy or lazy load after the first class.


For Example:


<img class='blogger lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>


When finished, save the theme and see the results on your blog.

Result


When finished, save the theme and see the results on your blog.


Next, to increase the Expires headers section that you can check on GTmetrix, you need to replace the s1600 and s640 in the image link in the post editor. Examples like this:


<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01aDU5XcplUv_XYG3CLp4tTC6LIUPvAEGQvOKpb3c5oAaVeaY9n2arWUJkEQ4u6z7x5eQwwbCEwEFS1Xuwr2liEG2RLb0qAnHRWfBZL8HBOS-bpDNzd1xCEw49_KKG5dauO4_v8oJeIOt/s1600/Cara+Memasang+Widget+Newsletter+di+Blogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01aDU5XcplUv_XYG3CLp4tTC6LIUPvAEGQvOKpb3c5oAaVeaY9n2arWUJkEQ4u6z7x5eQwwbCEwEFS1Xuwr2liEG2RLb0qAnHRWfBZL8HBOS-bpDNzd1xCEw49_KKG5dauO4_v8oJeIOt/s640/Cara+Memasang+Widget+Newsletter+di+Blogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

 

Add -rwin each post image

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01aDU5XcplUv_XYG3CLp4tTC6LIUPvAEGQvOKpb3c5oAaVeaY9n2arWUJkEQ4u6z7x5eQwwbCEwEFS1Xuwr2liEG2RLb0qAnHRWfBZL8HBOS-bpDNzd1xCEw49_KKG5dauO4_v8oJeIOt/s1600-rw/Cara+Memasang+Widget+Newsletter+di+Blogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01aDU5XcplUv_XYG3CLp4tTC6LIUPvAEGQvOKpb3c5oAaVeaY9n2arWUJkEQ4u6z7x5eQwwbCEwEFS1Xuwr2liEG2RLb0qAnHRWfBZL8HBOS-bpDNzd1xCEw49_KKG5dauO4_v8oJeIOt/s640-rw/Cara+Memasang+Widget+Newsletter+di+Blogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>


Please note, and if my friend has added -rwin each post image. The image will not be to read by 3rd party widgets such as Recent Post, Random Post widget, etc. Unless you adjust the third party code with the new image format.


Okay, that's it from Blog Plugin  Free on How to Delay Image Loading Before Scrolling the Page. Hope You like this post for more Blogger Plugin or Widgets Subscribe our Newsletter.

If you have any problems on implement Code fill free to contact or comment us. We are ready to help you.

Thanks..