Center Your Blog Header

1.  First go to  TEMPLATE > CUSTOMIZE > ADVANCED > ADD CSS

2.  Copy & Paste the code


#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

Remove "Powered by Blogger"

How to remove "Powered by Blogger" by hiding it:

One way of removing "powered by Blogger" from your blog is to hide it.

To do so, simply add this rule to your template:

#Attribution1 {display: none;}


Note:  Hiding elements on your blog can have downsides, if the search-engines think that you are trying to deceive them.   Use this technique at your own risk.


Mobile template blogs:

The approach above only works on your non-mobile template.   If you have enabled a custom mobile template, you can either use the standard way of removing your attribution from your mobile blog, or by adding a 2nd rule:

.mobile #Attribution1 {display: none;}

Blogger Static Home Page

Seems like there's always an unusual case where you want to create a Blogger blog with a static home page instead of the reverse order blog posts instead. I see this question quite often in the forums and support pages of other sites. Though this isn't a typical configuration for Blogger, the recent changes in the new layout editor have made this easier than ever without having to spend time editing the template code as you had in the past.

Add the Static Home Page

The first step is to simply create a static page in Blogger called something like 'Home Page' from the Blogger Pages menu item. Don't call it 'Home' yet because we're going to alter the home link later. When you click on the 'Pages' left menu item in the Blogger editor main menu you'll see that there is already a 'Home' link on the screen. Ignore that for now--just go up to the 'New Page' drop down box and select the 'Blank page' option:

You'll now be in the Page editor which looks a lot like the Blogger Post editor. At the top enter a page name such as 'Home Page' or 'Main Page' for now and some default text - we'll alter it later. Just go ahead and press 'Publish':

You should now see two pages in your list; 'Home' and 'Home Page' like so:

Now that you've created a static page, the next steps are are a bit tricky since you need to make sure your static page becomes 'Home' and the old Home link is hidden especially if you want to use menus.

Redirecting the Blogger Home Page to a Static Page

The great thing about the new Blogger template is that you can redirect pages to other pages now in the 'Settings' menu. Oddly, it is buried deep within the Blogger settings under 'Search Preferences':

Go ahead and choose the 'Edit' text link just to the right of the 'Custom Redirect' item. Now, this is a very critical step - be sure to enter the following text into the From: and To: boxes in the Redirect dialog:

In the From: box enter only a forward slash - "/". In the To: box enter the exact page name - in our case it was "/p/home-page.html". All Blogger static pages have a /p in front of the URL. You can see that the html name was the page title we used, so if you used something else for your title like 'Main Page' then the html would be /p/main-page.html.

Go ahead and press the little 'Save' text link and then the 'Save changes' button highlighted in the image above. What's now going to happen is that your main URL will redirect to the static page you've created. Go ahead and try to access your blog now - you should go directly to the new static page from the main URL.

