Cara Membuat Sitemap/Daftar Isi Blog

Cara Membuat Sitemap Daftar Isi Blogger otomatis keren simple responsive dengan javascript.

1. Cara Membuat Sitemap/Daftar Isi Blog (seluruh isi postingan)
2. Cara Membuat Sitemap/Daftar Isi Blog Berdasarkan label, topik/kategori tertentu
3. Cara Membuat Sitemap/Daftar Isi Blog(dengan frame dan background image)
4. Cara Membuat Sitemap/Daftar Isi Blog(dengan frame scroll)


Halo sobat blogger kali ini carasingkat akan memberikan tutorial blog khusus mengenai cara membuat sitemap atau daftar isi sebuah blog.

Ada 4 point atau model tentang cara membuat sitemap/daftar isi blog, semuanya sekaligus akan saya bahas satu persatu, untuk itu ikui pandan dan langkahnya dengan benar dan jangan sampai k etinggalan agar trik ini work 100%

Daftar isi atau yang sering disebut sitemap, merupakan sebuah panel widget yang biasanya dipasang pada sebuah halaman website. Fungsi widget daftar isi sebenarnya hanya memudahkan pengunjung untuk mengetahui apa saja isi yang terdapat didalam blog. hal ini tentunya sangat membantu pengunjung dalam mencari artikel tertentu.

Sama halnya seperti membuat daftar isi pada suatu halaman makalah atau buku , tentu pasti anda juga sudah tau fungsinya untuk apa, nah didalam blog kita juga bisa membuat daftar isi layaknya seperti sebuah buku. sebenarnya pembuatan sitemap sendiri sangatlah mudah, kta hanya perlu menerapkan beberapa kode dengan benar di blog.

Beberapa referensi yang saya cari di google banyak sekali yang menyediakan artikel tentang cara membuat daftar isi atau sitemap pada suatu blog, namun setelah mencobanya satu persatu walhasil tidak ada yang work alias jalan sesuai keinginan.

Untuk itu saya memutuskan untuk memodif beberapa script yang tidak work tersebut sehingga mendapatkan hasil yang diinginkan, kali ini daftar isi/ sitemap yang saya bagikan lengkap untuk membuat seluruh daftar isi yang tertera di blog. bahkan tidak ada satupun yang ketinggalan.

contoh screen shot hasil pembuatan sitemap/daftar isi nya berikut ini :

Sitemap diatas lengkap menampilkan seluruh label dan kategori yang ada pada blog, bahkan postingan yang baru dipost akan dibuat daftar isi nya sebagai bacaan yang terhangat hot/new.
Nah penasaran untuk bagaimana cara pembuatanya silahkan simak langkah dan caranya berikut ini dengan seksama.

---

#Model 1

Cara Membuat Sitemap/Daftar Isi Blog(seluruh isi postingan)

Untuk membuat sitemap/daftar isi anda bisa langsung membuatnya dihalaman blogger 

1. Silahkan login kedashboard blogger anda

2. Lalu pilih menu halaman >> buat halaman baru

3. Ketikan judul halaman anda lalu pilih menu mode HTML

4. Langkah selanjutnya silahkan paste script berikut ini

<div dir="carasingkat" style="text-align: justify;" trbidi="on">
<script style="text/javascript" src="https://cdn.rawgit.com/mohammadkahfi/SoloLinks/f9f8ca32/daftarisi.js"></script><script src="http://www.carasingkat.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>     
</div>

5. Lalu simpan Dan Publish

Catatan :
Silahkan ganti URL tulisan merah dengan URL blog anda, ingat jika blog anda mengaktifkan https, maka rubah url http pada tulisan merah dengan https

Diatas merupakan cara membuat daftar isi kesluruhan blog anda lalu bagaimanakah jika anda ingin membuat sitemap atau daftar isi hanya berdasarkan label atau kategori tertentu ??mari kita masuk ke model yang kedua

---

#Model 2

Cara Membuat Sitemap/Daftar Isi Blog(berdasarkan label,topik/kategori tertentu)

Nah jika anda ingin sekali menampilkan sitemap/daftar isi untuk pembuatan sitemap dengan label atau kategori tertentu seperti gambar diatas.membuatnya sama seperti langkah diatas hanya saja berbeda beberapa script/codingnya. oke silahkan lansung saja ikuti langkahnya berikut ini :

1. Silahkan login kedashboard blogger anda

2. Lalu pilih menu halaman >> buat halaman baru
3. pilih menu mode HTML dan isikan judul halaman anda
4. lalu pastekan script dibawah ini

<script src="https://cdn.rawgit.com/mohammadkahfi/SoloLinks/790c7e1c/label.js"></script>
<br />
<h3>
TIPS</h3>
<ul>
<script src="http://carasingkat.com/feeds/posts/default/-/Tips?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999"></script></ul>
<br />

Catatan :Silahkan ganti URL tulisan merah dengan URL blog anda, Silahkan ganti nama TIPS dengan Nama LAbel ANDA.ingat jika blog anda mengaktifkan https, maka rubah url http pada tulisan merah dengan https, jika anda ingin menambahkan 1 label lagi silahkan copy dari tag <h3>sampai tag <br/>, lalu ganti dengan label yang ingin anda masukan

