Replacing Blogger widget’s title with an image

by Greenlava

If Google brought you here, then you might quickly realize that the gadget/widget titles in the screenshot are not actually titles. They are images, occupying the title slots .
Why do some people put images there when they can do it with texts? Well with text, you only have limited choices of fonts and styling. If you want to use a unique font or styling like in the screenshot, then text image is the only way to go. You can make the a title using a graphic software or using an online graphic generator. I made the title at CoolText.com).
Okay back to the tutorial. So how do we go about replacing a Blogger widget title with an image? Here’s how:

1. Login to your to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates checkbox on top right of the HTML window.
5. Use Ctrl+F to search for the gadget title (that you want it replaced with an image) in your HTML code. For example for my translation gadget, the title is “Translate This Page”, so I enter title='Translate This Page' in the search box. You may find this set(or something close to this) of codes:
   
   

   <b:widget id='HTML1' locked='false' title='YOUR_GADGET_TITLE' type='HTML'>
   <b:includable id='main'>
   <!-- only display title if it's non-empty -->
   <b:if cond='data:title != &quot;&quot;'>
   <h2 class='title'><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   <data:content/>
   </div> 
   <b:include name='quickedit'/>
   </b:includable>
   </b:widget>

6. Replace the data tag <data:title/> with an image tag:

   <img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/>

   where YOUR_TITLE_IMAGE_URL is the link to your image file.
7. Preview before saving.
8. Enjoy!

Note: This method won’t work on a Followers gadget. As a workaround, you can put the title image in a Picture gadget. Then place the gadget above the Followers gadget. And make sure you leave the title box of the Followers gadget blank.

source : http://www.bloggersentral.com/2009/11/replacing-blogger-widget-title-with.html

Auto hide Navigation Bar (Navbar)

Auto hide works is, when the visitor point his mouse to top page, Navbar will appear. Otherwise, if visitor point his mousedown (not in Navbar area), automatically that Navbar will disappear.

How to place it:

