Mengetahui Kode HTML Yang Ada di Elemen Blog

Menyambung dengan artikel Mengedit Tampilan Widget Blogger Berbeda Beda yang sudah di posting beberapa hari yang lalu, kali ini saya akan mencoba menjelaskan poin yang belum jelas yaitu pada edit CSS bagian title widget, yang abu abu antara h2 dan h3. Nah, kali ini kita akan mencoba mengupas sebenarnya apakah abu abu lebih ke hitam atau lebih ke putih.

Mengetahui tag yang terdapat pada title widget sangatlah penting, kenapa?? Tentu saja dengan mengetahuinya, maka kita akan bisa mengkostumisasikannya sesuka hati. Tag benar, CSS benar :D. Cara di bawah ini akan sangat membantu, bukan hanya untuk title widget, juga bisa untuk elemen elemen lain pada blog sobat. Sebelumnya, untuk permulaan silahkan sobat membaca artikel ini.

Untuk menentukan tag yang tepat sebenarnya sangat mudah, sobat hanya memerlukan firebug atau developer ekstension. Cara ini saya khususkan untuk browser Google Chrome. Namun, jika ada yang ingin untuk browser lain, bisa komen di kotak komentar. Lagi mau lihat pasar dulu :D

Disini saya akan contohkan untuk melihat tag pada title widget. Pertama yang harus sobat lakukan, adalah membuka ini. Kemudian tekan CTR: + SHIFT + I. Setelah itu, akan muncul seperti ini.

Kemudian sobat arahkan kursor ke bagian bawah sebelah kiri. Sehingga hasilnya akan seperti ini.

Kemudian arahkan ke title widget hingga muncul seperti ini.

Kemudian lihat di bagian bawah layar, maka akan terlihat kode html kurang lebih seperti ini.

Maka, dengan begitu dapat disimpulkan bahwa title widget blog menggunakan kode H3. Dengan begitu maka konfigurasi CSSnya menjadi seperti ini

.sidebar h3 {
...................
}

Kemudian cari kode ini di CSS sobat, atau buat baru jika tidak ada. Dan konfigurasikan sesuka hati. Dan, selamat tahun baru 2013 besok :D

Mengedit Tampilan Widget Blogger Berbeda Beda

Mengedit widget sekaligus pada blogspot mungkin bagi sobat masih terbilang mudah, namun bagaimana jika widget yang diedit berbeda satu sama lain. Tentu kedengarannya tidak terlalu mudah, kan? Nah, yang akan kita coba bahas kali ini adalah bagaimana caranya agar tampilan setiap widget bisa berbeda.

Memang ada manfaatnya..??

Pernahkah sobat melihat blog yang bergaya magazine atau yang lebih dikenal di kalangan blogger sebagai blogazine. Sedikit mengupas ampas terlebih dahulu, blogazine adalah gaya blog yang mengedepankan design atau keindahan setiap posting dan tentunya..berkualitas. Setiap posting atau artikel dibuat berbeda. Untuk apa?? itulah konsep blogazine. 

Masih belum ngerti nih..??

Pernahkah sobat membaca majalah..?? Setiap artikel yang ada pada majalah dibuat semenarik mungkin dengan gaya berbeda setiap artikelnya. Begitu juga dengan blogazine, blogger blogazine membuat artikelnya semenarik mungkin dengan gaya berbeda dari setiap artikel. Dengan ini, blog tidak terlihat monoton. Akibatnya, pembaca akan kembali lagi ke blog tersebut untuk melihat artikel kreatif selanjutnya. Pembaca dibuat kagum oleh empunya blog. Saya sendiri juga kagum terhadap beberapa blog bergaya blogazine, seperti salah satu artikel dari smashing magazine, sobat bisa lihat di sini.

Lalu, bagaimana caranya..??