---

#Model 3

Cara Membuat Sitemap/Daftar Isi Blog(dengan frame dan background image)

Nah jika anda ingin sekali membuat sitemap / daftar isi dengan kreasi background gambar dan beberapa frame color silahkan anda berksperimen dengan script berikut :

<div style="background-image: url(https://mmls.mmu.edu.my/wordpress/1141123847/wp-content/uploads/sites/28924/2016/02/Light-Texture-Brown-Wood-HD-Wallpaper1-1024x640.jpg); border: 1px solid #999999; height: 100%; overflow: auto; padding: 10px; width: 100%px;">
<script src="https://cdn.rawgit.com/mohammadkahfi/SoloLinks/f9f8ca32/daftarisi.js"></script><script src="http://carasingkat.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Catatan :Silahka ganti URL tulisan biru, dengan url gambar anda. Silahkan ganti URL tulisan merah dengan URL blog anda, ingat jika blog anda mengaktifkan https, maka rubah url http pada tulisan merah dengan https

---

#Model 4

Cara Membuat Sitemap/Daftar Isi Blog(dengan frame scroll)

Untuk yang model nomor 4 ini anda dapat mengkreasikannya dengan frame scroll , nah untuk pembuatannya sama dengan cara diatas dan tentunya dapat andamodif scriptnya sesuai keinginan ada berikut kodenya

<div style="background-color: #f9f9f9; border: 1px solid #999999; height: 200px; overflow: auto; padding: 10px; width: 100%px;">
<script src="https://cdn.rawgit.com/mohammadkahfi/SoloLinks/f9f8ca32/daftarisi.js"></script><script src="http://carasingkat.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Semua kode diatas dapat anda modifikasi sesuai keinginan. sampai sini dulu perjumpaan kita kali ini Demikian lah tutorial mengenai cara Membuat Sitemap/Daftar Isi Blogger semoga informasi ini dapat bermanfaat.

Cara Membuat Redirect/Pengalihan Link Dengan Javascript

Cara Membuat Redirect/Pengalihan Link URL otomatis Dengan Html css dan Javascript Dengan countdown timer hitungan waktu mundur. Cara mengalihkan halaman Website atau Blog Ke halaman lain. Halo sobat blogger kali ini admin akan membahas mengenai cara mengalihkan URL/link suatu website kepada halaman yang kita inginkan. Nah sebenarnya untuk membuat redirect suatu link dapat dilakukan dengan javascript pembuatannya juga sangat mudah sekali. Bahkan dengan script yang nanti akan saya bagikan bisa anda modifikasi sesuai keinginan anda .

Banyak sekali bahasa pemrograman yang bisa membuat redirect suatu link. salah satunya ialah menggunakan javasript. kenapa kali ini admin hanya membagikan dengan javascript karna pengunaannya sangat mudah sekali dan juga bisa kita buat di platform blogger gratisan. Pembuatan redirect link sendiri bisa kita kreasikan dengan mengunakan waktu. JAdi maksudnya kita bisa mengeksekusi suatu link dengan waktu yang ditentukan sebelum pada akhirnya halaman tersebut akan teralihkan kehalaman lainnya.

Contohnya seperti gambar berikut ini :

Script diatas saya letakan tepat didalam HTML blogger anda juga bisa mengkreasikannya didalam postingan ataupun ditempat temat lainnya yang anda inginkanNah untuk pembuatannya sangat mudah kita hanya perlu meletakan script dibawah ini kehalaman yang ingin anda buat redirect linknya

Untuk Demonya anda bisa lihat pada Link Berikut :

DEMO

Cara Membuat Redirect/Pengalihan LinkURL Otomatis Dengan Javascript

Oke sekarang kita akan masuk kepada proses pembuatannya, anda bisa meletakan script berikut di area postingan blog ataupun di html blog anda.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            var url = "http://redirectkeylink.blogspot.co.id/"; // url tujuan
            var count = 10; // dalam detik
            function countDown() {
                if (count > 0) {
                    count--;
                    var waktu = count + 1;
                    $('#kata').html('<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ' + url + ' dalam ' + waktu + ' detik.');
                    setTimeout("countDown()", 1000);
                } else {
                    window.location.href = url;
                }
            }
            countDown();
        </script>
<html>
<head>
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<center>
<body>
<b>please disable adblock and active javasript to acess this page... if you use ucbrowser or operamini change it to default browser, because that browser disable javascript function.</b>
<br />
<center style="color: red;">
if you not redirected to download page click <a href="http://redirectkeylink.blogspot.co.id/"><b>HERE</b></a>
<br />
<div class="loader">
</div>
</center>
</body>
</center>
</html>

Catatan :
Ganti : https://redirectkeylink.blogspot.co.id/ dengan link yang anda punya
Ganti : var count = 10 dengan waktu pengalihan yang anda inginkan
Ganti : Tulisan Biru dengan kata kata anda

