How To Add More Authors In Your Blogger Blog

Adding more authors in one's blog aside from guest posting is sometimes necessary especially if  one who manages the blog ( the administrator) has found busy for  some other reasons. An advantage of the administrator/owner of a team blog is he/she has the only  access to the blog's settings and template which means he/her members task is only to  make post and publish the same. But if the administrator don't want to publish such posts, he/she has  the ability to edit and delete posts made by other members of the blog. Additionally, he/she has the power to add or to  remove other team members. Any number of members can be a part of a single blog which he can accept  to help him as he like.

Adding Multiple Authors to Blogger Blogs

In this tutorial, I will show you the steps on  how to "add more co-authors or guest authors to your Blogger blog". Simple steps are enumerated below, just follow them correctly to enable this feature in Blogger.

Step 1. Sign in to your Blogger Dashboard
Step 2. Click Settings and look the "Permissions" section
Step 3. Then click the “Add Authors” button to add  new author(s) who can write for your blog posts.



Step 4. Next is you are going to invite people to write a post in your blog by typing their email addresses (inside the box provided)  separating each address with a comma. Soon, they'll receive an email with a confirmation link. Note that they must have Google Accounts, and if they don't already, they'll be prompted to create one.
Step 5. When you are ready to send the invitations, click OK.

Blogger will  send an email invitation to each person you listed in Step 4. If they agree to participate you in writing to your blog, they will  respond to the email positivelyand  Blogger does the rest for you.

Changing The Permissions Of The Author

Once the author whom you invited accepts your invitation , he can  now start writing in your blog. But as i said earlier he has only limited privileges such as editing or deleting posts written by him. He can’t delete posts written by other authors.
But if  you want anyone of the author to edit others post , then you need to grant him admin privileges ( for me this is disgusting to the part of other authors). For granting Admin privileges , go to Settings page of your blog and navigate to Permissions sub-tab. Beside the author name you will see a button ” grant admin privileges “.

Happy blogging and always take care of your loved ones!

How to Use Smartphone in WordPress Blogging

As a blogger, you frequently find yourself in the position where you want to provide an update to your readers right away. Perhaps you are in the heat of the moment. Maybe you have an idea that you don’t want to forget. In many situations, you find yourself in the situation where you want to report something live but you do not have access to your laptop. Relax as you let your smartphone handle it.

WordPress App

WordPress provides a free smartphone app that allows you to access your blog from anywhere you have a cellular data connection. This allows you to blog on the fly.
While you might be used to seeing people pop out their tablet on the subway to check their website and provide an update, sometimes that can even be inconvenient. That is where the WordPress smartphone app can provide the blogging edge.
You can literally open up the app and start creating a new post in just a few seconds. Imagine the possibilities.
This is obviously not a tool for the serious blogger who dives into complicated subject matter through a long post. Instead, blogging with the WordPress app gives you the opportunity to provide up-to-the-minute updates for an active blog that rapidly becomes known as the place to go for current information.

Local Source

Blogging with the WordPress app provides you with the opportunity to provide an in-person perspective to the various local events that you feature in your blog. It allows you to become less of a blogger and more of a reporter. You can observe events in the field and quickly provide updates to your readers simply by using the app.
The app does more than just let you enter text. You can upload photos and format your blog post with just a few taps of your finger. It is amazing how easy the app makes updating your blog while away from the office.

Uniform App

The WordPress blogging app works with any type of smartphone that accepts apps. Whether you use iPhone or Android, the WordPress app is an easy tool to utilize.
The amazing part of the WordPress app is that it can provide instant updates to any WordPress website. Whether you utilize free templates or  Premium WordPress themes , the WordPress blogging app will help your site become one of the most frequently updated sources that your readers visit.

Anny Solway

About our Guest Author:
Anny Solway is a dedicated writer at ThemeFuse – a leader in the WordPress premium themes  area. She likes to discover new ideas about internet marketing, social media and blogging.

Also Read:

1. How to Add Social Networking Buttons With CSS3 Style in Blogger
2. How to Get Free Do Follow Backlinks For My Site
3. How to Create Magazine Style with Post Summaries and Thumbnails on Blogger

How to Add Borders to Images in Blogger

Inserting or adding  images  to Blogger  is necessary to emphasize more of what we are going to deliver to  our rreaders. And in order to make this photo more proffessional in looks and be different from others, we will add borders on it.  Here, in this article I will share to you how to add border(s) to an individual image using HTML .
Before we will go to the steps, let me show you first the different border attributes or styles namely: dotted, dashed, solid, double, groove, ridge, inset and outset. See the demo below:

Dotted	Dashed	Solid	Double
Groove	Ridge	Inset	Outset

Now you have seen those different border styles, it is now time to proceed to the tutorial. Please follow the steps below:

How to Add Borders to Inserted Images in Blogger

Note:

You must have to know first how to get the  image link (url) of your uploaded images  in Blogger before you can apply this trick. Please click this link for assistance.

Step 1. Go to Blogger Dashboard
Step 2. Select a certain post or  you may choose some published posts with images that you want to add borders on it.
Step 3.  Copy the HTMLcode below and paste it in your Blogger Post Editor page. (Your page editor must be switched to HTML Mode).

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzArU1coZZpEOtyX6nP1EZeFnE5k7wGDLGwtXEp8b87SBnINqE9d_GsJBGdXDqMh1PRPMBJxc0zkxhgej-ArTasQanU34iyy5_dlKmX3EQjdRZqAHMDTRZY2m4WcyktxEAi0Ri3q5ZU8c/s1600/add+borders+to+blog.png" style="background-color: white; border: 3px dashed orange; margin-left: auto; margin-right: auto; padding: 1px;" />

Customizations:

- Replace the black bolded texts w ith image link (url) of your photo.
- Background color is white, you may change it according to your blog's color.
- Border attributes here are 3px which the size, greater numerical value will mean a larger size also. Dashed is the border style, you can change it with the different border styles as  shown in the demo above.  And orange for the color of the border.
- For the padding, greater numerical value will make your borders to pull out from your image. See the demo below

Note:

The first image has a padding of 10px while the second one has only 1px.

Step 4. Publish or update  your post and you are done. Congrats! :-)
Peace Buddies!!!

How to Remove Showing Posts With Label in Blogger

The "Showing posts with label" notification  always shows  above the posts everytime time you click on a label link. I know some of  us don't want to show it in our blogs since it is quiet useless and just occupy additional space in our post. If that is the case, this article is useful for you.

Removing "Showing post with label...show all posts" (Version 1)

Step 1. Go to  BloggerDashboard >> Template >> Edit HTML (always back-up your template)
Step 2. Click anywhere inside the template code, then search - using CTRL+F -  and find the code below:

<b:includable id='status-message'>

Step 3. After you have found it, click on the sideways arrow before to it, to expand the rest of the code.

Step 4. Below is this code that you need to remove,

<b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>

Step 5. Remove all that set of code and  replace it with the code below,

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 6. Save your template and you're done. Enjoy!  : >)

Removing "Showing post with label...show all posts" (Version 2)

Here is another way of removing it from your blog using only a simple  css on it. Please follow  the steps below:
Step 1. From your Blogger Dashboard, go to  Template and click Edit HTML.
Step 2. Search the code below

]]></b:skin>

Step 3.  Just above the code in step 3, add the css  below,

.status-msg-wrap{
display:none;
}

Step 4. Save your template and say Bravo!

Professional Random Posts Widget for Blogger with image thumbnails and snippets

Random posts widget in Blogger sites is needed when you  have too many posts and visitors don't always have the mind to go through all the articles written  just  to make an idea of your blog's content. This type of widget allows your visitors to find content more easily and therefore  it is useful to gain popularity in the blogosphere. In this post  I will show you how to add a random posts widget to display a list of posts in a random order with thumbnails and it snippets.

Click For Live Demo

Also Check :

1. How to Add Related Posts Widget
2. How to Add Widget Below First Post in Blogger
3. How to Add Recommended For You In Blogger

Show Random Posts with Thumbnails and Posts Summary in Blogger

Step 1. Go to your  Blogger  account
Step 2. Click  Layout.
Step 3. Click on the Add a gadget link and select Html/JavaScript from the popup window.
Step 4. After selecting the Html/Javascript,  add the following code below with its styles being attached.

<style>
#random-posts img{border-radius: 70px;float:left;margin-right:5px;
width:40px;height:40px;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;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: -10px;border-bottom: 0px solid #000000; padding: 4px 4px -5px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=3;
var rdp_snippet_length=0;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQbPN3XYxOabWN5V0llDNtjY4aiipU8FXRuNywfUXF_SuQweU66AWxM5KLm7sGVuFortoqFmNL7Lt60NKdtlnEPBlMg5ZOCQ5cesU8HnNntxEYYZW2kUDwf9FLcWvO5q80hiInvK41Tw/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Step 5. After pasting the above code, give your new widget a title .You can type "Random Posts, Selected Post, Recommended Post" or any  related name  that you want.

Random Posts Options

- Thumbnail dimensions: 
Adjust the border radius (roundness) of the image thumbnails by changing 70px in the second line.
Adjust the size of the thumbnails in pixels, replace the 40px value of the third line.

