2016 Blog Platform Rundown

We focus mainly on Blogger blogs here, but wanted to do a quick review of a few of the other popular blogging platforms for 2016.

WordPress
WordPress is by far the market leader in the blogging and CMS space. More than 20% of all websites are powered by WordPress. WordPress can be used for anything from a simple blog to a more complex CMS solution that powers a major news site (CNN). If you are unfamiliar with WordPress we recommend the tutorial for starting blog by Scott Chow, which is posted on his site

Medium
The Medium platform is one of the newest choices for bloggers, and it offers some distinct advantages. The main advantage is for content creators who really want the focus to be on the quality of their content, not on web design. The simple layout of Medium achieves this flawlessly, and the platform also makes it easier to get your content noticed and to network with other bloggers.

Indose Blogger Template Installations Guide

Template Name: Indose Blogger Template


# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below
<ul id='pagemenu'>
<li><a href='/'>Home</a></li>
<li><a href='http://indose-fbt.blogspot.com/p/test-static-page.html'>Test Static Page</a></li>
<li><a href='#'>EDIT</a></li>
<li><a href='#'>EDIT</a></li>
<li><a href='#'>EDIT</a></li>
</ul>
Change "blue text" with your link anchor/url
Change "red text" with your text anchor

Stylish-O Blogger Template Installations Guide

Template Name: Stylish-O Blogger Template


# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below
<ul class='sf-menu' id='menu-main'>
<li><a href='/index.html'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='http://stylisho-fbt.blogspot.com/p/test-static-page.html'>Test static page</a></li>
</ul>
Change "blue text" with your link anchor/url
Change "red text" with your text anchor

How to add Blogger Page Pagination

