Cara Membuat Site Map Atau Daftar Isi Postingan

Cara Buat Sitemap di Blogspot - Sebenarnya cara ini sudah banyak diketahuai oleh para blogger, tulisan ini hanya untuk mendokumentasikan  tutorial blogs dan hanya sekedar sharing saja. Saya pernah baca kalau sitemap mempunyai peranan yang cukup penting dalam pengindexan blog oleh google. Oleh karena itu, kali ini saya akan sharing artikel tentang Cara Buat Sitemap di Blogspot.

Cara buat sitemap di blogspot ternyata cukup mudah dan simpel, bahkan lebih mudah dan lebih simpel. Anda cukup ikuti instruksi saya sampai selesai, maka sitemap blog anda sudah siap pakai. Dan sitemap tersebut akan update secara otomatis setelah anda memposting artikel bari di blog anda.

Hasil kerja dari cara membuat sitemap di blogspot yang akan saya sharing di sini, seperti gambar di bawah ini.

Silahkan ikuti langkah-langkahnya dibawah ini :

1. Silahkan Copy code dibawah ini :

<script src="https://sites.google.com/site/herzafencom/daftar-isi-blog.txt">
</script>
<script src="http://kingarif86.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

2 Ganti Tulisan yang berwarna merah dengan alamat url blog sobat.

3. Login ke Dasbor - Postingan - Entri Baru - Pilih Edit HTML dan Paste Code tersebut

4. Terbitkan Entri Tapi jangan lupa untuk mensetting tanggal postingan menjadi lampau agar tidak muncul di Hompage. Sudah tahu caranya kan? Pilih Post Option > Dijadwalkan pada > Tulis tanggal terbit sesuaka sobat

5. Selesai dan lihat hasilnya

Selamat mencoba, semoga berhasil!

Read More

JQuery Feature Widget Gaya Posting Untuk Blogger

Pada tulisan ini saya akan share tentang tutorial membuat widget slide show berbasis JQuery untuk postingan populer diblog sobat. Widget ini dapat membuat total tayangan laman blog sobat menjadi meningkat, sobat bisa update secara manual dengan menggunakan widget ini, tentunya postingan yang menurut sobat paling berkualitas untuk ditampilkan. Sebelum lanjut ke langkah-langkah pembuatan slide show, saya sedikit memberitahu sobat bahwa widget ini dapat membuat loading page blog sobat menjadi sedikit lambat.

Langkah 1 :
Sobat login dulu ke akun blogger sobat, kemudian sobat pilih Rancangan > Edit HTML

Langkah 2 :
Cari code ini ]]></b:skin> gunakan tombol Ctrl+F pada keyboard

Langkah 3 :
Copy dan paste code dibawah ini tepat diatas ]]></b:skin>

#featured{
width:336px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:336px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}

#featured .ui-tabs-panel{
    width:336px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIHy-QNuL29WlIA2KLmk476J-VouPHO_JQtO9ouraaryz1UWIHNcmPHb7zO3FAUSMZxeS9Qu6Aw-Ov-CVhhLa_mITHZeTLpNcUY5L6jJO31mz-1c9Wt4FvhVmNaUUi3Z4a-NvwSHWH5Nc/s1600/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}

#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZjpPCeX8zWUTpELkBdKzPyomkTgX5uOk6AFq9Kiao74iaWhhv0q3iGrPukwNX4vgcDBFED0D1Ch3cQZpi8_mePP-vFhb66T_ZqOfVlmsd1YZOdDyQEOtpe41g-CAcgConJ9CGvRNsO8/s1600/transparent-bg.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}

.ui-tabs-nav-item img {
width:45px;
height:45px;
}

Langkah 4 :
Gunakan tombol Ctrl+F dan cari code ini </head>, kemudian Copy dan Paste code dibawah ini tepat diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
    });
</script>

Langkah 5 :
Simpan Template

Langkah 6 :
Kembali ke menu Rancangan, kemudian sobat pilih  Tambah Gadget > HTML JavaScript, Copy dan Paste code dibawah ini didalamnya.

<div id="featured">

          <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected">
<a href="#fragment-1">
<img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />
<span>15+ Excellent High Speed</span></a></li>

            <li class="ui-tabs-nav-item">
<a href="#fragment-2">
<img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI
/AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg" />
<span>20 Beautiful Long Exposure</span></a></li>

            <li class="ui-tabs-nav-item">
<a href="#fragment-3"><img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" /><span>35 Amazing Logo Designs</span></a></li>

            <li id="nav-fragment-4" class="ui-tabs-nav-item">
