Powered Free Blogging WordPress Theme

Want a better blog? Powered is a completely free blog style WordPress theme we coded right here at WPExplorer. We wanted to create a practical theme that could be used by any type of blog – business, technology, beauty, lifestyle, travel, foodie and more. The clean and minimal layout of this theme makes it very easy to navigate and read. Yes, there are many nice free blogging theme’s out there but Powered is a well coded theme using WordPress coding standards, offers some premium-like features (choose between hundreds of Google fonts, custom set your widths, select your menu colors) doesn’t have any spam links or encrypted code, is extremely fast, easy to use and designed for the modern age.

• LIVE DEMO
• FREE DOWNLOAD

Minimal, Responsive & Fast Design

The Powered theme is coded with a minimal grid style design that allows you showcase your recent posts in a very easy to navigate fashion and much like many popular blogs. Simply go to the WordPress Customizer to choose between 1, 2, 3 or 4 columns for your grid. Also you can choose between no sidebar, left sidebar or right sidebar for your archives, posts and pages independently. The optional “Featured Post” displays the first post of your grid in a large format which adds to the theme design but will also increase exposure on your latest articles. And the optional “Popular Posts” section before your widgetized footer will allow you to showcase some of your most viewed posts.

Customizer Settings & Image Sizes

Powered includes many useful customizer settings so you can change the default site widths, mobile menu breakpoint, add a custom logo, alter your entry excerpt length, enable/disable various parts of the theme, select your grid columns (1,2,3 or 4), select your layouts (right sidebar, left sidebar, no sidebar), alter your related posts query and select how many to display, select your preferred number of footer widget columns, enter your custom copyright text, select your default theme font-family (choose from hundreds of Google Fonts), enter your custom image cropping sizes and more!

Translations & RTL Support

The Powered WordPress theme is fully localized for translation and includes a Powered.pot file in the languages folder. It also includes 2 functions to add support for WPML and Polylang for translating some Customizer settings such as your custom logo if you want a different logo for each site language.

An RTL CSS file is also included to provide right-to-left language support without having to do anything! Simply select your RTL language in the WordPress settings and the file will be automatically loaded moving various theme elements automatically.

No More Conflicts!

Forget about conflicts with 3rd party plugins! Powered is coded with every single PHP function, class and HTML Id’s and classes uniquely prefixed to avoid any possible conflicts with other plugins. Plus we use only core WordPress functionality we don’t use any sort of 3rd party theme panels or image resizing scripts that could slow things down or break things.

Social Media Integration

Just because the design is simple that doesn’t mean that this free theme isn’t full of beautiful premium features. Powered includes built-in social media sharing on all your posts for Facebook, Twitter and Google+. All your readers have to do is click a button to share your articles (just be sure to setup Open Graph correctly on your site via a plugin).

The theme also includes a custom social media widget that you can use on your sidebar or footer. Simply add the widget to your sidebar widget area, paste in your social media links and save. You can easily drag and drop to re-order the social links as well as choose to open the links in the same or new tab.

Powerful Blogging

Most importantly Powered makes blogging easy. There aren’t any gimmicks, simply publish your posts like you normally do in WordPress and if you want you can insert an oEmbed compatible video or audio URL. Your posts will automatically display the featured image at the top (or video/audio) and your content below.  Posts also display an optional author box with bio and social links (enter your social links via your user settings), next & previous articles links, as well as a related articles section that displays other posts from the same category or at random (based on your Customizer settings).

Powered is a great option for any blog and we really hope you’ll give it a try! You can see more theme features below, or just download the theme to make your blog awesome today!

Powered WordPress Theme Features

• Completely FREE GPL theme!
• Responsive design
• 1-4 Column layouts for your entries
• Left, right or no sidebar options
• Clean & minimal grid – choose between masonry or fit-rows
• Custom image logo upload
• Some styling and typography settings
• Custom social media widget
• Custom Recent posts with thumbnails widget
• Style author box with social links
• Standard, audio and video posts
• Related posts
• Popular posts section
• Threaded comments
• Numbered pagination
• Custom footer copyright text
• Back to top arrow
• Clean & valid code
• And more!