All is good, right?? Well, not quite. If you want to enable visible tabs for Pages on your template the problem is going to be that you'll have two menu items called 'Home' and 'Home Page' on the tab bar both redirecting to your static page.  However, if you don't care to add Pages as tabs (they're not enabled by default) - you can stop at this point. Your static home page is ready to go!

Enabling Tabs for a Static Blogger Homepage

The very last step is to hide the original Home page link and add a page link to your blog pages so that the visible tabs work correctly. First, enable tabs from the Pages menu:

Be sure to press 'Save arrangement' in the upper right of the screen (not seen here)!  When you go to your home page you should now see the tab bar across the top of your blog. However, now when you click on either Home or Home Page you're going directly to your new static page. What you have to do at this point is hide the original 'Home' Page using the Layout editor. Open the Layout using the editor from the Blogger main menu:

Choose the 'Edit' text link in the Pages item within the layout. This is going to allow you to hide particular pages. Once you open the Pages layout editor you'll notice that you can hide certain pages:

Be sure to un-select the check box right next to the 'Home' page to make sure it stays hidden. Press 'Save' to hide that particular tab.

The final step is to add another Page that links to the blog posts directly. This isn't something you have to do - your blog posts can still show on the right sidebar in the layout. However, if you do want to get back to the main blogging page that has the last posts together, you'll need to add a link back to them. Once we changed the Home page link to the static page there's no longer any links to the main Posts page.

NOTE (March 2014): Blogger has moved this function from the Pages section below to the Pages Gadget above. You don't add external links here but add them in the Gadget - will be updated soon. Go back into the main Blogger Page menu to add your link back as a menu tab. The first thing you'll notice is that the old Home page is now Hidden:

The key final step here is that you will be creating a 'Web Address' page instead of an actual Page. Create a new web address page called something like 'My Blog' to be your link to the Posts like this:

The link you need to enter is simply your full main, blog page URL (in my example page it is http://statichomepage.blogspot.com) with the addition of '/index.html' added to the end of it like this:

You're done!! If you look at your blog now, you'll see the top tab bar now has a Home link and a My Blog linked correctly to the right pages. I've created a sample site to show you the final outcome. Just click on the picture here to see it. Enjoy!!!

UPDATE (3 weeks later): Please take a look at my more recent post onHow Google indexes a Blogger Static Home Page

Hide Blogpost From Homepage

So to remove the blog posts from the home page alone.

First go to Dashborad => Design =>Edit HTML (Edit Template HTML)

The style sheet declarations end after the "]]></b:skin>" .

So just search for the "]]></b:skin>" and add the code that comes after the red color ,as shown.



]]></b:skin>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
.post, .sidebar, #blog-pager {display:none;}
</style>
</b:if>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
body#layout .sidebar {display:inline;margin-top:200px;}
</style>
</b:if>



Note that you are hiding both side bar and your posts here. To hide your posts alone and keep you sidebar intact  remove the .sidebar from  .post, .sidebar  from above piece of code in first block.

Cara Membuat Blog Komik Online di Blogspot

Bonus Template Komik Online di Blogger/Blogspot - Serial blog project kembali hadir, sebuah serial pembuatan blog profesional secara detail dan komplit, menggunakan mesin tercinta kita blogger atau blogspot. Lewat serial blog project ini saya berharap pengguna blogger tidak perlu berkecil hati karena blogger tetap bisa dimanfaatkan secara luas untuk banyak hal, jika kita kreatif. Oke kita mulai.

LIHAT DEMO | DOWNLOAD TEMPLATE

Step by step:

1. Membuat Blog di Blogger

2. Pasang Script Image Selector untuk Komik Online

3. Tutorial Posting

Sampai langkah ini Anda sudah bisa membuat sebuah blog Komik Online.

4. Membuat Halaman Manga List (optional)

5. Bonus Template (optional)

1. Membuat Blog di Blogger

Paling awal, Anda harus memiliki sebuah blog. Mulai buat!

2. Pasang Script Image Selector di Blogger **

Letakkan script berikut di atas </head>

<script src='https://googledrive.com/host/0B69aOIwUyEZmTDVPc1J6c2lBZEk' type='text/javascript'/>

Akan lebih baik lagi jika script tersebut di host sendiri (baca: Host JavaScript di Google Drive)

3. Tutorial Posting

Posting dalam mode HTML, bukan mode compose. Masukkan script berikut ini ke postingan Anda:

<div id="comiccover"><img src="#"></div>
<div id="controlimage"><a href="javascript:void(showPrevious());">Previous Page</a><span ID="index">index</span><a href="javascript:void(showNext());">Next Page</a></div>
<span ID="page">page</span>
<span ID="caption">caption</span>
<script language="javascript">
addPhoto("#", "", "1");
addPhoto("#", "", "2");
addPhoto("#", "", "3");
addPhoto("#", "", "4");
addPhoto("#", "", "5");
</script>

<script language="javascript">initPhoto();</script>

Keterangan:

-  ID comiccover, berguna untuk setting gambar komik yang muncul di homepage. Ganti pagar berwarna merah pada baris pertama dengan URL gambar yang ingin ditampilkan pada homepage.

- ID controlimage, baris berwarna hijau tidak perlu Anda rubah, karena itu navigasi otomatis untuk membaca komik.

- span ID page, lokasi penampilan komik dan ID caption untuk memberikan keterangan pada gambar komik. Sebaiknya tidak usah diubah.

