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

How to Add An Awesome Sitemap Plugin In Blogger Blogs

Sitemap is one of the most essential blog tool to use in your blog. It helps a lot in reducing bounce rate by providing a direct navigation link to label of a specific post, for instance the sitemap plugin we'll be adding today in this tutorial shows a list of articles on the latest published order under each categories which is very cool. The plugin is based on ajax so it will load fast and will not have effect on the performance of your blog.
Let's take the lesson together and am sure by the end of the day you will be satisfied.

Step 1: As usual login into your Blogger account and go to >> Templates >> then>>Edit HTML and click anywhere inside the html are then press CTRL+F to search for  ]]></b:skin> tag and then just above it paste the following code.
.mapasite {
    margin-bottom: 10px;
    background-color: #F8F8F8
}
.mapasite.active .mapa {
    display: block
}
.mapasite .mapa {
    display: none
}
.mapasite h2 {
    background-color: #EEE;
    color: $(primary.color);
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 2px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 700
}
.mapasite h2 .botao {
    font-size: 18px;
    line-height: 1.2em
}
.botao .fa-minus-circle {
    color: #f30
}
.mapapost {
    overflow: hidden;
    margin-bottom: 20px;
    height: 70px;
    background-color: #FFF
}
.mapa {
    padding: 40px
}
.map-thumb {
    background-color: #F0F0F0;
    padding: 10px;
    display: block;
    width: 65px;
    height: 50px;
    float: left
}
.map-img {
    width: 65px;
    height: 50px;
    overflow: hidden;
    border-radius: 2px
}
.map-thumb a {
    width: 100%;
    height: 100%;
    display: block;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.map-thumb a:hover {
    -webkit-transform: scale(1.1) rotate(-1.5deg)!important;
    -moz-transform: scale(1.1) rotate(-1.5deg)!important;
    transform: scale(1.1) rotate(-1.5deg)!important;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.mapapost .wrp-titulo {
    padding-top: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3em;
    padding-left: 25px;
    padding-right: 10px;
    display: block;
    overflow: hidden;
    margin-bottom: 5px
}
.mapapost .wrp-titulo a {
 
}
.mapapost .wrp-titulo a:hover {
    color: #f30;
    text-decoration: underline
}
.map-meta {
    display: block;
    float: left;
    overflow: hidden;
    padding-left: 25px;
}
.mapasite h2 .botao {
    float: right
}
Step 2: In the template, search for the </body> tag  and just above it paste the following HTML Coding.
<script type='text/javascript'>
//<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxJHaRTRpplZBJ2XQsGWfV632wWX8TwMs3mI7pGENpheStBPpO8eUZXV9bx7qjLfA4RW_0A8_xTIcu8li7iPRu4yE4Nm8W09Ho_QezLI-nnlaZ6WttDlc_wvN-pOuOE2SsKD-7HVENkxM/s1600-r/nth.png";
var static_page_text = $.trim($('.static_page .post-body').text());
if (static_page_text === "[sitemap]") {
var postbody = $('.static_page .post-body');
$.ajax({
url: "/feeds/posts/default?alt=json-in-script",
type: 'get',
dataType: "jsonp",
success: function(dataZ) {
var blogLabels = [];
for (var t = 0; t < dataZ.feed.category.length; t++) {
blogLabels.push(dataZ.feed.category[t].term)
}
var blogLabels = blogLabels.join('/');
postbody.html('<div class="siteLabel"></div>');
$('.static_page .post-body .siteLabel').text(blogLabels);
var splabel = $(".siteLabel").text().split("/");
var splabels = "";
for (get = 0; get < splabel.length; ++get) {
splabels += "<span>" + splabel[get] + "</span>"
}
$(".siteLabel").html(splabels);
$('.siteLabel span').each(function() {
var mapLabel = $(this);
var mapLabel_text = $(this).text();
$.ajax({
url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl = "";
var htmlcode = '<div class="mapa">';
for (var i = 0; i < data.feed.entry.length; i++) {
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == "alternate") {
posturl = data.feed.entry[i].link[j].href;
break
}
}
var posttitle = data.feed.entry[i].title.$t;
var author = data.feed.entry[i].author[0].name.$t;
var get_date = data.feed.entry[i].published.$t,
year = get_date.substring(0, 4),
month = get_date.substring(5, 7),
day = get_date.substring(8, 10),
date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
var tag = data.feed.entry[i].category[0].term;
var content = data.feed.entry[i].content.$t;
var $content = $('<div>').html(content);
var src2 = data.feed.entry[i].media$thumbnail.url;
htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>'
}
htmlcode += '</div>';
mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>');
$(document).on('click', '.mapasite h2', function() {
$(this).parent('.mapasite').addClass('active');
$(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
});
$(document).on('click', '.mapasite.active h2', function() {
$(this).parent('.mapasite').removeClass('active');
$(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
});}});});}});}
//]]></script>
After you are done save you template then go back to pages.
N/B :- the widget works on jquery therefore male sure you have installed jquery plugin.

Step 3: At the final step we need to create a new page. Go to your blogger dashboard >> Pages >> Add New Page.

On the new page content, create the page title the disable comments using options links, then switch to HTML section and add the following code in the page content area.
[sitemap]
Use the image below for more and better elaborations.

Okay now save your work and tell how you find it...awesome eeeh right!!!!@ See you on the next post.
Share:

How to Add Simple And Elegant Social Sharing Widget In Blogger

Social sharing widgets are an essential part of blog especially when you are considering to do much of promotional work through social media. They are shortcuts to sharing the whole post. In this tutorial today you are going to learn 'How To Add an Elegant Social Sharing Widget In Blogger' and it's simple to use. This widget will help you and your visitors to share your blog content easily all over the internet via various social media sites they own. Okay, let's roll on further and see how we can add this widget/plugin to you blog. Keep in mind this widget will appear below your article or just above the author profile.

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

Step-1: The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}

