Recent Posts

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

Know More About CSS Wrapper Elements In Blogger / Blogspot

Know more CSS Wrapper Elements in Blogger  Blogspot2Blogger / blogspot allows users to edit html styling through. Thus it provides an opportunity for you, the owner of a blog on blogger, to modify the look of your blog. One is a touch on the wrapper CSS styling elements. The basic elements of the wrapper described as follows:
Know more CSS Wrapper Elements in Blogger  Blogspot
1. # outer-wrapper or # outer-wrap or # outer
2. # header-wrapper and # header or # header-wrap
3. # content # content-wrapper or wrap or # content
4. # main-wrapper or main-wrap or # main
5. # sidebar-wrapper or # sidebar-wrap or # sidebar, there is also # lsidebar (l = left) and # rsidebar (r = right)
(The names of the relative nature)
You will see the declaration appended to it, for example:
# outer-wrapper {width: 960px; margin: 0 10px 0; border: 3px solid # 666666, ……  and so on}
background (color or image / image), margin, padding, border, width, height (for header)

How To Make Pulldown/Dropdown Menu With Button On Blogger/Blogspot

How to Make Pulldown dropdown Menu with Button on Blogger BlogspotPull down menus are often also referred to as a dropdown menu or jump menu. Known as a pull down menu list will appear after the top of the menu is clicked / pressed, and a dropdown menu called anyway because after a row is clicked the menu list will appear sequentially down.
Pull down the menu / drop down menus are very useful to display a list of choices so long as it can shorten the length of the page blog / website and would create a blog / website look more elegant and professional. You can use the pull down menu to set the links blogrol, label, archive, categories, and so forth.
In this occasion I would be a review and share on how to create a drop down / pull down menu button plus an HTML-based form and command the javascript function.
Fundamentally, it is a series of options pulldown menu option tag in the selection of which are summarized in a form:
<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>
And will look like this:
To provide contents or list menu, add value and anchor text in option tag, the identity function (name) on selection, and function form:
<form name="Jump">
<select name="menu">
<option value="url link list 1">Name List 1</option>
<option value="url link list 2">Name List 2</option>
<option value="url link list 3">Name List 3</option>
</select>
</form>
Finally, add a command button and link javascript input option when clicking on the appropriate sequence identity (name):
<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
Oops, due to what appears on the form is the name of the first list and less informative, add the option with an empty value and text as information for visitors about the contents of the menu:
<option> – Chose The  Tutorial -- </option>
Here's the full script:
<form name="Jump">
<select name="menu">
<option"> – Chose The Tutorial -- </option>
<option value="url link list 1">Name List 1</option>
<option value="url link list 2">Name List 2</option>
<option value="url link list 3">Name List 3</option>
</select>
<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="GO">
</form>
  Examples of implementation (check all the links):
customization:
- Replace -Chose The Tutorial - with the text you want displayed on the top line pull down menu.
- Replace the word GO / other orders preferred.
Blog blogger, you can easily install it as a widget / gadget.
Dashboard >> Design >> Add a Gadget >> HTML/Javascript
That's it. Have fun!

How To Make And Optimize Label Functions on Blogger/Blogspot Basic Step for Beginners

How To Make and Optimize Label functions on BloggerLabels on the blog-platform Bloggger (Blogspot) has a function as a post classifier based on criteria / specific categories. With the label, expected visitors / blog readers can more easily find parts / certain categories of postings (the articles) in accordance with what he wants. However, there are some special characteristics that make the "Blogger Label" in contrast to feature on the blog platform category other (category in WordPress for example). Understanding these characteristics is expected to maximize the function label and also avoid the adverse effects especially for SEO blog Blogger / Blogspot:

 1. How To Make Labels Blogger / Blogspot (Basic Step for Beginners)
There are two ways to create a label:

a. Creating new page label when in post / create a new post (post editor)
When making a post, you can instantly create a label.
clip_image001
See the box at the bottom of the post editor
clip_image001[5]
Enter the label you want, can be more than one
b. Create and edit labels on the "edit posts".
clip_image001[7]
Check one or several existing posts at the bottom of the label editor as above, then select the label / create new label / delete labels on the dropdown menu "Label Actions ..."

