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

Wednesday, 17 July 2013

Auto Guest Author Box For Blogger


Guest posting plays an important role in upbringing and success of your blog. Guest posting shows the repute of your blog that how much people are interested in writing for your blog. Guest posting leaves a great impression on the visitors about your blog so that they get curious and want to know that why people are writing for your blog which increases the importance of your blog and is also excessive for your blog success. Guest posting can also be a handy tool from the TRAFFICpoint of view. It may also play a vital role especially when you are immovable due to certain activities. Google also facilitate it’s users by providing the alternatives like Guest Blogging/Posting while you are using Blogger. You might have seen in different blogs where the Guest Blogging/Posting is enabled, after each post there is GUEST AUTHOR box, which contains the Profile Picture and some basic BIO of the guest author. In WordPress, you can easily install the Guest Author Box below the blog posts by using a PLUGIN but in Blogger you need to code it. This tutorial can help you easily install the “Guest Author Box”under each blog post in Blogger easily.


Add Authors To Blogger:

To enable Guest posting you first need to invite authors to your blog which means your blog can be authored by different authors. All you have to do is to send the people invitation, and once they accept your invitation they will be able to start posting at your blog.


How To Add Auto Guest Author Box In Blogger?

To add “Auto Guest Author Box” in Blogger, follow the steps below:

1. Log in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See How)

3. Click “EDIT HTML”.



4. Inside “HTML EDITOR”, press “CTRL+F” and find <b:skin> tag. Click   to expand the code.




5. Copy & paste the following CSS Styles, just above/before </b:skin>tag.

/*--- Guest Author Box Styling Starts ---*/
.about-author
{
width : 98%;
overflow : hidden;
margin:10px 0px;
border:0px;
}
.about-author img
{
width:70px;
padding:3px;
border:1px solid #ddd;
margin:0px 5px 0px 0px;
}
.about-author h3
{
font-family:verdana !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p
{
margin:0px;
text-align:justify;
color:#666;
}
/*--- Guest Author Box Styling Ends ---*/ 

Note:-To change the color of the text “ABOUT AUTHOR”, edit color: #666666;


6. Next inside “HTML EDITOR”, press “CTRL+F” and find <data:post.body> tag.

7. Copy & paste the following code, just below <data:post.body> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;AUTHOR NAME&quot;'>
<div class='about-author'>
<h3>
About Author:
</h3>
<img align='left' src='IMAGE LINK OF AUTHOR'/>
<p>WRITE AUTHOR BIO HERE</p>
<p>Follow Him @ <a href='BLOG LINK' target='_blank'>BLOG NAME</a> | <a href='FACEBOOK LINK' rel='nofollow' target='_blank'>Facebook</a></p>
</div>
</b:if>
</b:if>

Note:-

A. Replace the “Bolded Parts” in the above code with your “Guest Author” appropriate information.

B. Replace “AUTHOR NAME” with exact the name of your Guest Author’s Account Name, otherwise, it will not appear in the box. Check the example screenshot below:




8. Finally click “Save Template”.
                                               



That’s all set, visit any of your “Guest Blog Post” to see the Guest Author Box with Profile Picture and BIO.



That’s All.

Need Help?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Sunday, 7 July 2013

Install JQuery In Blogger


JQuery is the library which is used to support the certain plugins and scripts. It’s the most commonly used library now a days which is used by the web developers. Web developers used this library in order to enhance the design and interactivity of the website or blog. The main advantage of using this library in your blog/site is that you will get rid of uploading the extra files and complicated stuff. You might have observed different animations and effects in several professional blogs and websites, it’s all because of JQuery. Once you installed JQuery, you will able to easily enrich the appearance of your blog or website. Let’s see how you can install JQuery library in your Blogger Blog. Follow the simple steps below:


2. From the list of Google Hosted Libraries, Select JQUERY.
(Note:- Don’t Mistake With JQueryUI)




3. A Google Hosted Libraries with detail description window will open. Under each library you will see the 4 description categories i.e. SNIPPET, SITE, VERSIONS & NOTE.

4. Go to JQUERY and from SNIPPET category, copy the link.


The link will look similar to the below link: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

5. Save the link in Notepad File for later use.

How To Install JQUERY In Blogger?

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”



 4. Inside the “HTML EDITOR”, Press CTRL+F and search for </head> tag.




5. Now copy & paste the JQUERY Code (SAVED IN NOTEPAD FILE), just above the </head> tag.

6. Click “SAVE TEMPLATE”.



You are all done. Now you can easily enhance your website using JQUERY plugins and scripts.



That’s All.


Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Saturday, 6 July 2013

ADMIN Ribbon Or Icon With Comments In Blogger



Blogger commenting system has always been flexible and provides the facility to their users to customize it their own way. There are number of features which can be easily customizable in blogger commenting system which gives a new and bright look to the entire conversation. Readers also enjoy the conversation if the commenting system is more advanced and highly modified. Today one of our readers asked that how can I add ADMIN Ribbon Or Icon With The Admin Comments in Blogger. So today this is special requested tutorial that we are going to share to show how easily you can implement this feature in Blogger Commenting System.






Must Read This:


How To Add ADMIN Ribbon Or Icon With Comments In Blogger?

So let’s start with the tutorial:

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag. Click ► to expand the code.




5. Then search for “COMMENTS” styles between </b:skin> and ]]></b:skin> tags.

