Sitemap adalah hal terpenting yang harus ditambahkan oleh setiap blogger di blognya. Ini bukan hanya sebuah halaman tetapi banyak membantu untuk segera mengurangi rasio pentalan dengan menyediakan navigasi langsung ke label pos tertentu. Widget peta situs yang akan kita tambahkan hari ini menampilkan daftar artikel pada urutan terbaru yang diterbitkan di bawah setiap kategori, widget ini didasarkan pada ajax sehingga akan memuat sangat cepat dan tidak akan mempengaruhi kinerja blog Anda.
Mari melangkah lebih jauh dan lihat Cara Menambahkan Widget Peta Situs Di Blogspot Blogspot . Anda dapat memeriksa pratinjau langsung widget Kotak Penulis dengan mengklik tombol di bawah ini.
Mari Mulai Langkah-1 ( Adding CSS )
Sebelum Mengedit, kami menyarankan Anda untuk membuat cadangan template Anda, sehingga jika terjadi kesalahan, Anda masih memiliki desain blog yang aman.
Hal pertama yang perlu Anda lakukan adalah masuk ke akun Blogger Anda dan pergi ke >> Templates >> Edit HTML dan cari akhiran ]]></b:skin> dan tepat di atasnya rekatkan kode berikut..
/* ######## Navigation Menu Css by icm24.blogspot.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
}
Step-2 ( Adding HTML Script )
Sekarang ini adalah bagian paling penting dari tutorial dan Anda harus melakukannya dengan sangat hati-hati. Di template, cari </body> tag dan tepat di atasnya tempelkan 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/AVvXsEiOtNX17uACgC1TtXDF_6JY4MVofKzfIjf2EpM7Gn9miLalISfBeWe42I4TgniOeehkjCxaeLii2ehF0jlw_DI1tRUbYd0cS0FrL3jM7KEm7LGiKvqbiyVsdQmyC3Wnk5XCefkdB6iJT20/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.
Catatan :- widget berfungsi di jquery sehingga Anda harus menginstal plugin jquery jika Anda belum menginstalnya...
Langkah-3 ( Menambahkan Peta Situs Di Halaman ) - Paling Penting!!
Sekarang ini adalah bagian terpenting dari tutorial dan Anda harus melakukannya dengan sangat hati-hati. Buka dasbor blogger Anda > Pages > Tambahkan Halaman Baru.
Pada konten halaman baru setelah menambahkan judul halaman dan menyembunyikan komentar menggunakan opsi, tambahkan kode berikut di area konten halaman.
Pada konten halaman baru setelah menambahkan judul halaman dan menyembunyikan komentar menggunakan opsi, tambahkan kode berikut di area konten halaman.
[sitemap]Untuk pemahaman yang lebih baik, periksa area yang disorot pada gambar di bawah ini.
Sekarang klik tombol terbitkan dan periksa halaman yang diterbitkan untuk melihat widget peta situs yang baru ditambahkan. ;)
Kesimpulan
Selamat !! Anda telah berhasil. sekarang Anda telah belajar bahwa Cara Menambahkan Peta Situs Di Blogspot Dengan Mudah. Kunjungi blog Anda dan periksa widget live in action yang mengagumkan, semoga Anda menyukai tutorial ini, jika Anda menikmatinya, silakan bagikan dengan teman-teman Anda, kami bekerja keras untuk mengembangkan lebih banyak widget keren seperti itu, harap tetap bersama Kami..
0 Komentar