Quick Guide To Setup A Beautiful MyFunDarkSide (Blogspot Theme)

My Fun Dark Side is a proud blogspot blog, a blogspot commoner. MyFunDarkSide is using only default minima (white) template, yet with some code edited. Here, it is not my specialty to produce a whole complete new blogspot theme but by understanding some coding on the (blogspot html is just a simple sheet), you can alter, change, remove, edit and modify it like a professional. Okay, I am producing a simple guide on how to beautify/edit blogger minima template, let you see on how MyFunDarkSide theme is made.




First of all, set up a blog like usual, and then choose pick a template, choose the simplest white minima template, save it.

Then, the rest is what necessary about and how to do the coding without messing here and there. Play with the CSS. Go to Layout, choose Edit HTML (Download full template as a backup if anything goes wrong). Now you are ready to alter the css, you don't need to Expand Widget Template because you are not going to alter the widget yet, you are going to edit the simple css on this minima theme.

It is appreciated if you can understand blogger HTML template structure:
Body
--Outer-wrapper
----Header-wrapper
------Blog Title
------Blog Description
------Other widgets
----Content-wrapper
----Sidebar-wrapper (1,2,3...)
----Main-wrapper
------Date Header
------Posts
--------Post Title
--------Post Content (or called Post Body)
--------Post Footer (Author, Labels, etc)
------Comments
------Feed Link
------Other widgets (mostly ad units)
--Footer-wrapper
----Footer text (disclaimer, copyrights, etc)
----Other widgets
1. Remove blogger navigation bar by placing a simple code.

#navbar-iframe {
display: none !important;
}

2. Completely remove minima blog header.

Find this code:
#header-wrapper {
width:660px;
margin:0 auto 10px;
}
Add the blue code inside so it will become like below:
#header-wrapper {
width:660px;
margin:0 auto 10px;
display:none;
}

3. Now your blog header is gone. Recover it by placing an add elements (place as many add element you like) on the header column.

Find the code below right after <body> :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Fun Dark Side (Header)' type='Header'/>
</b:section>
</div>
Modify (2, 3 or more, yes, unlock the column)
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='My Fun Dark Side (Header)' type='Header'/>
</b:section>
</div>
Now you can add a gadget into your header column like the sidebar. As for me I am inserting the MyFunDarkSide header image. Add A Gadget > Html/Javascript.
<a href="http://your-blog-url.blogspot.com/"><img src="Your-uploaded-image-url-here.jpg" title="my fun dark side? lol" /></a>
or use this one for embeding ads on top of your blog header.

<div style="background: url(Blog header image here); height:80px; width:728px; float:left;">

<div style="float:left; padding:10px 0 0 30px; width:200px; height:60px;"><a href=&quot;http://myfundarkside.blogspot.com/"><img src="Transparent image for homepage click here" title="My Fun Dark Side? lol" width="200px" height="60px" /></a></div><div style="padding:10px 10px 0 0; float:right; left:468px; height:60px;">Adsense Here</div>

</div>

4.Change the width of your wrapper. (your blog and sidebar width). Change it to whichever you like it to be, wider or smaller. Here "your outer wrapper width must be bigger than the main wrapper width plus(+) your sidebar width". Also change the backgroud color as your eyes want it to be. Also you can insert border and anthing. eg:
#outer-wrapper {
background:#FFFFFF;
border:1px solid #95A4C4;
width: 728px;
margin:10px auto;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 480px;
padding:0 10px 0 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background: #ECEFF5;
border-left: 1px solid #95A4C4;
width: 207px;
margin-top:17px;
padding:10px 10px 10px 10px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

P/S: Padding is the space between the edge of the column to its inner content, in order - top, right, bottom, left.
Margin is the space between the edge of the column to their neighbouring column/outer contents. Editing order - top, right, bottom, left.

5. Also goes to the footer, change it like the way you edit the above wrapper. Below is the simple code for MyFunDarkSide after removing everything unnecessary.
/* Footer
----------------------------------------------- */
#footer {
  width:728px;
}

6. Change the background colour of the blog to bluish.
/* Use this with templates/template-twocol.html */

body {
background:#D0D7DF;
 or you can use background image by inserting the code like tutorial here.


Okay done.! Save everything. Now you are going to alter/edit the widget. Layout > Edit HTML + tick on Expand Widget Templates.

7. Remove the annoying Subscribe to Post (Atom).

Scroll down and remove the highlighted text.
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
scroll u, and insert the highlighted text.
.feed-links {
clear: both;
line-height: 2.5em;
display:none;
}
Preview. Save.

Some widget?
8. Place something inside your blog post. floating social bookmark or ads etc. Find the code below located at the near halfway of your HTML sheet:
<data:post.body/>
If you want to place something on the the upper post, just place your code (social bookmark, ads etc) right above the code. If you want your code (social bookmark, related post, etc) below your post text, insert the desired code below the above code. You can't insert javascript code directly though, so you must convert everything first by using html converter before inserting anything on top or on the bottom of the above code.

Eg: Placing addthis like MyFunDarkSide (It is above the <data:post.body/>) .
<div class='post-body entry-content'>

<div style='float:right; border:1px solid #336699; padding:6px 4px 2px 4px; margin:2px;'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_compact' href='http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4babc82e3b220397'>Share</a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_facebook'/>
<a class='addthis_button_twitter'/>
<a class='addthis_button_favorites'/>

</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4babc82e3b220397' type='text/javascript'/>
<!-- AddThis Button END -->
</div>

<data:post.body/>

9. Place floating Image/Ads anywhere on your blog.Go to Layout > Page Elements > Add a Gadget > HTML/Javascript anywhere.

Eg. MyFunDarkSide Ads on the right.
<div style="position:fixed; top:7px; right:7px; border:1px solid #95A4C4; padding:5px 5px 5px 5px; background:#FFFFFF;">
Your Contents here
</div>
P/S: Blue: You can either use top or bottom
Red: You can either use left or right
Purple:  insert or not is up to you.

10. Insert Multi Tabbed widget on the sidebar. Read here.

Done! Tada... You have completed your easy guide. Thanks.

1 comment:

  1. I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

    ReplyDelete