6. You will find the code similar to this:

#comments .comment-author{
padding-top: 1.5em;
border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}
#comments .comment-author:first-child{
padding-top: 0;
border-top: none;
}
.comments .comment-content{ padding:5px 0;
}
.avatar-image-container{
margin: .2em 0 0;
}
#comments .avatar-image-container img{
border: 1px solid $(image.border.color);
}
.comment-actions a
{
font-size:11px; color:#777 !important
}
.comments .comments-content .user
{
font-size:16px; color:#000;
}
.comments .comments-content .datetime
{
font-size:11px; color:#777 !important
}
.comments .comments-content .datetime a
{
color:#777;
}
.comments .comments-content .comment-thread ol a
{
color:#000;}

.comments .comments-content .loadmore a{
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-block
{
border: 1px solid #ddd;
padding: 7px;
}
.comments .comment-thread.inline-thread{
background-color: $(post.footer.background.color);
}
.comments .continue a
{
background:#f9f9f9;width:130px;border:1px solid #ddd;border-radius:9px;
padding: 10px;color:#000;
}
.comments .continue{
border-top: 2px solid $(widget.alternate.text.color);
}
.comments h4{
font: $(post.title.font);
margin: .75em 0 0;
padding: 10px;
border: 1px solid #ddd;
width: 100px;
}
.comment-form
{
width:90%;
max-width:90%
}


7. Now copy & paste the following code, just below the Yellow Highlighted Code above.

.comments .comments-content .icon.blog-author
{
background-repeat: no-repeat;
background-image: url (Your Ribbon Or Icon Image Link Goes Here);
height:38px;
width:38px;
margin:0;
position:absolute;
right:0px;
top:-0px;
}

8. Click “SAVE TEMPLATE”.



You are all done. Refresh your blog to see the ADMIN RIBBON OR ICON with the comments.


Customization:

1. Replace “Your Ribbon Or Icon Image Link Goes Here” with your own Ribbon Or ICON image URL which you have hosted at blogger or other hosting services.


2. Adjust the width, height according to your own choice. 



That’s All.


Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

Tuesday, 25 June 2013

Enable Auto Numbering For Threaded Comments In Blogger



Threaded comments in Blogger blog is a great approach to interact with your readers and subscribers. It allows replying individually to the certain reader with many other awesome features. You might have noticed that in different professional blogs that many bloggers have customized the layout of their commenting system by adding some nice-looking options like changing the avatars, ribbons and auto numbering etc. Today in this tutorial we are going to share with you that how you can add the Auto Numbers and see the Comment Counts beside each comment in your blogger blog. It gives a very professional look to your blog commenting system and let the visitors know that how much you are eager to apply different styles to your blog and make it look exceptional. By following the tutorial below you can apply this approach very easily and perfectly.

How It Works?

Blogger blogs uses threaded commenting system which hold the <li> tag and the <ol> tag for displaying comments in well-ordered manner. In the blogger threaded commenting system the COUNTER-RESET property sets the value to zero and COUNTER-INCREMENT property increases the value by one. You can see the live demo by clicking the button below:




Enable Auto Numbering For Threaded Comments In Blogger:

To enable the Auto Numbering for Threaded Comments in Blogger you must have first enable the Threaded Comments In Your Blogger Blog.


Now Lets Start Counting Comments:

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”




4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag.




5. Copy & paste the following code just above </b:skin> tag.


/*----- Comment Counter Starts -----*/
.comment-thread ol {
counter-reset: mbt-comments;
}
.comment-thread li:before {
content:counter(mbt-comments);
counter-increment: mbt-comments;
font-size: 30px;
float:left;
position:relative;
top:0px;
left:-10px;
margin-right:0px;
height:100px;
margin-right:0px;
font-weight:bold;
font-family:arial, georgia;
color: #666;
}
.comment-thread ol ol {
counter-reset: mbt-comments-sub;
}
.comment-thread li li:before {
content: counter(mbt-comments) "." counter(mbt-comments-sub,lower-latin);
counter-increment:mbt-comments-sub;
font-size: 12px;
color: #666;

position:relative;
top:10px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content
{
margin:0px 0px 8px 28px!important;
}
/*----- Comment Counter Ends -----*/

8. Click “Save Template”.






You are all done, refresh your blog to see the Auto Numbering With Threaded Comments In Blogger.


Note:- 

1. To change the SIZE and COLOR of comments count in main section, edit font-size: 30px; color: #666; highlighted in Yellow color.


2. To change the SIZE and COLOR of comments count in main section, edit font-size: 12px; color: #666; highlighted in Orange color.


3. Nested replies are counted in the order 1.a, 1.b, 1.c which is the lower-latin format. You can change this format to different styles which are as follows: 


  • lower-greek, 
  • circle, 
  • square, 
  • disc, 
  • lower-roman,
  • upper-roman etc.


That’s All.


Happy Blogging.


Need Help?

Hope this new approach to blogger threaded commenting system may occur in a positive change for your blog. Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any help, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)