Sebelumnya, sobat harus mengerti terlebih dahulu. Ini penting bagi pemula seperti saya. Setiap elemen harus ( lebih tepat sebaiknya ) mempunyai pengenal. Sama seperti kita di dunia nyata, seperti KTP atau Kartu Pelajar. Dengan pengenal itulah kita bisa mengenali yang mana A dan yang mana B. Sehingga, kita bisa memodifikasi ( dalam dunia nyata, kita misalkan memanggil ) salah satu elemen tanpa harus menganggu elemen yang lain. Kita bisa memodifikasi A tanpa menggangu B. Inilah hal yang sangat penting untuk kita ketahui. Walaupun diatas telah disebutkan bahwa setiap elemen seharusnya mempunyai pengenal, namun tak ditutup kemungkinan ada elemen yang tidak mempunyai pengenal. Istilahnya imigran gelap :D.

Tapi, tenang saja, setiap widget yang ada di blog berbasis blogspot secara otomatis telah terbentuk pengenalnya. Nah, pengenal itu sekarang yang akan kita manfaatkan. Sekarang tugas sobat adalah mengetahui pengenal tersebut. 

1. Pertama, login ke blogger.com, lalu pilih tab template
2. Kemudian, pilih edit html

Disini bagian pentingnya. Sobat harus bisa menemukan pengenal dari widget sobat. Biasanya akan seperti ini:

<b:widget id='Label1' locked='false' title='Kategori Blog' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Link Sobat' type='LinkList'/>

Kalau sobat kesulitan mencarinya, gunakan title widgetnya, misalnya seperti di atas, yaitu Kategori Blog dan Link Sobat. Gunakan CTRL + F untuk pencarian.

Setelah menemukan pengenalnya ( id atau class ) seperti diatas, contohnya Label1 dan LinkList1, maka sekarang kita tinggal mengedit CSSnya. Sebelumnya, catat dulu id yang ingin diubah, misalnya di sini saya simpulkan yaitu widget dengan title Kategori Blog dengan pengenal ( id ) Label1. Catatnya harus sama persis, hurufnya, besar kecilnya.

Kemudian kita harus mengedit CSSnya. Temukan kode ]]></b:skin>

 dengan menggunakan CTRL + F. Setelah itu, tepat di atasnya pastekan kode di bawah ini

#Label1
{
......
}

Sebelumnya, pastikan tulisan id nya sama persis, tidak ada huruf yang kebalik, besar kecil hurufnya harus sama. Gunakan tanda # untuk mengawali id.

Kemudian terserah sobat mau memodifikasi bagaimana.. Contohnya sebagai berikut..

#Label1
{
background : red ; /* ini untuk mengatur warna background (lebih jelas lihat di sini ) */
/* tambahkan kode yang sobat suka */
}
#Label1 h2 /* untuk title widget, h2 atau h3 tergantung dari template sobat, cara melihat bisa disini */
{
margin-left : 10px ; /* mengatur batas antara pinggir widget dengan title widget */
/* tambahkan kode yang sobat suka */
}

TIPS

• Kalau widget tidak dipakai lagi, hapus kode CSSnya.

Yang lainnya bisa dikreasikan sendiri, tidak mungkin menyebutnya satu persatu..:D
Semoga tips kali ini bisa membantu sobat yang lagi gemar gemarnya edit template .. Have a nice day.. :D 

Cara Membuat Tabber Sederhana ( Tab View )

Bagaimana Ya cara agar recent pos, popular post dan comments dapat menyatu ? / tolong kasih tau caranya dong

Sesuai dengan pertanyaan dari  Icuk Sugiarto Sesa. A diatas, kali ini saya akan berusaha menjawabnya. Atau bagi sobat yang belum tau komentarnya bisa langsung di lihat di sini. Ini juga saya sebarkan untuk sobat  untuk sobat yang bloggerholic. Meskipun kelihatannya sederhana, trik ini bisa sangat berguna dan bisa memberi peluang bagi widget lain untuk berada di bawahnya. Namanya adalah tabber. Tabber ini berfungsi untuk menyatukan beberapa widget sehingga bisa menghemat space. Kalau sobat belum tau, bisa langsung di lihat di samping tulisan ini. Saya menyatukan recent post, popular post dan recent comments sehingga terlihat seperti satu widget.

