Here are some tips and tricks collections for bloggers from my blogger experience:
There are one related post in this blog:
How to quick and easy to insert a table
If you would like to insert table using HTML code, here is an example:
Table 3×2 Example Code
<table> <tbody> <tr> <td>Cell 1.1</td> <td>Cell 1.2</td> </tr> <tr> <td>Cell 2.1</td> <td>Cell 2.2</td> </tr> <tr> <td>Cell 3.1</td> <td>Cell 3.2</td> </tr> </tbody> </table>
Adjust Right Sidebar margin width
Sometimes, the space between main body posts section and right side bar is too wide. You may want to change it from 40px to 10 px. Here is the code I found from here:
Add the code to Blogger Them Designer – Advanced – Add CSS section as show below.
Add youtube Playlist into blogger
1 Generate html code from your youtube playlist
2 Add html code into your Blogger layout
It is best to put code between <center> and </center> to get better center location in your page.
<center><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/videoseries?list=PLg7bL1bMpwPXUwb-BsLKolf42uWa0_nfY” frameborder=”0″ allowfullscreen></iframe></center>
Add Third Party Domain
|GoDaddy CNAME Setting|
|Blogger Domain Settings|
Redirect Blogspot Site from One to Another
During migrating my site from 51sec.blogspot.com to 91sec.blogspot.com, I have found following ways to do redirection from one blogspot site to another. The code will be inserted between <head> and </head>
a. This is current way I am using and found it is best so far.
var oldURL = “51sec.blogspot.com”;
var newURL = “blog.51sec.org”;
var url = location.href;
var newURL = url.replace(document.domain,newURL);
window.location = newURL
b. It will only redirect all posts or pages to the homepage site, not passing url parameters.
<meta content=’0;url=http://91sec.blogspot.com’ http-equiv=’refresh’/>
c. The code works on some of URLs but some were got messed up.
Put images side by side in Blogger’s posts without any codes
- Put both images’ size into small format to make editor easier to preview the layout of both images.
- Move any one of your images up or down to align well with anther one side by side.
- If they did not align very well, you can put your cursor in front of the image, press enter to make it align better.
- last step, change image size back to medium if you want them look bigger than small.
Note: The blogger’s editor view is wrong since the editor size. But you can update and save your changes. It will become normal side by side images in regular view.
Note: If you got three images to align side by side, the process is same as the steps shown above.
Add a code section into your post
1 HTML Code 1
<table style="background-color: black; border-collapse: collapse; border-color: rgb(51, 102, 0); border-style: solid; border-width: 0px; font-family: "helvetica neue","arial","helvetica",sans-serif; width: 100%;"> <tbody> <tr> <td><div style="text-align: justify;"> <span style="color: lime;"><br /></span> <span style="color: lime;">test </span></div> <div style="text-align: justify;"> <span style="color: lime;">john </span></div> </td> </tr> </tbody></table>
2 HTML Code 2
<pre class="putty" style="background-color: rgb(0, 0, 0) !important; color: rgb(0, 255, 0) !important; font-family: "Courier New", monospace !important; font-size: 12px; margin: auto; padding: 2px; text-align: justify; white-space: pre-wrap; width: 650px;"> </pre>
Add a drop down menu to Blogspot
Change Collapse Label to Expanded in New Theme
- Click on “Jump To Widget” and select the Label widget
- The Label widget will have code something like this-
<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’ visible=’true’>
- In the code for the Label Widget, look for “Main” or “collapsible extendable”.
<b:includable id=’main’ var=’this’><details class=’collapsible extendable’>
- Expand this by clicking on the black arrow on the left
- Now look for <b:attr cond=’data:view.isLabelSearch’ name=’open’ value=’open’/>
- Remove- cond=’data:view.isLabelSearch’ from the above line
Add Adsense Code into HTML page
<td align=”left”><div><div style=”float:right;margin-left:5px”>
Add Table of Contents into Posts – mbtTOC
*Step2 Edit theme html