Stove
My adventure in discovering wonders of outdoor cooking stoves.
Posts
Customize posts headings and subheadings style with css
Some how my "h2" heading is smaller than my "h3" heading. I am not sure why but it was an easy fix with custom CSS styling. All I need to do is add these codes with the "font-size:18px;" CSS styling I need. For other types of styling, I refer to http://www.w3schools.com . Examples: Headings .post h2{ css style codes } Subheadings .post h3{ css style codes } Minor Headings .post h4{ css style codes } References, Sources and Credits: http://dailybloggiingtips.blogspot.com/2013/07/how-to-customize-blogger-heading-and.html
Customize Blogger's Template Designer to control the "Read More" font, color and background
This is how to add an extra setting entry into Blogger Template Designer to control the jump break text (usually Read More) font, color and it's background properties. All credits goes to betatemplates.com for the tutorial on how to do this. Steps Step 1: Modify Blogger template Go to "Edit HTML" section and prepare for copy and paste some codes. Step 2: Insert the first piece of code Find "Variable definitions" and you will find /* Variable definitions ==================== Replace the text with these codes: /* Variable definitions ==================== <Group description="Read More" selector=".jump-link"> <Variable name="readmore.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 30px 'Courier New', Courier, FreeMono, monospace"/> <Variable name="rm.link.color" description="...
Dynamic meta tags generator for Blogger SEO
This is a cool page that provides you with an interface to easily generates the meta tags use for search engine optimization purpose. All you just need to do is to enter all the necessary details about your website and click generate. Copy the generated code and paste the code into your website source code. References, Sources and Credits: http://htmlmaker.blogspot.com/2013/04/dynamic-meta-tag-to-blogger-for-best-seo.html http://htmlmaker.blogspot.com/p/dynamic-meta-tag-generator.html
Create a Table of Contents for Blogger posts based on atom or rss feeds
This is a Javascript code that generates a table of contents based on your atom or rss feeds. It organizes the post titles based on labels. I use this script for my categories posts. All credits goes to Abu Farhan, the source of this Javascript. References: The Best Table of Contents (TOC) or Sitemap for Blogger Table of Contents for Blogger new style
Blogger post footer elements cannot be rearrange, move or toggle the visibility
Some how my Blogger post footer elements cannot be rearrange, move or even toggle the visibility from the "Blog" widget settings located in the Blogger page elements. I guess this is what happens when you tinker your Blogger template too much and too many times. This is how i manage to fix it. Use "Revert Widget Templates to default" for the "Blog" widget. Note: After you have revert the widget to default, any previous customization done within the widget code will be lost.
Dynamic meta tags for Blogger with labels as keywords
This is how you can dynamically use Blogger's labels as keywords in your keyword meta tag for each blog post. By using labels as the keywords, you can control meta keywords for each of your blog post pages for search engine optimization purposes. I found this method from www.seocentro.com website. This is how you can do it. Replace the <head> code with the codes below: <!--::::::::::: Block1: Output post meta keywords --> <b:if cond='data:blog.pageType == "item"'> <b:section id='meta1' showaddelement='no'> <!-- widget must be a of Type = 'blog' to have posts data exposed, and must have a unique id --> <!-- Empty Includables(functions) to output nothing, You must keep them ): --> <b:widget id='Blog2' locked='no' type='Blog'> <b:includable id='nextprev'/> <b:includable id='backlinks' var='post'/> <b:i...
Directly upload photos to Facebook from webpages
This is the oldest trick in the book of web browsers. How many times you have found yourself downloading an image from the web or internet into your local hard disk and upload the image to your Facebook account so you can share it with your friends? I bet you have been doing this ever since you start sharing photos in Facebook. There is an old trick which i think should work on all modern web browsers where you can get Facebook to fetch the image or photo file from an webpage and automatically upload it to your Facebook account. All this without downloading the image file to your local hard disk first. Important Note: Please do not use this to upload images or photos which do not belong to you. I am only using this to fetch my photos from my Google Picasa Web account for sharing in my Facebook account. Step 1: Copy the image URL of the image or photo by right mouse click on the image and select "Copy image URL". Note: This example is based on Chrome web browser. Different w...
How to center align Adsense Ad in Blogger
To center align your Adsense Ads in your Blogger blog, this is what you need to do with your copied Adsense code to your Blogger HTML layout widget: <center> your Adsense code </center>