1. Login ke account blogger anda,

2. Pada dashboard, pilih edit layout–> edit HTML

3. Centang Expand widget template

4. Cari kode seperti dibawah ini, lebih mudah bila anda menggunakan ctrl+F

<p><data:post.body/></p>

5. Lalu sisipkan kode2 berikut persis dibawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<DIV class='rbbox'>
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

6. Simpan perubahan

Sampe sini anda sudah bisa membuat related post dibawah posting blogspot anda

Custom domain adalah nama domain dengan TLD yang kita pilih untuk mempersingkat url pada blogspot kita.  kita bisa memilih salah satu dari sekian banyak TLD berbayar  (Top Level Domain) semisal .com, .net, info, .org dan lain2. selain itu ada pula beberapa yang menyediakan domain ini secara gratis, misalnya .co.cc dan co.nr.  yuk kita mulai ….

Cara Setting Custom Domain di Blogspot

Ada 4 langkah dalam tutorial blogspot ini yang perlu dilakukan untuk melakukan setting custom domain di blogspot

1.  Registrasi Domain.

Pertama kali adalah memilih dan registrasi nama domain yang sesuai. Sebaiknya memilih nama domain yang sesuai dengan konten blog anda. Banyak tempat yang bisa anda pilih untuk melakukan pembelian domain name ini (registrar). Tentang tatacara atau prosedur registrasi domain,  anda bisa meminta bantuan dari support masing2 registrar.

2. DNS Management

Jika anda tidak memiliki hosting sendiri, ada beberapa layanan dns management gratisan yang bisa anda pilih. Saya sendiri merekomendasikan DNSpark.

• Registrasi ke dnspark disini
• isi semua formulir dengan data2 anda
• setelah semua proses registrasi, login ke kesini.
• Kemudian pada Configuration Menu -> pilih DNS Hosting -> Add Domains
• Pilih yang no 2 yaitu Enter a domain:
• Kemudian pada Enter new domain: masukan nama domain kita tanpa www, misal belajarngeblog.com, seperti gambar dibawah. (klik gambar untuk zoom)



• Lalu klik add now untuk menyimpan perubahan
• Selanjutnya klik DNS Hosting -> Edit Domains lalu klik nama domain anda



• Setelah itu dibagian Add Records, pada kolom Type, ganti dengan CNAME, pada kolom Alias Name isi dengan www, lalu pada kolom Destination Name diisi dengan ghs.google.com. untuk lebih jelasnya, lihat gambar dibawah :



• Lalu jangan lupa klik update all untuk menyimpan perubahan
• Sampe disini, langkah2 di dnspark.net sudah selesai.

3. Manage Name Server

Langkah selanjutnya dalam tutorial blogspot ini adalah mengarahkan nameserver domain baru anda tadi ke nameserver dnspark.net. Setiap domain registrar kadang mempunyai cara yang berbeda untuk melakukan setting name server ini. Saya akan memberikan contoh setting pada domain registrar saya, mudah2an settingnya sama dengan anda

• Login ke domain registrar anda, kemudian cari link yng menuju ke domain management, akan tampak seperti gambar dibawah ini



• Jika setting anda berbeda dari gambar diatas, mudah saja, yang penting anda memasukkan setting name server sebagai berikut

Primary nameserver       :   ns1.dnspark.net
Secondary nameserver  :   ns2.dnspark.net

• Jika masih mengalami kesulitan, anda bisa minta tolong support registrar untuk merubah name server tersebut

4. Setting Pengalihan Domain pada Blogger

Langkah selanjutnya dari Setting Custom Domain ini adalah melakukan pengalihan domain blogspot pada account blogger anda ke custom domain

• Login ke Blogger disini http://draft.blogger.com
• Pada Dashboard Klik Settings >> Publishing.
• lalu pada halamnan publishing tersebut, klik Switch to Custom Domain, lalu klik advanced settings
• kemudian masukkan domain baru anda, lengkap dengan www



• Klik Save Settings untuk menyimpan perubahan

Anda mungkin tidak langsung bisa seketika menggunakan nama domain anda tadi, proses propagasi DNS ( pengalihan nameserver ) dari registrar anda ke dnspark.net  membutuhkan waktu beberapa jam, maksimal 48 jam

Nah, semua tahapan tutorial blogspot tentang Cara Setting Custom Domain di Blogspot telah selesai anda lakukan, anda kini memiliki blog dengan nama domain anda sendiri.

Semoga bermanfaat..

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… C: wait… SD: wait…

