Cara Membuat Footer 3 Kolom Di Blog

 Cara Membuat Footer 3 Kolom Di Blog - Salam jumpa lagi dengan blog KUCOPAS ya sobat, Kali ini saya akan memberikan tutorial blog gratis dalam hal yang masih berhubungan dengan footer. Mari kita kupas habis cara-caranya membuat dan memasang footer di blog.

 Pada artikel posting sebelumnya saya sudah pernah menjelaskan tentang cara membuat dan memasang footer multi kolom dan juga footer 2 kolom di blog, Silahkan sobat bisa lihat artikelnya. Karena cara membuat dan memasang footer 3 kolom di blog tidak jauh berbeda dengan artikel yang sudah pernah saya terangkan sebelumnya, Yang berbeda hanyalah kode yang terakhir yang akan di tambahkan dalam edit html template blog sobat.

 Bagi sobat yang masih penasaran dengan footer 3 kolom yang akan kita buat nanti, Di bawah ini saya tunjukkan gambar screenshot footer 3 kolom pada dasboard tata letak blog.

 Oke sekarang kita langsung menuju ke tutorialnya cara memasang footer 3 kolom di blog, Silahkan sobat ikuti langkah-langkahnya dan jangan sampai ada yang terlewatkan sebagai berikut:

1. Langkah yang pertama, Silahkan sobat >> Masuk atau Login ke Blogger.com menggunakan akun sobat.
2. Setelah masuk, Silahkan sobat pilih blog yang akan di pasangi footer 3 kolom.
3. Pada Dashboard blog pilih menu >> Template, Kemudian >> Unduh template lengkap.
4. Jika sudah, Silahkan sobat klik >> Edit HTML >> Lanjutkan >> Centang "Expand Template Widget".
5. Kemudian cari kode ]]></b:skin> (Gunakan CTRL + F untuk mempercepat pencarian).
6. Setelah ketemu, Langkah yang selanjutnya silahkan sobat tambahkan semua kode berikut diatas atau sebelum kode ]]></b:skin>

---

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

---

7. Langkah yang ke tujuh, Masih dalam Edit HTML. Silahkan sobat cari kode berikut di bawah ini. (Gunakan CTRL + F kembali untuk memudahkan pencarian). Cari salah satu kode saja.

---

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/></div>

---

8. Jika sudah ketemu, Untuk membuat footer 3 kolom di blog, Sobat wajib dan harus menambahkan kode berikut dibawah atau sesudah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

---

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

---

*Catatan:
Jika pada template blog yang sobat gunakan tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> Maka tambahkan saja kode-nya dibawah atau sesudah kode <div id='footer'>

9. Sebelum sobat klik Simpan, Sebaiknya klik dulu Preview atau pratinjau. Jika tidak terjadi eror pada blog sobat saat edit html template, Silahkan sobat klik Simpan template.

10. Selesai dan lihat hasilnya pada Dashboard Tata letak blog sobat. Jika sudah jadi seperti yang ada pada contoh gambar screenshot diatas, Itu artinya sobat sudah berhasil Membuat Dan Memasang Footer 3 Kolom Di Blog sobat.

 Jika ada pertanyaan yang berhubungan dengan tutorial ini, Sobat jangan ragu untuk bertanya melalui form komentar yang tersedia. Semoga bermanfaat bagi sobat KUCOPAS semuanya, Selamat berkarya.

---

| Source By www.maskolis.com | Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Posting Blog

 Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Postingan Blog - Kali ini saya akan share artikel tips dan trik yang berhubungan dengan tutorial blog, Yaitu tentang cara menambah dua kolom widget di bawah postingan blog.

 Sedikit pengetahuan untuk sobat KUCOPAS semua, Menambah dan membuat dua kolom widget dibawah postingan blog ini merupakan panduan untuk para blogger yang memaksimalkan pada halaman postingan blog. Karena dengan menambah dua kolom widget dibawah postingan blog, Sobat dapat memaksimalkan serta mengisi ruang kosong yang ada dan menambahkan widget seperti yang sobat inginkan.

 Tehnik menambah dan membuat dua kolom widget dibawah postingan blog ini sudah banyak di gunakan oleh para blogger. Dan biasanya di dalam kolom widget mereka menambahkan atau mengisinya dengan iklan (sponsor), widget artikel terkait (related post), kotak berlangganan email dan juga widget-widget yang lain.

 Manfaatnya jika sobat menggunakan teknik menambah dan membuat dua kolom widget dibawah postingan blog ini adalah agar tidak menjejali atau memenuhi pemasangan widget pada sidebar blog yang bisa berpengaruh pada kecepatan loading blog saat di buka atau di kunjungi para visitor. Mungkin hal ini sering diabaikan dan tidak di perhatikan oleh para blogger karena keasikkan untuk mempercantik tampilan blog dengan widget-widget yang notabenya tidak telalu penting. Alhasil loading blog bisa menjadi sangat berat saat di buka atau di akses.

 Karena itu jika sobat tertarik untuk memaksimalkan halaman postingan blog, Sobat bisa melakukannya dengan menambah dan membuat dua kolom widget dibawah postingan blog. Lihat contoh gambar dua kolom widget dibawah postingan blog berikut ini.

