Don't Miss

Latest Posts
Browsing Category "Tutorials"

How To Add Multiple Authors To Blogger Blog

- 66 Comments
A team is always better than a one man army and achieving our goals becomes easier with a team. Teamwork is better than being alone. Same is the case with blogging. Competition in the field of blogging has increased and survival has become very tough, so people are starting their blog with multiple niches. So it's always recommended to have a multiple author blog. If you have multiple author blog, you can have a schedule for posting and it will be easier for you to have a very good number of posts within a small period. If you want to boost up your blogging career then its important to start working as a team. But guys, one account, 4-5 or more people using one account, doesn't make a sense. So what to do now??? Not an issue, if your blog is hosted on blogger then you don't have to worry about it. Blogger all of its features also provides you an option for adding multiple authors to your blog. By adding multiple authors, all the people that you've added can access to your blog dashboard from their accounts. You can also manage their roles as Admin or Author. So, today in this tutorial we'll show you that How To Add Multiple Authors To Blogger Blog.
How To Add Multiple Authors To Blogger Blog

How to Add Multiple Authors to your Blogger Blog

First and foremost go to your Blogger Dashboard >> Select your Blog >> Setting. Now in the Basic section of setting hit the + Add Authors button under the Permissions heading
How To Add Multiple Authors To Blogger Blog
It'll ask you to enter the Email id's of the new authors, enter the Email id's of your authors and hit the Invite Authors button.
How To Add Multiple Authors To Blogger Blog
An email invitation will be sent to the specified persons. When he verifies the invitation, his name will be listed and you can decide his account type as Admin or Author.
All done :)

From Editors Desk

We hope this article may have helped you in learning How To Add Multiple Authors To Blogger Blog. Share it with your friends and don't forget to subscribe us. Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

How to Add Images to Blogger Sidebar

- 5 Comments
We add pictures to our blog posts, static pages, header etc. But have you every thought about adding pictures to your blogger sidebar. Adding images to our sidebar is really easy and simple, but still most of us don't know. Recently one of our readers asked us about How to Add Images to Blogger Sidebar. So, today in this tutorials we'll show you that How to Add Images to Blogger Sidebar. Adding images to blogger sidebar is really easy and fortunately blogger provides a tool for adding images to your sidebar easily. So just the steps below to add images to your blogger sidebar.
How to Add Images to Blogger Sidebar

How to Add Images to Blogger Sidebar

First of all log in to your Blogger Account >> Select a Blog >> Layout and click Add a Gadget. A popup will open with the list of widgets, scroll down and select the Image gadget from the list.
How to Add Images to Blogger Sidebar
Now you'll notice a couple of options. Enter your Image Title in the Title field, enter its caption, link and upload your image.
How to Add Images to Blogger Sidebar
Once everything is done press the Save button and you're done.

Final Words

We hope this tutorial may have helped you in learning How to Add Images to Blogger Sidebar. Do share your thoughts about this simple tutorial. Share it with your friends and don't forget to subscribe us!

How to Host CSS or JavaScript in Blogger Using Google Drive

- 3 Comments
Sometimes we need to host our codes on some external source for our blogger templates but unfortunately blogger doesn't provides the flexibility to host CSS or JavaScript files in a separate link. That's why hosting CSS and JavaScript files on your Blogger Blog has always been a matter of concern for bloggers. Embedding external files instead of writing the entire code has its advantages. Blogger doesn't provides any option for hosting external files but luckily Google Drive provides you an opportunity for hosting CSS or JavaScript files. Hosting your codes on external sources reduces your template size and your blog loads faster. Today in this tutorial we'll learn that How to Host CSS or JavaScript in Blogger Using Google Drive.
How to Host CSS or JavaScript in Blogger Using Google Drive

Features of Google Drive

There are many features for hosting your files on Google Drive and some of them are:-
  • Lots of Space: Google drive provides you 5Gb of free space, and its enough for hosting codes. If your drive is full, you can get more space by upgrading.
  • 100% Security: Google Drive provides you full proof security for your hosted files, you don't have to worry about your files security.
  • Privacy: Google drive lets you keep your files private, if you don't want to share your files with others you can change its privacy to Private and no one will be able to access except you.
  • Create and collaborate: Google drive provides you the flexibility to host different kinds of spreadsheets.
  • All this for Free: Yes all this is for free, you don't have to pay a penny for hosting you files on Google Drive.