- addPhoto, bagian ini adalah isi konten komik. Ganti yang berwarna merah dengan alamat gambar komik. Isikan seterusnya berurutan. Anda bisa menambahkan halaman lain tidak terbatas dengan menambahkan script berikut: addPhoto("#", "", "5"); angka 5 ganti dengan angka 6 dan seterusnya.

 - Jadi, yang perlu Anda rubah pada script di atas hanya pada bagian #.

Agar tidak susah payah menulis script dasar tersebut berulang-ulang, Anda bisa menambahkannya ke template Postingan (Setelan -> Pos dan Komentar -> Copykan kode di atas ke Templat Entri -> Simpan)

NB: Jika Anda menggunakan template sendiri, maka perlu ditambahkan kode berikut ini di atas </head>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <style>#comiccover {display:none}</style></b:if>

4. Membuat Halaman Manga List (optional)

Untuk membuat halaman manga list silahkan tambahkan CSS berikut ini ke template Anda, letakkan di atas

]]></b:skin>

#subheadpost {position:relative;margin-right:10px;float:left;}
#subheadpost header {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: 15px;
    padding: 0 5px;
    position: absolute;
    width: 120px;}

#subheadpost h5 {
    color: #C00C0C;
    float: left;
    font-family: Arial,sans-serif;
    font-size: 11px;
    font-weight: 700;
    height: 5px;
    margin: 0;
    text-shadow: 1px 1px 1px #0B0B0B;
    width: 100%;
}
#subheadpost h6 {
    color: #FFFFFF;
    float: left;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    padding-bottom: 10px;
    text-shadow: 1px 1px 1px #0B0B0B;
}

Buatlah sebuah static page/laman kemudian posting dalam mode HTML, masukkan script berikut:

<div id="subheadpost"><a href="#"><img width="140px" height="190px" src="#"><header><h5>Action</h5><h6>TORIKO</h6></header></a></div>

Keterangan:

- # pertama ganti dengan URL tujuan, misalkan halaman label

- # kedua ganti dengan alamat gambar, misalkan gambar naruto

- Action ganti dengan label komik, misal petualangan

- TORIKO ganti dengan judul komik

- Tambahkan kode serupa di bawahnya jika ingin menambahkan kotak list mangan yang lain

5. Bonus Template

Jika Anda menggunakan template ini, maka

- Anda tidak perlu menambahkan script image selector. Sudah terinstal

- Anda tidak perlu menambahkan script NB pada poin 3

- Anda tidak perlu menambahkan CSS pada poin 4

- Belum ane SEO-in, SEO ini sendiri ya :D maklum cepet2 editnya.

Link download templatenya ada di atas ya! Kalau tidak bisa didownload kabari saya lewat facebook.

** Script Image Selector

/*
======= Photo Viewer 2.30 ========
==== Created by Josh Freedman ====
====  Web 1 Marketing, Inc.   ====
====   Copyright (C) 2005     ====
====   All rights reserved.   ====
====  www.web1marketing.com   ====
==================================

Use of these scripts is free so long as you include proper
attribution (the block above) and a link from your site to
www.web1marketing.com.

Use these scripts at your own risk. The author assumes no
responsibility for support or for consequences of their use.

Comments and suggestions welcome: www.joshfreedman.com.

IT IS HIGHLY RECOMMENDED THAT NO CHANGES BE MADE TO THIS FILE AND
THAT ALL PARAMETER VALUES BE CUSTOMIZED IN THE PHOTO_LIST.JS FILES.

==== Version Notes ====
Version 2.30 Added optional index parameter
Version 2.22 Fixed clickMode and imageAlt behaviors
Version 2.21 Moved precaching image to bottom of page
Version 2.20 Added showFirst, showLast, click page to advance, caption as page ALT text
Version 2.13 Added slideshow features
Version 2.12 Parameterized ID's, wrapping optional
Version 2.11 Added caching of next image
Version 2.10 Added index functionality
Version 2.00 Functional browsing of images forward and back
*/

