Recent Posts

Showing posts with label Blogger Templates. Show all posts
Showing posts with label Blogger Templates. Show all posts

How To Changing The Sidebar Position And Main Post In Blogger Template

I would like to share the following easy and simple tricks, which I find the results of brain-tweaking CSS while trying to design a new template. Namely How To Changing the Sidebar Position & Main Post In Blogger Template, for example display page elements such minima default template image below:
How To Changing the Sidebar Position & Main Post In Blogger Template 1
From the picture above we can see the position of the sidebar is on the right, while the main column on the left. To change the position of the sidebar and main to be the opposite as shown below, it's easy just follow the tutorial below:
How To Changing the Sidebar Position & Main Post In Blogger Template 2
1. Login to your blogger account on the dashboard click Template >> Edit HTML
2. Find the following code:
#main-wrapper {
  width: 410px;
float: $startSide;
  word-wrap: break-word;
  overflow: hidden;    
  }
#sidebar-wrapper {
  width: 220px;
float: $endSide;   word-wrap: break-word;
  overflow: hidden;     
}
3. To consider only the red writing, please replace it with the following code:
#main-wrapper {
  width: 410px;
 float: right;
  word-wrap: break-word;  
  overflow: hidden; 
}
#sidebar-wrapper {
  width: 220px;
float: left;
  word-wrap: break-word; 
  overflow: hidden;     
}
4. Save the template. Please see the results on the page elements.

If You Use A Blogger Template from Blogger.com you can Start Changing the Sidebar Position & Main Post by logging in to blogger account, on the dashboard click Template >> Customise >> Layout, as shown below :
How To Changing the Sidebar Position & Main Post In Blogger Template 3
That's How To Changing the Sidebar Position & Main Post In Blogger Template, I hope that this article could be fruitful and help you in making changes to your blogger sidebar

How To Make And Install Horizontal Menu 3D Button With Widget In Blogger/Blogspot

How To Make And Install Horizontal Menu Widget Button 3D In Blogger Blogspot 1Horizontal Menu Widget Button 3D In Blogger/Blogspot is also made with pure HTML and CSS without javascript or jquery touch., Just like the menu / navigation horizontal previously. How to create and install was very simple and without editing the HTML template, because CSS rules I created one with HTML.

How To Make And Install Horizontal Menu Widget Button 3D In Blogger/Blogspot:
How To Make And Install Horizontal Menu Widget Button 3D In Blogger Blogspot 2
1. Copy and edit the code below:
Code:
<style> # navcontainer {background: # 369; border-top: 1px solid # 9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;} # {list-style navlist : none outside none; margin: 0; padding: 0;} @ media all {# navlist {text-align: center}} # navlist li {bottom: 11px; display: inline; line-height: 1.2em; margin: 0 ; padding: 0; position: relative;} html> body # navlist li {background: # 000; margin: 0 3px 0 0; padding: 0px 4px 4px 0;} # navlist a, # navlist a: link, # navlist a : visited {background: # 900; border: 1px solid # FFF; bottom: 2px; color: # FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative ; right: 2px; text-decoration: none;} # navlist a: hover {background: # C00; bottom: 1px; color: # FFF; position: relative; right: 1px;} # navlist a: active {background: # 999; bottom: 0px; color: # FFF; position: relative; right: 0px;} # navlist li # active {background: # 369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative;} html> body # navlist li # active {background: # 000; margin: 0 4px 0 4px;} # navlist # active a, # navlist # active a: link, # navlist # active a: visited, # navlist # active a: hover {background: # 369; border-bottom: none; border-left: 1px solid # 9CC; border-right: 1px solid # 9CC; border-top: 1px solid # 9CC; bottom: 0; color : # FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0;} </ style>
<div id="navcontainer">
<ul id="navlist">
<li> <a href="#"> <span> HOME </ span> </ a> </ li>
<li> <a href="#"> <span> About U.S. </ span> </ a> </ li>
<li> <a href="#"> <span> CONTACT U.S. </ span> </ a> </ li>
<li> <a href="#"> <span> Privacy Policy </ span> </ a> </ li>
<li> <a href="#"> <span> DISCLAIMER </ span> </ a> </ li>
<li> <a href="#"> <span> SITEMAP </ span> </ a> </ li>
</ Ul>
</ Div>
- Replace # with the url you want to put on the menu, such as the homepage url, table of contents, labels, and others.
- Replace HOME, About U.S., CONTACT U.S., and so the name of the menu / anchor text according to what you want, such as Home, Contents, Tips, and so on.
- If you want to add / remove list menu, add / delete rows:
<li> <a href="#"> <span> Link </ span> </ a> </ li> before </ ul>.
2. Login to dashboard >> Design >> Click Add a Gadget
How To Make And Install Horizontal Menu Widget Button 3D In Blogger Blogspot 3
3. After a pop up window appears, select the HTML / Javascript
How To Make And Install Horizontal Menu Widget Button 3D In Blogger Blogspot 4
4. Then enter the code that has been edited to configure column HTML / Javascript.
 How To Make And Install Horizontal Menu Widget Button 3D In Blogger Blogspot 5
