How To Modify the Blockquote in Blogger Template

In HTML and XHTML, the blockquote element defines a block quotation within the text. The syntax is <blockquote><p blockquoted text goes here</p></blockquote>. The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.

The non-semantic use of the blockquote element purely to indent text is deprecated by the W3C (World Wide Web Consortium) in the current (1999) HTML 4.01 Specification,[1] which is also the basis for XHTML 1.0. The preferred approach is the use of CSS (Cascading Style Sheets).

How to Modify how Blockquote ?

• First step :

Go to your dashboard>>Template>>edit html>>proceed>>check expand template widget. Note : back up your template first. Use ctrl + f and find this code (or similar to this code) : blockquote or .post blockquote {........ . (In other templates might be a different code). Replace with the following code and make the necessary setting .

blockquote{background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYRlrip3H7yz_KRTnp_NS8XJl1AgNL-RyVu67Lro3aBExRKVzekH5ZtOELc7MMovELTEZxG8e8_JVVHgSDOiqaVE1y7ob766lHm5HCpDIuoEc3AGiuvV3xolQrh_bfu1KpCCOOjcYAFPT/s512/blockquote-orange.png); background-position:; background-repeat:repeat-y;  margin: 0 10px; padding: 0px 0px 0px 20px;font: italic 13px georgia;}

Look at the picture below

• Second step :

Save your templates

Read More

CSS Styling Links

In hypertext systems, such as the World Wide Web, a link is a reference to another document. Such links are sometimes called hot links because they take you to other document when you click on them.. Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Special for links are that they can be styled differently depending on what state they are in. The four links states are:

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

CSS code :

<style type="text/css">
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
<b><a href="http://godheg.blogspot.com/" target="_blank">Godheg</a></b>

Result :

Godheg

Read More

How to remove Post Subscribe To Posts (Atom)

Tips and tricks this time is to remove posts Subscribe to posts (atom) which is in the latest version of the blogger template. posts subscribe to: post (atom) or subscribe to: post (atom) is located under the posts serves as a feed from our blog. The goal is that visitors can easily find your feed address. But if you already use a feed from Feedburner service. Then the presence of this writing is not so important anymore.

For those who prefer to not display this section, you may use the following ways:

• Log in to Blogger. Click the Layout -> Edit HTML
• Tick ​​the "Expand Widget Templates"
• Then find the code below:

<div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'> <data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div>

• If you have found, delete the code and then click Save Template
• Please click on View Blog to see results

Look at the picture :

Good luck !!!

Read More

How to set the Unordered List In the Post with Pictures

Well on this occasion I will share about the blogger guide. I will discuss the guidelines Unordered List or change the display which is usually called bullets. Unordered list format is usually used in the post if short sentences outlining the points raised or down is not sorted sequentially and usually preceded by the symbol • (dot). Using Unordered List format also shows that good quality articles, orderly, and neat. It will also attract the visitors on your blog and read one article that uses the format Unordered List in the post. Unordered List view which I will share with you this has attractive mini display icon, bottom border for each sentence, also has a background color.

How to set the Unordered List In the Post with Pictures :

• First step :

Go to your dashboard>>Template>>edit html>>proceed>>check expand template widget. Note : back up your template first. Use ctrl + f and find this code (or similar to this code),  .post-body ul , modified with this code :

.post-body ul,
.post-body ol{
  margin: 1em;
  padding-left: 1em;
}
.post-footer ul{
  margin: 1em;
  margin-top: -0.5em;
  padding-left: 1em;
}
.post-body ul li,

.post-footer ul li {list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0z1LT-n__xtkjdF2Vgct37K3MeVppu2F1p9XWBI5Bc6ZJfBrOnjw-wY3jVqIMJKDirbdBUzobutK6qWbXN3v5kI17-Qu0oAbF6CMkJ6WQyPG8xpqv3w05Ly_rC703uSAzzjHe88m7R2g/s400/uncheck.gif);

  border-bottom: 1px solid #ccc;
  padding: .2em 0 .2em .5em;
}
.post-body ul li:hover,
.post-footer ul li:hover {cursor: pointer;
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0QIywsK7uLmgMP3Jnj9MI_GCkNpzfybZbxVMbYfhzb1pZfZEptcRSUH5t3_Blz9EnVEYdPDCQMW2tsgVQmtDw9L35PXBfB3zfdfc8K79f4hIsJZP0dGlNkYvb9ZrGHVDlFjhi1yNhaGA/s400/check.gif); background-color: #f2f2f2; color: #B1291F;
}

If your template not yet installed, please put the code under the code .post {................}

• Second step

Save your template.

Read More