How to Host CSS in Blogger Using Google Drive

Step 1. First of all you've to create the CSS file. To do this, copy the CSS code from your template that you want to upload. Log in to your Blogger Account >> Template >> Edit HTML >> Search (Ctrl+F) for <b:skin><![CDATA[ tag and copy the code till the ]]></b:skin>.
How to Host CSS or JavaScript in Blogger Using Google Drive
Step 2. Prepare your style.css file After copying the CSS code paste it in the notepad and remove that code from your template. Now save the notepad and name it as style.css. Note: The file extension must be in .css
How to Host CSS or JavaScript in Blogger Using Google Drive
Step 3. Now you've to host your CSS file. Go to Google Drive and log in to your Gmail account. Click Create >> create a new Folder >> Name it whatever you like such as mycodes or myscripts etc. and click Create button
How to Host CSS or JavaScript in Blogger Using Google Drive
Step 4. Open that folder >> Click Upload button and choose Files >> Now it will request you to choose your files, so select you file and click the Open button. A wizard would appear on the right side of your screen displaying your upload status.
How to Host CSS or JavaScript in Blogger Using Google Drive

How to Host CSS or JavaScript in Blogger Using Google Drive
Step 5. Once the file is uploaded, click the Share button >> Click the Get Shareable Link and choose Anyone Can View the File option. It will provide you the sharing link
How to Host CSS or JavaScript in Blogger Using Google Drive
How to Host CSS or JavaScript in Blogger Using Google Drive
Step 6. The sharing link would be something like https://drive.google.com/file/d/your-unique-file-code but you have to change it to https://googledrive.com/host/your-unique-file-code. For example if my file link is https://drive.google.com/file/d/0B43vwjPtKakCODMzcEc2amM3ZTQ so i will change it to https://googledrive.com/host/0B43vwjPtKakCODMzcEc2amM3ZTQ, Hope you got it.
Step 7. Its Time to Add your File/Link to Blogger. Log in to your Blogger Account and go to Template >> Edit HTML. Now search for the <head> tag and paste the below code just above/before it. Note: Don't forget to replace https://googledrive.com/host/your-unique-file-code with your file link that we created in the previous step and make sure that you've removed the CSS code from your template as we mentioned in the step 2.

<link href='https://googledrive.com/host/your-unique-file-code' rel='stylesheet'/>

Step 8. Click the Save Template button and you're done!

How to Host JavaScript in Blogger Using Google Drive

To host JavaScript on Google Drive, you have to follow the same steps, the changes are that the file Extension must be in .js form in case of JavaScript and for adding it to blogger use the code below

<script src='your-googledrive-javascript-link-here' type='text/javascript'></script>

Congratulations: You've successfully hosted your CSS and JavaScript in blogger using Google drive.

From Editors Desk

We hope that you've learned How to Host CSS or JavaScript in Blogger Using Google Drive. Share this tutorial with your friends and don't forget to subscribe us!
Got a Question? Please don't hesitate and ask us in the comments section below. If we missed something, then leave a comment below.

How to Enable Captcha/Word Verification in Blogger

- 5 Comments
Blogger provides an option to enable or disable Captcha/Word verification. You can reduce spam on your blog by enabling this word/captcha verification method. Captcha means "Completely Automated Public Turing test to tell Computers and Humans Apart". People make irrelevant comments on your blog posts and these comments give a bad impression to your users. Comments contaning ads, links and also gambling sites makes your blog worse. You can't focus on your blog because if your blog receives hundreds of comments daily then its really hard to delete the spam comments and it also requires a great deal of time. So, by enabling word verfication method you can reduce spam on your blog because only humans can pass this word verification method, mostly these spam comments are made by automated systems and luckily these system can't pass the word verification method. Thus, enabling word verification is a nifty path to prevent unwanted comments. Today in this tutorial, we'll show you that How to Enable Captcha/Word Verification in Blogger.
How to Enable Captcha/Word Verification in Blogger