Step-2: In the template html section, search for the <data:post.body/> tag  and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>,  then you can paste it just below <div class='post-footer'> or <div class='post-footer-line post-footer-line-1'></div> depending with you template design.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>

          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'>
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>
<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
</div>
         </div>
               
      <div style='clear:both'/>
</b:if> 
N/B If you want to display the widget in every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then remove the lines which are marked in blue from the above code.

Step-3:  ( Adding Fontawesome ) The widget works on fontawesome icons, therefore I would suggest to install fontawesome in your blog as follows.

In the template, search for the </head> tag  and just above it paste the following HTML Coding.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
I hope this article has been useful to you. Please sharing and suggest friend to come by for tutorials. In case of extra support please use the comment box below.
Share:

How to Add Email Subscription Widget In Blogger

Email Subscription widget helps to improve blog followers and also have loyal readers therefor in today's post I will show you 'How to Add Email Subscription Widget' in your blogger blog, This is a simple and elegant looking newsletter widget and has simple styling to match any design . Okay, Let's move forward and take the steps. Most this widget will work well for those who are using sortemplate themes where they have awesome products for free and premium.

Adding The Widget

The first thing you need to do is to login into your Blogger account and go to >> Layout >> Click add a gadget any where into your layout >> Add HTML/JAVASCRIPT widget and paste the below code in the blank space. This widget can be placed on the sidebars of you templates.
<style>
#soratemplates-sbox-v2 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
border-radius: 1px;
border: 5px solid #FFD439;
}
#soratemplates-sbox-v2 p {
font-size: 15px;
color: #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #ebebeb;
border-radius: 20px;
}
#soratemplates-sbox-v2 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#soratemplates-sbox-v2 .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 13px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
text-transform: uppercase;
outline: none !important;
border: 1px solid #ebebeb;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#soratemplates-sbox-v2 .rssform .button:hover {
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
}
#soratemplates-sbox-v2 .rssform .button {
background: #222;
color: white!important;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
cursor: pointer;
}
#soratemplates-sbox-v2 form {
margin-bottom: 10px !important;
}
</style>
<div id="soratemplates-sbox-v2">


<p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>
<div class="rssform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=soratemplates', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" placeholder="Enter your email address..." vk_14173="subscribed" vk_1e723="subscribed">
<input type="hidden" value="soratemplates" name="uri">
<input type="hidden" name="loc" value="en_US">
<input value="Join Now" class="button" type="submit">
</form>
</div>

</div>
N/B Change soratemplates with you desire feedburner name.

You made it?. yeah that's for sure and now you have learnt How to Add Email Subscription Widget In Blogger. You can now visit your blog and check the awesome widget live in action and I hope you liked this tutorial, if you enjoyed then please share it with your friends and in case of help!..please use the comment box below.

Share:

11 Simple Tips of Becoming A Professional Blogger

We are moving ahead of the time when age and experience are no longer used to assess the credibility of an individual or the organization. Instead, a major emphasis is given on the ideas they exhibit or state in their list of “to-do” objectives. The latter is skillfully done by placing relevant and interesting content on the website via blogs. Blogging has emerged as one of the most simplified and effectual business marketing strategies. And, creating a fail-safe blogging strategy can turn out to be the best decision for your business.

Wouldn’t it be great if you have an exact idea of the content and components to be added in the blogs and newsletter? Or have an idea of the reader’s perspective so that you can specifically target these first-time readers and turn them into your prospective clients. All this can be easily done with the help of an effectual blog strategy that perfectly manages time, skills and dedication.

Reasons Contributing To The Rising Popularity Of Blogging In Digital Marketplace

Content always remains the king! And no doubt, a number of diversified business companies have realized that blogging possesses a potential of playing a major role in creating an effectual marketing strategy. Blogging continues to be referred as the most inexpensive tool that helps in generating desired traffic and visibility to the website.

