Membuat Widget Postingan Berdasarkan Label With Thumbnail

Membuat Widget Postingan Berdasarkan Label With Thumbnail
Adanya widget pada sebuah blog dapat membantu meminimalkan tampilan pada blog  dan memudahkan pencarian artikel.

Salah satu fungsi widget ini untuk memudahkan pengunjung dalam mencari subuah artikel atau berita yang di inginkan, widget ini juga berguna untuk meminimaliskan atau meringkas ruang pada template.
Membuat Widget Postingan Berdasarkan Label With Thumbnail
Bagi anda yang berminat untuk memasang widget ini silakan simak langkah-langkah nya dibawah ini.

Cara Membuat Widget Postingan Berdasarkan Label With Thumbnail

1. Login ke Bloger dengan akun anda
2. Pilih Tata Letak ---> Tambah Gadget ---> HTML/JavaScript.
3. Copy kode berikut ini pada HTML/JavaScript.

<style>
img.recent_thumb {padding:1px;width:70px;height:auto;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_with_thumbs">'); for (var i = 0; i < numposts; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}}var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)
{
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl=d;} else thumburl='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 Comment';
if(commenttext=='0 Comments') commenttext='No Comments';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

if(displaymore==true)
{
if (flag==1) towrite=towrite+' | ';
towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;
</script><script src="/feeds/posts/default/-/Artikel?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>
Keterangan :
Perhatikan Warna Font Merah : Ganti dengan nama label yang akan ditampilkan
Hijau : Mengatur Size Thumbnail
Biru : Mengatur Jumlah Tampilan Post
Kuning : Mengatur Jumlah karakter yang muncul di cuplikan post

4. Klik Simpan

Nah itu dia cara membuat Widget Postingan Berdasarkan Label alis Artikel per kategori. Semoga bermanfaat dan selamat mencoba
Read More

Cara Membuat Dua Kolom Widget di Bawah Postingan Blog

Cara Membuat Dua Kolom Widget di Bawah Postingan Blog
Bagi yang template bawaan nya tidak terdapat widget ini dan berencana ingin menambahkan widget tersebut ke template nya maka anda akan menemukan solusinya disini.
Membuat Dua Kolom Widget di Bawah Postingan Blog
Widget ini fungsinya sama saja seperti widget lainnya, adalah untuk menampilkan link atau menu navigasi ke postingan lain, menampilkan postingan berdasarkan kategori atau yang lainnya.

Cara Membuat Dua Kolom Widget di Bawah Postingan

1. Login Blogger
2. Pilih Template ==> Edit HTML
3. Cari kode ]]></b:skin> Copas Kode berikut diatas kode ]]></b:skin>
#postdua {margin:auto;padding: 0px 0px 10px 0px;width: 100%;max-width: 1000px;}

