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...!

Membuat blog lebih tampil menarik salah satunya dengan menampilkan slide show berupa gambar, cara ini cukup mudah dan cepat, 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 ( dimana saja bisa ) yang tersedia :

Keterangan :

Warna Merah ; alamat URL image yang akan dipasang, silakan ganti dengan punya kamu sendiri.
Warna Kuning ; lebar widget yang ada, sesuaikan dengan kebutuhan.
Warna Aqua ; waktu perputaran tampilan image, silakan ganti sesuai kebutuhan tambah besar makin lambat.

Selamat mencoba...!

Sumber : http://dynamicdrive.com

Menampilkan menu tambahan pada side bar bisa merupakan alternatif bagi blogger agar pembaca bisa melihat/membaca artikel yang ada secara mudah, Pada umumnya penempatan artikel yang terkait diletakkan dibawah posting/artikel, dengan berbagai modifikasi, ada yang menambahkan icon disamping judul artikel, ada yang membuat related post dengan fungsi scroll dan ada yang membuat related post tampil dengan image, kali ini saya ingin berbagi mengenai cara membuat related post tampil di sidebar seperti di blog ini. caranya tidak sulit dan bahkan mudah untuk dilakukan.

Ikuti langkah Berikut :

Login ke account blogger anda, klik rancangan/layout lalu klik edit HTML
Jangan lupa centang expand widget templates untuk mengedit template secara keseluruhan
masukan kode dibawah ini sebelum tag </head>

    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;
    }
    }
    }
    }
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];
    }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    }
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
    }
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>

kemudian cari kode widget seperti dibawah ini :

    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <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>

Kemudian tambahkan kode yang warna merah pada kode tersebut :

    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <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:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels& max-results=10"' type='text/javascript'/>

    </b:if>
    </b:loop>
    </b:if>

Save template
Masuk ke menu Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post ( atau yang lain sesuai kebutuhan ) kemudian copy paste script di bawah ini : //bisa pasang dibagian mana saja//side bar//footer//sesuai kebutuhan//

    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>

Simpan dan lihat hasilnya..!
Selamat mencoba ....!

Untuk mempermudah dan memberikan akses yang nyaman pada pengunjung adalah dengan memanfaatkan widget label yang merupakan standart blogger, mungkin ini sudah tidak asing lagi bagi rekan blogger. Tapi standart blogger yang ada bila kita klik label yang muncul adalah posting pada label beserta dengan image dan uraian singkat dari isi posting.

Sekarang kita akan membuat tampilan yang muncul saat klik label hanya judul posting saja sehingga bisa tampak lebih menarik dan sederhana.

Kita langsung ke TKP saja biar jelas

Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode berikut

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if><b:include data='post' name='post'/>

Keterangan :
Ganti kode dengan warna merah dengan kode dibawah ini :
( bila kesulitan silakan mencari kode yang mirip dengan kode diatas )

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Simpan dan lihat hasilnya....!

Note :
untuk menambah tampilan agar lebih menarik berikut langkah yang harus diikuti :
Ganti kode warna biru diatas dengan kode dibawah ini

<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #F5D0A9;margin-bottom:2px;background:#A9D0F5;color:#000000;'>
<img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRGyOTVAx19MqGkrIBDFTMRrF-3A7b3e4AShNljcdB1NIdwvBPOjnwT3HoUZAiFfzUVp4eESc_1pIBWHFtP6w4iAabJFnqbx9LxF2gVS2VDcjXl9WV1r_a16mNQrrAVtV0owKeMhSVCacc/'/>
<data:post.title/></div></a>

Keterangan :
Kode warna merah : jenis warna border, background dan warna teks ( ubah sesuaikan dengan kebutuhan )
Kode warna biru : image icon didepan judul posting ( ubah sesuai dengan kebutuhan )

Simpan dan lihat hasilnya.
Terima kasih semoga bermanfaat.
Sumber : blog sahabat

Mempercantik tulisan pada posting merupakan cara yang paling baik untuk menambah traffick, karena pada prinsipnya sebagus apapun blog yang kita design yang menjadi penentu adakah ISI POSTING

Mempergunakan fasilitas blockquote adalah salah satu alternatif yang bisa dipakai untuk melakukan penekanan atau menunjukan kutipan pada artikel yang kita tulis.
Blockquote sebenarnnya sudah ada pada blogger ( lihat tanda kutip " pada menu posting baru ) sesuai dengan standart template masing masing blog.

Untuk melakukan perubahan pada blockquote standart bisa dilakukan dengan cara :

Modifikasi blockquote standart template yang ada

Untuk lebih jelasnya silakan lihat uraian berikut ini :

CARA PERTAMA, Modifikasi blockquote standart template yang ada

Login Blogger.com
Masuk ke Setting - Design - Edit HTML
Cari kode

.post blockquote
......... dst
}
.post blockquote:hover
......... dst
}
.post blockquote p
......... dst
}

( ini adalah kode standart blockquote bisa dilakukan perubahan sesuai kebutuhan )

Ganti dengan kode diatas dengan kode berikut :

.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}

.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}

Simpan dan lihat hasilnya. ( hasilnya sama dengan di artikel ini )

Silakan dirubah sesuai dengan template yang ada ( kode warna, background image, border, margin, padding ) sesuai kebutuhan.

terima kasih..
semoga bermanfaat...!

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