Powered WordPress Theme Documentation

Getting started with the Powered WordPress theme should be fairly easy, but here are a few tips for using the theme.

Installation: Install this theme just like you would any other WordPress theme. Simply download the zip file. Then use the WordPress importer to install and activate the theme.

Customizer Options: Options for your custom logo, site widths, columns, custom colors and more can be found in the live WordPress Customizer. Navigate to Appearance >> Customize >> General Theme Settings to alter the default theme settings. There are also some built-in styling/color options you can access at Appearance >> Customize >> Styling.

Image Sizes: By default the Powered theme does not crop or resize any images but you can define your custom cropping at Appearance >> Customize >> Image Sizes. Here you can enter the width, height and cropping location for the various images on the site. Once done be sure to run a regenerate thumbnails plugin.

Blog Posts: Create blog posts just like normal by selecting Posts >> Add New. This theme supports featured images, video and audio style posts as well. Simply enter your embed compatible links in the current meta fields displayed under the post editor.

Popular Posts Section: The optional popular posts section displays right before the footer area and can be disabled in the Customizer under the “footer” tab. By default it will display in order of most commented posts but you can also install the Post Views Counter plugin to display your most viewed posts instead.

Report a Bug: If you find an issue with the theme you can use the form located on the Bug Report page to let us know. This should be used exclusively to report bugs/issues only. This should not be used to ask for customization or usage related questions.

Updates: Updates are provided automatically. If there is an update to the theme it should display in your WordPress dashboard. If you notice there is an update available but you don’t see the update notice you can always re-download the theme and update via FTP.

• LIVE DEMO
• FREE DOWNLOAD

Share:

Read More

How to Add HTML Parse Tool To Blogger (Adsense Parser)

HTML Parse tool for blogger also known as HTML encoder tool can also be used to parse any HTML or javascript code into XML code format. In our tutorial today we are going to learn on how to add an HTML parse tool to your especially in the blog's static page. The advantages of having this tool in your blog will be useful whenever you need to convert and display XML code instead of HTML codes in your blogger post.

Since you can't add Ad codes directly without parsing them in you blog post, you will be required to use Ads parser tool to solve your problem. Most effectively Adsense codes or any other Ads code can be parsed and you get the XML code to put in your template or anywhere in the post section.

Let's see how we can add this code in you blogger.

How to Add HTML Parse Tool to Blogger

Step 1: Log into you blogger account and then from the dashboard, click on 'Pages', select 'new page' to create a static page.

Step 2: Click on 'HTML' mode, then Copy the code below and paste into the text field of the new page you've created.

<form> <textarea style=" height: 320px; width: 600px;" name="data1" ></textarea><input type="button" class="myclass" value="Convert" onclick="html2entities(this.form.data1)" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"><input type="reset" class="myclass" value="Clear" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"></form>

Step 3: Save the page and the go back to Template/Theme>>>click on 'Edit HTML'. Click anywhere inside your template the press CTRL+F to search  for </head> and then copy the code below and paste code above it.

<script type='text/javascript'> //<![CDATA[ function html2entities(){var a=/[(<>"'&]/g;for(i=0;i<arguments.length;i++)arguments[i].value=arguments[i].value.replace(a,function(a){return replacechar(a)})}function replacechar(a){if("<"==a)return"&lt;";if(">"==a)return"&gt;";if('"'==a)return"&quot;";if("'"==a)return"&#039;";if("&"==a)return"&amp;"}; //]]> </script>

Step 4: Last but not the least with CTRL+F search for ]]></b:skin> and then Copy the CSS code below and paste above it.

