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?

»»  READMORE...

Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger)

Sudah Direvisi! Dijamin Berhasil 100%
(mohon maklum ya sob,ada kjkode yang ketinggalan,hihihi)

Kwick Menu Navigasi Blogger dengan jQuery

Untuk kesekian kalinya di blog bertema tutorial blog dan seo blogger blogspot ini mengunduh tutorial jQuery dalam membuat menu navigasi di blogger.

Jika sebelumnya telah dipublikasikan bagaimana menerapkan jQuery di blogspot dalam beberapa trik membuat slide show widget,sliding panel dan slick tab view menggunakan jQuery,kini ada trik satu lagi yang tak kalah menarik.
Betul gan! Yuk kita intip bagaimana sih membuat menu navigasi untuk flatform blogger/blogspot dengan jQuery ini.

Membuat Menu Navigasi Blogger dengan Kwicks jQuery

Sobat pernah lihat di beberapa blog atau situs dimana pada menu navigasi-nya dapat menyembunyikan icon atau gambar secara geser / slide saat mouse berada diatasnya?
Demo atau contoh dari menu navigasi kwicks jQuery ini sobat dapat lihat di:

http://www.jeremymartin.name/examples/kwicks.php?example=1

atau yang telah berhasil saya buat di :

http://dot-blogspot76.blogspot.com

Memang betul,bahwa kelemahan dari kwicks menu navigasi ini tidak dapat dibaca oleh beberapa browser khususnya handphone atau browser yang tidak mengaktifkan javascript.Namun kwicks menu navigasi jQuery ini dapat bekerja sangat baik di browser mozilla juga Google chrome dan IE terbaru.

Penasaran,yuk mari kita pelajari bagaimana membuat menu navigasi blogger dengan jQuery kwicks tricks.
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.


.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

Keamudian cari kode <head>,setelah ketemu letakkan kode jQuery berikut tepat diatasnya:

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

Lalu simpan templates sobat.
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='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://dot-blogspot76.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://dot-blogspot76.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://dot-blogspot76.blogspot.com/2009/02/profil.html' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://dot-blogspot76.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

Simpan,selesai sudah dan sobat sudah bisa lihat hasil dari menu navigasi kwick jquery ini.
Jikaa mengalami kesulitan mohon diskusikan adi facebook pagenya ya gan and selamat mencoba!

»»  READMORE...

Posting Otomatis dari Google Reader ke Gmail,Mungkinkah?

Apakah Ada Rahasia Antara Google Reader dan Gmail?

Copas? bukan jamanya lagi sob,hari gini masih copy paste kelaut aja deh,hehe(jd nyindir diri sendiri nih pent-)
Tapi kini justru,bukan tukang copasnya yang berkembang namun tekniknya yang dibuat sedemikian rupa hingga sang copaster tak merasa bersalah dan disalahkan :D

Salah satunya dengan mengambil RSS dari suatu blog korban.
Ini pernah saya singgung pada membuat autoblog blogger di posting beberapa bulan lalu.

• Nah,apakah ada rahasia antara Google Reader dengan Blogger?
• Apakah item pada Google Reader mampu memposting otomatis ke blogger blogspot?
• Apakah kita dapat Mengirim dari Google reader ke Gmail,Yahoo Mail (Ymail),atau Email selainnya?
• Bagaimana cara mengirimkan otomatis dari Google Reader ke dalam Gmail (Google Reader into Email or Gmail Auto)?

Semua pertanyaan tersebut akan kita jawab sob,tentu tujuannya baik ya dan jangan dijadikan sebagai alat nypam atau sejenisnya,OK?

Sobat pasti sudah mengerti bagaimana mempublikasikan atau memposting otomatis dari Email/Gmail ke dalam blog.Tutorial ini sudah diposting dalam membuat auto blog.
Kini,kita cari tahu terlebih dahulu cara 'mempublikasikan / memposting dari Google Reader ke flatform blogger'.

Posting Otomatis dari Google Reader ke Gmail,Mungkinkah Gan?