<a href="#fragment-4">
<img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg" />
<span>Create a Vintage</span></a></li>
          </ul>

        <!-- First Content -->
        <div id="fragment-1" style="" class="ui-tabs-panel">
            <img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />

             <div class="info">
                <h2><a href="#fragment-1">15+ Excellent High Speed</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Read more</a></p>
             </div>
        </div>

        <!-- Second Content -->
        <div id="fragment-2" style="" class="ui-tabs-panel">
            <img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI/
AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg" />

             <div class="info">
                <h2><a href="#fragment-2">20 Beautiful Long Exposure</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">Read more</a></p>
             </div>
        </div>

        <!-- Third Content -->
        <div id="fragment-3" style="" class="ui-tabs-panel">
            <img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg" />

             <div class="info">
                <h2><a href="#fragment-3">35 Amazing Logo Designs</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">Read more</a></p>
             </div>
        </div>

        <!-- Fourth Content -->
        <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg" />

             <div class="info">
                <h2><a href="#fragment-4">Create a Vintage</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">Read more</a></p>
             </div></div></div>

Langkah 7 : 
Selesai dan Simpan Gadget.

Keterangan : 
Code yang berwarna Biru, sobat gantikan dengan Url lengkap Postingan yang ingin sobat tampilkan
Code yang berwana Merah, Sobat ganti dengan Url gambar postingan sobat.
Tulisan yang berwarna Pink, sobat ganti dengan Judul Postingan sobat
Tulisan yang berwarna Hijau, sobat ganti dengan Deskripsi Postingan.

Read More

Tutorial Membatasi Jumlah Postingan Yang Tampil Pada Label

Pada tulisan ini saya akan share tentang cara membatasi jumlah postingan yang tampil pada label. Pada tutorial ini kita dapat mengatur postingan yang ingin sobat tampilkan pada halaman utama atau lebih sering dikenal sebagai home page. Tutorial ini juga dapat membatasi jumlah postingan yang tampil pada suatu halaman ketika label diklik yang isinya sesuai dengan keinginan sobat.

Coba sobat bayangkan jika sobat punya 100 isi label, tentu akan banyak isi label yang akan ditampilkan. Hal ini akan mempengaruhi loading page pada blog sobat, sudah pasti pengujung blog sobat merasa tidak nyaman saat membuka isi blog sobat, pasti si pengunjung tersebut akan cepat menutup blog sobat.

Langsung saja kita praktekkan cara yang telah kita bicarakan sebelumnya, dan sobat bisa ikuti langkah-langkahnya :

1. Silahkan sobat masuk ke Akun Blogger sobat.
2. Klik Rancangan, kemudian klik lagi Edit HTML.
3. Sebaiknya sobat memback up blog sobat untuk mengantisipasi jika terjadi kesalahan. Caranya dengan Klik Download Template Lengkap.
4. Jangan lupa beri tanda centang pada Expand Template Widget.
5. Gunakan tombol kombinasi Ctrl + F untuk mencari kode berikut :

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

6. Tambahkan code pembatas + &quot;?max-results=5&quot;

7. Maka Hasilnya akan seperti ini :

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

Keterangan : Code diatas code label yang berbentuk label list di blog sobat

Untuk mengedit label cloud sobat gunakan cara ini :
1. Gunakan tombol kombinasi Ctrl + F, dan cari code dibawah ini :

<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>

2. Kemudian tambahkan code pembatas + &quot;?max-results=5&quot; 
3. Maka hasilnya akan terlihat seperti ini :

<b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>

4. Klik Save Template
5. Selesai

Bila sobat ingin membatasi jumlah postingan yang tampil pada label di kedua lokasi tersebut ( lihat contohnya disini ) sobat ikuti langkah-langkahnya dibawah ini :
1. Gunakan Tombol kombinasi Ctrl + F
2. Cari code dibawah ini :

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

3. Kemudian sobat tambahkan code pembatasnya + &quot;?max-results=5&quot;
4. Maka hasilnya akan terlihat seperti ini :

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

5. Klik tombol Save Template
6. Selesai

Selamat mencoba. Jangan lupa berikan komentar sobat disini.

Read More

Cara Mudah Meningkatkan Traffic Dengan Plipeo.com

Cara ini mungkin sudah banyak sahabat blogger yang sudah tahu, saya juga sudah lama tahu tentang cara meningkatkan trafik lewat Plipeo.com, tetapi baru pertama kali saya mencoba cara ini dengan harapan saya mendapatkan trafik yang tinggi pada blog ini. Setelah mengikuti cara ini saya langsung share, mudah-mudahan tulisan ini dapat memberikan informasi dan mafaat untuk sahabat blogger.