2. General Characteristics Blogger Label
a. Label arrangement shown on the link labeled either above or below the posts are indexed, for example: Label: Blogging, Cheat, Download, and so on.
b. Blogger labels grouping is in fact not the system directory, but only the grouping based on the results of a post that is marked with a specific label and a search command (search label). This is a weakness and differences Blogger Label with WordPress category, where the category is a grouping of directories, so no parental category, child category, and so on.
c. Because the label is actually a url search commands (eg url: http://topbestbloggertemplates.blogspot.com/search/label/Blogger%20SEO), then the label is not a permanent link (permalink). Or, more simply, you could say the label is in fact not the real url. Labels are only formed as a result of the search url command (for example like seach engine search url). Therefore, search engines do not take into account the label as a link / url valid for indexed. That's why when you go into Google Webmaster Tools, there is information that the links in the label-restricted by robots.txt. In effect, the indexed label actually even have a negative impact on SEO.
d. If you use the menu / navigation breadcrumbs (especially as I have made and some other similar), label is a label that captured the most recent, so what if you put more than one label on a post, and because the labels are sorted alphabetically, the label shown in the breadcrumbs menu is labeled with the alphabet end of the post. If the label is generated by the breadcrumbs less precise and not as expected, then the SEO optimization also be less than the maximum.

Example: a post has a label: "Design, HTML, Tricks". then the breadcrumbs menu is generating results:
Browse >> Home >> Tricks >> Post Title.
3. Maximizing Function Labels for Navigation and SEO a. Attach the label as a navigation tool based on group posting, either on the mailing label link that has been provided as a default widget Blogger / Blogspot or on the menu / navigation others, such as the horizontal menu. Such features can help visitors / blog readers find postings that fit the desired group / specific categories.
b. Advised not to put too much label on a post, so do not confuse the visitor / reader blog. 4 or 5 labels at a post has a maximum limit that can be applied.
c. Because the label is not a real url (permalink), for SEO, then you should not be included as a link label that should be indexed search engine. The trick is to make links are nofollow tag. Add rel = nofollow on every link label when you create / affix the label link manually. This method is used when you add links manually label on the content of the post or menu / navigation extra.
Example of adding the nofollow attribute on hyperlinks (a tag):
<a href="http://topbestbloggertemplates.blogspot.com/search/label/Blogger%20SEO" rel="nofollow"> Widgets </ a>
If you want to add nofollow congenital Blogger widget automatically label and the label also appears on the bottom / top of the post, the nofollow attribute must be added through the HTML edit xml tag labels. See: How to Create / Change Label Blogger So Nofollow

d. Order to overcome the appearance of breadcrumbs with labels that do not fit or are unwanted, so be careful in making a label for the post. Make sure the label you want to appear on the label breadcrums is to be optimized. Should not be too much use of labels on a post and see if the alphabetical order of last name is a label that wanted to appear in the breadcrumbs. Corresponding labels can affect both SEO.
Happy blogging, mates!

5 Tips How To Speed ​​Up Your Blogger / Blogspot (Loading and Optimizing The Blog Elements)


speed-blog-load-timeBlog loading speed is very important, both for the comfort of visitors and also SEO. Load time  too long can make visitors applause before it can read the entire contents of a page.
Actually, if the blog has a reasonable load time is a bit longer than the website, because blogs synonymous with some of the widgets are installed either as a navigation tool as well as for the functions/features of the other.


Average of all the widgets that use a lot of javascript, automatic loading times tend to be longer. It's as well if we do the minimization of the size of the file is loaded.


5 Tips How To Speed ​​Up your Blogger / Blogspot (Loading and Optimizing The Blog Elements)


1. CSS
5 Tips How To Speed ​​Up Blogger  Blogspot Loading and Optimizing The Blog Elements 1CSS (Cascading Style Sheets) is a styling language that we often add to the HTML. To reduce the size of CSS in HTML templates, CSS compression done either manually or with a tool. Its function is to reduce the file size and the time read browser. Then, place the CSS rules at the top.





2. JavaScript
5 Tips How To Speed ​​Up Blogger  Blogspot Loading and Optimizing The Blog Elements 2JavaScript has read the time tend to be longer, so that when placed on, the browser will read first, while other elements will wait until loading is completed. As a result, elements that wanted to be seen to be affected, especially the post / article. Therefore, the elements that contain javascript (especially in the widget) should be placed at the bottom.
Use the output of widgets and Google's Blogger since its javascript can be loaded quickly. If forced to use an external javascript, uploading and hosting the js file for personal use only. Use the service to upload and host javascript to load fast and personal.


3. Posts (The Post)
On the main page (homepage), the number of posts or articles that appear also affect loading blog. If the post / article is displayed too much, then the loading time was will increase. Show the articles on the main page with a reasonable amount, say 5. To set it, go to Dashboard >> Design >> Edit HTML' on the body of the blog post >> write the amount / number of posts you want to display. See the following picture:


5 Tips How To Speed ​​Up Blogger  Blogspot Loading and Optimizing The Blog Elements 6


4. Picture / Image
5 Tips How To Speed ​​Up Blogger  Blogspot Loading and Optimizing The Blog Elements 3Serves to beautify the look of the image, giving the impression, and became a symbol of representation and interpretation of the article content. However, large-sized images also inhibits loading blog, therefore it is necessary to use the tactic in the picture. PNG image format is preferred because transparency will be required but the file size is much bigger but try to use the JPG format images. If you still have to use a PNG image file, such as the header, background or blog posting, reduce / compress its size with PNG compression tool that reduces image quality.
Available when adding an image to the post, provide or create fixed size thumbnail, so the browser can read it quickly. for example:


<img width="80%" src="http://www.xxxxxx.com"/>
This means, the image will be sized to 80% of the original image. Or it could be the size of the pixel (px), eg width = "100px" height = "100 px". This is to make it a thumbnail (preview image).


5. Widget / Gadget
5 Tips How To Speed ​​Up Blogger  Blogspot Loading and Optimizing The Blog Elements 4Widgets are an important part of a blog. However, if the widget is used too much, the longer the time loading the page. Use widgets and especially vital navigational support. Avoid widgets that are not so important and does not even support the content of the blog, for example widget clock, calendar, PhotoShow, and others. I call these widgets is not important because visitors do not actually need it, the loading time became more severe, and does not give any effect to the performance of the blog.

How To Create Popular Posts Widget With Various Colored Style

How To Create Popular Posts Widget With Multi Colored Style 1This post is about tutorial How To Create Popular Posts Widget With Multi Colored Style, the widget which aims to show popular posts based on page views. Popular posts this time will be modified by the addition of a Popular Post with CSS3 nine colors on any display title posts like this beside display screen shoot:
If you are interested to add popular posts widget with multi-color display like the above? Making the following tutorial:
A. first Step
1. Login to your Blogger account.
2. Choose Template >>  Edit HTML >> Find the code ]]> </ b: skin> (Use CTRL + F)
4. Put the following code just above the code ]]> </ b: skin>
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
5 Save Your Template
B. The Second Step
1. On the Layout menu >> Select add gadgets >> Select Popular Posts >> uncheck image thumbnails and captions, show at least 9 posts.
How To Create Popular Posts Widget With Multi Colored Style
2. Save Your Blog and see the results!
Thus tutorial how to add popular posts widget with multi-color display on the blog. May be useful.