Cara pemasangannnya bisa dibilang gampang gampang susah. Langsung saja, berikut langkah langkah yang harus sobat ikuti untuk memasang tabber..

1. Login ke blogger
2. Masuk ke dashboard..
3. Pilih rancangan lalu pilih template
4. Pilih edit html
5. Letakkan kode CSS di bawah ini tepat di atas ]]></b:skin>

.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:10px;
}

.widget-tab {
background:#c9dbdd;
font-family:Arial,Helvetica,sans-serif;
padding:5px !important;
}

.widget-tab  ul {
margin:0px;
padding:0px 5px 0 5px;
}
.widget-tab  ul li {
list-style:none;
border-bottom:1px dotted #a4bddf;
padding-top:4px;
padding-bottom:4px;
font-size:12px;
}
.widget-tab  ul li:last-child {
border-bottom:none;
}
.widget-tab  ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab  ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content  ul li a:hover {
color:#a59c83;
}
.tab-content  ul li a:hover small {
color:#baae8e;
}

.active-tab{
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdLnOMVOaKlxlVm7cyNT6-k-q52IGveOsepuYST2JpkDCLVlpI6lqPy6SbpB13CgyzdNJxC0O1QtQmAMts_JA0dAzYCMyuOY8BxLTofwdBJwZOoawb5iyyRm_m3mtEJrjB4nKPnVwwjJo/s1600/sidebar.png) repeat-x scroll left bottom !important;
color:#282E32 !important;        
}

ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}

ul.tab-wrapper li{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNf3FlBY6L4lQAQTSpUnkPTXmVrgoDS-fw5Cpns_HECx26CegGsXvVJT-WwF0b2DdeTbwGET9yfhO6JSe71tMHTG2MyFSlRjStujWE-rB5OuPcJj7TZ3Jdxd6bYW2n6copIrL3QAfQDcw/s1600/menu-m1.png) repeat-x top;
color:#FFF;
cursor:pointer;
display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:700;
line-height:2em;
list-style-image:none!important;
list-style-position:outside!important;
list-style-type:none!important;
margin-right:1px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
padding:8px 14px
}  

6. Tabber ini menggunakan efek jquery, makanya sobat harus punya jquery.min.js di html blog sobat. Ada beberapa template yang sudah terinstall jquery ini, bagi yang sudah terinstal lewati saja langkah ini.. Untuk mengeceknya silahkan lihat di atas kode </head>. Kodenya seperti ini..

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

Versinya bisa berbeda beda.

7. Tambahkan kode ini tepat di bawah script jquery no 6 tadi..

<script type='text/javascript'>
var starttab=0;
var endtab=2;
var sidebarname=&quot;sidebar&quot;;
</script>
<script src='http://johnytemplate.googlecode.com/files/tabber.js' type='text/javascript'/

var starttab adalah nomor wigdet yang dihitung mulai dari 0 (nol). var endtab=2 adalah nomor terakhir widget yang ingin di satukan. Misalnya saya menggunakan seperti kode di atas, maka hasilnya bisa anda lihat di blog ini yaitu 3 widget, recent post, popular post dan recent comment (0 - 1 - 2 => jumlahnya 3). Jadi bisa dibilang 3 widget pertama yang akan menyatu.

var sidebarname diisi dengan id dimana nantinya akan di sertakan sidebarnya. Temukan kode yang kurang lebih seperti di bawah ini..

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Lihat yang warna biru di atas, var sidebarname diisi sesuai dengan idnya. Misalnya id di atas adalah sidebarleft, maka di var sidebarname diisi seperti ini..

var sidebarname=&quot;sidebarleft&quot;;

7. Save dan lihat hasilnya.

Reference = creatingwebsite-maskolis.blogspot.com
                   Abu Farhan

5 Free Widget Penarik Jutaan Pengunjung Per Harinya

Pengunjung, pengunjung dan pengunjung. Salah satu masalah terbesar, hampir untuk semua blogger. Pengunjung, kata ini hampir bisa menjawab seluruh pertanyaan seputar dunia blogging.