7. Click save.
8. The horizontal menu widget drag down / up header (put on gadget slot).
9. Save again.
10. Done! menu / navigation horizontal your Blogger Blog ready for use.

How To Change And Edit Blogger Templates HTML?

How to Change and edit blogger templates htmlIf you create a blog and look less attractive templates, you can easily change the blogger template and quickly as bloggers themselves have been providing beautiful and elegant template, but if the templates provided by the blogger still feels less satisfying, you can replace it with a template from provider blogger templates, today many free blogger templates provider site, but if you use a free template downloaded from sites such provision template, you can not eliminate credit link template creator as an appreciation of their hard work.
To get a free blogger template please go to google with keywords or keywords such as free blogger templates.
Or you can visit the site free blogger templates provider below:
• http://www.freebloggertemplate.info
• http://www.themescook.com
• http://www.templatesblock.com
• http://www.bloggerstyles.com
• http://www.blogtemplate4you.com
• http://www.ipietoon.com
• http://www.templatebloger.blogspot.com
• http://www.fretemplatesblog.blogspot.com
• http://www.btemplates.com
• http://www.eblogtemplates.com
Understand that the template itself is simply a web page or blog design and its components. It provide more flexible templates for blogger users because of the design facilities that have been more complete like setting the background color of the template, adjust the column width, layout and other facilities, will you please do the experiment yourself.
Here's how to change the template in BlogSpot templates available:
1. Login to blogger with your ID
2. Click the Template
clip_image002
3. In the Blogger Template window will look the templates provided by blogger, select one of the templates that you want, as this article in blogger post provides 3 options of ready-made templates such as Simple, Dynamic Views, Picture Window, Awesome Inc, Watermark, Ethereal, Travel You can also change the background color of each template, if you've got the appropriate template. 
Please click the button Apply to Blog
clip_image004
4. To adjust the background color, Column Width, Layout and Advanced level settings as shown below, click on the menu on the left side of the box that is in the Adjust window widths and layout, do experimentation until you find the template you want and then apply on your blog.
How to Change blogger template with template from free website templates provider:
1. Please download the template from the website free blogger templates provider
2. Templates download results still usually in the form of a compressed file, usually in the form. Zip or. Rar. 
You already should have extractor software that is commonly used with WINZIP Or WINRAR if you do not have it, please download via google.com
3. After successfully extracted template file, the file will be uploaded to the blogger.
clip_image005
4. Login to blogger with your ID click Template >> Edit HTML
clip_image007
5. Next to proceed with the replacement of HTML template click Edit, Delete all files. XML by pressing (CTRL + A) and press delete. Open the XML file that you have downloaded earlier with Notepad, Worpad or Microsoft Word and then paste it in the box below Edit HTML create Picture.clip_image009
Save the template by pressing the "Save template" please see the result by pressing "Preview Template"
Until this replacement process on blogger template using the template from the site template free provision of complete ... so please experiment templates that can be used to look beautiful and satisfying

How To Create Header Images For Blogger Free and Elegant