input.myclass{background:none repeat scroll 0 0 #888;border:2px dotted #777;color:#eef;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif} input.myclasshov{background:none repeat scroll 0 0 #aaa;border:1px dotted #aaa;color:#FFF;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif} textarea{width:100%;color:#261fc0;font:14px verdana;background:#fffdf7;border:2px dotted #ff180d} textarea:hover{border:1px dotted #444}

Lastly save you template the refresh you blog to see the result. Ask me if trouble arise will help you out. It always nice having you around. Ciao,...

Share:

Read More

How To Add Javascript/HTML Code Box Tool In Blog post

Most bloggers whose work mainly involving developing widget using code will always need some special tool to share them out with other. That's why today I will sharing with a simple trick on how to add Javascript/HTML code box into your blog post. This tool is essential in organizing you content and displaying different sections designed for specific purposes

Okay below is how you can go about adding this code box too in your post.

Step 1. As always you will need to sign into your blogger account>>>>then go to Dashboard and then to the template/theme section.

If you ain't a pro, you can easily go to customize then from the new window  select Advanced and click on Add CSS.

For pros or those who need heavy tactics, you will need to go to Edit HTML and then use CTRL+F to find "]]></b:skin>".

Step 2. Copy and Paste the below codes in the CSS section or just above "]]></b:skin>" and apply to the blog or save your template.

.code { overflow:auto;width:503px;height:200px; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 35px; clear : both; list-style-type : none; background : #000000 ; border : 1px solid #000000; border-left:20px solid #ccc; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } .code:hover{ color:#FEF9BF; border : 1px solid #000; border-left:20px solid #ccc; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 10px 10px 5px #888888; }

Step 3. You will need to go back to post page and on HTML tab view add the code below:

<div class="code">
Your Codes
</div>

Change your codes with whatever code you have and you are done to save your work. publish int to see the result...

Comment below if you got any trouble.

Share:

Read More

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:

Read More

How to Add A Stylish Cloud Label Widget In Blogger

Cloud Label is one of official blogger'd=s widget actually they are then only blogging platform providing the widget. Anyway their widget comes with no styling and sometime can give you blog n odd look. Therefore in this post you are going to learn 'How to Add A Stylish Cloud Label Widget' in your blogger blog, This widget helps to grouping your blog content in perfect standard way and also notifying you visitor which post is related to which. On the hand too it also helps to manage your blog bounce rate. Let's go forward and learn how to add this widget to you blog today.

N/B: 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 >> Layout >> Add Label Widget From the Layout and put the settings just like show in the picture below.

Step 2: In the template, search for the ]]></b:skin> tag  and just above it paste the following Coding.

.cloud-label-widget-content {
text-align: left
}
.cloud-label-widget-content .label-count {
background: #2b2b2b;
color: #fff!important;
margin-left: -3px;
padding-right: 3px;
white-space: nowrap;
border-radius: 2px;
padding: 1px 4px !important;
font-size: 12px !important;
margin-right: 5px;
}
.cloud-label-widget-content .label-size {
background: #ebebeb;
display: block;
float: left;
font-size: 11px;
margin: 0 5px 5px 0
}
.cloud-label-widget-content .label-size a,
.cloud-label-widget-content .label-size span {
height: 18px !important;
color: #2b2b2b;
display: inline-block;
font-size: 12px;
font-weight: 500!important;
padding: 6px 8px
}
.cloud-label-widget-content .label-size a {
padding: 6px 10px
}
.cloud-label-widget-content .label-size a:hover {
color: #000!important
}
.cloud-label-widget-content .label-size,
.cloud-label-widget-content .label-count {
height: 30px!important;
line-height: 19px!important;
border-radius: 2px
}
.cloud-label-widget-content .label-size:hover {
background: #2b2b2b;
color: #fff!important
}
.cloud-label-widget-content .label-size:hover a {
color: #fff!important
}
.cloud-label-widget-content .label-size:hover span {
background: #ebebeb;
color: #2b2b2b!important;
cursor: pointer
}
.cloud-label-widget-content .label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
font-size: 100%;
opacity: 10
}

Note that the CSS code only works for Cloud Label Widget and not for list label widget.

Share:

Read More

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:

Read More

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:

Read More

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:

Read More