Q: Untuk apa sobat menulis posting..?
A: Untuk pengunjung.

Q: Untuk apa sobat meningkatkan kualitas SEO blog..?
A: Untuk pengunjung.

Q: Untuk apa sobat menulis posting yang jelas dan detail..?
A: Untuk pengunjung yang lebih banyak lagi...

Semua jawaban di atas adalah pada dasarnya. Pada dasarnya, menulis posting yang detail dan jelas yang disertai dengan peningkatan SEO blog adalah untuk pengunjung. Itu belum termasuk pilihan jawaban optional dan tambahan lainnya seperti uang, popularitas dan lain sebagainya.

Untuk masalah mencari pengunjung sebenarnya gampang gampang susah, setelah usaha tinggal berdoa dan sabar. Bagi blogger pemula seperti saya, 1 pengunjung saja rasanya sudah senang sekali. Apalagi jika ada yang meninggalkan jejak seperti komentar. Tak peduli isi spam, yang penting jejak tadi sudah bisa jadi modal dan motivator agar kedapannya lebih bersaing di Google. Namun di balik cara original di atas, masih ada cara "singkat" yaitu dengan membayar dan sobat dijanjikan ratusan hingga puluhan ribu visitor setiap harinya.

Kali ini saya akan coba mengupas salah satu usaha mencari pengunjung yaitu dengan pengoptimalisasian widget. Lebih tepatnya mencari pageview. Widget merupakan senjata ampuh untuk meningkatkan jumlah pageviews .Selain fungsinya sebagai memperindah tampilan dan memperkaya isi blog, mulai dari navigasi dan lainnya, sobat bisa memanfaatkan fungsi extranya seperti yang sudah dikatakan sebelumnya, Navigasi.

1. Popular Post..
Yang ini rasanya semua blog wajib punya. Popular post salah satu widget bawaan dari blogger. Sobat bisa memasangnya di blog dengan menambah gagdet/widgetnya. Namun, sobat bisa menggunakan jasa pihak ketiga untuk urusan ini. Selain warna yang lebih beragam, mereka juga menggunakan design dan layout yang lebih menarik dan atraktif. Tujuan dan hasilnya sama saja, pengunjung dan pageview(s).

2. Related Article.
Related Article letaknya di bawah postingan. Fungsinya untuk menampilkan posting berdasarkan label atau keyword keyword yang sama. Misalnya, sobat sedang membaca artikel yang berjudul memilih template yang SEO. Maka setelah posting related articlenya bisa berupa mengoptimasi gambar agar lebih SEO, menciptakan blog cepat untuk SEO dan lain sebagainya. Kita bisa lihat bahwa disini ada satu topik dan query yang sama, yaitu SEO. Ini akan menarik pengunjung untuk lebih tau mengenai topik SEO tersebut. Hasilnya, "pengunjung" berlipat ganda karena jumlah pageview lebih banyak. Sobat bisa memakai widget buatan Linkwithin sebagai salah satu produk paling populer dan banyak digunakan.

3. Recent Post.
Recent Post berfungsi menampilkan latest article atau artikel terbaru. Meskipun artikel terbaru sudah tertera di homepage, namun widget bisa menampilkan artikel sebelum posting yang sudah ada di homepage. Misalnya sobat mengatur hanya batas 5 posting di homepage, jadi posting ke 6 dan seterusnya sampai batas yang ditentukan bisa di tampilkan melalui widget ini. Widget ini lebih menarik dan atraktif ketimbang widget yang hanya berupa list list biasa. (baca : cara memasang widget recent post).

4. Random Post.
Random Post merupakan widget yang bisa menampilkan posting atau artikel secara acak. Widget ini sangat berguna untuk men"ekspose" artikel artikel yang masih kurang dalam pageview. (baca : cara memasang widget random post).

