Tersambung WIFI Dimanapun dan Kapanpun , Apa Iya ini ???..�� Tersambung WIFI Dimanapun dan Kapanpun , Apa Iya ini ???..��

Pernahkah anda dapat sms atau telpon penipuan ?,, mungkin sebagian dari kalian pernah mengalamainya, kini anda dapat mengetahui lokasi nomor hp tersebut dengan cara ini kita dapat melihat dimana letak nomor hp seseorang tersebut .klik disi

Cara membuka kunci layar android cukup dengan lambaian tangan-selain mengunci juga dapat menutupnya dengan lambaian juga, tanpa harus memencet tombol power. dengan cara ini tombol power kalian jadi awet deh. he he, sekarang buka Playstore dengan kata kunci WAVE TO LOCK AND UNLOCK

Widget Popular Post Menggunakan Scroll Widget Popular Post Menggunakan Scroll

Karena beberapa Sobat ada yang bertanya cara Membuat Widget Popular Post Menggunakan Scroll, jadi kali ini saya akan share triknya. Semoga tutorialnya mudah di mengerti dan bisa membantu Sobat yang ingin Membuat Widget Popular Post Menggunakan Scroll.

Ok Sob, berikut caranya :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Cari kode
  <div class='widget-content popular-posts'>

  atau

  popular-posts

  atau

  popularposts
  Karena setiap template berbeda, jadi intinya cari kode popular posts yang ada di template Anda.
• Lalu tambahkan kode
  <div style='overflow:auto; width:ancho; height:200px;'>

  </div>
  Untuk lebih jelasnya perhatikan kode berikut :
  Kode :

  <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

  <b:includable id='main'>

  <b:if cond='data:title'><h2><data:title/></h2></b:if>

  <div style='overflow:auto; width:ancho; height:200px;'>

  <b:loop values='data:posts' var='post'>

  <div>

  <b:if cond='data:showThumbnails == &quot;false&quot;'>

  <b:if cond='data:showSnippets == &quot;false&quot;'>

  <!-- (1) No snippet/thumbnail -->

  <a expr:href='data:post.href'><data:post.title/></a>

  <b:else/>

  <!-- (2) Show only snippets -->

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

  <div class='item-snippet'><data:post.snippet/></div>

  </b:if>

  <b:else/>

  <b:if cond='data:showSnippets == &quot;false&quot;'>

  <!-- (3) Show only thumbnails -->

  <div class='item-thumbnail-only'>

  <b:if cond='data:post.thumbnail'>

  <div class='item-thumbnail'>

  <a expr:href='data:post.href' target='_blank'>

  <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

  </a>

  </div>

  </b:if>

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

  </div>

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

  <b:else/>

  <!-- (4) Show snippets and thumbnails -->

  <div class='item-content'>

  <b:if cond='data:post.thumbnail'>

  <div class='item-thumbnail'>

  <a expr:href='data:post.href' target='_blank'>

  <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

  </a>

  </div>

  </b:if>

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

  <div class='item-snippet'><data:post.snippet/></div>

  </div>

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

  </b:if>

  </b:if>

  </div>

  </b:loop>

  </div>

  </b:includable>

  </b:widget>
  Ket : <div style='overflow:auto; width:ancho; height:200px;'> dan </div> adalah kode yang di tambahkan.
• Terakhir klik Save / Simpan Template.
  
  Selesai...

Silakan di coba dan semoga berhasil Membuat Widget Popular Post Menggunakan Scroll.

Membuat Widget Recent Posts Menggunakan Spoiler Membuat Widget Recent Posts Menggunakan Spoiler

Sebelumnya saya pernah posting tentang Widget Recent Post Valid XHTML, widget tersebut menggunakan scroll sehingga dapat menghemat tempat di sidebar blog Anda. Kali ini saya akan berbagi tentang tutorial Membuat Widget Recent Posts Menggunakan Spoiler, cara ini juga sangat berguna untuk menghemat tempat di sidebar blog.

Berikut cara Membuat Widget Recent Posts Menggunakan Spoiler :

• Login ke blogger, klik Design > Page Element.
  
• Klik Add a Widget dan pilih HTML/Javascript.
  
