Menampilkan Judul Posting Pada Label dan Arsip

Dari judulnya saja Menampilkan Judul Posting Pada Label dan Arsip di atas sudah ketahuan maksudnya. Yap intinya kita hanya membuat Judul Posting Pada Label dan Arsip saja. Ini bertujuan untuk menghemat waktu loading blog kita untuk dijelajahi pengunjung. Sehingga blog kita mudah dan komplit untuk di pelajari.

OK langsung saja cara menampilkan Judul Posting Pada Label dan Arsip. Cara ini saya dapatkan dari blog bukan rahasia tapi sudah saya edit dengan penambahan title agar lebih SEO. Kata para master gitu gan.

Berikut cara Menampilkan Judul Posting Pada Label dan Arsip

1. Masuk ke dashboard > Design/Rancangan > Klik 'expand widget template'.

2. Cari kode: <b:include data='post' name='post'/> (Ctrl+F)

3. Ganti dengan script ini:

<!--Judul post saja di label dan arsip-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<h3 class='title-only'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--sejuta trik.blogspot.com-->

4. Save template HTML.
5. Tunggu ame bener2 loadingnya selesai lho gan,
6. Coba dicek hasilnya dengan klik salah satu label dan arsip



*Jika ingin menampilkan judul posting saja khusus di label, ambil perintah pada b if cond label dan b include posting saja:

<!--Judul posting saja di label-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--sejuta trik.blogspot.com-->

*Jika ingin menampilkan judul posting saja khusus di arsip, ambil perintah pada b if cond archive dan b include posting saja:

 <!--Judul posting saja di arsip-->
 <b:if cond='data:blog.pageType == "archive"'>
    <h3 class='title-only'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></a></h3> 

<b:else/> 

<b:include data='post' name='post'/> 

</b:if> 

<!--sejuta trik.blogspot.com-->

-Cara memasukkan scriptnya sama dengan cara yang telah disebutkan di atas.

Nah seperti itulah Cara Menampilkan Judul Posting Pada Label dan Arsip semoga berhasil dan bermanfaat!

read more...

Cara Membuat Breadcrumb

Saat mencari tutorial SEO Blogger, ada yang mengharuskan Membuat Breadcrumb di Blog, Nah setelah dicari-cari ternyata ketemu, tapi saat mencari gambar, kan penasaran kalau tidak ada gambarnya, eh malah nemu kaya gambar di atas. Ternyata Breadcrumb ada juga selain trik blogger. Malah makanan, hi hi hi, baru tau, 

Sebenarnya apasih breadcrumb? saya sendiri belum begitu paham arti dan fungsi breadcrumb itu sendiri. Penting apa gak sih breadcrumb ini bagi blogger? Kalau saya sendiri breadcrumb ini tidak terlalu penting bagi blog, karna hanya menunjukkan urut-urutan dimana artikel kita berada. Sebagai contoh home, (label blog kita) trus halaman posting. Gak penting kan, Tapi kata master2, breadcrumb ini sangat penting untuk menunjang SEO blog kita agar lebih enak di akses oleh google atau search engine lain.

Ada banyak cara membuat breadcrum ini, baik silakan pilih saja dari 2 cara berikut :

# Cara pertama

1. Login ke blogger.com
2. Klik Tata Letak.
3. Pilih tab Edit HTML
4. Click Download Full Template and
please back up your template first.
5. Kemudian beri tanda centang
pada kotak kecil di samping
tulisan Expand Template Widget.
6. Silahkan cari kode ]]></b:skin>
7. Copy lalu paste kode di bawah
ini persis di atas kode ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double
#e6e4e3;
}

8. Silahkan cari kode berikut pada
template anda :
<div class='post hentry uncustomized-post-template'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

10. Kemudian Save Template.

# Cara Kedua

Cara ini yang paling simpel :

Cari kode 

<b:if cond='data:post.title'> (dan semoga ada, He)

Lalu tambahkan kode berikut, tepat dibawahnya kode tadi

<b:if cond='data:blog.pageType == "item"'>
<a href='http://buwel.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<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>
&#187;
</b:if>
<data:post.title/>
</b:if>

Dan tinggal ganti alamat http://buwel.blogspot.com diatas dengan alamat blog anda
trus klik simpan templet dan selesai.

Nah, seperti itu Cara Membuat Breadcrumb, semoga bermanfaat

Thanks to :

http://abdulroqib.blogspot.com/2009/11/cara-membuat-breadcrumb-navigation.html

http://cah-cikrik.blogspot.com/2010/04/cara-membuat-navigasi-breadcrumb-versi.html

read more...

Mengubah Ukuran Font Header Blogger

Mengubah Ukuran Font Header Blogger berikut adalah mengubah tanpa menambah dari google font, hanya mengganti atau mengubah ukurannya saja. Namun bagi yang ingin mengubah font header blogger dengan font khusus web, silakan mencari di gugel, ketik google font.

Ok gak usah lama lama, langsung aj cari kode yang seperti ini :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Rubah variabel text-transform sesuai keinginan.
- uppercase = huruf besar semua
- lowercase = huruf kecil semua
- atau normal

