Tampilan Widget Hanya Muncul Pada Home Page Blog

Rendy-Pc Share Tampilan Widget Hanya Muncul Pada Home Page Blog, maksudnya sebuah widget bisa kita setting hanya tampil pada home page saja, sedangkan pada artikel widget tersebut tidak ikut tampil.

Untuk memilah widget hanya tampil pada halaman utama atau homepage saja, perlu penambahan kode perintah supaya widget tersebut hanya muncul pada halaman utama atau homepage. Script ini bisa kita terapkan misalnya pada Tab View Blogspot.

Kode perintah tersebut kita sisipkan pada bagian widget yang kita ingin tampilkan pada halaman utama atau homepage, dibawah ini langkah dan kode yang perlu ditambahkan adalah sebagai berikut.

• Loggin ke akun blogger
• kemudian masuk menu Design
• Edit HTML/Edit Template 
• Ceklist expand template widget 
• Sebelum melakukan penambahan didalam template, sebaiknya backup dulu template kalian, gunanya untuk mengembalikan template kepada keadaan semula bila terjadi kesalahan, caranya dengan mendownload full template

Selanjutnya pilih widget yang akan kita munculkan pada bagian homepage saja, selain Tab view kita bisa ambil contoh widget Recent Comment setelah ketemu sisipkan 2 baris kode sebagai perintah supaya hanya muncul pada halaman utama atau homepage saja. 

Untuk jelasnya perhatikan baris kode widget recent comment, kode yang berwarna merah adalah kode untuk memunculkan widget supaya hanya muncul di homepage.

<b:widget id='HTML2' locked='false' title='recent comment' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- 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>

Kemudian save template, sekarang widget hanya akan muncul pada halaman utama atau homepage, bila kita masuk ke salah satu halam post widget tersebut tidak akan muncul

Semoga bisa semua ya sobat.

Read more »

Cara Membuat 3 Kolom Diatas Footer

Terkadang kita sudah tidak ada tempat untuk menambahkan widget baru dikarenakan tempatnya sudah penuh, Tidak ada solusi lain kita harus mengetahui bagaimana Cara Membuat 3 Kolom Diatas Footer. tapi untuk mengatasi hal diatas bisa juga kita membuat Membuat Tab View Blogspot untuk blogspot.

Kali ini Rendy-PC akan share bagaimana cara menambah 3 kolom diatas footer. dan mudah-mudahan semuanya teman-teman pemula seperti kami ini bisa menerapkannya pada blognya masing-masing.

Membuat 3 Kolom Diatas Footer
1. Masuk ke akun Blogger kita.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.
4. Cari kode ]]></b:skin>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.
6. Copy kode di bawah ini dan paste di atas kode tersebut.

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

7. Cari kode <!-- end content-wrapper -->.Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.
8. Copy kode di bawah ini dan paste di atas kode tersebut. 

<div id='box-main-container'>
<div id='box1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col4' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col5' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col6' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

9. Klik tombol Save
10. Kemudian lihat hasilnya.

Salam

Read more »

Cara Membuat Label Blogspot Nofollow

Perihal ini sudah terjadi pada Blog Kami yang lain, dimana URL pada Archive Blogspot tidak boleh di indeks oleh robot mesin pencari google karena ini adalah salah satu masalah besar, google menganggap kita melakukan duplicate content.

Kali ini Rendy-PC setelah hasil dari blog walking bisa menambahkan ilmu sedikit tentang bagaimana trik Cara Membuat Label Blogspot Nofollow.

Memahami Karakteristik Label Blogger, label Blogger/Blogspot bukan berupa link yang bersifat permanent (permalink) melainkan link yang hanya terbentuk sebagai hasil perintah pencarian dan pengelompokan posting-posting dengan label tertentu.

Oleh karena itu, bagi search engine (terutama Google) link-link semacam ini bukan merupakan link yang sah untuk diindeks. Untuk menghindarkan proses indeks terhadap link label, atribut nofollow perlu ditambahkan pada semua label, termasuk link label yang dimasukkan di dalam badan posting/artikel.

Dengan memberikan atribut nofollow pada label, diharapkan Proses Optimalisasi SEO Blogspot menjadi lebih maksimal, Hal seperti ini sudah so pasti menjadi tujuan para sobat bloger

Berikut Caranya : 

• Login ke blogger.com
• Klik design
• Dari halaman page element, klik Edit HTML 
• Download full template dulu buat backup agar jika melakukan kesalahan maka bisa kita restore ulang
• Centang Expand Template Widget, kemudian cari kode seperti berikut:

data:label.url' rel='tag'><data:label.name/></a>

• Dan yang seperti ini:

data:label.url'><data:label.name/></a>

• Silakan beri tag nofollow pada kode-kode tersebut sehingga seperti berikut:

data:label.url' rel='nofollow'><data:label.name/></a>

• Save Template,
• Selesai

Note:
Sekali lagi, me-nofollow-kan label pada blogspot bertujuan untuk menghindari munculnya keterangan restricted by robots.txt di google webmaster tool

Semoga Manfaat

Read more »

Cara Membuat Recent Comment dengan JavaScript

Melanjutkan postingan terdahulu Cara Membuat Recent Comment Bawaan Blogspot, kali ini Rendy-PC juga posting artikel yang hampir sama tentang Recent Comment, tapi kali ini Recent Comment nya dengan menggunakan JavaScript.

Scrip ini kami ambil dari rekan blogger belajarngeblog.com, setelah saya coba sendiri pada blog ini dan berhasil, nggak ada salahnya juga kan kalaupun saya ingin membagi tipsnya kepada teman-teman. Kenapa saya memakai JavaScript, dan bukan tampilan komentar bawaan dari blogspot?

Kelebihan menggunakan JavaScript ini adalah excerpt (potongan) isi komentar, judul posting yang dikomentari maupun komentatornya dapat dimunculkan sekaligus.

Membuat Recent Comments Java Script:

• Login ke akun blogger, klik Rancangan kemudian masuk ke Element Laman
• Klik Tambah 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://rendy-pc.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

 Ganti http://rendy-pc.blogspot.com/ dengan nama blog Sobat sendiri

• Kemudian klik simpan
• Dan lihat hasilnya.

Semoga Manfaat

Read more »

Cara Membuat Tab View Blogspot

Banyak sih sebenarnya fungsi dari tab view ini, selain memperindah penampilan blog, tab view juga dapat mengurangi space/ruang yang berlebihan pada blog kamu. Dan pastinya tidak memberatkan sebuah blog.

Cara Membuat Tab View :

1. Login terlebih dahulu ke blogger.com

2. Klik Rancangan --> kemudian Edit HTML --> Tambah Gadget --> HTML/Javascript

3. Salin kode berikut ini, dan letakkan didalamnya

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px; /* Lebar Menu Utama Atas */
text-align:center ; height: 26px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #555555; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */
font-weight:bold; color:#fff; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Title 1</a>
<a>Title 2</a>
<a>Title 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">

Isi menu tab view 1

</div>
</div>
<div class="Page">
<div class="Pad">

Isi menu tab view 2

</div>
</div>
<div class="Page">
<div class="Pad">

Isi menu tab view 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

4. Atur tinggi, lebar, warna, dan sesuaikan dengan templates blog kita

5. Simpan

6. Selesai.

Semoga Manfaat

Read more »