Showing posts with label Desain Blog. Show all posts

Cara Menciptakan Daftar Isi (Sitemap) Blog Menurut Label - Simple & Fast Loading

Cara Membuat Daftar Isi (Sitemap) Blog Berdasarkan Label - Simple & Fast Loading.

 ialah halaman khusus yang berisi daftar judul posting blog Cara Membuat Daftar Isi (Sitemap) Blog Berdasarkan Label - Simple & Fast Loading
DAFTAR Isi (table of content) atau peta situs (sitemap) ialah halaman khusus yang berisi daftar judul posting blog.

Daftar isi atau sitemap ini berupa indeks konten blog menurut Label (kategori). Demonya dapat dilihat di Sitemap Blog ini.

Fungsinya bukan hanya untuk pengunjung (user friendly), tapi juga untuk kepentingan indeks Google atau SEO.

Harap diingat, sitemap di halaman statis ini berbeda dengan sitemap yang kita daftarkan di Webmaster Google.

Cara Membuat Daftar Isi (Sitemap) Blog 

Berikut ini Cara Membuat Daftar Isi (Sitemap) Blog Berdasarkan Label.

1. Klik Pages (Halaman) > pilih New Page (Halaman Baru)

 ialah halaman khusus yang berisi daftar judul posting blog Cara Membuat Daftar Isi (Sitemap) Blog Berdasarkan Label - Simple & Fast Loading

2. Isi judul halaman dengan Sitemap.
3. Klik mode HTML

 ialah halaman khusus yang berisi daftar judul posting blog Cara Membuat Daftar Isi (Sitemap) Blog Berdasarkan Label - Simple & Fast Loading