Simpan template.

Catatan:
- Untuk merubah cara penulisan deskripsi blog, cari dan rubah kode text-transform pada baris kode berikut:

    #header .description {
    margin:0 5px 5px;
    padding:0 20px 15px;
    max-width:700px;
    text-transform:uppercase;
    letter-spacing:.2em;
    line-height: 1.4em;
    font: $descriptionfont;
    color: $descriptioncolor;
    }

- Untuk memudahkan pencarian baris kode, gunakan “kotak pencari”, tekan Ctrl + F, lalu ketikan baris kode yang dicari dan tekan enter. Browser yang digunakan disini adalah Internet Explorer (IE). Untuk browser lain, “kotak pencari” letaknya sedikit berbeda. 

Thanks to : asal ngelog.net

read more...

Membuat Widget Multi Tab View

Dari Sekian banyak tutorial yang saya baca, cara Membuat Multi Tab View yang paling srek di hati saya adalah totorial milik blog angga. Multi tab view ini diartikan sebagai widget tab menu dengan tiga kolom.

Oleh karena itu setelah saya praktekkan 3 hari ini, maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang bagaimana Cara Membuat Tab View Menu 3 Kolom di Blog atau multi tab view.

hasilnya seperti di bawah ini:

Sesuai judulnya Multi Tab View Menu 3 Kolom, berarti dalam satu tampilan sidebar widget akan ada 3 buah widget (bisa apa saja, contoh: Buku Tamu, script Top Post atau Komentar, Kumpulan Banner dan sebagainya), cara ini juga akan membuat blog sedikit lebih rapi dan tidak banyak menguras tempat.

Ok, buat teman-teman yang ingin membuat Multi Tab View Menu 3 Kolom ini, silahkan ikuti langkah-langkah di bawah ini:

Cara pertamax :
1. Login ke akun Blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode berikut: ]]></b:skin>
4. Lalu copy kode di bawah ini dan taruh persis berada di atas kode tadi:

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

5. Jika sudah maka lanjutkan dengan mencari kode ini: </head>
6. Lalu copy kode di bawah ini dan pastekan di atas kode tadi:

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

7. Save templates dan lanjutkan ke langkah selanjutnya,

8. Klik Design/Rancangan >> Page Element >> Add a Gadget >> HTML/Javascript,

9. Copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript lalu atur (edit) sesuai dengan keterangan masing-masing:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

10. Jika dirasa sudah benar, lalu Save. (Jika dilakukan dengan benar maka hasilnya akan seperti milik saya).



Cara ke-2 Bagi sobat yang tidak mau otak-atik html, cukup tambah gadget, berikut solusinya :
Cara Membuat Multi Halaman atau multi tab view tanpa edit html
 
Pergilah ke Dashboard, lalu pilih Tata Letak,kemudian pilih Add New Widget/Tambah Gadget/Element Baru,pilih HTML/Javascript.

Letakkan kode berikut:

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://scriptforyou.googlecode.com/files/tabview.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

Seperti itulah Cara Membuat Multi Tab View Menu 3 Kolom di Blog, dari sejuta trik blogger semoga bisa bermanfaat dan selamat mencoba. Apabila sudah membuat widget multi tab view atau menu tiga kolom ini ingin dihilangkan pada halaman posting, atau hanya menampilkan pada halaman home page saja, buka posting terdahulu saya di
http://www.uki-cool.blogspot.com/2011/03/cara-membuat-widget.html 

Happy Blogging!
by. Sejuta Trik Blogger

read more...

Daftar Ping Service Terbaik

Dalam meningkatkan SEO Blog sahabat. Perlu adanya Ping berkala ke Search Engine. Nah berikut ini Sejuta Trik Blogger punya Daftar Ping Service Terbaik buat kamu!



1. Ping-0-matic http://pingomatic.com/

2. Pingler http://pingler.com

3. Pingoat http://pingoat.com

4. PingMyBlog http://www.pingmyblog.com

5. Feed Shark http://feedshark.brainbliss.com

6.  Pingates http://pingates.com

7. Google http://www.googleping.com

8. Bing http://www.bing.com/webmaster/ping.aspx?siteMap=http://sejutatrik.blogspot.com/atom.xml

9. My Pagerank http://mypagerank.net/service_pingservice_index


Sementara yang terkenal atau familiar dahulu tentang daftar ping service terbaik. Selanjutnya akan update dengan jasa ping gratis lain.

Update :

10. Autopinger http://autopinger.com/

11. Ping. In http://ping.in/

12. Getrank http://www.getrank.org/google-ping/

Jangan Lupa, Setelah melakukan Ping, silakan cek juga di PAGERANK CHACKER TOOLS

Untuk Menjelajahi isi Blog, Silahkan Kunjungi DAFTAR ISI

Untuk memilih warna jika menggunakan kode,
Silakan Kunjungi TOOLS KODE WARNA HTML

Happy Blogging!
by. Sejuta Trik Blogger

read more...