Site authors are specifically using blogs as a reliable content strategy that helps in an engaging target demographic to their site. Thus, helping in leveraging the reach of your business on a large scale at minimum expenditure. The other reasons contributing to the rising popularity of this technique is the availability of varied blogging platforms and tools. WordPress is a popular blogging platform that comes with an added functionality to modify the purpose and presentation of blogs.

However, to reap maximum benefits out of these platforms and tools, you need to become a pro in blogging. Before you move forward if you have a blog on WordPress then you should read first the WordPress guide for beginners to avoid mistakes. Below mentioned is a list of tips you must follow to become an expert blogger.

Simple Tips To Become A Professional Blogger

1. Understand Your Target Audience

Having an idea about your target audience is the best way to plan your content marketing strategies. Now after having a brief view of the perception and demand of your audience, you can head on creating blog posts on the topics they would respond well.

2. Get Blogging Goals From Your Audience

Collect ideas from your audience and know about the topics they would love to read more. Nothing could be better than asking your viewers about the topics they would prefer to read on your blogs or you should cover on your blog posts. You can start by engaging readers on your blogs through comments and tweet. Once you start receiving such feedback and reviews on your posts, begin writing blogs on them and engage more readers to your site.

3. Get A Premium Blogger template

owning a blog that has a premium features always help you to become a professional blogger, With a blog using resposnive blogger template or premium wordpress theme you would be able to attract more visitors and they will provide better engagement and readibilty to the user.

4. Create Your Email List

Once you start writing your blog, try to make your own email list that can be used to promote your write-up amongst readers. There is no such rule that only those into marketing or selling something should have an email list. Instead, everyone who is into blogging can market their content at initial level through these strategies. You can grow your email list by using this great post.

5. Treat Your Readers Equally

Never ever abandon your existing readers while pitching new ones on your blog. Many times, bloggers tend to pay more emphasis on driving new readers to their site leaving aside their old readers. This is a wrong practice that can affect the loyalty of your existing readers towards your blog. So, it is advised to value all your readers to get assured of your site’s growth.

6. Include a Call-To-Action Option

Unlike conventional methods of using sidebars for sharing the blogs, expert bloggers nowadays are using few advanced call-to-action option to improve the visibility of their blogs. Connect your sign up or follow links with these call-to-action features on your blogs to attract more readers.

7. Maintain The Consistency

It is easier to lose traffic than to gain it and this is what makes all the difference. So, always maintain the consistency while writing blogs so that you can let your readers get an idea of your blog and its profile’s credibility.

8. Content Should Be Unique

The added content should be unique and interesting so that it can grab the attention of the readers in less span of time. It takes the only fraction of seconds for readers to decide whether they should stay on your blog or leave it there only. Always give a catchy headline to the content to generate curiosity and readability of the content.



9. Do Not Include False Or Unauthorized Information

Never fool your readers by offering them false facts and information into the blogs. As it may lead to some rise in credibility issues between you and your readers, thus hampering its popularity further.
10. Be Patient
Do not follow blogging strategies that are claimed to offer quick returns in short period of time. As it is next to impossible to maintain the quality while covering such a vast web audience through these quick measures. Although, blogging is one of the popular short-term ROI generation paths, but if done meticulously, can help in reaping sustainable visibility for the blog.

11. Be Your Own Customer

To get a successful start for your business, start writing for yourself instead for others. Bring together your thoughts, ideas, and opinions and finely place them into the content of your blog.


To wrap up bringing success for a blog is a slow process and to start with a good content and advertise it efficiently through social mediums and other platforms. And to get an assured success for your blog, follow these above-mentioned tips to materialize your goals.

N/B This article has been shared here with & only for educational purpose it's owned & published by bthemez all rights reserved
Share:

How to Secure your Blogger Blog from Hackers

Blogging industry is very famous these days & is gaining more momentum from passage if time. On the other hand, hacking is also growing day by day. In past, hacker's main target was social accounts, computers & bank accounts but things have changed significantly. Now, hacker's new focus is on forums, websites & blogs & they are hacking various blogs & websites for variety of reasons. Due to this, almost every webmaster is concerned that he/ she might be the next victim of hackers. This is the main reason of keeping your web presence secure & secure. If you have any blog that is hosted on Blogger, then you might be thinking about how to secure Blogger blog from hackers. In order to protect your blogger's blog from the reach of hackers, continue reading our blog.

Possibility of being Hijacked

The possibility of being hijacked is true as plenty of people have faced this worst situation. But it is not possible for everyone to hijack a blogger's blog. It might possible that even in your family & relative knows your password & can guess your password. So in your family, friend & relatives, anyone can hack your blog. Even if you have enables second 2nd stage verification, there is always a possibility of your blog being hijacked. There are many other ways which are used to hijack a Blogger's blog. But following tips will guide you how to secure blogger blog from hackers.

