Tutorial: "Dropcaps" for your Blog Posts

I use dropcaps to begin my posts.
I like the distinctive look they give to the post and the blog.
If you think it is something you might like to try, here is how to do it.

In Blogger, go to your template designer and click on advanced.
In advance scroll to the very bottom where it says "add CSS".
You can add this directly into your template if you want but if you are not used to mucking about
in there, best to do it in advanced, then preview it and remove if it does not work.

Always back up your template before you work on it for safety sake.

Then, all you have to do for your first letter in a post is add this:

This is added into your html form of the post.
It is far simpler to add it in 'settings' however.  If you don't want a dropcap it can be erased from the post but it is always there on each post in case you do want it.
Go to settings, then posts, comments.
There you will see Post.
You place the span class there. It will appear on each post. You enter the first letter using the html form, then you can switch back to 'compose' form.
Enlarge this picture to see how I do it. The breaks are added just for space in the post.

click to enlarge

Now you simply add your first letter of the word like this before you post.

You can select many kinds of fonts at Google fonts or use the ones already   found in Blogger.
If you need help, just ask   I am always willing to help.

How to Make a YouTube Video Play Automatically on Embed

Sound on a website fell into disfavor because people listen to their own music while surfing the web. But I think sometimes it lends a nice ambiance to a blog and can set the tone for the feeling you wish to convey.
If some don't like it they can easily shut it off.
I make my video player very small but large enough so that sound controls show up on mouse over.
I find placing it at the very bottom makes it unobtrusive but if your sidebar is wide enough you can place it there. Just be sure it is wide enough for sound and on/off controls to show up.

So here is how it's done.
You will need to right click on the image  to enlarge it to full size so you can see them properly.

Just be sure to place the autoplay instruction in the right place in your code.
If you need further help let me know.
Better yet, try this professional site that explains it very well.

How To Remove "Title" on Blogger Gadgets

I 've been sitting here at my desk working on my Blogger template.

 Blogger has switched to https for security reasons and so I am revamping my template here and there
to accommodate things and it is a good chance to clean up and change around the blog a little bit.

One of the things I do not like is that you must provide a title for your images on Blogger. It's not a big deal but it does take up space where I post some photos I have taken around my neighborhood.
I just don't want to have to provide titles for everything on my side bar.


 If having to use a title on confiture images is not what you wish to do either, you can place this in the title bar and no title will show up: <!– –>
 You can highlight this code and simply paste it into the title space.
Save it for future use too.

Here it is again:

 <!– –>


Now, this is great but there is a draw back! If you are working in the  "layout" area you might like titles on your gadgets so you can see what you are moving around when you decide to add/remove or exchange gadgets.
In that case you can just make the titles the same color as the background and they will be invisible on the site but visible to you in Layout.
I hope this helps you.
Follow my blog with Bloglovin

How to Post Transparent Gifs or Png on Blogger and remove drop shadow on pictures

click to enlarge

If you host your gifs and pngs using the picture uploader on Blogger, be sure to set your image background to transparent. Otherwise your images, signatures, etc will have a background , border and/ or shadow around them.  Set border around images to transparent as well in your template.
 

You will have to go inside the html template to remove shadows,etc from them if you don't find it on the template "Customize".
Always , always save your blog first before you change anything!

Once you find the shadow and moz opacity, just set all the numbers to zero.
You will see something that looks like 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: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
}

This is what controls your image shadow on the blog. If you set a background, all images will have a background.
My images are set to have no background and no border and no shadow.
Set all the numbers  to zero and you will remove the shadow.
NOTE: You dont have to go inside the template if you can access the shadow through customize!
The higher the last (4th from left) number,  the darker the shadow around  your photos and images.
If you have no background set for your images and still get a background, then you will have to host them elsewhere like Photobucket or Image Shack.

If you are unsure, I will be happy to help.