Showing posts with label Blogger Tutorial. Show all posts
Showing posts with label Blogger Tutorial. Show all posts

Cara Mudah Membuat Contac Form Pada Blog

1/20/2017 0
Buat sobat yang belum punya Contac Form pada kesempatan kali ini saya akan membagikan tutorialnya. Langsung saja sobat ikuti tutorilnya :

Masuk Blogger sobat pada dashboard pilih Laman dan buat Laman baru dan buat post di halaman statis, kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose di halaman Posini.
<form name="contact-form">
<span><i class="fa fa-pencil-square-o"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>Sitemap

Cara di atas apabila contac form mau di simpan di halaman statis, kalau mau menerapkannya pada widget sobat ikuti langkah-langkahnya di bawah ini :
Masuk Blogger sobat pada dashboard pilih Tata Letak tambah gadget baru dan pilih Html Java Script isi judulnya dan masukan kode di atas pada kotak konten yang di sediakan, untuk lebih jelasnya lihat gambar di bawah.

Nah begitulah cara membuat contac form dari saya, mudah-mudahan tutorialnya dapat membantu sobat dan bermanfaat buat sobat. Terimakasih ,untuk demonya silahkan lihat pada tombol di bawah.
Cara Memasang Seo Meta Tag Pada Blog

Cara Memasang Seo Meta Tag Pada Blog

1/20/2017 0
Pada artikel sebelumnya saya sudah membahas bagaimana Cara Memasang Meta Keywords Pada Blog . Pada postingan kali ini saya akan membahas bagaimana memasang Seo Meta Tag pada Blog agar mbah google lebih mudah mengenali blog sobat. Langsung ikuti langkah-langkahnya :

Masuk blogger sobat pada dashboard pilih Template>Edit Html dan masukan kode di bawah <head> atau sebelum </head> ganti tulisan xxxxx dengan tulisan kalian.

 <!-- [ Meta Tag SEO ] -->
<meta content='xxxxx' name='keywords'/>  
<link href='https://plus.google.com/xxxxx/posts' rel='publisher'/> 
 <link href='https://plus.google.com/xxxxx/about' rel='author'/>  
<link href='https://plus.google.com/xxxxx' rel='me'/>  
<meta content='xxxxx' name='google-site-verification'/> 
 <meta content='xxxxx' name='msvalidate.01'/>  
<meta content='xxxxx' name='alexaVerifyID'/>  
<meta content='xxxxx' name='Author'/> 
 <meta content='xxxxx' property='og:description'/>  
<meta content='xxxxx' property='fb:app_id'/>  
<meta content='xxxxx' property='fb:admins'/>  
<meta content='xxxxx' name='twitter:site'/>  
<meta content='xxxxx' name='twitter:creator'/>
 <!-- [ Meta Tag SEO END] -->

Jika sudah simpan Template sobat

Bagaimana mudah bukan, cukup sekian tutorial dari saya tentang memasang Seo Meta Tag Pada Blog semoge artikel saya dapat membantu sobat dan bermanfaat bagi sobat, sampai jumpa di tutorial selanjutnya. Terimakasih

Baca juga Cara Mudah Membuat Contac Form Pada Blog

Cara Mudah Memasang Meta Keywords di Blogger 2017

1/20/2017 0
Terdapat dua cara untuk memasang meta tag keywords di blog, meta tag di pasang secara otomatis dan meta tag di pasang secara manual. Tapi untuk sekarang ini berdasarkan informasi yang di peroleh dari berbagai sumber mesin pencari sudah tidak lagi menggunakan meta keywords sebagai salah satu faktor penentu rangking.

Langsung saja untuk yang mau memasang meta tag pada blog ikuti langkah-langkahnya.

  • Memasang Meta Keywords Secara Otomatis
 Login ke blogger sobat dan masuk dashboard lalu pilih Template dan pilih Edit HTML, masukan kode di bawah sesudah kode <head>.
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if>  
<b:if cond='data:blog.pageType == &quot;item&quot;'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>

Lihat gambar untuk lebih jelas :
Jika sudah selesai save atau simpan templatenya.

  • Memasang Meta Keywords Secara Manual
