Slide down random post

Satu lagi pengembangan fitur slide show terbaru dari saya. Fitur ini saya beri nama "Slide down random post", sebab fitur ini saya adopsi dan saya kembangkan dari aplikasi recent post yang tampil secara random.

Secara tampilan memang sederhana, tapi Slide down random post ini menurut saya tetap tampil menarik. Dan yang terpenting Slide down random post ini sangat praktis dan efisien.
Jadi sekali pasang, fitur ini tetap menampilkan gambar-gambar dari setiap posting terbaru anda. Dengan catatan, setiap posting anda harus memberi gambar yang nantinya muncul di Slide down random post ini.

Secara ideal untuk Slide down random post ini, dianjurkan gambar yang anda gunakan pada setiap posting berukuran " 600px X 300px " atau  skala " 6 : 3 ". Hal ini dimaksudkan agar gambar tampil sesuai dengan aslinya.

Trik ini termotifasi oleh sobat-sobat saya masih merasa kesulitan ketika edit HTML dan masalah itu juga pernah saya alami dulu. Ketika kita sangat menginginkan slide show dipasang di blog yang kita memiliki, kitapun harus lama-lama bergelut dengn kode-kode yang terkadang hasilnya tidak sesuai dengan yang kita inginkan atau bahkan terkadang malah rusak dan tidak bekerja.

Nah..., akhirnya sekarang andapun bisa memanfaatkan  Slide down random post ini. Dan anda tidak harus ribet lagi dengan edit ini dan itu.... Anda hanya tinggal memasukkan ULR blog anda, maka sudah siap langsung dipasang pada gadget blog anda.

LIHAT DEMO

OK..., bila anda berminat, Langsung saja silahkan anda copy kode dibawah ini, dan anda masukkan pada gadget anda.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script language='JavaScript'> imgr = new Array(); showRandomImg = true; thumbwidth = 60; thumbheight = 60; acolor = "#012EB0"; aBold = false; text = "comments"; showPostDate = true; numposts = 10; home_page = "DISINI URL BLOG ANDA"; limitnoer=2 intervalnoer=4000 </script> <div id="cbwg-slide-show-random-post"> <div id="noerlist"> <script type='text/javascript'> //<![CDATA[ jQuery(function(){jQuery("ul.noer").simplenoer(limitnoer,intervalnoer).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simplenoer=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="noerWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="noer">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">'+f+" "+text+"</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var xy=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=xy[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'">'+u+" "+h+" "+t+"</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/><div class="noerlink"><a href="'+p+'" class="recent-link">'+g+'</a></div><div class="postsummary"><i>'+s+'</i></div><div class="noerdate">'+n+'</div><span class="noercomment">'+cmtext+"</span>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');//]]></script> </div> </div> <style type="text/css" media="screen"> <!-- #cbwg-slide-show-random-post { overflow:hidden; margin-top:5px; margin:auto; padding: 0px; width:600px; height:326px; border:1px solid #000; background:#fff; } #noerlist { overflow:hidden; margin:2px; padding: 0px; float:left; } #noerlist ul{ float:left; width:100%; height:322px; overflow:hidden; list-style-type: none; padding: 0px; margin:0px; background:#000; } #noerlist li { width:100%; height:322px; padding: 0px; margin:0px 0px 5px 0px; list-style-type:none; float:none; overflow: hidden; background:#000; } #noerlist li:hover a{ color:orange; } #noerlist li #span info{ background:#fff; text-decoration:none; color:#fff; font-size:14px; font-weight:normal; font-style:normal; text-shadow: 1px 3px 3px #fff; overflow:hidden; margin:0px 0px; padding:5px; font-family:Tahoma,Arial,verdana, sans-serif; } #noerlist img { float:left; width:592px; height:293px; margin-right:0px; margin-left:0px; background:#fff; cursor:pointer; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } #noerlist li:hover img { float:left; width:592px; height:220px; margin-right:0px; margin-left:0px; background:#fff; cursor:pointer; transition: all 1s ease-in-out; } #noerlist .recent-link{ float:left; width:100%; height:25px; text-decoration:none; color:#fff; font-size:17px; font-weight:normal; font-style:normal; text-shadow: 1px 3px 3px #fff; overflow:hidden; margin:0px 0px; padding:5px; font-family:Tahoma,Arial,verdana, sans-serif; cursor:pointer; z-index:200; } #noerlist .recent-link:hover{ background:#bbb; text-shadow: 1px 3px 3px #000; } #noerlist .postsummary{ display:block; width:580px; height:55px; background:#000; margin:0 auto; text-decoration:none; color:#fff; font-size:12px; font-weight:normal; font-style:normal; line-height:18px; text-shadow: 1px 3px 3px #fff; border-top:1px solid #ccc; overflow:hidden; padding-top:0px; padding-left:5px; padding-bottom:0px; padding-right:10px; font-family:Tahoma,Arial,verdana, sans-serif; } #noerlist li .postsummary .separator{ display:none; } .noerdate{ display:none; overflow:hidden; font-size:10px; text-shadow: 1px 2px 2px #8EABFF; color:#455D95; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .noercomment{ display:none; overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#fff; padding:0px 0px; margin:0px 0px; } --> </style>

Catatan:

• Ganti teks "DISINI URL BLOG ANDA", dengan URL blog anda.
• Fitur ini menggunakan jquery 1.3.2, yang bentuknya seperti berikut:

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

Biasanya bila template anda sudah ada atau sudah menggunakan script tersebut, maka kemungkinan besar Slide down random post ini tidak bekerja.
Bila terjadi masalah tersebut, ada solusi lain yang mungkin bisa anda gunakan, yaitu gunakan satu saja jquery 1.3.2 tersebut dan letakkan didalam atau diantara tag head.

OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Slice Random Recent Post

Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang lebih, yaitu effek slice atau sebuah lapisan yang berisi gambar dan snippet artikel yang muncul kebawah ketika pointer mouse kita arahkan diatas salah satu judul.
Modifikasi recent post ini saya beri nama Slice Random Recent Post.... Ya.. mudah - mudahan sobat blogger berkenan dengan nama yang saya berikan...hehehe..

LIHAT DEMONYA DISINI

OK langsung saja.... bila anda berminat, anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode CSS di bawah ini dan taruh tepat sebelum kode </head> :