Header Blogger 
Using a Header Images For Blogger course will give you the strength and perfection of the blog as a whole. Header image can illustrate and confirm the theme blog, a blog is a form of personalization that can not be seen on other blogs, or at least be able to "jazz up" the previous display blank header.

Although you may have a free image, not all of the image can be recklessly used as an image header . Choosing a blog header background image that fits, in accordance with a blend of blog and blog theme, and a variety of other considerations must be made in order to have the blog as you wish. 
For those who are expert in graphic design, create and customize images as you wish is not difficult, but, for those who have never or rarely come into contact with the world of graphic design, of course, make the header image as you wish it will take a long time and the results can be less than satisfactory.
To get a picture of the most fitting blog header, it takes a collection of options are many and varied, so the results are satisfactory. 
Here are 4 sites with free blog header image provider which have many and varied options as well as the high quality images that I specifically choose among dozens of other sites:

1. Themeheaders.

LOGO header 1
Sites providing a huge collection of blog header with a variety of design, theme, size and color. There are basic themes that can help establish the context that brought in the blog. Upon entry to the site, you will be greeted slideshow featuring some examples of high-quality header images. Click on "Gallery" in the horizontal menu to see an browse the entire collection.

2. Freewebpageheaders.

LOGO header 2
Almost the same as themeheaders, this site also has a diverse collection of man-made blog header graphic designers who share it for free. The initial view of a header image slideshow very interesting. Category consists of two main types, abstract and non-abstract. There is also a blog background picture is also free. Click the "browse gallery" at the bottom of the homepage to see the collections.

3. Theblogboutique.

LOGO header 3
A blog that provides a large collection of blog header with different color themes. Categories are in the right sidebar so you can easily browse by category desired. There are many blog header that looks "girly" for your Blogger girl who wants a touch of color "women" on the blog. There is also a background image that one packet with a header image so it can be a whole theme for the blog.

4. Rockstartemplate.

LOGO header 4

This WordPress blog platform offers many resources for freebies blog of pictures / graphics and templates. One design that is distributed free SCARA 20 header image with high quality and looks are made by highly skilled hand. 20 images consist of several themes and colors. The majority are abstract images which look elegant and classy. See also other collections via the tab "Blog Resources" and browse to its submenu (dropdown menu).
How to download / get free blog header images:
  1. Open the image page by clicking on the image or right click and 'open in new tab'.
  2. After the image is fully open (usually on a new page or pop-up window), click on 'save image as'.
Tips to adjust the display image to the blog and optimize performance:
  1. Edit the size of the image to fit the size of the blog header. Usually follows the header wide outer-wrapper or content-wrapper, find the CSS code: # outer-wrapper or # content-wrapper, see width: - px. Edit images with adding or reducing its width (compare to the width that has been found earlier).
  2. So that the image file size is not too hard to do image compression (for PNG, but JPG is also able to output PNG).
  3. More tips put the background image header correctly, see: How to Change / Install Header Background Image in Blogger / Blogspot.

How To Modify css “blockquote” on Your Blogger/Blogspot

What is "Blockquote"? Blockquote" is used to indicate the passage of text in a post. "Blockquote" is also used to indicate the passage or the words which you want to emphasize to visitors in a blogger/blogspot. Example:
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.
How To Modification css “blockquote” on Your Blogger/Blogspot? Many ask how to modify the Authors Blog "blockquote" into a beautiful and attractive appearance. Stands to reason why blockquote must be modified to be better, because Blockquote can make the link between beauty layout a post or article. And blockquote easier for visitors to know the most important part in an article. Below I will give some CSS code to replace the "blockquote" you, so it becomes more beautiful and attractive. Please follow the steps below.

1. Log in to your blog and Chose “Setting”
quote 1
2. Click the draft
quote 2

2 Click  Edit HTML
quote 3
Find code .Posts blockquote or  blockquote, or the like in your template. Press F3 or ctrl + F to facilitate the search and enter that code in the search. Replace the code with the code below. Please choose which you like. Do not Forget to Save Template

