Break Posts Into Multiple Pages

How to Break Posts Into Multiple Pages In Blogger

For today's example I am going to use a four page post breakdown. You can actually break a post into as few as two or up to an unlimited number of pages.  I thought four would get the point across.

Insert HTML-CSS-Javascript Codes in Blogger Posts As Plain Text

If you are using blogger platform, and want to insert HTML, JavaScript and CSS source codes in your posts then I am sure you are facing many problems. If you try to insert Html code or JavaScript in Blogger posts you will either get an error message or by chance if your post is published then it will not give the desirable result's which was expected .You can use HTML Encoders but they will never give an attractive look to your codes.

 

 

Create a Animated jQuery Quote Rotator

How to Create a Animated jQuery Quote Rotator in Blogger

Sometimes an article cannot be completed without a proper quote or quotation from an authentic source. People want the news to be accurate and precise. Therefore, they always count on a reliable source. Stuffing your articles with too many quotations might make your blog posts look lengthy, but you users might feel difficult to scroll too much. How about a jQuery Quote rotator and animator, which would not only make your quotations look remarkable but will also gather all the quotes at one place. In this article, we will show you How to create a jQuery Quote Rotator in Blogger? 

Break your Post into Multiple Pages in Blogger

How to Break your Post into Multiple Pages in Blogger

Are you looking for ways to break your posts into pages? You might have seen some popular blogs who have broken their long post into pages in order to maintain the interest of the users and it also helps in reducing the bounce rate. Today in this article, we will show you how to break your posts into multiple pages in Blogger - Post Pagination.

Why to Break any Post into pages?

As we have already mentioned above that it is used to build the interest of readers, if your post is too long then it might make reader get bored. Secondly, it is good for search engines as well, as it helps the search engines robots to crawl the pages more effectively and easily.

Therefore, if your posts are too long then you must use post pagination or break that post. And, here today we will teach you this amazing technique to break blogger posts into multiple pages.

Your own Font on your site

Use your own font on your site

Install new fonts to your site using Fontburner.
Its really easy to install the font. You just need to place a bit of code above the tag.
The Html of your site with tags like h1,h2,h3 will be automatically changed to the Font style.
Just go to Fontburner choose your font and below it will be the code.Install it above an your template and its done.
To change the text in post use Html like this
Google sites after creating a site.
Get the code for the script and replace it with the php script and the changes will be done.

http://strongindustriescorp.com/use-your-own-font-on-your-site/

Sliding Underlines

Sliding Underlines On Blogger And Wordpress

 As someone constantly looking at design and ways to add to the design of blogs often it's the little things that amuse me.This post is definitely an example of that, something as simple as an underline sliding out under a heading or for that matter any text most would see mundane but I see as 'Cool'.So lets look at the effect, first up it's a very easy effect to use on your blog no code knowledge is needed.

Basically on any text on your blog you can make a sliding underline appear on hover (when you place the cursor over it).For me this effect works best on headings and links as these are the text visitors to your blog will hover on most.In future posts I may show how to add the effect to all links on your blog or maybe to Labels/Tags (Like the previous Bump effect for Blogger labels we published in 2011).

Animated Message Box

Message Box Like Wordpress With Close Button Using jQuery For Blogger Blogs

We have seen many times a beautiful massage box in many Wordpress blogs.It appears between the title and body of post.It can be easily removed by simply clicking the close link.Here is a same massage box for blogger blogs also:) I want to clear here that this Massage box is More interesting then simple regular box.When we visit the page firstly it appears with fade in and fade out effect which easily attracts the attention of visitors.When after reading the massage he/she can make It runs out of the page .

Animated Notice Box

Animated Notice Box Blogger and Blogspot Widget and Plugin

Ever wanted to greet your visitor with something important message or want to have your visitor a look at the most important content of your website. Than a Animated Notice Box blogger widget is the one you are looking for.

Add Seperator In Blog Posts

How To Add Separator In Blog Posts In Blogger

Separator In Blog Posts

 

Featured Content Slider

17+ Featured Content Slider Using jQuery

You should already know about JQuery Featured Content Slider.Today we will see how to add 17+ jQuery featured content sliders / slideshows for your blog or website.Almost all bloggers use the contents, which included slider.Contents are a great way to show a lot of content in a smaller area of ​​a web page or a blog. Automatic sliding doors are dynamic content in many popular websites on the web.This is a great technique to represent different types of content in a limited space and a good way to involve the user.You have probably noticed that a lot of websites recently a working area with content that slides or changes in any way.

Optimize Titles Change Header Fonts h3-h2

Βελτιστοποιηση του τιτλου αλλαγη ετικετας απο h3 σε h2

  Η σημερινη αναρτηση θα μας βοηθησει να αλλαξουμε την ετικετα του τιτλου σε απο h3 σε h2.

Γιατι να το κανουμε αυτο; Θα σας εξηγησω αμεσως.

Οποιος εχει το seo quaqe στον περιηγητη του θα δει πως απο την αρχη ο blogger  εχει τον τιτλο του blog με ετικετα h1 η οποια ειναι και η ποιο σημαντικια για το ρομποτ της google.

 Τα καλυτερα seo optimization online εργαλεια στο ιντερνετ

Shadow in Post text

Πως βάζουμε σκιά στο κείμενο του blog μας

 Πριν

Μετα

Γεια σας σημερα θα σας πω πως μπορουμε να βαλουμε σκια στo κειμενο του blog μας για να ειναι τα γραμματα πιο ελκυστικα στα ματια του αναγνωστη.

Split Post in Multiple Pages -All Code-

Split Post in Multiple Pages -All Code-




text 1 Add your first page content here text 2 Add your second page content here text 3 Add your third page content here text 4 Add your final page content here
Pages: 1 2 3 4