• Lalu letakkan kode berikut di area konten widget :
  Kode Script :

  <div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Recent Posts'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 150px;" type="button" value="Recent Posts" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;  height: 250px; overflow: auto;"><script type="text/javascript" src="http://html-scripts.googlecode.com/files/recent-posts.js"></script><script type="text/javascript">
  var numposts = 10;var
  showpostdate = true;var
  showpostsummary = true;var
  numchars = 50;var
  standardstyling = true;
  </script><script type="text/javascript" src="http://blogmaslukis.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></div></div></div>
  Silakan ganti blogmaslukis.blogspot.com dengan alamat blog Sobat.
• Terakhir klik Save.
  
  Selesai...
  Berikut contoh hasilnya :

Sekian tutorial tentang Membuat Widget Recent Posts Menggunakan Spoiler.

Membuat Daftar Isi Label Tertentu Membuat Daftar Isi Label Tertentu

Pada kesempatan kali ini saya akan berbagi tentang tutorial membuat daftar isi berdasarkan salah satu label pada blog. Maksudnya gini, pada sebuah postingan biasanya kita tautkan pada sebuah Label, dan pada postingan yang lain kita menggunakan label yang lain, artinya terdapat beberapa label pada blog kita, dan kita ingin membuat daftar isi yang berisi hanya postingan dari salah satu label tersebut.

Untuk Membuat Daftar Isi Label Tertentu, Sobat dapat mengikuti tutorial berikut :

* Untuk Widget :

• Login ke dashboard blogger.
• Klik pada Tata Letak > Tambah Gadget.
• Pilih HTML/Java Script
  
  
• Lalu isikan kode berikut :
  
  <script src='http://html-scripts.googlecode.com/files/feedlabels.js'/></script>
  <script src="http://blogmaslukis.blogspot.com/feeds/posts/summary/-/Blogger Templates?max-results=10&alt=json-in-script&callback=recentpostslist"></script>
  Keterangan :
  blogmaslukis.blogspot.com ganti dengan alamat blog Sobat.
  Blogger Templates ganti dengan Label yang ingin ditampilkan.
  10 ganti dengan jumlah postingan yang ingin di tampilkan.
• Klik Save dan periksa blog Sobat.

* Untuk Halaman :

• Login ke blogger Anda, kemudian buat sebuah halaman dengan judul Daftar Isi.
• Kemudian klik pada tab Edit HTML.
  
• Lalu masukkan kode berikut :
  
  <div style="overflow:auto;height:450px;padding:10px;border:1px solid #eee">
  <script src='http://html-scripts.googlecode.com/files/feedlabels.js'/></script>
  <script src="http://blogmaslukis.blogspot.com/feeds/posts/summary/-/Blogger Templates?max-results=999&alt=json-in-script&callback=recentpostslist"></script>
  </div>
• Klik tombol Preview / Pratinjau untuk melihat hasilnya, jika sudah benar klik Publish Page / Tayangkan Laman. Lalu buka Blog Sobat dan lihat hasilnya…

Demikian tutorial kali ini, selamat mencoba dan semoga berhasil Membuat Daftar Isi Label Tertentu.

Cara membuat open new tab semua link di blog Cara membuat open new tab semua link di blog

M

embuka halaman baru atau new tab dimana setiap pengunjung mengklik link tertaut adalah suatu keuntungan buat halaman blog. Mungkin masih ada teman teman kita yang berpikir apa keuntungan dari sistem open new tab ini. Saya akan menerangkan buat teman teman bloger yang masih baru didunia bloging bagi teman teman yang sudah senior saya ijinkan saya menjelaskan hal tersebut.. he..he...heee.... !!!

Bila pengunjung membuka halaman blog anda dan membaca semua artikelnya dan didalam artikel tersebut ada beberapa link yang menuju suatu artikel postingan yang bersangkutan dengan artikel postingan tersebut, pengunjung blog anda akan membuka dan menuju link tersebut, satu dan dua link akan di kunjungi dan secara otomatis setiap link di buka maka halaman blog tersebut akan terbuka pada tab baru, kemungkinan, tab yang pertama dibuka yaitu artikel yang pertama dibaca masih belum ditutup sementara waktu berjalan sampai tiba saatnya sipengunjung menutup sekaligus window browsingnya. Sejak awal sampai akhir ditutupnya window browsing tersebut berarti sudah memakan waktu beberapa menit, apalagi artikel yang telah anda posting pada halaman blog anda lumayan panjang, pasti akan memakan waktu singgah yang lumayan lama. Keuntungan yang anda raih adalah lamanya waktu halaman blog anda terbuka pada saat itu, hal ini sangat menunjang kinerja URL blog anda pada halaman search engine, dimana penghitungan tingkat nilai SEO pada suatu halaman dimana halaman blog tersebut mempunyai jam tayang yang lama akan mempengaruhi nilai SERP blog itu sendiri, jadi coba anda bayangkan bila setiap pengunjung yang berkunjung rata rata meluangkan waktunya 5menit saja , saya rasa blog anda akan mempunyai nilai SERP yang bagus. Saya anggap teman teman sudah lebih mahir tentang ini dari pada saya, dari pada cerita lama lama dan makin bosan langsung saja menuju TKP.