#postdua-wrapper {margin:auto;padding: 1px 0px 1px 0px;width:1000px;border:0;}
#postdua-wrapper {float: left;margin: 0px 4px auto;padding-bottom: 20px;width: 33%;text-align:left;color:#000;font: 12px Arial, Tahoma, Verdana;line-height: 1.6em;word-wrap: break-word;overflow: hidden;}
.postduabar {margin: 0; padding: 0;}
.postduabar .widget {margin: 0; padding: 10px 10px 0px 10px;}
.postduabar ul {color:#444;margin: 0 auto;padding: 0;list-style-type: none;}
.postduabar li {display:block;color:#333;font: 12px;line-height: 1.6em;margin-left: 0 !important;padding: 1px;border-bottom: 1px solid #f1f1f1;list-style-type: none;text-align: left;font: 12px Arial, Tahoma, Verdana;}
@media only screen and (max-width:768px) {
#postdua, #postdua-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}
#postduabar-wrapper{overflow:hidden!important;width:95%!important;padding:5px}
#credits p{text-align:center!important}
}

4. Cari Kode </body> Copas Kode berikut diatas kode </body>
<div id='postdua'>
<div id='postdua-wrapper'>
<div id='postduabar-wrapper'>
<b:section class='postduabar' id='postduabar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='postduabar' id='postduabar2' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div> </div>
5.  Save Template.

Keterangan
  1. Widget ini tanpa backgound jadi untuk memastika widget sudah terpasang atau  belum silakan cek di menu Tata Letak, 
  2. Jika Conten tidak muncul pada widget coba cari kode <div id='main-wrapper'> letakan kode no.4 di bawah kode </b:section> atau sebelum kode </div>
Nah itu dia sobat blogger Cara Membuat Dua Kolom Widget di Bawah Postingan.
Jika Ada Kesulitan silakan tanyakan di kolom komentar .
Read More
Ad

Cara Membuat Tombol Social Share Button Keren di Blog

Cara Membuat Tombol Social Share Button Keren di Blog
Tutorial blog kali ini tentang cara membuat tombol berbagi atau social share button yang keren yang bisa anda terapkan pada blog.

Widget Social Share Button atau bisa disebut widget tombol berbagi, berhubung bahwa kegunaan widget ini sangat efektif untuk kemajuan blog dalam hal share artikel, maka saya akan memberi anda tutorial membuat widget social share. Dalam widget ini menggunakan empat kode jaringan yang populer seperti media sosial berbagi ke (facebook, twitter, google + dan linkedin) dan menggunakan slide-in dan slide-out
Cara Membuat Tombol Social Share Button Keren di Blog
Nah, untuk membuat social share button keren ini, silakan ikuti tutorial berikut ini

# Kode CSS
Letakkan dan simpan kode CSS berikut ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* share this */
.share,h4.sharetitle{display:inline-block;float:left;position:relative}
h4.sharetitle{width:80px;text-transform:uppercase;font-size:15px;padding:0;margin-top:3px;margin-right:25px;text-align:center;font-weight:bold;color:#777}
h4.sharetitle:before{content:&quot;\f1e0&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;font-size:17px;padding:2px 35px 0;text-align:center;}
.sharethis{position:relative;margin:0}
.share{position:relative;margin:0;}
.share a,span.pl{display:inline-block;color:#fff;padding:12px 0 10px;width:85px;text-align:center;margin-right:8px;margin-bottom:8px;border-radius:5px;}
.share a:hover,span.pl:hover{box-shadow:0 0 10px rgba(0,0,0,.3)}
.share i,span.pl i {font-size:25px;padding:0;margin:0}
a.gp{background:#de3425}a.fb{background:#395796}a.tw{background:#4cb0ea}a.pr{background:#0a7111}a.pin{background:#ce2127}
span.pl{background:#ff9d40;cursor:pointer}
#share-menu{display:none}
.dropdown-menu{position: absolute;top: 100%;right:2px;z-index:9999;float: left;padding:0;margin:5px 0 0;font-size: 14px;list-style: none;-webkit-background-clip: padding-box;background-clip: padding-box}
ul.dropdown-menu{margin:10px 0 0 !important;background-color:#fff;box-shadow: 0 1px 4px rgba(0,0,0,.6);border-radius:2px}
.dropdown-menu li{list-style: none!important;margin: 0!important;padding:0 !important}
.dropdown-menu li a{clear:both;margin:0 !important;color:#444!important;font-weight:400;display:block;padding:5px 20px !important;border-radius:0 !important}
.dropdown-menu li a:hover{background:#2b427d!important;color:#fff !important}
</style>
</b:if>

# Kode HTML
Silahkan copy kode HTML berikut:
<b:includable id='share-tool' var='post'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
document.write('<div class="sharethis"><div class="share"> \
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
<i class="fa fa-google-plus"></i></a> \
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
<i class="fa fa-facebook"></i></a> \
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
<i class="fa fa-twitter"></i></a> \
<a class="pin" href="http://pinterest.com/pin/create/button/?source_url=' + siteurl + '" target="_blank" title="Share to Pinterest">\
<i class="fa fa-pinterest"></i></a> \
<span class="pl" id="pl" onclick="showhide()" title="More Share"><i class="fa fa-plus"></i></span> \
<ul class="dropdown-menu" id="share-menu"> \
<li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
<li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
<li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
<li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
<li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
<li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
<li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
<li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
<li><a href="http://reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Reddit">Reddit</a></li> \
</ul> \
</div><div class="clear"></div></div> \
');
//]]>
</script>
</b:includable>

Temukan dan ciutkan kode <b:includable id='post' var='post'> sehingga menjadi seperti ini:
<b:includable id='post' var='post'>…</b:includable>

Kemudian kode HTML yang dicopy di atas, letakkan di bawah kode yang diciutkan tadi.

# Kode pemanggil widget
Untuk memanggil widget social share button, copy code berikut ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4 class='sharetitle'>Shares</h4>
<b:include data='post' name='share-tool'/>
</b:if>

Lalu letakkan di bawah kode ini (untuk menampilkan widget di bawah postingan): 
<div style='clear: both;'/> <!-- clear for photos floats -->

</div>


# Kode JavaScript
Agar tombol more dapat berjalan dengan dengan baik, copy kode JacaScript berikut ini, lalu letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

function showhide(){var e=document.getElementById("share-menu");"block"!==e.style.display?e.style.display="block":e.style.display="none"};

//]]>

</script>

</b:if>

Perhatian:
Widget social share button ini menggunakan Font Awesome, jadi pastikan pada template anda sudah menggunakan Font Awesome.

Source : www.bungfrangki.com
Read More

Cara Mudah Membuat Tombol Atau Widget Back to Top di Blog

Cara Mudah Membuat Tombol Atau Widget Back to Top di Blog
Fungsi dari widget ini tidak lain ialah mengembalikan tampilan blog yang dibuka ke bagian paling atas dengan hanya mengklik saja pada tombol tersebut. Sehingga pengguna tidak perlu memainkan kursor lagi melakukan hal ini.

Dan biasanya tombol ini terletak atau terlihat dibagian bawah tampilan blog/desktop. Modelnya pun bermacam-macam, ada tombol back to top dengan efek animasi, bounce, flat/biasa saja, sampai dengan model rocket yang seperti ingin meninggalkan bumi. Selain bermacam-macam modelnya, sktruktur pembuatannya pun bermacam-macam pula, ada yang menggunakan pure CSS, JavaScript dan jQuery.
Tombol Atau Widget Back to Top di Blog
Tombol Back to Top yang hendak saya bagikan kali ini ialah yang terbuat dari jQuery dan dengan sedikit sentuhan CSS agar terlihat lebih hidup karena muatan animasinya. Jika Anda tertarik, silahkan ikuti langkah-langkahnya berikut ini.

Cara Membuat Widget “Back to Top” Animasi dengan jQuery

Terlebih dahulu, login ke blogger anda, masuk ke dasbor blog > Template > Edit HTML. Kemudian copy kode CSS berikut ini dan letakkan di atas kode </style> atau ]]></b:skin>
/* CSS back to top */
.to-top{background-color:#3b7dc1;visibility:hidden;color:#fff;width:38px;height:38px;line-height:34px;position:fixed;bottom:50px;right:30px;text-align:center;z-index:999;cursor:pointer;opacity:0;-webkit-transform:translateZ(0);transition:all .6s}
.to-top .fa{font-size:24px;vertical-align:middle}
.to-top.show{visibility:visible;bottom:25px;opacity:1;}
.to-top:hover{background-color:#64707a;color:#fff;opacity:1;}

Langkah selanjutnya ialah, letakkan kode berikut ini tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
(function(){$(document).ready(function(){return $(window).scroll(function(){return $(window).scrollTop()>600?$("#to-top").addClass("show"):$("#to-top").removeClass("show")}),$("#to-top").click(function(){return $("html,body").animate({scrollTop:"0"})})})}).call(this);
//]]>
</script>

Simpan template, dan lihat hasilnya dengan mengscroll tampilan blog ke bawah.

Jika widgetnya tidak berjalan sempurna atau malah tidak dapat terbuka sama sekali, kemungkinan pada template anda belum ditambahkan kode jQuery library seperti ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Letakkan kode tersebut di atas kode </head>

Untuk menampilkan icon Font Awesome pada tombol ini, pastikan di template anda sudah ditambahkan Cheatsheet untuk Font Awesome, seperti berikut ini:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Letakkan juga kode ini di atas kode </head>. Kemudian jangan lupa untuk simpan template. Demikian tutorial tentang cara membuat tombol atau widget Back to Top di blogger/blogspot. Semoga membantu dan selamat mencoba.
Read More
Ad

Cara Membuat Efek Loading Animasi Keren Pada Blog

Cara Membuat Efek Loading Animasi Keren Pada Blog
Banyak tutorial yang memberikan cara membuat efek loading animasi di blogger, namun tidak semuanya yang fast loading atau loadingnya cepat. Disini saya akan sharing tutorial mudah cra menghias blog dengan animasi pada blogspot.

Loading yang saya berikan ini milik salah satu blog yakni Panji.id dan semoga dengan dishare kembali tutorial ini bisa membantu sobat yang ingin memasangnya untuk mempercantik blognya masing-masing.
Membuat Efek Loading Animasi Keren Pada Blog

Efek loading ini juga berguna ketika blog Anda belum termuat seutuhnya dan tidak terlihat acak-acakan ketika sudah memuat seutuhnya tampilan dari blog Anda. Efek inipun hanya menggunakan CSS dan HTML jadi tidak memberatkan loading halaman Anda.

Cara Membuat Efek Loading Animasi Pada Blogspot

Silakan masukkan kode CSS dibawah ini kedalam template HTML Anda.

#page-loader{width:100%;height:100%;background:#2980b9;color:#2980b9;opacity:.99;position:fixed;top:0;left:0;z-index:9999;}
.loading-wrapper{width:250px;position:fixed;top:40%;left:50%;margin-left:-125px;}
.container,.loader,.tp-loader{position:relative;}
.tp-loader{z-index:10000;}
.tp-loader.spinner{width:30px;height:30px;margin:0 auto 10px;background-color:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-animation:tp-rotateplane 1.2s infinite ease-in-out;animation:tp-rotateplane 1.2s infinite ease-in-out;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.loader-job,.loader-name{font-weight:200;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;text-align:center;}
.loader-name{color:#fafafa;opacity:.9;font-size:32px;letter-spacing:-2px;padding-left:2px;padding-right:2px;margin-top:12px;transition:all .4s ease-in-out;}
.loader-job{margin-bottom:40px;margin-top:5px;color:#d8d8d8;font-size:12px;transition:all .4s ease-in-out;}
.loader-left{-webkit-transform:translateX(-40px);-moz-transform:translateX(-40px);-o-transform:translateX(-40px);transform:translateX(-40px);opacity:0;}
.loader-right{-webkit-transform:translateX(40px);-moz-transform:translateX(40px);-o-transform:translateX(40px);transform:translateX(40px);opacity:0;}
.loader-up{-webkit-transform:translateY(-80px);-moz-transform:translateY(-80px);-o-transform:translateY(-80px);transform:translateY(-80px);opacity:0!important;}
.loader-down{-webkit-transform:translateY(80px);-moz-transform:translateY(80px);-o-transform:translateY(80px);transform:translateY(80px);opacity:0;}
.loader-hide{opacity:0;}
.loader{display:inline-block;text-align:center;margin:0 auto;width:30px;height:30px;border:4px solid #Fff;top:50%;animation:loader 2s infinite ease;}
.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#fff;animation:loader-inner 2s infinite ease-in;}
.loader-animation{text-align:center;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
.footer-social-icons a,.social-icons a{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;color:#fff;}
@keyframes loader{0%{transform:rotate(0);}25%,50%{transform:rotate(180deg);}100%,75%{transform:rotate(360deg);}}
@keyframes loader-inner{0%,100%,25%{height:0%;}50%,75%{height:100%;}}

Selanjutnya silakan taruh kode HTML dibawah ini tepat dibawah kode <body> atau <body...

<div class='loader-container' id='page-loader'>
<div class='loading-wrapper'>
<div class='loader-animation' id='loader-animation'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
<div class='loader-name' id='loader-name'>
<strong>WELCOME</strong>
</div>
<strong><p class='loader-job' id='loader-job'>Mohon Tunggu Sebentar</p></strong>
</div></div></div>

Silakan Anda tambahkan script di bawah ini di atas </body>

<script src='https://rawgit.com/Txmvp/Animation/master/main.js' type='text/javascript'></script>

Selamat mencoba 😑😊.

Thanks to : https://www.mrsdzgn.com
Read More

Membuat Navigasi Menu Blog Responsive Terbaik Plus Sosial Link

Membuat Navigasi Menu Blog Responsive Terbaik Plus Sosial Link
Pada kesempatan kali ini saya akan share cara membuat menu navigasi dengan social media di blog. Fungsi dari menu navigasi ini, yaitu untuk memudahkan para pengunjung blog kita untuk mencari kategori isi postingan pada blog tersebut. Selain itu, tampilan dari menu navigasi yang disertai tombol sosial media ini sangat bagus dan terlihat sangat keren.
Navigasi Menu Blog Responsive Terbaik plus Sosial Link
Jika sobat tertarik untuk memasang menu navigasi plus social media ini silakan bisa mengikuti tutorialnya dibawah ini :

Cara memasangnya

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

.main-nav {background:#fff;border-top:1px solid #f1f1f1;border-bottom:4px double #eaeaea;display:block;width:100%;margin:0 auto;max-width: 940px;margin-bottom: 25px;margin-top: 15px;}
.menu {display: block;padding: 5px 0;margin: 10px 0;}
.menu li {display: inline-block; position: relative; z-index: 10;}
.menu li.home, .menu ul li ul li{margin:0;}
.menu ul li a, .menu ul li ul li a{border:0;}
.menu ul li::after, .menu ul li ul li::after{height:0;}
.menu li{margin-left: -4px;}
.menu li a {border-right: 1px solid #eee; font-size: 15px; font-weight: bold; padding:0 15px; text-transform: uppercase; text-decoration: none; line-height:18px; display: block; color: #222; transition: all 0.2s ease-in-out 0s;}
.menu li::after {content: '';display: block; width: 0; height: 3px; background: #fff; transition: width .3s;}
.menu li:hover::after, .menu li.home::after{width: 100%; //transition: width .3s;}
.menu li a:hover,.menu li:hover>a {}
.menu ul {visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 160px; position: absolute; left: 0px;  background: #fff; z-index: 9;    transform: translate(0,20px); transition: all 0.2s ease-out;}
.menu ul:after {line-height: 14px; bottom: 100%; left: 20%; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px;}
.menu ul li {display: block; float: none; background: none; margin: 0; padding: 0;}
.menu ul li a, .menu ul li ul li a{border-bottom:1px solid #eaeaea;}
.menu ul li a {font-size:14px;display: block;text-transform:none;color: #333;background: #fafafc;padding: 10px 0 10px 15px;}
.menu ul li a:hover,.menu ul li:hover>a {color: #009CCC;}
.menu li:hover>ul {visibility: visible; opacity: 1; transform: translate(0,0);}
.menu ul ul {left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out;}
.menu ul ul:after {content: " "; left: -6px; top: 10%; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #009CCC; border-width: 6px; margin-top: -6px;}
.menu li>ul ul:hover {visibility: visible; opacity: 1; transform: translate(0,0);}
.resp-desk {display: none; padding: 15px 15px; text-transform: uppercase; font-weight: 600;}
.resp-desk {}
.resp-desk a{color: #222;}
.social-ico{float:right; display:inline; line-height:45px; margin-right:13px;}
.social-ico a{padding:0px 6px; font-size:18px; opacity:.9; color:#222;}
.social-ico a:hover{opacity:1}
a.homer {}
@media (max-width: 800px) {
.menu {display: none;}
.resp-desk,.resp-desk1 {display: block; margin-top:0px;}
nav {margin: 0; background: none;}
.menu {}
.menu li {display: block; margin: 0;}
.menu ul li a{margin-left:25px;}
.menu li a {background: #fbfbfb;border: 0;color: #333;padding: 10px 0 10px 15px;border-bottom: 1px solid #f1f1f1;}
.menu li a:hover,.menu li:hover>a,.menu ul li a:hover,.menu ul li:hover>a {background: #F6F6F6; color: #909090;}
.menu ul {visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial;}
.menu li:hover>ul {visibility: visible; opacity: 1; position: relative; transform: initial;}
.menu ul ul {left: 0; transform: initial;}
.menu li>ul ul:hover {transform: initial;}
.with-ul::after,.menu ul::after{display:none;color:#909090; border-bottom-color:#909090;}
.menu li::after{height:0;}
.social-ico{margin:-51px 12px 0 0;}
}
#search_box {width:50px;position:relative;height:40px;float:right}
#search_box #search{float:right;top:0;right:50px;position:absolute;border:1px solid #d9e0e2;border-right:0;display:none}
#search_box #search #search_text{color:#888;width:210px;padding:10px;font-size:14px;border:0 none;height:40px;margin-right:0;outline:none;background:#fff;float:left;box-sizing:border-box;transition:all .15s}
#search_box #search #search_text:focus{background:#efefef}
#search_box .search_button{float:right;border:1px solid #fff;color:#888;height:40px;width:50px;text-align:center;line-height:45px;display:inline-block;cursor:pointer}
#search_box .search_button.active,#search_box .search_button:hover{background:#00aa9f;color:#fff;}

3. Copas kode HTML Navigasi Menu Blog Responsive Terbaik ini di bawah kode header template Anda.

<!-- Main Menu Start -->
<nav class='main-nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <div class='resp-desk'><a href='#' id='duled'><i class='fa fa-reorder'/> MENU</a></div> 
<div class='social-ico'>
<!-- Social Profile Icons -->
<a href='YOUR-FACEBOOK-URL' rel='nofollow' title='Like us'><i class='fa fa-facebook'/></a>
<a href='YOUR-TWITTER-URL' rel='nofollow' title='Follow us'><i class='fa fa-twitter'/></a>
<a href='YOUR-GOOGLE+-URL' rel='nofollow' title='Google Plus'><i class='fa fa-google-plus'/></a>
<a href='RSS-FEED-URL' rel='nofollow' title='instagram'><i class='fa fa-instagram'/></a>
<a href='RSS-FEED-URL' rel='nofollow' title='Rss feeds'><i class='fa fa-rss'/></a>
<div id='search_box'>
<form action='/search' id='search' method='get'>
<input class='search_text' id='search_text' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Press Enter to Submit&apos;;}' onfocus='if (this.value == &apos;Search...&apos;) {this.value = &apos;&apos;;}' type='text' value='Search...'/>
</form>
<div class='search_button'><i class='fa fa-search'/></div>
</div>
</div>
<ul class='menu'>
<li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a class='with-ul' href='#' itemprop='url'><span itemprop='name'>Categories</span> <i class='fa fa-angle-double-down'/></a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
</li>
<li><a href='#'>Sub-Menu 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='with-ul' href='#' itemprop='url'><span itemprop='name'>Dropmenu</span> <i class='fa fa-angle-double-down'/></a>
<ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li>
<li><a href='#'>Sub-Menu 2</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
</li>
<li><a href='#'>Sub-Menu 3</a>
<ul>
<li><a href='#'>Sub Sub-Menu 1</a></li>
<li><a href='#'>Sub Sub-Menu 2</a></li>
<li><a href='#'>Sub Sub-Menu 3</a></li>
<li><a href='#'>Sub Sub-Menu 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Startups</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Venture</span></a></li>
</ul>
</nav>
<div class='clear'/>
<!-- Main Menu End -->

4. Copas kode JS Navigasi Menu Blog Responsive Terbaik ini di atas kode </body> atau </header>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
 var touch = $('#duled');
 var menu = $('.menu');
 $(touch).on('click', function (e) {
  e.preventDefault();
  menu.slideToggle();
 });
 $(window).resize(function () {
  var w = $(window).width();
  if (w > 800 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
!function(){$(".search_button").on("click",function(t){t.preventDefault(),$("#search").animate({width:"toggle"}).focus(),$(".search_button").toggleClass("active")})}()
//]]>
    </script>

5. Save!

Demikian Navigasi Menu Blog Responsive Terbaik plus Sosial Link dan Kotak Pencarian. Semoga bermanfaat dan selamat mencoba..

Script by : http://www.contohblog.com

Read More
Ad

Membuat Navigasi Menu Responsive Dropdown Keren di Blogger

Membuat Navigasi Menu Responsive Dropdown Keren di Blogger
Berikut ini cara memasang atau cara membuat Menu Responsive di Blogger plus Dropdown. Menu navigasi adalah menu yang ditampilkan pada halaman blog atau website yang bertujuan untuk memudahkan pengunjung dapat mengakses seluruh isi konten blog. Menu navigasi biasanya memuat label-label atau laman pada blog yang terdapat diatas header atau dibawah header blog.
Navigasi Menu Responsive Dropdown
Kali ini saya akan memberikan tutorial untuk membuat menu navigasi responsive, Nah, kenapa harus responsive? karena tuntutan digital sekarang ini banyak sekali pengguna internet yang menggunakan smartphone. Jika anda memasang menu responsive maka akan tetap terlihat oleh pengguna smartphone layaknya membuka dengan desktop atau komputer.

Cara Membuat Navigasi Menu Responsive Dropdown Keren di Blogger
1. Tema > Edit HTML
2. Pasang kode CSS Menu Responsive Dropdown berikut ini di atas kode ]]></b:skin>

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #333333;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}

#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}

#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }

}

3. Pasang kode HTML Menu Responsive ini di bawah kode header blog Anda. Biasanya disimpan di bawah kode </header>

<div id='cssmenu'>
<ul>
   <li><a href='#'>Home</a></li>
   <li class='active'><a href='#'>Products</a>
      <ul>
         <li><a href='#'>Product 1</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
         <li><a href='#'>Product 2</a>
            <ul>
               <li><a href='#'>Sub Product</a></li>
               <li><a href='#'>Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'>About</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>


4. Pasang Javascrip Menu Responsive ini di atas kode </body>  atau </head>

<script type='text/javascript'>
//<![CDATA[
(function($) {
  $.fn.menumaker = function(options) {
   
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);
      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) {
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });
        cssmenu.find('li ul').parent().addClass('has-sub');
        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };
        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }
          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);
      });
  };
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
   title: "Menu",
   format: "multitoggle"
});
});
})(jQuery);
//]]>
</script>

Demikian Cara Membuat Navigasi Menu Responsive Dropdown Keren di Blogger. Good Luck selamat mencoba....

Read More

Cara Gampang Memasang Recent Post by Label di Halaman Statis

Cara Gampang Memasang Recent Post by Label di Halaman Statis
Pada postingan kali ini Blog Inilah Coding akan memberikan widget Recent Post by Label yang bisa sobat pasang di halaman statis blog sobat. Widget ini merupakan hasil modifikasi dari widget Recent Post Widget dengan Navigasi. Widget ini berfungsi untuk menampilkan daftar artikel terbaru berdasarkan label.
Memasang Recent Post by Label di Halaman Statis

Widget ini bisa kita manfaatkan sebagai Sitemap atau daftar isi blog di halaman statis. Bagi yang ingin memasangnya, silakan ikuti langkah-langkah berikut ini.

Cara Memasang Recent Post by Label di Halaman Statis

Kode yang akan saya bagikan ini menggunakan ikon dari Fontawesome, jika belum ditambahkan. Tambahkan kode di bawah ini sebelum </head> pada Template editor.

<script type='text/javascript'>
//<![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("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Setelah menambahkan kode Fontawesome selanjutnya ikuti langkah di bawah ini

Buka halaman Blogger > Klik menu Halaman > Kemudian klik tombol Halaman baru untuk membuat postingan baru di halaman statis
halaman

Tambahkan kode di bawah ini di dalam tab HTML postingan

<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</div>
<style scoped="" type="text/css">
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}
a,a:link,a:visited{text-decoration:none;transition:all .3s}
button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0}
#recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#recentpostsae .recentpostel:hover{background-color:#fefefe}
#recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://2.bp.blogspot.com/-GeeSB564W-o/Wum3zpg8qNI/AAAAAAAAGmM/aRoomVJFtSQfUoAJrRjD6h1wTSU8J8DUQCLcBGAs/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed .next{float:right;margin:0 0 0 10px}
#recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
#recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
#recentpostnavfeed i{font-family:fontawesome;font-style:normal}
#recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
@media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 18;
var startfeed = 0;
var urlblog = "https://www.teknomatch.com";
var charac = 0;
var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/Smartphone"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>

Edit terlebih dahulu pada kode yang ditandai

NilaiKeterangan
var numfeed18 (Jumlah postingan yang ditampilkan di tiap halaman)
var urlbloghttps://www.teknomatch.com (Isi dengan alamat blog sobat)
var characIsi dengan jumlah summary post yang ingin ditampilkan

Edit pada bagian feed url ini, ganti Smartphone dengan nama label blog.

/feeds/posts/default/-/Smartphone

Jika ingin menampilkan feed halaman index saja tanpa label edit format feed jadi seperti ini

/feeds/posts/default

Setelah selesai, klik tombol Publikasikan dan lihat hasilnya pada blog sobat.
Widget ini hanya bisa dipasang satu kali, jadi lakukan pengeditan sebelum postingan dipublish
Nah, itulah Cara Gampang Memasang Recent Post by Label di Halaman Statis. Semoga bermanfaat dan selamat mencoba.

Source : www.arlinadzgn.com
Read More