Showing posts with label Java Script. Show all posts
Showing posts with label Java Script. Show all posts

Tuesday, 16 August 2016

Knugrha

Cara Membuat Sitemap SEO Friendly

By     No comments:
Cara Membuat Sitemap SEO Friendly - Kalian tau sitemap ? tidak tau ya sudah hehehe. Pada kesempatan kali ini saya ingin berbagi tentang bagaimana Cara Membuat Sitemap SEO Friendly yang dapat menampilkan semua artikel yang di pisahkan dengan Label yang telah Anda publiskan. Sitemap ini juga akan menampilkan tanda "New" yang terdapat pada artikel baru Anda. Berikut ini demonya silahkan klik disini



Cara Membuat/Menambahkan Sitemap di Halaman Blogger

Untuk dapat membuat sitemap di blogger Anda, silahkan ikuti tutorial berikut ini:

  •  Silahkan Login ke Dashboard Blogger dan pilih blog Anda.
  •  Pilih Pages >> New Page dan akan tampil halaman kosong.
  •  Pada halaman kosong, pilih mode HTML lalu copy paste kode di bawah ini dan jangan lupa beri judul sitemap/daftar isi.


<style type="text/css">


#toc{


width:99%;


margin:5px auto;


border:1px solid #2D96DF;


-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);


-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);


box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);


}


.labl{


color:#FF5F00;


font-weight:bold;


margin:0 -5px;


padding:1px 0 2px 11px;


background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);


background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));


border:1px solid #2D96DF;


border-radius:4px;-moz-border-radius:4px;


-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;


-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;


}


.labl a{


color:#fff;


}


.labl:first-letter{t


ext-transform:uppercase;


}


.new{


color:#FF5F00;


font-weight:bold;


font-style:italic;


}


.postname{


font-weight:normal;


background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);


background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));


}


.postname li{


border-bottom: #ddd 1px dotted;


margin-right:5px


}





</style>








<div id="toc">


<script src="https://googledrive.com/host/0B2ww3WS8P1MJM2JkeHlyUVp4dnc/" type="text/javascript"></script>


<script src="http://www.mastahbloging.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">


</script></div>


Silahkan Anda ganti tulisan merah menjadi situs Anda.

  •  Jika Anda tak ingin sitemap Anda di komentari, silahkan klik pada options di sisi kanan dan pilih don't allow,hide existing compose mode.
  •  Klik publiskan .

Peringatan
URL Sitemapnya jika dipost lewat Laman adalah http://URLBlog/p/sitemap.html
Tulisan berwarna biru silahkan ganti dengan URL Kalian
Untuk tulisan merah silahkan ganti dengan judul sitemap kalian.
Sekian tutorial Cara Membuat Sitemap SEO Friendly dan semoga artikel ini bermanfaat. Terima Kasih.
Read More
Knugrha

Tutorial Membuat Dropdown Menu Diblog

By     No comments:
Tutorial  Membuat Menu Dropdown Diblog - Kalian pasti taulah dropdown itu apa kalau gk tau ya sudah saya kasih tau. Dropdown Menu adalah menu yang jika kita mengarahkan kursor atau klik ke menu tersebut maka akan muncul menu lainya yang memanjang kebawah sesuai settingan yang dibuat author blog, Namun kali ini Menu Dropdown nya berbeda kenapa ?, karena pada postingan ini kita akan membuat menu dropdown dengan background image. jadi langsung saja hehehe



Buat kalian yang ingin mencoba silakan ikuti tutorial berikut :
  • Login ke blogger Anda, klik menu Design > Edit HTML
  • Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda karena takutnya ada kegagalan dan harus edit template dari awal lagi.
  • Cari kode <b:skin><![CDATA[ , lalu letakkan kode berikut diatasnya.

  • <script>
    var last_expanded = &#39;&#39;;
    function showHide(id)
    {
    var obj = document.getElementById(id);
    var status = obj.className;
    if (status == &#39;hide&#39;) {
    if (last_expanded != &#39;&#39;) {
    var last_obj = document.getElementById(last_expanded);
    last_obj.className = &#39;hide&#39;;
    }
    obj.className = &#39;show&#39;;
    last_expanded = id;
    } else {
    obj.className = &#39;hide&#39;;
    }
    }
    </script>
  • Kemudian cari kode ]]></b:skin> , letakkan kode berikut ini diatasnya.

  • .dropdown-b {
    background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom: 10px;
    margin-top: 4px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .dropdown-bg {
    background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:13px;
    padding-bottom: 10px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .hide{
    display: none;
    }
    .show{
    display: block;
    }
    a{cursor: hand}
  • Lalu klik Save Template.
  • Kemudian klik menu Design > Page Element > Add a Gadget
  • Pilih HTML/Javascript, lalu masukkan kode berikut ini :
  • <a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
    <div id="dropdown-b-1" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
    <a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
    <div id="dropdown-b-2" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
    <div id="dropdown-b-3" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
    <div id="dropdown-b-4" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
     <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
  • Lalu Save Selesai 
Semoga berhasil dan bermanfaat. Jika ada kesulitan silahkan berkomentar :D
Read More

Monday, 15 August 2016

Knugrha

4 Cara Mengatasi Spammer Yang Sebar Link Aktif di Komentar

By     No comments:
Cara Mengatasi Spammer Yang Sebar Link Aktif di Komentar - Kali ini saya akan memposting Cara Mengatasi Spammer Yang Sebar Link Aktif di Komentar, ya kalian pasti sering melihat Orang yang menebarkan link aktif lewat komentar blog-blog, para penyebar link aktif tersebut dinamakan Spammer. Link aktif yang biasa disebarkan para Spammer sebenarnya boleh saja tetapi kebanyakan para Spammer komentarnya tidak Relevan dengan isi Post membuat komentar tidak bermutu oleh karena itu lebih baik dihapus saja komentar-komentar Spammer.




Beberapa Cara Mengatasi Spam Komen Link Aktif

1. Menghilangkan Link Aktif Dengan CSS

Menghilangkan link aktif dengan css maksudnya adalah menjadikan link tidak terlihat oleh visitor, cara ini kurang baik karena hanya menghilangkan link dari mata visitor tetapi masih terbaca oleh browser, dan mesin pencari, mesin pencari masih menganggap didalam komentar tersebut masih mengandung link aktif. 

letakan kode berikut sebelum kode */]]></b:skin> 