4. Copas isyarat berikut ini:

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
.sitemap-link{display:none}
</style>
<script type="text/javascript">
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(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 m=n.published.$t.substring(0,10);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;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://templetedownload.blogspot.com//search?q=cara-membuat-daftar-isi-blog-sitemap" style="font-size: 10px; text-decoration:none; color: #5146CD;" target="_blank">Cara Membuat Daftar Isi Blog</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[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=postPublished[e];postPublished[e]=postPublished[g];postPublished[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=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,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=postDate[f];postDate[f]=postDate[h];postDate[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=postPublished[f];postPublished[f]=postPublished[h];postPublished[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 m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="Cara Membuat Daftar Isi (Sitemap) Blog Berdasarkan Label - Simple & Fast Loading">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="Cara Membuat Daftar Isi (Sitemap) Blog Berdasarkan Label - Simple & Fast Loading">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="Cara Membuat Daftar Isi (Sitemap) Blog Berdasarkan Label - Simple & Fast Loading">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}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);">New!</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}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3bXeXXTz7oMN9tC500EqCMnBLYrNDBwl4kEiYoePdjDrDsFEGMZqMMOjgWq9O_CEFGu5GAwAt2WlPZ91Fzcyo5mwc3Ko1dna8UvdRDt_6YEf2jR4V-sMIw8kNp3jpDq4quI4hRw1XHrDg/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

5. Langsung klik Publikasikan!

Ingat, jangan klik Compose dulu, pribadi saja Publish di mode HTML!

Itu ia cara Membuat Daftar Isi (Sitemap) Blog Berdasarkan Label - Simple & Fast Loading! Desain tampilan daftar isi lainnya dapat dicek di blog eutectics. Wasalam. (blogromeltea.blogspot.com).*

Cara Memasang Featured Post Artikel Terbaru Di Blogger

Cara Memasang Featured Post Image Slider Otomatis di Blogger Cara Memasang Featured Post Artikel Terbaru di Blogger

Featured Post yakni widget Blogger yang menampilkan posting unggulan di halaman depan (homepage).

Featured Post ini semacam headline atau gosip utama di situs berita.

Postingan yang ditampilkan di Featured Post menjadi semacam sajian utama atau konten unggulan yang ditawarkan kepada pengunjung blog.

Widget Featured Post juga disediakan Blogger semenjak Desember 2015. Tim Blogger Google merilisnya dengan judul "Highlight the posts that matter the most".

Untuk memasangnya sangat mudah, yaitu tinggal klik Layout > Add a Gadget > pilih Featured Post.


Kita dapat pilih salah satu post untuk ditampilkan atau otomatis menampilkan posting terbaru dengan centang "Use the most recent published post".
 
Cara Memasang Featured Post Image Slider Otomatis di Blogger Cara Memasang Featured Post Artikel Terbaru di Blogger

Kita dapat menampikannya di sidebar atau di halaman depan. Anda juga dapat memasang Featured Post bawaan Blogger yang sudah dimodifikasi.

Cara Memasang Featured Post Artikel Terbaru di Blogger

Selain Featured Post Bawaan Blogger, banyak pula desain featured post lainnya dengan tampilan beraam dan menampilkan lebih dari satu postingan. Salah satunya dengan memasangkan isyarat berikut ini. Penampakannya ibarat ilustrasi gambar di atas.

Featured Post Artikel Terbaru di Blogger ini di-share Help Logger. Di demonya,  Featured Post Image Slider dipasang di sidebar, dengan menampilkan posting terbaru.

Berikut ini cara Cara Memasang Featured Post Image Slider Otomatis di Sidebar Blogger:

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul Isi dengan "Featured Posts" atau Kosongkan
3. Copy & Paste Kode berikut ini:

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhANMkEHIHg3mVKl5oL1X9MkdRwIU04xPk6uLd74d1U_Hp6hB_JdTUjDJWPl1XHlbRZagv2hTCOui0E6Jl7eFTTFapJtg6KDmNkSWP9rqtjvbUsBvpwI7XsU_pUig1p6SuOWnSniaWuSE4/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://namabloganda.blogspot.com/",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGWUUis8RqEgIksViifR0Mm_IqWogTLg5yg_Nf1w8_7kD9wV4lpd87IhyQA6bQZCVH7PqbXS1eo4vHoUgiqnuBGdeAROQceWGPDzS9NSEmYBFywOwaujKPSwlNz8dYeTLPYDmmeyAWxY/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

Catatan
  • listURL - ganti dengan alamat URL blog Anda
  • featuredNum - jumlah posting, dapat diubah
  • listbyLabel - jikalau akan menampilkan posting dengan label tertentu, ubah menjadi lissbyLabel:"Nama Label"
  • featthumbSize - ukuran atau dimensi gambar dalam pixel
  • interval - pergantian gambar dalam detik'
  • autoplay - ubah true manjadi false jikalau akan dimatikan autoplaynya
  • Kode warna hijau yakni link ke  isyarat jQuery. Jika di template Anda sudah ada isyarat tersebut, hapus saja, jangan disertakan.

4. Save!

Berikut ini isyarat Featured Post Image Slider Otomatis yang sudah sedikit dimodifikasi, untuk dipasang di halaman depan blog.

Bagian yang dimodifikasi yakni tinggi gambar (height) menjadi 300px dan autoplay dimatikan (false).

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:300px}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhANMkEHIHg3mVKl5oL1X9MkdRwIU04xPk6uLd74d1U_Hp6hB_JdTUjDJWPl1XHlbRZagv2hTCOui0E6Jl7eFTTFapJtg6KDmNkSWP9rqtjvbUsBvpwI7XsU_pUig1p6SuOWnSniaWuSE4/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://namabloganda.blogspot.com",
featuredNum:5,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:false,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGWUUis8RqEgIksViifR0Mm_IqWogTLg5yg_Nf1w8_7kD9wV4lpd87IhyQA6bQZCVH7PqbXS1eo4vHoUgiqnuBGdeAROQceWGPDzS9NSEmYBFywOwaujKPSwlNz8dYeTLPYDmmeyAWxY/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

DemikianCara Memasang Featured Post Artikel Terbaru di Blogger. (blogromeltea.blogspot.com).*

Cara Memasang Featured Post Bawaan Blogger Yang Sudah Dimodifikasi

Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi & Responsive.

SETELAH berbagi Cara Memasang Featured Post Slider di Halaman Depan Blog, kali ini aku share cara memasang Featured Post Widget Bawaan Blogger yang sudah dimodifikasi.

Desain tampilannya menyerupai ini:

Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi  Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi

Featured Post ialah widget Blogger untuk menampilkan posting, artikel, atau konten unggulan. Widget ini dirilis Blogger 10 December 2015: Highlight the posts that matter the most.

Cara memasangny mudah, tinggal klik Layout > Add a Gadget > pilih Featured Post. Setelah itu geser (pindahkan) posisinya ke atas widget Blog Post.

Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi  Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi

Kode Featured Post Bawaan Blogger yang Sudah Dimodifikasi