5. Recommeded Widget.
Sobat jangan mudah tertipu dengan title widget di atas. Maksudnya, bukan widget yang direkomendasikan melainkan widget recommeded for you. Memang namanya adalah widget recommeded for you. Ada juga yang menyebutnya lain. Cara kerjanya, postingan akan muncul ketika sobat terus scroll ke bawah. Untuk demonya bisa di lihat di bola.net. Widget ini sangat efektif untuk meningkatkan jumlah pageview.

Sudah seharusnya widget lebih dioptimasikan untuk pengembangan SEO sobat. Selain pemasangan dan pengoperasian yang mudah, tutorial dan keberagaman widget juga bisa menjadi alasan. Kini, tinggal bagaimanan widget tersebut dapat berkerja dengan baik dan mendatangkan ribuan pageview perharinya. Sobat bisa mengoptimalkan dengan cara cara di atas. Semoga widget widget diatas bisa membantu sobat untuk mendatangkan pageview(s).

Cara Memasang Widget Random Post

Widget random post adalah widget yang harus dipasang bagi sobat yang sedang dalam usaha pengembangan SEO. Widget ini dapat menarik pengunjung. Widget ini sangat berguna untuk meng"ekspose" posting posting atau artikel artikel yang kalah tenar dengan yang lain sehingga nantinya terjadi keseimbangan. Untuk cara memasangnya sebenarnya sangat mudah. Sobat hanya harus membuat satu widget HTML/Javascript baru. Tempatkan di tempat yang diinginkan. Kemudian pastekan kode berikut ini ke dalamnya..

<script type="text/javascript">
var acakarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;acakarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in acakarray){if(l==acakarray[j]){ flag=1;}}
if(flag==0&&l!=0){acakarray[i++]=l;}}document.write('<ul>');
for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Setelah paste, save, lihat pratinjau kalau memang sudah pas baru simpan..

Widget random post ini sebaiknya di tempatkan di tempat yang eye catching dan mudah dilihat. 

Semoga berhasil..

Cara Memasang Widget Recent Post dengan Animasi

Widget recent post sangat penting. Selain sebagai memperkaya tampilan, widget ini juga bisa menjadi senjata ampuh untuk meningkatkan pengunjung. Untuk cara memasangnya ikuti langkah langkah berikut..

1. Login ke blogger.
2. Masuk rancangan.
3. Add Gadget  HTML / Javascript di tempat yang diperlukan.
4. Letakkan kode di bawah ini sebagai isinya..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:0px;
margin-left:-5px;
padding:0px 0px;
height:346px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:287px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Hm1r80BaybkuxNyPMjcok8wgAS1q4gvEEfKiBHj7l27KNPdUUgQDlat0-ENX1UirNYBBiohmsJ9FU0Csgd51mHqY61Wwo17PFJrIepMUwdTA5rlSgROrCE8uqtDSVURkTmmnMtLiddqw/s1600/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
    <script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 400;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://kupas-ampas.blogspot.com/";
