Cara Membuat Meta Otomatis di Setiap Postingan / Posting Blog

Cara Membuat Meta Otomatis di Setiap Postingan / Posting Blog

Memasang Meta Tag Secara Otomatis di Setiap Posting Blog

Tutorial Seo kali ini bukan membahas membuat meta tag seperti yang pernah diposting beberapa waktu lalu.
Kemarin sudah dishare pula membuat meta tag secara manual dalam langkah agar blog lebih seo friendly.
Seperti membuat meta tag secara manual untuk keyword dan description,namun meta ini kadang hanya berfungsi untuk halaman depan saja sedang untuk setiap posting serp Google hanya membaca keyword yang kita ciptakan.
Ada solusi menarik untuk membuat meta tag di setiap posting secara otomatis tanpa kita merubah meta tag untuk halaman utama.

Ilustrasi:

Saya memiliki blog dari blogger dengan:

Nama :rssmu.blogspot.com
Keyword:Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.
Description:Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.

Seperti pada posting membuat meta y_key,saya sudah menerapkan meta tag ini saya menggunakan meta tersebut,yakni akan menjadi:

<meta content='Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.' name='description'/>
<meta content='Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.' name='keywords'/>

Dan hasil dalam serp,saat saya mengetik nama rssmu.blogspot.com nantinya akan tampil seperti ini:

Namun,dari teknik membuat meta tag secara manual diatas,kurang efektiv karena saat serp membaca judul posting yang tampil tetap memiliki deskripsi yang sama.
Nah,untuk membuat meta agar setiap posting memiliki deskripsi / description yang berbeda-beda alias setiap posting memiliki deskripsi sendiri,sobat bisa ikuti langkah berikut ini:

Pilih Dashboard sobat,lalu pilih Tata Letak kemudian cari kode:
<title><data:blog.pageTitle/></title> yang biasanya letaknya diatas kode <b:skin><![CDATA[/*,agar sobat tidak bingung karena template yang telah diubah-ubah,posisi kode <title><data:blog.pageTitle/></title> sobat bisa lihat gambar dibawah ini:

Rubahlah kode <title><data:blog.pageTitle/></title> tersebut dengan meta berikut:


<b:if cond='data:blog.pageType == &quot;index&quot;'>

<title><data:blog.pageTitle/></title>
<meta content='TULIS DESKRIPSI BLOG SOBAT.' name='description'/>
<meta content='TULIS KATA KUNCI BLOG SOBAT,PISAHKAN DENGAN TANDA KOMA' name='keywords'/>

<b:else/>

<title><data:blog.pageName/> | JUDUL UTAMA BLOG SOBAT</title>
<meta expr:content='data:blog.pageName + &quot;,TULIS DESKRIPSI BLOG SOBAT&quot;' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;,TULIS KALIMAT APA SAJA YANG NANTINYA AKAN MENJADI DESKRIPSI SETIAP POSTING&quot;' name='Keywords'/>

</b:if>

Untuk prakteknya / contohnya ,hasil dari membuat meta tag otomatis setiap posting ini untuk blog rssmu.blogspot.com akan menjadi seperti ini:


<b:if cond='data:blog.pageType == &quot;index&quot;'>

<title><data:blog.pageTitle/></title>
<meta content='Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.' name='description'/>
<meta content='Kumpulan dari rss blog kamu ada di - RssMU - It is your RSS. ' name='keywords'/>

<b:else/>

<title><data:blog.pageName/> | RssMu</title>
<meta expr:content='data:blog.pageName + &quot;,adalah salah satu kumpulan dari rss blog kamu ada yang ada di RssMU - rssmu.blogspot.com.&quot;' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;,adalah salah satu kumpulan dari rss blog kamu ada yang ada di RssMU - rssmu.blogspot.com.&quot;' name='Keywords'/>

</b:if>

Dan hasil dari serp untuk setiap posting nantinya akan terlihat seperti gambar berikut ini:




Gimana gan,mau mencobanya meta tag otomatis seperti ini?

( Label: blogspot ) Read more

Script Untuk Daftar Isi Blog / Situs (SiteMap)

Script Untuk Daftar Isi Blog / Situs (SiteMap)

Membuat Daftar Isi Blog dengan Javascript

Masih ingat dengan script daftar isi ciptaan abu farhan beberapa waktu lalu yang sampai saat ini beliau masih menjadi rujukan para blogger senior?

Kali ini tidak jauh berbeda,mungkin kamii hanya njiplak kali ya (copas lagi dah!),namun script ini memang sangat efektif,untuk contoh fisiknya,sobat bisa lihat di SINI

Cara menerapkannya pun sangat mudah,hanya lakukan posting seperti biasa,letakkan script dan sobat bisa lihat hasilnya.

Langkah dan Cara Memasang / Membuat Script Daftar Isi Blog

Pertama,sobat kunjungi dashboard lalu pilih 'New Post'


Lihat Gambar lebih Besar di SINI

Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'


Lihat Gambar lebih Besar di SINI

Kemudian letakkan script daftar isi berikut:

<link rel="stylesheet" href="http://mrpujiajadeh.comze.com/index-blogger-script.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://mrpujiajadeh.comze.com/index-blogger-script.js"></script>
<script src="http://pelajaran-blog.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Dan beri nama pada judul seperti biasa sobat posting,lalu klik 'Publish Post'


Lihat Gambar lebih Besar di SINI

Dan sobat bisa lihat hasilnya dengan mengklik tombol 'View Post',moga berhasil ya.


Lihat Gambar lebih Besar di SINI

Sukron buat abu farhan dan pihak-pihak yang bersangkutan.

( Label: blogspot ) Read more

Membuat Border Sudut Melengkung pada Setiap Widget Blog (Membuat Rounded Corner )

Membuat Border Sudut Melengkung pada Setiap Widget Blog (Membuat Rounded Corner )

Membuat Rounded Corner / Sudut Melengkung Pada Border Blog

Memang betul ya sob,sebuah blog yang kurang memperhatikan tampilan blog agar lebih menarik,dapat mempengaruhi kejenuhan pengunjung karena blog terkesan acak-acakan.
Alangkah baiknya jika blogspot yang kita miliki memiliki tampilan yang lebih menarik,misal dengan membuat border atau kotak-kotak pada setiap widget yang kita miliki,entah widget pada sidebar maupun widget diatas maupun dibawah posting.

Cara membuat sudut melengkung pada blog widget ini bisa kita ciptakan dengan bantuan CSS,dan hal ini saya kira sudah banyak tutorial blog kaitannya membuat border sudut melengkung pada setiap widget / element halaman yang akan kita tambahkan nanti.

Untuk gambar screenshotnya,sobat bisa lihat gambar dibawah ini:

Gimana sob,tertarik untuk membuatnya juga?
Langkahnya sangat sederhana,sobat pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D



(1)



(2)



(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

}
.membuatbordermelengkungroundedcorner {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.membuatbordermelengkungroundedcorner a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}

Lihat gambar (4)


(4)

Selanjutnya,Simpan Templates sobat ya.

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (5)



(5)

Selanjutnya pilih HTML/Javascript Gb(6) dan letakkan kode berikut diantara widget kode HTML yang akan ditambahkan lihat Gb.(7).

<div class='membuatbordermelengkungroundedcorner'>
Disini kode yang akan ditambahkan (bisa kode html iklan ataupun kode javascript dan sejenisnya)
</div>


(6)


(7)
Lihat Gambar Lebih Besar

Setelah itu,tinggal klik Simpan dan blog sobat sudah memiliki border melengkung pada widget yang diinginkan :D.

( Label: blogspot ) Read more

Membuat Link Blogroll Animasi Gulung (Update)

Membuat Link Blogroll Animasi Gulung (Update)

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

Membuat Link Blogroll Animasi Gulung (Update) - beberapa hari lalu di facebook page Pelajaran Blog sudah memberikan bocoran 'membuat show hide tab view widget for blogger'.
Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:

Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

(1)



(2)



(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.


#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;

}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:


<script language='javascript' src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>

Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:


<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Tiga
</div>

Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat ,moga berhasil and selamat ngulik kodenya ya :D

ket:kode bercetak tebal gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.

( ) Read more

Membuat Tag Cloud Di Blogger

Membuat Tag Cloud Di Blogger

Cara simple/singkat membuat tag cloud pada blogger

Pertama saya mengenal blog,banyak sekali istilah-istilah widget blogger yang ingin saya ketahui.

Seperti halnya ‘Tag Cloud’yang akan kita bahas kali ini.
Dulu,saya mengerti dan pernah menjumpai widget seperti ini,namun karena tidak mengerti apa namanya,maka saya googling dengan berbagai kata kunci.
Seperti;'cara membuat tulisan besar dan kecil pada blogger',atau 'cara membuat widget tulisan tebal dan tipis',dll.

Bahkan saya sempat bertanya langsung pada masternya,sampai saya tahu itu namanya Tag Cloud.

Beberapa waktu lalu saya sempat memposting juga tentang cara membuat tag clouds untuk blogspot,namun masih manual bukan wyswyg seperti fitur blogger saat ini.
Karena,seiring berkembangnya fitur instant blogger,blogger sudah memberikan langkah mudah untuk membuat label berbentuk awan ini.

Nah,untuk contoh tag cloud,anda bisa lihat ilustrasi gambar di atas,atau bisa kunjungi langsung blog teman saya di mendengarkan musik mp3 gratis.

Langkah Sederhana Membuat Tag Cloud Untuk Blogger

Seperti biasa,untuk membuat tag cloud ini,pertama pergilah ke Tata Letak,lalu add new widget atau klik tulisan Tambah Gadget untuk blog berbahasa indonesia.


Setelah itu muncul dialog box,pilih Label.


Kemudian akan muncul jendela baru lagi,lalu pada option pilihlah Tag Cloud,lalu klik tulisan Simpan.

---

Selesai,anda sudah berhasil membuat tag cloud di blogger,dan silakan lihat hasilnya.
Semoga bermanfaat ya :D

---

Baca Juga Yang Ini..

• Membuat Tag Clouds di Blogspot
• Membuat Label / Kategori
• Menghilangkan Angkan Pada Label Blog

( Label: blogspot ) Read more

Membuat Marquee / Text Berjalan

Membuat Marquee / Text Berjalan

Membuat Text Berjalan / Rolling text: "

Text berjalan,dan akan berhenti jika ada event di atasnya,...uuh !boleh tuh!

Selain menghemat tempat juga menambah sekaligus mempercantik situs kita sendiri.Seperti contoh,dalam “Dollar Free” di geliat-bisnis.blogspot.com,saya gunakan kode ini.

Pergi keTambah halaman,Add widget pilih Html / Javascript lalu copy paste kode di bawah ini:

---

<marquee onmouseover="this.stop()" onmouseout="this.start()"
scrollamount="1" scrolldelay="60" direction="up" width="450" height="150">
<a href="http://www.google.com">contoh 1</a><br/>
<a href="http://www.yahoo.com">contoh 2</a><br/>
<a href="http://geliat-bisnis.blogspot.com">contoh 3</a>
</marquee>

---

Untuk situs tujuan anda bisa menentukan sendiri,disini sebagai contoh saya memakai :

www.yahoo.com
www.google.com
dan
geliat-bisnis.blogspot.com sebagai situs tujuannya.

Mudah banget ya. :)

( ) Read more

Cara Membuat ToolTip Ber-Link Di Dalamnya

Cara Membuat ToolTip Ber-Link Di Dalamnya

Cara Membuat Tool Tip / Mini Popup Memiliki Link Anchor dan Menu Pilihan Didalamnya

Meskipun tutorial membuat tooltip link ini diposting tengah malam kaya ghene(bahasa gaul sekarang gan pent-),tapi tetep semangat ya bro,langsung aja deh,coba sobat arahkan kursor pada gambar link download di posting KLIK DISNI,nanti akan keluar tooltip keren yang memiliki link didalamnya (adapun masalah apa itu tooltip dan pembahasannya telah disharing beberapa waktu lalu di SINI pent-):

Gambar screenshotnya akan tampil seperti ini gan:

Gimana gan,pingin bikin juga buat menghias blog kamu,betul sob,kita bisa membuat tooltip yang didalam tool tip tersebut memiliki link bahkan gambar sekalipun,yuk kita intip gimana sih cara ngbikinnya :D

Langkah Membuat Coda Bubbles dengan jQuery

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).


(1)


(2)


(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut.

.bubbleInfo {
position: relative;
}

.popup {
font-size:11px;
width:200px;
background:#F3F3F3;
padding:3px 5px;
border:1px solid #CCC;
position: absolute;
display: none; /* keeps the popup hidden if no JS available */
bottom:60px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.popup:after{
border:15px solid;
border-color: #F3F3F3 transparent transparent transparent;
content:"";
display:block;
height:;
width:;
position:absolute;
bottom:-30px;
left:80px;}

Setelah itu cari kode </head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode </head> letakkan persis diATASnya kode script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(function () {
$(&#39;.bubbleInfo&#39;).each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $(&#39;.trigger&#39;, this);
var popup = $(&#39;.popup&#39;, this).css(&#39;opacity&#39;, 0);

// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// don&#39;t trigger the animation again if we&#39;re being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;

// reset position of popup box
popup.css({
top: -100,
left: -33,
display: &#39;block&#39; // brings the popup back in to view
})

// (we&#39;re using chaining on the popup) now animate it&#39;s opacity and position
.animate({
top: &#39;-=&#39; + distance + &#39;px&#39;,
opacity: 1
}, time, &#39;swing&#39;, function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: &#39;-=&#39; + distance + &#39;px&#39;,
opacity: 0
}, time, &#39;swing&#39;, function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn&#39;t do the job)
popup.css(&#39;display&#39;, &#39;none&#39;);
});
}, hideDelay);
});
});
});

</script>

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)


(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<div class="bubbleInfo"><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" trigger=""><img class="trigger" src="http://3.bp.blogspot.com/-OyJmeSaNDXA/T60LK6s8WxI/AAAAAAAABkQ/x6UY2x9CGw8/s1600/download%2Bbutton%2Bpelajaran%2Bblog.jpeg" height="65" width="150" /></a><div class="popup"><table><tbody><tr> <td>Nama File</td><td>: Benarkah Bid'ah Itu Sesat?</td></tr><tr><td>Ukuran</td><td>: 337kb</td></tr><tr> <td>Hosting </td> <td>: Google Code </td></tr><tr><td>Url Link </td> <td>: <small><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" target="_blank">Klik Di Sini</a></small></td> </tr><tr> <td>Referensi </td><td>: <small><a href="http://pelajaran-blog.blogspot.com/" target="_blank">Pelajaran Blog dan Seo</a></small></td></tr>
</tbody></table></div></div>

Lalu simpan dan lihat hasilnya,oh ya,kode yang bercetak tebal sesuikan saja ya,udah terlalu malem soalnya gan,see you ya :D

( Label: blogspot ) Read more