Recent Posts

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

How to Eliminate Underline Link on blogger/Blogspot

How to Eliminate Underline Link on blogger BlogspotLinks in the blog or website by default would seem to have an underscore (underline). Sometimes the display looks less elegant and less prominent. Natural blogger templates, CSS has not given rules to eliminate underline (bottom line) and the link will look like the following example:
Tag default link:

<a href=http://topbestbloggertemplates.blogspot.com>Top Best Blogger Template</a>

The result:
Top Best Blogger Template

If you want to remove the underscore (underline) on the link, use:

<a  href=http://topbestbloggertemplates.blogspot.com>" style="text-decoration:none">Top Best Blogger Templates</a>

The result:
Top Best Blogger Template

If you want to change all the links in your blog / website by default and is not automatically underlined (underline), then you have to edit the HTML template:
1. Login to dashboard> Design / Design> Edit HTML.
2. Find CSS rules link (a) like this (usually located at the top of each template, but not exactly the same color depending on the rules link and the template used):

a {color: #1C4991; etc.............}

3.To make underline missing link, add text-decoration: none; example:

a {color: #1C4991;text-decoration: none; etc.............}

4. Save the template and see the result.

If there are problems in the edit link, giving CSS rules, as well as in editing the HTML template, please use the comments box and I'll try to help as much as me. You can also learn how to give a different color on the visited link or see the full tutorial at the link display modification blogger / blogspot.

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 Compress PNG Images For Speed up Your Blog Loading with PNGGauntlet

How To Compress PNG Images For Speed up Your Blog Loading with PNGGauntletPNG format images nowadays, it is getting popular and a favorite because it has many advantages. One is transparency images that make this kind of a good image to put on any colored background. However, the drawback of this type file is a file that is larger than the other formats so that when the browser load it takes a relatively longer time than the jpg format images. I once had to give up and turn down the resolution or clicking-convert it to other formats such as jpg. But once knew this PNGGauntlet, compress images easier. Page load time remains fast and the image quality was still good. of course, the search engines prefer pages that can be loaded quickly.
How To Compress PNG Images For Speed up Your Blog Loading with PNGGauntlet
Based software. NET uses Ken Silverman artificial PNGOUT command to optimize PNG files. Its function is to reduce the number of bytes that are not needed without losing any information contained in the compressed file. Thus, the quality of the compressed file with the original file. Before uploading PNG images, be sure to first compress. You simply enter the file you want to compress or drag (drag) to PNGGauntlet window, and select the compressed file storage and click Optimize. This software can also be used to convert a JPG, GIF, TGA, PCX, and BMP to PNG format. And what's more, the software is only measuring about 815.27 Kb!
Important!: Before using this software, your computer must be installed. NET Framework 3.5 or 4.0 Client Framework. Get the installer file in smallestdotnet for sizes that are not so great.
Download PNGGauntlet Page

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 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 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

List Of Colour Codes Table For Blogger/Blogspot

LIST OF COLOUR CODES TABLE FOR BLOGGER-BLOGSPOTHere is the color code table as a reference mate in editing blog templates or design. know way to color code, just click on the buddy tables mate choice color code will then be automatically displayed on the color square columns under the table, in addition to writing "Chosen color code"!
 



































































































































































































 
  Chose The Color Code :

#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF6699
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3366
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000

2
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000

3
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000

4
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000

5
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000
6
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000

7
#465584
#EEF2F7
#3A4F6C
#00D
#434951
#555
#777
#DFE6EF
#345487
#F5F9FD
#3860BB
#BCD0ED
#C2CFDF
#F0F5FA
#D1DCEB
#003
#900
#CCE9FD
#E4EAF2
#4C77B6
#DFE6EF
#EEF2F7

please choose one color code above to choose a suitable color for your blog