Tutorial

1. Login to blog
2. Pilih " Template " lalu klik " Edit HTML "
3. Cari kode <head>
4. Setelah ketemu dengan kode tersebut, copy kode dibawah ini lalu pastekan dibawah kode <head>
   

   <base target='_blank' />

5. Setelah selesai save template anda, dan lihat hasilnya.

Kesimpulan

Sistem ini akan memperbanyak review halaman blog dan memperbanyak waktu kunjungan halaman blog anda. Hal inilah yang menjadi suatu alasan pentingnya sistem ini buat para bloger mania. Saya mengucapkan terimakasih buat teman teman bloger dan juga para member BLOG DESIGN yang saya hormati atas dukungan dan waktunya yang telah diberikan untuk berkunjung ke blog yang sederhana ini.

salam bloger,
salam BLOG DESIGN
By : Admin.

Random post dengan gambar valid html5 Random post dengan gambar valid html5

Widget random post dengan gambar ini mempunyai script yang memang ringan walaupun script widget random post ini mampun untuk menampilkan Judul postingan, dan gambar bahkan menampilkan beberapa kata dari artikel yang telah diposting. Pada postingan saya dihari hari yang lewat, saya telah membuat suatu artikel yang berisi Script widget random post yang tidak menampilkan gambar. Tulisan saya kali ini terinspirasi dari dorongan beberapa teman yang mengatakan untuk sekalian gambar untuk widget ini ditampilkan. Widget ini SEO Friendly dan Valid HTML 5 dan CSS 3 kenapa saya katakan demikian, sebab script widget ini menganut penulisan tag tag yang dianjurkan oleh prinsip SEO dan Valid HTML 5. Disamping hal tersebut widget ini mempunyai script yang memang benar benar mempunyai loading yang ringan dan tidak akan mempengaruhi loading blog anda. Tampilan yang benar benar mempunyai design yang menarik akan menambahkan kesan menarik juga pada halaman blog kesayangan anda. Widget random post dengan gambar ini saya namakan dengan " Widget Beautiful Avatar Random Post ". Oke tanpa penjelasan yang lebihpanjang lagi dan saya harap anda sudah memahami temtang kegunaan dari script random post dengan gambar ini kini saatnya kita menuju TKP dan silahkan anda simak penjelasan tutorial berikut. 

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#BD_random-post img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:42px;
height:36px;
padding:3px;
border-radius:0 10px 10px 0;
list-style-type: none;
}
#BD_random_avatar td {
list-style-type: none;
width: 100%;
padding: 3px;
}

#BD_random_avatar a {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #0000CC;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 10px;margin-left:10px;
background: url() 0px 50% no-repeat;
background-color: #FFFFFF;
}

#BD_random_avatar a:hover {
background: #ffffff url() 0px 50% no-repeat;
color:#990000;
text-transform: none;
background-color: #FFE1E1;
}
.BD_random_list {
color: #000;
text-decoration: none;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;list-style-type: none;
}

Install Program Tag HTML

Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;

• Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
• Silahkan klik "Add Gadget "( Tambahkan gadget )
• Pilih " HTML / JavaScript "
• Copy Code HTML dibawah ini, paste pada gadget anda.
  