Pertama,jika belum memiliki akun Google Reader,pastikan sobat daftar terlebih dahulu ya.
Selanjutnya pada Dashboard Google Reader,sobat perhatikan,klik Setting atau Setelan (gb.1),lalu pilih tab Send To dan contrenglah checklist Blogger(gb.2).

(gb.1)


(gb.2)


Lalu,kembalilah ke Dashboard Google Reader Sobat dan masukkan url feeds,bisa menggunakan RSS maupun Atom pada tempat yang disediakan (gb.3).


(gb.3)

Contoh url feed:

Feed Rss:
http://pelajaran-blog.blogspot.com/feeds/posts/default
Feed Atom:
http://pelajaran-blog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=100

Setelah itu,nanti akan muncul item rss feed korban,dan pada sebelah bawah nanti akan terdapat tab send to dan pilihlah blogger.(gb.4)


(gb.4)

Setelah sobat klik,nanti akan keluar jendela Blog This yang mana akan mempublikasikan item dari Google Reader ke dalam blogger yang sobat miliki.
Lalu gimana ya pak cara agar item goog rss feed di google reader dapat terkirim secara otomatis ke dalam blogger dan email (gmail,ymail,dll)?
Adalah dengan membuatnya sebagai rss baru dan publikasikan secara otomatis dengan jasa rss into inbox :D,hasilnya lihat di SINI

Jadi,sudah ga penasaran khan gan,gimana operasi mereka dalam nyolong artikel kita :D
Sekali lagi,jangan jadi jahat dan berkreasilah untuk sesuatu yang baru.Moga berhasil ya :D

Demam Jquery?

• Belajar Membuat Trigger Hover JQuery / Vertical Sliding Panel Mengggunakan JQuery
• Membuat Widget Gambar Slide Show / Slideshow Javascript Dan Css Di Blogger
• Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

»»  READMORE...

Membuat Read More Otomatis / Auto ReadMore di Blogger

UPdate! Trik Read mOre oToMaTiS tanpa jQuery,Sudah Direvisi! Dijamin Berhasil 100%
(mohon maklum ya sob,ada kode yang ketinggalan,hihihi)

Read More Otomatis pada Template Blogger

Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.

Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

(1)

(2)