<style type="text/css" media="screen"> .noerlist{ display:block; position:relative; width:100%; height:52px; overflow:hidden; margin-topt:10px; border:1px solid #; margin:auto; z-index:1000; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .noerlist:hover{ display:block; position:relative; width:100%; height:340px; overflow:hidden; margin-top:10px; border:1px solid #; margin:auto; z-index:1000; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .noertitle { height:40px; overflow:hidden; background-color:#eee; margin:auto; margin-bottom:5px; padding-left:5px; padding-right:10px; padding-top:0px; padding-bottom:10px; } .noertitle ul{ height:40px; } .noertitle a{ text-decoration:none; color:#000; font-size:14px; font-weight:normal; font-style:normal; text-shadow: 1px 3px 3px #fff; font-family:Tahoma,Arial,verdana, sans-serif; } .noerlist .postsummary{ float:left; display:block; height:105px; width:95%; text-decoration:none; color:#000; font-size:12px; font-weight:normal; font-style:normal; line-height:18px; text-shadow: 1px 3px 3px #fff; border-bottom:1px solid #ccc; overflow:hidden; padding-top:5px; padding-left:10px; padding-bottom:5px; padding-right:10px; font-family:Tahoma,Arial,verdana, sans-serif; } .noerlist .postsummary .separator{ display:none; } .noergambar img{ float:left; width:95%; height:150px; padding:2px; background:#ffffff; border:1px solid #bbb; } .noercomment{ float:left; display:block; overflow:hidden; font-size:14px; font-weight:normal; text-shadow: 0px 1px 0px #fff; text-align:center; color:#FF8A00; background:transparent url(file:///C:/Users/LIFINA/Pictures/bgcomment%203.png)center no-repeat; padding-top:10px; padding-right:5px; margin-top:-100px; margin-left:25px; width:35px; height:35px; font-family:Tahoma,Arial,verdana, sans-serif; z-index:1500; } </style>

6. SIMPAN TEMPLATE.


Langkah Selanjutnya :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="noerlist-recent"> <script language="JavaScript"> imgr = new Array(); showRandomImg = true; boxwidth = 250; cellspacing = 1; borderColor = "#fff"; bgTD = "#ccc"; thumbwidth =200; thumbheight = 150; fntsize = 11; acolor = "#ffffff"; aBold = false; icon = " "; text = "comments"; showPostDate = false; summaryPost = 60; summaryFontsize = 10; summaryColor = "#ffffff"; icon2 = " "; numposts = 7; home_page = "ULR BLOG ANDA"; </script> <script type='text/javascript'> //<![CDATA[ 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 showrecentposts(json){document.write('<table width="300px' +boxwidth+'" border=0 bordercolor="#cccccc" align="left" >');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='yes')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var div='<div class="noerlist"><div class="noertitle"><ul><li><a href="'+posturl+'">'+posttitle+'</a></li></ul></div><div class="noergambar"><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></div><div class="postsummary"><i>'+s+'</i></div></div>';document.write(div);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write('<a href="http://www.carabuatwebgratis.com/" target="_blank"> </a>');//]]></script></div>

Catatan : Pada kode diatas terdapat teks "ULR BLOG ANDA", Silahkan anda ganti dengan ULR blog anda.

5. SIMPAN.

OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Buat Toko Online dengan blogger tidak kalah Profesional

Bersamaan dengan Lounching Perdana Toko Online "Jogja Smart", saya ingin berbagi pengalaman  dan pengetahuan tentang blogger kepada sobat - sobat blogger yang mampir di blog tercinta ini.
Kendati banyak yang merasa pesimis dengan tampilan blogger bila digunakan untuk berbisnis atau tidak asing bila disebut dengan toko online.

Pada artikel kali ini saya benar - benar membuktikan bahwa untuk membuat toko online menggunakan blogger tidak kalah menarik dan tetap terlihat profesional. Dan yang terpenting tidak harus mengeluarkan biaya banyak. Hanya harga domain, itupun bila anda menginginkan domain selain blogspot.com.

Langkah ini saya persembahkan untuk sobat blogger yang sudah terlanjur cinta dengan blogger dan berminat ingin membuat toko online, saya sarankan tidak perlu membuat wesite khusus toko online dengan biaya besar.

Hanya dengan memanfaatkan tutorial - tutorial yang ada di blog tercinta ini, saya bisa mewujudkan sebuah toko online menggunakan blogger. Template yang saya gunakan sama persis dengan template blog tercinta ini.

Nah andapun bisa..., Saya sangat yakin anda juga bisa merubah tampilan template seperti blog ini menjadi sebuah toko online yang bisa anda gunakan untuk berbisnis. Silahkan anda manfaatkan dan pelajari tetang CSS, HTML, dan Javascript serta didukung dengan tutorial - tutorial blogger yang sudah saya bahas di blog tercinta ini.

Bagaimana menurut anda...?, bila tampilan blog ini berubah menjadi sebuah toko online seperi DISINI, atau ini : http://www.jogjasmart.com

Buat anda yang tertarik dengan produk -produknya juga bisa langsung pesan, mumpung masih ada diskon sebulan penuh selama bulan april 2012.

Mohon maaf bila artikel ini tidak berkenan buat anda yang membaca....
Ini hanya sekedar info sekaligus motivasi dan ispirasi buat sobat - sobat blogger, untuk lebih menggali kemampuan berkreasi sambil mengelola bisnis dengan modal murah untung besar.

Apa lagi tampilan toko online yang kita buat hasil dari kreatifitas kita sendiri, dengan mengolah Template gratisan menjadi toko online yang menguntungkan...hehehe... Pasti bangga... iya kan ?

Dan tentu hasil dari semua bisnis yang kita kelola tergantung dari usaha dan kreatifitas kita sendiri.

Ok... semoga bermanfaat dan menjadi motivasi serta inspirasi buat anda...

Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara mengaktifkan Thread Comments blogger

Melihat penggunaan Thread Comments yang ada pada template bawaan blogger, buat saya sangat disayangkan bila dilewatkan. Sebab Thread Comments ini memiliki fitur yang lebih dibanding form komentar yang ada sebelumnya. Salah satunya Thread Comments memiliki fitur Reply, sehingga pemilik blog bisa membalas komentar atau memberi jawaban atas pertanyaan pengunjung kapan saja. Dan lebih mantab lagi komentar balasan berada pada posisi yang berbeda dengan komentar baru. sehingga tampak bertingkat, walaupun Thread Comments ini hanya memiliki satu tingkat reply dan belum sebagus pada WordPress yang sudah menggunakan berapa tingkatan reply. Tapi tak masalah... yang penting kita para blogger ikut merasakan dan mengikuti perkembangan dunia online.

Berikut gambar tampilan  Thread Comments yang masih asli dari blogger :

Berikut gambar tampilan  Thread Comments yang bisa anda pakai pada blog anda :

---

Bagi anda yang menggunakan tamplate bawaan blogger, tapi Thread Comments belum muncul..., anda tinggal lakukan seperti ini : Download Template Lengkap - Kembalikan template widget ke default - Simpan Template - Upload Tempalte yang di Downloat tadi - Simpan Template. Dan anda sudah menggunakan Thread Comments....silahkan dilihat!.
Untuk tampilan agar seperti gambar diatas, anda bisa gunakan CSS yang saya berikan dibawah.

---

Nah..., bila template bawaan dari blogger sudah menggunakan Thread Comments, lalu bagaimana dengan template costum atau template editan seperti blog ini?

Tak perlu khawatir, bagi anda yang menggunakan template costum dan belum memanfaatkan form komentar versi Thread Comments seperti yang sudah saya pakai pada blog ini, kali ini saya akan uraikan langkah demi langkah mudah memasang Thread Comments untuk blog anda.

OK..., Pada dasarnya script dan css Thread Comments sudah disediakan oleh blog master blogger, tapi rata - rata template costum tidak atau belum menampilkannya.
Jadi..., bila anda tertarik juga ingin menggunakan Thread Comments ini, berikut ini saya uraikan langkah - langkah mudah menampilkan Thread Comments :

Langsung saja....
1. Masuk Rancangan.
2. Edit HTML.
3. Centang "Expand Template Widget".
4. Silahkan anda cari kode seperti atau mirip dengan kode berikut :

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

Bentuk keseluruhan kode diatas seperti berikut :

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:post.allowComments'>
  <b:include data='post' name='comments'/>
 </b:if>
</b:if>

Atau seperti berikut :

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <b:include data='post' name='comments'/>
 </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <b:include data='post' name='comments'/>
 </b:if>

Catatan : 
Setiap templat belum tentu sama, bisa seperti yang atas atau bisa juga seperti yang bawah.

5. Silahkan anda ganti deretan kode yang berwarna HIJAU diatas, dengan code dibawah ini :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <b:if cond='data:post.showThreadedComments'>
  <b:include data='post' name='threaded_comments'/>
 <b:else/>
  <b:include data='post' name='comments'/>
 </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:post.showThreadedComments'>
  <b:include data='post' name='threaded_comments'/>
 <b:else/>
  <b:include data='post' name='comments'/>
 </b:if>
</b:if>

6. SIMPAN DULU TEMPLATE.

Bila sampai langkah 6 sudah sukses, kemudian kita lanjutkan ke langkah 7 :

7. Untuk memastikan agar form komentar lama dan form Thread Comments muncul dua - duanya. Maka kita harus cari lagi apakah masih ada deretan kode seperti kode berwarna BIRU dibawah.

Untuk memudahkan mencari kode berwarna BIRU, cari kode seperti atau mirip seperti kode berikut ini :

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

Bentuk keseluruhan kode diatas seperti berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <b:if cond='data:post.allowComments'>
     <b:include data='post' name='comments'/>
   </b:if>
 </b:if>

Atau seperti berikut :

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <b:include data='post' name='comments'/>
 </b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:include data='post' name='comments'/>
 </b:if>

Catatan : 

• Bila anda masih menemukan deretan kode warna BIRU diatas, baik yang atas atau yang bawah.
• Kode warna BIRU adalah kode untuk menampilkan form komen yang lama.
• Jadi silahkan anda hapus seluruh kode, baik  yang berwarna biru tua ataupun biru muda agar form komentar lama tidak mucul lagi.

8.  SIMPAN TEMPLATE LAGI.

9. Masih pada HTML..., Silahkan letakkan kode CSS dibawah ini sebelum kode ]]></b:skin> :