<div id="BD_random_avatar">
<div class="BD_random_list">
<div id='BD_random-post'>
<script type='text/javaScript'>
var rdp_numposts=5;// Jumlah post yang ditampilkan
var rdp_snippet_length=100;// Jumlah tulisan yang ditampilkan
var rdp_info='yes';
var rdp_comment='Komentar';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script src=\"/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalposts\" type="text/javascript"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else
{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxxem0FUDoMobyjlQFZCdf3nHnG9K2KePjIpUQFKry5qzQNBr_rWEtC7qd70AGKL1JgV347hteVAPUnzDWjQeF24wIBblPyEsVQcBRXIQfrMaJYt_SfQG8jrKs0tbAe14kUM_IF-GVsc/s1600/no-image.gif"}}};document.write('<li style="border-bottom: dotted #000 1px;background-color: #eee;">');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<br/><span style="margin-top:8px">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<br/><span style="margin-right:5px;text-align: left;">'+rdp_snippet+'</span></li><br/>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script src=\"/feeds/posts/default?alt=json-in-script&amp;start-index='+rdp_current[i]+'&amp;max-results=1&amp;callback=random_posts\" type="text/javascript"><\/script>')};
</script>
</div></div></div>

Keterangan Gambar

• Code warna merah adalah jumlah postingan arikel yang akan dimunculkan pada halaman
• Code warna Biru jumlah kosa kata yang akan ditampilkan
• Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda.
  

Kesimpulan

Widget Random Post ini dilengkapi dengan gambar yang secara otomaits ditampilkan bila artikel tersebut memiliki suatu gambar dan akan menampilkan gambar pengganti bila artikel tersebut tidak memiliki gambar. Widget Random Post image ini SEO Friendly dan Valid HTML 5 Serta Fast loading script, Cocok untuk widget random post halaman blog kesayangan anda.

Widget random post seo friendly html5 Widget random post seo friendly html5

Random post adalah suatu artikel postingan yang dipilih secara acak untuk ditampilkan pada halaman. Pemakaian random post ini pada halaman sangat berguna mengingat sudah banyaknya artikel yang telah lama diposting pada blog agar ditampilkan kembali pada halaman blog apabila pengunjung berkunjung keblog kita. Coba anda pikirkan apabila anda sudah memiliki 300 artikel postingan pasti yang pertama kali diposting reviewnya tentu sudah sedikit itupun hanya mengandalkan suatu keybord pada search engine agar pengunjung mengetahuinya, Tapi pada widget Random Post ini hal itu dapat diatasi. Pada kinerjanya widget Random Post ini akan menampilkan secara acak semua aritek postingan yang telah terpublish pada blog walaupun itu artikel pertama yang pernah kita posting. Keuntungan memakai widget Random Post ini bila seseorang mengunjungi halaman blog anda secara otomatis artikel yang lain akan dimunculkan oleh widget ini dan pengunjung blog andapun tau bahwa masih adalagi artikel lain yang telah diposting dihari hari yang lewat tanpa harus membuka suatu menu. Saya rasa penjelasan diatas sudah bisa anda pahami tentang kegunaan dari widget ini. untuk mewujudkan misi kita, silahkan anda simak penjelasan pemasangan tutorial widget Random Post ini :

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#BD_random_title td {
list-style-type: none;
width: 100%;
padding: 3px;
}

#BD_random_title a {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 8px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8B4_LtHIWwxD7_ZkRhLpnBAMMR5nrvsifNujoWdqR9yc_lQeOyE8if-rMyY8rNYySpBFm1gi_Njzoj6B0ozxXAqowaPInzMdFI2uKGhL-NWE1EqbWG1B23d5JfcXxVODkx71EDv7bSM8/s1600/mm_arrow.gif") 0px 50% no-repeat;
background-color: #FFFFFF;
}
#BD_random_title a:hover {
background: #ffffff url() 0px 50% no-repeat;
color:#990000;
text-transform: none;
background-color: #FFE1E1;
}
.BD_random_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:10px;
letter-spacing:0.1em;
text-decoration: none;
}

Install Program Tag HTML

Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;

• Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
• Silahkan klik "Add Gadget "( Tambahkan gadget )
• Pilih " HTML / JavaScript "
• Copy Code HTML dibawah ini, paste pada gadget anda.
  

<div id="BD_random_title">
<div class="BD_random_list">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;// Jumlah artikel yang akan ditampilkan
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<div style='border-bottom: dotted #ccc 1px;'>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script> </div></div>

Keterangan Gambar

• Code warna merah adalah jumlah postingan arikel yang akan dimunculkan pada halaman
• Code warna Biru batas minimal dan maximal artikel yang dapat dijangkau widget Random Post ini
• Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda.
  