Find out body { code in Edit HTML page. Then, insert code below right before body { code:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

 

 Good Luck!
source :
http://blog.zoomtemplate.com/auto-hide-navigation-bar-navbar-for-blogger.html

Writing HTML Code on your Article / menampilkan code html pada postingan blog

Hi. This is a very simple tips but it's very usefull to apply. Well, if you have a blog about computer/ internet like mine, you must be ever write an article that enclosed a HTML or JavaScript code. But, unfortunately when you post it, your written code doesnt appear as you want. Oppositely, it appears as a gadget/ preview that has been translated to HTML language. Don't worry, because here I will give you a nice trick to avoid it. Here they are...


For example, you want to make an article titled "How to Add Clock Gadget on Blog". Then, of course in your article, you'll enclose the HTML/ JavaScript code that should be copied by your reader. But, when you agree to publish it, you'll see that your code has changed into the real gadget (in here is clock gadget). So, the reader won't be able to follow your tips, isnt it..??

This simple thing should be mentioned by some blogger. Because of that, here i have some trick to enabling visitor's HTML copy-paste. They are:


1. Using http://centricle.com/tools/html-entities/
This site can change (encode) your HTML code into other code that can be appeared as text in your post.

Firstly, go to http://centricle.com/tools/html-entities/
Then, you'll get the following preview:


In there, copy and paste your HTML code into the field. Then, click Encode.
After that, copy and paste the code into your post. Finished.

2. Using text area.

Text area is used for putting some text, include HTML code, so that it will be in different place and will be able to be copied by your article readers.
To make Text Area is very easy. Just copy and paste the following code:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">YOUR_HTML_CODE</textarea></p></div></form>

Then, change the text: YOUR_HTML_CODE , with your HTML code.
To change the width and height, just set the number on: "WIDTH: 300px; HEIGHT: 144px"

Then, publish your post.


Finally, just try one of the trick above. I have used those way to show HTML code in my article and it works. :)

P.S: If you have another better way, please give some comments below.

AND...NOW, I KNOW...!!!

(c) Written by: Nanda Firsta
Source:http://nandafirstboy.blogspot.com/2011/02/writing-html-code-on-your-article.html

I've got korean fever . . .

Hallyu contemporary cultures virus that resulted in "Korea fever" has been infecting Indonesia in the past decade. Hundreds of titles drama, pop music, series, movies, video games, to B-Boy Korea smelled played and displayed on television screens Indonesia in recent years.

Korean in Indonesia has become the center of attention. many of the teens who started anesthetized by a hair style, clothing styles, and Korean music. even many of those who are willing to visit the country producer of ginseng is to directly see their idol appearance.

I've got korean fever beacause my friend (karina) showed me a video of EXO (B-Boy korea).
Maybe u want to see a video of EXO (What is love)

What do u think? have u got korean fever too? haha

My idol in EXO K is KAI and in EXO M is KRIS.

I will share u about their bios

EXO K

Real Name: Kim Jong In 김종인

Stage Name: Kai

Date of birth: January 14th, 1994

Position: Main Dancer, Lead Rapper, Vocalist

Height: 182 cm

Blood Type: A

Skills/Hobby: Ballet, Jazz, Hiphop, Popping, Locking dances

EXO M

Real Name: Wu Fan 吳凡

Stage Name: Kris

Date of birth: November 6th, 1990

Position: Leader, Lead Rapper, Sub-Vocalist

Height: 187cm

Blood Type: A

Skills/Hobby: English, Mandarin, Korean, Cantonese, Basketball 

They are so cute, right ?

KAI or KRIS ??

Blog Tutorial

A

Auto hide navigation bar (Navbar)

B

C

D

E

F

G

H

I

J

K

L

M

N

Navigation Bar With Images

O

P

Q

R

Replacing blogger widget's title with an image

S

T

U

V

W

Writing HTML Code on your article

X

Y

Z

Navigation Bar with Images

A navigation bar with images looks like this:

Having important links in one place is a great way for readers to find what they’re looking for on your blog.  Common links found on navigation bars include “About Me” pages, posts with contact information, or even links to your other blogs.  So let’s get started!

Step 1: Decide what links you want to include on your navigation bar.  Find and copy the links to these locations.  For example, I want to include the following information:
-       Home: http://kreatedbykelsey.blogspot.com
-       About Me: http://kreatedbykelsey.blogspot.com/p/about-me.html
-       My Portfolio: http://kreatedbykelsey.blogspot.com/p/portfolio.html

Step 2: We need to create our images.  To do this, we’ll need some sort of editing program.  If you don’t have a purchased program such as Photoshop, there are many free options that will work great for our purposes!  My personal favorite is Gimp, but you can use anything from Picnik to your basic Paint program.
How big or small you make your images is really up to you.  I like to make mine somewhere between 30 pixels and 50 pixels in height.  One thing to consider is how many images you plan on using.  For example, if you have many links you want to add, your images will need to be a little bit smaller in order to fit.  The size of your images may be something that you need to play around with!

Step 3: Once you’ve created images that you’re happy with, save them to your computer as either .jpg, .png, or .gif files.

Step 4: Now that your images are saved, we need to upload them to the internet!  I use Photobucket.  If you don’t have an account, follow their simple directions to create one.  Once you’ve logged into your account, click on “Upload Images and Video” and find the images that you just created and saved.

Step 5: After you’ve uploaded your images, click on each one until you see a screen like this:

Copy the Direct Link information for each of the links you uploaded.  I will refer to these links later on as the links to your images.

Step 6 : Copy the following HTML code exactly as it appears here.

<center><a href="LINK1 GOES HERE"><img src="IMAGE LINK1 GOES HERE"></a><a href="LINK2 GOES HERE"><img src="IMAGE LINK2 GOES HERE"></a><a href="LINK3 GOES HERE"><img src="IMAGE LINK3 GOES HERE"></a></center>

Step 7: Next we need to fill in the different parts of the code.  Let’s start with the first link.  In my case this is my homepage, http://kreatedbykelsey.blogspot.com.  I am going to replace the blue words LINK1 GOES HERE with this link.

Step 8: Now that I’ve filled in the first link, I’m going to fill in the image link.  In this case, I’m going to fill in the red words where it says IMAGE LINK1 GOES HERE with the link to my first image, http://i141.photobucket.com/albums/r75/kreatedbykelsey/Home.png.
My HTML now looks like this:

<center><a href="http://kreatedbykelsey.blogspot.com"><img src="http://i141.photobucket.com/albums/r75/kreatedbykelsey/Home.png"></a><a href="LINK2 GOES HERE"><img src="IMAGE LINK2 GOES HERE"></a><a href="LINK3 GOES HERE"><img src="IMAGE LINK3 GOES HERE"></a></center>

Step 9: Repeat steps 7 and 8 for the rest of the links you want on your navigation bar.  Depending on how many links you want on your navigation bar, we’re now going to have to dig a little deeper into the HTML…

Step 10: The original code I gave you in Step 6 is for 3 links.  However, if you want more links you will need to copy the following code for each additional link that you want to include:

<a href="NEXT LINK GOES HERE"><img src="NEXT IMAGE LINK GOES HERE"></a>

Step 11: After you’ve inserted all of the links and images you want on your navigation bar, we need to insert it underneath your header.  Go to your dashboard and click “Add a Gadget”.

Select HTML/JavaScript and paste your completed code into the box.  Make sure to leave the gadget title blank as shown in the picture below!

Step 12: Save it to your blog!  Let’s take a look at what the final product looks like…

You’re done!  Make sure to test out your links to see if they take you to the right places.

Source :
http://www.tipjunkie.com/lifestyle/tech/blogging-tips/blogging-101-navigation-bar-with-images/