Home Design and Ideas

Tampilkan postingan dengan label Tips trik blogger. Tampilkan semua postingan

Berikut kita ada buat tampilan daftar isi dengan versi/tampilan yang berbeda

pada prinsipnya sama dengan daftar isi pada posting Daftar Isi sebelumnya, cuma beda tampilan agar lebih variatif dan fresh.

Membuat Daftar Isi atau SiteMap yang menampilkan isi Blog/Website bisa menjadi salah satu alternatif yang bisa dipakai

.
Caranya cukup mudah dan sederhana.

Ikuti Langkah Berikut :

Masuk ke Menu utama blogger
Klik Page (halaman baru) atau Post (Posting baru)
Klik Add Newpage atau NewPost
Buatlah Posting baru dengan judul "Daftar Isi"
Klik pada tampilan "HTML View"
Copy and paste kode dibawah ini

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {}
ol li{list-style-type:decimal;line-height:25px;}
</style><br />
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postLabels=new Array();var postRecent=new Array();function sitemaplabel(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postUrl[ii]=j;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var c="Category";var j="";if(postFilter!=""){j="Click to view all"};if(l==postTitle.length)var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">Baru!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}};
//]]>
</script><br />
<script src="https://www.hdesignideas.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=sitemaplabel"></script>

Simpan dan lihat hasilnya.

Keterangan :

cari kode "https://www.hdesignideas.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=sitemaplabel" ganti dengan alamat blog anda.
Simpan dan lihat hasilnnya.

Hasil tampilan yang muncul adalah sebagai berikut :

Hasilnya sama dengan daftar isi yang ada diblog saya, klik di sini "SITEMAP"

SELAMAT MENCOBA......

SEMOGA BERMANFAAT.................

Menampilkan isi blog/website merupakan cara agar pembaca/pengunjung bisa dengan mudah untuk mendapat informasi yang diinginkan, selain juga untuk memperkenalkan isi dari blog/website kita.

Membuat Daftar Isi atau SiteMap yang menampilkan isi Blog/Website bisa menjadi salah satu alternatif yang bisa dipakai

.
Caranya cukup mudah dan sederhana.

Ikuti Langkah Berikut :

Masuk ke Menu utama blogger
Klik Page (halaman baru) atau Post (Posting baru)
Klik Add Newpage atau NewPost
Buatlah Posting baru dengan judul "Daftar Isi"
Klik pada tampilan "HTML View"
Copy and paste kode dibawah ini

<div id="table-outer"><table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher"><input type="text" /></form></td></tr>
</tbody></table></div><header id="resultDesc"></header><br />
<ul id="feedContainer"></ul><div id="feedNav">Loading...</div><script type="text/javascript">
/**
* Advanced Blogger TOC Script by Taufik Nurrohman
* URL: https://plus.google.com/108949996304093815163/about
*/
var tocConfig = {
url: "",
feedNum: 6,
labelName: (window.location.hash && window.location.hash != "#0" && window.location.hash != "#search") ? encodeURIComponent(window.location.hash.substr(1)) : false,
numChars: 140,
thumbWidth: 0,
navText: "Load More ▼",
frontText: "Top &uArr;",
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
loading: "<span>Loading...</span>",
searching: "<span>Searching...</span>",
MonthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"],
noResult: "No Result"
};

function getID(b) {
return document.getElementById(b)
}
var head = document.getElementsByTagName("head")[0],
tocContainer = getID("feedContainer"),
feedNav = getID("feedNav"),
orderByer = getID("orderFeedBy"),
labelSorter = getID("labelSorter"),
input = getID("postSearcher").getElementsByTagName("input")[0],
resultDesc = getID("resultDesc"),
nextPage, feedArchive, startPage = 0;

function cropFeed(d, c) {
var f = d.split("<");
for (var e = 0; e < f.length; e++) {
if (f[e].indexOf(">") != -1) {
f[e] = f[e].substring(f[e].indexOf(">") + 1, f[e].length)
}
}
f = f.join(" ");
f = f.substring(0, c - 1);
return f
}
function showLabels(c) {
var a = c.feed.category,
d = "";
d = "<select id='labelSorter' onchange='changeSort(this.value);'>";
d += "<option value='' selected>CATEGORY...</option>";
for (var b = 0; b < a.length; b++) {
d += "<option value='" + decodeURIComponent(a[b].term) + "'>" + a[b].term.toUpperCase() + "</option>"
}
d += "</select>";
labelSorter.innerHTML = d
}
function showFeedList(t) {
var m = t.feed.entry,
o, s, n, h, e, u, g, p, r, q, c = "";
if (typeof (t.feed.entry) !== "undefined") {
for (var f = 0; f < tocConfig.feedNum; f++) {
o = (m) ? m[f] : "", nextPage = "";
if (f == t.feed.entry.length) {
break
}
s = o.title.$t;
for (var d = 0; d < o.link.length; d++) {
if (o.link[d].rel == "alternate") {
n = o.link[d].href;
break
}
}
for (var b = 0; b < t.feed.link.length; b++) {
if (t.feed.link[b].rel == "next") {
nextPage = t.feed.link[b].href
}
}
for (var a = 0; a < o.link.length; a++) {
if (o.link[a].rel == "replies" && o.link[a].type == "text/html") {
q = o.link[a].title;
break
}
}
if ("content" in o) {
e = o.content.$t
} else {
if ("summary" in o) {
e = o.summary.$t
} else {
e = ""
}
}
if ("media$thumbnail" in o) {
h = o.media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s" + tocConfig.thumbWidth + "-c")
} else {
h = tocConfig.noImage.replace(/\/s[0-9]+\-c/, "/s" + tocConfig.thumbWidth + "-c")
}
postdate = o.published.$t.substring(0, 10), u = postdate.substring(0, 4), g = postdate.substring(5, 7), p = postdate.substring(8, 10), r = tocConfig.MonthNames[parseInt(g, 10) - 1];
c += "<li><div class='inner'>";
c += "<a href='" + n + "' target='_blank'><img style='width:" + tocConfig.thumbWidth + "px;height:" + tocConfig.thumbWidth + "px;' src='" + h + "' alt='" + s + "' /></a>";
c += "<a class='toc-title' href='" + n + "' target='_blank'>" + s + "</a><strong> - (" + q + ")</strong><br>";
c += "<div class='news-text'>" + cropFeed(e, tocConfig.numChars) + "…<br style='clear:both;'/></div>";
c += '<div class="date"><span class="dd">' + p + '</span><span class="dm">' + r + '</span><span class="dy">' + u + "</span></div></div></li>"
}
if (input.value !== "" && window.location.hash == "#search") {
resultDesc.innerHTML = "<span>Search result for keyword <strong>"" + input.value + ""</strong></span>"
} else {
resultDesc.innerHTML = ""
}
feedContainer.innerHTML += c;
if (nextPage) {
if (window.location.hash && window.location.hash !== "#0") {
c = "<a href='javascript:initResult(2);' class='next'>" + tocConfig.navText + "</a>"
} else {
c = "<a href='javascript:initResult(1);' class='next'>" + tocConfig.navText + "</a>"
}
} else {
c = "<a href='#table-outer' onclick='jQuery('html, body').animate({scrollTop: jQuery('#table-outer').offset().top}, 1500); return false' class='front'>" + tocConfig.frontText + "</a>"
}
feedNav.innerHTML = c;
input.value = "";
labelSorter.getElementsByTagName("select")[0].removeAttribute("disabled");
orderByer.removeAttribute("disabled")
} else {
feedContainer.innerHTML = "";
alert(tocConfig.noResult);
feedNav.innerHTML = "<a href='?reload=true'>" + tocConfig.frontText + "</a>";
searchDesc.innerHTML = ""
}
}
function initResult(a) {
var b, c;
if (a == 1) {
b = nextPage.indexOf("?");
c = nextPage.substring(b)
} else {
if (a == 2) {
b = nextPage.indexOf("?");
c = nextPage.substring(b).replace(/\?/, "/-/" + window.location.hash.substr(1) + "?")
} else {
c = "?start-index=1&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&alt=json-in-script"
}
}
c += "&callback=showFeedList";
updateScript(c)
}
function removeScript() {
var a = getID("temporer-script");
a.parentNode.removeChild(a)
}
function buildLabels() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels";
head.appendChild(a)
}
function updateScript(b) {
if (startPage == 1) {
removeScript()
}
feedNav.innerHTML = tocConfig.loading;
if (tocConfig.labelName !== false) {
feedArchive = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary/-/" + tocConfig.labelName + b
} else {
feedArchive = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary" + b
}
var a = document.createElement("script");
a.type = "text/javascript";
a.src = feedArchive;
a.id = "temporer-script";
head.appendChild(a);
startPage = 1
}
function changeSort(c) {
removeScript();
tocContainer.innerHTML = "";
feedNav.innerHTML = tocConfig.loading;
var b = document.createElement("script"),
d = labelSorter.getElementsByTagName("select")[0],
a = (c !== 0) ? "/-/" + c : "";
b.type = "text/javascript";
b.id = "temporer-script";
b.src = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary" + a + "?alt=json-in-script&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&callback=showFeedList";
head.appendChild(b);
d.disabled = true;
orderByer.disabled = true;
window.location.hash = c
}
function searchPost() {
removeScript();
tocContainer.innerHTML = "";
resultDesc.innerHTML = "";
feedNav.innerHTML = tocConfig.searching;
var a = document.createElement("script");
a.type = "text/javascript";
a.id = "temporer-script";
a.src = (tocConfig.url === "" ? window.location.protocol + "//" + window.location.host : tocConfig.url) + "/feeds/posts/summary?alt=json-in-script&orderby=published&q=" + input.value + "&max-results=9999&callback=showFeedList";
head.appendChild(a);
window.location.hash = "#search";
return false
}
getID("postSearcher").onsubmit = function () {
return searchPost()
};
orderByer.onchange = function () {
changeSort(0)
};
labelSorter.getElementsByTagName("select")[0].onchange = function () {
changeSort(this.value)
};
window.onload = function () {
initResult(0);
buildLabels();
window.location.hash = "#0"
};
</script><br />
<style scoped="" type="text/css">
#comments {display:none;}
</style>