#Go to "EDIT HTML"
Copy the css code below and paste this just before the closing </b:skin>
.showpageArea {
padding:10px;
}
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 5px;
padding:5px;
background:#fff;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#f0f0f0;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #f0f0f0;
margin:0 5px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 5px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:5px;
background:#fff;
}
.showpage a:hover {
text-decoration:none;
background:#f0f0f0;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Simply Delicious Blogger Template Installations Guide

Template Name: Simply Delicious Blogger Template


# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below
<ul id='navigation'>
<li><a href='/index.html'>Home</a></li>
<li><a href='#'>Category</a>
<ul>
<li><a href='#'>Label 1</a></li>
<li><a href='#'>Label 2</a></li>
<li><a href='#'>Label 3</a></li>
<li><a href='#'>Label 4</a></li>
<li><a href='#'>Label 5</a></li>
</ul>
</li>
<li><a href='http://simplydelicious-fbt.blogspot.com/p/test-static-page.html'>Test Static Page</a></li>
<li><a href='#'>Subscribe</a>
<ul>
<li><a href='#' target='_blank'>Twitter</a></li>
<li><a href='feeds/posts/default'>RSS Feed</a></li>
</ul>
</li>
</ul><!-- /#navigation -->
Change "blue text" with your link anchor/url
Change "red text" with your text anchor

# SETUP SOCIAL NETWORK ICONS AT BOTTOM
Go to "Edit HTML" page
Search the codes like below
<div id='icons'>
<a href='#' target='_blank'><img alt='Twitter' height='26' src='http://2.bp.blogspot.com/-GL9rD_XrMEc/T4QDN9dkkdI/AAAAAAAACWE/N_2RY33R7IQ/s1600/icon-twitter.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Facebook' height='26' src='http://2.bp.blogspot.com/-aLyGYnl5f48/T4QBcFijpNI/AAAAAAAACUk/Lc38TMXQ2gI/s1600/icon-facebook.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Dribbble' height='26' src='http://2.bp.blogspot.com/-ygnta5OWDzo/T4QBa07AaDI/AAAAAAAACUc/hnsLI4h77gE/s1600/icon-dribbble.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Tumblr' height='26' src='http://1.bp.blogspot.com/-qcerlqbuDuQ/T4QBi-Ob6FI/AAAAAAAACU8/-fdI6qHQRMU/s1600/icon-tumblr.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Last FM' height='26' src='http://1.bp.blogspot.com/-hMAVTq_TIE4/T4QDMOP6gNI/AAAAAAAACV0/ew9K9W9JKa0/s1600/icon-lastfm.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Flickr' height='26' src='http://1.bp.blogspot.com/-yy3QuxNWiAg/T4QBe2M2gFI/AAAAAAAACUs/HARfuHiOAL4/s1600/icon-flickr.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Behance' height='26' src='http://1.bp.blogspot.com/-dslR8Mlcw3o/T4QBZw8DoJI/AAAAAAAACUQ/he3kGn8mJGw/s1600/icon-behance.png' width='26'/></a>

</div><!-- /#icons -->
Change "#" with your social network url

# CHANGE DEFAULT IMAGE FOR POST WITH NO IMAGES
Go to "Edit HTML" page
Search this image url
http://4.bp.blogspot.com/--6gqxSC_1P4/T4QHfT0snFI/AAAAAAAACWo/mA7WKxLMsnY/s1600/017.jpg
just replace that url with your image url.

Blucent Blogger Template Installations Guide

Template Name: Blucent Blogger Template


# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below
<ul class='menu' id='dropmenu'>
<li id='home'><a href='/index.html' title='Home'>Home</a></li>
<li><a href='http://blucent-fbt.blogspot.com/p/test-static-page.html'>Test Static Page</a></li>
<li class='menu-item'><a href='#'>Dropdown Parent</a>
<ul class='sub-menu'>
<li><a href='#'>Child 1</a></li>
<li><a href='#'>Child 2</a>
<ul class='sub-menu'>
<li><a href='#'>Grand Child 1</a></li>
<li><a href='#'>Grand Child 2</a>
<ul class='sub-menu'>
<li><a href='#'>Grand Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Change "blue text" with your link anchor/url
Change "red text" with your text anchor

MagzNote Blogger Template Installations Guide

Template Name: MagzNote Blogger Template


# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below
<div class='menu-1-container' id='mainmenu'>
<ul class='menu' id='menu-1'>
<li class='current_page_item'><a href='/index.html'>Home</a></li>
<li><a href='#'>About</a>
<ul class='sub-menu'>
<li><a href='#'>test1</a>
<ul class='sub-menu'>
<li><a href='#'>Test4</a></li>
</ul>
</li>
<li><a href='#'>Test3</a></li>
</ul>
</li>
<li><a href='#'>themes</a></li>

<li><a href='#'>Advertise</a></li>
<li><a href='/p/test-static-page.html'>Test Static Page</a></li>
</ul>
</div>
Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDE FEATURE
It's up to you want to use the slide feature or not. To add the slide feature, just go to "Page Elements", "Add a Gadget"(see picture below), choose "HTML/JavaScript", the copy the code below then paste it.

<div id="slider-wrap">
<script type='text/javascript'>
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
function showgalleryposts(json) {

document.write('<div class="slider-wrap">');
document.write('<div id="main-photo-slider" class="csw"><div class="panelContainer">');
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul>');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if("content"in entry_gal){
var postcontent_gal=entry_gal.content.$t;
}

s = postcontent_gal;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
var thumburl_gal = d;
}
else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';
var _no=i+1;
document.write('<div class="panel" title="'+posttitle_gal+'">');
document.write('<div class="wrapper">');
document.write('<a href="'+ posturl_gal + '"><img src="'+thumburl_gal+'" alt="temp" width="620px" height="270px"/></a>');
document.write('<div class="photo-meta-data"><span>'+posttitle_gal+'</span><br>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
}
else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0,quoteEnd_gal);
document.write(postcontent_gal + '...');
}
}
document.write('</div>');
document.write('</div>');
document.write('</div>');
}
document.write('</div>');
document.write('</div>');
for (var i = 0; i < numposts_gal; i++) {
if (random_posts == true){
var random_int = Math.floor(Math.random()*json.feed.entry.length);
var entry_gal = json.feed.entry[random_int];
}
else{
var entry_gal = json.feed.entry[i];
}
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if("content"in entry_gal){
var postcontent_gal=entry_gal.content.$t;
}

s = postcontent_gal;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
var thumburl_gal = d;
}
else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';
<!-- Note this caption is before the image, all others it is after -->
var _no=i+1;
if (_no==1){
document.write('<a href="#'+_no+'" class="cross-link active-thumb"><img src="'+thumburl_gal+'" class="nav-thumb" alt="temp-thumb" width="30px" height="20px" />'+posttitle_gal+'</a>');
document.write('<div id="movers-row">');
}
else{
document.write('<div><a href="#'+_no+'" class="cross-link"><img src="'+thumburl_gal+'" class="nav-thumb" alt="temp-thumb" width="30px" height="20px"/>'+posttitle_gal+'</a></div>');
}
}
document.write('</div>');
document.write('</div>');

}
</script>
<script style="text/javascript">
var numposts_gal = 7;
var numchars_gal = 300;
var random_posts = false; // random posts
</script>
<script src="/feeds/posts/default/index_orderby_published_ampalt_json_in_script_ampcallback_showgalleryposts_ampmax_results_999999.html"></script>
</div>
var numchars_gal = 300; <-- Number of characters of summary.
var random_posts = false; <-- set it "true" for random posts

Ashen Blogger Template Installations Guide

Template Name: Ashen Blogger Template


# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below
<div class='menu-1-container' id='mainmenu'>
<ul class='menu' id='menu-1'>
<li class='current_page_item'><a href='/index.html'>Home</a></li>
<li><a href='#'>About</a>
<ul class='sub-menu'>
<li><a href='#'>test1</a>
<ul class='sub-menu'>
<li><a href='#'>Test4</a></li>
</ul>
</li>
<li><a href='#'>Test3</a></li>
</ul>
</li>
<li><a href='#'>themes</a></li>

<li><a href='#'>Advertise</a></li>
<li><a href='/p/test-static-page.html'>Test Static Page</a></li>
</ul>
</div>
Change "#" with your link anchor/url
Change "red text" with your text anchor

#Slideshow "Random Articles" integrated

If you want to change the setup, go to "Edit HTML" and search this code and change the value
var numposts_gal = 6;
var numchars_gal = 300;
var random_posts = true;
numposts_gal = 6; <-- Number of posts to show
numchars_gal = 300; <-- Number of summary character to show
random_posts = true; <-- set it "false" to show recent posts