6 Tips To Avoid And Prevent Your Blogger Blog To Be Closed

When a blogger account is deleted or shut down by google it self then there something on the background you did and needs somechecking.Actually, you will be notify through your email address, whenever they delete your blogger blog. And the deletion of your blog is because you mostly did not follow their TOS and Policy.

In starting, your blog does not get much traffic from anywhere. So the blogger team won't have any complaints or notice about your blog in the beginning. But when you start driving more traffic from search engines or from social media or anywhere, then many of people will see your blog. If they notice, you are not using blogger platform legally, then they will complain about your blog to Google. The Blogger team then manually check your blog and if they find you are misusing blogger platform, then they will delete your blog. You will only have few chances to get it back again. Sometimes blogs are automatically deleted for spamming reason too whereby automation technique like bots (Googlebot) are used.  Below are six things to avoid and prevent your blogger blog to be deleted.

#1. Avoid creating too many blogs

This can be a serious problem really, if you did any mistake by chance and your blog is deleted, then probably you gonna think of creating a new one in the same. well I could suggest you create another Google account with real name and profile and start blogging seriously. In short, if you’re many of the blogs, deleted automatically, and does not recovered yet, then you should stop to creating another blog on the same account.

#2. Avoid redirecting your blogger blog

Many of advertising ads and some JavaScript code, redirect your blogger blog to another URL like doorway pages or affiliate programming offers. Use Fetch as Google option from Google Webmaster Tools to check your blog redirection. If it is redirected, then Googlebot, surely inform your blog to the Blogger platform, and your blog will be shut down.

#3. Avoid using spam links in the blog post

Keep a constrain use of nofollow attribute, many people mention links in their post without using the nofollow attributes. If you are not using nofollow attributes then Google will crawl that page and if they notice a mentioned paid links or spam links in your post then you are the hopes of you blog to be deleted.

4. Avoid the use of third party ads in sidebar

Well getting AdSense account can be a lot of waiting and toughness but you know blogger is part of google as well as adsense and to make more interesting blogger account is totally free to use. So I think they won't easily allow you to use their product with another third party product. Anyways they got everything you need also keep in mind avoid the use of third party ads, which display abuse ads, and gives poor user experience in your blog.

#5. Hate speech in your blog post content, not allowed

We currently have freedom of speech in majority of countries now and to talk freely in cyberspace is like a go ahead deal. But did you know Google blogger won’t give you that freedom. So whenever you post any articles it should be user friendly.

#6. Avoid using Copyright content in your blog post

Many of bloggers directly embed images, videos and files (cracked software+hacked content) in their post without checking its license first. Some other copy paste articles in their post. You won't be penalized immediately but as soon as you start driving more and more traffic to your blog, your chances of deletion will increase.

Well am done explaining but if you need more support just use the comment below I will glad to get back at you. Keep in mind the six thing I have mentioned and be safe with happy blogging.

Share:

Read More

How To Remove Powered By Blogger Attribution

In today's tutorial, I will give you a simple guide on how to remove “powered by blogger” attribution widget/gadget that appear in the blogger footer. I would suggest not remove it as in some case it helps you blog easily ranked on google search, but it's you choice if you really want to remove it, don’t worry your blogger blog as it won't be affected in some sorts.

Okay let's check the step below to start removing the widget from your blog:

Step #1: Go to you blogger dashboard>>>Navigate to Template/Theme section>>>Then click on HTML. 

Step #2: Click the 'Jump to Widget' and select Attribution widget as shown in the diagram below. Note if you can't find it, use CTRL+F and find the Attribution keyword

Step #3: You will see these lines of codes and note the highlighted word.

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>....</b:widget>

 Step #4: Changed the highlighted (locked) value from true to false, like this,

<b:widget id='Attribution1' locked='false' title='' type='Attribution'>....</b:widget>

and there you are done you can save you template.

Now go to the layout option, and click on Attribution widget, and you will see a removal option. Click on it to remove, and then save your settings.

Any problem? just hit me in the comment section.

Share:

Read More