.comments{display:block;background:#F2F2F2;padding:5px;} .comments .comment-block{position:relative;background:#FAFAFA;margin-left:45;padding:4px;text-align:left; border-bottom:1px solid #C5C5C5;box-shadow:1px 4px 1px #C7C7C7;-moz-box-shadow:1px 4px 1px #C7C7C7;-webkit-box-shadow:1px 4px 1px #C7C7C7;} .comments .comment-content{margin-top:0px;margin-right:0px;margin-bottom:0px;padding: 5px 10px 5px 5px;background:#eee;color:#333;text-decoration:none;font:normal normal 12px arial;font-style:italic;} .comments .avatar-image-container{ padding:1px; background:#FFFFFF; box-shadow:1px 2px 1px #555;-moz-box-shadow:1px 2px 1px #555;-webkit-box-shadow:1px 2px 1px #555; z-index:9999;} .comments .avatar-image-container :hover{padding:1px;background:#FFFFFF;box-shadow:1px 2px 1px #555;-moz-box-shadow:1px 2px 1px #555;-webkit-box-shadow:1px 2px 1px #555;opacity:0.6;z-index:9999;} .comments .comment-replies {display:block;position:relative;background:#E5E5E5;border-right:3px solid #fff;border-bottom:3px solid #fff;border-top:3px solid #ccc;border-left:3px solid #ccc;margin-left:55px; -moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;} .comments .comment-header {display:block;padding: 5px;background:#D8D8D8;border-bottom:1px solid #aaa;text-decoration:none;font:normal normal 12px Georgia,Serif} .comments .comments-content .icon.blog-author { background: url('https://lh3.googleusercontent.com/-8rCN71wXRuk/T1rm8TTPrTI/AAAAAAAABX0/54h4ZG_pDGE/h20/penulis.jpg') no-repeat;border: 1px solid #ddd;} .comments .comment-actions {display:block;padding: 5px;color:blue;background:#E5E5E5;border-top:1px solid #aaa;} .comments .comment-actions a{color:blue;text-decoration:none;font:normal normal 12px Georgia,Serif} .comments .comment-actions a:hover{color:#000;text-decoration:none;} .comments .comment-actions .item-control{display:none;}

10.  SIMPAN TEMPLATE

OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara Pasang Rating Bintang Rich Snippets

Bagi yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets, berikut langkah yang paling pas dan mudah untuk memasang Rating Bintang dan Rich Snippets.

Sebelum menuju caranya, sebaiknya kita mengetahui .... apa sih Rich Snippets?

Google Rich Snippets merupakan data terstruktur dalam bentuk snippets (cuplikan) atau bisa juga kita sebut dengan description pada homepage atau pada halaman artikel kita yang muncul dibawah setiap hasil pencarian Google.


Rich Snippets sebenarnya sudah diperkenalkan oleh Google pada sekitar pertengahan tahun 2009, yang gunanya untuk membantu penggunanya menemukan homepage ataupun halaman posting yang ada pada blog kita, dengan menunjukkan "snippet" atau cuplikan dari artikel yang kita buat.

Waah.... sudah lama juga ya..., padahal Blog ini lahir pertengahan 2010... Berkat aksi kreatif para mbah senior blogger, kini mulai marak menggunakan trik ini.

Dengan teknik ini, kita diharapkan memberikan informasi yang relevan kepada pengguna google tentang apa saja yang kita tulis. Sehingga menurut saya mungkin agar pengunjung benar - benar yakin akan mengunjungi blog kita.

Bersamaan dengan pemberian Rich Snippets pada hompage dan setiap halaman post yang kita terbitkan, kita juga dapat memberikan tanda rating bintang sekaligus. Sehingga yang ditampilkan pada pencarian google adalah hompage atau judul artikel, Snippets, dan tanda rating bintang,... kerren juga sih...

Sayang..., hal tersebut tidak mempengaruhi meringkat halaman blog kita pada hasil pencarian google, walaupun kita sudah memberikan tanda rating bintang dan Rich Snippets pada blog kita.

Tapi paling tidak pengunjung akan lebih mantab dengan melihat rating bintang dengan warna orange yang mencolok tersebut dan akhirnya mengklik Rich Snippets yang muncul pada pencarian google. Jadi sering sering artikel kita yang muncul dengan rating bintang di Klik orang, tentu pengunjung blog kita jadi bertambah, ....iya kan?

Nah... bagi anda yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets pada blog anda, pada artikel ini saya jelaskan langkah - langkahnya secara detail,mudah,dan yakin berkasil.

Untuk memasang Rating Bintang dan Rich Snippets, tentu ada beberapa tahapan yang harus kita lakukan. Dalam hal ini setiap tahapan saya tulis dalam satu artikel.

Berikut tahapan - tahapan sebelum memasang Rating Bintang dan Rich Snippets :

1.  Mengganti profil Blogger ke google plus.
2.  Cara menampilkan Author blog di google.
3.  Memberikan link publisher pada home page.

Bagi yang belum melakukan 3 tahap diatas, silahkan baca artikelnya dan ikuti langkah - langkahnya :
Dan bagi anda yang sudah melakukan 3 tahap diatas, anda tinggal ikuti langkah - langkah yang saya uraikan dibawah ini :

Seperti biasa .... :
1. Masuk Rancangan.
2. Edit HTML.
3. Centang "Expand Template Widget".
4. Letakkan kode dibawah ini, tepat setelah atau dibawah  tag <body> :

<div>
<div itemscope='Person' itemtype='http://data-vocabulary.org/Review'>

5. Dan Letakkan kode dibawah ini, tepat Sebelum atau diatas  tag </body> :

</div>
</div>

6. Cari kode seperti dibawah ini : (Ingat, kode seperti berikut ada 2, silahkan pilih yang pertama atau yang atas, hal ini mempengaruhi hfeed pada homepage.)

<h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
     <b:if cond='data:post.url'>
       <a expr:href='data:post.url'><data:post.title/></a>
     <b:else/>
      <data:post.title/>
     </b:if>
    </b:if>
      </h1>

Catatan : Aetiap template memiliki kode yg berbeda, terutama penggunaan tag <h1>   .....  </h1> . tapi tidak masalah, baik pakai h1,h2, atau h3.

7. Sisipkan kode berikut, pada kode diatas :

<span itemprop='itemreviewed'> ....... </span>

Hingga jadi seperti dibawah ini :

<span itemprop='itemreviewed'> <h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
     <b:if cond='data:post.url'>
       <a expr:href='data:post.url'><data:post.title/></a>
     <b:else/>
      <data:post.title/>
     </b:if>
    </b:if>
      </h1> </span>

Catatan : Kode diatas untuk menandai Judul yang tampil pada pencarian google.

8. Kemudian scroll kebawahnya kode diatas, dan cari kode seperti atau mirip kode berikut :

<div class='post-header-line-1'/>

9. Tambahkan kode dibawah ini, setelah kode diatas :

<div class='postdate' style='width:100%;margin-bottom:-15px;border-bottom:1px solid #ddd;position:relative;'>

<b:if cond='data:top.showTimestamp'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtei41ZMJRQBFQJVM6NLrbEN5rRQNG_AXxE08Mmqzvkmv3YsARMeoPkAko-opdZb748kg8qr18bPwbLFbTqeltlQpV0vKd8oZUiXwrz2-_h2UzRG_p-p3OwZ-bTOvjSZZYK-707kiXOm8/'/>
<span itemprop='updated'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
<abbr class='updated' expr:title='data:post.timestampISO8601'>
<data:post.dateHeader/>
 | <data:post.timestamp/>
</abbr>
</a>
</span>
</b:if>


<b:if cond='data:top.showAuthor'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixcao8YiLpt6fXffUjW__OzDvQQgMO9gLiqBzO5DXry0mcIjX2lHMK3bH6G1CKVON6TbUx-Liu_Dlmf7Hq41koZkY8hUO-D4A7ZcNygyLPOyk5fg7Wf7URVQO_8wNelO9-rU1Dfgj5FCg/'/>  <span class='fn'>
<span itemprop='reviewer'>
<a href='https://plus.google.com/105300861809836012204' rel='author'><data:post.author/>
</a>
</span>
</span>
</b:if>


<b:if cond='data:post.allowComments'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5I-XbOfy-te5meYzubNTnfZ68Aqj0m0_4_PdHilmFuSBBSRva-3ltwghq2nYhbWZIGo1fY2sOVociZl3VsPYdpqKIYWJNSi2R2PBhO_PXUfnkIpa_qd2n7r8roZkUe2_1Ox86HZb-UtM/s1600/comments.png'/>
<span itemprop='Comments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>No comments</b:if>
<b:if cond='data:post.numComments == 1'>1 comment</b:if>
<b:if cond='data:post.numComments &gt;= 2'>
<data:post.numComments/> comments</b:if>
</a>
</span>
<span itemprop='rating'> | 3.4</span>
</b:if>


</div>
<br/>

<b>Description :</b>
<span itemprop='description'>
<data:post.snippet/>
</span>
<br/>

Catatan :

• Pada bagian kode berwarna HIJAU, untuk menandai Update Artikel yang tampil pada pencarian google.
• Pada bagian kode berwarna BIRU, untuk menandai Profil Google Plus sebagai Penulis yang tampil pada pencarian google. Silahkan ganti TEKS WARNA HIJAU MUDA dengan ID Profil Google Plus Anda
• Pada bagian kode berwarna PINK, untuk menandai Jumlah komentar yang tampil pada pencarian google.
• Pada bagian kode berwarna ORANGE,  untuk menandai Jumlah Rating Bintang yang tampil pada pencarian google.
• Pada bagian kode berwarna BIRU MUDA,  untuk menandai Rich Snippets / Description yang tampil pada pencarian google.

10. SIMPAN TEMPLATE.


Untuk hasil pada langkah 9 diatas, Pada halaman posting tepatnya di bawah judul dan diatas artikel, akan tampak seperti gambar berikut :

Nah..., Sekarang tinggal kita lihat, apakah google berhasil mengekstrak Rating Bintang dan Rich Snippets yang anda pasang pada halaman post, anda dapat mempergunakan "Rich Snippets Testing Tool". Silahkan masukkan ULR ARTIKEL anda.

Bila anda berhasil maka akan tampak seperti gambar berikut :

Kotak merah pada gambar diatas menunjukkan bahwa link author bekerja dengan baik.

Kemudian dibawahnya :

Kotak merah pada gambar diatas menunjukkan bahwa Item yang di review sudah muncul dengan baik.



NB :

Keluhan yang banyak terjadi dikarenakan penempatan link publisher terletak pada halaman yang sama dengan link author, yaitu sama - sama muncul pada homepage. Dan google sendiri sangat menyarankan penempatan link publisher pada homepage dan link author pada halaman post atau halaman konten.

• Kalau Link publisher diletakkan tepat setelah <head>
• Sedang Link Author, cara meletakkannya seperti pada langkah ke-9 pada bagian kode berwarna BIRU

Dan pada artikel berikutnya saya akan coba bahas tentang bagaimana mengatasi masalah - masalah muncul ketika menggunakan Rating Bintang Rich Snippets.

OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Memberikan link publisher pada home page

Memberikan link publisher pada home page sama pentingnya dengan memberikan link author pada halaman post.
Pemberian Link publisher dimaksudkan untuk menegaskan bahwa kita sebagai penerbit blog yang kita tambahkan pada halaman google plus. Dan link author menegaskan bahwa kita yang memiliki profil google plus adalah sebagai penulis artikel atau penulis konten pada blog yang kita tambahkan pada halaman google plus tersebut.

Kalau sebelumnya kita sudah berganti profil dari profil blogger menjadi profil google plus yang langkah -langkahnya saya tulis pada artikel "Mengganti profil Blogger ke google plus", lalu setelah itu saya juga sudah jelaskan langkah - langkah memberi link author pada blog yang saya tulis pada artikel "Cara menampilkan Author blog di google".

Nah..., sekarang akan saya jelaskan secara mudah menambahkan link publisher pada blog kita yang tepatnya pada home page. Karena penempatan link publisher tidak diterima bila diletakkan pada halaman yang sama dengan link author. Dan google sendiri sangat menyarankan penempatan link publisher pada homepage dan link author pada halaman post atau halaman konten.

Jadi silahkan anda ikuti beberapa langkah mudah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

<head>

5. Copy kode di bawah ini dan taruh tepat setelah kode <head> :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='https://plus.google.com/105300861809836012204' rel='publisher'/>
</b:if>

Catatan : Ganti teks berwarna merah dengan profil google plus anda.

6. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal kita TES dengan menggunakan "Rich Snippets Testing Tool". Silahkan masukkan ULR blog anda.
Bila berhasil maka akan tampak seperti pada gambar berikut :

Gambar diatas menunjukkan penempatan link publisher sudah benar pada homepage.

Sekarang anda masukkan ULR artikel anda pada "Rich Snippets Testing Tool", untuk membedakan antara link publisher dengan link author, yang cara masangnya saya jelaskan pada artikel "Cara menampilkan Author blog di google".
Bila berhasil maka akan tampak seperti pada gambar berikut :

Gambar diatas menunjukkan penempatan link author sudah benar pada halaman post.

Nah... bila semua sudah berhasil, maka akan kita lanjutkan ke tahap berikutnya yaitu "Cara Memasang Rating Bintang Rich Snippets" pada artikel yang akan datang.

OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara menampilkan Author blog di google

Untuk menampilkan author blog atau informasi penulis kedalam alat pencarian google, tentu kita harus memiliki Profile Google plus terlebih dahulu.

Ada dua cara bila kita ingin memiliki Profile Google plus :

Yang pertama, silahkan langsung menuju ke https://plus.google.com untuk membuat akun Google plus baru.

Yang kedua, memindahkan profil blogger ke profil google plus seperti yang saya bahas pada waktu yang lalu. Bila anda belum memindahkan profil blogger anda  ke profil google plus, silahkan anda bisa ikuti langkah - langkahnya pada artikel "Mengganti profil Blogger ke google plus".

Dengan menampilkan author blog atau informasi penulis kedalam alat pencarian google, tentu sangat membantu pengguna google benar - benar menemukan konten atau artikel yang dicari, selain itu pengguna langsung dapat mengetahui penulis artikel pada hasil pencarian google. Dan informasi yang ditampilkan bisa nama atau foto profil google plus. Tapi sayangnya Google tidak menjamin untuk menampilkan informasi penulis pada pencarian google ataupun hasil Google News.

Tapi yang jelas menampilkan author blog pada alat pencarian google, juga sangat membantu kita untuk meyakinkan pengunjung untuk benar - benar memilih konten atau artikel yang jelas penulisnya. maklum.... banyak juga blog-blog spam yang bertebaran...

Kembali kepokok masalah...., Setelah memiliki profil google plus langkah selanjutnya menambahkan web atau blog kita kedalam google plus.
Berikut ikuti langkah - langkah yang saya bagi menjadi dua tahap A dan B :

A. Edit Profile Google plus
     1. Buka profile Google plus anda.

     2. Edit profile Google plus anda.

Dan berikut yang paling penting untuk di Edit:

• Pilih Kontributor untuk:

 

•  Tambahkan tautan ubahsuaian

•  Isi ULR blog yang ingin ditambahkan :

• Langkah selanjutnya kirim Email. 

Klik tombol "Tentang", lalu scroll kebawah. Pada poin Rumah dan Kantor, silahkan isikan Email anda pada form yang disediakan. Saran saya pada pengaturan yang ada dibawah form, pilih hanya anda yang tahu. Hal ini untuk menghindari hal - hal yang tidak diinginkan :

• Selesai, kemudian pada bagian atas Klik "Pengeditan selesai"

• Yang terakhir tinggal Verifikasi Emal

Silahkan anda verifikasi kedua email yang anda kirimkan :

Kemudian buka pesan verifikasi yang dikirim pada kedua email anda, dan klik link yang diberikan. Bila anda berhasil verifikasi kedua email anda, maka pada halaman profil, email anda muncul tanda centang.

Tahap pertama selesai, sekarang menuju tahab kedua :

B. Menambahkan link author pada Blog.
Untuk menambahkan link author, google menyarankan untuk meletakkan link author didalam halaman post, dan "Link publisher" pada home page. Mengenai "Link publisher" akan saya bahas pada artikel berikutnya.

     1. Masuk Rancangan - Edit HTML - Centang "Expand Template Widget", kemudian cari kode seperti dibawah ini :

<span class='fn'><data:post.author/></span>

     2. Ganti kode diatas dengan kode dibawah ini :

<span class='fn'><a href='https://plus.google.com/ID PROFIL GOOGLE PLUS' rel='author'><data:post.author/></a></span>

Catatan : Jangan lupa ganti teks merah "ID PROFIL GOOGLE PLUS" dengan Id Profil Google Plus Anda.

Berikut contohnya :

<span class='fn'><a href='https://plus.google.com/105300861809836012204' rel='author'><data:post.author/></a></span>

     3. SIMPAN TEMPLATE

Sekarang tinggal kita lihat, apakah google berhasil mengekstrak link author yang anda pasang dalam blog, anda dapat mempergunakan "Rich Snippets Testing Tool". Silahkan masukkan ULR blog anda.

Bila anda berhasil maka akan tampak seperti gambar berikut :

Setelah berhasil, langkah paling akhir adalah mengirim permohonan Authorship pada halaman Authorship Request di alamat "Authorship Request".
Pada halaman tersebut isi form sama dengan yang anda isikan pada profil google plus pada gambar seperti berikut :

Nah selesai semua .... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara buat tab menu atau multi tab

Tab Menu atau Multi Tab ini memiliki bentuk dan warna tampilan yang sama persis dengan Tab Menu atau multi tab yang ada di blog ini. Walau demikian saya akan coba jelaskan lebih detail, dari menambah jumlah menu tab, mengganti warna menu tab baik pada saat aktif ataupun ketika hover, sehingga anda dapat menyesuaikan sendiri dengan tampilan blog anda.

Tutorial ini saya update atas permintaan salah satu sobat blogger yang menginginkan Tab Menu atau  multi tab yang sama dengan yang ada di blog ini. Dan untuk anda yang juga menginginkan Tab Menu atau multi tab ini, anda bisa ikuti langkah - langkah dibawah ini :

Seperti biasa ....

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode javascript di bawah ini dan taruh tepat sebelum kode </head> :

<script type='text/javascript'> //<![CDATA[ document.write('<style type="text/css">.tabber{display:none;}<\/style>'); function tabberObj(argsObj) { var arg; this.div = null; this.classMain = "tabber"; this.classMainLive = "tabberlive"; this.classTab = "tabbertab"; this.classTabDefault = "tabbertabdefault"; this.classNav = "tabbernav"; this.classTabHide = "tabbertabhide"; this.classNavActive = "tabberactive"; this.titleElements = ['h2','h3','h4','h5','h6']; this.titleElementsStripHTML = true; this.removeTitle = true; this.addLinkId = false; this.linkIdFormat = '<tabberid>nav<tabnumberone>'; for (arg in argsObj) { this[arg] = argsObj[arg]; } this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); this.tabs = new Array(); if (this.div) { this.init(this.div); this.div = null; } } tabberObj.prototype.init = function(e) { var childNodes, i, i2, t, defaultTab=0, DOM_ul, DOM_li, DOM_a, aId, headingElement; if (!document.getElementsByTagName) { return false; } if (e.id) { this.id = e.id; } this.tabs.length = 0; childNodes = e.childNodes; for(i=0; i < childNodes.length; i++) { if(childNodes[i].className && childNodes[i].className.match(this.REclassTab)) { t = new Object(); t.div = childNodes[i]; this.tabs[this.tabs.length] = t; if (childNodes[i].className.match(this.REclassTabDefault)) { defaultTab = this.tabs.length-1; } } } DOM_ul = document.createElement("ul"); DOM_ul.className = this.classNav; for (i=0; i < this.tabs.length; i++) { t = this.tabs[i]; t.headingText = t.div.title; if (this.removeTitle) { t.div.title = ''; } if (!t.headingText) { for (i2=0; i2<this.titleElements.length; i2++) { headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0]; if (headingElement) { t.headingText = headingElement.innerHTML; if (this.titleElementsStripHTML) { t.headingText.replace(/<br>/gi," "); t.headingText = t.headingText.replace(/<[^>]+>/g,""); } break; } } } if (!t.headingText) { t.headingText = i + 1; } DOM_li = document.createElement("li"); t.li = DOM_li; DOM_a = document.createElement("a"); DOM_a.appendChild(document.createTextNode(t.headingText)); DOM_a.href = "javascript:void(null);"; DOM_a.title = t.headingText; DOM_a.onclick = this.navClick; DOM_a.tabber = this; DOM_a.tabberIndex = i; if (this.addLinkId && this.linkIdFormat) { aId = this.linkIdFormat; aId = aId.replace(/<tabberid>/gi, this.id); aId = aId.replace(/<tabnumberzero>/gi, i); aId = aId.replace(/<tabnumberone>/gi, i+1); aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); DOM_a.id = aId; } DOM_li.appendChild(DOM_a); DOM_ul.appendChild(DOM_li); } e.insertBefore(DOM_ul, e.firstChild); e.className = e.className.replace(this.REclassMain, this.classMainLive); this.tabShow(defaultTab); if (typeof this.onLoad == 'function') { this.onLoad({tabber:this}); } return this; }; tabberObj.prototype.navClick = function(event) { var rVal, a, self, tabberIndex, onClickArgs; a = this; if (!a.tabber) { return false; } self = a.tabber; tabberIndex = a.tabberIndex; a.blur(); if (typeof self.onClick == 'function') { onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; /* IE uses a different way to access the event object */ if (!event) { onClickArgs.event = window.event; } rVal = self.onClick(onClickArgs); if (rVal === false) { return false; } } self.tabShow(tabberIndex); return false; }; tabberObj.prototype.tabHideAll = function() { var i; for (i = 0; i < this.tabs.length; i++) { this.tabHide(i); } }; tabberObj.prototype.tabHide = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } div = this.tabs[tabberIndex].div; if (!div.className.match(this.REclassTabHide)) { div.className += ' ' + this.classTabHide; } this.navClearActive(tabberIndex); return this; }; tabberObj.prototype.tabShow = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } this.tabHideAll(); div = this.tabs[tabberIndex].div; div.className = div.className.replace(this.REclassTabHide, ''); this.navSetActive(tabberIndex); if (typeof this.onTabDisplay == 'function') { this.onTabDisplay({'tabber':this, 'index':tabberIndex}); } return this; }; tabberObj.prototype.navSetActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = this.classNavActive; return this; }; tabberObj.prototype.navClearActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = ''; return this; }; function tabberAutomatic(tabberArgs) { var tempObj, divs, i; if (!tabberArgs) { tabberArgs = {}; } tempObj = new tabberObj(tabberArgs); divs = document.getElementsByTagName("div"); for (i=0; i < divs.length; i++) { if (divs[i].className && divs[i].className.match(tempObj.REclassMain)) { tabberArgs.div = divs[i]; divs[i].tabber = new tabberObj(tabberArgs); } } return this; } function tabberAutomaticOnLoad(tabberArgs) { var oldOnLoad; if (!tabberArgs) { tabberArgs = {}; } oldOnLoad = window.onload; if (typeof window.onload != 'function') { window.onload = function() { tabberAutomatic(tabberArgs); }; } else { window.onload = function() { oldOnLoad(); tabberAutomatic(tabberArgs); }; } } /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ if (typeof tabberOptions == 'undefined') { tabberAutomaticOnLoad(); } else { if (!tabberOptions['manualStartup']) { tabberAutomaticOnLoad(tabberOptions); } } //]]> </script>

6. Kemudian Copy juga kode CSS di bawah ini dan taruh tepat setelah kode javascript diatas, atau sebelum kode </head> :

<style type='text/css'> .tabberlive{ margin-left:0px; margin-right:0px; padding-left:5px; padding-right:5px; padding-top:6px; padding-bottom:5px; clear:both; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1Dq7Eh03lMWHJ9_9QakLZalDJ8NGYq4nswX1CKRdwmyMjC3oYVMHd0Gga3Cz22rHZTMROCq0B43oOOElCL1UBmrP-E6LpEvVSJ8hpt0mocvh1JOkzyG9G0nDYV-Yp314x4l_OQlyPbE/h1600/bg_post.jpg) top left repeat-x; border:1px solid #DDD; } .tabbernav { list-style:none; list-style-type:none; margin-left:0; padding-left:0px; padding-top:7px; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:bold; } .tabbernav li { list-style:none; list-style-type:none; width:20%; margin-right:1px; margin-bottom:0px; display:inline; } .tabbernav li a { padding-top:7px; padding-bottom:7px; padding-left:6px; padding-right:6px; list-style:none; list-style-type:none; margin-right:1px; background:#3e5fa2; text-decoration:none; color:#ffffff; outline:none; } .tabbernav li a:hover { list-style:none; list-style-type:none; color:#000; background:#7290ce url() center left no-repeat; text-decoration:none; outline:none; } .tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover { list-style:none; list-style-type:none; background:#fff; color:#3e5fa2; outline:none; padding-bottom:22px; padding-left:6px; padding-right:6px; border-right:2px solid #ddd; border-left:2px solid #ddd; border-top:1px solid #ddd; } .tabberlive .tabbertab { margin-top:0px; margin-left:0px; margin-right:0px; padding-top:5px; padding-left:6px; padding-right:6px; padding-bottom:5px; background:#fff; border:2px solid #ddd; } .tabberlive .tabbertab h2, .tabberlive .tabbertabhide { display:none; } .tabbertab .widget-content ul{ margin-top:5px; margin-left:5px; padding:0px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1Dq7Eh03lMWHJ9_9QakLZalDJ8NGYq4nswX1CKRdwmyMjC3oYVMHd0Gga3Cz22rHZTMROCq0B43oOOElCL1UBmrP-E6LpEvVSJ8hpt0mocvh1JOkzyG9G0nDYV-Yp314x4l_OQlyPbE/h1600/bg_post.jpg) top left repeat-x; } .tabbertab .widget-content ul a:hover{ text-decoration:none; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvV7ROL_tE3LkxeAsaiKuaP5NIgHGyyUAMr-2lBmLkG4pqZHf5Bdy3ZMISG_LycBBW3njoZctp0CF6xSRGcBol7mWoSPR9gcgRRUjMCFexGTOdzakdncuN_kUfop_plyOFAvv4oN_sUWQ/h1600/bg_menu.jpg)top repeat-x; } .tabbertab .widget-content li { color:#488040; border-bottom:1px solid #ddd; margin:0 5px; padding:5px; } </style>

7. Pada langkah ini saya contohkan tab menu diletakkan pada bagian sidebar. Silahkan anda cari pada bagian sidebar, pada blog ini kodenya seperti berikut :

<div id='rsidebar-wrapper'>

Catatan :

• Setiap template memiliki kode yang berbeda (biasanya mirip-mirip)
• Anda juga bisa meletakkan pada bagian tengah atau bagian "main-wrapper"

8. Letakkan kode HTML dibawah ini setelah kode diatas (dibagian Sidebar) :

<div class='tabber'>

<div class='tabbertab' id='tab1'>
<h2>TAB MENU 1</h2>
<b:section class='sidebar101' id='sidebar101' preferred='yes'>
<b:widget id='HTML101' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div class='clear'/>

<div class='tabbertab' id='tab2'>
<h2>TAB MENU 2</h2>
<b:section class='sidebar102' id='sidebar102' preferred='yes'>
<b:widget id='HTML102' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div class='clear'/>

<div class='tabbertab' id='tab3'>
<h2>TAB MENU 3</h2>
<b:section class='sidebar103' id='sidebar103' preferred='yes'>
<b:widget id='HTML103' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div class='clear'/>

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

Catatan :

• Teks warna biru adalah Judul tab menu.
• Untuk membuat judul tab menu, saran saya gunakan kata yg singkat, disesuaikan dgn lebar sidebar blog anda.
• Warna Hijau, Coklat, dan ping pada kode diatas adalah bagian setiap tab menu.

9. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal mengisi tab menu dengan gadget yang anda suka. Langsung saja anda menuju "ELEMEN LAMAN", dan berikut tampilan gambar tab menu atau multi tab pada elemen laman yang baru saja anda buat  :

 

Bila anda ingin mengganti warna tampilan agar sesuai dengan blog anda, berikut bagian - bagian tab menu pada kode CSS (kode pada langkah ke 6) yang perlu di ganti :

<style type='text/css'>


.tabberlive{
margin-left:0px;
margin-right:0px;
padding-left:5px;
padding-right:5px;
padding-top:6px;
padding-bottom:5px;
clear:both;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1Dq7Eh03lMWHJ9_9QakLZalDJ8NGYq4nswX1CKRdwmyMjC3oYVMHd0Gga3Cz22rHZTMROCq0B43oOOElCL1UBmrP-E6LpEvVSJ8hpt0mocvh1JOkzyG9G0nDYV-Yp314x4l_OQlyPbE/h1600/bg_post.jpg) top left repeat-x;
border:1px solid #DDD;
} 