Jika ingin desain Featured Post Bawaan Blogger yang Sudah Dimodifikasi, pasang arahan berikut ini di template blog Anda sesudah Featured Post dipasang.

1. Tema > Edit HTML
2. Copas arahan berikut ini di atas kode ]]></b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.FeaturedPost .post-summary{background:#f7f7f7;position:relative;padding:0;height:auto;max-height:330px;overflow:hidden;margin-bottom:10px}
.FeaturedPost .post-summary h3{font:500 20px Oswald,serif;bottom:0;font-size:20px;margin:0;z-index:10;position:absolute;top:0;left:0;height:100%;width:36%;background:#1F1C1B;opacity:0.7;filter:alpha(opacity = 70);padding:10px}
.FeaturedPost .post-summary h3:after{content:&quot;&quot;;position:absolute;top:-0.25em;right:100%;bottom:-0.25em;width:0.25em}
.FeaturedPost .post-summary h3 a{color:#fff;background:transparent}
.FeaturedPost .post-summary h3 a:hover{color:#ff6}
.FeaturedPost .post-summary p{color:#ff6;bottom:10px;overflow:hidden;text-overflow:ellipsis;margin:0;z-index:10;position:absolute;top:55%;left:0;max-height:100px;width:36%;opacity: 0.8;filter: alpha(opacity = 70);padding: 10px;line-height: normal;}
.FeaturedPost .image{display:block;max-height:330px}
.FeaturedPost h2{display:none}
@media only screen and (max-width:480px){
.FeaturedPost .post-summary h3{font-size:18px;margin:0;width:50%}
.FeaturedPost .post-summary p{margin:0;height:auto;max-height:72px;width:50%}
}
@media only screen and (max-width:320px) {
.FeaturedPost .post-summary p {display: none;}
}
</style>
</b:if>

3. Agar tampil hanya di halaman depn, tambahkan arahan tag kondisional. Caranya, cari arahan widget Featured Post menyerupai ini:

    <b:widget id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost'>

Nah, di bawahnya ada arahan menyerupai ini:

      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <b:include name='content'/>
  </b:if>
</b:includable>

Ubah sehingga menyerupai arahan di atas dengan menambahkan arahan warna merah.

Save!

Itu dia Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi. (blogromeltea.blogspot.com).*

Cara Memasang Featured Post Slider Di Halaman Depan Blog

Cara Memasang Featured Post Slider di Halaman Depan Blog

Featured Post Slider yaitu widget yang menampilkan posting terbaru di hompage berupa slide gambar dan judul menyerupai gambar di bawah ini:

Cara Memasang Featured Post Slider di Halaman Depan Blog Cara Memasang Featured Post Slider di Halaman Depan Blog

Fungsinya sama dengan widget Featured Post bawaan blogger, yaitu menampilkan posting unggulan. Namun, wigdet berikut ini memunculkan posting terbaru.

Cara Memasang Featured Post Slider di Halaman Depan Blog

1. Klik Tema > Edit HTML
2. Copas arahan CSS Featured Post Slider berikut ini di atas arahan </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.s3slider{margin:0 auto 10px;background:#333 none no-repeat 50% 50%;position:relative;overflow:hidden;}
ul.s3slider-content {padding: 0;}
.s3slider.loading{text-indent:-9999px;}
.s3slider-content,.s3slider-content li{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;list-style:none;overflow:hidden;}
.s3slider-content li{position:static;display:none;}
.s3slider-content img{display:block;width:100%;height:100%;max-width:none;max-height:none;border:none;outline:none;padding:0;margin:0;}
.s3slider-caption{position:absolute;right:0;bottom:0;left:0;height:auto;font:normal normal 13px/normal Helmet,Freesans,Sans-Serif;color:white;background-color:black;opacity:.8;filter:alpha(opacity=80);padding:17px 20px 20px;display:none;}
.s3slider-title,.s3slider-meta{display:block;}
.s3slider-title a{font-size:110%;font-weight:bold;color:white;text-decoration:none;}
.s3slider-title a:focus,.s3slider-title a:hover{text-decoration:underline;}
.s3slider-meta-comment:before{content:&quot;- &quot;}
</style>
    </b:if>

3. Cari kode:

<b:section class='main' id='main' name='Main' showaddelement='no'>

4. Copas arahan HTML & JavaScript Featured Post Slider berikut ini di atas arahan tersebut:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/>
<div id="s3slider-container"> 
<div class="s3slider loading" style="width:100%;height:300px;">    Memuat...  </div>
</div>
<script>
var s3slider_config = {
url: 'https://blogromeltea.blogspot.com',
numPost: 5,
labelName: null,
monthArray: ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],
noImage:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', 
newTabLink: false,
containerId:'s3slider-container',
slider:{width:520,height:300,
timeOut: 9000}};
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
$.fn.s3Slider = function(vars) {
var element = this,
timeOut = (vars.timeOut != undefined) ? vars.timeOut : 5000,
current = null,
timeOutFn = null,
faderStat = true,
mOver = false,
items = $(element).find('li'),
itemsSpan = items.find('.s3slider-caption');
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut / 2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if (items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
// console.log("Poof..");
}
}, makeSlider = function() {
current = (current != null) ? current : items[(items.length - 1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if (faderStat == true) {
if (!mOver) {
$(items[currNo]).fadeIn((timeOut / 6), function() {
if ($(itemsSpan[currNo]).is(':visible')) {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function() {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function() {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if (!mOver) {
if ($(itemsSpan[currNo]).is(':hidden')) {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function() {
$(items[currNo]).fadeOut((timeOut / 6), function() {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function() {
$(items[currNo]).fadeOut((timeOut / 6), function() {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false);
}
});
});
}
}
}
}; makeSlider();
};
})(jQuery);
(function($, w, d) {
var sc = s3slider_config,
container = d.getElementById(sc.containerId),
head = d.getElementsByTagName('head')[0],
s = d.createElement('script'),
skeleton = '<div class="s3slider" id="s3slider" style="width:' + sc.slider.width + 'px;height:' + sc.slider.height + 'px;"><ul class="s3slider-content">',
title, image, link, date, comment;
w.blogger_s3Slider = function(json) {
var entry = json.feed.entry;
for (var i = 0, ien = entry.length; i < ien; ++i) {
title = entry[i].title.$t;
date = entry[i].published.$t.split('-');
var dd = date[2].substring(0, 2),
dm = date[1],
dy = date[0];
image = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s" + sc.slider.width) : sc.noImage;
for (var j = 0, jen = entry[i].link.length; j < jen; ++j) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
break;
}
}
for (var k = 0, ken = entry[i].link.length; k < ken; ++k) {
if (entry[i].link[k].rel == "replies" && entry[i].link[k].type == "text/html") {
comment = entry[i].link[k].title;
break;
}
}
skeleton += '<li><img src="' + image + '" style="display:block;width:' + sc.slider.width + 'px;min-height:' + sc.slider.height + 'px;height:auto;"><span class="s3slider-caption"><span class="s3slider-title"><a href="' + link + '"' + (sc.newTabLink ? ' target="_blank"' : "") + '>' + title + '</a></span><span class="s3slider-meta"><span class="s3slider-meta-date">' + dd + ' ' + sc.monthArray[parseInt(dm, 10) - 1] + ' ' + dy + '</span><span class="s3slider-meta-comment">' + comment + '</span></span></span></li>';
}
skeleton += '</ul></div>';
container.innerHTML = skeleton;
$('#' + sc.containerId).children().s3Slider({
timeOut: sc.slider.timeOut
});
};
s.src = sc.url.replace(/\/$/, "") + '/feeds/posts/summary' + (sc.labelName !== null ? '/-/' + sc.labelName : "") + '?alt=json-in-script&orderby=published&max-results=' + sc.numPost + '&callback=blogger_s3Slider';
head.appendChild(s);
})(jQuery, window, document);
//]]>
</script>
  </b:if>

5. Ubah alamat blognya (https://blogromeltea.blogspot.com) dengan url blog Anda.
6. Sesuaikan lebar dan tinggi gambar slider di arahan kode warna merah.
7. Save! Simpan template.

Selesai. Itu dia Cara Memasang Featured Post Slider di Halaman Depan Blog. Wasalam. (https://blogromeltea.blogspot.com).*

Cara Custom Domain Blogger Di Hostinger

Cara Custom Domain Blogger di Hostinger: Membuat Blog di Blogger dengan Nama Domain Sendiri.


 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger


MEMBUAT blog di Blogger dengan nama domain sendiri atau mengubah alamat blog dari yang tadinya --misanya-- romelteamedia.blogspot.com menjadi www.romelteamedia.com dikenal dengan istilah Custom Domain atau Domain Kustom.

"Menyiapkan domain kustom. Saat membeli domain, Anda sanggup mempersonalisasi alamat situs blog," demikian kata Google Blogger di laman panduan domain kustom.

Blog dengan nama domain sendiri akan menimbulkan blog kita lebih SEO Friendly, kredibel, aman, dan lebih profesional.

 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger

Selain tampak profesional dan keren, mengganti nama domain atau alamat blog dengan nama domain sendiri ini juga akan menciptakan blog kita "abadi", tetap ada, selama blognya tidak kita delet atau diban sama blogspot.

Jadi, kalo contohnya kita lupa memperpanjang sewa domain, maka hanya nama domain itu yang "hilang", tapi blog aslinya dengan alamat blogspot masih tetap ada. Konten atau isi blog pun aman.

Menurut para pakar SEO, blog dengan nama domain sendiri, memakai Top Level Domain (TLD) seperti .com atau .net, akan menimbulkan blog kita lebih ramah mesin telusur (SEO Friendly) alias lebih disukai mesin pencari dan pengunjung.

Cara Custom Domain Blogger di Hostinger

Membuat blog dengan nama domain sendiri sangat mudah. Langkah mengubah alamat blog yang ada blogspot-nya menjadi dot com atau dot net sebagai berikut:
  1. Buat dulu blognya di Bogger. (Buka: Cara Membuat Blog di Blogger)
  2. Beli atau sewa nama domainnya di Hostinger Indonesia
  3. Lakukan Custom Domain
Selesai! Jadilah sekarang alamat blog kita, contohnya dari yang tadinya http://romelteamedia.blogspot.com menjadi www.romelteamedia.com.

Tahapan Custom Domain Blogger 

Berikut ini langkah melaksanakan custom domain di Blogger

1. Klik Setelan / Setting > Basic
2. Di menu Blog Adress, klik Add a custom domain, ibarat gambar di bawah ini:

 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger

3. Masukkan Nama Domain Anda. Misalnya, romelteamedia.com

 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger

4. Klik Save / Simpan.

Akan muncul error dan berisi arahan CNAME Blogger. Dalam pola gambar di bawah, arahan CNAME ada di kotak, yaitu:

www | ghs.google.com
6jnaxvzb4vr3 | gv-x7qwnjgw53yke4.dv.googlehosted.com (contoh saja, punya Anda nanti beda kode)


5. Copy Paste arahan tersebut di Notepad.

Sampai di sini, tinggalkan dulu halaman dashboard Blogger Anda. Jangan ditutup, biarkan aja dulu, alasannya nanti kita akan kembali ke Blogger.

6. Buka Hostinger Indonesia
7. Login ke Akun Anda: Klik menu Masuk di kanan atas.

Akan terbuka halaman Cpanel Anda di Hostinger.

 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger

9. Klik KELOLA.
Akan terbuka halaman gres dan klik DNS ZONE

 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger

10. Centang kotak Saya paham bahwa .....
11. Klik Atur Ulang

 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger

12. Tunggu sekitar satu menit, lebihin dikit biar pasti, kemudian Refresh halaman (Tekan F5). Akan terbuka halaman baru.

13. Isikan A Host dengan klik Tambah Baru, kemudian masukkan 4 arahan berikut ini satu per satu:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Langkah Detailnya:

  1. Klik Tambah Baru
  2. Kolom pertama (Host) isi dengan nama blog tanpa www, contohnya romelteamedia.com
  3. Kolom kedua isi dengan arahan 216.239.32.21
  4. Simpan!
  5. Ulangi Tambah gres dst untuk arahan kedua, ketiga, dan keempat.
  6. Hasilnya Seperti gambar di bawah ini.


 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger

14. Copy Paste arahan CNAME yang tadi sudah di dapatkan dari Blogger di Langkah No. 4, yang ada kode ghs.google.com.

Masukkan arahan pertama di kolom pertama dan arahan kedua di kolom kedua. Lihat Gambar CNAME (Alias) di bawah ini.


 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger

BERES!

Silakan kembali buka halaman Dashboard Bloger Anda, kemudian klik tombol Save di Setting Custom Domain.

Jika masih error, sabar... tunggu beberapa saat, dan ulangi. Menurut pengalaman, dalam waktu satu-dua menit saja sudah sanggup disimpan.

Jika sudah sanggup di-save, centang "Alihkan domainanda.com ke www.domainanda.com" dan simpan.

 Membuat Blog di Blogger dengan Nama Domain Sendiri Cara Custom Domain Blogger di Hostinger

Itu ia panduan detail bagi pemula tentang Cara Custom Domain Blogger di Webhosting Hostinger Indonesia, biar blog lebih kredibel, SEO, profesional, dan banyak pengunjung. Wasalam. (http://blogromeltea.blogspot.com).*

Cara Mengganti Tombol Menyebarkan (Social Share Button) Bawaan Blogger

Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

Tombol mengembangkan sosial (Social Share Button) bawaan Blogger (default social share button) sangatlah sederhana, terlalu simple --jika tidak mau dikatakan jelek. Lihat saja:

 Bagi yang kesulitan mencari arahan di atas Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

Nah, kita ganti dengan yang lebih bagus, keren, lebih menarik (eye catching), ibarat ini:

 Bagi yang kesulitan mencari arahan di atas Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

Yuk, kita ganti!

Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

1. Tema > Edit HTML
2. Cari arahan berikut ini:

              <b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
</b:includable>

Bagi yang kesulitan mencari arahan di atas, lihat gambar ini:

 Bagi yang kesulitan mencari arahan di atas Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger


3. Setelah ketemu, HAPUS arahan tersebut kemudian GANTI dengan dengan arahan berikut ini:

              <b:includable id='shareButtons' var='post'>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_facebook_share" fb:share:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
</b:includable>

4. SIMPAN arahan berikut ini di atas arahan </body>

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5156a09e76c1568f"></script>
<script type='text/javascript'>
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>

Catatan:
Perhatikan arahan warna merah. Itu sanggup Anda ubah atau biarkan. Kalau mau diubah dengan arahan milik Anda sendiri, silakan buka AddThis dan dapatkan arahan tersebut.

5. Save! Simpan template.

6. Lakukan setting di widget Blog Post ibarat gambar ini:

 Bagi yang kesulitan mencari arahan di atas Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

Centang "Show Share Buttons". Lainnya samakan dengan gambar di atas, kecuali mau munculkan ikon edit cepat dan munculkan profil G+ Anda.

Itu dia Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger. Bukan hanya sanggup share ke Facebook, Twitter, dan Google Plus, tapi juga ke Linkedin, Pinterest, WhatsApp (WA), dan banyak lagi. Cobain aja!  Wasalam.*

Cara Menciptakan Navigasi Sajian Responsive Dropdown Plus Link Media Umum Di Blog

Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog.

TIPS Cara Membuat Navigasi Menu Responsive Dropdown di Blog ini kelanjutan dari tips sebelumnya perihal Cara Membuat Template Blog Responsive dan Membuat Auto Readmore otomatis di hompage.

Setelah respopsinve dan auto readmore, tentu navigasi menunya juga harus responsive (ramah seluler, mobile-friendly). Posisinya dapat di atas header, dapat juga di bawahnya. Ini penampakannya. Demonya ada di link sumber di bawah.

Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog

Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog

Cara Membuat Navigasi Menu Responsive Dropdown di Blog

1. Tema > Edit HTML
2. Copas isyarat CSS Navigasi Menu Responsive Dropdown ini di atas isyarat ]]></b:skin>

.topnav {
  overflow: hidden;
  background-color: #333;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.active {
  background-color: #4CAF50;
  color: white;
}
.topnav .icon {
  display: none;
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown .dropbtn {
    font-size: 17px; 
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}
.dropdown:hover .dropdown-content {
    display: block;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

3. Copas isyarat HTML Navigasi Menu Responsive Dropdown ini di atas isyarat <header> untuk posisi di atas header dan di bawah isyarat </header> untuk posisi di bawah header.

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <font size='1'>&#9660;</font>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

4. Copas isyarat JavaSript Navigasi Menu Responsive Dropdown ini di atas isyarat </body>

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

5. Save! Simpan template.

Beres!

Navigasi Menu Responsive Dropdown Plus Link Media Sosial

Jika ingin dilengkapi dengan icon link media sosial, menyerupai dalam gambar di bawah ini, berikut ini kode-kode dan cara memasangnya.

Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog

Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog Cara Membuat Navigasi Menu Responsive Dropdown plus Link Media Sosial di Blog

1. Tema > Edit HTML
2. Pasang isyarat CSS Menu Responsive Dropdown plus Link Media Sosial ini di atas isyarat ]]></b:skin>

/* Navigasi Menu ------------------------------- */
.toggle,[id^=drop]{display:none}
#bbt-menu{background:#4d90fe;width:100%;margin:0 auto;max-width:900px;}
nav{width:100%;padding:0;margin:5px 0}
nav:after{content:'';display:table;clear:both}
nav ul{float:left;padding:0;margin:0;list-style:none;position:relative;width:100%}
nav ul li{margin:0;display:inline-block;float:left;}
nav ul li ul li{background:#333}
nav a,nav a:link,nav a:hover,nav a:visited{display:block;padding:0 14px;color:#FFF;font-size:14px;line-height:45px;text-decoration:none;font-weight:700}
nav ul li ul li:hover{background:#333}
nav a:hover{background-color:#c00}
nav ul li ul li a:hover{background-color:#48d}
nav ul ul{display:none;position:absolute;top:45px;z-index:9999}
nav ul li:hover > ul{display:inherit}
nav ul ul li{width:170px;float:none;display:list-item;position:relative}
nav ul ul ul li{position:relative;top:-45px;left:170px}
nav label span{float:right}
.toggle,[id^=drop]{display:none}
nav input[type=checkbox]{display:none}
.homer {background:#c00}
.socials {float:right;width:25%;}
@media all and (max-width : 768px) {
nav{margin:0}
.toggle + a,.menu{display:none}
.toggle{display:block;background-color:#333;padding:0 20px;color:#FFF;font-size:20px;line-height:45px;text-decoration:none;border:none}
.toggle:hover{background-color:#000}
[id^=drop]:checked + ul{display:block;width:100%}
nav ul li{display:block;width:100%}
nav ul ul .toggle,nav ul ul a{padding:0 60px}
nav ul ul ul a{padding:0 80px}
nav a:hover,nav ul ul ul a{background-color:#000}
nav ul li ul li .toggle,nav ul ul a{background-color:#212121}
nav ul ul{float:none;position:static;color:#fff}
nav ul ul li:hover > ul,nav ul li:hover > ul{display:none}
nav ul ul li{display:block;width:100%}
nav ul ul ul li{position:static}
.socials {float:left;width:100%;}
}

3. Copas/pasang isyarat HTML Menu Responsive Dropdown plus Link Media Sosial ini dibawah isyarat </header> blog Anda.

<div id='bbt-menu'>
<nav>
<label class='toggle' for='drop'>Menu <span>&#9776;</span></label>
<input id='drop' type='checkbox'/>
<ul class='menu'>
<li class='homer'><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>   
<li>
<!-- First Tier Drop Down -->
<label class='toggle' for='drop-1'>Service <span>&#9776;</span></label>
<a href='#'>Service &#9776;</a>
<input id='drop-1' type='checkbox'/>
<ul>
<li><a href='#'>Service 1</a></li>
<li><a href='#'>Service 2</a></li>
<li><a href='#'>Service 3</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li>   
<!-- First Tier Drop Down -->
<label class='toggle' for='drop-2'>Portfolio <span>&#9776;</span></label>
<a href='#'>Portfolio &#9776;</a>
<input id='drop-2' type='checkbox'/>
<ul>
<li><a href='#'>Portfolio 1</a></li>
<li><a href='#'>Portfolio 2</a></li>
<li>
<!-- Second Tier Drop Down -->
<label class='toggle' for='drop-3'>Works <span>&#9776;</span></label>
<a href='#'>Works &#9776;</a>
<input id='drop-3' type='checkbox'/>
<ul>
<li><a href='#'>HTML/CSS</a></li>
<li><a href='#'>jQuery</a></li>
<li><a href='#'>Python</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>FAQ</a></li>
<div class='socials'>
<li class='sorting-01 facebook'><a href='https://www.facebook.com/' rel='nofollow'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='https://twitter.com/' rel='nofollow'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='https://plus.google.com/'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin'><a href='https://id.linkedin.com/in/' rel='nofollow'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='https://www.youtube.com/channel/'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
              </div>
  </ul>
</nav>
</div>
<div class='clear'/>

4. Karena icon medsosnya memakai font awesome, maka pasang link ke Awesome Font berikut ini di atas isyarat </head>

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

5. SAVE! Simpan template.

Itu dia Cara Membuat Navigasi Menu Responsive Dropdown di Blog dan Menu Responsive Blog plus Link Media Sosial. Wasalam. (blogromeltea.blogspot.com).*

Sumber
Sumber

Cara Menciptakan Auto Readmore Blog Gambar Thumbnail Di Samping Judul

Auto Readmore Blog Gambar Thumbnail di Samping Judul  Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul
Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul Halaman Depan Blogger.
 
Berikut ini cara membuat Auto Readmore blog dengan posisi gambar di samping judul atau judul di kanan gambar thumbnail.

Sebelumnya saya sudah share cara menciptakan auto readmore lainnya, namun semuanya posisi gambar di bawah judul.

Seperti dijelaskan sebelumnya, auto read more yakni istilah di dunia blogging atau kalangan blogger merujuk pada tampilan halaman depan (homepage) blog berupa judul, gambar kecil (thumbnail), dan ringkasan goresan pena (cuplikan aliena pertama postingan).

Dianamakan Auto Read More alasannya yakni biasanya ada link/tulisan Read More atau Baca Selengkapnya di bab akhir. Disebut Auto karena arahan di bawah ini secara otomatis meringkas postingan, tanpa cara manual dengan klik "insert jump break" ketika menulis postingan.

Lebih jelasnya, lihat halaman depan blog ini, atau menyerupai screenshot gambar auto readmore blogger di bawah ini.

Auto Readmore Blog Gambar Thumbnail di Samping Judul  Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul


Nah, tutorial dengan arahan auto readmore yang sudah saya modifikasi di bawah ini akan menampilkan halaman depan blogger jadi menyerupai gambar di atas.

Cara meringkas goresan pena di halaman depan blog ini khususnya untuk template blog bawaan blogger versi simple (sederhana) yang masih menampilkan goresan pena secara utuh (full post) di halalaman depan.

Auto Readmore Blog Gambar Thumbnail di Samping Judul  Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul

Pilih Template Blog Bawaan Blogger versi Simple (Sederhana)

Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul

Login ke Blogger Anda. Buat blog gres atau ganti template dengan versi Simple. Lakukan langkah berikut ini:

1. Klik Tema > Edit HTML
 
Auto Readmore Blog Gambar Thumbnail di Samping Judul  Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul

1. Klik Tema > Edit HTML
2. Cari (Ctrl+F) arahan </head>
3. Copas/simpan arahan berikut ini di atas arahan </head> 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.post-thumbnail{float:left;margin-right:20px;background:#fff;margin-bottom: 5px;}
.post h2{font-size:20px;font-weight:normal;line-height:1.2em;margin-bottom:10px;margin-top:0}
.post h2 a,.post h3 a:visited{color:#0060A6;display:block;text-decoration:none}
.post h2 a:hover{color:#FF0084}
.post-footer,.date-header,.feed-links {display:none}
</style>
</b:if>
</b:if>

4. Cari dan HAPUS arahan berikut ini yang ada di bawah arahan <a expr:name='data:post.id'/> yang kedua.

    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
    </b:if>

5. Ganti dengan arahan berikut ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='140px' width='180px'/>
   <b:else/>
    <img alt='no image' class='post-thumbnail' height='140px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEEcPmczPI5bjSwkBVk34hVAFvJyOsamWykCcfYtCoYKH9jHGBfWIGQWCs3RMqxgxAcOJmAn3g8520_bMJNXfg3UWGigvV3anNnDxIRobyetzm-oSeU2oSy3cSe-32QmgtXR70XNLmTeo/s200-c/last%2528gr%2529256.jpg' width='180px'/>
   </b:if>
</b:if>
</b:if> 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

6. HAPUS dan GANTI kode  <data:post.body/> yang kedua dengan arahan berikut ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <data:post.snippet/> 
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

7. HAPUS juga arahan berikut ini yang ada di atas kode  <div class='post-footer'>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

8. Simpan arahan javascript berikut ini di atas arahan </body>

Kode ini untuk mengatasi gambar buram jikalau ukuran thumbnail imagenya lebih dari 72 pixel

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("Blog1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

9. Save! Simpan Tempate Anda.

Itu ia Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul. Semoga berfungsi dengan baik di blog Anda. Wasalam. (blogromeltea.blogspot.com).*