http://blogtimenow.com/blogging/splitting-long-blog-post-blogger/

Author Avatar in Post Title

Add Author Avatar Beside Post Title in Blogger

Today I will show you how you can add author image beside the title of every post of your blogger blog. This design hack looks really cool when there are more than one author in a blog. It helps you to distinguish between the authors of the post.

The widget is fully automated so if you change your profile pic then the changes you want will take place.

Custom Text Ads Box

Custom Text Ads Box like Adsense

Posted On 04:52 // 1 comment

Many of you may have seen Google Adsense text ads in other or your blog. Today I will show you how you can add Text Ads Box widget to your blogger blog. In this widget you can edit everything i.e. the colors, Title text, Description, Ads provider etc. etc. If you sell text links on your blog this widget may be quite helpful for you.

 

 

 

 

 

 

CSS Hello Bar Clone

CSS Hello Bar Clone for Blogger

You all may be knowing about Hello Bar.  If not Hello Bar is a plugin for WordPress which comes at the top of your blog with your desired text. This plugins helps you to get a lot of visitors to one desired page. If you are hosting any contest or giveaway, this bar will help you get a lot of traffic on that particular page.

We have created a clone of this plugin but without using any JavaScript it is purely based on HTML and CSS. The plugin has many features such as Beautiful Design, Shadow effect, Compressed size to get faster load time etc. In case the bar irritates any of your visitor, it can be closed just by clicking on a single button.

Corner Ribbon

Corner Ribbon for Blogger

May bloggers may want to add a ribbon at the corner of their blog and this tutorial will show them how they can easily add a green ribbon at the corner of their blog.

This ribbon is made up of Pure CSS and very less amount of coding thus it is fast loading. Unlike other ribbons no images are used as they increase the page load time. You can see the demo of this ribbon in the beside image itself. You can edit the text shown in the ribbon as per your convenience. To add this widget to your blog follow the below steps.

Greek in Post Title

1. Τα Ελληνικά στον Τίτλο πάνω "Ανάρτηση" δεν τα καταλαβαίνει και έτσι η σελίδα εμφανίζει το όνομα στο λίνκ μόνο με τον αριθμό (εαν της βάλουμε)
ή πρέπει να χρησιμοποιήσουμε Αγγλικά.

2. Η μεταφορά του λινκ από τον "Μόνιμο σύνδεσμο" στην επεξεργασία της Ανάρτησης σε μιά άλλη σελίδα πέτυχε. (με αντιγραφή επικόληση) στην εισαγωγή "σύνδεσμος".

3. Στην 1η Ανάρτηση (1h Anarthsh) που είναι στα αγγλικά, ο μόνιμος σύνδεσμος αν και έχει κενό, συμπληρώθηκε με παύλα, και ο τίτλος όμως παρέμεινε ο ίδιος όπως τον είχαμε γράψει.
http://thetraveller-thomasgrm.blogspot.com/2015/10/1h-anarthsh.html




test syndesmoy


Δουλεύει και ο σύνδεσμος στην σελίδα.

Read More - Metapidisi

Read More - Μεταπήδηση

 


Εδώ δημιουργήσαμε "μια μεταπήδηση", -το βρίσκουμε στην μπάρα εργαλείων της ανάρτησης- δηλαδή, προσθέσαμε ένα "διαβάστε περισσότερα" στο τέλος της ανάρτησης, και έτσι την κάναμε μικρότερη). (https://support.google.com/blogger/answer/154172)

1) Γράφουμε την ανάρτησή μας
2) Στο σημείο που θέλουμε να βάλουμε το "διαβάστε περισσότερα" πατάμε το κουμπί μεταπήδησης από το μενού της ανάρτησης

How to split long blog post in Blogger into multiple pages

Step 1: Usually you will edit your post in compose mode, but this time you are going to do this in HTML mode. Switch to HTML editor, add the span element that you see below and add your blog content in each element respectively. From the below lines you can see that only 1^st page content is visible and the remaining 2^nd, 3^rd and 4^th pages are hidden. So the remaining pages will be visible only if the visitor navigates.

<span class="content1">

Add your first page content here

</span>

<span class="content2" style="display:none">

Add your second page content here

</span>

<span class="content3" style="display:none">

Add your third page content here

</span>

<span class="content4" style="display:none">

Add your final page content here

</span>

<p><b>Pages: <span style="color: #3d85c6;">

<a href="#" class="page1">1</a>

<a href="#" class="page2">2</a>

<a href="#" class="page3">3</a>

<a href="#" class="page4">4</a></span></b></p>

Step 3: Next to make this links to work add the following script just below the pagination links.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script style="text/javascript">

jQuery(document).ready(function(){

jQuery('.page1').click(function(){

jQuery('.content1').show();

jQuery('.content2').hide();

jQuery('.content3').hide();

jQuery('.content4').hide();

return false;

});

jQuery('.page2').click(function(){

jQuery('.content1').hide();

jQuery('.content2').show();

jQuery('.content3').hide();

jQuery('.content4').hide();

return false;

});

jQuery('.page3').click(function(){

jQuery('.content1').hide();

jQuery('.content2').hide();

jQuery('.content3').show();

jQuery('.content4').hide();

return false;

});

jQuery('.page4').click(function(){

jQuery('.content1').hide();

jQuery('.content2').hide();

jQuery('.content3').hide();

jQuery('.content4').show();

return false;

});

});

</script>

That’s it! When everything is done publish your article and view it where you will see page links below the content. Just click on the links to see how it works.

2nd Way: Divide/Break Blogger post into differernt Pages

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

·   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>

·   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.

http://blogtimenow.com/blogging/splitting-long-blog-post-blogger/
http://www.triposoft.com/paginate-long-post-blogger/

Pages: 1 2 3 4