<---------------------------------------------------------->

Warna biru adalah background tab menu menggunakan background gambar, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #eee;
<---------------------------------------------------------->

.tabbernav {
list-style:none;
list-style-type:none;
margin-left:0;
padding-left:0px;
padding-top:7px;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}




.tabbernav li {
list-style:none;
list-style-type:none;
width:20%;
margin-right:1px;
margin-bottom:0px;
display:inline;
}




.tabbernav li a {
padding-top:7px;
padding-bottom:7px;
padding-left:6px;
padding-right:6px;
list-style:none;
list-style-type:none;
margin-right:1px;
background:#3e5fa2;
text-decoration:none;
color:#ffffff;
outline:none;
} 

<----------------------------------------------------------> 

Warna biru adalah background Judul tab menu (#3e5fa2 / biru tua), dan warna hijau adalah warna teks Judul tab menu (#ffffff/ putih). Silahkan anda lihat tab menu yang ada di blog ini.

<---------------------------------------------------------->

.tabbernav li a:hover {
list-style:none;
list-style-type:none;
color:#000;
background:#7290ce url() center left no-repeat;
text-decoration:none;
outline:none;
} 

<---------------------------------------------------------->  

Warna biru adalah warna background Judul tab menu (#7290ce / biru muda) ketika hover, dan warna hijau adalah warna teks Judul tab menu (#000/hitam)ketika hover. Silahkan anda lihat dan coba arahkan mouse anda pada tiap-tiap judul tab menu yang ada di blog ini.

<---------------------------------------------------------->

.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
list-style:none;
list-style-type:none;
background:#fff;
color:#3e5fa2;
outline:none;
padding-bottom:22px;
padding-left:6px;
padding-right:6px;
border-right:2px solid #ddd;
border-left:2px solid #ddd;
border-top:1px solid #ddd;
} 

<---------------------------------------------------------->  

Warna biru adalah warna background Judul tab menu (#fff/putih) ketika aktif, dan warna hijau adalah warna teks Judul tab menu (#3e5fa2/biru tua)ketika aktif. Silahkan anda lihat dan coba Klik pada tiap-tiap judul tab menu yang ada di blog ini.

<---------------------------------------------------------->

.tabberlive .tabbertab {
margin-top:0px;
margin-left:0px;
margin-right:0px;
padding-top:5px;
padding-left:6px;
padding-right:6px;
padding-bottom:5px;
background:#fff;
border:2px solid #ddd;
}

 <---------------------------------------------------------->  

Warna biru adalah warna background konten tab menu (#fff/putih) ketika aktif, dan warna hijau adalah warna border konten tab menu (#ddd/abu-abu).

<---------------------------------------------------------->

.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}




.tabbertab .widget-content ul{
margin-top:5px;
margin-left:5px;
padding:0px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1Dq7Eh03lMWHJ9_9QakLZalDJ8NGYq4nswX1CKRdwmyMjC3oYVMHd0Gga3Cz22rHZTMROCq0B43oOOElCL1UBmrP-E6LpEvVSJ8hpt0mocvh1JOkzyG9G0nDYV-Yp314x4l_OQlyPbE/h1600/bg_post.jpg) top left repeat-x;
} 

<----------------------------------------------------------> 

Warna biru adalah background pada widget yang menggunakan tag "ul", contohnya bisa anda lihat pada tab menu "Arsip" yg ada di blog ini. Background "ul" tab ini menggunakan gambar gradasi abu-abu putih, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #eee;
<---------------------------------------------------------->



.tabbertab .widget-content ul a:hover{
text-decoration:none;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvV7ROL_tE3LkxeAsaiKuaP5NIgHGyyUAMr-2lBmLkG4pqZHf5Bdy3ZMISG_LycBBW3njoZctp0CF6xSRGcBol7mWoSPR9gcgRRUjMCFexGTOdzakdncuN_kUfop_plyOFAvv4oN_sUWQ/h1600/bg_menu.jpg)top repeat-x;
}

 <---------------------------------------------------------->  