Cara Membuat Recent Comments Menggunakan JavaScript

• Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Page Element
• Klik Add a Gadget dimana anda akan menaruh Recent Comments ini pada blog anda
• Beri Judul/Tittle Recent Comments atau Komentar terakhir kemudian Copy dan Paste kode JavaScript dibawah ini pada kotak yang disediakan

<script style="text/javascript" src="http://www.belajarngeblog.com/script/showrecentcomments.js">
</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://namabloganda.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

• Ganti namabloganda dengan nama blog anda sendiri
• Klik Save dan lihat hasilnya

Semoga tutorial blogspot tentang cara membuat buat recent comments dengan menggunakan Javascript bisa bermanfaat buat anda

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… C: wait… SD: wait…

• Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
• Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
• Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

• Kemudian cari kode widget seperti dibawah ini

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

• Pada Script diatas, tambahkan script yang dicetak tebal seperti dibawah ini

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;
max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

• Save template
  
• kemudian buka Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste script di bawah ini pada kotak yg disediakan :

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

• Sekarang kembali lagi ke Layout -> Edit HTML, centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan, kemudian  cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini :
  

<b:widget id='HTML13' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

• Klik Save dan lihat hasilnya.

<form id="searchform" action="http://BlogAnda.blogspot.com/search" name="searchform" method="get">
<input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>

Tulisan BlogAnda pada kode diatas harus anda ganti tentunya dengan alamat blog anda sendiri yang ingin di pasangi seacrh engine.  Selain itu, ada juga yang bisa anda ubah yaitu di bagian kode –> value=”Search”. Tulisan Search ini adalah tulisan yang akan muncul pada tombol search engine, apabila sobat ingin mengubahnya, silahkan ubah dengan keinginan, contoh : tulisan tersebut ingin di ubah menjadi Cari atau Go.

Untuk cara pemasangan sama seperti kode HTML lainnya, anda bisa memasukannya melalui add a Gadget pada Page Element di tempat yang anda sukai, kemudian pilih HTML/Javascript. Jangan lupa klik Save

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… C: wait… SD: wait…

• Silahkan Login ke http://draft.blogger.com dengan ID blogger anda. Ingat! bukan login ke blogger.com tapi ke draft.blogger.com karena fasilitas ini masih dalam tahap uji coba.
• Kemudian pilih blog yang ingin anda edit, masuk Settings >> Commnets. Pada opsi Comment Form Placement pilih Embedded below post sepeti gambar dibawah



• Kemudian klik Save Settings

Kemudian coba lihat apakah kotak komentar anda sudah muncul dibawah posting, bila sudah, brarti selesai bila belum muncul, maka ikuti cara2 berikut ini

• Pada posisi di dashboard blogger, klik link Layout kemudian masuk ke Edit HTML
• Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
• Kemudian cari kode2 dibawah ini :

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>

• Kemudian hapus kode2 diatas dan gantikan dengan kode2 dibawah ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if> </p> </b:if>

• Klik Save dan lihat hasilnya.

Nah, sekarang anda sudah bisa membuat kotak komentar dibawah posting

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… C: wait… SD: wait…

• Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
• Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
• Masukkan kode berikut sebelum atau diatas  kode CSS  } ]]></b:skin>

/* hilangkan navbar
—————————– */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

• Klik tombol Simpan Template
• Selesai.
• Atau bisa juga dengan cara menaruh kode berikut persis di bawah kode <body> :

<style type=’text/css’>
#navbar-iframe {display:none;}
</style>

Apabila anda ragu2 untuk menghilangkan secara permanen Navbar tersebut anda bisa menggunakan autohide pada navbar tersebut

Cara AutoHide Navbar Blogger :

• Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
• Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
• Masukkan kode berikut sebelum atau diatas  kode  body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

• Klik tombol Simpan Template
• Selesai.

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… C: wait… SD: wait…

Membuat Read More di Blogspot

• Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
• Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
• Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin>seperti dibawah ini :

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

• Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template anda dan tambahkan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

• Nah supaya terpotong, setiap kali anda menulis artikel posting, klik pada bagian artikel dimana anda  pengen tulisan Read More.. muncul, lalu  ketik <span class=”fullpost”> kemudian lanjutkan sisa artikel  sampai selesai, akhiri dengan mengetik  </span>.  Untuk menmbahkan kode ini, ketika menulis artikel, anda harus dalam mode Edit HTML bukan Compose
• Tulisan Read More.. seperti yang berwarna merah pada kode diatas, bisa anda ganti dengan tulisan lain seperti Baca Selengkapnya.. atau Lanjut Baca..