DEMO

 Menambah dan membuat dua kolom widget dibawah postingan blog seperti gambar di atas caranya sangat mudah, Silahkan sobat ikuti langkah-langkah yang akan saya berikan tutorialnya secara detail dan jangan sampai ada yang terlewatkan berikut ini:

1. Silahkan sobat >> Masuk/Login >> ke akun blog sobat.
2. Pada "Dashboard" tampilan blog Baru, Pilih menu >> Template >> Edit HTML >> Lanjutkan.
3. Jangan lupa sobat "Centang" >> Expand Template Widget.
4. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).
5. Jika sudah ketemu, Letakkan semua kode script berikut tepat sebelum atau diatas kode ]]></b:skin>

.kucopas {{margin:5px 0px 10px 0px;padding:5px 0;clear:both;}}
.bawahkiri {float:left;width:47%;margin-right:5px;border: 1px solid #000000; padding: 5px; background: #3d85c6;-moz-border-radius:5px;}
.bawahkanan {float:right;width:47%;border: 1px solid #000000; padding: 5px; background: #3d85c6;-moz-border-radius:5px;}

Keterangan:

• #000000 adalah Kode warna untuk Garis tepi widget. Silahkan sobat ganti kode warnanya sesuai dengan keinginan sobat.
• #3d85c6; adalah Kode warna untuk Background widget. Silahkan sobat ganti kode warnanya sesuai dengan keinginan sobat.

6. Masih dalam Edit HTML, Silahkan sobat cari lagi kode <data:post.body/> (Gunakan CTRL+F untuk mempercepat pencarian).

7. Jika sudah ketemu, Letakkan semua kode script berikut tepat sesudah atau dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='kucopas'>
<div class='bawahkiri'>
Taruh Kode Script Widget atau tulisan Sobat di sini
</div>
<div class='bawahkanan'>
Taruh Kode Script Widget atau tulisan Sobat di sini
</div>
</div>
</b:if>

8. Sebelum di save atau di simpan, Silahkan sobat klik preview atau pratinjau terlebih dahulu, Guna untuk menghindari terjadinya eror saat Edit HTML pada Template blog sobat.

9. Jika hasil dari preview atau pratinjau tidak terjadi eror, Silahkan sobat klik >> Simpan Template >> dan lihat hasilnya pada postingan blog sobat, Disitu akan terlihat ada dua kolom widget tadi yang sudah sobat pasang.

Keterangan:

• Jika sobat tidak menggunakan fungsi  Readmore pada blog sobat, Maka letakkan kode script tersebut tepat sesudah atau dibawah kode <data:post.body/> yang pertama.

• Namun jika sobat telah menggunakan fungsi Readmore pada blog sobat, Maka akan ada dua kode <data:post.body/> atau lebih. Kemudian letakkan kode script tersebut tepat sesudah atau dibawah kode <data:post.body/> yang kedua atau terakhir.
• Warna PINK silahkan sobat ganti dengan Kode Script Widget atau tulisan sesuai dengan keinginan sobat.

Contoh Penerapan kode Widget:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='kucopas'>
<div class='bawahkiri'>
<center>KOLOM WIDGET KANAN
<H2>Artikel Terkait:</H2></center>
<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 = 10;
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>
</div>
<div class='bawahkanan'>
<center>KOLOM WIDGET KIRI
<H2>TRANSLATE</H2></center>
<!-- Begin TranslateThis Button -->

<center><div id='translate-this'><a class='translate-this-button' href='http://www.translatecompany.com/' style='width:180px;height:18px;display:block;'>translation</a></div>

<script src='http://x.translateth.is/translate-this.js' type='text/javascript'/>
<script type='text/javascript'>
TranslateThis();
</script></center>

<!-- End TranslateThis Button -->
</div>
</div>
</b:if>

Keterangan:

• Warna BIRU adalah Kode Script Widget bawah postingan sebelah KIRI yang saya pasang pada contoh DEMO. Silahkan sobat ganti dengan Kode Widget milik blog sobat sesuai dengan keinginan sobat.

• Warna PINK adalah Kode Script Widget bawah postingan sebelah KANAN yang saya pasang pada contoh DEMO. Silahkan sobat ganti dengan Kode Widget milik blog sobat sesuai dengan keinginan sobat.

 Jika sobat mengikuti langkah-langkahnya seperti apa yang sudah saya jelaskan tutorialnya diatas, Sampai disini saya rasa sobat pasti sudah bisa memasang atau menerapkan dua kolom widget dibawah postingan pada blog sobat. Namun bila sobat masih menemui kesulitan, Silahkan sobat bertanya pada form komentar yang tersedia.

 Semoga artikel posting tutorial blog tentang cara menambah dan membuat dua kolom widget dibawah postingan blog yang saya share ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog

 Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog - Setelah cukup lama saya tidak update posting blog, Kali ini saya akan kasih trik lagi seputar tutorial blog, Yaitu Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog.

 Sekedar wawasan untuk sobat, Kolom Elemen itu berbeda dengan Kolom biasa, Bedanya sobat bisa melihat di Elemen laman. Kalau kolom elemen pada elemen laman akan muncul elemen baru yang bisa sobat pasangi widget (Add Gadget atau Tambah Gadget) dan pastinya sobat bisa tanpa perlu edit HTML lagi, Namun kolom element tidak bisa di pasang dalam artikel atau postingan, Sedangkan kolom biasa adalah sebaliknya dan sobat bisa membaca artikel postingnya tentang Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Posting Blog disini.

Berikut di bawah ini adalah contoh gambar Dua Kolom Elemen yang berada pada Tata Letak (element Laman).

 Jika sobat tertarik ingin membuat dan memasangnya di blog sobat, Disini saya akan menerangkan secara detail Cara Membuat Dan Menambah Dua Kolom Elemen di Bawah Postingan Blog. Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan sobat >> Login/Masuk >> ke akun blog sobat.
2. Pada "Dashboard" tampilan blog baru, pilih dan klik menu >> Template >> Edit HTML >> Lanjutkan.
3. Jangan lupa sobat "Centang" >> Expand Template Widget.
4. Kemudian silahkan sobat cari kode #main-wrapper { (Gunakan CTRL+F untuk mempermudah pencarian).

Kurang lebih kodenya seperti dibawah ini:

#main-wrapper {
  width: 500px;
  float: $startSide;
margin:20px
  }

5. Letakkan atau taruh semua kode berikut, Setelah atau di bawah kode #main-wrapper {

#main {
width:500px;
float:center;
}
#main-left{
border:1px solid #000000;
padding:10px;
width: 225px;
float:left;
}
#main-right{
border:1px solid #000000;
padding:10px;
width: 225px;
float:right;
}