Display blockquote 1 blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnBCjk4Sj4ruqnwsGXecXzkKLaDr8wMq8nXHtdaTUJqa6N2JMEc_1eUkJPxks8E_5uMmHnVNkrfAJymxk7KwPShwvD_vGfeIdNW4xUYlHt0W-o268r_9u9r70qHDFXeaqxUkB6UaAgESw/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 2
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3dByW7OqWL-y0DWr1O8tPi8ai0dnefFW4wt6-OG7cyhOJ7ajPH1H_kf80jY1WNRl2LFCKoZgLQFPGALCd9tiFtb4a7gDojcK24tPqLXo-5nSaRVNBd66vVuXuafqUxuzI3KMCS5SLYA/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 3
.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj48BcP8SA8_a0PDc_5osfTk0sZdUjLfEeSytoKPnuDBB-FvW1EoVSuKpGoLaPVFhk0rLNOZubh-kp9TtNWd-bMSPMpiog4k7r_ZmJEro-KL1UeVWR4YS-Kl-RcoTCrWrOuom2Rq8U9pk4/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 4
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.
Display blockquote 5
blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 6

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 7
blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read
Display blockquote 8

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0kYv2VK32DV-_G9Drw1ZfedSW00hyphenhyphenrZ9PbS7rM_2-FAx3XDFqkQfcuWbjayweOkcXheQm1rlczyOUysh39SyjeYzVq_RU-QXwGa0a0PQii5rdliANg8KDa3vz8pdYZNJz1XFnOEJ17s/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 9
blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhFyeq-Pid2HTV74mn2XLRfQokP0Ee8x2nqt0lwORn4PULh1gBkQf6Zx-VXUrptFhzLrEwG5BMw6sK38wjXAFuffFWeCIvz7Kc9imCvHM3r_-RzuUTXXDEK5nLH8kTygnAZSz9vKMR_U/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 10

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7Of2HUDQesjHWlA17DnA-dQ8lF_RzO9t_RpS_YofDUeKrxc916ITe9tT6vdwaV1IuQhFT_lup16_3P1C6QEC7Y04NaFCgGcX6e9SZ8lhLHZavcCyZr2kf_7_6l_86YsVD4p6e_tJgRs/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 11
.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKofbU0CQDjlf5oVaPkvqpTyDbx2mTYd-HYSAh9ioJvWe2Den1HtMKdx_rujAwLulVokShtHffZpDj1obHsp4wFYwnWLTL5VtXgNHQR-9l2bFOHiWcEnMKdLxeEvFiaVvN_xu12u1QrEE/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOMa2wlxgGqmkRpj5qeSgCDGRBXLRTaRgrKIrqs8M5KUhE2ANZJLInSDLhV697YcZvPg22vh7RsQx33gw-swesJ1Op231UtbWujhfbSx-bLwxRNs8E2GoCb3Dk1d-Oee9oX7sAke6ZyI/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 12

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7GGf3fffoMXBFA3IKPLxzwc5SYnIAf6cA40_Spw1X-pmqbXgqR9Rn5bmvc7Kqc-FiLX85_Z6v6D3woPZvEkKaFulmwt25mmMykcIjbhKOOUJacys5UNMXJ2te6ThI_TgO4-vvjH3eO0/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mqgne2S67snYmQdOECwbpMzDToSoVQ8BkASiwkxLZqmiAoBRPqy3ASjkXaSCULEq-Dpm3VjJPP-qavAsMQJ0EGJFXuvEEXinbzI2dLhlka30JzHVI88lVEEGEzj7jVL15o11c6kft3o/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 13
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS74LVnw0RNaSJUVMhKnyxeICR9CrgHm5_y6svdOA20_QHAyGzntjao8skaEHTc0dZV94sLarB_aUg7pzJGwB6EJlWTsY00Z0bZ8O1cc-zoFRtcwIQaWA3jwAXbQNHBnsJ1uGoTBYdNhg/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 14
.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgNhDPe76Q1CRAB-lwRtBj0SB78h1VB2ZUOt1BNJTbxntEgAR5nf9KbVHqBaaaGM0LrNyA6CZ1M-vU-_E5iIymh_RPCXlzUvdniOOkGPpZmsJcj2qClWx-tpJygOUrG1KFmGJWq158IkU/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVk6UGKlFsmfmQYu4S5z94QO9ZHTZX3M1eZ1Wc2vOaVMvHgC_vXTvOnaQQyiauryF9HFgdulqGx-024kRQxx71GZQupliSFxHHo0Jgo0P8i15-cyN2d4mdbInZfWmVZiHYFUnwpCQaGg/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 15

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxsS-1ygJxQhKVLovk5-WV-LPQFD77vAqmox_Y1nAT6BPXW2OvZriHiwE_-Dv4Eu0EECM3IT8cmzjCoazSwyZHyXvqe8WPm4h9WAL0nDGPQvu1X9wgNOiK0lEaXdHtzzIriM92UWpe2Xw/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisVnaoiDTxirEuRN_Lb8ESr8asU7NamoIEjKsab8XMDFzPAAx7DGhnoGjZYhNe9CDHUdNZhJVSu5zvMeJ90esIheLU2lMRNh0REeZX5cB-96DohhwSESPTPuPWbkcAw-s0WfNjoSU-Fh0/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 16

