Search
24 C
en-GB
  • Home
  • About
  • Contact
  • Privacy
  • Sign in
Desainweb.my.id
  • Home
  • News
    • All
    • LifeStyle
    • Sosial Media
    • Woman
    • Keuangan
  • Videos
    • VideoS
  • Products
  • Tutorial
  • Parse HTML
  • Kamus HTML
  • More Menu
    • Home
    • About Us
    • Contact Us
    • Privacy Policy
    • TOS
    • CSS Minifier
    • Kamus HTMLNew
    • Parse HTMLNew
Desainweb.my.id
Search
Home Tutorial Cara Menambahkan Peta Situs Di Blogspot
Tutorial

Cara Menambahkan Peta Situs Di Blogspot

step by step cara mudah memasang sitemap sederhana pada blogger maupun blogspot.
Reyvan Mustofa
Reyvan Mustofa
19 Jul, 2020 0 0
Facebook
Twitter
Telegram
WhatsApp
Cara Menambahkan Peta Situs Di Blogspot

DESAINWEB.MY.ID - Sitemap adalah hal terpenting yang harus ditambahkan oleh setiap blogger di blognya. Ini bukan hanya halaman tetapi banyak membantu untuk mengurangi rasio pentalan segera dengan menyediakan navigasi langsung ke label pos tertentu.

Widget sitemap yang akan kita tambahkan hari ini menunjukkan daftar artikel tentang urutan terbaru yang diterbitkan di bawah setiap kategori, Widget ini didasarkan pada ajax sehingga akan memuat dengan sangat cepat dan tidak akan mempengaruhi kinerja blog Anda.

Mari kita melangkah lebih jauh dan lihat Cara Menambahkan sitemap di blogspot.com. Anda dapat memeriksa pratinjau langsung widget Kotak Penulis dengan mengklik tombol di bawah ini. apakah anda siap untuk memulainya, mari kita coba memulai dari Langkah pertama yaitu (Menambahkan CSS)


Sebelum Mengedit kami menyarankan Anda untuk membuat cadangan template blogspot Anda, sehingga jika ada masalah Anda masih memiliki desainblog pertama anda.

Hal pertama yang perlu Anda lakukan adalah masuk ke akun Blogger Anda dan pergi ke >> Template >> Edit HTML dan cari akhirnya ]]> tag dan tepat di atasnya tempel kode berikut.

/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */
.mapasite {
margin-bottom: 10px;
background-color: #F8F8F8
}
.mapasite.active .mapa {
display: block
}
.mapasite .mapa {
display: none
}
.mapasite h2 {
background-color: #EEE;
color: #000;
font-size: 15px;
padding: 10px 20px;
border-radius: 2px;
margin-bottom: 0;
cursor: pointer;
font-weight: 700
}
.mapasite h2 .botao {
font-size: 18px;
line-height: 1.2em
}
.botao .fa-minus-circle {
color: #f30
}
.mapapost {
overflow: hidden;
margin-bottom: 20px;
height: 70px;
background-color: #FFF
}
.mapa {
padding: 40px
}
.map-thumb {
background-color: #F0F0F0;
padding: 10px;
display: block;
width: 65px;
height: 50px;
float: left
}
.map-img {
width: 65px;
height: 50px;
overflow: hidden;
border-radius: 2px
}
.map-thumb a {
width: 100%;
height: 100%;
display: block;
transition: all .3s ease-out!important;
-webkit-transition: all .3s ease-out!important;
-moz-transition: all .3s ease-out!important;
-o-transition: all .3s ease-out!important
}
.map-thumb a:hover {
-webkit-transform: scale(1.1) rotate(-1.5deg)!important;
-moz-transform: scale(1.1) rotate(-1.5deg)!important;
transform: scale(1.1) rotate(-1.5deg)!important;
transition: all .3s ease-out!important;
-webkit-transition: all .3s ease-out!important;
-moz-transition: all .3s ease-out!important;
-o-transition: all .3s ease-out!important
}
.mapapost .wrp-titulo {
padding-top: 10px;
font-weight: 700;
font-size: 14px;
line-height: 1.3em;
padding-left: 25px;
padding-right: 10px;
display: block;
overflow: hidden;
margin-bottom: 5px
}
.mapapost .wrp-titulo a {

}
.mapapost .wrp-titulo a:hover {
color: #f30;
text-decoration: underline
}
.map-meta {
display: block;
float: left;
overflow: hidden;
padding-left: 25px;
}
.mapasite h2 .botao {
float: right
}

Menambhakan Script HTML

Langkah Kedua Yaitu ( Menambhakan Script HTML ) 

Sekarang ini adalah bagian terpenting dari tutorial dan Anda harus melakukannya dengan sangat hati-hati. Di templat, cari </body> tag  dan tepat di atasnya tempel Kode HTML berikut.



<script type='text/javascript'>
//<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9D6EutP1e5QcSD772jjknWhbAMW3U-3l_7_yhdAzwxqc0AJtWzoVa4zFf4L6S9WDiRDTowdWVF8DYg90l8YDQsXFlG34-0me0hO1geN4QV7Nw4tiwPihz5-j6EcU0a1aThr2uzHgnufw/s1600-r/nth.png";

