Master Blogging Tips: Blogger Tutorial

How to install a Blogger Template

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white;"><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">Follow this simple guide to install your Favorite Blogger Template:</span><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">1. Click on the Download button and save file to PC (.xml format).</span><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">2. Log in </span><b style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;"><a href="http://www.blogger.com/" style="color: #25698d; margin: 0px; padding: 0px; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px;" target="_blank">Blogger</a></b><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;"> dashboard.</span><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">3. Go to </span><b style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">Template</b><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;"> section → </span><b style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">Backup/Restore</b><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">.</span><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">4. Click on </span><b style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">Download Full Template</b><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;"> to Backup your previous template.</span><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">5. Upload a template from a file on your hard drive by click </span><b style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">Browse</b><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;"> option button.</span><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">6. Click </span><b style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">Upload</b><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;"> button, a confirmation message will appear. Click on </span><b style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">Keep Widgets</b><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">.</span><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">Now you're done.</span><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><br style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;" /><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;">Or watch the clip below if you're still confused:</span></span><br />
<span style="background-color: white;"><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;"><br /></span></span>
<span style="background-color: white;"><span style="color: #113040; font-family: Ubuntu, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19px;"><br /></span></span></div>
<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/qSQKbUIsc7c?feature=player_detailpage" width="640"></iframe></div>

How to install a Blogger Template

Follow this simple guide to install your Favorite Blogger Template: 1. Click on the Download button and save file to PC (.xml format). 2. ...

How to upload and make files downloadable in blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Having trouble uploading a file(such as zip or any other types) on your blogger and make it available on your blog for the readers to download? Blogger does not support file attatchments like zip file. So I look for possible easy way to upload a  file and make it downloadable. You dont have to go to other site 'coz you can do it in google! Here is a quick tutorial on how to do it.</span><br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">1. Go to </span><a href="http://sites.google.com/" style="background-color: white; color: blue; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-decoration: none;" target="_blank">Google sites</a><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">.</span><br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">2. Login with your google account. If you dont have site yet the create one by clicking the</span><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> <span style="color: red;">CREATE</span></span><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> button.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xNImyGH97xt65fabqmwbvM6S5m-Npev0mGIYCV_EdRGnclX3FaxfK54M6S69EWjnI32flsQRJn52KKZgw9SBBl1jxnRfslDH5D3AH0t-VwPJQfkk93mgjhxTw5MAoB3PF0I9aryA4sg/s1600/create.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xNImyGH97xt65fabqmwbvM6S5m-Npev0mGIYCV_EdRGnclX3FaxfK54M6S69EWjnI32flsQRJn52KKZgw9SBBl1jxnRfslDH5D3AH0t-VwPJQfkk93mgjhxTw5MAoB3PF0I9aryA4sg/s1600/create.JPG" width="640" /></a></div>
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">3. Now choose a template then fill up the name of your site, the site location and the captcha then click </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">CREATE</span><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">.</span><br />
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2__lC6-kLtFggh9f0uhPYMcdhFc8o4D_rBDV7fmPXlKLgc49urKQVyKEvBrgWwClW3wHTnaCmURPl5JmC5TjiZKBBkiQenpYROt2csV18JlvevD_Orf0kscWO5E1T2ZaWorFtAUf-ydE/s1600/fillup.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="464" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2__lC6-kLtFggh9f0uhPYMcdhFc8o4D_rBDV7fmPXlKLgc49urKQVyKEvBrgWwClW3wHTnaCmURPl5JmC5TjiZKBBkiQenpYROt2csV18JlvevD_Orf0kscWO5E1T2ZaWorFtAUf-ydE/s1600/fillup.JPG" width="640" /></a></div>
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">4. Now if you're on your site that you had created, click on </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Downloads</span><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> and upload the zip file.</span><br />
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">5. After you upload the file right click the </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">download</span><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"> link and click </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Copy Link location</span><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">.</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMWcvnX1kxDvnsUdewDahYAiH4juequbtmj099HYGgMQZgLQSfaK7g7QDDML6xGFwmDaFtug4-kuRLtfhXnQvcgcNP-R_m989z4dD3lp3rz2UTRy1nob6eWUwsNN-ylkp86haxPzARotY/s1600/link.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="468" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMWcvnX1kxDvnsUdewDahYAiH4juequbtmj099HYGgMQZgLQSfaK7g7QDDML6xGFwmDaFtug4-kuRLtfhXnQvcgcNP-R_m989z4dD3lp3rz2UTRy1nob6eWUwsNN-ylkp86haxPzARotY/s1600/link.JPG" width="640" /></a></div>
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><br /></span>
<span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">6. Now you can use the link on your blogger post by adding a link to a text where readers would click</span><br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">7. Now publish your post and try checking by clicking the text that you put a link.</span><br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><br style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;" /><span style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">Your Done! Now you have download link of your zip file.</span></div>

How to upload and make files downloadable in blogger

Having trouble uploading a file(such as zip or any other types) on your blogger and make it available on your blog for the readers to downl...

