Showing posts with label blogger tutorial. Show all posts
Showing posts with label blogger tutorial. Show all posts

Tuesday, June 28, 2011

Change the color of the title of the post article

By default the color is the title of the post or an article on the template already by the designer of the template creator. But if you less feel satisfied, PAL could replace him with other colors that are much more attractive or to taste.

Interested to change it? Read out the following steps:

1. login to blogger. Click on the designof the section. Edit html further by clicking on the link.

(2) save your first template that is used by clicking on the download full template. Then, enter the check box next to the combo box expand widget templates.

3. Search the code . post h1 if not found as follows, it could be . post h2 or . post-h3 according to Templatenya.

4. look to the code. Seem to be a line of code as follows:

H1 {book}
Margin: 5em 0;
Font-size: 15pxt;
Padding: 5px;
Font-weight: normal;
Font-style: normal;
Line-height: 1.3 EM;
Color: # 0000ff;
}


5. above is an example on my Blogvorlage. Dude you don't be surprised, if a line of code does not exactly match the template to the PAL belongs. Focus on the color: # 0000ff this code sets the color of the title of the post. The code # 0000ff means that the post title is blue.

6 replace code # 0000ff by html color codes to a different color. Do not know html color codes? Find here.

7. When you are done. Do not forget to Save the templates , click and see the result.

Welcome you to try to change the color of the title of the post, and good luck!
More about → Change the color of the title of the post article

How to install the widget-stripe ad on Blogger templates

Actual tutorials Widget stripe ad ALA blogger install this I by another blogger PAL have. I be on this blog, it turns out, that the result of the successful ad strips connected. For PAL, wanted a new stripe ad template blog, by the way, I remember still like (install widget stripe ad on blogger template).

For example, a blog, put up a Widget Stripe Ad as blog-o-om.com, or on another blog. Where is it close at the top of the blog page or the header element firmly and there over the button. It can range from link to subscribe to the RSS feed, fans of Facebook/Twitter pageor just the announcement of only Admins aka of the blog owner change.

Installing are it interested in? Perform the following steps:

1. login to blogger. Click on the dashboard page designing PAL then Edit html.

2. Then you click on download full template. This is to be expected, when it will occur error when editing the template.

3) After finished downloading, enter the next to expand widget templates.

4. search the code < / head >

5. copy the code below and then paste on the above of code </head>

< script src = 'http://sites.google.com/site/asrizalofficialweb/javascript/Stript-ad.js'-Type =' text/javascript "/ >"

6. Further, search code  < body >

7. the right under the code < body > input code as follows:

< div id = "Mta_bar" >
< div id = "Left_bar" > < span class = 'Left' a href = > <http://feeds.feedburner.com/blogspot/dinwahyu' ' target = '_blank' >subscribed to this blog articles via RSS-feed?< / a > < / span > < / div >
< span class = 'right' onmouseout = ' itself. Status = & APOs; APOs; & 'Onmouseover =' itself. Status = & APOs; o om.com .com & APOs;Return true; "> < img align ="Absmiddle"border ="0"OnClick = ' CloseTopAds ();" return false;' Src with'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizWQYYPsyo3oSe_leFQC69zIUPS_QNMqW5Zfv8MUtbZa-NVNbD5Ws1980Qe3bthQ56715NNghXywKR3n9r45nthWnbTEuAfxWrpqFSsGRJjvAAcJAOX7QuUdkx7YdEpFGHZ9r1plIu4ODO/-=' = style "cursor: hand;" Cursor: Pointer; ' / > < / span > < / div >


Description: in a code Red color is the target URL of the link Bluecolored text. Both can be changed according to taste or requirements. Orange Color is the URL of the image of the Close. PAL it could be replaced with another picture.

8. next code search:

[]] > < / B: skin >

9. once met paste the code, just above:

# Mta_bar {background:# 0000ff;} Margin: 0 3px 0 0; Padding: 10px; Z-index: 100; Top: 0; left: 0; Width: 100%; Overflow: auto; {position: fixed;}
* html # Mta_bar {/ * IE6 hack * / position: absolute;} Width: Expression
(Document.) CompatMode == "css1compat"? document.documentElement.clientWidth + "px": body. ClientWidth + "px"); }
# Mta_bar. Left {float: left;} Text-
align: Center; Font-family: Arial; Font-size: 13px; Font-weight: bold; Font-style: normal; Colour:# ffffff; Width: 98 %;}
# Mta_bar. Right {font-family: Arial, Helvetica, sans-serif;} Float: right; Text-align: Center; Font-weight: normal; Font-size: 10px; Letter-spacing: 0; Width: 30px; {White-space: nowrap;}
# Mta_bar. Right one {font-size: a 11px;} Color: # ffffff; {Text-decoration: underline;}
# Mta_bar. right a: hover {font-size: a 11px;} Color: # ffffff; {Text-decoration: none;}
# Left_bar a {text-decoration: none;} {Color: # ffffff;}
# Left_bar a: hover {text-decoration: underline;} {Color: # ffffff;}


Note: , that this code # 0000ff widget stripe ad background/foreground color. The code # 0000ff is blue. Please replace with the color code # 000000 background color another example black. As for the # ffffff the color of text in the white stripe ad is on resources. Good background color, text, or both please customize your template with a buddy.

10. After you insert all line completed PAL code above. The last step, click the button Save the template. And see the result.

Automatic, is included a widget stripe ad above on the screen or the blog header. And only relieve it, click on the button "close" image. After closed but where missing PAL do not worry, because and later still appears once. As later again, click to remove it on the 'close 'button.

Good luck with your installed widget stripe ad and good luck!


More about → How to install the widget-stripe ad on Blogger templates

Install the Facebook like button in the bottom of the post

Facebook such as or rather what I mean is, as in the bottom of the page to post this. If the like , that button is clicked, are user fb automatic links, on this URL reference plastered on the walls of Facebook users (on click).

All right for blog promotion? If you are interested, please let alone. You immediately place a button Facebook like / love on page posts as in under the posts.

His pace as follows:

(1) login to blogger. After the draft, click on. Click on Edit html.

2. Click on the links to download full template. Continuing with their combo as well as write check box expand widget templates were.

3. < p > < data: post.body / > < / p > code search if there are two, you choose the first.

(4), Type the following code below the code (No. 3).


< div style = "margin: 0;" Padding: 8px; Border: "1px" solid # ccc; background: # f3f3f3; ">" < IFRAME AllowTransparency = 'true' expr: src = ' & quot;. http://www.Facebook.com/plugins/like.php?href= & quot; + Data: post-URL + & quot;. & amp; Layout = standard & Show_faces = false & amp; Amp; Width = 100 & amp; Action such as = & amp; Font = arial & ColorScheme = light & quot;. "Frameborder = ' 0' scrolling ="No"style =" border: none; " Overflow: hidden; Width: 590px; Height: 40px; "/ >" < / div >

590 Exchange with the size of the width of the page to make your template on your blog. Don't know yet how wide? Read the first here. During 40 numbers are high. Both can be customized to your liking.

5. If, in the last step, click on Save template.

6. Stop and see the result.

More about → Install the Facebook like button in the bottom of the post

Monday, June 27, 2011

Add 3 column footer in templates

Naturally, his own uniqueness has most of the blogger template. As in the number of columns. There are two three or four columns. The question is is the template a column is "Add Gadget" in the footer? If this is not the case, here I try to share tips Add 3 column footer in templates. It is possible that this tutorial useful for PAL wants to install is / a three column footer element in the blog template, owned by PAL Add.

Previously, ensure that the templates blog PAL Add gadgets element not yet in the footer section aka 2 or 3 column sidebar only exists.

And steps to the adds a 3 column footer in templates, as follows:

(1) login to blogger. Click after the draft , and then click Edit html.