Contoh Penulisan Posting

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. <span class=”fullpost”> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik </span>

Hasil akhir posting akan tampak seperti ini :

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. Read more..

1. Login ke akun blogger anda  dan pilih blog mana yang akan anda buat recent comments
2. Pilih Layout (tata letak) >>  Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda.
3. Pilih Feed dan masukkan alamat url feed berikut, http://bloganda.blogspot.com/feeds/comments/full,  kemudian  pilih continue/lanjutkan,  jangan lupa mengganti tulisan yang dicetak tebal dengan nama blog anda



4. Jika Muncul pop up window, Isikan title/judul : label widget anda (misal : komentar terbaru, recent comments dll,) Show : jumlah komentar yang akan ditunjukkan (max 5 item), anda bisa menampilkan atau tidak tanggal dan pembuat komen dengan mencentang kotak item date dan item source/author



5. Klik Save dan lihat hasilnya.

Cara membuat Recent Post atau Artikel/Posting Terbaru

1. Login ke akun blogger anda  dan pilih blog mana yang akan anda buat recent comments
2. Pilih Layout (tata letak) >>  Add Page Gadget (tambah elemen halaman) pada sidebar atau dimana saja sesuai keinginan anda.
3. Pilih Feed dan masukkan alamat url feed berikut, http://bloganda.blogspot.com/atom.xml,  kemudian  pilih continue/lanjutkan,  jangan lupa mengganti tulisan yang dicetak tebal dengan nama blog anda



4. Jika Muncul pop up window, Isikan title/judul : label widget anda (posting terbaru, recent post dll,) Show: jumlah posting yang akan ditunjukkan (max 5 item), anda bisa menampilkan atau tidak tanggal dan pembuat komen dengan mencentang kotak item date dan item source/author



5. Klik Save dan lihat hasilnya.

Semoga Bermanfaat

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… C: wait… SD: wait…

#outer-wrapper {
background:url(“http://www.blogblog.com/dots/bg_3dots.gif”) no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
display: none;
}
#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
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 */
}
#main {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Kemudian ganti dan tambahkan pada baris2 tersebut, sesuai dengan yg bertanda merah dibawah ini

#outer-wrapper {
background:url(“http://www.blogblog.com/dots/bg_3dots.gif”) no-repeat 275px
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
display: none;
}
#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
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 */
}
#main {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
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 {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
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 */
}
#newsidebar {
background:url(“http://www.blogblog.com/dots/bg_dots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
50px;

Dots Dark Template

Pengguna Dots Dark template akan menemukan baris2 dibawah ini :

#outer-wrapper {
background:url(“http://www.blogblog.com/dots_dark/bg_3dots.gif”) no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
display: none;
}
#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
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 */
}
#main {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Ganti atau tambahkan baris2 diatas jadi seperti ini ( yang bertanda merah )

#outer-wrapper {
background:url(“http://www.blogblog.com/dots_dark/bg_3dots.gif”) no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
display: none;
}
#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
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 */
}
#main {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
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 {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
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 */
}
#newsidebar {
background:url(“http://www.blogblog.com/dots_dark/bg_minidots2.gif”) 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Dots dan Dots Dark Template

Modifikasi2 berikut ini berlaku untuk kedua templates diatas,
terus turun kebawah, kita akan menemukan baris2 kode berikut ini

/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #sidebar, body#layout #sidebar-wrapper {
padding: 0;
width: 240px;
}

ganti baris diatas dengan baris2 ini :

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper,
body#layout #main {
width: 400px;
padding: 0px;
margin: 0px;

}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper,
body#layout #sidebar,
body#layout #newsidebar {
width: 150px;
padding: 0px;
}

Kemudian, terus kebawah, cari baris2 seperti dibawah ini,
dan ganti/tambahkan dengan kode-kode berikut, warna hijau brarti ganti, warna merah brarti tambahkan

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
</b:section>
</div>

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

<div id=’newsidebar-wrapper’>
<b:section class=’sidebar’ id=’newsidebar’ preferred=’yes’>
<b:widget id=’NewProfile’ locked=’false’ title=’About Me’ type=’Profile’/>
</b:section>
</div>

Sekarang coba preview template anda, anda akan melihat sidebar baru di sebelah kanan blog anda dengan isi profile anda (jika anda men-nonaktifkan sharing profil anda, aktifkan sementara)
Jika anda sudah puas dengan tampilan baru blog anda, klik Save Template,

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… C: wait… SD: wait…