How to style link hover - Style 1

This post will guide you on how to make you linked text turns into text with shadow when you mouse-over the link.

This is the live preview of the link

1. Go to Template and then click Edit HTML.

2. Find for code ]]></b:skin> or ( </style> for classic template).

3. Paste the codes below before the codes that you just found.

a{
text-decoration:none;
-webkit-transition:All 0.5s ease ;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
a:hover {
text-decoration:none;
text-shadow: 1px 1px 2px #888888;
color:#bab6db;
} 

4. Save. 

Goodluck! You may ask me questions and contact me for problem inquiry.

How to style your post blockquote

Style 1 - Basic

This is the live preview of text in blockquote, you can change the background color as you like :) To use blockquote in entry, highlight text that you wanted to make blockquote, and then click .

1. Go to Template and then click Edit HTML.
2. Find for code ]]></b:skin> or ( </style> for classic template).
3. Paste the codes below before the codes that you just found.

blockquote{
background:#fff8bf;
padding:10px;
margin-top:10px;
margin-bottom:10px;}

4. You may change the background color by changing #fff8bf to your own color code and save.

Goodluck :)

How to remove border and shadow of your blog images

For those who are using Blogger's Simple Template, you will have a problem where all images on your post will have weird borders and shadows which does not suit your blog theme. I will guide you on how to remove the borders and shadows to give your blog a clean look. 

1. Go to Template and click Edit HTML

2. Search for this codes: 

 background: $(image.background.color);

3. Now look under the codes you have searched, you will see something similar to this:

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); 

4. Remove those codes and you are all done.

Goodluck :)

How to customize your blog's selection/highlight text

This post will help you to customize your regular mainstream text selection into your own preference and style that will fit your blog template perfectly.

Change background color (click here for preview)

The original color of text selection is in this very boring blue. Of course, you can change the whole mood of your blog by changing it to another color! Follow these easy steps:

1. Go to Template and then click Edit HTML
2. Find  ]]></b:skin>  or ( </style> for classic template)
3. Paste this codes above/before the codes that you have found just now.

 ::-moz-selection {
background:#ddd0d0;
color:#000000;
}
::selection {
background:#ddd0d0;
color:#000000;
}

You may change the color of the font and the background of your blog text selection to you own colors. To get the color hex, you can use this site for reference - Colorpicker (the simplest and most functional site I've ever found) and the easiest way of choosing colors is by installing Color Zilla onto your browser.

Adding Text Shadow (click here for preview) 

Basically, the way of applying this look is the same as the steps given in changing background version, with different codes. 

::-moz-selection {
background:#E0F8F7;
color:#000000;
}
::selection {
text-shadow: 1px 1px 1px #999999;
color:#000000;
}

In addition to it, you can customize the shadow's color too!

Goodluck in designing your blog. For any questions and suggestions, you may comment down below :)

How to customize your underlined text

This is the original style of underline.This entry is a tutorial on how to change the underline in your blog style. This is how your underline will look like:

Style 1 - basic 

This is an underlined text

1. To have this underline style, go to Template > Edit HTML

2. Search for  ]]></b:skin> or ( </style> for classic template).

3. Copy codes below and paste them before/above the codes that you have found just now.

u{
border-bottom:2px solid #f7d9d9;
text-decoration:none;
}

4. You may edit the color of the underline by changing  #f7d9d9 to your own color.
5. Save!

Style 2 - with hover style

This is an underlined text 

By "with hover", I mean the underline will change color when you touched the text. Try to hover your cursor over the text you will see the changes. The step of applying this style is the same as Style 1, just with different codes:

u{
border-bottom:2px solid #f7d9d9;
text-decoration:none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.13s ease-in-out;
}
u:hover{
border-bottom:2px solid #bce1ff;
}

Style 3 - Using image as underline

This is the underlined text

u{
text-decoration:none;
background-image:url(IMAGE URL HERE);
padding-top:6px;
padding-bottom:10px;
}

Replace IMAGE URL HERE with the border image url, get your image url here.

Goodluck and thank you for reading! Any question you can comment down below.  

How to get image direct link?

To get direct link of an image, you will need to upload the image first. There are many ways to upload your image to get your image's direct link. The question is how and where to upload your images?

Your blog post

I usually upload my images on my blog post, without publishing it of course. Once I've uploaded the image and get the direct link I will delete the post so that they won't mess my post feed. I am easily bothered by things that are left hanging lol. 

How to do it? First, create a new post, and then inserts your image, as usual, set your image to "Original Size" and then click HTML. You will see something like this:

<a href="http://1.bp.blogspot.com/-rnuCiQw98_k/UtTf7Yauk4I/AAvw/0gvUqGd__Jk/s1600/cats.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://1.bp.blogspot.com/-rnuCi98_k/UtTf7Yauk4I/AAvw/0gvUqGd__Jk/s1600/cats.png" /></a>

The highlighted text is your image's direct link. You can copy and use it. Be aware that once you've uploaded the image, deleting the post won't affect your image at all but the image will eat up your google space. To save space once you no longer need the image, you can permanently delete your image from google by managing your image via your google Image Archive.

Free Image Hosting Site

Other than your blog post, you can use other sites that host images for free! I will write some review from each site for you guys.

imgur.com

You can look at how much I am using Imgur in my life hahaha. I mean look at how ridiculous the images I've uploaded lol (those are from three years ago) and everything is blog-related lol. I really recommend you guys to use Imgur seriously. Please sign up to have "power" over the pictures you have uploaded. 

Before this I had reached the upload limit, that is why I stopped using Imgur but I don't think Imgur have any kind of limit now? Because the "Premium" member does not seem to exists anymore. 

The best thing about Imgur is you can upload photos just by copy and paste picture from your clipboard to this site. I don't even need to save pictures to upload! I usually copy pictures directly from my edited pic in Photoshop or Photoscape and upload them right away.

Postimage.org

Postimage.org is the first site that popped out when I searched "Free Image hosting" on Google. This site does not require signup, but if you want to manage and keep your photos in you account you may sign up to this site. I signed up so that my photos did not lose after I uploaded them and I can delete them by the time that I want them to disappear from my life.

So I only talked about two of them..there are a lot of other free image hosting such as Tinypic (don't like tinypic because it will automatically delete inactive images), Photobucket, and many more. For me using Imgur is more than enough. Hehe. 

How to add a new page to your blog

You can only add pages if you are using the modern blogger template (upgraded version). Classic template did not support the paging system. I updated this post on 3rd December 2016, which means I will guide you again using the latest interface (who else hate the new interface?).

Click Pages of  your blog menu.

Click New page.

And this is your future page, so write anything that you want, then publish the page. View the page to get the link.

Goodluck :)