√ Sitemap SEO di Blogger atau Blogspot - IDETIPS.com

Sitemap SEO di Blogger atau Blogspot

Daftar Isi

    how to : cara membuat Sitemap SEO di Blogger atau Blogspot 2019
    Cara membuat Sitemap di blogger - Salah satu komponen yang sangat penting dalam website adalah sitemap , sitemap memberikan informasi kepada pengunjung untuk mengetahui semua isi artikel atau post yang ada pada website tersebut , selain itu digunakan juga untuk di submit ke webmaster tool , kali ini idetips mau berbagi code dan tutorial membuat sitemap yang responsive dan seo di blog yang terbaru di 2019.

    sitemap ini akan menampilkan judul postingan berdasarkan label yang blog teman-teman punya , tidak susah untuk memasang sitemap di blogger anda hanya perlu memasukkan codenya pada halaman statis .

    Cara membuat Sitemap SEO dan Responsive ( Fast Loading )

    ada dua bentuk sitemap yang akan dibagikan oleh idetips yang jelas keduanya responsive , seo , dan juga keren . anda bisa memilih salah satu dan menggunakannya di blog anda .

    Example : Sitemap 1

    how to : Cara membuat sitemap responsive dan seo di blog 2019


    <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: #3498DB;
    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{text-transform:uppercase;}
    .new{color:#FF5F00;font-weight:bold;font-style:italic;}
    .postname{font-weight:normal;background:#fff;margin-left: 35px;}
    .postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
    </style>
    <div id="toc">
    <script src="https://rawcdn.githack.com/idetips/idetipsdotcom/10123b62603ab6906b01f69cc2e879fd71d48f7d/idetips-sitemap.js" type="text/javascript"></script>
    <script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script></div>

    Example : Sitemap 2

    How to  : Cara membuat sitemap di blogger seo dan responsive 2019


    <style type="text/css">
    .tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
    position:relative;color:#333;border: 1px solid #9C9C9C;}
    .tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
    color:white;}
    .tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
    .tabbed-toc .toc-tabs {width:20%;float:left;}
    .tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
    padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
    .tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
    .tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
    z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
    .tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
    .tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
    .tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
    .tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
    text-decoration:none;outline:none;overflow:hidden;}
    .tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
    .tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
    border-bottom:4px solid #275827;overflow:hidden;}
    .tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
    width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
    .tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
    .tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
    background-color:#333;color:white;outline:none;}
    .tabbed-toc .panel li.bold a:hover,
    .tabbed-toc .panel li.bold a:hover time {background-color:#222}
    .post ol li::before {content: none;}
    .post ol li {margin:0;}
    @media (max-width:700px) {
    .tabbed-toc {border:2px solid #333}
    .tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
    .tabbed-toc .toc-tabs li {display:inline;float:left;}
    .tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
    .tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
    .tabbed-toc .toc-content {border:none}
    .tabbed-toc .toc-line,
    .tabbed-toc .panel li time {display:none}
    .tabbed-toc .panel li a{height: auto;}
    </style>
    <div class="tabbed-toc" id="tabbed-toc">
    <span class="loading">Memuat…</span></div>
    <script>
    var tabbedTOC = {
    blogUrl: "/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
    "Januari",
    "Februari",
    "Maret",
    "April",
    "Mei",
    "Juni",
    "Juli",
    "Agustus",
    "September",
    "Oktober",
    "November",
    "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
    };
    </script>
    <script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>


    Cara pemasangan Sitemap pada blog

    anda bisa memilih salah satu code sitemap diatas , lalu ambil semua codenya dan copy .

    1. Silahkan login ke blogger.com
    2. kemudian pilih "Halaman" dan klik "Halaman Baru" .
      cara membuat sitemap 2019
    3. isi judul sesuai keinginan anda (contoh : sitemap atau daftar isi ) .
    4. silahkan masukkan code sitemap yang diatas tadi (copy dan paste) pada mode "HTML" .
      How to make sitemap seo and responsive on blogger 2019
    5. terakhir 'Publikasikan' .

    note : pastikan anda paste atau meletakkan code tersebut pada mode HTML (lihat gambar langkah 4) .

    anda bisa lihat hasilnya , sekarang blog anda sudah memiliki sitemap yang bagus , anda bisa costum sendiri style atau css-nya . sangat mudah bukan membuat sitemapnya ? jadi sekian dulu untuk tutorial kali ini . jika ada yang error atau kurang paham silahkan komentar ini adalah contoh dari BROKEN LINK
    Tambahkan CommentarHide

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel