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 bergerak lebih jauh dan lihat Cara Menambahkan Widget Peta Situs Di Blogspot Blog . Anda dapat memeriksa pratinjau langsung widget Kotak Penulis dengan mengklik tombol di bawah ini.
Ayo Mulai Langkah-1 ( Menambahkan CSS )
Sebelum Mengedit kami menyarankan Anda untuk membuat cadangan dari template Anda, sehingga ada masalah Anda masih memiliki desain blog Anda yang aman.
Hal pertama yang perlu Anda lakukan adalah masuk ke akun Blogger Anda dan pergi ke >> Template >> Edit HTML dan cari akhirnya ]]> tag </ b: skin> 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
}
Langkah-2 ( Menambahkan Script HTML )
Sekarang ini adalah bagian terpenting dari tutorial dan Anda harus melakukannya dengan sangat hati-hati. Di templat, cari tag </body> 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/AVvXsEh27Mm1FLWd0KUN_Mp7sNg_m7sQ9tfU9_KVqLnkZOI3mKnGGn-_ZKYx0bOddP6zv3sEqabUQ_3ED7FWmNCVpRg6LRVAAGydBB-G_coHW3CUtHdyxSHkIvHuEQe4hfVXhjll6RXIrPv0OK0/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 sitemap.
Catatan : - widget berfungsi di jquery sehingga Anda harus menginstal plugin jquery jika Anda belum menginstalnya ..
Langkah-3 ( Menambahkan Peta Situs Dalam Halaman ) - Paling Penting !!
Sekarang ini adalah bagian paling penting dari tutorial dan Anda harus melakukannya dengan sangat hati-hati. Pergi ke dashboard blogger Anda> Halaman> Tambahkan Halaman Baru.
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 publikasikan dan periksa halaman yang diterbitkan untuk melihat widget sitemap yang baru ditambahkan. ;)
Kesimpulan
Selamat !! Anda telah berhasil. sekarang Anda telah belajar bahwa Cara Menambahkan Widget Peta Situs Di Blogspot Blog . Kunjungi blog Anda dan periksa langsung widget yang luar biasa ini, berharap Anda menyukai tutorial ini, jika Anda menikmati tutorial ini silakan bagikan dengan teman-teman Anda, kami sedang bekerja keras untuk mengembangkan lebih banyak widget yang luar biasa seperti itu, silakan tetap bersama kami. Selamat tinggal !! (Selamat tinggal dalam bahasa Inggris !! hahaha).
Tidak ada komentar:
Posting Komentar