limitspy=5
intervalspy=6000
</script>
<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
 /*
 * Script dikombinasikan dari bloggerstricks.com
 * spy effect dari jqueryfordesigners.com
 * Oleh Abu Farhan (www.abu-farhan.com)
 * Modifikasi oleh buka-rahasia.blogspot.com
 */
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=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="spyWrapper" />').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="spy">');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 x=["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=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";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>

Link blog silahkan diganti. Pastikan ada slash ( / ) di akhir.

Keterangan..
intervalspy=6000          -----> kecepatan scroll.
limitspy=5                     -----> jumlah postingan yang tampil dalam satu tampilan sekaligus.
numpost=10                 -----> jumlah postingan terakhir yang akan dicrawl.

Perhatikan CSS di bawah ini..

#spylist ul{
width:355px;

#spylist li {
width:287px;

#spylist ul adalah untuk keseluruhan ( background dari widget )
#spylist li adalah untuk list untuk list title posting. Jadi, usahakan lebar dari property width di #spylist li lebih kecil dari lebar di #spylist ul. Ini digunakan agar title menjadi warp text pada tempat yang sempurna dan tidak melebihi batas lebar background. Akibatnya, title akan hilang sebagian karena tidak tampak.




- Script dikombinasikan dari bloggerstricks.com.
- Spy effect dari jqueryfordesigners.com.
- Oleh Abu Farhan (www.abu-farhan.com).
- Modifikasi oleh buka-rahasia.blogspot.com.

Thanks buat yang udah berkontribusi besar untuk widget recent post ini...

Selamat mencoba

Cara Memasang Meta Tag ( Trik Tips Lengkapnya)

Meta tag sangat diperlukan dalam sebuah blog. Fungsinya adalah untuk memperkenalkan dan meningformasi seluruh isi blog kepada Search Engine layaknya Google maupun Yahoo. Beberapa fungsi diantaranya merupakan deskripsi blog, keyword keyword yang terkandung dalam blog, copyright blog, ataupun bahasa yang digunakan dalam blog itu sendiri. Sekarang fungsi dan jenis dari meta tag sangat beragam. Selain yang sudah disebut diatas, masih ada wilayah waktu yang digunakan, negara asal blog. Semua informasi ini akan diberikan kepada search engine agar mereka bisa mengoptimalkan hasil pencarian untuk keyword atau query tertentu.

Sebelum memulai meletakkan meta tag, sobat harus tau yang satu ini. Menurut penulisannya, meta tag terbagi 2.

<meta content='Author Name here!' name='Author'/>

<meta name='Author' content='Author Name here!'/>

Keduanya hanya berbeda pada peletakan saja, tapi efeknya sama.

Langsung saja, meta tag berada di dalam <head>. Pada dasarnya, sobat hanya perlu meletakkannya tepat di bawah <head> tapi kalau sudah pernah pasang, letakkan saja di bawah kode ini..

<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> | <data:blog.title/></title>

 Kalau tidak ketemu, langsung saja di bawah <head>. Berikut beberapa meta tag dan fungsinya..

<meta content='tips trik blogger blogspot tutorial blog dunia blog berita software full version addons mozilla chrome opini' name='description'/>
<meta content='tips trik, blogspot, blogger, dunia blog, tutorial dan seo, optimalisasi, addons software' name='keywords'/>

Kalau belum pernah di pasang sebelumnya, letakkan di bawah <title><data:blog.pageTitle/></title>. Hal ini bisa saja terjadi kalau template sobat buatan orang lain yang dishare diinternet. Biasanya memang sudah di pasang untuk kemudahan pengguna dan kepentingan SEO.

Meta tag description dan keyword sangatlah penting. Kalau sobat langsung meletakkan seperti yang diatas. Sobat akan mengalami duplicate meta tag dan google sangat membenci hal tersebut. Description dari posting sobat akan sama dengan description dari blog. Akibatnya, sobat akan mengalami penurunan trafik. Oleh karena itu, kita harus menambah b:if cond agar meta tag ini muncul pada saat kondisi tertentu. Sobat tinggal menempatkan meta tag tersebut diantara b:if cond. Hasilnya akan seperti ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'/>
<meta content='tips trik blogger blogspot tutorial blog dunia blog berita software full version addons mozilla chrome opini' name='description'/>
<meta content='tips trik, blogspot, blogger, dunia blog, tutorial dan seo, optimalisasi, addons software' name='keywords'/>
</b:if>

Sesuai dengan tag b:if cond diatas, maka isi atau content dari meta tag description dan keyword sobat hanya akan aktif untuk link homepage. Maka, nanti description homepage blog sobat akan sesuai dengan meta diatas. Untuk postingnya sendiri, sobat tidak perlu takut. Google akan menampilkan description lain yang sesuai dengan query pencarian. Jadi intinya, description dari posting yang ditampilkan di SERP akan di atur oleh Google.  Description ini berisi beberapa kata yang relevan dengan keyword yang sedang dicari. Untuk kata katanya berdasarkan algoritma google. Sobat hanya harus melakukan "serah terima" dengan Google.

Untuk jenis meta tag lain sebenarnya sangat beragam, beberapa contoh dari mereka antara lain:

<meta name="robots" content="index, follow">

<meta name="revisit-after" content="7 days">

<meta name="abstract" content="deskripsi singkat">

<meta name="author" content="nama admin">

<meta name="copyright" content="2012, nama blog/author">

<meta name="distribution" content="global"> 

<meta name="generator" content="blogger">

<meta name="language" content="id">

<meta name="rating" content="general">

<meta name="expires" content="never"/>

<meta name="geo.country" content="id"/>

<meta name="geo.placename" content="Indonesia"/>

<meta name="spiders" content="ALL"/>

Fungsi dari meta tag di atas antara lain.

1. Robot.

Tag ini bertujuan untuk mengatur search engine dalam meng-crawl blog anda.

2. Revisit after.

Mengatur Search engine kapan harus kembali dan mengindex blog anda.

3. Abstract.

Fungsinya hampir sama dengan description. Lebih Spesifik dan disingkat.

4. Author.

Memberi tahu search engine pengelola dan admin blog.

5. Copyright.

Menginformasikan pemilik hak cipta terhadap seluruh isi blog.

6. Distribution. 

Menjelaskan distribusi isi blog. Seperti pengelompokan pembaca berdasarkan wilayah. Content lainnya..

Local

IU -----------------------> Internal Use.

7. Generator.

Memberi tahu Search Engine platform yang digunakan.

8. Languange. 

Menginformasikan bahasa yang digunakan dalam blog.

9. Rating. 

Memberitahu target pembaca.

10. Expires.

Memberitahu Search Engine tenggang waktu sebuah blog untuk ditampilkan di Search Engine atau tidak ada batasan waktu.

11. Geo.Country.

Menginformasikan kepada search engine negara asal blog.

12. Geo Placename.

Fungsinya sama seperti Geo Country. Hanya lebih spesifik.

13. Spider.

Mengaturspider  bot mana saja yang boleh mengindex blog anda..


Catatan : Untuk kostumisasi, silahkan ganti tulisan berwarna biru.

Itulah beberapa meta tag yang sering digunakan dalam sebuah blog. Kalau memang blog anda sudah ada sebelumnya, tinggal tambahkan saja. Terima kasih telah membaca Cara memasang meta tag ( Tips Trik Lengkapnya ).

Super Screenshot Addon yang Wajib Punya

Sobat suka edit template?? Wajib punya addons yang satu ini. Bagi yang suka edit dan buat template untuk blog atau website yang di publish / di share ke internet pasti harus menyertakan demonya. Baik berupa gambar maupun link yang memakai template tersebut. Addon ini sangat berguna untuk memperlengkap demo yang berupa gambar.

Addons ini bernama Awesome Screenshot:Capture & Annotate. Untuk Fiturnya sendiri bisa dibilang sangat lengkap. Setelah gambar di capture, bisa langsung diedit, baik dengan menempatkan tulisan, blur maupun bentuk bentuk sederhana lainnya. Yang paling beda, addon ini punya fitur scroll capture, yaitu bisa menangkap (mencapture) seluruh halaman web / blog. Fitur ini sangat berguna untuk lebih menarik pembaca karena mereka bisa melihat demo template yang full view. Karena bagaimanapun juga, target publish template ini adalah koversi. Bagaimana caranya agar pengunjung mendownload dan menggunakan template yang dipublish tadi.

Untuk previewnya bisa di liat di video ini..

Untuk downloadnya bisa langsung ke link di bawah ini..

https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce

Setelah download n instal, gunakan, publish kemudian dapatkan banjir komentar..

Pasang hitstats di blog

Stastik adlah hal penting di blog, untuk itu saya berbagi artikel ini. Untuk cara pasang widget hitstats bisa mengikuti cara ini:

1. Buka tab baru, dan masuk ke hitstats.com

2. Anda harus daftar dulu. Caranya, isi url website anda di register your website.

3. Setelah itu, isi form fill data yang diberikan seperti di bawah ini.

4. Pilih waktu berdasarkan lokasi anda. Centang I have read and agree Publisher Agreement Terms, dan isi kode captcha, kemudian register.

5. Cek email, kemudian klik link yang dikirimkan, buka histats.com kemudian login

6. Pilih add a website.


7. Isi url web anda, bahasa yang digunakan, zona waktu, kategori, title dan description. Jangan lupa isi kode captcha.

8. Tekan continue.


9. Pilih get your counter code.

10. Pilih blog anda tadi

11. Kemudian tekan counter code.

12. Pilih add new counter.


13. Pilih counter yang anda sukai.

14. Pilih warna dan attribut yang akan ditampilkan.

15. Copy kode yang diberikan dan masuk ke dashboart > tata letak dan tambah widget baru.

16. Pilih HTML Javascript kemudian paste kode tadi di isinya.

17. Simpan dan lihat hasilnya..

Statistik untuk blog

Statistik sangat penting untuk blog, meskipun di blogger sendiri sudah ada widget statistik untuk blog, saya lebih suka menggunakan jasa pihak ktiga untuk urusan ini. Kenapa?? karena data yang lebih mendetail dan bervariasi. Bukan hanya pengunjung perhari, tapi juga jumlah backlink dan peringkat blog.

Kali ini ada beberapa widget dari third party yang saya rekomendasikan.

1. Easycounter.com. Dengan widget ini anda dapat melihat keseluruhan pageview. Pilihannya pun bervariasi.

Untuk cara instal bisa lihat di cara memasang easycounter.

2. Hitstats. Salah satu favorite saya saat masih nge-blog di wordpress. Kebiasaan itu masih saya pakai sampai sekarang. Pilihannya berkategori dan sangat banyak. Warna widget masih bisa di atur. Salah satu contohnya:

Untuk cara instalnya bisa di lihat di cara memasang hitstats.

3. Alexa. Fitur lain pada widget ini adalah dapat menghitung trafik blog serta jumlah backlink yang ada. 

Untuk cara instalnya bisa lihat di cara memasang alexa rank.

4. Blog statistics Widget yang satu ini dapat melihat jumlah posting dan komentar yang ada di blog anda. 

Untuk cara instalnya bisa di lihat di cara memasang blog statistics.

Oke, cukup disini...

Have a nice day buat temen temen blogger semua..

Pasang easycounter di blog

Langsung saja, untuk cara instal anda bisa ikuti langkah langkah berikut:

1. Buka easycounter.com.
2. Isi username, email, password, dan link url anda seperti di bawah ini

Jangan lupa centang I agree to the Terms and Conditions.

3. Pilih Counter Style terserah anda.

4. Setelah dapat kode htmlnya, copy kode tersebut.

5. Masuk ke dashboard anda, lalu ke tata letak.

6. Tentukan di mana widget akan ditampilkan, kemudian pilih tambah widget, dan pilih HTML/Javascript.

7. Copy kode tadi seperti gambar di bawah ini

8. Langkah terakhir, simpan dan lihat perubahannya.

  Good statistics are half of the way

Pasang Alexa di blog

Alexa, widget yang dapat menghitung jumlah backlink. Kali ini saya akan share cara pasang widget Alexa di blog. Anda bisa simak caranya di bawah ini:

1.  Buka http://www.alexa.com/siteowners/widgets.

2. Pilih salah satu, kemudian isi dengan url anda.

3. Pilih ukuran yang anda sukai, kemudian copy kodenya.

4. Buka dashboard anda kemudian pilih tata letak dan tambah widget.

5. Pilih HTML/Javascript, kemudian pastekan kode tersebut.

6. Simpan dan lihat hasilnya..

Pasang Blog Statistics di blog

Kali ini saya akan share cara memasang blog statistics. Caranya sebagai berikut:

1. Login ke blogger.
2. Masuk ke dashboard.
3. Pilih tata letak.


4. pilih tambah widget.
5. Pilih HTML/Javascript.
6. Dikotak yang tersedia, pastekan kode berikut.

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<ul><li><script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

7. Ganti url dengan url blog anda.
8. Save dan lihat hasilnya..