How To Create Drop Shadows Image And Zooming Effect On Blogger Post With CSS

This time I wanted to share again, just a simple trick how to create or add a zooming effect and drop shadows on images with CSS3. like the example shown below :
Blogger 2How To Create Drop Shadows Image And Zooming Effect On Blogger Post With CSSblogger 3
If you are interested in adding effects or post this on your blog, it is very easy, just follow these steps:
1. logged into your blogger account
2. Click on the dashboard >> Template >> Edit HTML
3.  Find the code ]]> </ b: skin> (Use Ctr + F for easy searching)
4. put the following CSS code above the code ]]> </ b: skin>
.TTB-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.TTB-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
5 To display the zooming effect and drop shadows on the image of your blog posts. In the HTML editor posts just add the following code:
<div class="TTB-CSS3">
<img src="Image URL Here" />
</div>
6. Change Image URL Here with the URL/link image you want to display in your posts.
Thus tutorial how to create a zooming effect and drop shadows on the image. May be useful.

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 Creating Scroll Text Area in Blogger/Blogspot

How To Creating Scroll Text Area in Blogger BlogspotScroll text is the text that was in the box wide and high in a certain limit in size so as to see to the bottom of the mouse scrolling required. This trick is used to save space in the post body and sidebar, so that the entire page is loaded by the browser into not too long.

Copy the following code:

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

<div align="center">: the center shows that the position of the button will be in the middle, so if you want to be in the position of the left edge, just change the word left. And if you want to be on the right edge, just change the words right.

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">: This code means that when the highlight button is clicked, the entire text is in it will be in highligt (in mark or on the block), so you do not alter this paper.