Plipeo.com adalah layanan Social Traffic Exchange yang dapat menginteraksikan blog sobat dengan blog yang lainya. Menurut informasi yang saya dapat layanan ini mampu menghasilkan trafik hingga 300%, persentase ini menurut saya cukup besar jika dibandingkan dengan mengandalkan search engine dan blogroll.

Cara mendaftar Plipeo.com

1. Siapkan blog sobat yang akan didaftarkan, kemudian sobat kunjungi link berikut ini http://plipeo.com/webmaster/signup
2. Isi data-data sobat pada form pendaftaran, baca petunjunknya terlebih dahulu
3. Pada form Website, sobat isi dengan alamat url blog sobat.
4. Pada form Nama, sobat isi dengan nama sobat.
5. Pada form Email, sobat isi dengan alamat Email sobat.
6. Pada form Trafik Harian, sobat isi nilai sesuai keinginan sobat sebaiknya di sesuaikan dengan jumlah visitor sobat
7. Jika sudah selesai klik tombol Kirim. Pendaftaran akan langsung diterima sebagai member Plipeo.com.
8. Sobat akan langsung dibawa pada halaman untuk kode widget yang akan diletakan pada blog sobat. Tampilan Widget dapat sobat sesuaikan atau dimodifikasi.
9. Copy code widget pada blog sobat
10. Selelah code terpasang diblog sobat sekarang sobat klik tab menu Tambah Postingan Anda
11. Sobat isi form url artikel sobat, judul postingan sobat, deskripsi, tag, kategori artikel sobat, lalu url gambar sobat. usahakan postingan semenarik mungkin dan berbeda dengan postingan sobat sebelumnya
12. Jika semua sudah dilaksanakan, team Plipeo akan mereview postingan sobat. dan tunggu hasilnya

Hanya itu saja yang dapat saya jelaskan, mudah-mudahan dapat memberikan manfaat. Jika sobat ingin memberika saran silahkan tulis komentar sobat.

Read More

Cara Membuat Widget Related Posts Di Blogspot

Kingarif86.blogspot.com - Pada tulisan ini akan share tentang tutorial cara membuat related post sebagai widget. Membuat related post dengan widget ini bukan hanya untuk pengguna blog berplatform wordpress saja. Sekarang ini, pengguna blog berplatform Blogspot pun bisa membuat related post tampil di sidebar blogspot, memang jaman sudah canggih sob apa ja bisa dibuat. Tidak Seperti  halnya WordPress yang mempunyai Tag dan Category yang bisa digunakan sebagai acuan untuk related post, pada blogspot hal ini menggunakan pemanfaatan dari Label saat kita update posting. Related Post akan menunjukkan/mencari posting mana saja yang dianggapnya mempunyai label sama.

Kebanyakan basa-basinya nech....(hehehe). Mari kita langsung saja bahas tutorial Cara Membuat Related Post Widget di Blogspot

Sebelum mulai sebaiknya sobat lihat dulu contonya disini
1. Tentunya sobat Login dulu ke akun blogger sobat, kalau tidak login ya tidak bisa jadi dunk tutorialnya...hehehe

2. Klik Rancangan/Layout kemudian sobat masuk ke Edit HTML

Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.

3. Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> atau diatasnya seperti contah dibawah ini:

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

4. Kemudian sobat cari kode widget dibawah ini : 

<b:if cond='data:post.labels'><data:postLabelsLabel/><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>

5. Jika sobat sudah ketemu kode diatas, tambahkan kode yang bercetak tebal seperti contoh dibawah ini :

<b:if cond='data:post.labels'><data:postLabelsLabel/><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/></b:if></b:loop></b:if>

Catatan : kode yang berwarna merah adalah jumlah maxsimal postingan atau related posts yang akan ditanyangkan, sobat bisa ganti kode tersebut sesuai pilihan sobat

6. Kemudian Sobat klik Save Template

7. Selanjutnya sobat klik Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste kode di bawah ini pada kotak yang tersedia

<script type="text/javascript">removeRelatedDuplicates();printRelatedLabels();</script>

8. Sekarang sobat kembali lagi ke Layout/Rancangan - Edit HTML, jangan sobat centang/tandai/aktifkan Expand Widget Templates agar bisa mengedit template secara keseluruhan, kemudian  cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini yang berwana merah sepeti contoh dibawah ini :

<b:widget id='HTML13' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

9. Jika sudah sobat klik Save Template, kemudian sobat lihat hasilnya

Jika sobat berhasil tinggalkan komentar sobat disini. Akhir kata saya mengucapkan selamat mencoba.

Read More