The Best Of: Crazy Cute Party #36

Pages of Faith @ Three Girlies

Tinting Mason Jars @ My Beautiful Mess

Improving Free Motion Quilting @ Festoutu

Useful Links and Tips for Bloggers @ Stardust

Blog 101 - How to Add Post Titles to Read More Links in Blogger {Tutorial}

Blogger's Jump Link feature makes it possible to show a short summary of each blog post on the home page. It normally reads something like, "Read more," "Keep reading," or something like that. You can select this option from Blogger Dashboard > Layout > Blog Posts (Edit) > Post page link text. You can customize it to say any of the above mentioned or anything else you desire. However, if you prefer it to include the post title afterwards, follow along with this simple tutorial. 


Installation:
1. From your Blogger Dashboard > Template > Edit HTML and check the box for Expand Widget Templates. 


2. Search for the following section of code:


<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>


3. Replace with the following:


    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/> <data:post.title /></a>
      </div>
    </b:if>


4. Preview your change and if everything looks good, click save.


I hope you enjoy this feature and let me know in the comments section if you have any requests for other blogger features you've seen around and I will do my absolute best to get you an awesome tutorial! :D

Hope you're having an awesome day!

Blog 101 - How to Create a Scroll to Top Button - {Tutorial}

If you scroll down a little bit, you will see a little arrow appear in the bottom right of the window. That is what I'm going to show you how to achieve today.

--------

Installation:

Note: If you have already installed the JQuery plugin, jump to step 4.

1. From your Blogger Dashboard > Template > Edit HTML 

2. Search for </head> tag.

3. Copy the code below and paste it before </head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

4. From your Blogger Dashboard > Template > Edit HTML 

Blog 101 - How to Create A Multi Tabbed Navigation Gadget in Sidebar for Blogger - {Tutorial}

I have been wanting to change up my blog for awhile now, but I haven't been able to bring myself to pay upwards of $60 (even as high as $400!) for someone to design something for me. So, I dedicated a large amount of last weekend to sprucing up my blog and making it look more professional and also easier to navigate. Since then, I have had a pretty awesome response from all of you (Thanks!) and I've also received a lot of questions. So, because of this, I thought I would share the absolute best (and easiest) ways to give your blog a new look as well.

--------

A lot of you have been asking me about the Multi Tabbed Navigation Box you see at the top right of my blog with the About, My Buttons, Sponsor, and Contact tabs on it, so I thought I wold start there. A lot of tutorials out there have you going in to Template > Edit HTML and I am fine with that, but if it's at all possible I'd like not to, and so I found a way to just add a gadget on the sidebar with out having to play with your HTML. Here we go...


* Warning - If you use Internet Explorer, you might get an error message, "Operation Aborted." You will need to preview this gadget before you go live with it. If you do get the error message, then this is not the gadget for you. I'm sorry. :(


Installation:


1. Go to Design > Page Elements and click Add A Gadget.


2. Select HTML/Javascript widget.


3. Leave the title box blank.


4. Copy the code below and paste it inside the content box.

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<div id='codeholder'><p><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>

Notes:


- The RED is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. If you have no idea what jQuery is, then you probably haven't loaded it already and so just leave it.
- The BLUE is where you would specify how many tabs you want.
- The GREEN is where you would change the box background color. The default box background color is white (#fff).  To look for color in HTML visit HERE.