Showing posts with label Blogger-Widgets. Show all posts
Showing posts with label Blogger-Widgets. Show all posts

Thursday, 9 April 2015

Add Next & Previous Pagination Widget to Blogger

The page or widget numbering previous and next pages for Blogger blogs is almost a great gadget. You can add it to your blog and just a few steps. How many bloggers investigated this trick on how to reset your blog with the quickest and easiest method. Paging is a great way to engage visitors to your blog. So if you want to record back and forward buttons, and page numbers, you are here to do.


Pagination Widget For Blogger

The widget is designed with CSS, and JavaScript functionality. So you somewhere model only add to your blog; it seems you can add this widget with the original format of your blog and add a widget / JavaScript and HTML code to the right [side] in this context paste. The widget will not affect the loading speed of your blog because JavaScript to use encryption. So now the following steps to add the page widget to your blog.
 

How To add widget paging blog?

The following simple steps for you to add this cool widget to your Blogger blog. So follow them and enjoy the widget.

    
Log in to Blogger
    
Go to Layout
    
Add a widget
    
Add HTML / JavaScript widget
    
Copy and paste the following code into the HTML widget / JavaScript


<style type=”text/css”>
#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:2px 8px;margin:0 4px;text-decoration:none;border-bottom:2px solid #5fb404;border-top:2px solid #5fb404;background:#effbf5}.showpageNum a:hover{border-bottom:2px solid #df01d7;background:#a9f5f2;border-top:2px solid #df01d7}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:2px 8px;margin:2px;font-weight:700;border-bottom:2px solid #5e610b;border-top:2px solid #5e610b;background:#5e610b;text-decoration:none}
</style>
<script style=’text/javascript’>
var postperpage=3; var numshowpage=3; var upPageWord=”Prev”; var downPageWord=”Next”; var home_page=”/”; var urlactivepage=location.href;
</script>
<script style=’text/javascript’ src=’http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js’>
</script>
Save the widget and see your blog paging widget living with the number of sides and back / forward.PersonalizationIn the wildest above code the number of pages may be amended in order to show numshowpage = 3 to the desired value, you can also change the text above and in addition to any desired value.

Professional Social Subscribe Now Widget For Blogger

In blogger.com, people are still trying to decorate their blogs designed with beautiful custom widgets from different designers. And so, Blogger blogs can be easily adapted and stylized. But I recommend your blog as simple as possible, but keep very nice. Because design is very important in terms of visitors and money. It is necessary to provide a crucial time design blog. And make sure that you add widgets and the necessary expertise, so popular posts overtaking, Facebook Like Box plugin and widget subscribe now. So in this tutorial I will look fabulous SUBSCRIBE widget for you that you can add easily to your Blogger blog. It's a great widget.

                                              Widget Looks Like this
Best Blogger Widget

 The widget is created using only CSS3 properties and load faster with any browser. Subscribe Widget is some features like Facebook E-mail followers continue Subscription, Twitter and Google on the link following link, but the important thing is the design of widget. Then this design is a large and attractive design. Now we add the widget to Blogger.

Subscribe Widget in Blogger?

Add this widget to your blog is something very, very simple, just follow from a few steps to quickly add this Widget on your blog:

    
Go to Blogger Layout >>
    
Add Gadget >> Add HTML / JavaScript widget
    
Now just copy all the code below and paste it into the HTML / JavaScript widget


<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>

<div id=”sidebar-subscribe-box”>
<div class=”sidebar-subscribe-box-wrapper”>
<br/>
<a class=”social-icons” target=”blank” href=”https://www.facebook.com/BestBloggersCafe“><img src=”http://2.bp.blogspot.com/-0UOzHUdczG4/USDjuyJCndI/AAAAAAAAAY8/5nN8AcBcvHs/s1600/Bloggertrix-facebook.png” /></a>
<a class=”social-icons” target=”blank” href=”https://twitter.com/onlineustaad“><img src=”http://2.bp.blogspot.com/-H-E4Ll7i2-0/USDjw3bxgVI/AAAAAAAAAZc/a2kMp8rGRVU/s1600/bloggertrix-twitter.png” /></a>
<a class=”social-icons” target=”blank” href=”https://plus.google.com/u/0/108628318516871549001“><img src=”http://3.bp.blogspot.com/–KlnPhT6pRA/USDjvgwOluI/AAAAAAAAAZM/_O8TI0WivQk/s1600/Bloggertrix-Googleplus.png” /></a>
<a target=”blank” class=”social-icons” href=”http://www.feedburner.com/BestBloggerCafe“><img src=”http://2.bp.blogspot.com/-kXhnrJzlA_A/USDju5hXjPI/AAAAAAAAAZA/x6NdMR0JFhQ/s1600/Bloggertrix-Rss.png” /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class=”sidebar-subscribe-box-form”><form action=”http://feedburner.google.com/fb/a/mailverify?uri=BestBloggersCafe” class=”sidebar-subscribe-box-form” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=BestBloggersCafe‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true” target=”popupwindow”><input name=”uri” type=”hidden” value=”BestBloggersCafe” />
<input name=”loc” type=”hidden” value=”en_US” /><input class=”sidebar-subscribe-box-email-field” name=”email” autocomplete=”off” placeholder=”Enter your email address here”/>
<input class=”sidebar-subscribe-box-email-button” title=”” type=”submit” value=”Subscribe Now !” /></form>
</div></div></div>


Save your widget and see your blog, keep the widget in the sidebar, because it is used widget in the sidebar. See blog for the new widget.Personalization Some customization is usually necessary to make this widget works perfectly for you. Just change the link to you, for example:

    
Change the color blue on your behalf BestBloggerCafe Facebook
    
Change OnlineUstaad green your Twitter username
    
Change Google+ orange link-own
    
Change three red BestBloggerCafe name FeedBurnerUnless your widget, and enjoy the great widget on your blog.If you have a problem adding this widget on my blog, please leave your comment below the post with the problem you get, I can help you. Take Care.