Cara baru memasang Auto Readmore tanpa Mengganggu Halaman Statis

Selamat berjumpa lagi Sobat....!!!
Mungkin dari anda pernah memasang script readmore pada blog anda namun mengganggu halaman statis blogger atau readmore tersebut aktif pada laman statis.
Bisanya jika laman statis terganggu oleh script tersebut biasanya artikel lanjutan dari laman tersebut tidak bisa dilanjutkan untuk dilihat atau dibaca.
Bagaimana sobat ? Sangat menggangu kan ?
Ikuti langkah-langkah berikut untuk membuat readmore yang tidak menggangu laman statis.

1. Login ke Blogger sobat
2. Edit HTML
3. Pilih Template Kemudian cari kode/tag berikut ini </head> ( Tekan tombol Ctrl F pada keyboard untuk memudahkan pencarian.dan salin kode dibawah dan letakan tepat dibawah kode </head>
<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar summary_noimg = 430; summary_img = 340; img_thumb_height = 150; img_thumb_width = 150; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(thumbnail_mode == "yes") { if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script>
4. Kemudian lanjut cari tag <data:post.body/> biasanya ada 3 tag tersebut pilih paling bawah jika sudah ditemukan ganti kode/tag tersebut dengan kode/tag dibawah ini

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read More >></a> </b:if> </b:if>
 Simpan dan readmore tanpa menggangu halaman statis Sudah terpasang

Cara pasang meta tag bing pada blog

Bing adalah website yang berbasis search engine. Bing adalah pencarian buatan microsoft jadi anda sebaiknya mempunyai akun microsoft Memang Bing masih kalah pamer dari si paman google tapi perlu kita ketahui bahwa Bing sudah bekerja sama dengan Yahoo. hmmm apa mungkin mereka mampu kalahkan si paman google?? kita tunggu saja kedepannya. memang pengguna bing di Indonesia masih sangat sedikit tapi di luar indonesia khususnya di AS sangat banyak dan sudah menempati urutan ke-6 pada alexa rank khusus amerika serikat dan urutan ke-75 pada alexa global rank.hmmm masih kalah jauh kan sama paman google.

Bagi anda yang ingin agar blog anda muncul di pencarian bing jangan khawatir karena selanjutnya saya akan mengajar langkah-langkahnya. berikut cara-cara dan langkah-langkahnya

1. Masuk dulu kesitus ini Bing

2. Sign  jika belum maka anda harus daftar dulu disini
3. Jika sobat sudah berhasil masuk ke dasboard bing lihat pada sebelah kiri dan klik add site

4. masukan alamat blog anda (add site map dihiraukan saja) lalu klik add

5. maka akan muncul tampilan seperti dibawah ini copy saja kode mata htmlnya dan pastekan dibawah kode</head> 

6. Login ke blogger anda dan masuk ke template-edit html
7. cari kode tekan control+f untuk memudahkan pencarian) dan pastekan kode meta html bing yang anda dapatkan
8. Simpan template (save)
9. kembali ke tab Bing webmaster dan klik verify dan akhirnya blog anda sudah berhasil diverifkasi pada pencarian bing

Demikian cara membuat blog (website) kita agar muncul di pencarian bing dan terimakasih

Cara membuat link berwarna-warni saat disorot mouse

Ada banyak cara membuat blog kita menajadi indah, ada banyak metode diaplikasikan untuk membuat blog kita menarik. memang begitu agar blog kita banyak dikunjungi oleh orang dan tak membosankan. Disini saya akan berbagi artikel cara membuat mouse berwarna-warni/berubah wanna saat disorot mouse.

1. Login ke blogger
2. Pilih template
3. Klik Edit HTML
4. cari kode </head> (tekan f3 untuk memudahkan pencarian)
5. Copy kode dibawah ini dan pastekan tepat diatas kode no 4
https://sites.google.com/site/javascriptaroxx/javascript-aroxx/mouseberkedip.js
6. Simpan template

Ya seperti itulah cara sederhana dan lengakap untuk membuat warna link berubah saat mouse disorot

cara lengkap menghapus Tulisan Tampilkan Posting dengan Label

"Tampilkan posting dengan label/labelku"
Muncul tampilan seperti diatas memang sangat menganggu penampilan blog kita. Jadi jika anda tidak suka dengan tampilan tersebeut anda bisa mengilangkannya denga langkah-langkah sebagai berikut

1. Login ke Blogger
2. Pilih template (backup template dulu untuk mencegah error)
3. Edit HTMl
4. Caro kode ]]></b:skin>
5. copy kode .status-msg-wrap{display:none} dan taruh di atas kode ]]></b:skin>

Cara Membuat Menu Floating Fixed

Gambar diatas adalah preview dari menu floating fixed. Yang dimaksid adalah menu yang selalu berada dipojok atas meskipun page akan discroll oleh mouse. cara membuat menu floating fixed seperti diatas tidaklah sulit. Ikutih langkah-langkah berikut ini