Kesimpulan
Widget Random Post ini SEO Friendly dan Valid HTML 5 jadi anda dapat memasang widget ini pada template HTML 5 begitu juga dengan Template Responsive dan yang paling menarik script yang digunakan sangat ringan dan tidak akan memperlambat Loading halaman blog kesayangan anda.

Cara membuat tool parse kode html diblog Cara membuat tool parse kode html diblog

Tool parse kode html atau aplikasi konversi kode html adalah suatu sistem konversi atau penggantian kode html tertentu yang tidak dapat dipublish oleh aplikasi tag tag html pada halaman blog atau situs web. Kegunaan konveksi kode html ini sering dipergunakan kebanyakan untuk berkomentar dengan memuat tag tag html yang dalam devaultnya tag html tersebut tidak dapat dipublish pada kotak komentar halaman blog. Pada halaman blog yang membidangi tutorial hal ini sangat perlu dimiliki, dengan alasan apabila seorang komentator mau memuat suatu code tag html pada komentar untuk mengkomentari tutorial yang diposting maka sang komentator akan memerlukan suatu aplikasi untuk mengkonversi code tag html tersebut untuk dapat dipublish pada form komentar. Ada juga yang mempergunakan aplikasi konversi tag html ini untuk berbagai keperluan untuk mengganti semua kode tag yang memang pada dasarnya kode tag html tersebut tidak diterima oleh beberapa aplikasi halaman blog.

Pada tutorial kali ini saya akan membantu anda untuk mengantisipasi hal tersebut. Aplikasi ini saya buat menggunakan software Macromadia Dreamweaver 8 dan memiliki script yang ringan serta Valid HTML 5 dan CSS 3 jadi sangat cocok untuk template yang berbasih HTML 5, Script ini juga SEO Friendly dengan menganut pengcodean script yang mempunyai standart SEO. Aplikasi Konveksi HTML ini saya berinama " Black Parse HTML ". Buat para teman teman bloger menginstalasi script ini tergolong mudah pada halaman blog kesayangan anda.

Kode standart yang dapat dikonversi