Warna biru adalah background pada widget yang menggunakan tag "ul" ketika hover.  Background "ul" hover tab ini menggunakan gambar gradasi abu-abu putih terang, anda bisa mengganti hanya dengan kode warna saja, jadinya seperti berikut: background : #fff;
<---------------------------------------------------------->



.tabbertab .widget-content li {
color:#488040;
border-bottom:1px solid #ddd;
margin:0 5px;
padding:5px;
}



</style>

Nah.... selesai, mudah - mudahan penjelasan diatas membantu.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Mengganti profil Blogger ke google plus

Google + menurut saya termasuk memberikan banyak kemudahan kepada kita yang diantaranya kita bisa menghubungkan website dan blog yang kita miliki, juga akun-akun sosial media seperti facebook, twitter, ataupun yang lain kedalam Google Plus.

Kemudian untuk menautkan blog Anda dengan akun Google+, kita perlu mengganti profil Blogger kita dengan profil Google+.

Tapi sebaiknya kita mengetahui terlkebih dulu bagaimana cara kerjanya :

• - Profil Blogger kita akan diubah ke profil Google +
• Gadget standart profil blog akan menampilkan informasi dari Google Plus, bukan lagi dari profil Blogger Anda.
• Pos dan Komentar kita akan ditautkan ke profil Google +.
• Perubahan ini terjadi untuk semua blog kita yang terdaftar dalam satu akun blogger.
• Kini, ketika kita berkomentar menggunakan akun Blogger, maka yang muncul adalah profil kita di Google+.

Catatan penting :

• Pada saat beralih ke profil Google+, Anda akan memiliki opsi untuk kembali ke profil Blogger Anda selama 30 hari. Setelah itu, data profil Blogger Anda akan dihapus.
• Informasi di profil Blogger Anda tidak akan ditransfer ke profil Google+, jadi salin informasi profil Blogger di profil Google+ Anda sebelum beralih

Nah..., bila anda sudah mantab dan berminat, berikut langkah-langkahnya :

1. Bila anda menggunakan laman blogger lama, silahkan anda beralih dulu ke antarmuka blogger yang baru : 

2. Pada tombol setting di kanan atas, pilih Terhubung ke Google+.

3. Pada halaman baru bagian paling bawah, centang persetujuan Anda menghubungkan Blog dengan Google+. Kemudian klik tombol Beralih Sekarang Juga.

4. Halaman berikutnya, pilih blog yang akan anda tambahkan pada bagian "Kontributor untuk".
Kemudian Kilk "TAMBAHKAN BLOG".

Selesai.... Sekarang kita sudah menggunakan profil Google + untuk blog kita.
Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :