Table of Contents Page With Thumbnail

Create Table of Contents Page With Thumbnail in Blogger

Table of contents page is also know as Sitemap.Table of contents is one of the key factor for getting traffic for your blog or website.In table of contents all the posts written are shown in an order manner.

Through your sitemap one can get to know about your posts.So it is the source of traffic for your blog.The sitemap with atom or rss doesnt look attractive .

How To Get Feed for Particular Label in Blogger

How To Get Feed for Particular Label in Blogger

Blogger provides feed for the whole website. It also went a step ahead now It is providing feed for even individual labels. Website Users can now subscribe to a feed for particular label in blogger blogspot website. It is very simple to do that and today will will let you know how to do this.So first of all lets see how to generate feed for complete website and then move on to generating feeds for particular label in Blogger. So to generate a feed feed for particular site all you have to do is just replace the blogger blog URL that you want to get feed from in the below link. You can get feed for your or any other blogger blog in 3 reputed ways. All these feeds will work if the blog you are targeting has enabled basic blogger blog post feed. And that’s enabled by default.

Create Table of Contents Page and from a Specific Label With Thumbnails

Create Table of Contents Page and from a specific label With Thumbnails in Blogger

Table of contents page is also know as Sitemap.Table of contents is one of the key factor for getting traffic for your blog or website.In table of contents all the posts written are shown in an order manner.

Through your sitemap one can get to know about your posts.So it is the source of traffic for your blog.The sitemap with atom or rss doesnt look attractive .A pro blogger named Akith Kumar Singla brought a unique and attractive design using Thumbnail in blogger.I applied it to my blog.

It looks like the icon:

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.

Πως Αλλάζουμε Αυτόματα BACKGROUND στο Blog

ΠΩΣ ΝΑ ΑΛΛΑΖΕΙ ΤΟ BLOG ΣΑΣ ΑΥΤΟΜΑΤΑ BACKROUND ΚΑΘΕ 1 ΛΕΠΤΟ

Με τον παρακάτω κώδικα το blog σας θα αλλάζει αυτόματα backround κάθε 1 λεπτό. Δεν υπάρχει ο περιορισμός του blogger για εικόνες μέχρι 300 Kb. Μπορείτε να βάλετε 60 διαφορετικά backround 1 για κάθε λεπτό. Μπορείτε να βάλετε βέβαια και οσα λιγότερα θέλετε αλλάζοντας τα πράσινα νούμερα που αντιστοιχούν στα λεπτά της τρέχουσας ώρας. Αν θέλετε να εμφανίζονται 4 backround την ώρα θα κρατήσετε 4 γραμμές κώδικα και θα αλλάξετε τα λεπτά που θα εμφανίζονται οι εικόνες· π.χ. if(x>=0 && x<15), if(x>=15 && x<30), if(x>=30 && x<45) και if(x>=45 && x<0). Για την ευθυγράμμιση της εικόνας και την επαναληψή της θα ισχύσουν οι ρυθμίσεις που έχετε κάνει μέσα από την προσαρμογή του προτύπου. Ο κώδικας μπαίνει απλά σαν gadget.

Create a Full Width Page and Remove Sidebar in Blogger

How To Create a Full Width Page and Remove Sidebar in Blogger

Do you think in blogger platform you can neither hide a Sidebar nor can create a full width page? Blogger is not a flexible platform though, with the help of XML and CSS we can remove the sidebar and can even increase the width without facing difficulties whatsoever. If you have observed our 404, Advertise Here and Search engine page, then you may sense a massive difference between these and normal pages. The main intention behind increasing the width and hiding sidebar on certain pages is to transform your blog into a gorgeous looking website. If you are thinking to stretch the width of your site by removing sidebar, then you have landed on right destination because today we will be learning How to Optimize the Width of BlogSpot blogs.

Check Out Demo Of Full Width Page

Add Christmas Snow Fall Effect in Blogger Blogs

How To Add Christmas Snow Fall Effect in Blogger Blogs

Christmas the much awaited festival will soon knock on the doors of Bloggers and the entire world. Therefore, it is the time everyone should forget about their all concerns and start to decorate their blogs with awesomeness. Does anyone wishes to decorate their site with falling Snowflakes? If yes then, Christmas Eve would be an ideal time to show up some skills and amuse the readers by adding an animated snow falls to your blog. Now, few people might be thinking that, how we can create animated snowfall without even learning web developing. This is the reason why today in this article, we will be sharing a technique which anyone can apply on their blogs in order to display Animated Falling snow flakes with thunderstorm. Doesn’t that exciting? Indeed it is.

Christmas Snow Fall Effect (DEMO)

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.

Popup Code - Javascripts for website advertising

Code Popup - Javascripts ads for website - Blogspot

 
Popup Code - Javascripts for website advertising - Blogspot. Javascripts Popup Code for Web advertising - blogspot. Code Popup ads that appear when clicking.Code Popup windows when the first click. Code to open a small popup window .

Change New - Old Page Directions with Buttons

Αλλαγη του παλαιοτερες αναρτησεις - νεοτερες αναρτησεις με κουμπια

Θα εχετε παρατηρησει πως τα απλα blogger templates δεν ειναι σχεδιασμενα ωστε να εχουν ενα επαγγελματικο στυλ και θα πρεπει να αλαξουμε πολλα πραγματα για να μπορεσουμε να τα κανουμε ομορφα και πιο επαγγελματικα.

Σε αυτον τον οδηγο θα σας δειξω πως μπορουμε να αλλαξουμε το παλαιοτερες αναρτησεις - νεοτερες αναρτησεις με κουμπια

Numbered Page Navigation

Πως να βαλω αριθμηση στις σελιδες και στις αναρτησεις του blog μου

Η αριθμηση των σελιδων μας και των αναρτησεων μας ειναι πολυ σημαντικη γιατι δινει αλλο αερα στο blog μας. Αν δεν εχετε κανει αυτο Αλλαγη του παλαιοτερες αναρτησεις - νεοτερες αναρτησεις με κουμπια  τοτε συνεχιστε να διαβαζετε το αρθρο.

Create Pages from Labels

How to Create Pages on Blogger and Link Them With Labels

Labels On blogger help you organize your post into the appropriate category such that related post are found in a particular label. Your post can also appear in Search engines depending on your labels. The pages on your blog brings easier navigation through it. To create Pages on Blogger and Link them With Labels, you should have labels attached to each of your post.

View Posts From Specific Labels

ΠΩΣ ΕΜΦΑΝΙΖΩ ΤΙΣ ΑΝΑΡΤΗΣΕΙΣ ΜΟΥ ΑΝΑ ΕΤΙΚΕΤΕΣ

Αυτός ο κώδικας μου επιτρέπει να εμφανίσω τους τίτλους των αναρτήσεών μου ανά ετικέτες με βάση τις γενικές ετικέτες που χρησιμοποιώ και έτσι να παρουσιάσω όλα τα περιεχόμενα του blog μου σε μία σελίδα ή να παρουσιάσω τι αναρτήσεις που υπάρχουν στο blog μου για 1 ή περισσότερες γενικές ετικέτες σε κάποια πλευρική μπάρα ή στο υποσέλιδο. 

 

 

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/

Sitemap with Thumbnails

2 Awesome Sitemap Widgets for Blogger

Posted On 22:09 // 47 comments

Adding Sitemap or Table of Contents in a blog is highly recommended for all the bloggers whether new or old. These Sitemaps help our readers to navigate our blog easily and it also helps our blog by decreasing its bounce rate (number of visits that consists of only one pageview). Two of my very good friends +Chandeep J and +Ankit Kumar Singla have worked on the Sitemap widget to make it more attractive.




The two Sitemap Widgets are -

1. Responsive Sitemap Widget for Blogger (Table of Contents σε προηγούμενη ανάρτηση)
2. Sitemap with Thumbnail for Blogger

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.

Table of Contents

Tabbed Table of Contents for Blogger

Table of Contents is what every blogger likes to add to his blog. It helps in decreasing the bounce rate of the blog and increasing the pageviews.

Today I am going to show you how you can add an amazing Table of Contents widget to a page of your blog. This widget is made by Taufik Nurrohman of DTE. The concept of this widget is very simple. It is coded with the help of JavaScript and CSS. It also has many options and setting which I will describe below.

New Page from Post

Δημιουργία Σελίδας στο Μενού από Ανάρτηση

Η Ανάρτηση αυτή ΕΓΙΝΕ ΣΕΛΙΔΑ στο ΜΕΝΟΥ της κεντρικής σελίδας του μπλογκ.

Numbered Page Navigation Widget για Blogger

Numbered Page Navigation Widget για Blogger

1. Βρίσκω στον κώδικα της σελίδας από το ΠΡΟΤΥΠΟ-HTML

]]></b:skin>

από πάνω ακριβώς (και αυτό γιατί με την φράση </b:skin> θα βρεθούμε στο τέλος του κώδικα που οριοθετεί το τέλος της διαμόρφωσης του συγκεκριμένου script), προσθέτω τον κώδικα ανάλογα με την μορφή που θέλω να έχουν οι αριθμήσεις μου….

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Εάν δεν θέλεις να φαίνονται οι λέξεις πρώτη σελίδα και τελευταία, προσθέτουμε…

.firstpage, .lastpage {display: none;}

2. Προσθέτω τώρα το script

Βρίσκω στον κώδικα της σελίδας το

</body>

από πάνω ακριβώς (και αυτό γιατί με την φράση </body> θα βρεθούμε στο τέλος του κώδικα που οριοθετεί το τέλος της διαμόρφωσης του συγκεκριμένου script), προσθέτω τον κώδικα

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

3. Ρυθμίσεις εμφάνισης σελιδοποίησης

Αλλάζουμε τα κόκκινα με τις αρεσκείας μας.

ΠΡΟΣΟΧΗ: στο var perPage=7; Πρέπει να έχουμε ΤΟ ΙΔΙΟ ΝΟΥΜΕΡΟ που έχουμε βάλει και στις γενικές ρυθμίσεις του μπλογκ μας.

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