1. Strong Password - Key of All Solution

The primary and most important step is password. You should be very conscious while setting password. In this article i would like to tell you some vital step of setting password . The password should not contain your contacts, name, pet name, phone number, car number plate, family or celebrity name etc. It should be make by the help of small letter alphabets , capital letter alphabets, signs, symbols and some numbers. Furthermore, try your best 2 set a strong password which should not be less than 8 characters. Set some  unmemorable code which can not be judged easily by others. But the code should be memorise hardly otherwise you will forget the password. Do not write the password anywhere as it is a confidential keys. After set up the password, try not to open your Google or any other account from public computers or cafe as its violates the security rules but if emergency occur, open a separate browser and then open the private window.

2. Malicious Script

You have to exercise proper care while using themes. There are free low quality themes which are make with the intention to intrude security & hijack the blog using the themes. If you want to use free themes, then use themes available at famous websites.
I have seen bloggers that they use cracked/ null themes. Please stay away from them as almost 98 % cracked/ null themes have malicious codes. Instead of being hijacked, it is better to buy a original blogger theme from a trusted source.


3. Log in and Log out carefully

Always log in and log out carefully as this worst habit may hack your website. The blogger should always keep remember the signing in and signing out procedure. If you are not habitual of this you might suffer a huge loss of damaging your websites or accounts. People log in to their account and while typing password they are using naked buttons and the people along with them may judge the keys and catch the password. So when you are entering password, be careful about your surroundings. The blogger most oftenly forget to sign out to their accounts and because of this any person who are using your computer may access to your account easily. So make sure that you have sign out before leaving.

4. 2nd Step Verification

In order to protect your blog from hacker's attack, you must implement 2nd step verification right now. It is a wonderful & fantastic service from Google to keep secure all Google account. Under this verification method, you have to provide your mobile number to be associated with Google account. This can be done easily from account setting. After adding your mobile number, you can go to security setting & there, you will find 2nd step verification option. On enabling this, Google will send out SMS confirmation to your mobile number which you can use to enable & confirm 2nd step verification.
Now whenever you sign in to your blogger account/ Google account, 2nd step verification comes to play its part & on its own, sends a verification code to the registered mobile number via SMS. You need to put this verification code to access your account. If you enter it wrong, or someone else successfully enters your correct user name & password can not go further as he/ she may not have the verification code with him/ her. But for some people, it is quite irritating that he/ she has to enter verification code each & every time he logins to his account. In 2nd step verification, there is also an option to set Don't Ask for Codes Again on This Device. So, you will not have to follow the long process to get into your account. However, if you login from a new computer or clear cache, then you have to provide the SMS verification code to access your account.

5. All Recovery Methods

It is also very crucial that you should use all the methods of recovery. So, in the case your blog is hijacked, you can use any method to access your account & change the password. You should add all your mobile numbers in your account setting for 2nd step verification. There is also an option for adding alternate mobile number if your primary mobile number is off due to any reason. Apart from that add all your email addresses with your Google account so that you may be able to recover your account with email method. The last method to recover your account is to set security question. This is the mostly ignored thing & people do not give due attention to this. Believe me, it is the best option & unmatchable.

Dear friends, i am hopeful that you have liked article How to Secure Blogger Blog from Hackers. Google has many options which you may use to protect your blog from.being hijacked. It is up to you whether you use these options or not. Remember that your blog's posts are your efforts & you should not give anyone, a single chance to destroy these efforts. Still, you are unclear about any point or want to share something new, drop your comment below as we are listening!

Original source:sorabloggingtips
Share:

How To Choose Perfect Niche For Your Blog

Blogger is the best place to build a successful blog and earn handsome money online. The best thing from making money is that you do not need to go anywhere. Simply sit in your room & do your working in a professional way. In my 7 years of blogging experience, I have seen various examples where newbie blogger may not be a successful blogger due to the lack of knowledge about the blogging industry. Just like schools, blogging is the step by step classes which you should attempt in order to become a pro. The three major classes in blogging industry are creation of blog, search engine optimization & earning/ monetizing from the blog.

The most important thing in blogging is selecting the right niche. In simple term, niche can be said category or the type of your blog. In order to choose the right niche for your blog, it is mandatory to read out the following paragraphs. Due to wrong selection, many bloggers get tired & lose patience. Even some people give up very early and leave blogging field altogether.

Numerous Types Of Blog's niche

Before going to discuss anything, here are the some examples of niches which are best for blogging.

1. Blogging Niche

As the name suggests, this niche is about creating blog about blogs, blogging tips, making money from blog, blog SEO etc. Example is like this blog has been made in Blogging niche.

2. Cooking Niche