Value = "Highlight All": Highlight All words are words that will appear on the button, so if you want to change this article please replace the word you want.

<p align="center">: This indicates that the text area will be in the middle, well if you want to text your area is on the left bank, replace the center with the left, if you want at the right edge, replace the word right.

<text style="width: 300px">: the word "WIDTH: 300px" indicates the width of the text area by 300 pixels, so if you want to shorten or extend the width of the text area, you just replace it with the number you want. eg: "WIDTH: 700px;"

HEIGHT: 144px: number "144px" indicates that the text area will have a maximum of 144 px, so if you want to change just change that number with the number you want. For example: HEIGHT: 160px.

Well the following example:

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

Oingo, Inc., a privately held company located in Los Angeles, was started in 1998 by Gilad Elbaz and Adam Weissman. Oingo developed a proprietary search algorithm that was based on word meanings and built upon an underlying lexicon called WordNet, which was developed over the previous 15 years by researchers at Princeton University, led by George Miller. Oingo changed its name to Applied Semantics in 2001, which was later acquired by Google in April 2003.

Google launched its AdSense program in March 2003 and made it public in June of that year. Some advertisers complained that AdSense yielded worse results than AdWords, since it served ads that related contextually to the content on a web page and that content was less likely to be related to a user's commercial desires than search results. For example, someone browsing a blog dedicated to flowers was less likely to be interested in ordering flowers than someone searching for terms related to flowers. As a result, in 2004 Google allowed its advertisers to opt out of the AdSense network. By early 2005 AdSense accounted for an estimated 15 percent of Google's total revenues. In 2009, Google AdSense announced that it would now be offering new features, including the ability to &quot;enable multiple networks to display ads&quot;. In February 2010, Google AdSense started using search history in contextual matching to offer more relevant ads
</textarea></p></div></form>

Good Luck..

How To Change Background Post With Color or Images On Blogger?

HOW TO CHANGE BACKGROUND POST WITH COLOR OR IMAGES ON BLOGGERPost is the most important thing in a blog, to manage the post in order to appear more attractive and beautiful, the most important thing is the background of our blog posts. Selection of appropriate background will provide comfort to our blog visitors.
 
Many ways and techniques to make the post look attractive by visitors to our blog. Besides the background turns weighted articles also very influential post. Background of a blog post is not just a color that is sometimes boring. Alternatively, you can replace the background image with the post which must necessarily be adapted to the color of the letters on the post that image as a background presence does not interfere with the display case.
 
How to create a background post there are two ways
 
1. How To Change Background Post With Color On Blogger?
Place the following code at the beginning of post
<div style="background: Writing code here "> And at the end of the post, should be closed with a code like this:
</div>
Writing code here you can change the color with the color code you want. Can see various color codes here. That need to be considered when you put it, you have to choose the edit HTML tab, not Compose mode.
For example, the color pink background
<div style="background:#FFCCFF">
Google uses its Internet search technology to serve advertisements based on website content, the user's geographical location, and other factors. Those wanting to advertise with Google's targeted advertisement system may enroll through Google AdWords. AdSense has become a popular company in creating and placing banner advertisements on a website, because the advertisements are less intrusive than most banners, and the content of the advertisements is often relevant to the website.
Many websites use AdSense to monetize their content; it is the most popular advertising network. AdSense has been particularly important for delivering advertising revenue to small websites that do not have the resources for developing advertising sales programs and sales people to generate revenue with. To fill a website with advertisements that are relevant to the topics discussed, webmasters place a brief HTML code on the websites' pages. Websites that are content-rich have been very successful with this advertising program, as noted in a number of publisher case studies on the AdSense website. AdSense publishers may only place three ad units per page.
</ div>
The result will be like this
Google uses its Internet search technology to serve advertisements based on website content, the user's geographical location, and other factors. Those wanting to advertise with Google's targeted advertisement system may enroll through Google AdWords. AdSense has become a popular company in creating and placing banner advertisements on a website, because the advertisements are less intrusive than most banners, and the content of the advertisements is often relevant to the website.
Many websites use AdSense to monetize their content; it is the most popular advertising network. AdSense has been particularly important for delivering advertising revenue to small websites that do not have the resources for developing advertising sales programs and sales people to generate revenue with. To fill a website with advertisements that are relevant to the topics discussed, webmasters place a brief HTML code on the websites' pages. Websites that are content-rich have been very successful with this advertising program, as noted in a number of publisher case studies on the AdSense website. AdSense publishers may only place three ad units per page. </ Div>

