Modifikasi, Mempercantik, Merubah, Merombak, HTML, Blog, Blogger, Blogspot, Website, Chrome, krom: April 2013

Selasa, 30 April 2013

Cara Mudah Copy Template Blog Lain

Cara Mudah Copy Template Blog Lain, ikuti info yg aku dapat dari internet. mengcopy template blogger atau website orang. Ada yang bilang juga cara ini adalah cara mencuri template blog orang lain namun saya kira bukan mencuri akan tetapi lebih berfikir kreatif. Cara ini hampir sama dengan cara mengetahui themes blog orang lain tapi malah lebih rumit lagi :D
Kalau untuk mengetahui themes blog orang lain akan lebih mudah pada cms open source apalagi jika yang memakai adalah orang yang kurang begitu mengerti tentang coding seperti saya. Contoh saja jika kita ingin mengetahui tema blog wordpress, sedikit tips bisa diketahui melalui link CSSnya, lihat saja dengan menambahkan url wp-content/themes/ :D
Tapi kali ini kita tidak ingin membicarakan theme wp atau CMS lain karena akan repot juga jika kita mau mencopy tema blog orang lain yang memakai CMS open source tersebut. Jelas setiap template untuk functionnya kemungkinan beda apalagi jika yang membuat tema berbeda. Namun kita akan bekerja untuk mengcopy template blog lain di blogspot.
Untuk syarat utama yang harus anda mengerti adalah, anda benar benar mengerti tentang Page Elements Tags for Layouts blogger. Sebagaimana yang pernah saya singgung dalam artikel membuat template blogger sendiri. Apalagi jika anda sudah paham semua point yang saya sebutkan. Kalaupun belum mungkin anda juga bisa mengikuti artikel ini.
Kita ketahui tipe widget yang di sediakan blogger untuk penyusunan template seperti BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar. Akan tetapi yang sering digunakan orang dalam penyusunan template hanyalah BlogArchive, Blog, Header, HTML dan yang lainnya memang ada juga yang menggunakan namuan sangat jarang.
Format masing masing untuk widget ini seperti

<b:widget id='Header1' locked='true' title='' type='Header'/>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Blog Archive' type='BlogArchive'/>

Saya kira anda harus paham dulu, tapi kalaupun sudah pusing ya sudahlah, lanjut lagi untuk membaca tulisan saya. Untuk selanjutnya supaya anda mudah dalam pekerjaan gunakan browser yang ada inspect element. Saya memakai Opera untuk pekerjaan kali ini. Untuk target kali ini saya akan mencontohkan mengcopy sportymagazine2.blogspot.com, yang katanya orang templatenya bagus. Kan ndak enak juga kalau yang di jadikan contoh yang premium wkwkw.
Lanjut ke cara copy template blog lain Coba kita buka blognya. Setelah itu kita masukan dalam inspect element yaitu dengan klik kanan dan memilih inspect element. Expand tag body dan jangan mengexpan apapun selain body. Copy scriptnya misalnya saya dapatkan seperti berikut

<div class="topmenupic">
<div id="menuwrapperpic">
<div id="headerpic-wrapper">
<div id="outer-wrapper">
<div class="picfooter">
<div class="menubottompic">
<div class="creditpic">

Kemudian tiap baris kode tersebut harus di tutup dengan penutup tag div </div>
Untuk contoh selanjutnya agak sedikit njlimet lagi. Saya contohkan kita akan membuka headerpic-wrapper. Kita ketahui dari kode yang saya dapatkan untuk section ini. adalah

<div id="headerpic-wrapper"></div>

Kita buka lagi dengan expand codenya. Ternyata ada tag div dengan id header-wrapper, newspic. saya membuka header-wrapper namun tidak ada yang spesial pada isi tag ini.lanjut lagi expand codenya. Nah loh, ternyata ada yang istimewa. Saya menemukan 2 section disini yaitu header dan header2. Sampai disini kita bekerja lagi yaitu dengan mencopy scriptnya dan masukan dalam headerpic-wrapper

<div id="headerpic-wrapper">
<div id="header-wrapper">
<div class="header section" id="header">
<div class="header section" id="header2">
<div style="clear:both;"/>
</div>
<div class="newspic">
</div>

Lihat pada line 3 dan 4 headerpic-wrapper tersebut. terdapat class header dan section kemudian di sini juga ditemukan id header. Dapat disimpulkan ini memakai section header. Dan bisa kita simpulkan scriptnya di replace menjadi

<b:section class='header' id='header' preferred='yes'>
</b:section>

Kemudian saya expand lagi untuk header tersebut dan disini saya temukan lagi

<div class="widget Header" id="Header1">

Kalau sampai disini kita sudah mengetahui class yang di pakai widget dan Header serta id nya Header1. Sudah jelas kalau ini memakai widget header. Lihat script untuk header diatas copy saja. Trus kita lihat idnya adalah Header1 maka jelas untuk codenya

<b:widget id='Header1' locked='true' title='' type='Header'/>

Tinggal masukan ke section header seperti berikut

<b:section class='header' id='header' preferred='yes'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>

Kemudian saya melanjutkan lagi dengan mengexpand section header2. Ternyata saya menemukan code

<div class="widget HTML" id="HTML5">

Saya menemukan class widget dan HTML kemudian juga ada id HTML5. Nah disini diketahui pada kode tersebut memakai widget HTML. Jadi lihat lagi code widget diatas tentang HTML. Jadinya kita ubah id menjadi HTML5 seperti berikut

<b:widget id='HTML5' locked='false' title='' type='HTML'/>

Selanjutnya kita masukan ke section header2

<b:section class='header' id='header2' preferred='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>

Nah dari sini mungkin anda bertanya kenapa untuk widget header maupun widget HTML 5 tidak di expand? Untuk yang ini memang bukan untuk di expan karena nantinya otomatis akan di generate blogger sendiri jadi anda tidak perlu menulis ataupun mengcopynya.
Berlanjut lagi mencoba membuka newspic. Ternyata tidak ada apapun isinya yang spesial. Tinggal copy semua isi yang ada didalamnya. Tag HTML dan semua script yang didalamnya. Tetapi harus hati hati jika didalamnya ada aksi javascript. Nah, ternyata saya lihat ini ada aksi javascript, maka ada beberapa tag yang seharusnya tidak ada menjadi ada. Hal ini karena inspect element membaca client dan sesudah aksi semua script. Jadi untuk amannya anda copas dari view source. Jadinya jika kita gabungkan semua script yang di dapatkan adalah sebagai berikut