var static_page_text = $.trim($('.static_page .post-body').text());
if (static_page_text === "[sitemap]") {
var postbody = $('.static_page .post-body');
$.ajax({
url: "/feeds/posts/default?alt=json-in-script",
type: 'get',
dataType: "jsonp",
success: function(dataZ) {
var blogLabels = [];
for (var t = 0; t < dataZ.feed.category.length; t++) {
blogLabels.push(dataZ.feed.category[t].term)
}
var blogLabels = blogLabels.join('/');
postbody.html('<div class="siteLabel"></div>');
$('.static_page .post-body .siteLabel').text(blogLabels);
var splabel = $(".siteLabel").text().split("/");
var splabels = "";
for (get = 0; get < splabel.length; ++get) {
splabels += "<span>" + splabel[get] + "</span>"
}
$(".siteLabel").html(splabels);
$('.siteLabel span').each(function() {
var mapLabel = $(this);
var mapLabel_text = $(this).text();
$.ajax({
url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl = "";
var htmlcode = '<div class="mapa">';
for (var i = 0; i < data.feed.entry.length; i++) {
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == "alternate") {
posturl = data.feed.entry[i].link[j].href;
break
}
}
var posttitle = data.feed.entry[i].title.$t;
var author = data.feed.entry[i].author[0].name.$t;
var get_date = data.feed.entry[i].published.$t,
year = get_date.substring(0, 4),
month = get_date.substring(5, 7),
day = get_date.substring(8, 10),
date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
var tag = data.feed.entry[i].category[0].term;
var content = data.feed.entry[i].content.$t;
var $content = $('<div>').html(content);
var src2 = data.feed.entry[i].media$thumbnail.url;
htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>'
}
htmlcode += '</div>';
mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>');
$(document).on('click', '.mapasite h2', function() {
$(this).parent('.mapasite').addClass('active');
$(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
});
$(document).on('click', '.mapasite.active h2', function() {
$(this).parent('.mapasite').removeClass('active');
$(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
});
}
});
});
}
});
}
//]]>
</script>

Sekarang Simpan template Anda dan buka halaman untuk menambahkan peta situs.

Note :- widget berfungsi pada jquery sehingga Anda harus menginstal plugin jquery jika Anda belum menginstalnya..

Menambahkan Sitemap Di Halaman Blog

Berikutnya Langkah ketiga ( Menambahkan Sitemap Di Halaman Blog Kita ) - Yang Terpenting !!

Sekarang ini adalah bagian paling penting dari tutorial dan Anda harus melakukannya dengan sangat hati-hati. Pergi ke dasbor blogger Anda > Pages > Add New Page.

Pada konten halaman baru setelah menambahkan judul halaman dan jangan lupa untuk menyembunyikan komentar menggunakan kolom opsi, berikutnya anda tambahkan kode berikut di area konten halaman.

[sitemap]
Untuk lebih jelasnya, lihat dan periksa area gambar yang disorot di bawah ini.


Cara Menambahkan Peta Situs Di Blogspot


Sekarang klik tombol publikasikan dan periksa halaman yang diterbitkan untuk melihat hasil sitemap yang baru kita tambahkan. ;)

Kesimpulan:

Selamat !! Anda telah berhasil. sekarang kamu sudah belajar Cara Menambahkan Peta Situs Di Blogspot

Kunjungi blog Anda dan periksa langsung hasilnya yang mengagumkan, semoga Anda menyukai tutorial ini, jika Anda menikmati monggo di bagikan dengan teman-teman Anda, kami bekerja keras untuk mengembangkan lebih banyak widget keren seperti itu, silahkan beri semangat kepada kami dengan membagikan artikel ini.

Via Tutorial
Facebook
Twitter
Telegram
WhatsApp
Older Posts
Newer Posts Newer Posts
Reyvan Mustofa
Reyvan Mustofa Assalamu'alaikum, Saya adalah seorang blogger newbie
Silahkan hubungi saya jika ada yang mau di pertanyakan. Klik DISINI

You may like these posts

Post a Comment

Popular Post

Desainweb Toko Online Mirip Tiktok

Reyvan Mustofa- 21:17 0
Desainweb Toko Online Mirip Tiktok
Promo Rp390.000 Rp.150.000 Varian Pro Pro Max Desainweb Toko Online Mirip Tiktok Desainweb.my.id menerima Jasa Pembuatan…

Most Popular

Memperbaiki Penolakan Tidak Masuk Akal Pada Google Adsense

Memperbaiki Penolakan Tidak Masuk Akal Pada Google Adsense

23:45
Filters Air Minum Cocok Untuk Keluarga Sehat

Filters Air Minum Cocok Untuk Keluarga Sehat

12:01
Desainweb Toko Online Mirip Tiktok

Desainweb Toko Online Mirip Tiktok

21:17

Category

Adsense Blogger Keuangan News Products Template Tutorial Videos

Editor Post

Desainweb Toko Online Murah Indonesia

Desainweb Toko Online Murah Indonesia

19:34
VioMagz v.4.6.0 Template Blogger Premium

VioMagz v.4.6.0 Template Blogger Premium

01:00
Desainweb Toko Online Mirip Tiktok

Desainweb Toko Online Mirip Tiktok

21:17

Popular Post

Memperbaiki Penolakan Tidak Masuk Akal Pada Google Adsense

Memperbaiki Penolakan Tidak Masuk Akal Pada Google Adsense

23:45
Filters Air Minum Cocok Untuk Keluarga Sehat

Filters Air Minum Cocok Untuk Keluarga Sehat

12:01
Desainweb Toko Online Mirip Tiktok

Desainweb Toko Online Mirip Tiktok

21:17

Populart Categoris

  • Adsense3
  • Keuangan1
  • News3
  • Products14
  • Template1
  • Tutorial25
  • Videos2
Desainweb.my.id

About Us

Jasa Pembuatan Website Company Profile , Web Sekolah, Toko Online, Aplikasi, Android, IOS, Desain Undangan, Baleho, Neon BOX,

Follow Us

© 2020 Desainweb.my.id
  • Disclaimer
  • Privacy
  • Advertisement
  • Contact Us