Get ideas & inspirations delivered to your inbox. You won't want to miss a thing, so subscribe free to the Blog Feed or sign up for Free Email Updates on the latest projects, shop news, blog tutorials & more. Check out the Project Gallery, Garden, Recipes & Inspirations tabs above, to see what you have missed. Browse through the sidebar for this week's Popular Posts!
**Please note: Some links may be broken, if this happens, please let me know which post & search for the title of a post on the search tab on the right while I work on fixing the problem.---->

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

They Sold my Domain


DSC_0355 (1)
What a headache, heartache and frustration I've had.  My domain was sold by GoDaddy and I can't believe it! Not my decision and I was not notified.  I have gone back to the original blogspot domain for now and I am contemplating on what steps to take next.  So many social media sites direct photos and post to the old domain: www.inspirationsbyd.com.  It makes me sick at the thought that I lost so many readers due to that change.  If Barbie is reading this, I should have listened to you and gone with Wordpress.  Google was of no help either, sigh!

What to do, what to do now.  Shall I continue with the blogspot, change the .com to .org or .net or move my site all together to a whole new host?  Dear readers if you can make me feel a little better, please share your thoughts if you have had similar experiences.

My current domain is : www.inspirationsbyd.blogspot.com please make note of that.

How to Lower Your Tabs on Blogger

This tutorial is for Blogger blogs and serves for decreasing the amount of space between your "header" and "tabs" or increasing the space between the header and tabs.

Lower tabs on blogger

*Please note that not all templates are the same and they may vary in HTML codes.  If you have a set template, that is one that you have purchased from a designer, it may not work for you and you may have to contact that designer for adjustments. 

First, sign into your blogger account.  

1. Click on the blog that you wish to make the changes to on your dashboard.
2. You will be taken to your blog "Overview" screen, look at the list on your left and click on "Template".



3. On your Template screen, click on the "Edit HTML" button.


4. This will take you to the HTML editing screen.  This is where you will make your HTML code changes.  Before doing anything, make sure that your current template is saved. 

5. Make sure that the numbers on the left of your codes are all visible, that way you know if a line is missing. All the numbers should be visible.  If you notice that the numbers skip, you may see a small arrow next to that number, click on it and all the numbers should pop up.

6. Now that all your numbers are visible, scroll down to the "Tabs" section of your template code.  Each section has the title of that section. 



7. Scroll below the "tabs" title and look for " margin-top" in the border section of the tabs.


It may look something like this:

.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 0px solid #ffffff;
border-left: 0 solid #ffffff;
border-right: 0 solid #ffffff;

* Note: There may be more than one "margin-top" section.  Make sure it is under the "border section" of your tab code.  Remember, not all templates will have this.

8. The number displayed may be "0" or a negative number; to increase the amount of space between your tabs and header, increase the number on your margin- top.  

For example:

 .tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 0px solid #ffffff;
border-left: 0 solid #ffffff;
border-right: 0 solid #ffffff;

9. Change the -1px to perhaps 8px.

 .tabs-inner .section:first-child ul {
margin-top: 8px;
border-top: 0px solid #ffffff;
border-left: 0 solid #ffffff;
border-right: 0 solid #ffffff;

 10. Then view it on your blog by clicking on your "preview template" tab.  DO NOT save yet!



Do not save anything until you are certain of the amount of space you want.  If you need more space continue to increase the number.  

If you want less space, decrease the number.  Play with the numbers until you are satisfied with the look of your tabs.  When you reach your final decision, save your work by clicking the "Save template" tab.  You are now done.

If you have any questions, please contact me or leave a comment below.


Follow IbD on Bloglovin

If you haven't already read the news, Google Reader is shutting down
on July 1, 2013.  If you use Google Reader to follow Inspirations by D,
please consider following me on Bloglovin or subscribe to the blog and get
it in your inbox. There is also time to transfer the blogs you read over to
bloglovin.  I have done so and I recommend it.

To learn on how to transfer blogs you read over to bloglovin read this post:
Replacing google friends connect with Bloglovin'
I also recommend reading this post: 
How to Move Your Google Reader RSS Feed to Bloglovin’.
Hope to see you there!

How to Remove Borders Around your Post Images

remove borders around images
How to remove borders around your post images.
  1. Click "Design" on the top right corner of your screen.
  2. Click the "Edit HTML" tab under live blog
Then click at the same time, "Ctrl - F", a search box will pop up on your top right side of the screen.


Find the post image style:


.post img {
  padding:4px;
  border:1px solid #ddd;
  }



Change the border to 0px:



.post img {
  padding:4px;
  border:0px solid #ddd;
  }


The padding is space around the image which will remain.


If you have a different code like mine and can't find the code above try the one below.


Look for this post image style:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
Change it to this:

post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 0px solid $(image.border.color);

  -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
}
Click "preview" to make sure the border has been removed, if  your border has been removed and you are pleased, then click "save template" and then close. 