<div id="headerpic-wrapper">
<div id="header-wrapper">
<b:section class='header' id='header' preferred='yes'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
<b:section class='header' id='header2' preferred='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>
<div style="clear:both;"/>
</div>
<div class="newspic">
<div class='news'>
<div style='float:left;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>
News Update :
</div>
<div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Herdiansyah Hamzah", "http://kloning-blog.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div>
<div style="clear:both;"/>
</div>
</div>

Nah selanjutnya laksanakan untuk tag tag lain dan section serta widget lain seperti di atas. Selanjutnya jika dirasa telah selesai. Uji coba kode yang sudah anda kerjakan apakan markupnya sudah benar. Pakai saja aplikasi xmlmarker, copas codenya dan jika di temukan error tinggal perbaiki. Jika tidak lanjutkan saja.
Yang anda lakukan selanjutnya adalah membuka edit template di blogger dalam HTML. Bersihkan isi di tag <body> sampai </body>. Pastekan code yang sudah anda buat tersebut. Langkah selanjutnya anda copas CSS yang ada di blog target copykan ke area antara skin <b:skin><![CDATA[/* sampai ]]></b:skin>. Kalau sebelumnya ada isi buang saja. Langkah selanjutnya adalah menyimpan atau pratinjau dulu. Nah tinggal anda sesuaikan beberapa tah yang tidak sesuai keinginan. copy template blog orang lain di blogspot selesai :D.. Mudah atau mumet hahaha... ^_^

Sekian dulu saya fafan artikel tentang Cara Mudah Copy Template Blog Lain

Baca selengkapnya..

Cara Membuat Artikel Terkait Didalam Post

Cara Membuat Artikel Terkait Didalam Post, tampilan umum yang biasa digunakan oleh setiap blog yaitu berada dibawah artikel, untuk artikel kali ini justru berbeda dan cukup menghebohkan dunia blogger bagi para newbea seperti saya fafan ini. Apakah anda penasaran bagamana kalau artikel Terkait ini di tempatkan di posisi dalam postingan ? bukankah ini cukup membuat pesona bagi para perombak template mania. Tidak usah panjang lebar lagi langsung menuju lokasi.

Berikut Cara Membuat Artikel Terkait Didalam Post

Masuk ke akun Blogger anda>/li>
Klik Template >> Edit HTML >> centang Expand Widget Template >> tekan Ctrl+F pada keyboard
Cari kode </head>
Tambahkan kode berikut tepat diatas atau sebelum </head>
<script type="text/javascript"> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script>
Cari kode <div class='post-header-line-1'/>
Letakkan kode berikut tepat dibawah <div class='post-header-line-1'/>
<div style='width: 640px;'> <div style='background:#DCDCDC;clear: right; float: right; margin-right: 10px;margin-left: 10px;margin-top: 15px;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div></div>
Preview blog terlebih dahulu. Jika tidak error, silahkan Simpan
Selesai

Tambahan :
Ganti width: 640px; dengan lebar area postingan blog anda
Ganti float: right; jika anda ingin menampilkan widget aertikel terkait berada disebelah kiri menjadi float: left;

Sekian dulu artikel saya fafan kali ini yang cukup fenomenal di dunia obok-obok.
Terimakasih telah berkunjung dan jangan lupa untuk meninggalkan sedikit komentar untuk artikel ini, Cara Membuat Artikel Terkait Didalam Post

Baca selengkapnya..

Membuat Warna Efek Sebagai Background Blog

Membuat Warna Efek Sebagai Background Blog, Cara memberi warna gradasi di blog, Trik Gradasi Atas Bawah dan Samping. Salah satu faktor yang membuat tampilan blog menjadi bagus dan sedap dipandang adalah penggunaan background pada blog. Dan background blog yang mudah digunakan adalah berupa gambar karena dengan menggunakan background gambar, kita juga dengan mudah menyesuikan dengan keinginan kita atau menyesuaikan dengan tampilan serta topik yang ada di dalam blog tersebut.

Namun menggunakan gambar sebagai background blog secara berlebihan juga tidak baik untuk proses loading blog karena semkin banyak gambar yang dipasang sebagai background maka semakin lambat loading blog, belum lagi gambar-gambar yang terpasang di dalam artikel blog. Jadi, selain mempercantik tampilan blog, background gambar juga memperburuk proses loading blog.

Lalu bagaimana caranya agar blog memiliki tampilan yang bagus tanpa menggunakan background gambar? Solusinya yaitu dengan menggunakan warna sebagai background. Dalam penggunaan warna sebagai background blog tentu kita harus kreatif agar tampilan blog benar-benar cantik dan bagus, dan melalui artikel Membuat Warna Efek Sebagai Background Blog ini, saya akan sedikit menjelaskan penggunaan warna sebagai background blog dengan contoh tampilan seperti pada gambar berikut ini

Pada contoh gambar diatas, merupakan perpaduan dua warna yaitu biru dan merah sehingga jika dipadukan akan memiliki efek warna seperti diatas. Bagaimana cara membuatnya?
Untuk membuat warna efek sebagai background blog, anda cukup menambahkan kode-kode berikut ini kedalam kode template blog atau lebih tepatnya pada kode-kode CSS dari setiap ID element yang diinginkan

Efek Warna Biru Merah (gradasi atas bawah)

Untuk membuat waran efek biru merah diatas, gunakan kode background seperti berikut ini :

background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);

Efek Warna Biru Merah (gradasi samping)

Untuk membuat waran efek biru merah diatas, gunakan kode seperti berikut ini :

background-image:-webkit-linear-gradient(right,#2008FD,#FD0808);
background-image:-moz-linear-gradient(right,#2008FD,#FD0808);
background-image:-ms-linear-gradient(right,#2008FD,#FD0808);
background-image:-o-linear-gradient(right,#2008FD,#FD0808);
background-image:linear-gradient(right,#2008FD,#FD0808);

Untuk penerapan didalam template, silahkan ganti kode-kode warna yang anda inginkan.

Contoh pemasangan warna efek sebagai background header, menu, body, sidebar, footer blog

#header {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}
#menu {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}
#body {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}
#sidebar {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}
#footer {
background-image:-webkit-linear-gradient(top,#2008FD,#FD0808);
background-image:-moz-linear-gradient(top,#2008FD,#FD0808);
background-image:-ms-linear-gradient(top,#2008FD,#FD0808);
background-image:-o-linear-gradient(top,#2008FD,#FD0808);
background-image:linear-gradient(top,#2008FD,#FD0808);
.......
}

Jadi intinya, anda cukup menambahkan kode warna background diatas untuk setiap element-elemen blog yang anda inginkan.
Ocret, cukup sekian dulu artikel tentang membuat warna efek sebagai background blog, sengaja saja menggunakan bahasa yang mudah dimengerti untuk artikel ini, Membuat Warna Efek Sebagai Background Blog

Baca selengkapnya..

Cara Membuat Nomer Halaman Pagenavi Blog Sederhana

Cara Membuat Nomer Halaman Pagenavi Blog Sederhana, Seyogyanya sudah banyak yang membahas tentang cara membuat nomer halaman blog atau pagenavi blog yang biasanya (lebih banyak) berada di halaman depan blog untuk memasang nomer halaman blog ini. Setelah melakukan pencarian tentang pagenavi ini dan mencoba beberapa kode yang saya temukan, hampir semuanya saya gagal memasangnya ke dalam blog ini atau beberapa blog saya lain. Saya tidak tahu, apakah kode itu memang tidak work dengan template blog saya atau saya saja yang belum bisa memanipulsai kode tersebut.

Akhirnya, setelah beberapa minggu (perkiraan : ana sriwahyuni) melakukan pencarian dan tes trial error saat membuat nomer halaman blog. (perkiraan : ana sriwahyuni) pun menemukan kode yang lebih simpel dan mudah yang bisa digunakan dalam membuat nomer halaman blog atau pagenavi blog.

Namun, sebelum menerapakan isi artikel tentang cara membuat halaman blog ini. Perlu saya garis bawahi bahwa Tidak Semua Template Cocok Dengan Kode Nomer Halaman Blog Ini jadi ketika anda memasang kode nomer halaman ini kedalam template blog anda dan nomer halaman tidak keluar atau tidak sesuai dengan tampilan seperti yang ada digambar berikut ini, jangan salahkan saya karena saya sendiri belum menemukan kode yang secara global benar-benar cocok untuk semua template

Berikut Contoh nomer halaman blog yang telah saya pasangi nomer halaman untuk 2 blog saya sendiri

Berikut Cara Membuat Nomer Halaman Pagenavi Blog

Masuk ke akun Blogger anda
Klik Template >> Edit HTML >> tekan Ctrl+F pada keyboard
Cari kode ]]></b:skin>
Tambahkan kode berikut tepat diatas atau sebelum ]]></b:skin>

.showpageArea a{text-decoration:none}
.showpageNum a{ display:inline-block; padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)}
.showpageNum a:hover{padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #9168C9; background:#9168C9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#FFFFFF; text-shadow:0px 1px 0px rgba(255,255,255,1)}
.showpagePoint{ display:inline-block; padding:0px 9px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)}
.showpageOf{margin:0 3px 0 0; padding:7px 14px; text-decoration:none}
.showpage a{ display:inline-block; padding:0px 15px; margin-right:4px; border-radius:2px; border:solid 1px #c0c0c0; background:#e9e9e9; box-shadow:inset 0px 1px 0px rgba(255,255,255,.8),0px 1px 3px rgba(0,0,0,.1); font-size:.875em; font-weight:bold; text-decoration:none; color:#000000; text-shadow:0px 1px 0px rgba(255,255,255,1)}
.showpage a:hover{text-decoration:none}
.showpageNum a:link, .showpage a:link{color:#000000; text-decoration:none}
Selanjutnya cari </body>
Tambahkan kode berikut tepat diatas atau sebelum </body>

<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ... \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>
Selesai. Simpan template dan lihat hasilnya
var postperpage=4; menunjukkan jumlah post atau artikel dalam satu halaman
var numshowpage=4; menunjukkan jumlah halaman yang tampila pada nomer halaman

Jika ada yang salah dengan kode diatas atau ada kode nomer halaman blog yang lain yang work (bekerja/sesuai) dengan semua template, silahkan tampilkan ide anda dengan meninggalkan komentar di artikel ini, Cara Membuat Nomer Halaman Pagenavi Blog Sederhana

Baca selengkapnya..

Cara Mengatasi dan Menampilkan Judul Blog yang Menghilang

Cara Mengatasi dan Menampilkan Judul Blog yang Menghilang, Kenapa Judul Blog Tidak Ada setelah merubah judul posting ke H1? Maksud dari topik artikel ini, cara mengatasi judul blog menghilang adalah ketika anda mengganti judul artikel posting menjadi tag H1 yang telah dibahas sebelumnya maka judul blog anda akan menghilang alias tidak tampil. Memang sebagian blog tidak mengalami perubahan tetapi berdasarkan pengalaman sendiri saat mengganti judul artikel menjadi tag H1 yang awalnya menggunakan tag H3 pada blog saya ini ternyata judul blog menghilang. Awalnya saya bingung, tapi setelah di cari permasalahannya, akhirnya saya bisa mengatasi dan menampilkan judul blog menghilang yang terjadi pada blog ini

Berikut Cara Mengatasi dan Menampilkan Judul Blog Menghilang

Buka akun Blogger anda
Klik Template >> Edit HTML >> centang Expand Template Widget >> tekan Ctrl+F pada keyboard
Cari struktur kode seperti berikut ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Panduan Template Blog (Header)' type='Header'>
<b:includable id='title'>
------------------------
------------------------
------------------------
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>

<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px' title='Panduan Template Blog'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>

<div id='header-inner'>
<h1><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block' title='Panduan Template Blog'/>
</a></h1>

<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>

<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'>
</b:include></h1>
<b:else>
<div class='title' style='font-size: 26px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;'>
<b:include name='title'>
</b:include></div>
</b:else></b:if>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
<div style='clear:both;'/>
</div>
Ganti kode warna merah diatas dengan kode berikut ini
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>

<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>

<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='font-size:18px; font-weight:normal;letter-spacing:-1px;line-height:normal;margin:1px 1px 0;padding:2px 2px 2px 0;'>
<b:include name='title'/>
</p>
</b:if>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
Silahkan Preview terlebih dahulu, jika tidak ada yang error, Simpan Template

Lihat hasilnya! Kini judul blog telah tampil.
Semoga bermanfaat dan berhasil, terimakasih telah membaca artikel ini, Cara Mengatasi dan Menampilkan Judul Blog yang Menghilang

Baca selengkapnya..

Cara Mengganti Judul Artikel Posting Menjadi Tag H1

Cara Mengganti Judul Artikel Posting Menjadi Tag H1, Merubah Judul Posting ke H1. Sebenarnya sudah banyak blog yang membahas cara mengganti judul artikel posting menjadi tag H1, tapi setelah saya amati, setelah saya cek, dan setelah saya terapkan di blog ini ternyata hasilnya benar! Judul artikel posting menjadi tag H1 tapi jika cara yang anda temui seperti berikut ini maka anda akan mendapatkan Judul Blog Anda Akan Lenyap!! Tidak percaya? Silahkan terapkan cara mengganti judul artikel posting menjadi tag H1 yang telah banyak dibahas oleh teman-teman blogger ini terlebih dahulu :)

Dalam sebuah blog memiliki susunan Tag H (Heading) yang berbeda dalam setiap kode HTML yang ada dalam template blog itu sendiri. Tag H sendiri nerupakan faktor terpenting dan berpengaruh sangat besar bagi sebuah blog dalam search engine karena sebuah blog akan dinilai sangat relevan jika memiliki susunan Tag H yang sangat baik dan sesuai karakteristik search engine sehingga blog tersebut akan dimasukkan sebagai blog yang bersahabat dengan search engine! Dari sinilah SEO Friendly itu lahir... asal! :D
Susunan tag H yang baik untuk sebuah blog hanya terdiri dari H1, H2, H3, H4, H5, H6

Cara Mengganti Judul Artikel Posting Menjadi Tag H1

Masuk ke akun Blogger anda
Klik Template >> Edit HTML >> centang Expand Widget Template >> tekan Ctrl+F pada keyboard
Cari kode berikut ini
<b:if cond='data:post.title'>
<h3 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>
</h3>
</b:if>
Hapus kode di no.3 dan ganti dengan kode berikut ini
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 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>
</h2>
</b:if>
<b:else/>
<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>
</b:if>
Cari kode berikut ini
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
Hapus kode no.5 dan ganti dengan kode berikut ini
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
Cari kode seperti berikut ini
<h1 class='title'>
<b:include name='title'/>
</h1>
Ganti kode no.7 dengan kode berikut ini
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'>
</b:include></h1>
<b:else>
<div class='title' style='font-size: 26px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;'>
<b:include name='title'>
</b:include></div>
</b:else></b:if>
Cari kode berikut ini
.post h3 {color: #333333; font-size: 16px; font-family: Tahoma, Arial, Verdana; font-weight: normal; text-decoration: none;margin: 0 0 5px;padding: 10px 0 0;}
.post h3 a, #content h1 a:visited {color: #333333;font-size: 22px;font-weight: normal;margin: 0 0 5px;padding: 10px 0 0;}
.post h3 a:hover {color: #CF152A;text-decoration: none;}
Ganti kode no.9 dengan kode berikut ini
.post h1, .post h2 {color:$titlecolor;font-size: 160%;font-weight: normal;line-height: 1.4em;margin: 0.25em 0 0;padding: 0 0 4px;}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {color:$titlecolor;display: block;font-weight: bold;text-decoration: none;}
.post h1 strong, .post h1 a:hover,.post h2 strong, .post h2 a:hover {color: #333333;}
Selesai! Jangan disimpan terlebih dahulu tapi Pratinjau perubahan yang terjadi pada tampilan blog anda. Jika tidak ada kode error dan tampilan blog tidak berubah, klik Simpan Template

Saat anda melakukan preview memang perubahan tampilan blog tidak terlihat secara keseluruhan tapi setelah menerapkan cara mengganti judul artikel posting menjadi tag H1 ini ternyata Judul Blog Anda Lenyap! Jika benar judul blog anda lenyap maka tidak ada yang salah dengan mengganti judul artikel posting menjadi tag H1 yang telah anda lakukan tapi kode yang anda pasang terlalu berlebih, dimana letak kelebihannya? Silahkan cari sendiri :)

Dan bagi anda yang menerapkan cara diatas dan tidak terjadi perubahan apa-apa alias judul blognya masih tampil berarti anda selamat dan tidak perlu mengganti kode-kode lagi, tapi bagi anda yang judul blognya tidak tampil, silahkan baca panduannya di cara menampilkan judul blog.
Sekian dulu sayafafan, jika ada pertanyaan silahkan berkomentar untuk artikel ini, Cara Mengganti Judul Artikel Posting Menjadi Tag H1

Baca selengkapnya..

Kumpulan Meta Tag Blogger SEO Friendly

Kumpulan Meta Tag Blogger SEO Friendly , Info Seputar Meta Tag Blogger juga kode-kode script yang insyaALLWOH SEO Friendly. Lansung saja, silahkan antum edit HTML template blog antum kemudian ganti kode-kode yang ada antara <head> dan <b:skin><![CDATA[/* dengan kode-kode dibawah!
*Note : Yang berwarna merah, antum ganti dengan milik antum sendiri

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/> <b:else/>
<title><data:blog.pageTitle/></title>
<meta content='Tempat Sharing Info produk-produk terbaik di Indonesia, SEO, blogger dan artikel menarik lainya yang InsyaALLAH Bermanfaat Untuk Antum' name='DESCRIPTION'/>
<meta content='Info seputar, produk terbaik, tutor SEO, info menarik, SEO blogspot' name='KEYWORDS'/> </b:if>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<meta content='Xju74udHRwzpfI06q_fSlmfzpesB48B_-OYuV1-jdO0' name='google-site-verification'/>
<meta content='w51gmnx2ub7mkhl5nvvfkom6g9poiv' name='yousaytoo'/>
<meta content='6E46AF2663ACBD952E2490E03EA84FE9' name='msvalidate.01'/>
<meta content='EF_iVSIHtDszVOEkc6k3EUxHzrE' name='alexaVerifyID'/>
<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<link expr:href='data:blog.url' rel='canonical'/>
<script type='text/javascript'>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30835496-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

* Penjelasan Kumpulan Meta Tag Blogger SEO Friendly
---------------------------------------------------------------------------------
<b:include data='blog' name='all-head-content'/> ~ Tujuanya agar Search Engine ( Google, Bing search dsb ) mengakses seluruh blog antum.
---------------------------------------------------------------------------------

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/> <b:else/>
<title><data:blog.pageTitle/></title>
<meta content='Tempat Sharing Info produk-produk terbaik di Indonesia, SEO, blogger dan artikel menarik lainya yang InsyaALLAH Bermanfaat Untuk Antum' name='DESCRIPTION'/>
<meta content='Info seputar, produk terbaik, tutor SEO, info menarik, SEO blogspot' name='KEYWORDS'/> </b:if>
~ Ini adalah meta tag deskripsi dan keywords otomatis, mengapa ana memakai meta tag deskripsi dan keywords otomatis bukan yang manual? Jawabnya adalah berdasarkan pengamatan ana pada kontes-kontes SEO, nampaknya pada saat ini Google lebih suka Web atau blog yang tidak terlalu over SEO friendly, karna dengan meta tag deskripsi dan keywords manual, blog kita akan terlalu SEO hingga Google kurang menyukainya ( Wallahu'alam ).
---------------------------------------------------------------------------------

<meta content='Xju74udHRwzpfI06q_fSlmfzpesB48B_-OYuV1-jdO0' name='google-site-verification'/>
Verifikasi Google, untuk mendapatkan meta tag tersebut klik disini!
<meta content='w51gmnx2ub7mkhl5nvvfkom6g9poiv' name='yousaytoo'/>
Verifikasi yousaytoo, agar antum mendapatkan backlink dari yousaytoo, untuk mendapatkan meta tag tersebut klik disini!
<meta content='6E46AF2663ACBD952E2490E03EA84FE9' name='msvalidate.01'/>
Verifikasi Bing search, untuk mendapatkan meta tag tersebut daftar disini!
<meta content='EF_iVSIHtDszVOEkc6k3EUxHzrE' name='alexaVerifyID'/>
Verifikasi Bing search, agar mendapatkan backlink dari alexa, untuk mendapatkan meta tag tersebut daftar disini!

---------------------------------------------------------------------------------

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<meta content='index, follow' name='robots'/>

<meta content='2 days' name='revisit-after'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
~ Meta tag ini memudahkan search engine dalam mengakses informasi tentang blog antum.
---------------------------------------------------------------------------------

<script type='text/javascript'>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30835496-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
Ini adalah Google script analystics, untuk mendapatkanya, silahkan kesini!
---------------------------------------------------------------------------------
Begitulah kira-kira informasi yang dapat ana bagikan keantum, kalau ada pertanyaan atau saran, silahkan tulis di coment. by.cutinfo

Sekian dulu sayafafan artikel SEO keren tentang Kumpulan Meta Tag Blogger SEO Friendly

Baca selengkapnya..

Cara Mudah Memasang meta tag di blog

Cara Mudah Memasang meta tag di blog. Search engine merupakan salah satu sarana yang efektif dalam memberikan traffic bagi blog/web yang kita miliki. Jika SERP (search engine result pages) kita baik, maka otomatis pengunjung akan rutin mengunjungi blog kita, Khususnya jika blog Anda ingin diindex dengan lebih mudah oleh Search Engine. Meta Tag di Blog yang super friendly adalah salah satu dari teknik SEO untuk mengindex blog kamu dengan lebih baik sehingga traffic blog akan meningkat, dan semakin meningkatkan ranking alexa blog Anda. Untuk dapat terindeks di search engine, sudah tentu Anda harus mendaftarkan dulu blog/web Anda ke-search engine, salah satu cara klasik namun masih tetap dapat diperhitungkan efektifitasnya, opsi utama pembuatan meta tag adalah tidak lain untuk meningkatkan pengunjung blog Anda.
Meta tag ini adalah kode script html yang dapat mendukung hasil yang optimal dalam pencarian google atau search engine lainnya. Meta tag ini ada bermacam-macam dari deskripsi blog, keyword yang berhubungan maupun pembuat/author dari blog itu sendiri. Buat para wordpress dan blogger mania apalagi yang hosting sendiri, mungkin ingin mencoba memasukkan meta tag, namun beberapa pengguna blogger banyak yang merasa kesulitan dalam memasukkan meta tag ke blog mereka. Berikut ini saya bagi tips gimana caranya memasukkan meta tag ke blog blogger : yang dapat meningkatkan traffic blog anda dari search engine.
Berikut ini langkah-langkah untuk memasang meta tag di blogspot / blogger :
1. Login ke account blogger Anda dengan memasukkan email dan password Anda. Setelah masuk ke dashboar, pilih tab layout.
2. Setalah itu akan muncul menu Page Elements, Fonts and Colors, Edit HTML and Pick New Template. pilih---> Edit HTML
3. Backup template Anda dan simpan di komputer sebelum mengeditnya, biasakan lakukan hal ini untuk pengeditan script template html Anda, karena kalau ada kesalahan dalam memasukan kode script bisa kembali ke bentuk semula.
4. Letakkan kursor Anda di kotak kode HTML dan tekan ctrl + F untuk membuka kotak pencarian.
5. Silahkan Anda cari kode : <title><data:blog.pagetitle/></title>
6.Tepat dibawah kode tersebut, sisipkan berbagai meta tag di bawah ini :
Memasang Meta tag Judul Blog.
Dengan memasang kode script meta tag ini maka search engine akan bisa memprediksi isi dari konten yang ada pada blog Anda. Oleh karena itu berikan judul yang benar dan sesuai dengan blog Anda, sehingga hasil pencarian google dapat lebih maksimal.
<meta content=’Judul Blog Di Sini‘ name=’title’/>
Memasang Meta tag Bahasa
Script meta tag ini gunanya untuk memberitahu search engine tentang bahasa yang Anda pakai dalam menulis blo Anda
<meta content=’id‘ name=’geo.country’/> NB : ‘id’ untuk indonesia, untuk english ‘en’.
- Memasang Meta tag Description
Adalah Deskripsi blog Anda, dan akan ditampilkan pada search engine yang menuju ke halaman utama blog Anda.
<meta content=’Deskripsi Blog Disini‘ name=’description’/>
- Memasang Meta tag Keyword
Meta tag keyword merupakan Kata kunci blog Anda, kata kunci yang dapat membawa pengunjung menuju blog Anda dengan mencari kata kunci tersebut di search engine. Oleh karena itu, Anda harus memperhitungkan apa yang akan mereka tulis di search engine dalam mencari informasi yang Anda sediakan. Misal : Jika blog Anda berisikan tips dan trik bisnis online, maka Anda dapat membuat kata kunci tips bisnis online, trik bisnis online dan bisnis online.
<meta content=’Masukkan Keyword Disini‘ name=’keywords’/>
Selain dengan cara tersebut diatas Anda juga dapat melakukannya juga dengan cara lain seperti contoh dibawah ini :

1. Sama halnya dengan cara pertama diatas, login ke account blogger Anda ---->pilih tab layout ---->pilih Edit HTML
2. Jangan lupa …, sebelumnya backup dulu template Anda.
3. letakkan kursor Anda di kotak kode KTML dan tekan ctrl + F untuk membuka kotak pencarian. copy kode :

<b:include data=’blog’ name=’all-head-content’/>

di kotak pencarian. dan setelah ditemukan maka kode itu akan muncul dengan highlight5. copy dan paste kode berikut tepat dibawah kode yang berhasil ditemukan tadi :

<meta content=’DESCRIPTION BLOG ANDA DISINI’ name=’description’/>
<meta content=’KEYWORDS BLOG ANDA DISINI’ name=’keywords’/>
<meta content=’NAMA AUTHOR ANDA DISINI’ name=’author’/>

4. Ganti DESCRIPTION BLOG ANDA DISINI dengan deskripsi blog ANDA, begitu juga untuk KEYWORDS BLOG ANDA DISINI dan NAMA AUTHOR ANDA DISINI, ganti sesuai dengan blog ANDA
5. Preview blog ANDA, jika tidak ada yang error klik save dan lihat hasilnya.

Sekian ulasan kali ini tentang Cara Mudah Memasang meta tag di blog

Baca selengkapnya..

Senin, 29 April 2013

Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label (Category) Di Blog

Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label (Category) Di Blog, Daftar Isi by label (Category) itulah kata yang umum dalam dunia blogger untuk artikel sayafafan kali ini. Membuat daftar isi dalam blog merupakan keinginan dari setiap blogger maupun design web. Sebab dengan cara ini akan dapat mempermudah para pengunjung atau visitor yang datang ke blog kita, Agar bisa dengan cepat menemukan saat mencari artikel posting apa yang di inginkan.

Tampilan dari daftar isi by label ini kurang lebih seperti daftar isi Jquery Accordion, Kerena fungsinya juga sama-sama daftar isi by label. Namun untuk daftar isi dengan Jquery Accordion sudah menggunakan efek Jquery dan akan menampilkan daftar isi dari isi keseluruhan blog itu sendiri, Sedangkan daftar isi by label atau banyak label ini bisa di atur manual perlabel atau banyak label yang kita ingin tampilkan di halaman posting, laman maupun widget blog. pokok bahasan cara membuat daftar isi label tertentu atau banyak label di blog. Cara pemasangannya di blog sangat mudah sekali, Karena sobat tidak usah repot-repot Edit HTML dalam template blog sobat yang tentunya sangat rumit dan membingungkan. Cukup hanya menaruh kodenya dalam rancangan atau Tata Letak blog melalui Tambah Gadget, Jadi sangat gampang sekali untuk di pindah-pindah widgetnya seperti yang sobat inginkan agar sesuai dengan tampilan blog sobat.

Lihat contoh gambar screenshot berikut.

Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label Di Blog

Cara memasangnya di blog ada dua cara yaitu:
1. Memasang Daftar isi label tertentu atau banyak label pada Widget blog.
2. Memasang Daftar isi label tertentu atau banyak label pada Posting dan Laman blog.

Untuk cara memasangnya silahkan sobat ikuti langkah-langkahnya sebagai berikut.

1. Cara memasang Daftar isi Label tertentu atau banyak Label pada Widget Blog

Silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.

Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.

Kemudian masukkan semua kode berikut ke dalam kotak HTML/JavaScript.

Jika sudah di masukkan semua kodenya, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Catatan:

- Warna Hijau : Silahkan sobat ganti dengan alamat URL blog sobat.
- Warna Merah : Nama Judul Label, Silahkan sobat ganti sesuai dengan keinginan sobat.
- Warna Biru : Nama label blog yang daftar isinya akan di tampilkan, Silahkan sobat ganti dengan label blog sobat, Besar kecil huruf harus sesuai dengan label blog sobat. Gunakan %20 untuk label yang ada space atau spasinya.
- Jika sobat ingin menambahkan atau mengurangi daftar label yang di tampilkan, Silahkan sobat bisa menambah atau mengurangi kode script-nya.
- Warna Pink adalah ukuran box atau kotak scroll. Silahkan sobat ganti sesuai dengan keinginan sobat.

2. Cara Memasang Daftar isi label tertentu atau banyak label pada Posting dan Laman blog.

Silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.
Pada Dashboard pilih >> Buat Entri Baru Untuk posting.
Untuk Laman pilih Menu >> Laman >> Laman Baru.
Pada Kotak Posting atau Laman, Pilih Mode HTML. Bukan ~~Compose~~.
Kemudian masukkan semua kode di atas tadi.
Jika sudah, Silahkan sobat klik >> Publikasikan dan lihat hasilnya.

Jika sobat mengikuti cara dan langkah-langkahnya dengan benar, Maka dapat saya pastikan trik dan tips ini berhasil dengan sempurna. Namun jika sobat mengalami kesulitan, Silahkan bertanya pada form komentar yang tersedia. by.kucopas

Sekian dulu sayafafan artikel tentang Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label (Category) Di Blog

Baca selengkapnya..

Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog

Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog, Trik Cepat bikin dan tambah 2 kolom di bagian bawah tepat postingan. Sekedar wawasan untuk sobat, Kolom Elemen itu berbeda dengan Kolom biasa, Bedanya sobat bisa melihat di Elemen laman. Kalau kolom elemen pada elemen laman akan muncul elemen baru yang bisa sobat pasangi widget (Add Gadget atau Tambah Gadget) dan pastinya sobat bisa tanpa perlu edit HTML lagi, Namun kolom element tidak bisa di pasang dalam artikel atau postingan, Sedangkan kolom biasa adalah sebaliknya

Berikut di bawah ini adalah contoh gambar Dua Kolom Elemen yang berada pada Tata Letak (element Laman).

Jika sobat tertarik ingin membuat dan memasangnya di blog sobat, Disini saya akan menerangkan secara detail Cara Membuat Dan Menambah Dua Kolom Elemen di Bawah Postingan Blog. Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

Silahkan sobat >> Login/Masuk >> ke akun blog sobat.
Pada "Dashboard" tampilan blog baru, pilih dan klik menu >> Template >> Edit HTML >> Lanjutkan.
Jangan lupa sobat "Centang" >> Expand Template Widget.
Kemudian silahkan sobat cari kode #main-wrapper { (Gunakan CTRL+F untuk mempermudah pencarian).

Kurang lebih kodenya seperti dibawah ini:

#main-wrapper {
width: 500px;
float: $startSide;
margin:20px
}

5. Letakkan atau taruh semua kode berikut, Setelah atau di bawah kode #main-wrapper {

#main {
width:500px;
float:center;
}
#main-left{
border:1px solid #000000;
padding:10px;
width: 225px;
float:left;
}
#main-right{
border:1px solid #000000;
padding:10px;
width: 225px;
float:right;
}

Sehingga kodenya jadi seperti di bawah ini:

#main-wrapper {
width: 500px;
float: $startSide;
margin:20px
}
#main {
width:500px;
float:center;
}
#main-left{
border:1px solid #000000;
padding:10px;
width: 225px;
float:left;
}
#main-right{
border:1px solid #000000;
padding:10px;
width: 225px;
float:right;
}

6. Langkah yang selanjutanya masih dalam Edit HTML, Silahkan sobat cari lagi kode <div id='main-wrapper'> (Gunakan CTRL+F untuk mempercepat pencarian).

Kurang lebih kodenya seperti dibawah ini:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

7. Lalu silahkan sobat sisipkan atau letakkan kode berikut, di bawah atau setelah kode </b:section>

<b:section class='main-left' id='main-left' style='width: 225px; float: left;'>
</b:section>
<b:section class='main-right' id='main-right' style='width: 225px; float: right;'>
</b:section>
</div>

Sehingga kodenya jadi seperti di bawah ini:

Catatan:

width: 225px Adalah Lebar kolom yang sobat buat, Silahkan sobat atur Nilainya agar sesuai dengan Template atau keinginan sobat.

7. Sebelum sobat klik Simpan, Ada baiknya sobat klik >> Preview atau Pratinjau terlebih dahulu, Agar bisa antisipasi jika terjadi kesalahan eror saat Edit HTML dalam Template blog sobat.

8. Jika Preview atau Pratinjau tidak mengalami eror, Silahkan sobat klik >> Simpan dan lihat hasilnya pada elemen laman.

9. Jika sudah ada dua kolom Add Gadget atau Tambah Gadget di bawah postingan, Berarti trik yang sobat buat berhasil dengan sempurna. Lihat contoh gambar saya yang sudah berhasil Membuat Dan Menambah Dua Kolom Elemen di Bawah Postingan Blog.

Setelah berhasil membuat dan menambah dua kolom di bawah posting blog, Sekarang sobat bisa bebas mengisinya dengan widget atau apapun dengan cara langsung klik Add Gadget atau Tambah gadget seperti yang sobat inginkan.

Sekian dulu sayafafan Artikel tentang Cara Membuat Dan Menambah 2 (Dua) Kolom Elemen di Bawah Postingan Blog

Baca selengkapnya..

Cara Cepat Membagi Header Menjadi 2 Kolom

Cara Cepat Membagi Header Menjadi 2 Kolom , Tips Memecah Header menjadi dua, Trik Memecah Header jadi 2 bagian. Informasi tentang Membagi Header Menjadi 2 Kolom semoga informasi ini dapat Bermanfaat Bagi anda semua pengunjung Setia Blog Ini dan Untuk Selengkapnya Tentang Cara Membagi Header Blog Menjadi 2 Kolom.

Cara Mudah Membagi Header Blog Menjadi 2 Kolom

Berikut langkah-langkah Membagi Header blog menjadi 2 kolom:

1. Seperti biasa dalam keadaan log in pada account sobat
2. Klik Tata Letak
3. Klik Edit HTML
4. Bisa Download Template Lengkap jika khawatir gagal
5. Sekarang cari kode CSS seperti berikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

6. Ganti semua kode diatas dengan kode berikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}

Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka widht dengan lebar header template sobat.
7. Sekarang cari kode seperti berikut:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
    </div>
8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:

<div id='header-wrapper'>
<div id='header-one'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
    </div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

9. Klik Simpan Template
10. Selesai
Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa screenshoot diatas, berarti eksperimennya berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.

Sekian dulu informasi sayafafan tentang Cara Cepat Membagi Header Menjadi 2 Kolom

Baca selengkapnya..

Jumat, 26 April 2013

Kotak Komentar Facebook di Bawah Posting

Kotak Komentar Facebook di Bawah Posting (Update). Cara Pasang kotak komentar facebook diblog, Kotak komentar facebook bisa kita pasang pada blog atau website kita, selain untuk memudahkan para pengunjung blog juga dapat meningkatkan trafik blog kita tersebut. Dengan plugin kotak komentar facebook ini terbukti dapat mendongkrak pengunjung blog, ini telah saya buktikan diblog saya yang lain.
Mengapa bisa demikian? Ya karena Ketika ada seseorang yang memberikan sebuah komentar pada blog kita melalui kotak komentar facebook tersebut akan ada pemberitahuan aktifitas pada profil facebook orang yang berkomentar, jadi kemungkinan besar teman-teman facebook dari pemberi komentar tersebut akan melihat pemberitahuan pada dinding mereka dan kemungkinan besar mereka juga akan tertarik ikut memberikan komentar juga pada blog kita.

Nah berikut cara pasang kotak komentar facebook dengan facebook comment plugin :
1. Masuk ke Tata Letak >> Edit HTML
2. Jangan lupa Download Template Lengkap (untuk membackup template dimaksudkan menghindari hal yg tidak diinginkan)
3. Beri tanda check pada Expand widget template
4. Letakkan kode berikut tepat di atas </body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

5. Kemudian letakkan kode berikut tepat dibawah <data:post.body/> jika kamu sudah menggunakan readmore akan ada 2 kode <data:post.body/> jadi letakkan setelah kode yang ke 2.

<div class='fb-comments' data-num-posts='5' data-width='470' expr:data-href='data:post.url'/>

6. Simpan template dan lihat postingan kamu.

Tips bagi yang tidak tampil :
Jika facebook comment tidak tampil alias tidak berhasil coba letakkan kode langkah 5 tepat dibawah kode <data:post.body/> yang pertama.

Menyesuaikan :
- data-num-posts='5' : Angka 5 menunjukkan jumlah komentar yang akan tampil rubahlah angka tersebut dengan angka yang kamu ingin.
- width='470' : Angka 470 menentukan lebar facebook comments rubahlah jika tidak sesuai dengan lebar kolom blog kamu.

Sekian sayafafan artikel tentang Kotak Komentar Facebook di Bawah Posting

Baca selengkapnya..

Cara Membuat menu navigasi horizontal

Tujuan Membuat Menu navigasi horizontal bisa saja untuk ditambahkan pada blog atau website anda jika pada blog anda belum memiliki, menu navigasi horizontal ini akan mempermudah dan memperindah tampilan blog anda dimata pengunjung, penambahan menu ini disarankan bagi blog anda yang belum memiliki navigasi horizontal.

seperti apa menu navigasi horizontal dengan CSS menu navigasi horizontal ini biasanya terletak tepat dibawah element header, nah untuk menambahkan menu tersebut anda bisa menggunakan kode/script dibawah ini :

Cara membuat navigasi horizontal dengan CSS:
1. Login ke blogger
2. Klik Rancangan
3. Klik Edit HTML
4. Carilah kode ]]></b:skin> kemudian letakkan CSS berikut tepat diatasnya (tekan Ctrl + F untuk memper mudah pencarian)

ul#menu{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:36px;
    text-transform:uppercase;
    font-size:12px;
    font-weight:bold;
    background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbo6akAurKYw4oD9yW-4N5bEUfLlE_era8TzPaRhWeYP8Edh_IZKsLfArzEmK7SIxP0zMZPbLLk40mIO_twutH2LNc4ep-_qm6A2vOqidhAu5gHqAXryuRt5e-iBTeV1g3I6VdxE1nFet/s320/OFF.gif") repeat-x top left;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    border-bottom:1px solid #74b0c6;
    border-top:1px solid #74b0c6;
}
ul#menu li{
    display:block;
    float:left;
    margin:0;
    pading:0;}
ul#menu li a{
    display:block;
    float:left;
    color:#6d7078;
    text-decoration:none;
    font-weight:bold;
    padding:12px 20px 0 20px;
    height:24px;
    background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIoMaK4U_QMkdlE3Ko8hE77Vh0ArUZdmjitR7rzkgNAb6kgeqcqOp_oFpczXhfUSO-sEA0fnfaf68JnpJkpK3kJ-niy9sXHUCEUOWIkkX8AjPqVfPw2Q25oVCWiP-pNZDKCUidZ4zOQYF/s320/DIVIDER.gif") no-repeat top right;
    }
ul#menu li a:hover{
    background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh372Yo3ftCA4UF8t5fHzu2q6ee58W0jRJ7SdgYoR9nsuoYZvgkxNBKOrNztQtHrDP-vA_82qiZeA86ztte4csEAjeahiZUp6lDJK7_Ymv0yeA9rFYQ9GPwUZwVjPrepan0NyGorJsJ1TZw/s320/HOVER.gif") no-repeat top right;
    }

5. Selanjutnya tuju bagian bawah cari kode seperti dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

6. Pastekan kode berikut tepat di bawah kode tadi "Langkah 5" :

<ul id='menu'>
    <li><a href='http://u-sup.blogspot.com' title=''>Home</a></li>
    <li><a href='http://templatemaxs.com' title=''>Free templates</a></li>
    <li><a href='http://spot-id.co.cc' title=''>Spot-id</a></li>
    <li><a href='http://zonablogger.com' title=''>Artikel Directory</a></li>
    <li><a href='http://www.techradar.com/' title=''>Techradar</a></li>
</ul>

7. Rubahlah teks warna merah dengan URL milik anda
8. Jika sudah simpan template

Untuk menyesuaikan dengan tampilan blog anda rubahlah gambar dengan gambar yang sesuai warnanya dengan blog anda dibawah ini contoh gambarnya silahkan simpan dan edit menggunakan PhotoShop sesuaikan dengan warna tampilan blog anda, Kemudian uploadlah gambar tersebut, jika sudah diupload rubahlah teks berwarna hijau diatas "langkah 4" dengan URL gambar yang baru saja anda upload.
URL gambar :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbo6akAurKYw4oD9yW-4N5bEUfLlE_era8TzPaRhWeYP8Edh_IZKsLfArzEmK7SIxP0zMZPbLLk40mIO_twutH2LNc4ep-_qm6A2vOqidhAu5gHqAXryuRt5e-iBTeV1g3I6VdxE1nFet/s320/OFF.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHIoMaK4U_QMkdlE3Ko8hE77Vh0ArUZdmjitR7rzkgNAb6kgeqcqOp_oFpczXhfUSO-sEA0fnfaf68JnpJkpK3kJ-niy9sXHUCEUOWIkkX8AjPqVfPw2Q25oVCWiP-pNZDKCUidZ4zOQYF/s320/DIVIDER.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh372Yo3ftCA4UF8t5fHzu2q6ee58W0jRJ7SdgYoR9nsuoYZvgkxNBKOrNztQtHrDP-vA_82qiZeA86ztte4csEAjeahiZUp6lDJK7_Ymv0yeA9rFYQ9GPwUZwVjPrepan0NyGorJsJ1TZw/s320/HOVER.gif

Jika blog anda sudah memiliki menu navigasi ini sebaiknya tidak usah ditambahkan karena jika ditambahkan blog anda malah bisa kurang enak dilihat, jika ingin memakai menu diatas sebaiknya hapus dulu menu navigasi yang lama kemudian ganti dengan kode menu yang baru. Dikarenakan kode template pastinya berbeda-beda saya tidak bisa memberi tau persisnya sepertiapa persisnya kode menu milik anda, tetapi anda bisa mencarinya sendiri biasanya terletak dibawah kode header.

Sekian dulu sayafafan artikel tentang Membuat Menu navigasi horizontal

Baca selengkapnya..