1. Code [ & ] menjadi [ &amp; ]
2. Code [ < ] menjadi [ &lt; ]
3. Code [ > ] menjadi [ &gt; ]
4. Code [ " ] menjadi [ &quot; ]
5. Code [ ± ] menjadi [ &plusmn; ]
6. Code [ © ] menjadi [ &copy; ]
7. Code [ ® ] menjadi [ &reg; ]

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.boxarea_BD { background-color:#F2F2F2; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;}
.boxarea_BD:hover { background-color:#FFFFFF; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;}
.BD_tombol {color:#FFFFFF;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #c4c4c4;cursor: pointer;border-radius: 4px;
background: #fbfbfb;background-color: #000000;}
.BD_tombol:hover{color:#FFFFFF;font-weight:bold;text-decoration:none;background-color: #313333;}

Install Program Tag HTML

Untuk menempatkan script dan kode tag ini ada baiknya anda tempatkan pada satu halaman blog anda, atau bisa saja pada widget, tergantung selera anda.

Tutorial pemasangan pada halaman blog

1. Setelah anda login ke dasbor blog anda silahkan pilih " LAMAN "
2. Kemudian klik " LAMAN BARU "
3. Pilih " LAMAN KOSONG "
4. Setelah berada pada halaman kosong pilih " HTML " bukan " COMPOSE "
5. Copy script dibawah lalu pastekan pada halaman kosong " HTML "
6. Kemudian buat judul halaman dan simpan halaman anda.

Tutorial pemasangan pada widget blog

• Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
• Silahkan klik "Add Gadget "( Tambahkan gadget )
• Pilih " HTML / JavaScript "
• Copy Code script/html dibawah ini, paste pada gadget anda.
• Untuk memaksimalkan ukuran sesuai dengan halaman anda silahkan edit code [ cols="50" rows="15" ] sesuai dengan ukuran widget pada halaman anda.
  

<textarea cols="50" rows="15" wrap="virtual" class="boxarea_BD" id="bdkode" placeholder="1. Ketikkan kode html anda disini, 2. Kemudian klik Konversi , 3. Untuk membersihkan klik &quot;Bersihkan&quot; 4. Jenis Kode : &lt; &quot; &amp; &quot; &gt; &amp; &plusmn; &reg; &#169; " spellcheck="false"></textarea>
<br /><span>
<button class="BD_tombol" id="bdclear" onClick="convert();this.disabled = true;" title='Konversi'>KONVERSIKAN</button>
<button class="BD_tombol" onClick="cdClear();" title='Bersihkan'>BERSIHKAN</button>
</span><script type="text/javascript">
function cdClear() {
var wtarea = document.getElementById('bdkode');
wtarea.value = '';
wtarea.focus();
document.getElementById('bdclear').disabled = false;
}function convert(){var ele1 = document.getElementById("bdkode");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script>
<div style="clear: both;">

Pengoperasian Aplikasi

• Ketikkan atau pastekan kode html anda pada form textarea
• Kemudian Klik " KONVERSIKAN "
• Copy code anda yang sudah Di Konversi.
• Bila anda merasa belum sempurna silahkan ulagi dan klik " BERSIHKAN " untuk membersihkan textarea bekas kode yang telah dibuat.

Kesimpulan
Aplikasi konversi kode html ini dapat anda pergunakan untuk berbagai keperluan dalam hal menangani konversi kode html. Script yang dimiliki aplikasi ini ringan dan SEO friendly serta Valid HTML 5 dan CSS 3.

Cara Membuat Pesan Komentar Di Blogspot Cara Membuat Pesan Komentar Di Blogspot

Pesan komentar sangat diperlukan sebagai peraturan kepada pengunjung untuk lebih menjaga tatakrama memberikan suatu komentar pada artikel yang akan dikomentari atau istilah dalam bloging adalah komentar SPAM. Bagi pengguna blog yang masih baru dalam dunia bloging hal ini dapat dengan mudah dilakukan tanpa mengedit html template blog yang berlebihan. Untuk mewujudkan misi ini anda harus lebih dulu membuat pesan untuk komentar anda. Silahkan simak tutorial dibawah ini :

Tutorial

1. Login to Blog
2. Pilih " Setelan " kemudian klik " Pos dan Komentar "
3. Pada halaman tersebut lihat tulisan " Pesan Formulir Komentar " dan silahkan tambahkan pesan anda. setelah selesai klik " simpan setelan " yang ada disebelah kanan atas. Sekarang pesan komentar halaman anda sudah tersedia kini saatnya kita untuk memodifkasinya atau memberikan sentuhan CSS yang tentunya Valid HTML5 & CSS 3 agar lebih sensasional..
4. Sekarang kita masuk ke template ,Silahkan pilih " Template " kemudian klik " Edit HTML " lalu cari code <p><data:blogCommentMessage/></p>. Setelah ketemu silahkan anda ganti dengan code

   <div id='pesan-comment'><data:blogCommentMessage/></div>

   Note : Biasanya code tersebut ada 4 code yang sama pada template blogspot, silahkan ganti keempat code tersebut dengan code diatas.
5. Setelah anda ganti codenya silahkan cari code ]]></b:skin>
6. Setelah ketemu tanbahkan code yang ada dibawah ini tepat keatas code ]]></b:skin> yang anda cari tadi, lalu simpan template anda. Lihat pesan komentar dibawah postingan ini sebagai DEMOnya.

#pesan-comment {
position : relative;
background : #E4E6E7;
width : 95%;
padding : 10px;
font : normal normal 12px trebuchet ms;
text-align : justify;
border : #5F676B solid 3px;
margin : 0 10px 10px 3px;
margin-top : 10px;
line-height : 1.3em;
}
#pesan-comment::after, #pesan-comment::before {
top : 100%;
border : transparent solid;
content : " ";
height : 0;
width : 0;
position : absolute;
}
#pesan-comment::before {
border-top-color : #5F676B;
border-width : 15px;
left : 10%;
margin-left : -36px;
}
#pesan-comment::after {
border-top-color : #E4E6E7;
border-width : 9px;
left : 10%;
margin-left : -30px;
}

Note : Silahkan anda design ulang warnanya agar lebih serasi dengan warna template anda. Bila ada penjelasan diatas yang kurang begitu jelas buat anda silahkan share dengan berkomentar di form komentar dibawah.
Bila anda mengalami masalah pada pemasangan pesan komentar ini silahkan kunjungi link dibawah ini untuk melihat solusinya :

Pesan komentar yang selalu melorot kebawah kotak form komentar