Simpan dan lihat hasilnya.

Hasil tampilan yang muncul adalah sebagai berikut :

Hasilnya sama dengan daftar isi yang ada diblog saya, klik di sini "DAFTAR ISI"

SELAMAT MENCOBA......

SEMOGA BERMANFAAT.................

Menampilkan isi blog merupakan cara agar pembaca/pengunjung bisa mendapat informasi, selain juga untuk mempercantik blog kita.

Caranya cukup mudah dan sederhana.

( bisa dipasang di sidebar / header / footer )

Ikuti Langkah Berikut :

Klik Page Element

Klik Add Gadget

Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<style>
#random-posts img{border-radius: 50px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #FFFFF;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:capitalize; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 10px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length='120';
var rdp_info='no';
var rdp_comment='comment';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'> 
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFdSV0W8qSPDIRvzDKO1mgtYLkzCkDUBWsoL7V_DWqIKUbq5AJt0JbZpw0VheEbpxnRE4KxJ6MdZQkxMtZpcMRNt-A_KCyYigDLk_IKLGWRomvq_4ohBOOh_v3JM7_EU5YPWPHkk7U3Ds/s1600/no-image-available.jpg"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>

</ul>

Simpan dan lihat hasilnya.

#random-posts img{border-radius: 50px;float:left;margin-right:5px; width:75px;height:75px ; Ukuran image yang ingin ditampilkan / ubah angka 75 sesuai kebutuhan.
var rdp_numposts=5; Jumlah post yang ingin ditampilkan
var rdp_snippet_length=120; Jumlah karakter isi posting, rubah sesuai kebutuhan, bila ingin dihilangkan ganti 120 dengan 'no'
var rdp_info='no'; ubah dengan 'yes' bila ingin menampilkan keterangan posting ( tanggal dan jumlah komentar )