How to Center Gadget Titles on Sidebar

Moving along the blog design changes...
how to center gadget titles on sidebar

How to Center Gadget Titles on your Sidebar on Blogger

As you may or may not know, I accidentally deleted my blog template.
I thought about buying an already made template, but because I am
the type of person that is always making minor changes, I decided to create it myself.

One of the first things I wanted to do was to center my gadget title.  
  1. Using the new version of blogger, click on "design" on the top right corner of your screen, then click  the orange "customize" button under live blog.  
  2. Click on Advance 
  3. Scroll down to "Add CSS"
  4. Add this code in the white box.
          .sidebar .widget h2 {
           text-align: center;
            }
    5.  After you type it in, click the space bar once, so you may view a preview below it.
    
    6.  Look over your preview, if your gadget titles are centered, and everything looks right, 
         then click on APPLY TO BLOG.

There you have it, now your gadgets are centered.

To Undo
To undo centering, just go back to CSS and delete the code 
or go to HTML, save template before you do anything!
Click " Ctrl & F"
In the search box that pops up, type .sidebar .widget h2

You will see it highlighted on your HTML template code, just delete the code there
and then save template.

How to Center Gadget Titles on your Sidebar on Blogger using HTML

For this tutorial you will need a little HTML knowledge.  To manually change the gadget title
on your side bar you will have to sign into your blogger account.
1. Click on the blog you wish to make changes to.
2. Click on "template" on the left of your screen.
3. Under the "live blog" click on "Edit HTML"
4. You are now on the "Overview" screen, click on "Ctrl" & "F" keys to open your search box.
5. Type in your search box "sidebar" and enter.
6. Sidebar will be highlighted on your HTML blog code
7. Look for this code:
.main-inner .sidebar .widget h2 {

8. Under that code paste this code:
text-align: center;.sidebar {

9. It should now look like this:
.main-inner .sidebar .widget h2 {
text-align: center;.sidebar {

10. Click the Preview template tab to view your blog and see if the changes have been made.
      If the sidebar title is centered, then click "save template".  Your sidebar title is now centered.


Enjoy!

Inspirations by D Reader Survey

Hello Inspirations by D Readers, I have a huge favor to ask you.
If you have a few minutes today or right now, 
I'd really appreciate you taking the time to fill out this short survey.
I will use the information to make adjustments to the features 
on the blog and sponsorship program.  There are options to skip 
questions if you like.  The survey is totally anonymous. 
Only Inspirations by D will be using this information
to enrich and improve the site. Plus it's fun and I will get to 
know you a bit! 


After you are done, feel free to leave any comments or ideas for me that you 
were not able to express on the survey.  The survey is up temporary, so please 
get your answers in quickly!  Thank you so much!

How to Customize your Blog Post Title

How to Customize your Blog Post Title

How to Center you Post Title on blogger
If you are looking to center your blog post title on blogger, 
you  must first sign into your dashboard.
Once you are on your dashboard, click the Template tab ont he left of your screen.
Now click on the Edit HTML tab under your small avatar.
The HTML box will pop open.
Before you continue, make sure that you save your template to your computer
in the case that anything goes wrong , you will have it backed up.
Now that you are on the Edit template page, you need to search for:

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}

*For a quick search, click (Ctrl +F)
You will see on the top right corner the search box, 
type in .post h3{ and it should take you there.
Now under the 

.post h3 { 
 , add: text align: center:

It should look like this:

.post h3 {
text align: center:

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}


Preview before saving to make sure it worked, if it worked then save it.
If it did not, you may have a customized template and need further search.
Click (Ctrl +F) and  type in posts
You will be taken to the Posts part of your html template code.

Scroll slowly and look for h3.post-title, h4 {
add  text align: center: under it and preview your work. If it worked save it.

If neither works, you have to ask your template designer if it is a custom design for assistance.

How to Align Left or Right your Post Title on blogger
If you are looking to move your title to the left or right of your post, then add  
text align: left: for left
 text align: right: for right
instead of the center alignment.

For more blog tutorials click here.

Have You Looked at Blogger Lately?



More Blogger News:
Many of you have noticed that blogger has made quite a few improvements on their site during 2010 and continue to do so even as you read this post.  
There is a notice on your blogger dashboard that has been lingering for days, if not a week or so about these lovely updates and what is yet to come to your blogger account.  On the very top of your page you will see this message: 

Dashboard                                                                 Language:

Couldn't make it to Austin for SXSW? Be sure to watch this video and read this post to see what we announced!

Click on it on your page and read about it.  It is exciting to know that they are working on making your blogging experience more convenient by improving formats and adding new content.
One of the features they are working on is improving your dashboard, so go on and read all about it at Blogger Buzz: What’s New With Blogger.



Don't forget to Rate My Blog @ Top Mommy Blogs

How to Activate Mobile Version of Your Blog


Today everyone is using their cell phone to Tweet, Facebook and even Blog, so why not make your blog available to more readers via cell phones.  If you want to make your blog available to more people in the mobile arena, then you will have to activate your mobile function on your blogger account.  If you have a blog with blogger, then follow the steps below.

How to Activate Mobile Template on Blogger

Login to your blogger account.  If not already there, go to your dashboard.  Next, click on the "Templates" tab on your dashboard screen to your left side of the screen.
This will take you to your template page screen, there you will click on the "Mobile" icon below your mobile picture.
Currently it may be disabled.  When you click the little icon below it you will see "mobile template" with two options;  yes, on mobile....
and no, on mobile devices.
Check Yes, On mobile devices as you see above.
Then if you want to see what your blog will look like on a mobile phone,
click the blue tab that reads  Preview.
Your blog will not look exactly as it does on your computer, no design but will contain your posts and titles. 




How to Change the Width of Your Blog's Template

How to Change the Width of Your Blog's Template
I have come across many bloggers that are interested in changing the width of their blog's template, with Blogger.  I'm going to keep this post simple for you, with easy to follow directions. Before you do anything, please save your template on your computer; you may do this on your Edit HTML screen.  

Backup / Restore Template
Before editing your template, you may want to save a copy of it. Download Full Template


TO CHANGE YOUR BLOG'S WIDTH

Sign into your account and then go click on the Design tab on the top right corner.
Clicking on Design will take you to your dashboard screen.


1. On this screen you will choose the template tab on the left.
2.Then you will click on the orange tab under your live blog that reads customize.
3. On the next screen you will view the list on the top left and click  adjust width.
This is where you will be able to make adjustments to the width of your blog.
Drag the arrow to your desired width on your main post page as well as your columns. 
Do not save anything yet, if you want to see what your blog looks like while working on the width,
look at the preview on the bottom part of your screen.

 Once you reach your desired width, click on Apply to Blog 
on the top right corner of your screen.  
This will save all changes made.  When you click Apply to Blog, you can't go back,
so make sure that your changes meet your satisfaction before saving it.
Hope this was helpful, let me know if you have questions.


New Fonts

Have you heard the news?  Blogger has added 40 new fonts to their design section (currently available in DRAFT only).  They are still working on adding more styles and making it available on the normal design view.  Finally, no more codes.

In order for you to view these new fonts, you must log into your blogger account, then go to your dashboard, scroll down to the bottom of the page, under the column section "Tools & Resources", click on " Blogger in Draft", now you should be in draft mode, you will know by looking on the top of the page where it will indicate  "draft mode", click on the "design" tab on the top of your dashboard page.  Click "Template Design" tab, go down to "advance" and click on it.  You will be able to see the new fonts in the scroll box on the side.  You can choose to view any of the fonts, don't worry, as long as you do not save anything, it should automatically go back to your original font.

Remember, you may only view these on "draft view" not your regular blogger view, but may still be applied to your blog only if your blog design is not custom made, custom made designs can only change their fonts on the HTML section.

New Comments System on Blogger

Blogger is simply on a role right now.  I showed you on my last post about viewing your stats, today I came across another new feature and when I write new, I mean it just came up a few hours ago.  Let me introduce you to Comment Spam Filtering.  

 Blogger has integrated Google's spam filtering technologies into the Blogger comment system. 
Like myself, some of you will notice the new "Comments" tab, if you haven't, give it a bit of time, it takes a while to roll out to all bloggers.  In the Comments tab there is a Spam sub tab that shows all the comments that are likely spam.
You can help improve blogger's ability to automatically detect spam comments by checking your Spam Inbox and deleting spam comments and marking "real comments" that may have been flagged as spam, as "Not Spam".  To read more about this new feature go here.

Blogger Stats on your Dashboard!


Blogger Stats


Was anyone aware of this new feature on blogger?  I just came across it recently and I have to say that it is a wonderful thing to have.  Many of you may have been using Google Analytics or some third party tracking scripts for monitoring your blog statistics.  Now blogger has made it easier for you.  You can get stats of your blog right on your dashboard, isn't that brilliant!   Did I mention that there is no need for widgets or codes?  Even more brilliant!  Unfortunately it is still not available on your main dashboard, but you may view your stats on the Blogger Draft Dashboard.  For the scoop on how to view and more click here.  I personally think it is better than the third party trackers out there, it has so much information, I just love this new feature.  Thank you Blogger Plug Ins for providing this information.  
Was this information helpful?





Pin It button on image hover