Masalah ini diakibatkan oleh kurangnya beberapa code pada script dan html comment halaman blog, untuk mengatasi hal ini anda perlu manambahkan kode ke tubuh blog anda, silahkan simak penjelasan dibawah ini. 

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari kode dibawah ini.





<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>



4. Setelah ketemu, coba perhatikan kode tersebut , silahkan hapus kodenya dari kode tulisan warna MERAH atas sampai kode tulisan warna MERAH yang dibawah.
5. Kemudian ganti dengan kode html yang ada dibawah ini.





<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<b:if cond='data:mobile'>
<div id='bdform-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
<b:else/>
<div id='bdform-wrapper'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>



6. Setelah anda ganti kodenya saatnya kita poles sedikit lagi scriptnya untuk lebih maximal.
7. Cari kode tag dibawah ini pada template anda
   

     document.getElementById(domId).insertBefore(replybox, null);

   Biasanya kode tersebut ada pada script komentar ,
8. ganti kode script yang diatas menjadi kode script dibawah ini.
   

     document.getElementById(domId).insertBefore
(document.getElementById('bdform-wrapper'), null);

9. Setelah selesai saatnya anda klik SAVE untuik menyimpan perubahan.

Keterangan Code

• Tulisan kode warna MERAH atas sampai kode warnaMERAH dibawah harus secara keseluruhan anda hapus kemudian masukkan kode pengganti lihat didalam spoiler " Kode Yang Diganti ")
• Cari kode warna HIJAU seperti diatas, setelah ketemu ganti dengan code warnaBIRU. Biasanya kode ini berada pada tag html blog

Cara Membuat Huruf Drop Cap Pada Awal Artikel Cara Membuat Huruf Drop Cap Pada Awal Artikel

Tutorial cara membuat huruf dropcap ini pada dasarnya sudah banyak sekali yang menshare, namun tanpa berkecil hati saya akan tetap mempublish tutorial yg satu ini yakni tentang tata cara membuat huruf dropcap. Huruf besar tersendiri yang biasanya terletak diawal kalimat, atau mungkin anda lebih sering melihatnya dalam sebuah artikel majalah dimana huruf awal selalu tercetak lebih besar dari default atau bawaan huruf  penulisan.

Jika sobat sudah sering membuka- buka banyak  artikel dalam blog ini saya yakin anda akan menjumpai tiga jenis huruf dropcap yang berbeda dalam setiap postingnya, di mana bentuk- bentuk huruf drop cap yang ada  tersebut kurang lebih terlihat seperti ini:

Nah, jika sobat tertarik.untuk  menerapkan salah satu huruf dropcap seperti yang terlihat di atas kedalam setiap halaman artikel sobat, maka silahkan ikuti tata cara pembuatannya. Saya akan coba merinci satu persatu tentang cara pembuatannya. Oya, sebelumnya ke, 3 jenis huruf dropcap ini kita namai dulu supaya mudah di ingat.

Yang pertama huruf dropcap Simple, yang kedua, dropcap Square, dan yang terakhir huruf dropcap Fancy

Ok, sekarang langsung saja akses ke dalam halaman dasbor blog sahabat, lalu pilih "Template" kemudian pilih " edit html " dan sekarang kita lanjut pada cara membuat ke 3 jenis huruf dropcap tersebut.

Cara membuat huruf dropcaps

Dalam halaman edit html silahkan cari kode yang mirip seperti ini ]]></b:skin> jika sudah menemukannya, selanjutnya copy dan pastekan kode berikut ini tepat di bawah kode ]]></b:skin>

 /* DROPCAPS
----------------------------*/
.dropcapsimple, .dropcapsquare, .dropcapfancy {
float:left;
overflow:hidden;
text-align:center;
}

.dropcapsimple {
font-size:34px;
height:34px;
line-height:38px;
width:30px;
text-align:left;
}

.dropcapsquare {
font-size:28px;
height:38px;
line-height:38px;
width:38px;
margin-right:7px;
color:#fefefe;
background:#111;
text-shadow:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

.dropcapfancy {
font-size:26px;
height:40px;
line-height:40px;
width:40px;
margin-right:7px;
color:#fefefe;
text-shadow:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS0750YdXHEPFp4vCL5ZBZgVK0i_EFWoN1b_y8-9YGTpr_lEFvxFt-QJvpuzOPgdESF6hzEuRZv1_oeihtWVFHQEa1UOacQh_kIlvGMkYC4JO9KXScXhGr93sZ-x138-aSD7Y3xqkop5k/s1600/bk_dropcap3.png) 0 0 no-repeat !important;
}