If you are expert in cooking, then you can start your blogging career in this niche. Even if you are not an expert but has extra knowledge about cooking which you want to share with other people, then this niche is perfect for you.

3. Technology Niche

If you are good about computers, laptops, hardware, software, games, apps, electronics. Then you can go to start blog over this niche.

4. Health Niche

This is the most important niche & requires a wide knowledge of the subject matter. The topics under this category are unlimited, so you have to be very well knowledgeable about the topic for which you are writing.

5. Education, News, Entertainment & Business Blog

This is niche is variable & doesn't concentrate on single topic. The topics under this category are unlimited and requires attention about daily topics which are happening all over the world , so you have to be very well knowledgeable about the topic for which you are writing.

Do You Have Something In You?

It is a confirmed thing that everyone in this world has some unique quality. So, it is your own quality to identify the unique quality & build over it. So, it is the case with blogging industry also. You need to look at your skills and then identify the niche at which you can work. As we mentioned various types of niche above, now it’s your turn which niche best suits you. Keep in mind that you should have or two levels upper knowledge about the niche in which you are starting your blog, so that people could take advantage from your blog.

Can You Write Forever?

Please keep in mind that if you have detailed knowledge of the niche, then only choose it. You have to write various topics under that niche on a regular basis. So you should be packed up with your plans about what you will write in future days. A good blogger is one who has plans & strategy about how a particular niche will be covered with underline topics. He/ she makes a schedule about its posts on a weekly or monthly basis so that everything remain in control & his/ her reader will be aware of what is going to be discussed in the coming days. So, they come back again & again to check the latest stuff over the blog.

Are Your Niche Is In Demand In Search Engines

After getting information & selection of a niche, you need to do little bit more exercise. You need to do research about the topics in the niche which are often searched by people. If you write quality content & no one wants to search for it, then your efforts of creating quality content is in vein. So be realistic & make an excel file and populate it with the topics that you need to include in your blog. There are many ways to do so, simply type one or two words of your topic in Google and you will be presented with so many related topics. Alternatively, you may take help from Google Keyword Planner to find out the trend in the niche & to make strategy accordingly.

Niche Worth/ Monetary Factor

If your main concern from blog is to earn money, then please keep in mind that some niches give handsome money while some other gives little money. So before going to start our blog project, we must analyse the worth of the niche. There are many different ways in which we can determine the worth of the niche.

The first & most common method is to identify your competitors. Here i m talking about the top notch competitors which are enjoying the major traffic in the same niche in which you are starting your blog. So you can learn from their blogs immensely.

You may also look at the advertisement being displayed on the competitor's blog. If they are running ads from BuySellAds, then you have wonderful thing in your hand. You can click Advertise here link & then you will be able to see full stats about the blog traffic. You may also look out major posts over your competitor's blog to identify the keywords bringing the major traffic. Then you may use Google Keyword Planner & search over each keyword one at a time. You will see Suggested Bid column, here is the story unfolds as if the price is high, then it means that niche is profitable.

If your selected niche fulfills the yardstick we set above, then you should start your blog immediately. Start your work with passion, confidence & for gaining the success. Be up-to-date with latest happening in your niche so that you could be the first to cover the latest. Be the news breaker to overrun others!
Share:

12 Things To Learn Before You Start Blogging

Blogging may sound simple on the outside but running a successful blog requires time, knowledge, discipline, and the willingness to make mistakes, and learn from them. You see, when I started blog despite of all measures I had taken, I kept failing and failing until that time came when I got everything right. So with all that experiences I would like to share with you these 12 critical things to consider before you start blogging so that you don’t get caught off guard like I was in the beginning.

1. Reason?  Why You Want to Start Blogging.

There are thousands of bloggers out there blogging out of their own reasons. In fact you can blog for whatever reason, but you need to know the purpose of your blog after'all, because that is going to determine your actions. For personal blog, setting up a Blogger account might be an option. However, on the hand Wordpress is much power platform for those who want to make money blogging.

2. Your Blog’s Niche

Another obvious reason is selecting a blog niche. It's best to pick a niche or a topic you are an expert on, or at least to have enough passion for it to make up for your lack of knowledge. Also, if you are trying to monetize your blog, you’re going to want to use Google Trends for keyword research, which will allow you to find out how your niche is performing.

3. Time, Money, and Effort

Time, money and effort, you must be wondering why all these. Well if you are thinking on how to start a blog, you should know that you will spend countless hours -That's time consumption, nothing comes easy when sharpening your writing skills, promoting your blog on social media, and making sure you remain consistent. Furthermore it will cost you money, too, because you will have to pay for your marketing campaign, domain name, and hosting at the very least unless if you prefer going with free choice of sub-domain which somehow has an odd look to me. Blogspot provides free sub-domain while wordpess also have free domain much can be done with premium style.

4. Content- A Prominent Key