Terima kasih..
semoga bermanfaat..!

Breadcrumbs
Merupakan sebuah navigasi label yang biasanya terletak diatas posting sebuah blog yang berfungsi untuk memberikan informasi peta atau navigasi label posting yang dibaca oleh para pembaca di blog, sehingga akan lebih memudahkan pembaca dalam mencari artikel yang berhubungan dengan label artikel yang sedang dia baca.
Contoh navigasi label atau breadcrumb diatas posting biasanya akan berbentuk link seperti ini:

Home > label > judul posting

Anda dapat melihat contoh gambarnya di gambar pertama posting ini.
Karena di blogger.com belum menyediakan fasilitas ini,maka kali ini saya akan share caranya.Caranya mudah, kita hanya perlu menambahkan beberapa kode di template blog.

Berikut cara membuat navigasi label (breadcrumb) diatas judul posting blog

Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda dengan menggunakan akun blogger yang anda miliki.
Setelah masuk ke halaman dashboard, silahkan anda klik nama blog yang anda miliki (apabila anda memiliki blog lebih dari 1).
Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.

membuat breadcrumbs diatas judul posting blog

Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.

Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode ]]></b:skin>. Agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).
Masukkan kode berikut ini tepat diatas ]]></b:skin>.

.breadcrumbs{ padding:5px 5px 5px 0; margin:0; font-size: 90%; line-height:1.4em; border-bottom:1px solid black; }