Kalau menggunakan cara manual sobat harus memasukan kata kuncinya secara manual.
Masuk blogger pada dashboard pilih Template lalu pilih edit Html, masukan kode di bawah sesudah kode <head>.
<b:if cond='data:blog.homepageUrl == data:blog.url'>
 <meta content='masukan kata kunci untuk halaman depan blog sobat' name='keywords'/>
</b:if>  
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <meta content='masukan kata kunci untuk halaman postingan blog sobat' name='keywords'/>
</b:if>

Jika sudah simpan Template sobat

Selesai tutorial dari saya tentang memasang meta keywords pada blog mudah bisa membantu dan bermanfaat bagi sobat. Terimakasih

Baca juga Cara Memasang Seo Meta Tag Pada Blog

Cara Mudah Membuat Sitemap Atau Daftar Isi Blog Yang Responsive

1/17/2017 0

Sitemap adalah sebuah halaman khusus yang di rancang untuk memudahkan pengunjung melihat isi blog kita. Semua postingan blog ada di dalam halaman sitemap, mungkin halaman sitemap bisa di sebut juga sebagai halaman daftar isi blog kita.

Dalam tutorial kali ini saya akan membahas bagaimana kita membuat sitemap dan menerapkannya ke dalam widget blog kita. Oh ya sitemap saya bagikan ini sifatnya responsive bisa menyesuaikan tergantung layar.

1.Masuk Blogger-Template-Edit Html dan  copy kode CSS di bawah sebelum kode ]]></b:skin> atau </style>
table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;}
table img{width: 100%;height: auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic;}

table {border-spacing: 0;border-collapse: collapse;}
td,
th {padding: 0;}
th {text-align: left;}
.table {width: 100%;max-width: 100%;margin-bottom: 20px;}
.table a {text-decoration: none !important;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;}
.table > thead > tr > th {background-color:#3498DB;color:#fff;vertical-align: bottom;}
.table > thead > tr > th a {color:#fff !important;}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {border-top: 0;}
.table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}
table col[class*="col-"] {position: static;display: table-column;float: none;}
table td[class*="col-"],
table th[class*="col-"] {position: static;display: table-cell;float: none;}
.table-responsive {min-height: .01%;overflow-x: auto;}
@media screen and (max-width: 767px) {
  .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;}
  .table-responsive > .table {margin-bottom: 0;}
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {white-space: nowrap;}
  .table-responsive > .table-bordered {border: 0;}
}

2.Simpan atau save Template

3.Pilih laman dan buat laman baru dan copykan kode di bawah di HTML jangan di Compose,untuk yang tidak tau cara membuat halaman baru silahkan baca postingan Cara Membuat Halaman Baru di Blogspot
<div id="bp_toc">Loading TOC. Please wait....</div>

<script type='text/javascript'>
//<![CDATA[
   var postTitle = new Array();     // array of posttitles
   var postUrl = new Array();       // array of posturls
   var postDate = new Array();      // array of post publish dates
   var postSum = new Array();       // array of post summaries
   var postLabels = new Array();    // array of post labels

//global variables
   var sortBy = "datenewest";         // default value for sorting ToC
   var tocLoaded = false;           // true if feed is read and ToC can be displayed
   var numChars = 250;              // number of characters in post summary
   var postFilter = '';             // default filter value
   var tocdiv = document.getElementById("bp_toc"); //the toc container
   var totalEntires =0; //Entries grabbed till now
   var totalPosts =0; //Total number of posts in the blog.