How to Enable Captcha/Word Verification in Blogger

First and foremost Log in to your Blogger Account >> Select a Blog >> Setting >> Posts and Comments
How to Enable Captcha/Word Verification in Blogger
Now you'll see an option for Word Verification, just enable it and hit the Save Setting button on the top. That's it!
Congratulations: You've successfully enabled Captcha/Word Verification on your Blogger blog.

From Editors Desk

We hope this tutorial may have helped you in learning How to Enable Captcha/Word Verification in Blogger. Share it with your friends and don't forget to subscribe us!

How to Embed Google Maps in Blogger

- 19 Comments
Adding a Map to your company/business website can help your visitors to easily understand where this business is located or where this event takes place. Because when it comes to online business, you have to let your customers and visitors know about your business location. So, why not assist them to easily find your location by adding Google Maps to your website. Google Maps is the most flexible and reliable map. It provides you two options for your map i.e. simple or satellite, choose the one, that you think is better for you. It also provides you high resolution images from all over the world. Easy and flexible directions will help you everywhere whether you are on a bicycle or a car. Another great advantage provided by Google maps is the street view where one can easily navigate through the streets and see real architectures. So, today in this tutorial, we'll show you that How to Embed Google Maps in Blogger.

How to Embed Google Maps in Blogger

First of all go to this page https://maps.google.com/, by using the Search Box search for your location. For example, I am located in Canada so I would type "Canada" (You can also add more details like your area or building number).
How to Embed Google Maps in Blogger
After entering your location, you will be able to see your location map. Now choose whether you want a simple view or a satellite view.
After making all the customization that you like. Its time to embed this map to your blog. To embed this map, first click the Gear icon at the bottom of that page and click Share and Embed Map option.
How to Embed Google Maps in Blogger
A popup will open containing two options one for sharing and the other is Embed Map option. Click Embed Map, now you'll be able to see the code, copy that code, and paste it where where you want to show the map, a sidebar, post or on a separate page.
How to Embed Google Maps in Blogger
Embed this Map to your Blogger Blog
Now sign in to your Blogger Account >> Pages >> Create a New Page >> Switch to HTML Tab and paste the copied code. Hit the Publish button and you're done.

From Editors Desk

We hope this tutorial may have helped you in learning How to Embed Google Maps in Blogger. Share it with your friends and don't forget to subscribe us!

How to Enable or Disable Mobile Template of your Blogger Blog

- 5 Comments
Blogger provides you fully optimized mobile templates for your blog. On enabling the mobile template, your blog will redirect your visitors to a fully optimized mobile template version. This feature is not only for templates provided by Blogger, even if you are using a full customized custom template, you can still enable this feature on your blog. The best thing is that no coding is required for enabling mobile template version. You just need to enable the mobile template version. Blogger offers its own mobile templates and you can make use of them. After enabling mobile version you content/posts will be optimized for mobile version. However your custom styles and widgets will not work on mobile template except some typical gadgets like header, adsense and comments section. Blogger will automatically redirect your visitors to mobile template if they access your blog via mobile devices. So, today in this tutorial we'll show you that How to Enable or Disable Mobile Template of your Blogger Blog.

How to Enable or Disable Mobile Template of your Blogger Blog

Log in to your Blogger Account >> Select a Blog >> Template and click on the Gear icon under the Mobile Template Preview.
Enable or Disable Mobile Template of your Blogger Blog
A popup will open with several options, if you want to enable Mobile Template view then check the Yes. Show mobile template on mobile devices option and choose your template.
Enable or Disable Mobile Template of your Blogger Blog
If you want to disable Mobile Template then check No. Show desktop template on mobile devices option and hit the Save button.
Enable or Disable Mobile Template of your Blogger Blog
All done. Hope this tutorial helped you in learning How to Enable or Disable Mobile Template of your Blogger Blog. Share it with your friends and don't forget to subscribe us!

Add Attribution Links to Copied Text from your Blog