Sehingga kodenya jadi seperti di bawah ini:

#main-wrapper {
  width: 500px;
  float: $startSide;
margin:20px
  }
#main {
width:500px;
float:center;
}
#main-left{
border:1px solid #000000;
padding:10px;
width: 225px;
float:left;
}
#main-right{
border:1px solid #000000;
padding:10px;
width: 225px;
float:right;
}

6. Langkah yang selanjutanya masih dalam Edit HTML, Silahkan sobat cari lagi kode <div id='main-wrapper'> (Gunakan CTRL+F untuk mempercepat pencarian).

Kurang lebih kodenya seperti dibawah ini:

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

7. Lalu silahkan sobat sisipkan atau letakkan kode berikut, di bawah atau setelah kode </b:section>

<b:section class='main-left' id='main-left' style='width: 225px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 225px; float: right;'>
</b:section>
</div>

Sehingga kodenya jadi seperti di bawah ini:

<div id='main-wrapper'>
<div id='main'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='main-left' id='main-left' style='width: 225px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 225px; float: right;'>
</b:section>
</div>
</div>

Catatan:

• width: 225px Adalah Lebar kolom yang sobat buat, Silahkan sobat atur Nilainya agar sesuai dengan Template atau keinginan sobat.

7. Sebelum sobat klik Simpan, Ada baiknya sobat klik >> Preview atau Pratinjau terlebih dahulu, Agar bisa antisipasi jika terjadi kesalahan eror saat Edit HTML dalam Template blog sobat.

8. Jika Preview atau Pratinjau tidak mengalami eror, Silahkan sobat klik >> Simpan dan lihat hasilnya pada elemen laman.

9. Jika sudah ada dua kolom Add Gadget atau Tambah Gadget di bawah postingan, Berarti trik yang sobat buat berhasil dengan sempurna. Lihat contoh gambar saya yang sudah berhasil Membuat Dan Menambah Dua Kolom Elemen di Bawah Postingan Blog.

 Setelah berhasil membuat dan menambah dua kolom di bawah posting blog, Sekarang sobat bisa bebas mengisinya dengan widget atau apapun dengan cara langsung klik Add Gadget atau Tambah gadget seperti yang sobat inginkan.

Update:

• Jika Kode diatas tidak ada pada template blog sobat, Solusinya silahkan sobat baca artikel postingan saya tentang Cara Membuat Dan Menambah Dua Kolom Widget Di Bawah Posting Blog.

---

| Supported by http://kuc0pas.blogspot.com |

---