2. Backup / by clicking on the save your first template, download full template is used. This is to anticipate the next time an error occurs while modifying the template.

3. Done, enter the small check box next to the to expand widget templates.

4. next code search:


< div id = 'Footer' >

5. after the meeting right above the code insert / insert code like below:


< div id = "bottom" >
< B: section class = 'bottom' ID = 'bottom_1' preferred = "Yes" / >
< B: section class = 'bottom' ID = 'bottom_2' preferred = "Yes" / >
< B: section class = 'bottom' ID = 'bottom_3' preferred = "Yes" / >
< / div >

6. This done for more code:

[]] > < / B: skin >

(7) the above code is in a timely manner (No. 6), enter the following CSS code:

# Bottom {width: 900px;} Position: relative; clear: both; margin: 0px auto 0px; Color: # 000000; Float: left; Background: # f7f7f7; Padding: 15px; {Margin: 0px}
# Bottom h2 {color: # 333;} Font-size: 14px; Font-family: Arial, Tahoma, Verdana; Font-weight: bold; Margin-top: 5px; Line-height: 1.4 em; Letter-spacing: 0em; Text-transform: capitalize; {Border-bottom: solid # ccc "1px";}
# Bottom UL {padding: 0px;} {Margin: 0px;}
# Bottom ul li {line-height: 26px;} List-style-type: Square; {Border-bottom: solid # f f "1px";}
# bottom_1 {width:260px;}Float: left; Margin-left: 20px; {padding: 0px;}
# bottom_2 {width:260px;} Float: left; Margin-right: 35px; {padding: 0px;}
# bottom_3 {width:260px;} Float: left; Margin-left: 35px; {padding: 0px;}

Note in the code width: 900px to width of the header in the template type. Do not know its size? (read: find out the width of the header). 260Px code is the width of each column of the Footernya that add up to three. 260Px this 900px gained fewer 120px (total amount of the margin and padding) 780px split = then 260px= 3.

8. After the last step wrong click on Save the template.

If successful, display of Ergebnisse- design part. Add it to a new automatic connection add Add gadgets at the bottom of the footer alias 3 column footer.

More about → Add 3 column footer in templates

Sunday, June 26, 2011

Sliding sidebar title text area to the Center

Note the title text on each blog sidebar. The location of the text of the title is usually right, left, and Center. In fact, this is not a special case. But in general the location of the sidebar text title always side to the left, according to the element template.

If you are satisfied on the position of caption text sidebar. You can move it to the center.

His pace as follows:

(1) the blogger login. After the entry, click design. Click on Edit html.

2. Click on the links to download full template. When you are done (download). Then enter a small check box next to the to expand widget templates.

3. find similar code as follows:


. Sidebar h2 {color: # 000;} Font-size: 14px; Font-family: Arial, Tahoma, Verdana; Font-weight: bold; margin: 0px 0px 10px 0px; padding: 4px 4px 5px 10px; Border-bottom: solid # C0C0C0 "1px"; Letter-spacing: 0em; Text-transform: capitalize; {background: # 87CEFA;}

You don't be surprised if the code is not exactly the same. See the source code of . Sidebar h2

4. After you run the code, add text-align: center; in the sequence of code (No. 3).

(5) to more or less the result as follows:

the sidebar h2 {...} Color: # 000; Font-size: 14px; Font-family: Arial, Tahoma, Verdana; Font-weight: bold; margin-: 0px 0px 10px 0px; padding: 4px 4px 5px 10px; Border-bottom: solid # C0C0C0 "1px"; Letter-spacing: 0em; Text-transform: capitalize; background: # 87CEFA; {Text-align: center;}

The writing Center is to set the position of the sidebar are to the center. If you want to replace correct links to sidebar. And right to left.

6. Once completed, Save the templatein the last step, click.

7. Stop and see the result.

If the increment is correct. Automatic text title in the sidebar would be in the middle.

Good luck!


More about → Sliding sidebar title text area to the Center