(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>

Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya

»»  READMORE...

Mengukur Ukuran dan Waktu Loading Blog

Cara Mengukur Berat dan Ukuran Blog untuk Search Engine Optimization

Untuk mengukur ukuran blog dan mengetahui waktu loading sebuah blog sobat dapat menggunakan beberapa situs jasa yang memberikan fasilitas gratis untuk mengukur berat / loading blog kita

Di tahun ini tutorial seo 2011 untuk Search Engine Google salah satunya adalah ditentukan ukuran dan waktu loading sebuah blog.
Berangkat dari masalah ini,sebuah blog yang memiliki ukuran besar maupun loading yang sangat berat akan berpengaruh terhadap hasil serp (search engine result page).

Sampai disini saya kira sobat sudah memiliki pandangan bagaimana supaya blog atau hasil posting yang kita lakukan mampu terindex google dengan cepat.
Mari kita ukur dan ciptakan loading blog agar lebih ringan,untuk yang satu ini sudah pernah saya bagikan masalah bagaimana 'Tips Cara Membuat Blog Ringan Saat Loading'.

Nah,untuk mengukur ukuran blog dan mengetahui waktu loading sebuah blog sobat dapat menggunakan beberapa situs jasa yang memberikan fasilitas gratis untuk mengukur berat / loading blog kita.

Diantara situs-situs yang meberikan fasilitas untuk mengukur ukuran dan waktu loading blog adalah:

1. http://www.iwebtool.com/
2. http://tools.pingdom.com/
3. http://www.numion.com/Stopwatch/
4. http://websiteoptimization.com/services/analyze/
5. http://internetsupervision.com/
6. http://www.webslug.info/
7. http://www.octagate.com/service/SiteTimer/
8. http://site-perf.com/
9. http://www.linkvendor.com/seo-tools/speedtester.html
10. http://www.uptrends.com/aspx/free-html-site-page-load-check-tool.aspx
11. http://webwait.com/

Setelah kita mengetahui berapa ukuran dan waktu yang dibutuhkan untuk membuka sebuah blog,kini kita sobat yang dapat menentukannnya sendiri.
Ingat ya teman,di 2011 ini Google sangat memperhatikan kecepatan loading dan seberapa besar ukuran dari sebuah blog atau situs.
See you and Keep post!

»»  READMORE...

Bisnis Adsense for Search Sukses!!!

Saat sobat mengunjuungi situs yang tampil dalam kotak (yang diberi tanda lingkaran) akan tampil situs (saya tidak bertanggung jawab jika situs yang muncul kontent dewasa ya,hihihi pent-),yang akan membayar kita nantinya.
Tidak harus menggunakan berbagai software seperti autoclick dan sejenisnya.

Sekedar bocoran saja ya gan,pelajaran blog ada sedikit trik agar Google Adsense yang kita miliki dapat tampil dan menghasilkan dollar.
Bagaimana caranya?
Jika masalah seo sudah saya kumpulkan di tutorial seo blogger minggu lalu,kini untuk memonetize dan menghasilkan dollarnya (bagi yang ga kebagian adsense for content) masih ada kesempatan besar.

Mengetahui siapa sih yang membayar kita?silkan klik DISINI,dan nanti akan tampil jendela window seperti ini:



Saat sobat mengunjuungi situs yang tampil dalam kotak (yang diberi tanda lingkaran) akan tampil situs (saya tidak bertanggung jawab jika situs yang muncul kontent dewasa ya,hihihi pent-),yang akan membayar kita nantinya.
Tidak harus menggunakan berbagai software seperti autoclick dan sejenisnya.

Selama kita rajin posting yang bermanfaat tentunya,adsense for search yang kita miliki dapat menghasilkan dollar yang sudah lebih dari cukup untuk sekedar membeli sesuap nasi :D
Jadi,mari mulai optimasi blog yang kita miliki,rugi khan sudah punya blog tapi tidak dapat menghasilkan apa-apa :p (Rampok Dollar Yuuk!

»»  READMORE...

Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery

Membuat Vertical Sliding di Sudut Blog dengan Animasi menggunakan jQuery

Sepertinya pelajaran blog sedang demam ya dengan jquery,hehehe (begitulah,ini juga dari hasil copas sana sini kok mas,weqz???? pent-)
Contoh tampilannya lihat gambar dibawah ini ya,sedang untuk demo-nya sobat bisa lihat di SINI.

Langkah cara membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery ini sobat bisa lakukan langkah -langkah berikut:

Pertama,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.

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 250px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(http://4.bp.blogspot.com/_qHkYFLlP0Ms/SvJqhwz89bI/AAAAAAAAAKw/A9pygIXoy-g/s320/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

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

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

Lalu simpan templates.
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="panel">

<h2>Silakan pilih kategori:</h2>
<div style="clear:both;"></div>
<div class="columns">
<div class="colleft">
<h3>Bisnis Online</h3>
<ul>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=bisnis+online&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Bisnis Gratis">Bisnis Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=domain&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Domain Gratis">Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=pasang+iklan+gratis&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Pasang Iklan Gratis">Pasang Iklan Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=bisnis+tanpa+modal&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Bisnis Tanpa Modal">Bisnis Tanpa Modal</a></li>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=uang+gratis&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Uang Gratis Free!">Uang Gratis Free!</a></li>
</ul>
</div>

<div class="colright">
<h3>Ngemis Dollar Internet</h3>
<ul>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=bisnis+online&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Bisnis Gratis">Bisnis Gratisan (Baru)</a></li>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=domain&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Domain Gratis">Baru! Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=pasang+iklan+gratis&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Pasang Iklan Langsung!">Pasang Iklan Langsung!</a></li>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=bisnis+tanpa+modal&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Bisnis di Rumah">Bisnis di Rumah</a></li>
<li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=uang+gratis&amp;sa=Search!&amp;siteurl=marshaaruan.blogspot.com%2F" title="Gratis Uang Jajan">Gratis Uang Jajan</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<a class="trigger" href="#">Surf!</a>

Nah,sekarang simpan dan sobat bisa langsung lihat hasilnya,dan script ini akan bekerja dengan baik di browser mozilla dan Google Chrome ya gan(oya,edit dan ulik sendiri ya kabuuur...).
Good luck!

»»  READMORE...

Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

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='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.min.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.

»»  READMORE...

Tutorial Seo Blogger / Blogspot

Belajar Seo Blogger untuk Mendapatkan Google Serp

Sudah dari jaman batu (kali ya) masalah seo (search engine optimization) sudah sering disinggung bahkan menjadi tolok ukur seberapa 'hebat' kah seorang blogger dalam bermain di Google Serp.
Seiring algoritma Google (opo maneh kuwi mas puji? aku yo ra ga patek dong mas ) yang berubah-ubah,kini kiat optimasi juga harus semakin inovatif.(bahasa gaulnya seperti itu )

Nah,dari fenomena seperti ini dan merupakan peluang besar dalam kelangsungan bisnis online,blog maupun situs-situs yang memberikan content tutorial seo blogger / blogspot semakin ramai.

Pikirku,meskipun masih amatiran dalam dunia seo (itung-itung nambah koleksi dari copas ),tidak ada salahnya jadi pingin ikut-ikutan,yah..paling tidak nambah koleksi omongan yang kurang enak dihati..,sudah-sudah...jangan sedih mas puji ya :D

Pelajaran Seo Basic untuk Platform Blogger

Dikatakan pelajaran bukan berarti saya disini sudah menguasai berbagai tutorial seo blogger blogspot ini ya,karena pada dasarnya penulis berniat menembak kata 'pelajaran' saja,hihihi..

Sudah dulu bercandanya ya sob,sekarang kita bisa mulai ya membahas Tutorial Seo Blogger nya(emang dari tadi ngapain mas!!!!???)

Serasa mendaur ulang lagi ya gan beberapa trik bagaimana mengoptimasi blog agar cepat tampil dalam hasil pencarian mesin pencari handal Google ini.
Saya cantumkan kembali beberapa posting pada blog tutorial(blog tutorial gadungan pent-) ini,karena dari 'penelitian' yang saya lakukan trik-trik seo dibawah ini masih bekerja baik untuk mencari posisi blog di serp.

• Belajar Seo Menyusun Kata / Memaksimalkan Kalimat Untuk SEO
• Seo Blogspot Dasar untuk Pemula
• Cara Paling Cepat Terindex Google
• Membuat Meta y_key
• SEO,Mengatur / Mengubah Format Title
• Kode HTML Huruf Simbol SEO Friendly
• Membuat Meta BlogCatalog
• Belajar Membuat Sitemap
• Dari link sahabat di Cara Cepat Terindex Google

Dari link-link tersebut,Insya Allah,blog baru maupun lama dengan beberapa (katanya tutorial seo) dapat dibaca search engine sesegera mungkin.
Intinya buat blog yang rapi,simple,up2date,tidak menjenuhkan,cepat dalam loading,cepat menghasilkan uang,cepat kaya,cepat tenar,cepat mati! (halah!!)

Bercanda gan tapi semoga berhasil ya,dan do'ain juga untuk kedepan blog amburadul ini dapat memuat content seo yang baru dan tentu mak nyoss :D see you guys and good luck!

»»  READMORE...

Membuat Widget Gambar Slide Show / Slideshow Javascript dan Css di Blogger

Cara Memasang atau Membuat Widget Auto Gambar Slide Show untuk Blogger Blogspot

Hore! kesempatan update blog lagi nih,lumayan,minggu ini ada job tak terduga jadi ada ongkos lemburan,hihihi (buka rahasia-pent)
Keburu jatah ngnet habis,langsung aja ya gan,yup! kali ini ada trik bagus sob buat ngakalin supaya tampilan slide show untuk gambar di blogger blogspot dapat kita ciptakan secara manual.
Tentu dengan sedikit sentuhan javascript,css dan jQuery (opo iku to mas puji? embuh!aku yo ga ngerti...gubrak!!)

Daripada banyak ngomong malah pada bengong,yo wes yuk cari tahu cara membuat slideshow widget untuk gambar di blogger dengan bantuan javascript dan css.

Untuk screenshotnya,lihat gambar dibawah ini ya sob:

Nah,hasilnya (jika saya belum merubah template) sobat bisa lihat di atas posting blog ini,lihat gambar:

Langkah Cara Memasang / Membuat Slide Show Gambar dengan JQuery di Blogger

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.

/* CSS easySlider */


#containerSlider {
width:210px;
height:110px;
margin:0 40px;
padding:0;
position:relative;
}
#prevBtn, #nextBtn {
display:block;
margin:0;
overflow:hidden;
padding:0;
text-indent:-8000px;
}
#slider ul, #slider li {
list-style:none;
margin:0;
padding:0;
text-indent:0;
}
#slider, #slider li {
overflow:hidden;
width:210px;
height:110px;
margin:0 auto;
}
#slider {
margin-left:0;
background:#ccc;
border:1px solid #999;
}
#prevBtn, #nextBtn {
display:block;
height:34px;
left:-20px;
position:absolute;
top:38px;
width:31px;
}
#nextBtn {
left:200px;
}
#prevBtn a, #nextBtn a {
background:transparent url(http://2.bp.blogspot.com/-sy3zWYyTWLg/TWpAOl7v1II/AAAAAAAAAt4/GZ4veAPRe_Q/s1600/Arrow-Left%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0;
display:block;
height:34px;
width:31px;
}
#nextBtn a {
background:transparent url(http://1.bp.blogspot.com/-ri5ctN5jxp4/TWpARdezqDI/AAAAAAAAAuA/dfmkoYxhjew/s1600/Arrow-Right%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0;
}
#slider img {
background:#ccc;
padding:5px;
width:200px;
height:100px;
}

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

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

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/easySlider1.5.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