//main callback function
function loadtoc(t){function e(){if("entry"in t.feed){var e=t.feed.entry.length;if(totalEntires+=e,totalPosts=t.feed.openSearch$totalResults.$t,totalPosts>totalEntires){var s=document.createElement("script");s.type="text/javascript",startindex=totalEntires+1,s.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=500&alt=json-in-script&callback=loadtoc"),tocdiv.appendChild(s)}for(var o=0;e>o;o++){for(var a,l=t.feed.entry[o],r=l.title.$t,i=l.published.$t.substring(0,10),n=0;n<l.link.length;n++)if("alternate"==l.link[n].rel){a=l.link[n].href;break}if("content"in l)var p=l.content.$t;else if("summary"in l)var p=l.summary.$t;else var p="";var c=/<\S[^>]*>/g;if(p=p.replace(c,""),p.length>numChars){p=p.substring(0,numChars);var d=p.lastIndexOf(" ");p=p.substring(0,d)+"..."}var f="";if("category"in l){for(var n=0;n<l.category.length;n++)f+="<a href=\"javascript:filterPosts('"+l.category[n].term+"');\" title=\"Click here to select all posts with label '"+l.category[n].term+"'\">"+l.category[n].term+"</a>,  ";var u=f.lastIndexOf(",");-1!=u&&(f=f.substring(0,u))}postTitle.push(r),postDate.push(i),postUrl.push(a),postSum.push(p),postLabels.push(f)}}totalEntires==totalPosts&&(tocLoaded=!0,showToc())}e(),sortPosts(sortBy),tocLoaded=!0}function filterPosts(t){postFilter=t,displayToc(postFilter)}function allPosts(){postFilter="",displayToc(postFilter)}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s;var s=postDate[t];postDate[t]=postDate[e],postDate[e]=s;var s=postUrl[t];postUrl[t]=postUrl[e],postUrl[e]=s;var s=postSum[t];postSum[t]=postSum[e],postSum[e]=s;var s=postLabels[t];postLabels[t]=postLabels[e],postLabels[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o)}function displayToc(t){var e=0,s="",o="POST TITLE",a="Click to sort by title",l="DATE",r="Click to sort by date",i="LABELS",n="";"titleasc"==sortBy&&(a+=" (descending)",r+=" (newest first)"),"titledesc"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"dateoldest"==sortBy&&(a+=" (ascending)",r+=" (newest first)"),"datenewest"==sortBy&&(a+=" (ascending)",r+=" (oldest first)"),""!=postFilter&&(n="Click to show all posts"),s+='<div class="table-responsive">',s+='<table class="table">',s+="<thead>",s+="<tr>",s+="<th>",s+='<a href="javascript:toggleTitleSort();" title="'+a+'">'+o+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:toggleDateSort();" title="'+r+'">'+l+"</a>",s+="</th>",s+="<th>",s+='<a href="javascript:allPosts();" title="'+n+'">'+i+"</a>",s+="</th>",s+="</tr>",s+="</thead>",s+="<tbody>";for(var p=0;p<postTitle.length;p++)""==t?(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++):(z=postLabels[p].lastIndexOf(t),-1!=z&&(s+='<tr><td><a href="'+postUrl[p]+'" title="'+postSum[p]+'">'+postTitle[p]+"</a></td><td>"+postDate[p]+"</td><td>"+postLabels[p]+"</td></tr>",e++));if(s+="</tbody>",s+="</table>",s+="</div>",e==postTitle.length)var c='<span class="toc-note">Displaying all '+postTitle.length+" posts<br/></span>";else{var c='<span class="toc-note">Displaying '+e+" posts labeled '";c+=postFilter+"' of "+postTitle.length+" posts total<br/></span>"}tocdiv.innerHTML=c+s}function toggleTitleSort(){sortBy="titleasc"==sortBy?"titledesc":"titleasc",sortPosts(sortBy),displayToc(postFilter)}function toggleDateSort(){sortBy="datenewest"==sortBy?"dateoldest":"datenewest",sortPosts(sortBy),displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);document.getElementById("toclink")}else alert("Just wait... TOC is loading")}function hideToc(){var t=document.getElementById("toc");t.innerHTML="";var e=document.getElementById("toclink");e.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">» Show Table of Contents</a> <span style="font-size:11px;color:red;">Terbaru!</span>'}var postTitle=new Array,postUrl=new Array,postDate=new Array,postSum=new Array,postLabels=new Array,sortBy="datenewest",tocLoaded=!1,numChars=250,postFilter="",tocdiv=document.getElementById("bp_toc"),totalEntires=0,totalPosts=0;
//]]>
</script>
 
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

Itu lah cara membuat Sitemap atau daftar isi blog yang responsive yang sederhana dari saya, semoga artikelnya bisa membantu dan bermanfaat buat anda. Sekian dari saya, terimakasih.


Silahkan lihat contohnya pada tombol demo di bawah

Cara Mudah Membuat Flat Table Responsive

1/17/2017 0

Flat Table Responsive adalah sebuah table yang bisa menyesuaikan sesuai ukuran layar, misal kalau di buka di handphone atau tablet ukuranya mengikuti layar mobile tersebut. Jadi ketika website di buka pada ukuran yang lebih sempit kita masih bisa membaca table dengan mudah.

Berikut adalah langkah-langkah untuk membuat Flat Table Responsive
  • Masuk Blogger-Template-Edit HTML dan copykan kode di bawah setelah kode <head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
  • Copy kode CSS di bawah sebelum kode ]]></b:skin> atau </style>