#comments p a{ display: none !important;}
dimata visitor link tidak nampak, namun dimata mesin pencari link tersebut sebenarnya masih dapat dibaca, dan cara ini sebenarnya cara yang kurang efektif untuk mematikan link aktif dalam komentar. 

2. mengganti link aktif menjadi text saja

Cara ini adalah mengganti setiap link aktif yang ditemukan dalam komentar menjadi sebuah text saja dan bukan sebuah link aktif, kita mampu memilih dengan menggunakan jquery maupun dengan menggunakan pure javascript, berikut kode yang mampu digunakan: 


a. Menggunakan jquery: 

Untuk menggunakan jquery anda diharuskan meload dulu library jquery, berikut script load libaray jquery:



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

Kemudian masukan kode ini dibawahnya:

<script type='text/javascript'> //<![CDATA[ $(function(){$('#comments p').find('a').contents().unwrap();}); //]]> </script>


Letakan kode-kode diatas sebelum kode </head> 

b. Menggunakan pure javascript:

Untuk cara diatas anda juga mampu menggunakan pure javascript, sesampai tidak perlu me-load library jquery , sebagai berikut:



<script type='text/javascript'>


//<![cdata[


function blocklinks(parentid, children) {


 var parent = document.getelementbyid(parentid),


 content = parent.getelementsbytagname(children);


 for (var i = 0; i < content.length; i++) {


  if (content[i].innerhtml.indexof('</a>') !== -1) {


   content[i].innerhtml = content[i].innerhtml.replace(/<a[^>]*>|<\/a>/g, "");   


  }


 }


}


blocklinks('comments', 'p');


//]]>


</script>

3. Menghapus isi komentar dan menggantinya

Pada contoh berikut kita akan coba menghapus isi komentar yang mengandung link aktif kemudian menggantinya dengan sebuah text berupa pesan khusus:


Script berikut menggunakan kode javascript murni (pure javascript), silahkan letakan kode dibawah ini sebelum kode  </body> 




<script type='text/javascript'>


//<![cdata[


function blocklinks(parentid, children) {


 var parent = document.getelementbyid(parentid),


 content = parent.getelementsbytagname(children);


 for (var i = 0; i < content.length; i++) {


  if (content[i].innerhtml.indexof('</a>') !== -1) {


   content[i].innerhtml = "komentar mengandung <mark>link aktif</mark> dilarang nyepam di sini!";     }


 }


}


blocklinks('comments', 'p');


//]]>


</script>


4. Mengganti link aktif dengan text tertentu.

Script berikut digunakan untuk menonaktifkan dan mengganti setiap link aktif yang ditemukan dalam komentar dengan tuverbal tertentu sesuai yang diinginkan, tanpa menghapus isi komentarnya:




script berikut menggunakan kode javascript murni (pure javascript), silahkan letakan kode dibawah ini sebelum kode </body> 


<script type='text/javascript'>


//<![cdata[


function blocklinks(parentid, children) {


    var parent = document.getelementbyid(parentid),


        content = parent.getelementsbytagname(children);


    for (var i = 0; i < content.length; i++) {


        if (content[i].innerhtml.indexof('</a>') !== -1) {


            content[i].innerhtml = content[i].


innerhtml.replace(/<a[^>]*>.*<\/a>/g, " <mark>ini link aktif</mark> ");            content[i].classname =         }


    }


}


blocklinks('comments', 'p');


//]]>


</script>



Peringatansilahkan anda ganti text warna merah dengan text yang anda inginkan.

Demikian artikel tentang cara mengatasi Spammer yang menebarkan link aktif dan doakan para Spammer agar bertobat hehehe *canda, Semoga Bermanfaat.