Writing prominent content requires a set of acquired skill from academic level unless you are super good without it. It’s not that easy to figure out how to write great blog content, but you should definitely start by producing content that is informative and which provides something of real value to the reader. Somehow make your content to have conversational tone not like lecturing your visitors. That will encourage them to be your regular audience, post consistently.  Also take advantage of Headline Analyzer and Plagtracker to make sure that your posts are outstanding and well-formed from a headline to conclusion.

5. Copyright Laws

Infringement can be a worst case scenario, don't even think of just copying and pasting someone's work you find out there. Author of those content take much time producing them there it worth's no stealing and before you start blogging, learn how to protect your own content, and what to do in case someone steals your work. On the other hand, while it’s OK to be inspired by someone else’s work, make sure you just don't get consumed in every detail about the content. Try and make your differnt in some sort. Also, learn when and how you can use photos you find online. Simply taking an image and crediting the author may not be enough. you can edit you own photos or use TheStocks.im which offers plenty of royalty-free stock photos for you to choose from.

6. Blog’s Design-Simple and Sleek

Most users will respond to blogs which are built around a simple and elegant design. Also, you need to make sure that your blog features responsive design, which is optimized for display on mobile devices. In both cases, navigation should be as easy as possible.

7. The Basics of HTML and SEO

Not every blogger has knowledge in HTML and SEO. This is because you can get pretty much everything done on your blog without having to know the basic HTML or CSS techniques, However learning both will allow you customize themes and plugins to your own disire, as well as changing the looks of your posts. Simple Guide to HMTL Tool will teach you all you need to know. As for SEO, you will be able to drive more visitors to your blog, because your blog will be more visible in the search engines also this beginner's guide to SEO might help. You can download the PDF of it too.

8. Image Editing

I wouldn't prefer you to freely download photos from the web or paying someone else to do it for you, instead you can learn the basics of image editing, so that you can enhance your texts with eye-popping visual content like photos, infographics, and GIFs. I would rather recommend you to creating your own original designs with Canva.

9. Using of Social Media 

Social promotion is all you need for your blog. You need to let people know about your work, and the best way to do it, is through social media. Placing ads on Facebook, Instagram and Twitter is the key to generating traffic.

10. Personal Branding 

All of the knowledge and skills above can help you establish a unique visual identity for your blog. But you shouldn’t stop there, because it is important for all of your social media accounts to reflect that same identity if possible. People respond to brands, and you need to respond to their needs. Make sure to create accounts on most widely used social media platforms, so that you are in control of brand and its name.

11. Build Connections Linking

One of the things that can launch your blog into the stratosphere is the people you know, fellow bloggers. Now, we are not suggesting that you should start sending emails every day, and then end up spamming them. But, you can share some of their stuff you liked on Twitter or Facebook, and let them know about it. Reach out to influencers and start a collaboration.

12. Learning Never Stops

You will never have any time to rest on your laurels. New blogging platforms are being introduced every day, search engines alter the way they rank websites, SEO requirements change, and so on. Everything is changing constantly, and you need to stay on top of all that if you want to succeed.


To wrap with this article today blogging is a lot more complex than people think. It requires you to be a jack of all trades, such as writing, design, marketing, coding, and master of most, the coming of this blog was inspired by blogpress and you wonder how to start you own blog and needing some extra tips, the comment below will be very useful
Share:

Random Post Widget With Thumbnails For Blogger

Random Posts Widgets are great tools for enhancing post performance. This widget will keep displaying different posts every time the blog is updated, refreshed or even when visiting anothe post time to time. As for sure this will increase your traffic as visitor will be seeing different topics at a time and therefor wanting to read the post. 


  • Installation: Log into your blogger account>>>go to layout>>>click on it and pop up shows>>>choose HTLM/Javascript.


Copy the code below and page in the widget the click save and you are ready to go.

<style>
#random-posts img {
    border-radius: 10px;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}
#random-posts img:hover {
    opacity: 0.6;
}
ul#random-posts {
    list-style-type: none;
    padding: 0px;
}
#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px auto 5px;
}
#random-posts a:hover {
    text-decoration: none;
}
.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}
#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};
function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3IrZs9hiPZQG3vARskqstGDcdxZCW02HP3z_v-K0girSEOXT6uMZn9TZ-X_5G-7Zb5RlYG43Pvq6CtyPvxG4k7RrASzrCW1mksWsKZjz0Cn4_SGwK_Fn7t589JFJ59SLdn4pvy56ZfM/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
Random Posts Option

  • Thumbnail dimensions: to change the size of the thumbnail in pixels, replace the 75px value
  • Summary length: you can set the length of the summary(characters) by changing the 100px value form var randompost_chars=100;
  • Post info: post date and comment count options change 'yes' from var randomposts_details='yes'; to 'no';
  • Font size for post titles and summary: modify the font size for the pot snippet change the value 11px to your choice value.