Berikutnya anda cari kode <b:includable id='post' var='post'> dan masukkan kode berikut ini tepat dibawahnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Home</a> > <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if> > <data:post.title/> </div> </b:if> </b:if>

8.Terakhir,silahkan anda klik simpan atau save.

Untuk melihat hasilnya,anda bisa mengunjungi halaman posting anda di blog, maka anda akan lihat navigasi label (breadcrumbs) telah muncul diatas judul posting blog anda.

Demikianlah cara membuat cara membuat breadcrumbs diatas judul posting blog, apabila masih ada kekurangan atau kode alternatif lainnya maka silahkan memberikan komentar, karena komentar anda akan menjadi sesuatu hal yang amat membantu bagi saya.

Terima kasih telah berkunjung.

semoga bermanfaat....

Menampilkan isi blog/website merupakan cara agar pembaca/pengunjung bisa dengan mudah untuk mendapat informasi yang diinginkan, selain juga untuk memperkenalkan isi dari blog/website kita.
Random post bisa dipakai sebagai alternatif untuk menampilan isi blog secara acak dengan tampilan judul posting dan image serta jumlah komentar yang ada.
Caranya cukup mudah dan sederhana.

Ikuti Langkah Berikut :

Klik Page Element
Klik Add Gadget
Klik plus button (+) for HTML/JavaScript. (img)
Copy and paste kode dibawah ini

<style type="text/css"></style>

<script type="text/JavaScript">

</script>

Simpan dan lihat hasilnya.

Keterangan :

var Max_Post_Display = 10; var Sum_Len = 130 = jumlah posting dan jumlah karakter (panjang judul posting) yang ingin ditampilkan / ubah angka 10 dan 130 sesuai kebutuhan.
recent_post_content img {width:32px;height:32px = image/gambar yang ingin ditampilkan lebar;tingggi, ubah sesuai kebutuhan
font-size = ukuran besar kecil font; meliputi judul widget dan judul posting ( ubah sesuai kebutuhan )
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw8RwbYlnOxR8_0NFAZbt4mwdaDFkwuxaL5nj3MRnePbXf72LYoGUNHVpObYBZbhTtpSGbSF6I-usiP7L4856RgVejjgCEiocHICIn1HdSkLmX1UHownT8weuGoOqwxIG7TsvCH69u5ko/s32/Hfavicon.jpg image yang muncul saat posting no-image ( bisa diganti sesuai kebutuhan )

Create by Tien Nguyen // Copyright by bloggeritems.com

Menggunakan kombinasi warna yang tepat agar tampilan blog menjadi lebih menarik dan elegan bisa menjadi alternatif bagi yang suka utak utik template.

Penggunaan kode warna sudah merupakan bagian yang tak terpisahkan bagi para blogger untuk membuat tampilan yang sesuai antara background, border, dan warna huruf.

Untuk menambah variasi dan mengurangi kejenuhan dengan penggunaan warna yang sama maka widget untuk mengganti background secara otomatis ini bisa menjadi pilihan yang tepat.

Untuk lebih lengkapnya ikuti langkah berikut.

Login ke akun Blogger kamu.
Dari halaman dashboard
Pilih tab Elemen Halaman ( Page Element ).
Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
Copykan script berikut dan letakkan pada kotak Content yang tersedia :

Keterangan :

Warna Merah ; warna petunjuk untuk kembali ke warna background default (asli), silakan diganti dengan warna lain sesuai template ( hanya sebagai tampilan kembali ke warna asli ).
Warna Kuning ; warna background yang diinginkan, pada saat di klik warna background akan berubah sesuai jenis warna yang telah ditentukan. ( ubah sesuai kebutuhan ( bisa ditambah dan dikurangi ), untuk kode warna bisa dilihat disini "Menggunakan Kode warna dalam blogging"
Warna Aqua ; keterangan widget, ganti sesuai kebutuhan.

Selamat mencoba...!

SUBSCRIBE & FOLLOW

Terpopuler Minggu Ini

Kategori

Komentar

Kunjungan Minggu Ini

About Blog

Trending Tahun ini

Menentukan ukuran Tangga dan Anak Tangga untuk bangunan bertingkat

Menghitung Volume Besi per-m3 beton bertulang

Memahami Mutu Beton fc (Mpa) dan Mutu Beton K (kg/cm2)

Kategori