2. How To Change Background Post With Images On Blogger?
If you have a specific image to be used as background, first uploaded to a hosting site like photobucket or other hosting site to obtain the URL address.
To be considered you must be in a position to the Edit HTML, the following code at the beginning of the post:
<div style="background:url(picture address here) no-repeat;"> The end of the post cap with the following code:
</ div>
Replace picture address here with the address you want to display images.
As well as the background color, even this code you can add the add-in accordance with the wishes.
Example, I want to make a post with a background which is located in https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaGd9AysUb08trzxzPCXGYu9wC6geZ0_08K3_Hlh2r0ynR6xhSgiId0DmThWkd44K8o7DzJkgR1chuEM__27BQ99avKDeG7sj5RJD0wGQhxtK28o1XAOV6fPivmTYyr_KhCTQGG9mp1J4/, background wanted in the store on the right top of the post, the padding of 10 pixels, large letters 90%:
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaGd9AysUb08trzxzPCXGYu9wC6geZ0_08K3_Hlh2r0ynR6xhSgiId0DmThWkd44K8o7DzJkgR1chuEM__27BQ99avKDeG7sj5RJD0wGQhxtK28o1XAOV6fPivmTYyr_KhCTQGG9mp1J4/) center top; text-align:justify; font-size:90%; padding:10px">
Google uses its Internet search technology to serve advertisements based on website content, the user's geographical location, and other factors. Those wanting to advertise with Google's targeted advertisement system may enroll through Google AdWords. AdSense has become a popular company in creating and placing banner advertisements on a website, because the advertisements are less intrusive than most banners, and the content of the advertisements is often relevant to the website.Many websites use AdSense to monetize their content; it is the most popular advertising network. AdSense has been particularly important for delivering advertising revenue to small websites that do not have the resources for developing advertising sales programs and sales people to generate revenue with. To fill a website with advertisements that are relevant to the topics discussed, webmasters place a brief HTML code on the websites' pages. Websites that are content-rich have been very successful with this advertising program, as noted in a number of publisher case studies on the AdSense website. AdSense publishers may only place three ad units per page.</div>
Then the result is like this:
Google uses its Internet search technology to serve advertisements based on website content, the user's geographical location, and other factors. Those wanting to advertise with Google's targeted advertisement system may enroll through Google AdWords. AdSense has become a popular company in creating and placing banner advertisements on a website, because the advertisements are less intrusive than most banners, and the content of the advertisements is often relevant to the website. Many websites use AdSense to monetize their content; it is the most popular advertising network. AdSense has been particularly important for delivering advertising revenue to small websites that do not have the resources for developing advertising sales programs and sales people to generate revenue with. To fill a website with advertisements that are relevant to the topics discussed, webmasters place a brief HTML code on the websites' pages. Websites that are content-rich have been very successful with this advertising program, as noted in a number of publisher case studies on the AdSense website. AdSense publishers may only place three ad units per page.
good luck, hopefully useful

How To Setting And Setup Color Code Widget For Blogger/Blogspot

How To Setting And Setup Color Code Widget For Blogger BlogspotTo edit or design the blog we definitely need a color reference code. For that we must look for sites that have a color-coded table post. if it ever crossed your mind how to display the color code table in the post or on our blog widget?

here's how to set it up

  • Login To Dashboard Blogger
  • Click Template >> Edit HTML
  • Copy and paste the following Java Script code right above the </ head>
<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>
<script type='text/javascript'>
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;
function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
executeonload(init);
function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
</script><!--[if gte IE 5.5000]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
YAHOO.util.Event.addListener(window, "load", correctPNG);
</script>
<![endif]-->
  • Before you save the templates,You can click the tab preview first, if your blog looks like originally meant the steps already true..
  • Now You can Go To Dashboard Blogger >> click Layout
  • Click the page element add A Gadget .
  • Click Add HTML / JavaScript
  • Copy and paste the color code on the column entry
center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>
Good work! Thanks for your time and the close attention which has been set aside for reading buddies this post

How To Add Smiley Emotions On Blogger Comment With JQuery

How To Add Smiley Emotions On Blog Comment 1This tutorial I want to share how to display the smiley emoticons on blogger comments. While it may be in the google search you will find lots of tutorials blog that discusses how to add yahoo smiley emoticons on blogger comments but that using JQuery concept may still rare. It is a facility that can automatically change the emoticons symbol :), :D,: P, into a predetermined image Smile,Open-mouthed smileWinking smile