Share:

How to Create a Floating "Sticky" Sidebar Widget in Blogger


Sidebar widgets that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. In this article, I will show you how to create a floating “sticky” Sidebar widget in Blogger?

Remember: This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, popular posts, Instagram photos, and basically everything that you wish for.

Step#1: Adding a New Widget: 

The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body and once everything is down press “Save” button located at the end of the page.

Step#2: Installing a “Sticky” Plugin:

Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following JavaScript code.
<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali & Revised by Levynson Otunga
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
   });
 </script>

Step#3: Creating a Widget “Sticky” in Blogger:

After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.

Note: To enable the search box click anywhere in the template editor and press "CTRL+F". Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one.
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
          </b:widget>
Now after finding the code as mentioned above, just replace it completely with the following coding.
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
<div id='mblfloater'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>  </div>
</b:includable>
          </b:widget>
Remember: The ID of your widget should be unique. For example, if you are using id='HTML32' in any of your widget then you cannot use the same ID for others.

All done: Once everything is done, press the "Save Template" button to finish the process.

Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users

We hope that this article have helped you in creating a Sticky floating sidebar widget in your Blogger website. This plugin is robust enough to be used in any element of your sites. Let us know what you think in the below comments.

This article was published at mybloggerlab and revised by blogakona

Keep in Mind you can also get get some come stuff from mybloggerlab too.
Share:

How to Display Disqus Comment Count

Disqus is a comment system that has proven it's efficiency among many blogs and websites. Many of sites have now switched to Disqus comment system as it is fast, easy and simple to use, but sometime it can be frustrating when you don't see the comment counts in homepage until you go all way down to open the post. Comment counts are best way to prove to readers that your blog has a value of being viewed thus increasing you impression.

Okay saying that let's see how we can add the disqus comment count on your homepage. However you should note Disqus no longer supports import and syncronize for comment through blogger platform this is because Google has updated it's application that authenticate the access logged data with the latest OAuth 2.0 since April 2015.

Anyways you should not worry to much as I will be giving you tips on how to bring up the number of Disqus comments on the index page or your post.

First and most importantly be sure to get a disqus account.

If you haven't install disqus in your blog already please follow these steps:
1. Log in to Disqus profile > then click the Settings icon> Admin> Settings> Install> Universal Code> Then scroll to the bottom and find the phrase 'How to display the comment count'. Then copy the code immediately before the </body>

Please follow the step below 

Go to Blogger -> Template -> Edit HTML.

Place this Javascript code above </body>.
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = 'blogakona';
   
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>
Replace the blue background text above to your Disqus shortname example: blogakona from blogakona.disqus.com is the shortname.

2. The next step you should look for comment markup something like this (This code is taken from Blogger's default template, for the rest match the template comment markup you use)
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>
Then replace all the above code with the code below:
<span class='post-comment'><a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments'/></span>
In case the above code doesn't function in you template, you might want to use the code below instead. This is because some template have different comment functions.

Find this code:
<b:if cond='data:post.allowComments'>
              <span class='comment-info'>
              <i class='fa fa-comments-o'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments &gt; 1'><data:post.numComments/> Comments</b:if>
              </a>
              </span>
            </b:if>
And replace with the one below:
 <b:if cond='data:post.allowComments'>
              <span class='comment-info'>
              <i class='fa fa-comments-o'/> <a expr:href='data:post.url + &quot;#disqus_thread&quot;' expr:onclick='data:post.addCommentOnclick' title='Comments'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments &gt; 1'><data:post.numComments/> Comments</b:if>
              </a>
              </span>
            </b:if>
Save you template and reload to see the effect. There you are done, check me if you need more help
Share:

SIMPLE FLAT UI EMAIL SUBSCRIPTION BOX FOR BLOGGER


As it is recommended by pros to build email list, bloggers are trying out different methods for it. We've also shared some of them which you might have read previously. One of the most popular reason for it is that we can easily make money with email list but having a great number of subscribers is important. Email subscribers can be increased by adding attractive subscription box on such areas where every visitor's eye must reach and offering something interesting is also great technique to get email subscribers. At this time, everyone is using sidebar subscribe box and you should implement that too. Just recently, we've made simple Flat UI email subscription box for blogger. Let's learn about it's features and also tutorial of inserting it in blogger blog.

Simple Flat UI Email Subscribe Box

This is just simple Flat UI email subscription or newsletter widget which will help you to gain more subscribers and monetize them. It's design is not much gorgeous but have simplicity and Flat UI style which attracts people to become your subscriber. First, it has unique header and descriptive message below header. After that, it contains two input fields which are name and email. Whenever someone comes to write his/her name or email, it gives a beautiful shadow effect which beauty the subscriber's name or email. At the end or bottom, it has big cute sign up button with Flat effect. This widget is made with pure HTML and CSS3.(source: as from codiblog)


How To Add This in Your Blog?


  • Go To Blogger >> Layout >> Add a Gadget
  • Choose HTML/JavaScript
  • Paste The Following Code in Content Box.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

<div id='byard-emailsubsocial'>
<div class='heading'>
Sign Up in Seconds
</div>
<p>Sign up with your email address to receive hot updates straight in your inbox.</p>
<div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='Your Name' />
<input type='text' name='email' placeholder='Your Email' />
<input type="hidden" value="BloggerYard" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Sign Up Now!" class="button" type="submit" />

</form>
</div>

<p id='credits'>Powered By : <a href='http://www.bloggeryard.com'>Blogger Yard</a></p>

</div>

<style type='text/css'>
#byard-emailsubsocial {
width: 300px;
height: 330px;
border: 1px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
#byard-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#byard-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#byard-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: open sans;
width: 92%;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#byard-emailsubsocial .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#byard-emailsubsocial .emailsub .button {
background: #F4836A;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #B3614E;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
cursor:pointer;
}
#byard-emailsubsocial .emailsub .button:hover{
background: #DD7761;
}