Lalu simpan templates sobat,apakah samapi disini sudah selesai,tentu belum gan,giliran kita sekarang membuat widgetnya :D

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 id="contentSlider">
<div id="slider">
<ul>
<li><a href="#" target=_blank"><img alt="pemandangan 1" src="http://3.bp.blogspot.com/-w5seRbe2tUg/TWoyA1W3pJI/AAAAAAAAAtQ/aRE-mp374oU/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B4.jpg" /></a></li>

<li><a href="#"><img alt="pemandangan 2" src="http://1.bp.blogspot.com/-XOxtNnKWuMA/TWoxnu0KhuI/AAAAAAAAAtA/Ihx2MMDHKZo/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B2.jpg"/></a></li>

<li><a href="#" target=_blank"><img alt="pemandangan 3" src="http://2.bp.blogspot.com/-V8sTo8mkTGs/TWoxiV2oGhI/AAAAAAAAAs4/sBbrwSA5hl8/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B1.jpg"/></a></li>

</ul>
</div>
</div>

Lalu simpan dan kini sobat sudah memiliki slideshow widget blogspot yang tak kalah menarik jika dibandingkan slideshow instant widget seperti yang sudah banyak beredar.
Selamat mencoba ya gan and semoga berhasil :D

Ket:

• Anda hanya merubah kode yang bercetak tebal diatas.
• Untuk tanda '#' gantilah dengan url tujuan kemana link gambar akan diarahkan,misal:
  http://pelajaran-blog.blogspot.com/2009/04/apa-itu-css.html.
• Untuk gambar sobat bisa memilih gambar sendiri baik dari komputer maupun dari web dengan mengambil url / alamatnya,misal:
  http://3.bp.blogspot.com/-w5seRbe2tUg/TWoyA1W3pJI/AAAAAAAAAtQ/aRE-mp374oU/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B4.jpg

»»  READMORE...