Emoticons / smileys can represent expressions blog commentator. Moreover, emoticons / smileys can further enhance the look of the blog comments section. By using JQuery, we can add emoticons feature on the blog platform Blogger. This emoticon emoticons use the base command is interesting. For example, when you want to display a smile emoticon image, use the command / write character :), and so on. In blogger, the command can be adapted in order to bring up the image display smiley / emoticon particular. Bloggers comment on this emoticon feature, I use gif format images that have animation effect (moving).

How To Add Smiley Emotions On Blog Comment
How To Add Smiley Emotions On Blog Comment 2
1. Go to Dashboard Blogger >>Template >> Edit HTML
2. Add the following CSS code above ]]> </ b: skin> (searching With Ctrl+F):
.emoWrap {
  background-color:#fff;
  border:2px solid#0B6138;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}
img.emo, input.emoKey {
  display:inline-block; 
  *display:inline;
  vertical-align:middle;
}
input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}
3.  Add the following JQuery script above the </ head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
For those of you who already have or install a JQuery script in your template then just ignore the above steps!
4. add the following script under the JQuery script
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "To insert emoticon you must added at least one space before the code.";
//]]>
</script>
<script src='https://tipstrikblogging.googlecode.com/files/EmoticonsKeren.js' type='text/javascript'/>

5. Save template and see the result your blog

6. You are done!

Now visitors bloggers can use emoticons / smileys in your blog comments. Have a nice Blogging.

How To Create And Share Buttons In Blogger Post Like(Facebook Like, Tweet Button, and Google +1 Button)

How to Create Share Buttons in Blogger Post Like(Facebook Like, Tweet Button, and Google  1 Button)Share buttons are buttons that can be used by visitors to rate & share links or specific content that they like to social media, Facebook, Twitter, Google+, etc.. Open Secrets Blogspot lot buddy who asks about who I use share buttons under title post. I use 3 buttons belong to 3 social media be structured such that one part of the widget. I used to share how fitting & Facebook Like Button Google +1 Button, however Tweet Button yet. But because a lot of buddies who ask for 3 buttons (button) share it at once into a single widget, okay the Tweet Button I would immediately jump and share how to make and install all three.
buka rahasia blogspot
 
Still like the two previous ways, this widget will only be displayed on the posting page post when opened a whole and does not appear on any other page types (homepage, label, search, archive). In order for the arrangement, the distance and did not look messed up, I made a separate measurements on each button and then put them together with the table. So, do not change any value in the respective button.
Before mounting the share buttons, note the following:
a. If you've installed the widget Facebook like or Google Plus, especially that I share in this blog, or grab first remove the code. 2 See the previous post to find out which one should be removed.
b. If you've ever put on Google+ 1 Button, no need to install a plugin API Google +1 script as follows:
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> </ script>
c. If not, install a plugin API Google +1 script above </ head> on edit HTML / Edit Template.
How to Install Share Buttons (Facebook Like, Tweet, and Google +1)
After making sure some of the above, plug the share buttons widget with the following steps:
1. Copy the script / code below:
<b:if cond='data:blog.pageType == "item"'>
<table border='0'> <tbody> <tr>
<td> <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="MyTwitter"> Tweet </ a> <script type = "text / javascript" src = "/ / platform.twitter.com / widgets.js"> </ script> </ td>
<td> <iframe allowTransparency = 'true' expr: src = '"http://www.facebook.com/plugins/like.php?href =" + of data: post.url + frameborder = '0 'scrolling =' no 'style =' border: none; overflow: hidden; width: 90px; height: 21px; '/> </ td>
<td> <g:plusone expr:href='data:post.url' size='medium'/> </ td>
</ Tr> </ tbody> </ table>
</ B: if>
Replace MyTwitter with your twitter account name
2. Open the page and edit the HTML / Edit Template:
Design >> click Edit HTML
3. If you want to put under the title of the post:
Find (Ctrl + F) <div class='post-header-line-1'/>, put the script / code directly below. <div Class='post-header-line-1'/> if not met, then search <data:post.body/> put script / code right on it.
4. If you want to put in the bottom of the post / article:
Find (Ctrl + F) and place <data:post.body/> script / code directly below.
5. Save template 'n see the result.
6. Done.
Good luck and enjoy your blog's share buttons (Facebook Like, Tweet Button, and Google +1 Button).