Showing posts with label blog tutorials. Show all posts
Showing posts with label blog tutorials. Show all posts

Blogger Tutorial - Getting rid of that boarder on your pictures!



This seems to be a very common topic on Blogger, and it took me a while to find the easiest solution

Took this from another Blogger site!

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
 source :  http://www.southernspeakers.net/2011/03/remove-blogger-picture-shadow-and.html

[This month's STAR sponsor!]


Read More

Blogger Tutorial - Google Web Fonts



During the weekend I found an awesome site (from Google of course) that they have a big data base of free web fonts available for use. 

About Google Web Fonts
Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites.
Our goals are to create a directory of core web fonts for the world and to provide an API service so that anyone can bring quality typography to their webpages.
The API service runs on Google's servers. They are fast, reliable and tested. Google provide the service free of charge. It is possible to add Google Web Fonts to a website in seconds.
A web built with web fonts is a web that is more beautiful, more readable, more accessible and more open. - google webfonts
This websites allows you to grab fonts quickly by clicking the "Quick-use" button at the bottom of the font to grab the css code.


 This is how you install the fonts to blogger: ( it took me a while to figure it out...)

Go to template> edit html:

then search for /body

enter before the /body the Java script code
it will look something like this:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Chango::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>



go to the post you are working on, and in the HTML, replace your existing font with

font-family: 'Chango', cursive;


 The one cool thing about this is is that it also shows how long it will take to load your font with their speedometer!



 Hope you found this useful!
Read More

Blogger Tutorial– Window Live Writer

image

image 
I was having trouble with adjusting the pictures on Blogger and while I was trying to find a better solution, I found this !  It’s called the Windows Live Writer.  You can pretty much write all your entries offline and there are more options for you to organize and style your blog!  The best thing I like about it is that you can import the theme of the blog and you can preview it right from the program !
No I can organize pictures side by side on a post with no problem!
Download yours here ! It will make your blogging life so much easier!

Read More

Blogger Tutuorial - No underline links when hovering

 fredricschwartz.com

So as people that have followed this blog knows, I've been constantly changing the layout of the blog to find what I like best since I've just started blogging (well...not really..but finally decided to commit to it)

I've been learning lots of new things about the world of blogging an I'd like to share all my blogging tips with you!

My first tip:

How to get rid of that under line when you hover over your links

This only applies to a specific post/page:

 go to template>customize>advanced>add css

add this code:


.nounder a {
text-decoration: none;
color: black;
}


 and then after in your page/post you are on, add this to the HTML:

<p class="nounder">
All of the <a href="somewhere">links within this paragraph</a>
will have no underlines.

</p>


 and you're done!


Now if you want to apply to all the links in your blog, then you can add this under
template>customize>advanced>add css 

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

Source:
http://www.boutell.com/newfaq/creating/nounderline.html
http://www.w3schools.com/css/css_link.asp



Read More

Followers

Total Pageviews