// ====================
// ==== Parameters ====
// ====================
var showIndex = new Boolean(true); // Enable index display
var indexSeparator = ' '; // String between index items
var showCaption = new Boolean(true); // Enable caption display
var preCache = new Boolean(true); // Activates pre-caching of next page
var pictureID = 'page'; // SPAN or DIV ID for page
var captionID = 'caption'; // SPAN or DIV ID for caption
var indexID = 'index'; // SPAN or DIV ID for index
var wrapOn = new Boolean(true); // Wrapping from last page to first and vice-versa
var slideMode = new Boolean(false); // Enables slideshow mode
var slideDelay = 10; // Default delay between slides inseconds
var clickMode = new Boolean(true); // Disable image clicking to advance
var imageALT = new Boolean(true); // Disable caption as image ALT tag text

// ==========================
// ==== Third Party Code ====
// ==========================

/*
Webmonkey GET Parsing Module
Language: JavaScript 1.0

Source: Webmonkey Code Library
(http://www.hotwired.com/webmonkey/javascript/code_library/)

Author: Patrick Corcoran
Author Email: patrick@taylor.org
*/

function createRequestObject() {
 FORM_DATA = new Object();
 // The Object ("Array") where our data will be stored.
 separator = ',';
 // The token used to separate data from multi-select inputs
 query = '' + this.location;
 query = query.substring((query.indexOf('?')) + 1);
 // Keep everything after the question mark '?'.
 if (query.length < 1) { return false; }  // Perhaps we got some bad data?
 keypairs = new Object();
 numKP = 1;
 while (query.indexOf('&') > -1) {
  keypairs[numKP] = query.substring(0,query.indexOf('&'));
  query = query.substring((query.indexOf('&')) + 1);
  numKP++;
 }
 keypairs[numKP] = query;
 for (i in keypairs) {
  keyName = keypairs[i].substring(0,keypairs[i].indexOf('='));
  // Left of '=' is name.
  keyValue = keypairs[i].substring((keypairs[i].indexOf('=')) + 1);
  // Right of '=' is value.
  while (keyValue.indexOf('+') > -1) {
   keyValue = keyValue.substring(0,keyValue.indexOf('+')) + ' ' + keyValue.substring(keyValue.indexOf('+') + 1);
   // Replace each '+' in data string with a space.
  }
  keyValue = unescape(keyValue);
  // Unescape non-alphanumerics
  if (FORM_DATA[keyName]) {
   FORM_DATA[keyName] = FORM_DATA[keyName] + separator + keyValue;
  } else {
   FORM_DATA[keyName] = keyValue;
  }
 }
 return FORM_DATA;
}

FORM_DATA = createRequestObject();

// =============================
// ==== The heart of it all ====
// =============================


var glbCacheTimer;
var glbSlideTimer;

// Contains index of the current page, initialized to the first page (1)
var glbCurrentPhoto = 1;

// Array holding page filenames
var photos = new Array ();

// Array holding page captions
var captions = new Array ();

// Array holding link names
var linkNames = new Array ();

function getObjectByID(id) {
  // Cross-browser function to return the object with the specific id

  if (document.all) { // IE
    return document.all[id];
  } else { // Netscape
    return document.getElementById(id);
  }
}


function showPhoto(index) {
  // Shows the page with identified index
  var theURL = "" + this.location;

  // Strip parameters, if any present, from end of URL.
  if (theURL.indexOf("?")>0) {
    theURL = theURL.substring(0,theURL.indexOf("?"));
  }

  // Append the new page index as a parameter.
  theURL += "?page=" + index;

  // Append the slideshow mode as a parameter.
  if (slideMode == true) {
    theURL += "&slideMode=true";
    theURL += "&slideDelay=" + slideDelay;
  }

  // Go to the constructed URL which has the new
  // page's index as a parameter.
  this.location = theURL;
}

function showNext() {
  if (glbCurrentPhoto >= photos.length) {
    if (wrapOn == true) {
      glbCurrentPhoto = 1;
      showPhoto (glbCurrentPhoto);
    }
  } else {
    glbCurrentPhoto += 1;
    showPhoto (glbCurrentPhoto);
  }
}