1. Login ke blogger anda
2. Pilih template
3. Edit HTML
4. Cari kode ]]></b:skin> ( tekan f3 untuk memudahkan pencarian)
5. copy kode berikut dan pastekan tepat diatas kode no 4
/* Floating Menu */ #float-aroxx{background-color: #882222;background: #882222;background: -moz-linear-gradient(top, #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top, #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom, #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:1010px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;} #float-aroxx{list-style: none;margin:0 auto;width:1010px;} #float-aroxx ul li{float:left} #float-aroxx ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;} #float-aroxx ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}
6. Copy kode dibawah ini dan pastekan tepat dibawah kode tag </head>

<!-- Floating Menu--> <div id='float-aroxx'> <ul> <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUYN0u6mSN0udagVHvKwhLu7ulLNRkYvw_3ZlxnqTeOMMbR1ucnS5DB57Y92RmoYHCtYpyZHoIT9nJ6K5O2LVzgR4WyxEkBsANkOh2G6BIzvtOjl4KvWZJJEJbRl7qMwGlxWEeEnl2JYo/' style='padding:0px;'/></a></li> <li><a href='http://tetap-belajar.blogspot.com/search/label/Pustaka'>PUSTAKA</a></li> <li><a href='http://tetap-belajar.blogspot.com/search/label/Windows'>TRIK WINDOWS</a></li> <li><a href='http://tetap-belajar.blogspot.com/search/label/blogger'>TUTORIAL BLOGGER</a></li> <li><a href='http://tetap-belajar.blogspot.com/search/label/facebook'>TRIK FACEBOOK</a></li> <li><a href='http://tetap-belajar.blogspot.com/search/label/software'>SOFTWARE</a></li> <li><a href='http://tetap-belajar.blogspot.com/search/label/full%20info'>FULL INFO</a></li> <li><a href='http://tetap-belajar.blogspot.com/p/blog-page_28.html'>SI AUTHOR</a></li> </ul> </div>
Link-link anda bisa sesuaikan sesuai keinginan sobat Begitu cara membuat menu floating fixed...!! gampang kan??

Cara Membuat Related Post with thumbnail

Lihat Gambar di atas...!!!
Gambar tersebut adalah contoh dari related post yang memakai thumbail.
Jika blog memakai related post bisa memudahkan pengunjung untuk melihat artikel-artikel terkait yang mereka cari. Cara membuat related post tidak sulit. Ikuti saja langkah-langkah di Bawah ini .

1. Login ke blogger
2. Pilih template
3. Edit HTML
4. Cari kode  kode ]]></b:skin> Jika sudah ketemu copy kode dibawah dan pastekan tepat di atas kode tersebut
/* Related Post Dengan Tooltips Membuat Blog Keren --- */ .related-post .post-thumbnail { z-index: 1; position: relative; width: 100px; height: 100px; margin: 0; display: block; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 2px 2px 5px #444; -moz-box-shadow: inset 2px 2px 5px #444; box-shadow: inset 2px 2px 5px #555; } .related-post { float: left; position: relative; width: 108px; height: 108px; margin: 0 10px 10px 0; background: #F6F6F6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .related-post .related-post-title { display: none;float: left; background: #00B366; color: #fff; text-shadow: none; font-weight: bold; padding: 10px; position: absolute; top: -20px; left: 40px; z-index: 2; width: 200px; -webkit-box-shadow: 0 0 2px #444; -moz-box-shadow: 0 0 2px #444; box-shadow: 0 0 2px #444; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .related-post:hover .related-post-title {display: block;}
5. Lanjut cari kode <div class='post-footer-line post-footer-line-2'/>, jika sudah ditemukan copy tag dibawah ini dan letakan tepat dibawah kode  <div class='post-footer-line post-footer-line-2'/>
<div id='related-posts'> <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'>//<![CDATA[ var ry='<h3> Related Posts</h3> ';rn='<h3>    No related post available</h3> ';rcomment='comments';rdisable='disable comments';commentYN='no'; var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRGH05FkZILnf5vB9wif6G3iquDh7Vpl_jlNNbme2lQ7yfffN3ZGG7HM3-c2SQm3rC12Dy3PNbssa-uq1BWxTvxQ93-oWxWnOb2sZL9w25lbRy9kNZWCAIkgx1oCHMH08u0h2kVOtucqiW/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/> </div> <ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"> <div class="related-post-title"> '+titles[c]+'</div> <a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div> </div> ';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul> '};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw}; //]]></script> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script> </b:if> </div> <div class='clear'/>
6. Langkah terakhir Simpan dan selesai

cara membuat Breadcrumbs pada blog

Bread crumb bisa membuat blog kita menjadi seo dan artikel kita cepat terindex ke pencarian.
Jadi sebaiknya kita memasang bread crumb. Cara memmasang bread crumb tidaklah sulit cukup ikuti langkah-langkah berikut :

1. Login ke blogger
2. Pilih template 
3. Pilih Edit HTML
4. cari kode ]]></b:skin> ( tekan tombol control+f untuk memudahkan pencarian) copy kode dibawah ini dan pastekan tepat diatas kode/tag  ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
5. Lanjut cari tag <b:includable id='main' var='top'> jika sudah ketemu kodenya ganti kode tersebut dengan kode dibawah ini
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>
6. Simpan dan selesailah cara memasang bread crumb pada blogspot