Simpan template,  done! 

Nah, untuk memunculkan huruf dropcap tersebut kedalam setiap postingan baru, langkah selanjutnya adalah klik "Pengaturan" lalu pilih "Post dan Komentar" copy dan pastekan kode html berikut kedalam kotak "Template Entri"

 <span class="dropcapsimple">Huruf awal Anda</span>

Untuk merubah tampilan huruf Dropcap Anda hanya perlu mengganti tulisan dropcapsimple yang tercetak tebal dan berwarna merah tersebut dengan kata berikut ini : "dropcapfancy" untuk dropcap Fancy, "dropcapsquare" untuk Dropcap Square. Buka postingan baru untuk memunculkannya kemudian ubahlah mode penulisan menjadi mode "HTML" dan ganti tulisan "Huruf awal Anda" dengan awal huruf postingan.

Cara Membuat Pesan Popup Atau Jendela Munculan Terbuka Secara Otomatis Cara Membuat Pesan Popup Atau Jendela Munculan Terbuka Secara Otomatis

P

emberitahuan atau pesan singkat bisa anda tampilkan dalam sebuah laman tertentu dan tujuannya adalah untuk memberitahukan sebuah materi yang anda ingin sampaikan ketika pengunjung tiba dan membaca artikel anda. Entah itu berupa kotak pemberitahuan Download e-book, sosial media, seperti fan page facebook anda, Google follower dan lain sebagainya sesuai keinginan anda.

Singkatnya apapun itu bentuk pemberitahuannya yang ingin anda sampaikan kepada para pengunjung web anda, maka bisa anda lakukan dengan menggunakan pemberitahuan popup window ini. Dan cara membuatnya sendiri adalah sebagai berikut:

• 'Masuk' kedalam dasbor blog

• Pilih 'Template',

• Pilih 'Edit HTML'

• Lalu cari kode <body> (Gunakan pencarian cepat dengan menekan tombol Ctrl + F)

Untuk mencegah terjadinya error saat melakukan pengeditan kode template, ada baiknya anda membuat berkas cadangan kode template anda. 

• Simpan kode script berikut ini tepat di bawah kode  <body>

<script type='text/javascript'>
var popurls=new Array()
popurls[0]='http://www.maslukis.com/'
function openpopup(popurl) { var winpops=window.open(popurl,'','width=,height=,toolbar,location,status,scrollbars,menubar,resizable') }
openpopup(popurls[Math.floor(Math.random()* (popurls.length))])
</script>

Catatan: Ganti URL berwarna merah dengan URL anda sendiri.

• Terakhir pilih 'Save' dan selesai.

Widget Panel W8 SM Widget Panel W8 SM

 

Inilah pertama kalinya saya memposting Widget Blog. Widget ini saya namakan Panel W8 SM. Saya desain menyerupai Gadget Panel OS Windows 8,7,Vista. Widget ini mempunyai pajang 100px dan lebar 100px, Berposisi Melayang. Widget yang saya keluarkan ada dua, yaitu JAM dan TANGGAL. Jika anda tertarik memasang di blog, dibawah saya kasih tutorialnya.

OK. Langsung saja.

• Masuk ke Blog kamu, dan pilih Tab Template lalu klik Edit HTML.
• Tekan Tombol F3 , untuk memudahkan mencari kata kunci 
• Pasang CSS Widget ini di atas ]]></b:skin>

.kotak-tanggal{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;right:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

.kotak-jam{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;left:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

• Lalu klik Simpan

• Sekarang kamu klik Tab Tata Letak, dan Tambahkan Gadget HTML/Javascript baru.
• Pastekan Source kode Widget ini di situ.

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

<div class='kotak-tanggal'><script src='https://sites.google.com/site/blogsantamars/css-santa-mars/Panel-W8-SM-Tanggal2.js'></script></div>

<div class='kotak-jam'><script src='https://sites.google.com/site/blogsantamars/css-santa-mars/Panel-W8-SM-Jam3.js'></script></div>

• Setelah itu Simpan dan Lihat Hasilnya.

Demikianlah Posting Widget Panel W8 SM, semoga bermanfaat.

Note!

1. Anda bisa mengatur letak posisinya di CSS tadi.