function showPrevious() {
  if (glbCurrentPhoto <= 1) {
    if (wrapOn == true) {
      glbCurrentPhoto = photos.length;
      showPhoto (glbCurrentPhoto);
    }
  } else {
    glbCurrentPhoto += -1;
    showPhoto (glbCurrentPhoto);
  }
}

function showFirst() {
glbCurrentPhoto = 1;
showPhoto (glbCurrentPhoto);
}

function showLast() {
glbCurrentPhoto = photos.length;
showPhoto (glbCurrentPhoto);
}

function initPhoto() {
  // Display the page
  var pageLocation = getObjectByID(pictureID);
  var imgString = '';

  if (clickMode == true) {imgString += "<a href='javascript:void(showNext());'>";}
  imgString += "<img border='0' id='mainImage' src='"+ photos[glbCurrentPhoto-1] +"'";
  if (imageALT == true) {imgString += ' alt="'+captions[glbCurrentPhoto-1].replace(/"/g,"'").replace(/<[^>]*>/g,"")+'"';}
  imgString += ">";
  if (clickMode == true) {imgString += "</a>";}
  pageLocation.innerHTML = imgString;

  // Create caption if enabled.
  if (showCaption == true) {
    var pageCaption = getObjectByID(captionID);
    pageCaption.innerHTML = captions[glbCurrentPhoto-1];
  }

  // Build the index if enabled.
  if (showIndex == true) {buildIndex();}

  // Pre-cache if enabled.
  if ((preCache == true) && (glbCurrentPhoto < photos.length)) {
    // Start timer for cache loader routine to check if main image is loaded
    glbCacheTimer = setTimeout('cache(' + glbCurrentPhoto + ');', 500);
  }

  // Slideshow mode, if enabled.
  if (slideMode == true) {
    glbSlideTimer = setTimeout('showNext();', (slideDelay * 1000));
  }
}

function cache(pageID) {
  // Check to see if main image has loaded
  if (getObjectByID('mainImage').complete) {
    // Clear the timer
    clearTimeout(glbCacheTimer);
    // Load the next image.
    getObjectByID('cache').src= photos[pageID];
  } else {
    // Not loaded, so reset timer
    glbCacheTimer = setTimeout('cache(' + glbCurrentPhoto + ');', 500);
  }
}

function addPhoto(filename, caption, linkName) {
  // Add filenames and captions to their respective arrays.
  var len = photos.length;
  photos[len] = filename;
  captions[len] = caption;
  if (typeof linkName == "undefined") {
linkNames[len] = len + 1;
  } else {
linkNames[len] = linkName;
  }
}

function buildIndex() {
  // Creates a clickable list of image numbers.
  var indexString = '';
  var i;

  for (i = 1; i < photos.length+1; i++) {
    // If not the first page, add separator
    if (i>1) {indexString += indexSeparator}
    // Make current page # bold and don't make it a link
    if (i == glbCurrentPhoto) {
      indexString += '<b>' + linkNames[i-1] + '</b>';
    } else { // Make all other numbers links
      indexString += '<a href="javascript:void(showPhoto(' + i + '));">' + linkNames[i-1] + '</a>';
    }
  }
  // Display the index
  getObjectByID(indexID).innerHTML = indexString;
}

function enableSlideMode (newDelay) {
  // Turns slide mode on
  slideMode=Boolean(true);
  if (newDelay > 0) {
    slideDelay = newDelay;
  }
  showPhoto(glbCurrentPhoto); //necessary to reset URL parameters.
//  glbSlideTimer=setTimeout('showNext();',(slideDelay*1000));
}

function disableSlideMode() {
  slideMode = Boolean(false);
  clearTimeout (glbSlideTimer);
  showPhoto(glbCurrentPhoto); //necessary to reset URL parameters.
}

// Get page index from URL, if there is one, otherwise start at 1
if (FORM_DATA["page"]>0) {
  glbCurrentPhoto = Number(FORM_DATA["page"]);
} else {
  glbCurrentPhoto = 1;
}

// Get slide mode from URL, if there is one
if (FORM_DATA["slideMode"] == "true") {
  slideMode = Boolean(true);
  slideDelay = FORM_DATA["slideDelay"];
}

indexSeparator = ' / ';