anda bisa memodifikasi kode diatas dengan kode anda sendiri. Demikianlah tutorial admin mengenai Cara Membuat Redirect/Pengalihan Link Dengan Javascript. semoga informasi ini dapat membantu :D

Cara Membuat Countdown Timer Dengan JavaScript

Cara Membuat Countdown Timer Dengan JavaScript ~ Cara membuat countdown timer link download hitungan mundur. Cara Membuat Countdown Timer Dengan redirect link kehalaman tertentu. Halo sobat blogger kali ini cara singkat akan membahas mengenai 3 judul sekaligus dengan topik membuat javascript coundown timer. Sebenarnya apasih tujuan orang membuat count down timer ? mari kita bahas

Fungsi Countdown Timer

Sebenarnya Fungsi dari countdown timer sendiri sangat banyak sekali,  sesuai dengan kata countdown yang berarti hitungan mundur adalah memberikan jeda waktu sampai batas waktu yang ditentukan berakhir. dan kemudian dilanjutkan dengan fungsi utamanya bisa mengalihkan link atau memunculkan link, atau membuat sebuah jam, atau bisa juga menjadi stopwatch atau fungsi lain seperti hitungan waktu.

mungkin anda pernah melihat sebuah link downlad yang sebelumnya ada muncul detik hitungan mundur yang pada saat habis maka muncul tombol buton link yang menuju kearah link yang sebenarnya. atau mungkin anda juga pernah melihat waktu jam atau detik didalam sebuah blog atau pun stopwatch timer pada sebuah blog.

Sebenarnya pembuatan Countdown timer bisa dilakukan dengan berbagai macam bahasa yan mendukung seperti HTML, PHP, Phyton Maupun Javascript. pada kesempatan kali ini admin akan membahas tentang pembuatannya melalui jaavascript. Kenapa ?? karna bisa diterapkan dimana saja, serta pembuatan dan pengujian nya juga tidak terlalu sulit. selain itu juga bisa support di platform manapun dan bisa diletakan di web maupun di blog anda.. Lalu sebenarnya bagaimanakah pembuatannya apakah sangat sulit sekali ? Jawabannya Tidak malah dalam membuat countdown timer dengan javascript sangatlah mudah sekali.

Penasaran dengan bagaimana cara pembuatannya ?? mari simak langkahnya berikut ini :

Kode ini bisa anda terapkan dimana saja dipostingan blogger atau dihalaman page web atau blog

#1. Cara Membuat Countdown Timer Dengan JavaScript (Hari,Jam,Menit, Detik )

<!-- countdown timer carasingkat.com  -->
<p id="carasingkat"></p>

<script>
// Silahkan anda atur tanggal anda
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

// Hitungan Mundur Waktu Dilakukan Setiap Satu Detik
var x = setInterval(function() {

  // Mendapatkan Tanggal dan waktu Pada Hari ini 
  var now = new Date().getTime();

  //Jarak Waktu Antara Hitungan Mundur
  var distance = countDownDate - now;

  // Perhitungan waktu hari, jam, menit dan detik
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Tampilkan hasilnya di elemen id = "carasingkat"
  document.getElementById("carasingkat").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // Jika hitungan mundur selesai,
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("Carasingkat").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

DEMO

#2. Cara Membuat Countdown Timer Dengan JavaScript (Redirect/Pengalihan Link )

<html>
    <head>
        <title>cara singkat</title>
    </head>
    <body>
        <div id="carasingkat">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            var url = "http://jagoankode.blogspot.co.id/search/label/Article"; // url tujuan
            var count = 10; // dalam detik
            function countDown() {
                if (count > 0) {
                    count--;
                    var waktu = count + 1;
                    $('#carasingkat').html('<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ' + url + ' dalam ' + waktu + ' detik.');
                    setTimeout("countDown()", 1000);
                } else {
                    window.location.href = url;
                }
            }
            countDown();
        </script>
    </body>
</html>

DEMO

#3. Cara Membuat Countdown Timer Dengan JavaScript (Waktu yang tersisa/Waktu tunggu )

HTML

<html>

<body>
  <div>Time left = <span id="timer"></span></div>

</body>

</html>

CSS

body{
  background-color:#2D3047;
}

div{
  background-color:#419D78;
  color:#EFD0CA;
  font-size:20px;
  text-align:center;
}

JAVASCRIPT

document.getElementById('timer').innerHTML =
  03 + ":" + 00;
startTimer();

function startTimer() {
  var presentTime = document.getElementById('timer').innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  var m = timeArray[0];
  var s = checkSecond((timeArray[1] - 1));
  if(s==59){m=m-1}
  //if(m<0){alert('timer completed')}

  document.getElementById('timer').innerHTML =
    m + ":" + s;
  setTimeout(startTimer, 1000);
}

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
  if (sec < 0) {sec = "59"};
  return sec;
}

DEMO

Demikianlah tutorial kali ini mengenai Cara Membuat Countdown Timer Dengan JavaScript Semoga informasi ini apat membantu anda :D