<blockquote style="-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid rgb(56, 97, 11); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 17
<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 18
<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 19

<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.

Display blockquote 20

<blockquote style="-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;">
This is one example of “Blokquote” modified to be better, because the relationship between beauty Blockquote can make layout on your post or article much better to read</blockquote>
This is one example of how "Blokquote" can modify the paragraph/text to be better, because the beauty of it is Blockquote can make layout on your post or article much better to read.
Do not forget to Publish Posts
Good luck….

Did You Know Blogger Dashboard New Look and Features ?

Blogger Dashboard's new look and featuresFirstly Bloggers would have to turn on the New Blogger Dashboard Display (new user interface). Blogger's new Dashboard views can be accessed by clicking the "Try the updated Blogger interface", either through the Home page, or other pages (new post, design, comments, etc.). All the information I have would be presented at Latest Features Blogger / Blogspot 2013.  The display looks more elegant, powerful, handy, and complete.
Users will be greeted with the new Blogger dashboard display like this:

Blogger Dashboard's new look and features
You can access all the features / pages in the control panel / dashboard blogger by clicking the option on the right of the "home". Choices will appear as posts, comments, stats etc.. To go directly to the template design / page elements, click the "Layout" (formerly design).
 Tampilan baru bloger 2
In the Layout page, you can add or edit a gadget as usual. 
One new feature on the page are How to access and create a "Blogger Custom Favicon” , users can easily change the favicon (icon) blog. Unlike the past, where we have to upload the file .Ico on another hosting and install favicon script via "Edit HTML".
One of which also display a new page is an overview, where we can see the blog summary of statistics in detail in one page, for example: the number of page views, number of posts, number of comments, most reffering site, news bloggers, and many more. Click on the panel "Overview" on the upper left to access it. This look reminds me of the control panel / WordPress admin dashboard, of course not exactly the same.
Blogger Dashboard's new look and features
Another important feature that has been there before, but could make the user confused when looking for is "Edit HTML". Bloggers in the long view, Edit HTML accessible after getting into design click Edit HTML. This feature is now accessible and integrated in menu / option "Template" with the name "Edit Template".
 Blogger Dashboard's new look and features 2
In the menu, user can view a live display template used by the blog, do the customization template, and select and change the template. Of course this is the official blogger for template / default Blogger. To do manually editing HTML, scroll the mouse to the bottom of the page. There are three sub-menu, select / click "Edit Template" and view the HTML editor will immediately appear. 
Backup and restore the template XML file can easily be done in the yard anyway.
Tampilan baru bloger 5 
One of the most important features is the old "Post Editor". In this new Blogger look, layout Post Editor looks more elegant and steady. However, no significant changes in the editing features of its
It would not took a long time for users(blogger) to adapt to the look and features of the new Blogger dashboard. However, it feels worth enough to try this Blogger Dashboard New Look and Features.
Happy blogging!