- 1 Comment
Many popular and new blogs are using simple scripts in their blogs that automatically adds attribution links to copied text from their blog. This is a great way for securing your content from stealers. There are many online services available that helps you in adding attribution links to copied text from your blog. Recently one of our users asked us about adding attribution links to copied text. So, today in this tutorial we'll show you that How to Add Attribution Links to Copied Text from your Blog. In this method all you've to do is to just add a JavaScript to your blog and after that when someone copies content from your blog, it'll automatically add attribution links to copied text. We hope that this article might would help you in securing your content.
Add Attribution Links to Copied Text from your Blog

Add Attribution Links to Copied Text from your Blog

Step 1. Log in to your Blogger Account
Step 2. Select a Blog >> Go to Template >> click Edit HTML and search (Ctrl+F) for the </head> tag
Step 3. Now Copy (Ctrl+C) the below code and Paste (Ctrl+V) it just above/before it

<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName(&#39;body&#39;)[0];
var selection;
selection = window.getSelection();
var pagelink = &quot;<br/><br/> Read More at: <a href='&quot;+document.location.href+&quot;'>&quot;+document.location.href+&quot;</a><br/>Copyright &#169; Blogolect&quot;; // You can Replace this with your own text
var copytext = selection + pagelink;
var newdiv = document.createElement(&#39;div&#39;);
newdiv.style.position=&#39;absolute&#39;;
newdiv.style.left=&#39;-99999px&#39;;
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}
document.oncopy = addLink;
</script>

Note: You can change the highlighted text with your preferred text
Step 4. Hit the Save Template button
And you're done!

From Editors Desk

We hope this tutorial may have helped you in learning How to Add Attribution Links to Copied Text from your Blog. Share this post with your friends and don't forget to subscribe us.

How to Block AdBlocker on your Blogger Blog

- 3 Comments
AdBlocker is a browser extension, available on all major browsers and it is used to block advertisements and pop ups shown on websites. Advertisements annoys each and every visitor of our blog, especially pop ups. AdBlocker is useful to stay away from those annoying and disgusting ads, but this extension is a roadblock in the path of a blogger. Due to this extension visitors don't reach ads and it effects the earning of bloggers. AdBlockers totally affect life of bloggers who want to make money from there blogs. It also reduces CPM, CPC and other rates which you use to generate your revenue. There are two ways that you can use to block AdBlockers, the first one is to ask your readers to remove AdBlocker extension and the other one is that, force them to remove AdBlocker. If thousands of people visits your blog daily then it is impossible to ask each of them to remove AdBlocker extension which means that we have to force them to remove AdBlocker. So, today in this tutorial we'll show you that How to Block AdBlocker on your Blogger Blog.

How to Block AdBlocker on your Blogger Blog

Step 1. Log in to your Blogger Account
Step 2. Select a Blog >> Template >> Edit HTML >> Search for the ]]></b:skin> tag and above/before it paste the following code

#bgt_noadblocker {
display:none;
}

Step 3. Again Search for </head> and paste the below code just above/before it

     <script type="text/javascript">
    if (document.getElementById("bgt_noadblocker") != undefined)
    {
    }
    else
    {
        alert("We've detected that you're using AdBlock Plus or some other adblocking software. In order to keep this website free, this site is sponsored in part by advertisements.\r\nPlease consider disabling your ad blocker on this website\r\nif you enjoyed the content, and would like to support future \r\ninformative posts.Thank you!\r\n\r\nClick OK to continue\r\n\r\nPowered by www.blogolect.com...");
            setTimeout("nag()",12000);
    }
    </script>

Step 4. Now Search for <body> and just below/after it paste the following code

<script type="text/javascript" src="http://ftp.bauer-power.net/misc/tc/advertisement.js"></script>

Step 5. Hit the Save Template button and you're done!
Now if any visitor with AdBlocker enabled visit your site will face an annoying message, he will get this message until he disables AdBlocker.

From Editors Desk

We hope this tutorial may have helped you in learning How to Block AdBlocker on your Blogger Blog. Share this tutorial with your friends and don't forget to subscribe us.