Multi Tab Widget For Blogger/Blogspot Blogs -Updated

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3AXTIvjIYFN1XkkaGXWxKVBpxcLge1hYL3dXhPA6ufbtPMzuP5ERU8FnHlN9JJqMCj-F8Mq2uL66xQHXoujyGPuvoELZl6JUyfHfm9CugMdBoEUBGRgwKc3euNGTnvjFXV_zmlUEToss/s1600/multi-tab-widget-for-blogge%5B14%5D.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3AXTIvjIYFN1XkkaGXWxKVBpxcLge1hYL3dXhPA6ufbtPMzuP5ERU8FnHlN9JJqMCj-F8Mq2uL66xQHXoujyGPuvoELZl6JUyfHfm9CugMdBoEUBGRgwKc3euNGTnvjFXV_zmlUEToss/s1600/multi-tab-widget-for-blogge%5B14%5D.gif" /></a></div>
<div align="justify" style="color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<div style="background-color: white;">
Multi tab Widget is a must widget for every blog may that be wordpress hosted blog or Blogspot/Blogger. It helps to decrease the load time of a blog by combining three or more than three widgets into one! .You might have seen this widget on every blog and even on my blog (look at the sidebar) but the question is how do you add it? Well If you go and search in Google on how to add a multi tab widget to your blog you will land on various blogs with several tutorials but believe it or not, disappointment is what you will get in return. Now why is that?</div>
<div style="background-color: white;">
<br /></div>
<div style="background-color: white;">
<br /></div>
<div style="text-align: center;">
<span style="background-color: white;"><a href="http://www.mybloggertricks.com/2011/01/add-wordpress-style-menu-tabs-widget-to.html" style="color: #289728; outline: none; text-align: start; text-decoration: none;" target="_blank">Click here to Add a Wordpress Style Menu Tabbed Widget</a><span style="text-align: start;"> </span></span></div>
</div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div align="justify">
This widget looks cool only if coded with CSS and JavaScript. Several blogs share different tutorials but unfortunately most of these tutorials are either very difficult to understand or they are written in a technical language that a newbie can’t understand. Moreover the codes that they offer are pretty lengthy which increase the load time of your homepage and often the widget doesn’t seem to work in browsers like Internet Explorer. And the worst part is that some bloggers who share this trick often add their blog link to the widget code and when you view that widget in your blog, at the bottom of that widget you will find this “ <strong>Widget by XYZ.com</strong>” or “<strong>Grab This Widget</strong>”. This link is surely injustice with the reader. In short give preference to anything which is easy to understand, interesting and which may give a professional look to your blog not a <strong>Grab this widget</strong> look.</div>
<div align="justify">
Now how come my widget be very different. As I have mentioned ,t I am not an HTML or JavaScript expert but I have learnt the art of editing my template through trial and error. I read blogs day and night and when some blog catch my attention I start playing with its template via its Source File, which shows all their template coding in HTML, XML and CSS Language. Hence I have stolen many hidden and secret codes :D and thus I am ready to share those codes with you. Don’t worry I will never add a <strong>Grab this widget</strong>  link to any widget that I share.</div>
<div align="center" style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; padding: 3px;">
<span style="color: red; font-size: small;"><strong>UPDATE:-</strong></span></div>
<div align="justify">
<span style="color: red;">Most of you complained that the tabs are not working/clickable. I was amazed too because this widget was working perfectly alright in all my test blogs. Then how come its not working in your blogs? Well the answer was simple than I could imagine.</span></div>
<div align="justify">
<span style="color: red;">This widget uses a JavaScript which is responsible for making the tabs clickable. I saved this widget in Google sites and link it to this widget. This was the mistake that I commit. Google sites offers limited bandwidth and is far slow to respond than you can imagine. Hence when you guys would add this widget to your blog, the JavaScript would not load, as a result leading to static tabs.</span></div>
<div align="justify">
<span style="color: red;">Fortunately I have updated this post with all necessary steps to take. You will have to add the JavaScript directly to your blogger templates. Doing this will improve the widget performance and will also reduce your page load time. This update will solve all your problems!</span></div>
<div align="justify">
<span style="color: red;">Follow the Steps Below,</span></div>
<span class="fullpost" style="background-color: white; color: #333333; display: inline; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"></span><br />
<br />
<span style="line-height: 1.4em;">Step 1 : Go To </span><strong style="line-height: 1.4em;">Blogger</strong><span style="line-height: 1.4em;"> ></span><strong style="line-height: 1.4em;"> Layout</strong><span style="line-height: 1.4em;"> ></span><strong style="line-height: 1.4em;"> Edit HTML</strong><br />
<span style="line-height: 1.4em;"><br /></span>
<div>
<span style="line-height: 1.4em;">Step 2: Search for  </span><span style="color: green; line-height: 1.4em;"><strong></head>              <span style="color: black; font-size: xx-small;">(Tip: Use Browser Search Box. Press Ctrl + F )</span></strong></span><br />
<span style="line-height: 22.390625px;"><br /></span>    And Just above <span style="color: green;"><strong></head></strong></span> paste the code below,<br />
<div align="justify">
<br /></div>
<div align="justify">
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: left;">
<script type='text/javascript'></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: left;">
//<![CDATA[</div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: left;">
function tabtampil_oom(TPID, id)<br />
{<br />
  var Tabtampil = document.getElementById(TPID);<br />
  var TTs = Tabtampil.firstChild;<br />
  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;<br />
  var TT = TTs.firstChild;<br />
  var i   = 0;<br />
  do<br />
  {<br />
    if (TT.tagName == "A")<br />
    {<br />
      i++;<br />
      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";<br />
      TT.className = (i == id) ? "Active" : "";<br />
      TT.blur();<br />
    }<br />
  }<br />
  while (TT = TT.nextSibling);<br />
  var Halamans = Tabtampil.firstChild;<br />
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;<br />
  var Halaman = Halamans.firstChild;<br />
  var i    = 0;<br />
  do<br />
  {<br />
    if (Halaman.className == 'Halaman')<br />
    {<br />
      i++;<br />
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";<br />
      Halaman.style.overflow = "auto";<br />
      Halaman.style.display  = (i == id) ? 'block' : 'none';<br />
    }<br />
  }<br />
  while (Halaman = Halaman.nextSibling);<br />
}<br />
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);<br />
}<br />
function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);<br />
document.write('');}</div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: left;">
//]]></div>
<div style="color: #333333; font-family: Verdana, arial; font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: left;">
</script><br />
<span style="font-size: 13px; line-height: 1.4em;"><br /></span>
<span style="font-size: 13px; line-height: 1.4em;">Step 3: Save your template</span></div>
</div>
<div>
<div align="justify" style="color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 1.4em;">
<h4 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; line-height: 20.796875px; padding: 3px; text-align: start;">
<span style="color: #0080ff;">Adding the code for  Multi Tab widget to <strong>HTML/JavaScript</strong> widget</span></h4>
<div align="justify" style="line-height: 20.796875px;">
Step 4: The Code for Our Multi Tab Widget looks like this,</div>
<div align="justify" style="line-height: 20.796875px;">
<br /></div>
<div style="font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: start;">
<style type="text/css"><br />
div.TabTampil div.TTs<br />
{height: 24px; overflow: hidden; }<br />
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active<br />
{ background-color: <span style="color: magenta; font-size: small;">#eee</span>; }<br />
div.TabTampil div.Halamans<br />
{ clear: both; border: 1px solid <span style="color: blue; font-size: small;">#fff</span>; overflow: hidden; background-color:<span style="color: blue; font-size: small;">#ffffff</span>;}<br />
div.TabTampil div.Halamans div.Halaman<br />
{ height: 100%; padding: 0px; overflow: hidden; }<br />
div.TabTampil div.Halamans div.Halaman div.Alas<br />
{ padding: 3px 5px; }<br />
div.TabTampil div.TTs a<br />
{ border-left:1px solid <span style="color: green; font-size: small;">#eee</span>; border-right:1px solid <span style="color: green; font-size: small;">#eee</span>; border-top:1px solid<span style="color: green; font-size: small;">#eee</span>; border-bottom:0px solid <span style="color: green; font-size: small;">#eee</span>; float: left;<br />
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;<br />
font-size: 11px; font-weight: 900; color: <span style="color: black; font-size: small;">#000000</span>}<br />
</style><br />
<form action="tabtampil.html" method="get"><br />
<div id="TabTampil" class="TabTampil"><br />
<div style="width: 300px;" class="TTs"> <a><strong>Tab 1</strong></a> <a><strong>Tab 2</strong></a> <a><strong>Tab 3</strong></a></div><br />
<div style="width: 300px; height: 300px;" class="Halamans"><br />
<div class="Halaman"><br />
<div class="Alas"><br />
<br/> </div>
<div style="font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: start;">
<strong>Tab 1 content goes here</strong></div>
<div style="font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: start;">
</div><br />
</div><br />
<div class="Halaman"><br />
<div class="Alas"><br />
<br/></div>
<div style="font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: start;">
<br />
<strong>Tab 2 content goes here</strong></div>
<div style="font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: start;">
<br />
</div><br />
</div><br />
<div class="Halaman"><br />
<div class="Alas"><br />
<br/></div>
<div style="font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: start;">
<br />
<strong>Tab 3 content goes here</strong></div>
<div style="font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: start;">
</div><br />
</div><br />
</div><br />
</div><br />
</div></form></div>
<div style="font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: start;">
<script type="text/javascript">tabtampil_inisial('TabTampil');</script></div>
<div style="font-size: 12px; line-height: 15.203125px; padding: 0px 0px 15px; text-align: start;">
<br /></div>
<div align="justify" style="line-height: 20.796875px;">
<span style="color: #0080ff; font-size: small;"><strong>Things To Note:</strong></span></div>
<div align="justify" style="line-height: 20.796875px;">
<span style="color: magenta; font-size: small;"><strong>#eee</strong></span> : This is the background colour of the Tabs. The Default one is grey. If you want to change it to a different colour of your choice then use <a href="http://www.mybloggertricks.com/2009/10/embeddable-css-color-chart-table-for.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">MBT Embeddable Colour Chart</a></div>
<div align="justify" style="line-height: 20.796875px;">
<span style="color: blue; font-size: small;"><strong>#fff </strong></span>:  This is the colour of the border of your multi tab widget. The default one is white you can customize it to a colour of your choice using the same colour chart mentioned above.</div>
<div align="justify" style="line-height: 20.796875px;">
<span style="color: blue; font-size: small;"><strong>#ffffff</strong> <span style="color: black; font-size: x-small;">: This is the background colour of the main body of your widget. This is where you will add content to the widget. The default one is white. Use <a href="http://www.mybloggertricks.com/2009/10/embeddable-css-color-chart-table-for.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">MBT Colour Chart</a> if you wish to use a different colour.</span></span></div>
<div align="justify" style="line-height: 20.796875px;">
<span style="color: green; font-size: small;"><strong>#eee</strong> <span style="font-size: x-small;"><span style="color: black;">:<strong> </strong>This is the colour of the borders around those rectangular tabs. The default one is grey. Use <a href="http://www.mybloggertricks.com/2009/10/embeddable-css-color-chart-table-for.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">MBT Colour Chart</a> if you wish to use a different colour.</span></span></span></div>
<div align="justify" style="line-height: 20.796875px;">
<span style="color: black; font-size: small;"><strong>#000000</strong></span> : This is the colour of the text/font that you will write to name your tabs. In other words, it’s the colour of your tab titles. The default one is black.</div>
<div align="justify" style="line-height: 20.796875px;">
<strong><span style="color: green; font-size: small;">Replace these with your tab titles</span></strong></div>
<div align="justify" style="line-height: 20.796875px;">
<strong>Tab 1 , <strong>Tab 2</strong>  , <strong>Tab 3</strong></strong></div>
<div align="justify" style="line-height: 20.796875px;">
<strong><span style="color: green; font-size: small;">Replace these with your widget codes.</span></strong></div>
<div align="justify" style="line-height: 20.796875px;">
<strong><span style="color: red; font-size: small;"></span></strong></div>
<div align="justify" style="line-height: 20.796875px;">
<strong>Tab 1 content goes here , <strong>Tab 2 content goes here</strong> ,</strong>  <strong>Tab 3 content goes here</strong></div>
<div align="justify" style="line-height: 20.796875px;">
<span style="color: red; font-size: small;"><span style="color: black; font-size: x-small;">Here goes the codes of your content/widgets, which can be your recent comments widget, recent posts widget, any written text, a picture etc. </span></span><span style="color: red; font-size: small;"><span style="color: black; font-size: x-small;">For example, to add a recent comments widget to the first tab, name <strong>Tab 1</strong> as Comments and replace <strong>Tab 1 content goes here </strong>with the HTML code of your recent comments widget.</span></span></div>
<div align="justify" style="line-height: 20.796875px;">
<span style="color: #0080ff; font-size: small;"><strong><br /></strong></span>
<span style="color: #0080ff; font-size: small;"><strong>Adding the Multi Tab Widget To your Blog</strong></span></div>
<div align="justify" style="line-height: 20.796875px;">
<span style="color: red; font-size: small;"><span style="color: black; font-size: x-small;"><br /></span></span>
<span style="color: red; font-size: small;"><span style="color: black; font-size: x-small;">After you have customized the code, do the following,</span></span></div>
<ul style="line-height: 20.796875px; list-style: none; text-align: start;">
<li style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
<span style="color: black; font-size: x-small;">Log into your blogger account</span></div>
</li>
<li style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
<span style="color: black; font-size: x-small;">Go to <strong>Layout</strong> > <strong>Page Elements</strong></span></div>
</li>
</ul>
<div align="justify" style="line-height: 20.796875px;">
<img alt="Blogger Layout Page Elements" border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1ckDMnqvVbE1uhcspbha6Eq57sNLJKRwqbaets9v_HqkeOOv7UCHrBNxyHrmYJSPhS381Xyp8RRFYJz-9Uf-4sgQM99NbnHi52aVZJkSrU8avGM8ZmHmj0SUJh4b6x6jlOtVBiZXPx8s/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 10px;" title="Blogger Layout Page Elements" width="504" /></div>
<ul style="line-height: 20.796875px; list-style: none; text-align: start;">
<li style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
<span style="color: red; font-size: small;"><strong> </strong><span style="color: black; font-size: x-small;">Click on <strong>Add a Gadget</strong></span></span></div>
</li>
</ul>
<div align="justify" style="line-height: 20.796875px;">
<img alt="add-a-gadget" border="0" height="46" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOg6378BJpiVZtPuMBqoqiDlpKNR70LgMvvockc-RPGKeknq1oSyXT7Y71fuR2V4tLeuJwqLYYVZQI7kwAn27rtdbnsr2OguVC5tfFtcYWs890HEm5sm57BcvoaOSyf-STRNsOu95AP-c/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 10px;" title="add-a-gadget" width="225" /></div>
<ul style="line-height: 20.796875px; list-style: none; text-align: start;">
<li style="background-attachment: scroll; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Then Choose <strong>HTML/JavaScript</strong> Widget from the widget list that blogger provides</li>
</ul>
<div style="line-height: 20.796875px; text-align: start;">
<img alt="htmljavascript widget blogger" border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndKRrApP0JcYpnBgjNVEWfXyrl2-DiNdJDnb4JN6LtCUreOnlnviJ3T2C78wxD_CpWAxKfoqvNE7svrA631CfiLGYCvNJrcRrVUTM5t_GSeAeFXeCGTHUC5rlVBfTv1Nym-6pGgkR2Cs/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 10px;" title="htmljavascript widget blogger" width="438" /></div>
<div style="line-height: 20.796875px; text-align: start;">
Now paste your customized code into this widget by leaving the title empty. Hit <strong>Save</strong> and You are Done! Check your blog to see the new dress :)</div>
<div align="center" style="line-height: 20.796875px;">
<span style="color: #0080ff;"><strong>That’s All!</strong></span></div>
<div style="line-height: 20.796875px; text-align: start;">
<span style="color: black;">Feel free to ask or suggest. Your questions and suggestions are the only favour I get in return.</span><br />
<span style="color: black;"><br /></span></div>
</div>
</div>
</div>
</div>

Multi Tab Widget For Blogger/Blogspot Blogs -Updated

Multi tab Widget is a must widget for every blog may that be wordpress hosted blog or Blogspot/Blogger. It helps to decrease the load t...

Facebook comments Box Instead of Blogger Comments Form

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5wpkzOGo7Z9CPp_La1vNh8voKwhCXG0tj7kF3_EqYOWGWAnLYT1RomPKVi6ajiKafFjCNFynmm7IKJGszJc3gYl075b8iIJ7y5AS02yJARxy1FGBPIpPYCmE9bw8yaJXj1mNP6-YPNQ/s1600/facebook-commnets-box%5B4%5D.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5wpkzOGo7Z9CPp_La1vNh8voKwhCXG0tj7kF3_EqYOWGWAnLYT1RomPKVi6ajiKafFjCNFynmm7IKJGszJc3gYl075b8iIJ7y5AS02yJARxy1FGBPIpPYCmE9bw8yaJXj1mNP6-YPNQ/s1600/facebook-commnets-box%5B4%5D.gif" /></a></div>
<h3 style="text-align: left;">
<span style="font-weight: normal;"><span style="font-size: small;"><span style="background-color: white; color: #333333; font-family: Verdana, arial; line-height: 20.796875px; text-align: justify;">The previous post on </span><a href="http://www.mybloggertricks.com/2011/06/add-facebook-comments-box-to-blogger.html" style="background-color: white; color: #289728; font-family: Verdana, arial; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">Facebook comments box</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; line-height: 20.796875px; text-align: justify;"> did not replace your blogger comment form but if you wish to completely remove the blogger form and use this new plugin then steps are even more simple. However I may assure you one important thing here. I am soon going to publish a script that will automatically count and display Facebook and blogger comments beautifully and will show only one form at a time. For the time being apply this new trick.</span></span></span></h3>
<div>
<span style="font-weight: normal;"><span style="font-size: small;"><span style="background-color: white; color: #333333; font-family: Verdana, arial; line-height: 20.796875px; text-align: justify;"><br /></span></span></span></div>
<div>
<h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;">
Replace Blogger Comments Form With FB Comments Box</h3>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
All the steps are exactly the same as mentioned in the earlier tutorial except step#7</div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
1.  Instead of searching for this code,</div>
</div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><b:includable id='comment-form' var='post'></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Search for this code,</div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><data:post.body/></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
2.  Just after it, paste the same code we used earlier as shown below,</div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><b:if cond='data:blog.pageType == &quot;item&quot;'> </span><br style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;" /><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> </span><br style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;" /><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><div> <fb:comments  colorscheme='</span><b style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">light</b><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' </span><b style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">width='520'</b><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">/></div> </span><br style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;" /><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; </span><b style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">width:510px</b><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div> </span><br style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;" /><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"></b:if></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<ul style="list-style: none; text-align: left;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
If you want to use the dark scheme then simply replace <b>light </b>with <b>dark</b></div>
</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
To change the Comments box size, change this value <b>width='520'</b></div>
</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
To change the footer credits size, change this value <b>width:510px</b></div>
</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to <b>width='600'</b> then set footer-size to <b>width:590px</b></div>
</li>
</ul>
<div align="justify">
     3.  Save your template</div>
<div align="justify">
<br /></div>
<h3 align="justify" style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px;">
Hide or Pop-up Blogger Comment Form</h3>
<div align="justify">
Here you have two options. Either you can,</div>
<ol style="text-align: left;">
<li><div align="justify">
Hide the comments box but not the comments. The box will appear only when visitors will click the <u>Post comment</u> link. or</div>
</li>
<li><div align="justify">
Hide both Blogger comments and comments box</div>
</li>
</ol>
<div align="justify">
<br /></div>
<div align="justify">
<b><u>For the first option:</u></b></div>
<div align="justify">
A pop-up link will display both Facebook and blogger comments but will hide the Blogger comment form as shown below</div>
<div align="justify">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3d8E3DZAcGqkg_xNtECtJipDV082lWpDe6imOGpfZphHgsYa2IyZ_-fQy4ps4aON0IuQWKypGIec5v9sEfBfw57mAcOHE21FAhhM0Z6Pq-LataVOX5FBRoyEhNRHkyP2C-OJhz_dVe4/s1600/FACEBOOK-COMMENTS-FORM%5B3%5D.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3d8E3DZAcGqkg_xNtECtJipDV082lWpDe6imOGpfZphHgsYa2IyZ_-fQy4ps4aON0IuQWKypGIec5v9sEfBfw57mAcOHE21FAhhM0Z6Pq-LataVOX5FBRoyEhNRHkyP2C-OJhz_dVe4/s1600/FACEBOOK-COMMENTS-FORM%5B3%5D.gif" /></a></div>
<div align="justify">
<br /></div>
<div align="justify">
<div align="justify">
To do this go to <b>Blogger > Settings > Comments</b>   and in the <b>comment form placement option</b> choose the pop-up option as shown below,</div>
<div align="justify">
</div>
<div align="justify">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74GT4Do7JC_3FqAyA6CAu1rAuItTapMyRTizee-4Q9nHOojgnle0-nEU-nts0XQOWbbbH4aEz3X7VDQn2j1HFVsS9-_UAQDOxoCBHb0V5EH0K3H2j7k78r7rkaJgINW6WwORBu1tVSVI/s1600/image%5B27%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74GT4Do7JC_3FqAyA6CAu1rAuItTapMyRTizee-4Q9nHOojgnle0-nEU-nts0XQOWbbbH4aEz3X7VDQn2j1HFVsS9-_UAQDOxoCBHb0V5EH0K3H2j7k78r7rkaJgINW6WwORBu1tVSVI/s1600/image%5B27%5D.png" /></a></div>
<div align="justify">
<br /></div>
<div align="justify">
Save and you are done!</div>
<div align="justify">
<b><u>For The Second Option:</u></b></div>
<div align="justify">
If you wish to hide both blogger comments and the comment box? In that case, set<b>comments</b> to <b>hide</b></div>
<div align="justify">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxG95DLjpShCr6dqiBosSq_-MqRNaMw4mS69ZZ3wcK_2v_B_uUUCCjKRMoLzYKR5JT0QrNWGA587kKWbY9ln5-fg_i65QnToHwUnz68zAiTY5FGBNseIY3MY-7W1W-NqXY0yxV_8prxc/s1600/image%5B49%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxG95DLjpShCr6dqiBosSq_-MqRNaMw4mS69ZZ3wcK_2v_B_uUUCCjKRMoLzYKR5JT0QrNWGA587kKWbY9ln5-fg_i65QnToHwUnz68zAiTY5FGBNseIY3MY-7W1W-NqXY0yxV_8prxc/s1600/image%5B49%5D.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div align="justify">
As mentioned by Blogger Hiding the comments will not delete them but temporarily hide them from visitors.</div>
<div align="justify">
Hit save and you are done again!</div>
<h3 align="justify" style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px;">
What to Do Hide or Popup the form?</h3>
<div align="justify">
The best SEO and productive advise that I can give is that you may hide the Blogger comment box only but you must display blogger comments and give users the chance to comment with any platform they may like. In short <b><span style="color: green;">the popup option is the best</span></b>. Blogger comments are crawled by search engines and they are an important part of your content so its better that you don't hide them.</div>
<div align="justify">
With coming days I will come up with more tweaks related to this brilliant traffic gifting Facebook plugin and will try to make it more blending with some customization tips.</div>
<div align="justify">
You must know:</div>
<ul style="list-style: none; text-align: left;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
7 <a href="http://www.mybloggertricks.com/2011/06/10-advantages-of-using-facebook.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">advantages of facebook</a> comments Form</div>
</li>
</ul>
<div align="justify">
<b><br /></b></div>
</div>
</div>
</div>

Facebook comments Box Instead of Blogger Comments Form

The previous post on Facebook comments box did not replace your blogger comment form but if you wish to completely remove the blogger ...

How to Add Multi-Tabbed Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
 <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9sMfRZKULgin2fPsxeok2UFx3SujhD6k2mNqpYTiCaeaH10DZaNmnfQADccgU2F_VZQsP6GiGgWxkm1ZTcdoQPqDKwYsJTXOgsKO2WfY3-tbIR43TVfj2v-kXRbDRWr4O9xrCE11J0VU/s1600/sfas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9sMfRZKULgin2fPsxeok2UFx3SujhD6k2mNqpYTiCaeaH10DZaNmnfQADccgU2F_VZQsP6GiGgWxkm1ZTcdoQPqDKwYsJTXOgsKO2WfY3-tbIR43TVfj2v-kXRbDRWr4O9xrCE11J0VU/s1600/sfas.png" width="228" /></a></div>
<h3 style="text-align: left;">
<i style="font-weight: normal;">In this Tutorial you are going to learn how to add
Multi-Tabbed Widget For Blogger. This is another important blogger widget for  blogger that it both space saving and efficently user friendly.If you installed
multiple tabs widget thenn you don't need to add these three widget 'popular post' 'archieve', and 'recent comments' differently.Now follow the steps below to add this widget.</i></h3>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3>
<br /></h3>
<h3 style="text-align: center;">
<span style="background-color: #38761d;">
Add Multi-Tabbed Widget For Blogger</span></h3>
<div class="MsoNormal">
<br /></div>
<h3>
<span style="background-color: #38761d;">
Step 1</span> <i style="font-weight: normal;">Go to Blogger Dashboard.</i></h3>
<h3>
<br /></h3>
<h3>
<br /></h3>
<h3>
<span style="background-color: #38761d;">
Step 2</span> <i style="font-weight: normal;">Go to Layout and Click on Add A Gadget as shown in below
picture.</i></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuvX4s85P3GsEnp7-ag6vsZVW4MG_EwOivERzxyD2azwCOH8YNRfa9BenIL-UI4ezNVqfd7g1aPvZHtVHFRdOCVL83rAwguCHz0rpRQ01Y_hE_X2eATivyQNIrz-KgOVDHD_X08oEgi0/s1600/add-a-gadget-screen-.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuvX4s85P3GsEnp7-ag6vsZVW4MG_EwOivERzxyD2azwCOH8YNRfa9BenIL-UI4ezNVqfd7g1aPvZHtVHFRdOCVL83rAwguCHz0rpRQ01Y_hE_X2eATivyQNIrz-KgOVDHD_X08oEgi0/s1600/add-a-gadget-screen-.PNG" width="400" /></a></div>
<div class="MsoNormal">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3>
<br /></h3>
<h3>
<span style="background-color: #38761d;">
Step 3</span> <i style="font-weight: normal;">Add HTML/JavaScripts as shown in below picture.</i></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eZnj_ydZ8_Ce0NfmTJ_ED5-k7yeFbIHmfnW_D7MQUD6yd09P73XWbRUgMGF0G4jxm0L7i9QmIOTy6NXvl0luZLhwB3fTRjzCYsvcO3uuqe5uMXGAdr4JhID9lAwOBZ_OmUx-gR31NXU/s1600/Add+Feedback+button+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eZnj_ydZ8_Ce0NfmTJ_ED5-k7yeFbIHmfnW_D7MQUD6yd09P73XWbRUgMGF0G4jxm0L7i9QmIOTy6NXvl0luZLhwB3fTRjzCYsvcO3uuqe5uMXGAdr4JhID9lAwOBZ_OmUx-gR31NXU/s1600/Add+Feedback+button+2.png" width="400" /></a></div>
<div class="MsoNormal">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3>
<span style="background-color: #38761d;">
Step 4</span> <i style="font-weight: normal;">Copy and Paste below code in box:</i></h3>
<blockquote class="tr_bq">
<script type='text/javascript'><br />
//<![CDATA[<br />
function haakblog_oom(NBTID, id)<br />
{<br />
  var haakblog = document.getElementById(NBTID);<br />
  var NBTs = haakblog.firstChild;<br />
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;<br />
  var NBT = NBTs.firstChild;<br />
  var i   = 0;<br />
  do<br />
  {<br />
    if (NBT.tagName == "A")<br />
    {<br />
      i++;<br />
      NBT.href      = "javascript:haakblog_ubah('"+NBTID+"', "+i+");";<br />
      NBT.className = (i == id) ? "Active" : "";<br />
      NBT.blur();<br />
    }<br />
  }<br />
  while (NBT = NBT.nextSibling);<br />
  var Halamans = haakblog.firstChild;<br />
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;<br />
  var Halaman = Halamans.firstChild;<br />
  var i    = 0;<br />
  do<br />
  {<br />
    if (Halaman.className == 'Halaman')<br />
    {<br />
      i++;<br />
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";<br />
      Halaman.style.overflow = "auto";<br />
      Halaman.style.display  = (i == id) ? 'block' : 'none';<br />
    }<br />
  }<br />
  while (Halaman = Halaman.nextSibling);<br />
}<br />
function haakblog_ubah(NBTID, id) { haakblog_oom(NBTID, id);<br />
}<br />
function haakblog_inisial(NBTID) { haakblog_oom(NBTID,  1);<br />
document.write('');}<br />
//]]><br />
</script><br />
<style><br />
div.haakblog div.NBTs {<br />
height: 24px;<br />
overflow: hidden;<br />
}<br />
div.haakblog div.NBTs a:hover, div.haakblog div.NBTs a.Active {<br />
background-color: #eee;<br />
}<br />
div.haakblog div.Halamans {<br />
clear: both;<br />
border: 2px solid #f4f4f4;<br />
overflow: hidden;<br />
background-color: #<span style="color: red;">ffffff</span>;<br />
}<br />
div.haakblog div.Halamans div.Halaman {<br />
height: 100%; padding: 0px;<br />
overflow: hidden;<br />
}<br />
div.haakblog div.Halamans div.Halaman div.Alas {<br />
padding: 3px 5px;<br />
}<br />
div.haakblog div.NBTs a {<br />
border-left:1px solid #eee;<br />
border-right:1px solid #eee;<br />
border-top:1px solid #eee;<br />
border-boNBTom:0px solid #eee;<br />
float: left;<br />
display: block;<br />
width: 95px;<br />
text-align: center;<br />
vertical-align: middle;<br />
height: 24px;<br />
padding-top: 3px;<br />
text-decoration: none;<br />
font-family: "Arial", Serif;<br />
font-size: 11px;<br />
font-weight: 900;<br />
color: #000000<br />
}<br />
</style><br />
<form action="haakblog.html" method="get"><br />
<div id="haakblog" class="haakblog"><br />
<div style="width: 300px;" class="NBTs"> <a><span style="color: red;">Tab 1 Title</span></a> <a><span style="color: red;">Tab 2  Title</span></a> <a><span style="color: red;">Tab 3  Title</span></a></div><br />
<div style="<span style="color: red;">width: 300px</span>; <span style="color: red;">height: 300px</span>;" class="Halamans"><br />
<div class="Halaman"><br />
<div class="Alas"><br />
<br/><br />
<span style="color: red;">Tab 1 content goes here</span><br />
</div><br />
</div><br />
<div class="Halaman"><br />
<div class="Alas"><br />
<br/><br />
<span style="color: red;">Tab 2 content goes here</span><br />
</div><br />
</div><br />
<div class="Halaman"><br />
<div class="Alas"><br />
<br/><br />
<span style="color: red;">Tab 3 content goes here</span><br />
</div><br />
</div><br />
</div><br />
<small><a style='margin-left:10px;align:right;' 
href='<a href="http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.html"><span style="color: black;">http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.htm</span>l</a>'
 target='_blank'>Multi Tabbed Widget</a> | <a 
href='<a href="http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.html"><span style="color: black;">http://masterbloggingtips.blogspot.com</span></a>' 
target='_blank'>Blogger</a></small><br />
</div><br />
</div></form><br />
<script type="text/javascript">haakblog_inisial('haakblog');</script></blockquote>
<b>Tips</b>:<br />
 1. Change your background colours with change <span style="color: red;">#FFFFFF</span> with your background colours.<br />
2. Change Tab 1 title, Tab 2 title, Tab 3 Title as your tabs that you shown.<br />
3. Change <span style="color: red;">Width</span> and <span style="color: red;">Hight</span> as your requirement<br />
4. <span style="color: red;">Tab 1 content goes here</span>, <span style="color: red;">Tab 2 content goes here</span>,<span style="color: red;"> </span><span style="color: red;">Tab 3 content goes here </span>with your widget code as you want to show in multiple tabbed.<br />
<br />
<h3>
<span style="background-color: #38761d;">
Step 5</span> <i style="font-weight: normal;">Click on Save.</i></h3>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">Now you'r done.If you have any problem or question feel free to write it on the comment box or email me at larrimoreashley@gmail.com.</span></div>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;"><br /></span></div>
<div style="text-align: right;">
<span style="background-color: #38761d; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">By Ashley Larrimore</span></div>
</div>

How to Add Multi-Tabbed Widget For Blogger

In this Tutorial you are going to learn how to add Multi-Tabbed Widget For Blogger. This is another important blogger widget for blo...

How to Add Facebook Share Button To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhyphenhyphenkeQ5XwlOzLHZ40550VNgsp0U-SJclA5kkFKgb5p21TDgquifYVnfW4H3keKlUFJaGI0w34EdPymp5x71b4FrwqSFRtin5AIe2pqcTYQXtvIyPR-e9rWm2hHkfXVSo-8FICTjybVWI/s1600/facebook_share.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhyphenhyphenkeQ5XwlOzLHZ40550VNgsp0U-SJclA5kkFKgb5p21TDgquifYVnfW4H3keKlUFJaGI0w34EdPymp5x71b4FrwqSFRtin5AIe2pqcTYQXtvIyPR-e9rWm2hHkfXVSo-8FICTjybVWI/s1600/facebook_share.jpg" width="200" /></a></div>
<div class="MsoNormal">
This is a step by step tutorial to explaining  how to
add facebook share button to blogger blog automatically under every blog post.
In wordpress it’s very easy to add this because you need installed only
facebook share plugin on your blog but in blogger you have to add it manually. So if you
want to add Facebook share button on blogger then the steps below  to add
this.</div>
<h2>
<br /></h2>
<h2 style="text-align: center;">
<span style="background-color: #38761d;">
Add Facebook Share Button to Blogger</span></h2>
<div class="MsoNormal">
<br /></div>
<h3>
<span style="background-color: #38761d;">
Step 1</span> <span style="font-weight: normal;"><i>Login into Blogger Dashboard and Go to Template then click
on Edit HTML as shown in below picture.</i></span></h3>
<div class="MsoNormal">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxxdEaKeSVmbNzFnp_2zARoAYGiWBBnOhCzAsMVikp7H-KdlncIAEWuXXdu2dnlJ2AKFKBd0aFFLNsX1yicmsLB4ag6OgCSgVhUpW-6WrO5k5d5DbpITtIcD8ilSMG6Wi2CiMv2zIvKY/s1600/Blogger-edit-html_thumb%255B1%255D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaxxdEaKeSVmbNzFnp_2zARoAYGiWBBnOhCzAsMVikp7H-KdlncIAEWuXXdu2dnlJ2AKFKBd0aFFLNsX1yicmsLB4ag6OgCSgVhUpW-6WrO5k5d5DbpITtIcD8ilSMG6Wi2CiMv2zIvKY/s1600/Blogger-edit-html_thumb%255B1%255D.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="background-color: #38761d;"><h3>
<span style="background-color: #38761d;"><br /></span></h3>
Step 2</span> <i style="font-weight: normal;">Click on Expand Widget Templates as shown in below picture.</i></h3>
<div class="MsoNormal">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajnooRdSqZ8YnHQ_SkyH01iJpB9r7nC9As2PJ2tdmb5JcMXh-707G3b1jh4iwQzsN5sAuoW_WzadoYcO5cHtAI_d0-n5XisL_8cyW4elAtcPN9X8oW2gEANiGnbh1kEgGohdLw8t-728/s1600/ExpandWidgetTemplates.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajnooRdSqZ8YnHQ_SkyH01iJpB9r7nC9As2PJ2tdmb5JcMXh-707G3b1jh4iwQzsN5sAuoW_WzadoYcO5cHtAI_d0-n5XisL_8cyW4elAtcPN9X8oW2gEANiGnbh1kEgGohdLw8t-728/s1600/ExpandWidgetTemplates.jpg" /></a></div>
</h3>
<h3>
<br /></h3>
<span style="background-color: #38761d;">Step 3</span> <span style="font-weight: normal;"><i>Search below code with the help of CTRL+F</i></span><blockquote class="tr_bq">
<data:post.body/></blockquote>
<h3>
<br /></h3>
<h3>
<span style="background-color: #38761d;">
Step 4</span> <i style="font-weight: normal;">Copy and paste below code just below the above code:</i></h3>
<blockquote class="tr_bq">
<div style='float: left; padding: 5px; '><br />
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='<span style="color: red;">TYPE OF BUTTON</span>'/><br />
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><br />
</div><br />
</blockquote>
<b>Tips:</b> 1. Replace <span style="color: red;">TYPE OF BUTTON </span>with <b>box_count</b> for show Box Share button as shown in below picture.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbnQO5v8qfwOzgGeNR6Kp-7CRQtJ9_ec-rqXESSv9PqhCJAL0VhOavI9shongBNn00Gs8D4nAdwd7dzaxoYloEnHdTRizP7Fa0Qd19qvJwFdbDwSBteZZZJvLJN9uzD6vHsmlzhe2UKXg/s1600/facebook+share+sample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbnQO5v8qfwOzgGeNR6Kp-7CRQtJ9_ec-rqXESSv9PqhCJAL0VhOavI9shongBNn00Gs8D4nAdwd7dzaxoYloEnHdTRizP7Fa0Qd19qvJwFdbDwSBteZZZJvLJN9uzD6vHsmlzhe2UKXg/s1600/facebook+share+sample.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
2. Replace<span style="color: red;">TYPE OF BUTTON </span>with <b>button_count</b> for show Box Share button as shown in below picture.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3HkdmGqsRhC9Ft09lK2ZNFvEGN8pUjbSu0GX1lpS6a6UbXjf0K_Z8Tabro8Bt_TmdbrBswxy4XD5FgOeTaBPDWfKJVYmVbOm-EVshfihEpqaaKOZw3IFEx1q7of1W9WOSisARBfSdobM/s1600/Facebook-inline-count.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3HkdmGqsRhC9Ft09lK2ZNFvEGN8pUjbSu0GX1lpS6a6UbXjf0K_Z8Tabro8Bt_TmdbrBswxy4XD5FgOeTaBPDWfKJVYmVbOm-EVshfihEpqaaKOZw3IFEx1q7of1W9WOSisARBfSdobM/s1600/Facebook-inline-count.png" /></a></div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3>
<span style="background-color: #38761d;">
Step 5</span> <span style="font-weight: normal;">Click on Save Template button.</span></h3>
<div>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">Now you'r done.If you have any problem or question feel free to write it on the comment box or email me at larrimoreashley@gmail.com.</span></div>
<div style="text-align: right;">
<span style="background-color: #38761d; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">By AShley Larrimpore</span></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
</div>

How to Add Facebook Share Button To Blogger

This is a step by step tutorial to explaining how to add facebook share button to blogger blog automatically under every blog post. In ...

How to Add Post Thumbnails for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBg9EiPUOfE_K0n3_Z-NVAEjsjLP4V3xgOafdAEZagv3dZbcUeVEGgbTAt9rA1o4RWLuP9owXL9OTUjBLcerbWMZFDZHCLaGvm-Ob-apQkZXG203BO_ezkHglJhZuXCylhPORUtvzf3qY/s1600/HaakBlog+++Blogger+Tips++Tutorial+and+Tricks.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBg9EiPUOfE_K0n3_Z-NVAEjsjLP4V3xgOafdAEZagv3dZbcUeVEGgbTAt9rA1o4RWLuP9owXL9OTUjBLcerbWMZFDZHCLaGvm-Ob-apQkZXG203BO_ezkHglJhZuXCylhPORUtvzf3qY/s1600/HaakBlog+++Blogger+Tips++Tutorial+and+Tricks.png" width="331" /></a></div>
<h3 style="text-align: left;">
<span style="font-weight: normal;"><i>This tutorial is about how  add post thumbnails for blogger on the front page.It's a important widget because it gives a better professional  look to the blog and it also help reduce the bounce rate of your blog or website.It has many advantages like it  as it shows just summary of your post with thumbnails it reduce load-time of your blog or website.It also give you relief from boring long length summary to a better short summary.Overall it increases your page views.So follow the steps below to give a better refreshing look to your site</i></span>.</h3>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<h3>
<br /></h3>
<h3>
<br /></h3>
<h3 style="text-align: center;">
<span style="background-color: #38761d;">
How to Add Post Thumbnails for Blogger on Front Page step by step </span></h3>
<div class="MsoNormal">
<br /></div>
<h3 style="text-align: left;">
<span style="background-color: #38761d;">
Step 1</span> <i style="font-weight: normal;">First Login into Blogger Dashboard.</i></h3>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<h3 style="text-align: left;">
<span style="background-color: #38761d;">
Step 2</span> <i style="font-weight: normal;">Go to Template and Click on Edit Template Button as shown in
below picture.</i></h3>
<div class="MsoNormal">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAdlX7eqIoFb7DKmY3bw3VuXo3VDC5BJlnYb5yXVSUSPPEPSfi2bz9M0PhRXi8PFo44UD-QpVJnWmhyiPHMvNsAu1PBG81jhba-fGotrfaXNmwST2DoXD4d8HpLDGjejSUWOE4oI5fG40/s1600/Blogger-edit-html_thumb%5B1%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAdlX7eqIoFb7DKmY3bw3VuXo3VDC5BJlnYb5yXVSUSPPEPSfi2bz9M0PhRXi8PFo44UD-QpVJnWmhyiPHMvNsAu1PBG81jhba-fGotrfaXNmwST2DoXD4d8HpLDGjejSUWOE4oI5fG40/s1600/Blogger-edit-html_thumb%5B1%5D.png" width="640" /></a></div>
</h4>
<h4>
<br /></h4>
<h3 style="text-align: left;">
<span style="background-color: #38761d;">Step 3</span> <span style="font-weight: normal;"><i>Click on Expand Widget Template checkbox as shown in below
picture.</i></span></h3>
<h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4CYNSQhxX_5gmY61Wi4dMaV9hbCS-YtitfliPiQD4NZCm5oSJE7w5z4k-e1p38anjZaJl-vFC-H78b2uWKD7y3qhgdKBE3QZiJv9ypseiMaKCLXW2wh92z27ECAFxvgKJrTBfyoLMSqM/s1600/ExpandWidgetTemplates.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4CYNSQhxX_5gmY61Wi4dMaV9hbCS-YtitfliPiQD4NZCm5oSJE7w5z4k-e1p38anjZaJl-vFC-H78b2uWKD7y3qhgdKBE3QZiJv9ypseiMaKCLXW2wh92z27ECAFxvgKJrTBfyoLMSqM/s1600/ExpandWidgetTemplates.jpg" width="640" /></a></div>
</h4>
<h4>
<br /></h4>
<h3 style="text-align: left;">
<span style="background-color: #38761d;">Step 4</span> <i style="font-weight: normal;">Find <span style="color: #073763;"></head></span> and paste below code just before it.</i></h3>
<blockquote class="tr_bq">
<script type=’text/javascript’>var thumbnail_mode = “no-float” ;<br />
summary_noimg = 430;<br />
summary_img = 340;<br />
img_thumb_height = 100;<br />
img_thumb_width = 120;<br />
</script><br />
<script type=’text/javascript’><br />
//<![CDATA[<br />
function removeHtmlTag(strx,chop){<br />
if(strx.indexOf("<")!=-1)<br />
{<br />
var s = strx.split("<");<br />
for(var i=0;i<s.length;i++){<br />
if(s[i].indexOf(“>”)!=-1){<br />
s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);<br />
}<br />
}<br />
strx = s.join(“”);<br />
}<br />
chop = (chop < strx.length-1) ? chop : strx.length-2;<br />
while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;<br />
strx = strx.substring(0,chop-1);<br />
return strx+’…’;<br />
}<br />
function createSummaryAndThumb(pID){<br />
var div = document.getElementById(pID);<br />
var imgtag = “”;<br />
var img = div.getElementsByTagName(“img”);<br />
var summ = summary_noimg;<br />
if(img.length>=1) {<br />
imgtag = ‘<span style=”float:left; padding:0px 10px 5px 
0px;”><img src=”‘+img[0].src+’” width=”‘+img_thumb_width+’px” 
height=”‘+img_thumb_height+’px”/></span>’;<br />
summ = summary_img;<br />
}<br />
var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;<br />
div.innerHTML = summary;<br />
}<br />
//]]><br />
</script></blockquote>
<h3 style="text-align: left;">
<span style="background-color: #38761d;">
Step 5</span> <i style="font-weight: normal;">Now find blow code:</i></h3>
<blockquote class="tr_bq">
<data:post.body/></blockquote>
<h4>
<br /></h4>
<h3 style="text-align: left;">
<span style="background-color: #38761d;">
Step 6</span> <i style="font-weight: normal;">Now replace below code with this:</i></h3>
<blockquote class="tr_bq">
<b:if cond=’data:blog.pageType == “item”‘><br />
<data:post.body/><br />
<b:else/><br />
<b:if cond=’data:blog.pageType == “static_page”‘><br />
<data:post.body/><br />
<b:else/><br />
<div expr:id=’”summary” + data:post.id’><data:post.body/></div><br />
<script type=’text/javascript’> createSummaryAndThumb(“summary<data:post.id/>”);<br />
</script><br />
<a class=’more’ expr:href=’data:post.url’>Read more …</a><br />
</b:if><br />
</b:if><span style="background-color: white; color: #777777; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 21.109375px;"><small><a style='align:center;' href='</span><a href="http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.html" style="background-color: white; color: #999999; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 21.109375px; text-decoration: none;"><span style="color: black;">http://masterbloggingtips.blogspot.com/</span></a><span style="background-color: white; color: #777777; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 21.109375px;">' target='_blank'></a></small></span></blockquote>
<h3 style="text-align: left;">
<span style="background-color: #38761d;">
Step 7</span> <span style="font-weight: normal;"><i>Click on Save Template button.</i></span></h3>
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">Now you'r done.If you have any problem or question feel free to write it on the comment box or email me at larrimoreashley@gmail.com.</span><br />
<span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;"><br /></span>
<div style="text-align: right;">
<span style="background-color: #38761d; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">By Ashley Larrimore</span></div>
</div>

How to Add Post Thumbnails for Blogger

This tutorial is about how add post thumbnails for blogger on the front page.It's a important widget because it gives a better pr...

How to Add a Video to Blogger Sidebar

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal" style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5FgFm5oaW9f_5gtfLZa9TrtyIc8hrpHrLdXbCd9-h_SplQadbUUOdUB0ABbcOQbvMHix90WDgt0UYNi_i2K2IDfZS2DMhMnK75XSdmgSIfKrZhOZrtke6jSJYP7-VG_ODTZQaqynLI58/s1600/YouTube-Blogger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5FgFm5oaW9f_5gtfLZa9TrtyIc8hrpHrLdXbCd9-h_SplQadbUUOdUB0ABbcOQbvMHix90WDgt0UYNi_i2K2IDfZS2DMhMnK75XSdmgSIfKrZhOZrtke6jSJYP7-VG_ODTZQaqynLI58/s1600/YouTube-Blogger.png" /></a></div>
<h2 style="text-align: left;">
Add a Youtube video to Blogger Sidebar</h2>
<h3>
<i style="font-weight: normal;">This is an step by step tutorial on how to add a Video to Blogger Sidebar.A Video in the Blogger Sidebar can be as important as giving the very first good impression of the blog to the user.It also a better way of giving more information about the content or services of the blog.Video marketing is a good method to tell more at a short time and simply to your user.So why not making your blog a better one by just adding a video to the sidebar? So below is given the tutorial on how to add the slider with detailed steps and codes.Follow the steps to add the video sidebar to your blog Today!</i>.</h3>
</div>
<h3 style="text-align: center;">
<span style="background-color: #38761d;">Follow below steps to Add video to blogger sidebar.</span></h3>
<h3 style="text-align: left;">
<span style="background-color: #38761d;">
Step 1</span><span style="background-color: white;">  <i style="font-weight: normal;">First </i></span><i style="font-weight: normal;">Login into your Blogger Dashboard.</i></h3>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<h3>
</h3>
<h3>
<span style="background-color: #38761d;">
Step 2</span> <span style="font-weight: normal;"><i>Go to layout and click on add gadget as shown in below
picture.Click on to add a gadget where you want your video to appear.</i></span></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBR-gyJw1jLlRpuemj9R22r_6MfJs8YtMI8b8u1rY7gpj-Bul3L-VMcz42-bRgIQjg2xvzYsc_rY1TFR8FbputQoxKeYRbRNVjn5pEi_5ilUvPQOScqetBmnWpqGMEVecv1hOFl-1mhNw/s1600/add-a-gadget-screen-.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBR-gyJw1jLlRpuemj9R22r_6MfJs8YtMI8b8u1rY7gpj-Bul3L-VMcz42-bRgIQjg2xvzYsc_rY1TFR8FbputQoxKeYRbRNVjn5pEi_5ilUvPQOScqetBmnWpqGMEVecv1hOFl-1mhNw/s1600/add-a-gadget-screen-.PNG" /></a></div>
<div class="MsoNormal">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3>
<span style="background-color: #38761d;">
Step 3</span> <i style="font-weight: normal;">Choose HTML/JavaScript as shown in below picture.</i></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGSP86lBRc-jEWuqNo8zlFuZqnI3nhLitJAsaEp9W52C7RsjRqIxrZK32OVXU8RR22PTgNIhSdveoJVjFHMiSPQ-lcRdBVgqQJvMu1j4cToozR4fgQq-eAHlAS0vWWU5B4nZlk268YqM/s1600/Add+Feedback+button+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQGSP86lBRc-jEWuqNo8zlFuZqnI3nhLitJAsaEp9W52C7RsjRqIxrZK32OVXU8RR22PTgNIhSdveoJVjFHMiSPQ-lcRdBVgqQJvMu1j4cToozR4fgQq-eAHlAS0vWWU5B4nZlk268YqM/s1600/Add+Feedback+button+2.png" /></a></div>
<div class="MsoNormal">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
<br /></div>
<h3>
<span style="background-color: #38761d;">Step 4</span> <i style="font-weight: normal;">Copy and paste below code:</i></h3>
<blockquote class="tr_bq">
 <div class="widget-content"><br />
<span style="color: red;"><iframe width="</span><span style="color: #0b5394;">336</span><span style="color: red;">" height="</span><span style="color: #0b5394;">169</span><span style="color: red;">" src="http://www.youtube.com/embed/gEBJeqvJReg" frameborder="0" allowfullscreen></iframe></span><br />
<style><br />
.label-size{<br />
margin:0 2px 6px 0;<br />
padding: 3px;<br />
text-transform: uppercase;<br />
border: solid 1px #C6C6C6;<br />
border-radius: 3px;<br />
float:left;<br />
text-decoration:none;<br />
font-size:10px;<br />
color:#666;<br />
}<br />
<br />
.label-size:hover {<br />
border:1px solid #6BB5FF;<br />
text-decoration: none;<br />
-moz-transition: all 0.5s ease-out;<br />
-o-transition: all 0.5s ease-out;<br />
-webkit-transition: all 0.5s ease-out;<br />
-ms-transition: all 0.5s ease-out;<br />
transition: all 0.5s ease-out;<br />
-moz-transform: rotate(7deg);<br />
-o-transform: rotate(7deg);<br />
-webkit-transform: rotate(7deg);<br />
-ms-transform: rotate(7deg);<br />
transform: rotate(7deg);<br />
filter: progid:DXImageTransform.Microsoft.Matrix(<br />
                    M11=0.9961946980917455, M12=-0.08715574274765817, 
M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto 
expand');<br />
zoom: 1;<br />
}<br />
<br />
.label-size a  {<br />
text-transform: uppercase;<br />
float:left;<br />
text-decoration: none;<br />
}<br />
.label-size a:hover  {<br />
text-decoration: none;<br />
}<br />
</style><br />
</div><br />
<div class="clear"></div><br />
<span class="widget-item-control"><br />
<span class="item-control blog-admin"><br />
<a class="quickedit" 
href="//www.blogger.com/rearrange?blogID=8193278726666811965&amp;widgetType=HTML&amp;widgetId=HTML15&amp;action=editWidget&amp;sectionId=sidebar"
 onclick="return 
_WidgetManager._PopupConfig(document.getElementById(&quot;HTML15&quot;));"
 target="configHTML15" title="Edit"><br />
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /><br />
</a><br />
</span><br />
</span><br />
<div class="clear"><br />
</div><br />
<small><a style='align:center;' 
href='<a href="http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.html"><span style="color: black;">http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.html</span></a>'
 target='_blank'>Widget</a></small></blockquote>
<br />
<h3 style="text-align: left;">
<span style="background-color: #38761d;">Step 5</span><i style="font-size: x-large;"> <span style="font-weight: normal;">Now go to youtube and search the video you want to add to blogger.</span></i></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrEbls69K0COwdogCM6-7QZAm4NAzT8MSF-QH22YupYOWzbBqJxPOlzQ7F6z8gD0o0Va7pRaJyhIHmYkbIVAIb5jlnfw3hSux_96Z3a6AaMhvrEqMmLjOdGbq07c9mO8FagoQqo4Pmf6M/s1600/220px-EmbedYoutubeBlogger-Step-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrEbls69K0COwdogCM6-7QZAm4NAzT8MSF-QH22YupYOWzbBqJxPOlzQ7F6z8gD0o0Va7pRaJyhIHmYkbIVAIb5jlnfw3hSux_96Z3a6AaMhvrEqMmLjOdGbq07c9mO8FagoQqo4Pmf6M/s1600/220px-EmbedYoutubeBlogger-Step-1.jpg" width="400" /></a></div>
<div>
<i style="font-size: x-large;"><span style="font-weight: normal;"><br /></span></i></div>
<br />
<h3>
</h3>
<h3>
<span style="background-color: #38761d;">Step 6</span>  <span class="whb" style="font-weight: normal;"><i>Once you found the video, click on 'share'</i></span></h3>
<h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1OK8pHY3jxC25b7L_Zye_17FWSSTmb6NQ7KXLin-tGfB6swyw1MPhKOa0TzNrQCNXZw-M_H0GIJXLoN2TH_HidCB89QCBT8o9ORfV0214sSx13sHqKkaGoVGEb5xhV1zr0LC5HKa734/s1600/1111111111.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1OK8pHY3jxC25b7L_Zye_17FWSSTmb6NQ7KXLin-tGfB6swyw1MPhKOa0TzNrQCNXZw-M_H0GIJXLoN2TH_HidCB89QCBT8o9ORfV0214sSx13sHqKkaGoVGEb5xhV1zr0LC5HKa734/s1600/1111111111.png" width="640" /></a></div>
</h3>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<h3>
<span style="background-color: #38761d;">Step 7</span>  <span class="whb"> <i style="font-weight: normal;">After click on 'embed video' button</i></span><i style="font-weight: normal;">. After making your selection, copy the embed code. The code changes based on your selection such as size.</i></h3>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXO7g52B1z3FNdzui5LX5QGzOytJ_zy-fUle2CMr5Nl_Lc7rH9kjv-c6_wP_clGsbYfaG2JNp_os9fTbc9qH-mxfjmXuXUBYLDa3gF5BFWzgUD0fKaXn8pNl1hSs9OkbEUjEKuh4K04Hw/s1600/22222222.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXO7g52B1z3FNdzui5LX5QGzOytJ_zy-fUle2CMr5Nl_Lc7rH9kjv-c6_wP_clGsbYfaG2JNp_os9fTbc9qH-mxfjmXuXUBYLDa3gF5BFWzgUD0fKaXn8pNl1hSs9OkbEUjEKuh4K04Hw/s1600/22222222.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<h3>
<span style="background-color: #38761d;">Step 8</span>  <i style="font-weight: normal;">Now replace your embed code with the<span style="color: red;"> red colored codes </span>.You may also change the size of the video manually just by changing <span style="background-color: white;"><span style="color: #0b5394;">the length and width colored blue.</span></span></i></h3>
</div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<h3>
<span style="background-color: #38761d;">
Step 9</span>  <i style="font-weight: normal;">Click Save button.</i></h3>
<div style="text-align: right;">
<br /></div>
<div class="MsoNormal">
Now you'r done.If you have any problem or question feel free to write it on the comment box or email me at larrimoreashley@gmail.com.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="text-align: center;">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
</div>

How to Add a Video to Blogger Sidebar

Add a Youtube video to Blogger Sidebar This is an step by step tutorial on how to add a Video to Blogger Sidebar.A Video in the Blogg...

How to Start a Blog on Blogger - Step by Step Guide with picture illustration

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
<br />
<br />
<header class="entry-header">
  <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhnUzFjP1VbwQf1y8A0eBlQBPnyUuF7TnqqmF7jqtHzoa7_2ZSBcTk2P4-4m4NxIL_nlMEXnfOnLUD3ALNQ9XV-jWFJduiDoi2JSAkJ0gAZEaQg7ZD9zspJchfLvuW7Zqua53xAza6R8c/s1600/How+to+Create+a+Blog+in+Blogger.com.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhnUzFjP1VbwQf1y8A0eBlQBPnyUuF7TnqqmF7jqtHzoa7_2ZSBcTk2P4-4m4NxIL_nlMEXnfOnLUD3ALNQ9XV-jWFJduiDoi2JSAkJ0gAZEaQg7ZD9zspJchfLvuW7Zqua53xAza6R8c/s1600/How+to+Create+a+Blog+in+Blogger.com.png" width="320" /></a></div>
</header><br />
<div class="entry-content">
<h2 style="text-align: left;">
<span style="background-color: #38761d; font-size: small; font-weight: normal; text-align: right;">By Ashley  Larrimore</span></h2>
<h2 style="text-align: left;">
<i>Blogger is an online service owned by Google that publishes single or 
multi-user blogs created entirely by the user. The service has quickly 
become the preferred choice of many novice bloggers and is one of the 
easiest methods of creating and publishing a blog for free. If you are 
unfamiliar with the service, this article will teach you how to set up 
an account and create a blog on Blogger.com.</i></h2>
<div>
<h2>
<span style="background-color: #0b5394;">Step 1:</span><span style="background-color: white;"> </span><i style="font-weight: normal;"><span class="whb">Navigate to www</span>.blogger.com using your web browser of choice.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfyx8mKoMai8FB3tgzLtRjYkLYywd4JtOUc5tnLOwYT-zPZLp0McJbFFhEzSP6t6yKJIAbDdUjoT288QpuvmSZ6EWPXMyDNqdgxaQNoPpJKssZFmNUblXj6aBGaaBpTO5_CzmswLTCsyw/s1600/550px-Start-a-Blog-on-Blogger-Step-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogs" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfyx8mKoMai8FB3tgzLtRjYkLYywd4JtOUc5tnLOwYT-zPZLp0McJbFFhEzSP6t6yKJIAbDdUjoT288QpuvmSZ6EWPXMyDNqdgxaQNoPpJKssZFmNUblXj6aBGaaBpTO5_CzmswLTCsyw/s1600/550px-Start-a-Blog-on-Blogger-Step-1.jpg" title="blog" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<span style="background-color: white;"><br /></span></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 2:</span><span style="background-color: white;"> </span><i style="font-weight: normal;"><span class="whb">Sign in using your Google Account to get started</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0lAZ1KtwMKFqLO4w0Qr2VrkbC06hhtlvzbKMAYGsyg0lhBgdHeciFFHuQlxvcBvJoWAVAexIytLJzI0LrjE3c1cWbzVxkUokRY6-b3WjB__Oye85Tmz-xW_dktPdvymf2_2H9xSfGeXw/s1600/550px-Start-a-Blog-on-Blogger-Step-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0lAZ1KtwMKFqLO4w0Qr2VrkbC06hhtlvzbKMAYGsyg0lhBgdHeciFFHuQlxvcBvJoWAVAexIytLJzI0LrjE3c1cWbzVxkUokRY6-b3WjB__Oye85Tmz-xW_dktPdvymf2_2H9xSfGeXw/s1600/550px-Start-a-Blog-on-Blogger-Step-2.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 3:</span>    <i style="font-weight: normal;"><span class="whb">If you do not have a Google Account, click “Get Started” to create one</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHM6kBl8L4iNXUtZj0dbgxCGGu27cG2fmktw3MvDKN1ys6MPPH-JSuc5Z6nnaI9zGUEHCw76NqPscq9NfhdFSsGiUZQvkBhOPSzYBK3Rha53U9aLoSQrR3K3X78p8XUEKBNcjvkWHA20E/s1600/416px-Start-a-Blog-on-Blogger-Step-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHM6kBl8L4iNXUtZj0dbgxCGGu27cG2fmktw3MvDKN1ys6MPPH-JSuc5Z6nnaI9zGUEHCw76NqPscq9NfhdFSsGiUZQvkBhOPSzYBK3Rha53U9aLoSQrR3K3X78p8XUEKBNcjvkWHA20E/s1600/416px-Start-a-Blog-on-Blogger-Step-3.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 4:</span> <i style="font-weight: normal;"><span class="whb">Enter a “Display Name” to be used to sign your blog posts and click “Continue”</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFBSbI7EtgvzpWja0uQoUFtGNtvf2-Bwl8v6JPLcdhUmFofDkjBoggqL9Oid7wExKTUCmWL0EMHGeqOLyotu0KFCg_TQW3mY3rxH3P5w64FqGlrOi_emoAHHgyQO_g0Pc44r4jDvvVcZU/s1600/550px-Start-a-Blog-on-Blogger-Step-4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFBSbI7EtgvzpWja0uQoUFtGNtvf2-Bwl8v6JPLcdhUmFofDkjBoggqL9Oid7wExKTUCmWL0EMHGeqOLyotu0KFCg_TQW3mY3rxH3P5w64FqGlrOi_emoAHHgyQO_g0Pc44r4jDvvVcZU/s1600/550px-Start-a-Blog-on-Blogger-Step-4.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 5:</span> <span class="whb" style="font-weight: normal;"><i>Click “Create Your Blog Now”</i></span></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdMpfbJBQ91NQwGzYUkra5wCTZW6QUN5KTZ6ydH-d3ZRLD5sNVYrHurZeKEscfOceh8dryWTZvHWegui9oeidRUGxw1IYq33DhbdKaOe52zAJbs5x0Fv5WqjvJr1ubKz_SpU2HQIPkdco/s1600/382px-Start-a-Blog-on-Blogger-Step-5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdMpfbJBQ91NQwGzYUkra5wCTZW6QUN5KTZ6ydH-d3ZRLD5sNVYrHurZeKEscfOceh8dryWTZvHWegui9oeidRUGxw1IYq33DhbdKaOe52zAJbs5x0Fv5WqjvJr1ubKz_SpU2HQIPkdco/s1600/382px-Start-a-Blog-on-Blogger-Step-5.jpg" /></a></div>
<div>
<span class="whb" style="font-weight: normal;"><i><br /></i></span></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 6:</span> <i style="font-weight: normal;"><span class="whb">Select a “Blog title” and an available URL for your blog</span>. You can check if the URL you are considering is available by clicking "Check Availability".</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF110PwMGukbum4irJ-MceZyMuvAAzplvKjOyg1KLi4VZqJXSr2cRK-YUYnJ8glRA8XQJTvwl7R7XVmKlIyRZBNkt7JSxFuv2H_BJ-LICw0J5wd19LT3lZnjQKmAyLuAL1eX3jObf9ZCM/s1600/550px-Start-a-Blog-on-Blogger-Step-6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF110PwMGukbum4irJ-MceZyMuvAAzplvKjOyg1KLi4VZqJXSr2cRK-YUYnJ8glRA8XQJTvwl7R7XVmKlIyRZBNkt7JSxFuv2H_BJ-LICw0J5wd19LT3lZnjQKmAyLuAL1eX3jObf9ZCM/s1600/550px-Start-a-Blog-on-Blogger-Step-6.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 7:</span> <i style="font-weight: normal;"><span class="whb">Enter the word verification and click continue</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkJhzxDYETKKP-4NHItA7m47cWNaC-VIR8rEhgCpOWODtnldmqq2NRrC3nbh2mY9yb2sAQ60_FlYgAsoTnNDus-zeCZi5hh8aj0baCpxbDET45htLmnXSiNAO3txirtXQWgwu1jjR3Qgc/s1600/550px-Start-a-Blog-on-Blogger-Step-7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkJhzxDYETKKP-4NHItA7m47cWNaC-VIR8rEhgCpOWODtnldmqq2NRrC3nbh2mY9yb2sAQ60_FlYgAsoTnNDus-zeCZi5hh8aj0baCpxbDET45htLmnXSiNAO3txirtXQWgwu1jjR3Qgc/s1600/550px-Start-a-Blog-on-Blogger-Step-7.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 8:</span> <i style="font-weight: normal;"><span class="whb">Choose a starter template, which will act as the basic design/layout of your blog</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEUpT4cyN_nQngsVXuAzP2nGKwaJ203FfNvlGfpF58OTnQvYdtWke9f1ApLltIO3_8D885hMfA-MUADrjIHaVRkLl2CGoUVZsB1JXytVq13dR1kCqdGppkF3YlVecVQPksVOfK5L6_Vs/s1600/550px-Start-a-Blog-on-Blogger-Step-8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEUpT4cyN_nQngsVXuAzP2nGKwaJ203FfNvlGfpF58OTnQvYdtWke9f1ApLltIO3_8D885hMfA-MUADrjIHaVRkLl2CGoUVZsB1JXytVq13dR1kCqdGppkF3YlVecVQPksVOfK5L6_Vs/s1600/550px-Start-a-Blog-on-Blogger-Step-8.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 9:</span> <span class="whb" style="font-weight: normal;"><i>Click “Start Blogging”</i></span></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2_1p52JSxqMK3OdPNJpLJbXwjhA3x3oXkxTkwnsnFcf779vy_xUXKba6z2I-hGphZDA7APlFT1ymDZZOextd6ejQzKRhxY9eLOZ6827uFLLbGTP8tb8I9mFhZzOHP-7c6UZ4MV95QkZg/s1600/550px-Start-a-Blog-on-Blogger-Step-9.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2_1p52JSxqMK3OdPNJpLJbXwjhA3x3oXkxTkwnsnFcf779vy_xUXKba6z2I-hGphZDA7APlFT1ymDZZOextd6ejQzKRhxY9eLOZ6827uFLLbGTP8tb8I9mFhZzOHP-7c6UZ4MV95QkZg/s1600/550px-Start-a-Blog-on-Blogger-Step-9.jpg" /></a></div>
<div>
<span class="whb" style="font-weight: normal;"><i><br /></i></span></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 10:</span> <i style="font-weight: normal;"><span class="whb">You can create new blog posts, edit posts, and edit pages from under the “Posting” tab</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPj-mRIVu9YKuq3TcK4eSu7CkQ16U6KR1IuE7yNoQS7YntbG8IHjqyXtgdY2OwxLKc3zaxwUS3siRcBi3ZLnf8DTGYlXkG2fnHI7ON3Ym2m90lWadoYxzOJl_8IttbsxVFcRn6fSgGJtg/s1600/550px-Start-a-Blog-on-Blogger-Step-10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPj-mRIVu9YKuq3TcK4eSu7CkQ16U6KR1IuE7yNoQS7YntbG8IHjqyXtgdY2OwxLKc3zaxwUS3siRcBi3ZLnf8DTGYlXkG2fnHI7ON3Ym2m90lWadoYxzOJl_8IttbsxVFcRn6fSgGJtg/s1600/550px-Start-a-Blog-on-Blogger-Step-10.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 11:</span> <i style="font-weight: normal;"><span class="whb">The title of your post goes in the text box next to “Title”</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfroWY4OTLq_c8UZCADrOQgrL84q2R6_nUEvKjRYxP71n3iGwZGQMfzkrYzcEtiAVcfVHCnpN4s17yvoAVJMw6WnMbuKImmdH2tKAPj4Qk1qF5CCeRV7owDjz9VEvXGqTjDzFJOArl1yY/s1600/550px-Start-a-Blog-on-Blogger-Step-11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfroWY4OTLq_c8UZCADrOQgrL84q2R6_nUEvKjRYxP71n3iGwZGQMfzkrYzcEtiAVcfVHCnpN4s17yvoAVJMw6WnMbuKImmdH2tKAPj4Qk1qF5CCeRV7owDjz9VEvXGqTjDzFJOArl1yY/s1600/550px-Start-a-Blog-on-Blogger-Step-11.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 12:</span> <i style="font-weight: normal;"><span class="whb">The body of your post will get entered into the “Compose”
 text editor, where you will also be able to access basic text editor 
functions such as font size, text color, the ability to insert links</span>.</i></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCQMxZywyC9uKnwoj2_vgU1NY8quaYzF_J8kIPK9BPyn-XqFshSV_e8AICCzNtpBb5i5HUlyMGKYKuX252Cp84-NqaucVy9Gdm3C2plM9-Dqket7YTNzhI4-EIml2pLrMoZA46_hEBUk/s1600/550px-Start-a-Blog-on-Blogger-Step-12.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCQMxZywyC9uKnwoj2_vgU1NY8quaYzF_J8kIPK9BPyn-XqFshSV_e8AICCzNtpBb5i5HUlyMGKYKuX252Cp84-NqaucVy9Gdm3C2plM9-Dqket7YTNzhI4-EIml2pLrMoZA46_hEBUk/s1600/550px-Start-a-Blog-on-Blogger-Step-12.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
</div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 13:</span> <i style="font-weight: normal;"><span class="whb">You can also use the “Edit HTML” tab to insert your post in HTML format, if you prefer</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXN2wuADBao7_4b7pi4zCCnRmXNus6fvhAfTn4-eopC5rGFxz1hhx_HjbZy2lBomViVcRgEOQ-DAwIFzR89hoy0BpCOWOUwTJAfA6D8joeUiPzrakgWsR16cF4BVzXEL_wRFFQjgaLRdM/s1600/406px-Start-a-Blog-on-Blogger-Step-13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXN2wuADBao7_4b7pi4zCCnRmXNus6fvhAfTn4-eopC5rGFxz1hhx_HjbZy2lBomViVcRgEOQ-DAwIFzR89hoy0BpCOWOUwTJAfA6D8joeUiPzrakgWsR16cF4BVzXEL_wRFFQjgaLRdM/s1600/406px-Start-a-Blog-on-Blogger-Step-13.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 14:</span> <i style="font-weight: normal;"><span class="whb">The “Post Options” section located underneath the 
“Compose” text editor will allow you to enable reader comments, HTML 
settings, and post the time and date</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5EX_QK7JbRUtFwImMSTamPywqEVruuPI_s4kwbycap2EebRhDP3PgV1hB_vP2LO3qolxrSQGyfjN4nn-tTUJzU-VYkdMLR5DINlZAvRa56T2cm1NdwwuXlaH4sv8kLZSeFSP8c7On4iU/s1600/550px-Start-a-Blog-on-Blogger-Step-14.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5EX_QK7JbRUtFwImMSTamPywqEVruuPI_s4kwbycap2EebRhDP3PgV1hB_vP2LO3qolxrSQGyfjN4nn-tTUJzU-VYkdMLR5DINlZAvRa56T2cm1NdwwuXlaH4sv8kLZSeFSP8c7On4iU/s1600/550px-Start-a-Blog-on-Blogger-Step-14.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 15:</span> <i style="font-weight: normal;"><span class="whb">You can now either select “Save Now” to save your post, 
“Preview” to preview your post before publishing to your blog, or 
“Publish Post” to publish your post directly to your newly created blog</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6cNckQ5iu1F43X4GCXyXHBOl1s5M7QnKsVjHWtfSA6TpyoWBKf0DbnNIjLSkbVEtDdX8gNzAcrAjaIGaJjaQRi_LowfUuQLiyWRtGgJznnU2GtTMDFSj5WibLBfgvhNRUurfeaQsk7Ks/s1600/550px-Start-a-Blog-on-Blogger-Step-15.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6cNckQ5iu1F43X4GCXyXHBOl1s5M7QnKsVjHWtfSA6TpyoWBKf0DbnNIjLSkbVEtDdX8gNzAcrAjaIGaJjaQRi_LowfUuQLiyWRtGgJznnU2GtTMDFSj5WibLBfgvhNRUurfeaQsk7Ks/s1600/550px-Start-a-Blog-on-Blogger-Step-15.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 16:<i style="font-weight: normal;"> </i></span><i style="font-weight: normal;"><span class="whb">If you wish to change the design of your blog from the 
starter template you selected when initially creating your blog, you can
 do so under the “Design” tab</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNuOi7NSTK5xzxF-hTLRnzysH1zF5WnhrngxUEgZ-Gdz8iEwSMC3rJ2hN2cgv6diZSx8hR4-cHOx81a40Y8pNwr_maMMCMmZW937Hp3lcpdSn0B4d5NsfznzzSnz-j97wtDFJ27loYk-A/s1600/550px-Start-a-Blog-on-Blogger-Step-16.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNuOi7NSTK5xzxF-hTLRnzysH1zF5WnhrngxUEgZ-Gdz8iEwSMC3rJ2hN2cgv6diZSx8hR4-cHOx81a40Y8pNwr_maMMCMmZW937Hp3lcpdSn0B4d5NsfznzzSnz-j97wtDFJ27loYk-A/s1600/550px-Start-a-Blog-on-Blogger-Step-16.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 17:</span> <i style="font-weight: normal;"><span class="whb">From within the “Design Tab” you will be able to edit Page Elements, HTML, and change your template with Temple Designer</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_0ILY3KFAPKYzAHvuTqB3txtKnyBuIKlSF-0i-iZGU-9uxENPrDem1pgMjenN5MpQlPkq-EkPYjshghhYVh7j6t0ZBf9RtxgHFZJCUilQS4KOmzjTjMJODXtWoLNlh_S86rxFHtyKes4/s1600/550px-Start-a-Blog-on-Blogger-Step-17.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_0ILY3KFAPKYzAHvuTqB3txtKnyBuIKlSF-0i-iZGU-9uxENPrDem1pgMjenN5MpQlPkq-EkPYjshghhYVh7j6t0ZBf9RtxgHFZJCUilQS4KOmzjTjMJODXtWoLNlh_S86rxFHtyKes4/s1600/550px-Start-a-Blog-on-Blogger-Step-17.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 18:</span> <i style="font-weight: normal;"><span class="whb">If you want to adjust other settings such as who is able 
to view, contribute to, or comment on your blog etc, click the 
“Settings” tab</span>.</i></h2>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTY7AAOz2_XpxssVg1Nv9lTonoUQsOtGEmMeQ6sojegsA-iPuohUUZyKax_bm6EyXmW59kHC4vxuJANN3OrWU7RjU5sr4L1MluZ9LjTBGxOxRe7BlOe_mfs2NCqR4ZpvQ_CzidCYSldnw/s1600/550px-Start-a-Blog-on-Blogger-Step-18.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTY7AAOz2_XpxssVg1Nv9lTonoUQsOtGEmMeQ6sojegsA-iPuohUUZyKax_bm6EyXmW59kHC4vxuJANN3OrWU7RjU5sr4L1MluZ9LjTBGxOxRe7BlOe_mfs2NCqR4ZpvQ_CzidCYSldnw/s1600/550px-Start-a-Blog-on-Blogger-Step-18.jpg" /></a></div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 19:</span> <i style="font-weight: normal;"><span class="whb">You can adjust publishing, comments, archiving, 
permissions, and all other settings from within the sub-tabs located 
under the main “Settings” tab</span>.</i></h2>
</div>
<div>
<i style="font-weight: normal;"><br /></i></div>
<div>
<br /></div>
<div>
<h2>
<span style="background-color: #0b5394;">Step 20:</span> <i style="font-weight: normal;"><span class="whb">You can add new authors that are able to contribute to 
and edit your blog by clicking the “Settings” tab> “Permissions” 
sub-tab, and selecting “Add Authors”</span>.</i></h2>
</div>
<div style="text-align: right;">
<i>Source: <a href="http://www.wikihow.com/Start-a-Blog-on-Blogger" rel="nofollow" target="_blank">WikiHow</a></i></div>
<div>
<br /></div>
<div>
<br />
<br /></div>
</div>
</div>

How to Start a Blog on Blogger - Step by Step Guide with picture illustration

By Ashley Larrimore Blogger is an online service owned by Google that publishes single or multi-user blogs created entirely...