table {background-color: transparent;width: 100%;max-width: 100%;margin-bottom: 20px;}
table img{width: 100%;height: auto}
table.tr-caption-container{padding:0;border:none}
table td.tr-caption{font-size:12px;font-style:italic;}

table {border-spacing: 0;border-collapse: collapse;}
td,
th {padding: 0;}
th {text-align: left;}
.table {width: 100%;max-width: 100%;margin-bottom: 20px;}
.table a {text-decoration: none !important;}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {padding: 8px;line-height: 1.42857143;vertical-align: top;}
.table > thead > tr > th {background-color:#3498DB;color:#fff;vertical-align: bottom;}
.table > thead > tr > th a {color:#fff !important;}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {border-top: 0;}
.table > tbody > tr:nth-of-type(odd) {background-color: #f9f9f9;}
table col[class*="col-"] {position: static;display: table-column;float: none;}
table td[class*="col-"],
table th[class*="col-"] {position: static;display: table-cell;float: none;}
.table-responsive {min-height: .01%;overflow-x: auto;}
@media screen and (max-width: 767px) {
  .table-responsive {width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;}
  .table-responsive > .table {margin-bottom: 0;}
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {white-space: nowrap;}
  .table-responsive > .table-bordered {border: 0;}
}

Kode di atas menggunakan media screen max-width 767px jadi ketika lebar maximal layar 767px akan ada scroll di bawah table atau bisa mengubahnya menjadi auto.

  • Cara penggunaan Flat Table Responsive copykan kode HTML di bawah di postingan, copy di HTML jangan di  Compose.
<div class="table-responsive">
<table class="table"> 
<thead>
  <tr>
    <th>Nama Pertama</th> 
    <th>Nama Terakhir</th> 
  </tr>
</thead> 
<tbody>
  <tr> 
    <td>David</td> 
    <td>Silva</td>  
  </tr>
  <tr> 
    <td>David </td> 
    <td>Beckham</td> 
  </tr>
  <tr> 
    <td>John</td> 
    <td>Lennon</td> 
  </tr>
</tbody> 
</table>
</div>

Bagi yang mau lihat hasilnya silahkan lihat demonya dulu



Silahkan baca juga Cara Membuat Sitemap Atau Daftar Isi Blog Yang Responsive

Tutorial Membuat Blog Di Blogger Dari Awal Sampai Jadi

1/17/2017 0

Blogger.com atau lebih dikenal sebagai blogspot merupakan layanan untuk membuat blog secara gratis yang bisa dibilang sangat mudah untuk digunakan. Mudah-mudahan tutorial yang saya tulis di bawah ini bisa sedikit memberi pencerahan bagi sobat blogger pemula yang baru belajar ngeblog.
  • Login dengan akun google anda, kalau belum punya harus buat dulu silahkan lihat postingan saya tentang Cara Membuat Akun Google

 




  • Untuk yang belum punya akun Google+  anda harus buat dulu silahkan pilih buat profil Google+ 

  • Isi semua data yang di butuhkan dan Create Profil

  • Setelah jadi profil Google+ lanjutkan ke Blogger


  • Pilih buat blog baru

  • Isi judul blog, alamat blog dan templatenya dan klik buat blog

  • Sekarang blog sudah jadi silahkan klik lihat blog untuk melihatnya

  • Beginilah tampilan blog anda ketika baru di buat belum ada postingan sama sekali


Sekian artikel dari saya tentang cara membuat blog di Blogger semoga apat membantu dan bermanfaat.Terimakasih