#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}


  • Replace BloggerYard With Your Feedburner Username.
  • N/B: With kind consideration of hard work done by the owners of the widget, please do not attempt to remove the credit without their permission.
  • Finally click Save and you all set up to receive new subscribers
Happy blogging
Share:

How To add Sidebar Blogger Widget With Automatic Changing Ads Banners

Hey there, I was lately asked by one of my readers on how to add automatic changing banners to either blogger sidebar or footer bar. Well! have you ever wondered how you could put several ads banner in one widget?. Yes indeed it's very simple and by the way this widget could help you keep you blog clean and somehow awesome. 

The widget is a java script coded which works in amazing way. It allows you to tidy your sidebars, footer bars as well as the header bar widgets not forgetting you can also set the ratio value to you needs and according to your blog theme style too.

I have come across most blog and frankly I got frustrated on how their theme style appears. First the blog page would load much slower and then finally you get this picture with clumsy look-no offense though. That indeed can scare away your visitors as it doesn't give that willing of the visitors coming back again to read your blog. Also it will be troublesome viewing your blog through other devices. such as smartphone and tablet also mobile phones.

For a advice before using this widget, I would suggest you to please try and choose responsive themes that would easily load faster through different browsers and devices too.

Okay, with that well noted let's see how you can use this widget:

Step one: Copy and paste the below code in your notepad for editing
-----start blogakona.blogspot.com---
<script language="JavaScript"> 
images = new Array(2);
images[0] = "<a href = 'ENTER URL FOR SITE 0' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 0' border='0' height='200px' width='600px' alt='Banner Title'></a>";
images[1] = "<a href = 'ENTER URL FOR SITE 2' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 1' border='0' height='200px' width='600px' alt='Banner Title'></a>";

index = Math.floor(Math.random() * images.length); 
document.write(images[index]); 
</script
----end blogakona.blogspot.com----
Step #2: Find the coloured section for customization, Keep in mind after pasting this code in your notepad the colours will disappear therefore use this post are reference when editing.

Step #3: Change the coloured section to your desire needs:- 

  • images = new Array(2); This section defines the number of banners to be displayed, therefore if displaying for than two banners then there is need to change the value.
  • images[0] = This helps you to name which banner corresponds to the specific given banner code. Therefore it's important to label each banner to avoid editing confusion. What you need to do is to change the [0] value- you can also use alphabet(a,b,c...) or roman numerical(i.ii,iii..).
  • ENTER URL FOR SITE 0 Change this section with your site URL(e.g yourdomain.com)
  • ENTER URL FOR BANNER 0 Change this section with you banner image URL.
  • To configure height and width (height='200px' width='600px') change the value of px to you desire set.
  • Banner title are importance to set too, so go a head and change Banner Title with your own words.
The above code only shows two section of banners as displayed below:
images[0] = "<a href = 'ENTER URL FOR SITE 0' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 0' border='0' height='200px' width='600px' alt='Banner Title'></a>"; 
images[1] = "<a href = 'ENTER URL FOR SITE 2' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 1' border='0' height='200px' width='600px' alt='Banner Title'></a>";


Therefore to add more than two banner codes copy either one of the code above and paste below the second code as shown in the diagram below. Repeat this procedure to whatever number of codes you want.



Uploading to blogger widget:

First go to you blogger account and sign in as usual, then proceed to you blogger dashboard and no further from that.
  • Open HTML/JAVASCRIPT widget, This can be from whatever position you want the banner to appear.
  • Copy the code from notepad and paste it in the widget.
  • Save the widget
  • Reload you blog to see the effect
The effect can be noticed each time a page is loaded a different banner image appears.


And there you are. Well done. any help just comment below and i will reach out to you as soon as I can. 
Share:

Trending

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.