Read More

Saturday, 13 August 2016

Knugrha

Solusi Gagal Memasang Komentar Google+

By     No comments:
Gagal Pasang Komentar Google+ ? -  Ada beberapa orang yang gagal memasang Komentar Google+ dan akhirnya saya menemukan solusi yang dibuat oleh Kang Taufik
Cara ini menggunkan cara manual, dengan Edit HTML

Alternatif Pemasangan Komentar Google+

1. Masuk ke Edit HTML
2. Simpan kode ini di atas  <b:includable id='comments' var='post'>
<b:includable id='g-comments' var='post'>

  <div id='g-comments-outer'>
    <div class='g-comments' expr:data-href='data:blog.canonicalUrl' data-width='600' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD'>
      <a href='#g-comments-outer' id='g-comments-loader'>Add Comments</a>
    </div>
  </div>

  <!-- For slow connection -->
  <script type='text/javascript'>
  //<![CDATA[
  (function() {
    var btn = document.getElementById('g-comments-loader'),
    showGC = function() {
      var script = document.createElement('script'),
        head = document.getElementsByTagName('head')[0], old;
      script.type = "text/javascript";
      script.id = "g-comments-script";
      script.src = "//apis.google.com/js/plusone.js";
      if (document.getElementById('g-comments-script')) {
        old = document.getElementById('g-comments-script');
        old.parentNode.removeChild(old);
      }
      head.appendChild(script);
    };
    btn.onclick = function() {
      this.innerHTML = "Memuat...";
      showGC();
      return false;
    };
  })();
  //]]>
  </script>

</b:includable>
Anda bisa mengganti ukuran lebar dengan mengganti angka 600 pada kode di atas.
3. Cari kode ini
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>
kalau tidak ada cari ini :
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
</b:if>
Ganti dengan kode ini :
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <!-- b:include data='post' name='comment_picker'/ -->
  <b:include data='post' name='g-comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- b:include data='post' name='comment_picker'/ -->
  <b:include data='post' name='g-comments'/>
</b:if>
4. Simpan template.

Langkah Terakhir

Karena cara ini merupakan cara manual, maka jangan di centang Gunakan Gooogle+ Komentar di blog ini. Semoga berhasil dan bermanfaat.


Read More
Knugrha

Tutorial Membuat Artikel Terkait di Blog

By     No comments:
Cara Membuat Artikel Terkait - Kalian pasti sudah tau tentang Related Post atau Artikel Terkait Related Post adalah link yang berisi Post yang berkaitan dengan artikel yang sedah dibaca, dengan kata lain related post ini di di buat agar pembaca blog lebih betah untuk tetap berada di blog sobat. Nah saya akan memberikan Tutorial cara membuatnya Langsung saja dicoba.



Cara Memasang Artikel  Simple Di Bawah Postingan Blog

  1. Masuk ke blogger sobat 
  2. Pilih Template dan klik Edit Template
  3. Silahkan cari kode </head> disana , setelah ketemu dengan kode itu silahkan copy kode warna biru di bawah ini dan pastekan di atas kode </head>  tadi, jangan lupa untuk megganti angka 500px dengan angka sesuai lebar template milik sobat.         


     <style> #related-posts { float : left; width : 500px; margin-top:20px; margin-left : 0px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9mvFfOPjnDzU9YigscoCOQsAc0SHQqTDe51XYT4mBbbja3SJtNAq4Xns4x8-6LiWC9dm33FaJ3ACzbIE0baT0sTxKxCSYysYLUpkz0VR9tKTpcyGw5NB8ICDxrTb0Q7PVh_vu4YZxR0I/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://my-sanah-project.googlecode.com/svn/branches-satu' type='text/javascript'/>
  4. Kemudian yang terakhir adalah cari kode <data:post.body/>  dan silahkan copy dan patekan kode di warna biru bawah ini tepat di bawah kode <data:post.body/> tadi, biasanya setiap template mempunyai kode <data:post.body/> lebih dari dua sobat bisa mencobanya mulai dari yang paling bawah atau yang terakhir.              
  5. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
      <font face='Arial' size='3'><b><h3 style='font-size:13px'>    Artikel Terkait Selain <data:post.title/></h3> : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=    10&quot;' type='text/javascript'/></b:if></b:loop> </font>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    </div></b:if>
                                                                                                      
    6. Perhatikan kode yang berwarna hitam di atas itu adalah kode yag bisa sobat ganti sendiri sesuai dengan template milik sobat misalkan kode  FFFFF adalah warna huruf sedangkan angka 10 adalah jumlah. sedangkan kata Artikel Terkait selain itu bisa sobat rubah sesuai dengan kata yang menurut sobat lbih pas di hati.

  6. Setelah Selesai simpan Template sobat. 
Semoga Bermanfaat
Read More
© Copyright 2016 WinXz-ID. Designed by Kristian Nugraha | Distributed By WinXz_ID. Powered by Blogger.