- Summary length: 
You can control the the length of the summary (in characters) by changing the 0 value from var rdp_snippet_length=0;
In the above code  I set  it to 0 in order to have no snippet , but if you want to add snippet of your random post, please add numerical value like 100, 110, etc.

- Post info: 
if you want to hide the post date and comment count change 'yes' from var rdp_info='yes'; to 'no';

- Font Size for Posts Titles and Summary: 
Change the font size  11px ( 9th line) for the post snippet.
Modify the value 12px (7th line) in order to change font size for the posts title.

Step 6. Click on the Save button and you're done! Your sidebar will display a random posts widget on each of your blog pages.
reference: helplogger

Create a CSS Image Slider with Thumbnails for Blogger

Hey guys, are you having a problem on how to make image galleries/sliders for your blog? This tutorial is the answer for it. Photoblogs  need this kind of trick in order to show their images in a nice and professional manner but not only for those kind of blogs since we need photos occasionally to present some ideas in our readers.  In this tutorial, I will show you  the steps on how to make it. An overview of this is tweak is  having a mini blocks of images at the top which will enlarged at the bottom each time an image is selected  upon hover of the mouse on the  thumbnail and that was acquired through adding some CSS on it.

See demo here.

How to Add A CSS Image Slider with Thumbnails to Blogger

Step 1. Log in to your Blogger Dashboard >> Template >> Edit HTML
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3.  Look for the code below by  pasting it inside the search box and hit Enter.

</head>

Step 4. Just above/before the  tag above, paste the css code below:

<style type='text/css'>
.bttimage-container {
position: relative;
width: 620px;
height: 610px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.bttimage-container a {
display: inline;
text-decoration: none;
}
.post-body img {
max-width: 600px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Mini-thumbnails style */
.mini-thumbnail {
width: 18%; /* mini-thumbnails width */
margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1.5s ease;
-moz-transition: top 1.5s ease;
-o-transition: top 1.5s ease;
-ms-transition: top 1.5s ease;
transition: top 1.5s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */
a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */
a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1.5s ease;
-moz-transition: top 1.5s ease;
-o-transition: top 1.5s ease;
-ms-transition: top 1.5s ease;
transition: top 1.5s ease;
}
</style>

Step 5. Save template button.

Step 6. Go back to Blogger Dashboard and select any of the post you have published or you may choose a New Post where you will add the add the HTML code  inside a post or page by clicking the HTML section/button.

Hint:

Another way of putting the  HTML codes is thorough going ether to Lay -out and choose Add a new Gadget buttom then click HTML/Javascript.

<div class="bttimage-container">
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="BIG-THUMB-URL1" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL3" />
<img class="large-thumbnail" src="BIG-THUMB-URL3" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL4" />
<img class="large-thumbnail" src="BIG-THUMB-URL4" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL5" />
<img class="large-thumbnail" src="BIG-THUMB-URL5" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL1" />
</a>
</div>

Customization:

• Replace http://bloggingtipsandtrix.blogspot.com/ with the url of your page/post where you want to land a certain link.


• To add pics inside the image slider just replace MINI-THUMB-URL and LARGE-THUMB-URL texts with the URL of your image.


• The URL for the SMALL-THUMB-URL and BIG-THUMB-URL in every set or box is the same. See blockquote below for an example. Or you can do it separately depending on your preferences.

<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZH4PEyml7ukLnLdsD2AUzhoBcqdutGuSfYuFfKIPzx_475rnjbKuf3VsXeqgxRlcbPfw4rmW8kCLooq4Q2m2KLd3CPh08kLEV90yrby66tgJ6fLZk_FUt-s3Lr9Fei50OXkOkH68_08Oa/s1600/photo+slider+in+blogger.png" />
<img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZH4PEyml7ukLnLdsD2AUzhoBcqdutGuSfYuFfKIPzx_475rnjbKuf3VsXeqgxRlcbPfw4rmW8kCLooq4Q2m2KLd3CPh08kLEV90yrby66tgJ6fLZk_FUt-s3Lr9Fei50OXkOkH68_08Oa/s1600/photo+slider+in+blogger.png" />
</a>

Note:

The last LARGE-THUMB-URL1 should be replaced with the URL of the default image that will appear on your slider.

Read this post to know how to get the image URL from your uploaded photo in Blogger.

Also read:

How To Show Or Hide/Cover Blog Content With Images Using CSS

Step 7. Finally, save your widget/gadget or publish your page/post and that's it! Enjoy Buddies :-)
Credits: helplogger.blogspot.com