Anak Sembada

Sound Mild SEO Friendly Blogger Template

2016-09-04T04:06:00.000+07:00

Sound Mild SEO Friendly Blogger Template - Template yang SEO Friendly ini saya namai dengan Sound Mild. Ini adalah template pertama buatan saya yang akan saya bagikan kali ini. Template Sound Mild ini sudah responsive di segala device. Bila teman-teman tertarik untuk mencoba template buatan saya ini bisa membaca lebih lanjut di bawah ini.

Sound Mild SEO Friendly Blogger Template

Sesuai dengan judulnya, Template ini sudah SEO friendly dan juga sudah responsive. Nah saya akan membagikan fitur-fitur template ini :

FEATURES	AVAILABILITY
Responsive	True
Google Testing Tool Validator	True
SEO Friendly	True
Mobile Friendly	True
Dynamic Heading	True
Adsense Reading	True
Valid Schema.org	True
Hight CTR	True
Personal Blog	True
Disqus Comment System	True
2 Column	True
Auto Read More With Thumbnail	True
Responsive Add Slot	True
Breadcrumbs	True
About Me Widget	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Responsive Dropdown Menu	True
News Ticker	True
Smooth Back To Top	True
Custom Subscribe Box Widget	True
Responsive	True
Google Testing Tool Validator	True
Custom Pop up Contact Form	True
Shortcodes	True
Unlimited Page Numbered	True
3 Comments System (Disqus,Blogger,Facebook)	True

Bila tertarik untuk mencobanya bisa donwload di bawah ini.

Oke itulah template yang saya bagikan dan saya beri nama Sound Mild SEO Friendly Blogger Template. Semoga teman-teman suka dengan template hasil karya saya. Jika ada kendala bisa hubungi saya melalui contact form. Terima Kasih.

Dilarang Menghapus / Mengedit link credit pembuat template.
Mohon hargai karya orang lain, agar kamu bisa dihargai. Terima kasih.

Memasang Subscribe Onscroll Cookie

2016-08-30T17:36:00.000+07:00

Memasang Subscribe Onscroll Cookie - Sebelumnya kita pernah membahas memasang popup like box facebook dengan onscroll cookie pada kali ini saya akan membagikan tutorial dalam javascript onscroll cookie untuk memasang subscribe. Cara kerjanya sama dengan popup like box facebook yang saya bagikan kemarin.

Mari kita ke langkah-langkahnya bila sobat tertarik untuk menggunakannya.

Memasang Subscribe Onscroll Cookie

1. Login ke Blogger > Template > Edit HTML

2. Salin kode CSS di bawah ini di atas kode </head>

<style type='text/css'>
/*<![CDATA[*/
.subscribe_box2{width:400px;margin:0;padding:0;position:fixed;right:0;bottom:0}
#subscribe-box2{width:100%;height:auto;background-color:#fff;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);box-shadow:0 10px 50px 0 rgba(0,0,0,.25);margin:0;padding:10px 0;border:1px solid #dedede;border-right:0;border-bottom:0;border-radius:5px 0 0}
#subscribe-box2 p{font-size:18px;color:#666;font-weight:300;text-align:center;line-height:20px;padding:10px 20px 0;margin:0}
#subscribe-box2 .emailfield{padding:0 20px 10px}
#subscribe-box2 .emailfield input{color:#777;padding:10px 10px 10px 30px;margin-top:10px;font-size:15px;font-weight:300;width:100%;background:#ebebeb;border:1px solid #ccc;border-radius:4px;box-shadow:rgba(0,0,0,.247059) 0 1px 3px inset,#f5f5f5 0 1px 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#subscribe-box2 .emailfield input:focus{outline:0;background:#f5f5f5}
#subscribe-box2 .emailfield .submitbutton{background:#F4836A;box-shadow:0 4px 0 0 #cb5940;color:#fff!important;border:none;font-weight:500;outline:0;width:100%;cursor:pointer;transition:all .4s ease-in-out}
#subscribe-box2 .emailfield .submitbutton:active,#subscribe-box2 .emailfield .submitbutton:hover{background:#fb6f50!important}
#subscribe-box2 .subs-title{font-family:Roboto,sans-serif;font-weight:900!important;color:#333!important;font-size:24px!important}
#subscribe-box2 .subs-title2{font-family:Georgia,sans-serif;font-style:italic;font-weight:400!important}
#subscribe-box2 .form-button:before,#subscribe-box2 .form-email:before,#subscribe-box2 .form-name:before{font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:.5em;top:-2px}
#subscribe-box2 .form-button,#subscribe-box2 .form-email,#subscribe-box2 .form-name{position:relative!important}
#subscribe-box2 .form-name:before{content:'\f007';color:#777;font-size:16px;position:absolute;left:10px}
#subscribe-box2 .form-email:before{content:'\f0e0';color:#777;font-size:16px;position:absolute;left:10px}
#subscribe-box2 .form-button:before{content:'\f1d8';color:#fff;font-size:18px;position:absolute;left:50%;margin-left:-70px}
#subscribe-box2 input.submitbutton{background-color:#F4836A!important}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.close-shareOnscroll{position:absolute;top:-15px;right:10px;font-family:Arial;font-size:24px;font-weight:700;cursor:pointer;width:25px;color:#555;height:25px;line-height:25px;text-align:center;background:#fff;border:1px solid #dedede;border-radius:100%}
@media screen and (max-width:414px){.subscribe_box2{width:100%}
#subscribe-box2{border-radius:0;border-left:0}
}
/*]]>*/
</style>

3. Simpan kode Javascript di bawah ini tepat di atas </body>

<script>
//<![CDATA[
  var appended = false,
    bookmark = document.createElement("div");
  bookmark.id = "subscribeOnscroll";
  bookmark.innerHTML = '<div class="subscribe_box2 slideInUp">\
<div id="subscribe-box2">\
  <p class="subs-title">SUBSCRIBE <span class="subs-title2">to Our Newsletter</span></p>\
                 <p>Sign up here with your email address to receive updates from this blog in your inbox.</p>\
             <div class="emailfield">\
              <form action="//feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&apos;//feedburner.google.com/fb/a/mailverify?uri=AnakSembada&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true" target="popupwindow">\
               <span class="form-name">\
               <input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name"/></span>\
               <span class="clear"></span>\
               <span class="form-email">\
               <input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email"/></span>\
<input name="uri" type="hidden" value="AnakSembada"/>\
<input name="loc" type="hidden" value="en_US"/>\
                <span class="form-button">\
                <input class="submitbutton" type="submit" onclick="hidesubscribebox()" value="Subscribe Now!"/></span>\
              </form>\
             </div>\
</div>\
<div class="close-shareOnscroll" onclick="hidesubscribe()">&#215;</div>\
              </div>\
';
function hidesubscribe(){document.getElementById("subscribeOnscroll").style.display="none"}function hidesubscribebox(){document.getElementById("subscribeOnscroll").style.display="none",createCookie("hideDialog","hide",7000)}function createCookie(e,o,n){if(n){var t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);var i="; expires="+t.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}function readCookie(e){for(var o=e+"=",n=document.cookie.split(";"),t=0;t<n.length;t++){for(var i=n[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(o))return i.substring(o.length,i.length)}return null}function eraseCookie(e){createCookie(e,"",-1)}onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>800&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("subscribeOnscroll").style.display="none"))};
//]]>
</script>

4. Simpan Template

Demo

Ganti AnakSembada dengan username feedburner blog sobat.

Demikian tutorial untuk memasang subscribe onscroll cookie. Semoga bermanfaat, Terima kasih.

Memasang Sitemap Responsive

2016-08-30T15:56:00.000+07:00

Memasang Sitemap Responsive - Begitu banyak sitemap yang sudah dibagikan oleh blogger-blogger lain. Nah, kali ini anak sembada akan membagikan sitemap yang responsive. Yang dimaksud responsive disini adalah jika seseorang membuka url sitemap dari device smartphone akan mmengikuti resolusi dari device tersebut.

Bila sobat ingin mencobanya bisa ikuti langkah-langkah di bawah ini;

Memasang Sitemap Responsive

1. Login ke Blogger

2. Buka Halaman baru.

3. Dan salin kode di bawah ini ke halaman tersebut.

<div id='show-cat'>
</div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://sembadakost.blogspot.com';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<style scoped="" type="text/css">
#show-cat{float:left;margin:20px 2% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:normal;border:1px solid rgba(0,0,0,0.1)}
#show-cat ul{margin:0;border-top:0 solid rgba(0,0,0,0.1);padding:0}
#show-post ul li{list-style-type:none;margin:0 0 0 -25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#show-post ul li:hover{margin-right:10px;border-color:#fcd3d3}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);transition:initial}
#navi-cat a:hover{color:#fff!important}
#show-cat ul li:last-child a{border-bottom:none}
#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:13px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post a{color:#333;font-size:14px}
#show-post a:hover{color:#f14b4b}
#navi-cat{padding:20px 0}
#navi-cat a{padding:5px 10px;background:rgba(0,0,0,0.7);margin:0 5px 0 0;color:#fff;border-radius:3px;}
#navi-cat a:nth-child(2){background:#f14b4b;margin:0 10px 0 0;color:#fff}
#navi-cat span{float:right;padding:5px 0;font-size:12px;color:rgba(0,0,0,0.5);font-weight:700}
#show-cat::-webkit-scrollbar{width:8px;height:8px}
#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}
#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
#show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}
@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}
@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>

Ganti sembadakost.blogspot.com dengan url blog sobat.

Demo

Itu dia cara memasang sitemap responsive pada sore ini. Semoga bermanfaat. Terima kasih.

Memasang Popup Like Box Facebook Dengan Onscroll Cookie

2016-08-29T22:16:00.000+07:00

Memasang Popup Like Box Facebook Dengan Onscroll Cookie - Selamat malam semua, di kota saya sedang hujan deras dan mudah-mudahan gak banjir yah, hehehe...Oke kali ini kita akan membahas tentang javascript onscroll. Javascript onscroll ini bisa kita memanfaatkan untuk memasang popup like box facebook, jadi cara kerjanya adalah jika saat kita scroll ke bawah maka popup facebook like box akan muncul. Dan facebook like box yang akan saya bagikan ini menggunakan tombol close dan popup like box facebook ini dilengkapi tombol "Don't Show Again"yang fungsinya widget tidak akan muncul selama sobat belum menghapus cookie browser.

Dan bila teman-teman tertarik untuk mencobanya bisa mengikuti langkah-langkah di bawah ini.

Memasang Popup Like Box Facebook Dengan Onscroll Cookie

1. Login ke Blogger > Template > Edit HTML

2. Salin kode CSS di bawah ini di atas kode </head>

<style>
/*<![CDATA[*/
.close-fbbox,.close-fbcookie{background:#fff;transition:all .4s ease-in-out;color:#555;cursor:pointer}
.fbbox-wrapper{width:360px;position:fixed;left:50%;margin-left:-180px;top:50%;margin-top:-131px;height:auto;background-color:#fff;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);box-shadow:0 10px 50px 0 rgba(0,0,0,.25);padding:10px;border:1px solid #dedede;border-radius:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:1000000}
.close-fbbox{position:absolute;top:-15px;right:-15px;font-family:Arial;font-size:24px;font-weight:700;width:25px;height:25px;line-height:25px;text-align:center;border:1px solid #dedede;border-radius:100%}
.close-fbcookie{padding:1px 5px;border:1px solid #dedede;border-radius:2px;font:11px Arial;display:inline;float:left;line-height:1}
.close-fbcookie span{font-size:18px;font-weight:700;vertical-align:middle}
.close-fbbox:hover,.close-fbcookie:hover{background:#ddd;border:1px solid #ccc}
#fbOnscroll .layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.7);z-index:999999}
.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
}
@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
/*]]>*/
</style>

Baca Juga : Cara Membuat Popup Like Box Facebook

3. Salin kode Javascript di bawah ini tepat di atas kode </body>

<script>
//<![CDATA[
  var appended = false,
  bookmark = document.createElement("div");
  bookmark.id = "fbOnscroll";
  bookmark.innerHTML = '<div class="fbbox-wrapper zoomInUp">\
  <iframe name="f13bea94f064144" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&amp;app_id=113869198637480&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FuN4_cXtJDGb.js%3Fversion%3D42%23cb%3Df19b772d4d20444%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff1ba7fe51c4d354%26relation%3Dparent.parent&amp;container_width=613&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Fsembadakost&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;small_header=false" style="border: none; visibility: visible; width: 340px; height: 214px;" class=""></iframe>\
<div class="close-fbcookie" onclick="hidesubscribebox()"><span>&#215;</span> Don\'t Show Again</div>\
<div class="close-fbbox" onclick="hidesubscribe()">&#215;</div>\
              </div>\
              <div class="layer fadeIn"></div>\
';
function hidesubscribe(){document.getElementById("fbOnscroll").style.display="none"}function hidesubscribebox(){document.getElementById("fbOnscroll").style.display="none",createCookie("hideDialog","hide",7000)}function createCookie(e,o,n){if(n){var t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);var i="; expires="+t.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}function readCookie(e){for(var o=e+"=",n=document.cookie.split(";"),t=0;t<n.length;t++){for(var i=n[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(o))return i.substring(o.length,i.length)}return null}function eraseCookie(e){createCookie(e,"",-1)}onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>800&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("fbOnscroll").style.display="none"))};
//]]>
</script>

4. Simpan Template

Ganti sembadakost dengan ID facebook atau fanpage facebook sobat. Angka 700 untuk lamanya cookie dan 800 untuk tinggi kemunculan like box ketika di scroll

Demo

Demikian tutorial dari anak sembada untuk memasang popup like box facebook dengan onscroll cookie pada malam hari yang hujan deras ini. Semoga bermanfaat. Terima kasih.

Memasang Menu Navigation Pada Blog

2016-08-29T16:01:00.002+07:00

Memasang Menu Navigation Pada Blog - Iya, pada sore hari ini ketemu lagi dengan anak sembada. Kali ini kita akan membahas tutorial untuk memasang menu navigation pada blog. Menu yang anak sembada bagikan kali ini adalah meni yang onclick sebelah kiri, bisa melihat gambar di bawah ini.

Bagaimana? Apakah teman-teman tertarik? kalau tertarik mari kita sama-sama menuju ke langkah-langkah di bawah ini :

Memasang Menu Navigation Pada Blog

1. Login ke Blogger > Template > Edit HTML

2. Salin Kode di bawah ini tepat di bawah kode <body

<div class='darkshadow'></div>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='wrapper'>
<div class='profilemenu'>
<img alt='Admin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkO-PHfjIJTvokLKTGgqdqayGsTO3tIetk_hOtiw9dnpqcipERxPrihtI-zKM1vvbeOlUZAeB6DGmY3LSZ6XoGg0znOUNCKML90_ndTXv3rhdzfuLO9dYpPPUH3o1m_SXQspNhY9fJg7g/s1600/noimage.png' title='Admin'/>
<h3>Nama Admin</h3>
<a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'></i></a>
<p>emailkamu@gmail.com</p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li>
</ul>
</div>
<ul class='nav nav-menu2'>
<li><a class='waves-effect' href='/' itemprop='url' expr:title='data:blog.title'><span itemprop='name'><i class='fa fa-home'></i> Home</span></a></li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-trophy'></i> Ranking</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Players</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Groups</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Company</span></a></li>
</ul>
</li>
<li><a class='waves-effect' href='#' itemprop='url' title='News'><span itemprop='name'><i class='fa fa-newspaper-o'></i> News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-inbox'></i> Inbox</span></a></li>
<h2>Submenu</h2>
<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-gear'></i> Settings</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='My File'><span itemprop='name'><i class='fa fa-file'></i> My File</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Upload'><span itemprop='name'><i class='fa fa-cloud-upload'></i> Upload</span></a></li>
</ul>
</div>
</nav>

Oia, saya lupa, untuk menu navigation ini blog sobat harus sudah ada jQuery dan Font Awesome agar bisa jalan.

3. Simpan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Material Design Navigation */
.toggleMenu{color:#fff;padding:10px;font-size:25px;float:left;margin-right:20px}h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}
.dropdowns{font:normal normal 14px Roboto,Arial,sans-serif;background:#fff;overflow:auto;position:fixed;z-index:99;bottom:0;width:300px;left:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.nav-menu2{list-style:none;margin:0;*zoom:1;float:left;padding:0}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}.sub-menu{transition:all .5s ease-in-out}
.nav-menu2 ul{list-style:none;margin:0;width:auto;white-space:nowrap}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0}
.nav-menu2 > li{float:left;width:100%}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#666}
.nav-menu2 > li:hover > a{background:#E6E6E6}
.nav-menu2 li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;padding:0}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 li li a.click ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444}
.nav-menu2 li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit}
.nav-menu2 li .dropdown:hover:after{color:#000}
.nav-menu2 li i{font-size:18px;width:35px}.nav li a.click{opacity:1}
.nav-menu2 h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999}
.dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important}
.dropdowns .profilemenu{padding:10px;background:#f8f8f8;border-bottom:1px solid #ddd;line-height:2}
.dropdowns h3{font-size:14px}.nav-menu2 p{font-size:13px}
.dropdowns img{width:70px;height:70px;border-radius:100%}
#info2{float:right;border-radius:100%;padding:0 10px;color:#999}
#info2:hover{background:#ddd}
#nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#nav-menu1 li{width:100%}
#nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666}
#nav-menu1 li a:hover{background:#e1e1e1}
#nav-menu1.shows{visibility:visible;width:200px;height:130px}
.dropdowns.shows{left:0;opacity:1}
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.darkshadow.shows{visibility:visible;opacity:1}

4. Simpan kode javascript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
$(document).ready(function(){$("#info2").click(function(){$("#nav-menu1").toggleClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".dropdowns").removeClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".darkshadow").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".darkshadow").toggleClass("shows");});});
//<![CDATA[
// Sub Nav
var Script=function(){jQuery('.nav-menu2 .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.nav-menu2'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".nav-menu2").scrollTo("-="+Math.abs(diff),500);else $(".nav-menu2").scrollTo("+="+Math.abs(diff),500)})}();
//]]>
</script>

5. Simpan Template.

Dan untuk memanggil / memunculkan menu dari samping kiri letakkan kode HTML di bawah ini di bawah kode <body

<a class='toggleMenu ripple' href='javascript:;'><i class='fa fa-bars'></i></a>

Biar lebih jelas bisa melihat demo di bawah ini

Demo

Demikian tutorial untuk memasang menu navigasi pada blog dari anak sembada pada sore hari ini. Semoga bermanfaat. Terima kasih.

Cara Membuat Widget Breaking News di Blog

2016-08-26T16:10:00.001+07:00

Cara Membuat Widget Breaking News di Blog - Halo teman-teman, apa kabar? semoga sehat semua. Setelah beberapa hari tidak update postingan, kali ini anak sembada akan membagikan tutorial yang berhubungan dengan widget. Iya, kita akan membahas cara membuat widget breaking news di blog.

Widget ini fungsinya untuk menampilkan postingan yang baru dengan thumbnail dengan efek slide. Sobat tidak perlu kwatir karena widget ini sangat ringan dipasang di blog. Nah, jika teman-teman tertarik untuk mencobanya bisa ikuti langkah-langkah di bawah ini:

Cara Membuat Widget Breaking News di Blog

1. Buka Blogger > Template > Edit HTML

2. Salin kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

 /* CSS News Ticker */
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}

Baca Juga : Memasang Kotak Widget Social media di Blog

2. Dan salin kode di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News ticker by http://sembadakost.blogspot.com
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

3. Tambahkan kode di bawah ini di antara tag pembuka <body> dan tag penutup </body>

<div class='ticker-wrap' data-domain='sembadakost.blogspot.com'>
<div id='ticker'>
</div>
</div>

Ganti sembadakost.blogspot.com dengan url blog sobat.

Demo

Oke, demikian tutorial dari anak sembada untuk cara memasang widget breaking news di blog. Semoga bermanfaat, Terima kasih.

Memasang Chat Box Messenger Facebook di Blog

2016-08-23T20:34:00.000+07:00

Memasang Chat Box Messenger Facebook di Blog - Chat Box adalah salah satu sarana di blog yang digunakan admin blog untuk berinteraksi dengan pengunjung/visitor. Sudah banyak layanan yang menyediakan chat box mau itu gratis atau berbayar, tapi kali ini anak sembada akan membagikan chat box dengan messenger facebook popup yang pastinya gratis. Bila teman-teman mau mencobanya, mari kita duduk sama untuk simak langkah-langkah di bawah ini.

Memasang Chat Box Messenger Facebook di Blog

1. Login ke Blogger > Template > Edit HTML

2. Copykan kode di bawah ini tepat di atas kode </head>

<style>
.chat_box {
  background: #fff;
  width: 250px;
  height: 160px;
  position: fixed;
  bottom: -125px;
  left: 60px;
  transition: all .3s;
  border: 1px solid transparent;
  border-radius: 3px 3px 0 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
  -moz-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
  box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
  overflow: hidden;
  z-index:1000000;
}

.pesan_chat {
  text-align: center;
  text-decoration: none;
  display: block;
  height: 100%;
  padding: 5px 5px 15px;
}

.chat_button {
  background: #4d90fe;
  border: 0;
  margin: 0 auto;
  padding: 5px 18px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  display: inline-block;
  border-radius: 3px;
  transition: all .3s;
  text-decoration: none;
}

.chat_button:hover {
  background: #365899;
}

.chatheader {
  margin: 0 auto;
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  font-size: 18px;
  font-weight: 700;
  color: #616161;
  text-align: center;
  display: block;
  cursor: pointer;
}

.pesan_chat p {
  color: #616161;
  font-size: 16px;
  margin: 10px;
}
</style>

3. Salin kode di bawah ini tepat kode </body>

<div class="chat_box" id="chat">
  <div class="chatheader" onclick='showhidechat()'>Chat Room Anak Sembada
  </div>
  <div class="pesan_chat">
    <p>Hai! Sahabat Sembada bisa chat bareng di sini dengan Messenger,
      <br/> Terima kasih.</p>
    <a href="javascript: void(0)" onclick="popup('https://m.me/sembadakost');showhidechat()" title="Chat on Messenger">
      <span class="chat_button">Chat on Messenger</span></a>
  </div>
</div>
<script>
//<![CDATA[
function showhidechat(){var o=document.getElementById("chat");"0px"!==o.style.bottom?o.style.bottom="0px":o.style.bottom="-125px"}function popup(o){var t=650,n=400,e=(screen.width-t)/2,i=(screen.height-n)/2,s="width="+t+", height="+n;return s+=", top="+i+", left="+e,s+=", directories=no",s+=", location=no",s+=", menubar=no",s+=", resizable=no",s+=", scrollbars=no",s+=", status=no",s+=", toolbar=no",newwin=window.open(o,"windowname5",s),window.focus&&newwin.focus(),!1};
//]]>
</script>

4. Simpan Template.

Baca Juga : Cara Memasang CSS Minifier di Blogger

Ganti sembadakost dengan ID facebook atau fanspage facebook sobat.

Demo

Demikian tutorial dari anak sembada untuk memasang chat box messenger facebook di blog. Semoga bermanfaat. Terima kasih.

Memasang Kotak Widget Social Media di Blog

2016-08-23T01:55:00.000+07:00

Memasang Kotak Widget Social Media di Blog - Social media sekarang sudah sangat berkembang pesat begitu juga untuk keperluan dunia blogger, karena dengan social media visitor/pengunjung blog kita bisa bertambah. Jadi hampir semua blogger menggunakan widget social media di blog nya. Pada kali ini anak sembada akan membagikan widget social media yang akan menghiasi blog sobat. Bila teman-teman tertarik untuk mencobanya mari sama-sama kita simak langkah-langkah di bawah ini.

Memasang Kotak Widget Social Media di Blog

widget menggunakan font awesome, jadi silahkan tambahkan link CSS di bawah ini di atas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Buka Blogger > Editor Template > Salin kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Sosial Media Widget */
#HTML68 .sosmedjev-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.sosmedjev-img{position:relative;max-height:140px;overflow:hidden}
.sosmedjev-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedjev-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedjev-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.sosmedjev-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.sosmedjev-float{text-align:center;display:table;width:100%;height:100%}
.sosmedjev-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedjev-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedjev-float a i{font-weight:normal;margin:0 5px 0 0}
.sosmedjev-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedjev-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedjev-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedjev-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .sosmedjev-icon i{font-family:fontawesome;margin:0 3px 0 0}
.sosmedjev-icon.fbl a{background:#3b5998}
.sosmedjev-icon.twitt a{background:#19bfe5}
.sosmedjev-icon.crcl a{background:#d64136}
.sosmedjev-icon.fbl a:hover,.sosmedjev-icon.twitt a:hover,.sosmedjev-icon.crcl a:hover{background:#404040}
.extender .sosmedjev-icon:hover a,.extender .sosmedjev-icon a:hover{color:#fff;}
.sosmedjev-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedjev-info p{margin:5px 0}
.sosmedjev-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedjev-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.sosmedjev-info h4:before,.sosmedjev-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedjev-info h4:before {margin-left:-50%;text-align:right;}

Agar tampilan lebih rapi sobat tambahkan kode di bawah ini

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

2. Selanjutnya salin kode di bawah ini di tag pembuka <body> atau tag penutup </body> terserah sobat mau meletakkannya dimana.

<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedjev-img'>
<img alt='Judul Blog' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI4ty9aZMgr9a2OdjIX6jh6AzMp2QlaCuG-lKgQddh1IO9f79OmKS7D05o8QEUR9WP_smtaOksYOCW_Zqn3yCn1VNEeIlRK7mBjuBofckPBU86_-_kfuntJZmTh9z8JL2H1uoY7OX85IJu/s1600/x-theme.png' title='Judul Blog' width='300'/>
<div class='aboutfloat-img'><span class='sosmedjev-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='sosmedjev-info'>
  <h4><span>Anak Sembada</span></h4>
<p>Blog Pemberi Informasi Blogger</p>
</div>
<div class='sosmedjev-wrpicon'>
<ul class='extender'>
<li class='sosmedjev-icon fbl'><a href='#' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
<li class='sosmedjev-icon twitt'><a href='#' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='sosmedjev-icon crcl'><a href='#' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>

Ganti yang saya tandai di atas sesuai dengan kemauan sobat.

Biar lebih jelas bisa lihat demo di bawah ini

Demo

Begitulah kira-kira tutorial dari anak sembada untuk memasang kotak widget social media di blog.

Semoga bermanfaat.
Terima kasih

Cara Memasang Widget Recent Post Slider

2016-08-22T23:51:00.000+07:00

Cara Memasang Widget Recent Post Slider - Widget recent post pasti hampir semua blogger yang memakainya dan bermancam model-modelnya. Dan kali ini anak sembada akan membagikan cara memasang widget recent post slider pada sidebar blog kita.

Di atas tadi sudah saya bilang recent post slider, jadi recent post ini memiliki efek slider otomatis dan juga thumbnail. Widget ini juga bisa diatur memunculkan artikel/postingan terbaru berdasarkan label. Dan ukurannya sudah disesuaikan dengan ukuran sidebar blog kita. Bagi teman-teman blogger yang berminat untuk mencobanya bisa ikuti langkah-langkah di bawah ini:

Cara Memasang Widget Recent Post Slider

1. Buka Blogger > Tata Letak > Buat widget baru HTML/Javascript > Copykan kode di bawah ini ke dalamnya.

<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{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/AVvXsEh2uX-hrW4tnimv5ilJyRrFapl2a7Dp11DMPPtUvNM_arcforOrZ_qjg7HvzTQEY1-tpsClMiTLVpd2UnQaCHn8w-adIGwR8XjDcsmCsUSH54o2CRlV1CCpw1KaFVdzs5UOim5X3rgVLCU/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></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.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$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.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "http://seosembada.blogspot.com",
  MaxPost: 8,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>

2. Simpan widget.

( Baca Juga : Cara Membuat Popup Like Box Facebook )

Biar lebih jelas sobat bisa lihat demo di bawah ini

Demo

Ganti http://seosembada.blogspot.com dengan url blog sobat.

Itulah tutorial cara memasang widget recent post slider di blog dari anak sembada. Semoga berguna.
Terima kasih.

Cara Memasang Daftar Isi Ala Kang Ismet

2016-08-22T18:45:00.000+07:00

Cara Memasang Daftar Isi Ala Kang Ismet - Daftar isi milik kang ismet ini sangat banyak diminati oleh blogger. Nah, sekarang anak sembada akan membagikan cara memasang daftar isi seperti +Kang Ismet kalau teman-teman mau lebih jelasnya bisa kunjungi blog kang ismet disini http://blog.kangismet.net/p/daftar-isi-blog-kang-ismet.html

Setelah teman-teman sudah melihat di blog beliau dan tertarik untuk mencobanya, mari kita sama-sama simak cara memasang daftar isi ala kang ismet di bawah ini.

Cara Memasang Daftar Isi Ala Kang Ismet

1. Buka Blogger

2. Buat Postingan/Artikel baru di halaman statis.

3. Copykan kode HTML di bawah ini pada tab HTML postingan.

<style type="text/css" scoped="scoped">
/* Multi Feed Loader /sembadakost.blogspot.com */
.list-entries{background:white;border:1px solid #d8d8d8}
.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}
.list-entries li{padding:1em;border-bottom:1px solid #ddd}
.list-entries .main-title{padding:0}
.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0!important}
.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}
.list-entries .title a:hover{text-decoration:underline;color:#5886a7}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none}
.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}
.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}
.list-entries .more-link a:hover{background-color:#71a555}
.list-entries{margin:7px;width:251px;float:left;font-size:11px}
</style>
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Pendidikan",
            url: "http://seosembada.blogspot.com/",
            tag: "Pendidikan"
        },
        {
            name: "Internet",
            url: "http://seosembada.blogspot.com/",
            tag: "Internet"
        },
        {
            name: "Template",
            url: "http://seosembada.blogspot.com/",
            tag: "Template"
        },
        {
            name: "Internet",
            url: "http://seosembada.blogspot.com/",
            tag: "Internet"
        },
        {
            name: "Gaya Hidup",
            url: "http://seosembada.blogspot.com/",
            tag: "Gaya Hidup"
        },
        {
            name: "Pendidikan",
            url: "http://seosembada.blogspot.com/",
            tag: "Pendidikan"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=8"
    }
};
</script>
<script type="text/javascript" src="https://rawgit.com/AnakSembada/multifeedblog/master/multifeedblog.js"></script>
<div style='clear: both;'></div>
</div>

Ganti kode yang saya tandai warna biru dengan judul kategori, url blog serta nama label blog.

( Baca Juga : Membuat Flat UI Color Picker di Blog )

4. Publish postingan.

Demo

Oke, itulah tadi cara memasang daftar isi ala kang ismet dari anak sembada. Semoga artikel ini bisa berguna dan bermanfaat. Terima kasih

Memasang Breadcrumbs Yang SEO Friendly

2016-08-22T16:16:00.000+07:00

Memasang Breadcrumbs yang SEO Friendly - Breadcrumbs adalah sebuah menu navigasi di blog yang letaknya biasa di atas postingan/artikel sebuah blog. Ada pun fungsi breadcrumbs ini biasanya untuk meletakkan link yang menuju home page serta label dan judul dari postingan/artikel tersebut. Breadcrumbs sangat penting untuk pendukung SEO sebuah blog.

Dan kali ini anak sembada akan membagikan breadcrumbs yang SEO friendly serta valid HTML5. kita langsung ke langkah-langkahnya.

Memasang Breadcrumbs Yang SEO Friendly

1. Buka Blogger > Template > Edit HTML > Copykan kode CSS ini sebelum ]]></b:skin> atau </style>

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

2. Cari kode HTML di template anda, seperti di bawah ini.

<b:includable id='main' var='top'>...</b:includable>

3. Copykan kode HTML di bawah ini tepat di bawah yang kode kita cari tadi.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Simpan template.

( Baca juga : Cara Optimasi SEO On Page )

Selanjutnya ini yang paling penting, sobat cek di Google testing tool untuk memastikan breadcrumbs sudah terpasang dengan benar atau belum. Demikian memasang breadcrumbs yang SEO friendly.

Terima kasih.

Template SEO Friendly N Light

2016-08-21T23:27:00.001+07:00

Template SEO Friendly N Light - Template SEO yang anak sembada bagikan kali ini adalah buatan dari blogger +Arlina Fitriyani . Saya juga pernah memakai template yang satu ini, template ini sangat responsive di segala device. Jadi saya rasa template ini cukup nyaman bagi blogger yang baru memulai untuk membuat blog. Bila teman-teman tertarik menggunakan template ini bisa simak di bawah ini.

Template SEO Friendly N Light

Seperti yang saya paparkan di atas tadi template ini sangat responsive dan memiliki fitur-fitur yang lumayan lengkap.

Inilah fitur-fitur dari template SEO ini:

FEATURES	AVAILABILITY
Responsive	True
Google Testing Tool Validator	True
SEO Friendly	True
Mobile Friendly	True
Dynamic Heading	True
Adsense Reading	True
Valid Schema.org	True
Hight CTR	True
Personal Blog	True
Disqus Comment System	True
2 Column	True
Auto Read More With Thumbnail	True
Responsive Add Slot	True
Breadcrumbs	True
About Me Widget	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Responsive Dropdown Menu	True
News Ticker	True
Smooth Back To Top	True
Custom Subscribe Box Widget	True
Responsive	True
Google Testing Tool Validator	True
Custom Pop up Contact Form	True
Shortcodes	True
Unlimited Page Numbered	True

Baca juga : Clone Template Responsive Bung Frangki

Bila tertarik menggunakan template ini bisa download di bawah ini.

Download

Itulah salah satu template yang saya sarankan untuk digunakan yaitu template SEO Friendly N Light.

Semoga bisa bermanfaat, Terima kasih.

Dilarang menghapus / mengedit / mengubah link kredit pembuat template.
Hargailah karya orang lain. Terima Kasih.

Membuat Flat UI Color Picker di Blog

2016-08-20T23:34:00.000+07:00

Membuat Flat UI Color Picker di Blog - Anak Sembada akan membagikan tutorial untuk membuat Flat UI color picker di blog tapi kali ini yang responsive, jadi jika sobat membuka di device smartphone tetap bisa menggunakannya. Sebelumnya apa fungsi color picker? fungsinya adalah kita dengan cepat mendapatkan kode warna yang kita inginkan tapi disini kode warna yang flat ui yah sesuai dengan judulnya. Dan kegunaanya color picker juga banyak, jika sobat yang suka ngopre template pasti suka mengganti warna yang ada di dalam template jadi dengan color picker anda sangat terbantu. Nah, keunggulan color picker yang saya bagikan ini tidak akan berpengaruh dengan loading blog karena widget ini hanya menggunakan HTML dan CSS saja. Oke silahkan ikuti langkah-langkah di bawah ini.

Membuat Flat UI Color Picker di Blog

1. Buka Blogger > Buat postingan baru pada halaman statis > copykan kode di bawah ini ke dalam halaman tersebut.

<div id="flatujevan">
    <ul class="flatui">
      <li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
      </li>
      <li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
      </li>
      <li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
      </li>
      <li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
      </li>
      <li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
      </li>
      <li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
      </li>
      <li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
      </li>
      <li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
      </li>
      <li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
      </li>
      <li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
      </li>
      <li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
      </li>
      <li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
      </li>
      <li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
      </li>
      <li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
      </li>
      <li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
      </li>
      <li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
      </li>
      <li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
      </li>
      <li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
      </li>
      <li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
      </li>
      <li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
      </li>
      <li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
      </li>
      <li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
      </li>
      <li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
      </li>
      <li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
      </li>
      <li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
      </li>
      <li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
      </li>
      <li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
      </li>
      <li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
      </li>
      <li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
      </li>
      <li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
      </li>
      <li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
      </li>
      <li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
      </li>
      <li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
      </li>
      <li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
      </li>
      <li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
      </li>
      <li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
      </li>
      <li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
      </li>
      <li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
      </li>
      <li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
      </li>
      <li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
      </li>
      <li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
      </li>
      <li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
      </li>
      <li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
      </li>
      <li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
      </li>
      <li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
      </li>
      <li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
      </li>
      <li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
      </li>
      <li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
      </li>
      <li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
      </li>
      <li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
      </li>
      <li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
      </li>
      <li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
      </li>
      <li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
      </li>
      <li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
      </li>
      <li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
      </li>
      <li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
      </li>
      <li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
      </li>
      <li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
      </li>
      <li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
      </li>
      <li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
      </li>
      <li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
      </li>
      <li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
      </li>
      <li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
      </li>
      <li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
      </li>
      <li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
      </li>
      <li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
      </li>
      <li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
      </li>
      <li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
      </li>
      <li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
      </li>
      <li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
      </li>
      <li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
      </li>
      <li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
      </li>
      <li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
      </li>
      <li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
      </li>
      <li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
      </li>
      <li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
      </li>
      <li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
      </li>
      <li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
      </li>
      <li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
      </li>
      <li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
      </li>
    </ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by sembadakost.blogspot.com */
#flatujevan ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatujevan ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatujevan ul.flatui li:hover{z-index:4}
#flatujevan ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatujevan ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatujevan ul.flatui li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatujevan ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatujevan ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatujevan ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatujevan ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatujevan ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatujevan ul.flatui li{width:100%}}
</style>

2. Publish postingan.

Baca juga : Cara Memasang CSS Minifier di Blogger

Lihat demo di bawah ini biar lebih jelas

Demo

Demo Responsive

Demo

Oke, demikian tutorial untuk membuat flat ui color picker di blog dari anak sembada.

Semoga bermanfaat
Terima kasih

Cara Membuat Pop Up Like Box Facebook

2016-08-20T21:33:00.000+07:00

Cara Membuat Pop Up Like Box Facebook - Selamat malam sobat blogger, ketemu lagi dengan Anak Sembada. Kali ini saya akan memberikan sedikit tutorial untuk membuat pop up like box facebook pada blog kita. Apa kegunaan pop up ini? seperti namanya "like box facebook" berarti widget ini untuk wadah yang akan menyukai fanpage facebook kita. Sebenarnya pop up like box facebook sudah banyak dibahas oleh blogger-blogger lain,tapi disini saya akan membuat yang lebih sederhana lagi.

Bagi yang berminat bisa mengikuti langkah-langkah di bawah ini:

Cara Membuat Pop Up Like Box Facebook

Teman-teman hanya perlu menambahkan kode di bawah ini pada widget blogger

Buka Blogger > Tata Letak > Tambahkan widget HTML/Javascript > copykan kode di bawah ini pada widget tadi.

<style scoped='' type='text/css'> 
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/sembadakost&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
</div>
</div>

Simpan widget

Ganti url http://www.facebook.com/sembadakost dengan url fanpage sobat

Bagi yang ingin memasang versi HTML5 yang SEO friendly silahkan copykan kode di bawah ini pada widget baru HTML/Javascript.

<style scoped='' type='text/css'> 
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<div class='fb-like-box' data-href='https://www.facebook.com/sembadakost' data-width='402' data-height='255' data-colorscheme='light' data-show-faces='true' data-header='true' data-stream='false' data-show-border='false' style='border:none;overflow:hidden;width:339px;height:200px;'></div>
</div>
</div>

Simpan widget, selanjutnya simpan kode di bawah ini setelah <body> atau sebelum </body>

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;appId=1734742426810894&amp;version=v2.0&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;

Biar lebih jelas sobat bisa melihat demo di bawah ini.

Demo

Demikian tutorial dari Anak Sembada untuk cara membuat pop up like box facebook.

Baca juga : Cara Membagi Postingan Blog Menjadi Beberapa Halaman

Cara Memasang Slide Out Tombol Follow di Blog

2016-08-19T16:39:00.000+07:00

Cara Memasang Slide Out Tombol Follow di Blog - Anak Sembada akan membagikan sebuah trik untuk memasang slide out tombol follow di blog pada sore hari yang indah ini. Tombol follow this blog memang sudah disediakan oleh blogger, tapi anak sembada akan membuat bawaan blogger itu menjadi slide out yang melayang di bawah blog.

Dengan efek slide out yang saya buat ini akan memudahkan pengunjung atau visitor blog kita jika mau mengikuti blog kita. Intinya pengunjung atau visitor kita akan mudah bila ingin mengikuti blog kita dan akan tertarik juga karena efek slide out nya. Oke, jika sobat tertarik bisa lihat langkah-langkah di bawah ini.

Cara Memasang Slide Out Tombol Follow di Blog

1. Buka Blogger > Tata Letak > Buat Widget baru dan copy kan kode di bawah ini.

<style scoped='' type="text/css">
/*<![CDATA[*/
#jevanfollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0}
.jevanfollowButton{background:#464646;color:#fff;font-size:13px;line-height:28px;padding:0 10px;text-decoration:none;position:absolute;top:-28px;right:0;display:block;border-radius:2px 2px 0 0;height:28px;font-weight:700}
.jevanfollowButton span{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOOhuGqabDpCcn24tuiizqx6MKOift1nlAiu2mqV1LFkr0vHxEP5X7i7hhZ-oU-KrOyWhMgtonOtoy8wKR8pwaClJrYfZ3KfL3usAJRM0ALFzgElmIDm-7IreEVTU7es98ocauzn5OqGy/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px}
.jevanfollowButton:hover,.jevanfollowButton:focus,.followActive,.followActive:hover{color:#fff}
.jevanfollowButton:hover span,.followActive span{background-position:0 -37px!important}
.followactive{background-color:#333}
.jevanfollowForm{padding:15px;margin:auto;text-align:center;font-size:12px}
.jevanfollowForm p{margin:10px 0}
.jevanFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c}
.jevanFollowFooter a{color:#aaa;background:none;text-decoration:none}
.jevanFollowFooter a:hover{color:#fff;background:none}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
!function(e){e(document).ready(function(){e.extend(e.easing,{easeOutCubic:function(e,o,t,a,n){return a*((o=o/n-1)*o*o+1)+t}});var o=e("#jevanfollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".jevanfollowButton").click(function(a){o.hasClass("followOpened")?(e(this).removeClass("followActive"),o.removeClass("followOpened").stop().animate({bottom:t},{duration:300,easing:"easeOutCubic"})):(e(this).addClass("followActive"),o.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})),a.preventDefault()})})}(jQuery);
/*]]>*/
</script>
<div id="jevanfollowSubscribe" style="bottom: -971px;">
  <div class="jevanfollowForm">
    <a class="jevanfollowButton" href="#" title="Follow"><b>+ Follow</b></a>
    <br />
    <a href="http://www.Blogger.com/follow-blog.g?blogID=8829841906232825281" title="join this site" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB_RrZcLcqILcV-emTpa8cLWTulo506IxPXdaEcVfWVmvKsg7qe498Qm-VlC8k_v_8c69akZXx-8FR_ewS9-26xwCEqEuGi9F0dfxQsj6_KJgnty1p7-3KlIAnjdyDfLNtvYwxCAIeDrsW/s1600/Follower.png" alt="Join on this site" /></a>
    <br />
    <p>with Google Friend Connect</p>
  </div>
</div>

Baca juga : Mempercepat Loading Blog Dengan Defer Image

Ganti kode yang ditandai dengan Blog ID anda.

Biar lebih jelas sobat bisa lihat demonya di bawah ini

Demo

Sekian trik untuk cara memasang slide out tombol follow di blog dari Anak Sembada.

Semoga bermanfaat
Terima kasih.

Cara Memasang CSS Minifier di Blogger

2016-08-19T01:52:00.000+07:00

Cara Memasang CSS Minifier di Blogger - Apa itu CSS minifier? CSS minifier adalah sebuah tools untuk mengecilkan atau mengoptimalkan kode CSS kita, sesuai dengan namanaya. Nah pertanyaan lagi muncul, apa keuntungan memakai tools CSS minifier ini? seperti yang saya bilang di atas ada kata "mengecilkan atau mengoptimalkan" nah, jika kita bisa mengecilkan kode CSS kita yang ada di template kita maka loading blog kita akan sedikit lebih ringan. Jika sobat tertarik ingin menggunakannya bisa simak di bawah ini.

Cara Memasang CSS Minifier di Blogger

1. Buka Blogger > Buat postingan di halaman statis > Copy kan kode di bawah ini di tab HTML yah bukan compose.

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssminifier .box p{margin:0 0 2px}
#cssminifier button{cursor:pointer;}
#cssminifier .col{width:48%;margin:0 auto 30px}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .right{float:right;margin-right:1%}
#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
#cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" /> 
<label for="stripAllComment">Strip all comments</label>
<input class="opt2" id="superCompact" type="checkbox" /> 
<label for="superCompact">Super compact</label>
<input class="opt3" id="betterIndentation" type="checkbox" /> 
<label for="betterIndentation">Keep indentation</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> 
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> 
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
</script>
</div>

2. Publish postingan.

Baca juga : Cara Membuat Ribbon Yang Keren

Jika sobat mau lebih jelas bisa lihat demo di bawah ini.

Demo

Itulah cara memasang CSS minifier di blogger dari Anak Sembada

Semoga bermanfaat.
Terima kasih

Cara Membagi Postingan Blog Menjadi Beberapa halaman

2016-08-19T00:44:00.001+07:00

Cara Membagi Postingan Blog Menjadi Beberapa Halaman - Oke, kali ini Anak Sembada akan memberikan tips untuk membagi postingan blog menjadi beberapa halaman. Bila sobat semua tertarik ikuti langkah-langkah berikut di bawah ini.

Cara Membagi Postingan Blog Menjadi Beberapa Halaman

1. Login ke Blogger > Buka Template > Copy kode di bawah ini sebelum ]]><b:skin> atau </style>

/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}

2. Kemudian copy kode di bawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>

Untuk Menambahkan halaman ganti maxIndex=4 dengan keinginan.

Baca juga : Membuat Messenger Facebok di Blog

3. Simpan Template.

4. Buat postingan baru, dan sobat copykan kode di bawah ini pada tab HTML

<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div>

5. Publish postingan sobat.

Biar lebih jelas teman-teman bisa lihat demo di bawah ini.

Demo

Kira-kira itulah sedikit tips dari Anak Sembada tentang cara membagi postingan blog menjadi beberapa halaman.

Semoga bermanfaat.
Terima kasih

Cara Redirect Page Not Found ke Halaman Lain

2016-08-18T21:10:00.000+07:00

Cara Redirect Page Not Found ke Halaman Lain - Selamat malam semua, ketemu lagi dengan admin Anak Sembada. Kali ini kita akan membahas cara redirect page not found ke halaman lain. Apa manfaatnya dari cara redirect ini? iya, jika sebuah halaman kita yang sudah terindex di SERP Google dan tiba-tiba kita hapus, maka jika ada yang berkunjung ke halaman tersebut akan disuguhkan pesan page not found. Nah, agar pengunjung/visitor tersebut tidak langsung menutup halaman tersebut, kita akan membuat halaman page not found tadi agar redirect ke halaman yang kita inginkan. Oke kita langsung ke cara dan langkah-langkahnya.

Cara Redirect Page Not Found ke Halaman Lain

copy kode di bawah ini

<script type = "text/javascript">
mari_redirect = setTimeout(function() {
window.location.href = 'http://URLPAGEANDA';
}, 10);
</script>

Ganti URLPAGEANDA dengan url yang anda inginkan.Disini saya akan meberikan contoh redirect ke sitemap blog, maka hasilnya lengkapnya seperti ini.

<script type = "text/javascript">
mari_redirect = setTimeout(function() {
window.location.href = 'http://sembadakost.blogspot.co.id/p/ours-sitemap.html';
}, 10);
</script>

Setelah melakukan hal yang di atas, sobat masuk ke Blogger > Preferensi penelusuran > Pesan khusus untuk laman tidak ditemukan > Edit, Kemudian paste kan kode yang di atas tadi ke kolomnya kemudian simpan perubahan.

Baca juga: Cara Menambahkan Recent Posts di Blog

Coba sobat kunjungi halaman sobat yang sobat hapus, jika langsung redirect ke halaman sitemap (sesuai contoh di atas yang saya buat) maka kita berhasil.

Oke, Itulah sedikit trik dan tips cara redirect page not found ke halaman lain. Semoga bermanfaat.

Terima kasih.

Mempercepat Loading Blog Dengan Defer Image

2016-08-18T15:40:00.000+07:00

Mempercepat Loading Blog Dengan Defer Image - Halo teman-teman blogger atau sobat blogger ketemu lagi dengan saya Anak Sembada. Yah, kali ini saya akan membagikan trik agar mempercepat loading blog dengan defer image. Blog pasti tidak pernah lepas dengan namanya image,baik itu image postingan atau image yang mendukung isi blog. Nah,sebenarnya image ini bisa berpengaruh ke loading blog bila kita tidak hati-hati sewaktu menguploud ke blog mau itu size gambarnya yang besar atau pun kualitas imagenya rendah. Tapi disini Anak Sembada tidak akan membahas masalah kualitas image tapi saya akan memberikan trik masalah agar loading blog tidak berpengaruh karena masalah image. Oke kita langsung ke tempat kejadian perkara.

Mempercepat Loading Blog Dengan Defer Image

1. Buka Blogger

2. Pada dashboard klik Template > Edit HTML

3. Cari kode </body>

4. Lalu copykan kode CSS dibawah ini tepat diatasnya.

<script type='text/javascript'>
// Defer Image
for(var imgDefer=document.getElementsByTagName("img"),i=0;i<imgdefer.length;i++)imgdefer[i].getattribute("data-src")&&imgdefer[i].setattribute("src",imgdefer[i].getattribute("data-src"));< code="">
</script>

5. Dan yang terakhir simpan Template.

Baca juga : Cara Membatasi Jumlah Posts di Halaman Pencarian

Oke teman-teman itu lah trik agar mempercepat loading blog dengan defer image. Semoga bermanfaat.

Terima kasih.

Cara Membatasi Jumlah Post di Halaman Pencarian

2016-08-17T21:27:00.001+07:00

Cara Membatasi Jumlah Post di Halaman Pencarian - Apa kabar teman-teman blogger, kali ini Anak Sembada akan memberikan sedikit tips tentang cara membatasi jumlah post di halaman pencarian. Maksudnya adalah kita akan membatasi jumlah artikel akan tampil bila kita mencari di pencarian blog. Oke kita langsung saja ke trik dan tips nya :

Cara Membatasi Jumlah Post di Halaman Pencarian

1. Yang pasti buka buka blog anda melalui Blogger > Template > Buka template editor blog > cari markup kotak pencarian (sobat sesuaikan dengan template yang sobat pakai)

Contoh dibawah ini adalah dari template yang saya pakai, template yang dipakai Arlina Design

<form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>
<td class='search-boxy1'>
<input id='search-boxy1' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari artikel lainnya...'/>
</td>
<td class='search-button1'>
<input id='search-button1' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>

2. Tambah kode dibawah ini yang merah tepat di bawah tag input dari kotak pencarian dan lengkapnya seperti dibawah ini.

<form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>
<td class='search-boxy1'>
<input id='search-boxy1' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari artikel lainnya...'/>
<input name='max-results' type='hidden' value='7'/>
</td>
<td class='search-button1'>
<input id='search-button1' type='submit' value=''/>
</td>
</tr>
</tbody>
</table>
</form>

Tentukan angka 7 dari value='7' dengan jumlah post yang anda inginkan.

Baca juga : Clone Template Responsive Bung Frangki

3. Yang terakhir simpan template.

Oke, demikianlah tips sedikit dari Anak Sembada untuk cara membatasi jumlah post di halaman pencarian. Dan semoga bermanfaat.

Terima kasih.

Download Template Yang Dipakai Arlina Design

2016-08-16T18:23:00.001+07:00

Downlaod Template Yang Dipake Arlina Design - Apa kabar semua? saya harap baik-baik saja yah. Oke, kali ini Seo Sembada akan membagikan template yang pernah dipake arlina design sebelum sekarang. Siapa arlina design? dia adalah salah satu blogger yang banyak membuat template dan templatenya sudah dipakai banyak orang termasuk saya. Namanya adalah +Arlina Fitriyani dan kunjungi juga blog beliau www.arlinadzgn.com. Oke kita langsung saja.

Berikut fitur-fitur template yang dipake arlina design :

FEATURES	AVAILABILITY
Responsive	True
Google Testing Tool Validator	True
SEO Friendly	True
Mobile Friendly	True
Dynamic Heading	True
Adsense Reading	True
Valid Schema.org	True
Hight CTR	True
Personal Blog	True
2 Column	True
Auto Read More With Thumbnail	True
Responsive Add Slot	True
Breadcrumbs	True
About Me Widget	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Responsive Dropdown Menu	True
News Ticker	True
Smooth Back To Top	True
Custom Subscribe Box Widget	True
Responsive	True
Google Testing Tool Validator	True
Custom Pop up Contact Form	True
Shortcodes	True
Unlimited Page Numbered	True

Setelah melihat fiturnya dan teman-teman tertarik bisa download dibawah ini

Download

Baca juga : Cara Membuat Tombol Demo dan Download Flat UI

Itulah template hari ini yang bisa saya share yaitu template yang dipake arlina design. Semoga bermanfaat.

Terima kasih

Dilarang menghapus / mengedit link kredit pembuat blog.
hargailah karya orang lain. Terima kasih.

Brosense V2 Template Untuk Main Adsense

2016-08-13T22:51:00.000+07:00

Bronsense V2 Template Untuk Main Adsense - Halo sobat blogger semua, ketemu lagi dengan anak sembada. Bagi yang sudah lama berkecimpung di dunia blogger, pasti sudah tau template yang satu ini. Iya, ini template buatan dari mas +Sugeng . kalau kata mas sugeng ini template untuk yang suka main adsense. Walaupun tema nya untuk main adsense tapi mas sugeng tetap membuat template ini responsive. Oke bagi teman-teman yang mau mencoba template ini bisa simak di bawah ini.

Brosense V2

Berikut fitur-fitur template Bronsense V2:

FEATURES	AVAILABILITY
Responsive	True
Google Testing Tool Validator	True
SEO Friendly	True
Mobile Friendly	True
Dynamic Heading	True
Adsense Reading	True
Valid Schema.org	True
Hight CTR	True
2 Column	True
Auto Read More With Thumbnail	True
Responsive Add Slot	True
Breadcrumbs	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Responsive Dropdown Menu	True
Responsive	True
Google Testing Tool Validator	True
Shortcodes	True
Unlimited Page Numbered	True

Baca juga: Cara Membuat Tombol Demo dan Download Flat UI

Bagi teman-teman yang mau mencoba template ini bisa di download di bawah ini.

Download

Oke, itulah template dari mas sugeng yang diberi nama Brosense V2 template untuk main adesense.

Terima Kasih

Dilarang menghapus / mengedit link kredit pembuat template.
Hargailah karya orang lain. Terima kasih

Off Topic

2016-08-13T01:44:00.001+07:00

Ini tempat untuk berkumpul dan nongkrong bareng untuk mendiskusikan masalah apa pun di luar dari topik blog ini. Bila ada kritik dan saran jangan sungkan untuk mengatakannya.

Terima Kasih

Cara Menambahkan Recent Posts di Blog

2016-08-11T23:51:00.000+07:00

Cara Menambahkan Recent Posts di Blog - Selamat malam para blogger kali ini anak sembada membagikan tutorial/cara untuk menambahkan recent posts di sebuah blog dari blogger. Widget yang satu ini sangat banyak dipakai para blogger, bukan banyak sih tapi sepertinya mayoritas, karena widget ini untuk menampilkan postingan atau artikel yang baru saja kita terbitkan. Ada beberapa widget yang mirip seperti ini, widget popular posts dan widget random posts misalnya. Widget seperti ini bisa sebagai jalan atau cara agar visitor/pengunjung blog kita mengetahui beberapa dari artikel/postingan kita. Semakin betah visitor/pengunjung kita akan semakin bagus untuk blog karena bisa menambah earning dari iklan yang kita tayangkan di blog tersebut. Oke kita langsung saja cara/tahap untuk membuatnya.

Membuat Recent Posts

Seperti biasa pertama kita login ke akun Blogger > Tata letak > Add widget > HTML/Javascript

Biasanya recent posts itu diletakkan di sidebar pada blog, tapi kalau sobat mau meletakkan di footer juga tidak masalah, tinggal menambah widget di bagian footer saja.

Copykan kode di bawah ini ke widget yang baru ditambahkan tadi.

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fefefe;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSuOQkOEDo66ZZKOpAI-NKbsDpVOsFKuyNbYHmVDtyijPrRXqyp05ePWjBXp7Zc6cY70rrWdVJGlg8-7YWpF3yd9IZtHbFQyVXsLab0IoLJL_su8WAju-LN0wkm3AWp73gT2DQLIZNW0y/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

Baca juga : Cara Membuat Tombol Demo dan Download Flat UI

Dan jangan lupa untuk menambahkan judul widget itu dengan recent posts,artikel terbaru atau apalah sesuai dengan selera teman-teman.
Oke itulah Cara menambahkan recent posts di blog untuk blogger, semoga bermanfaat.

Clone Template Responsive Bung Frangki

2016-08-11T19:37:00.001+07:00

Clone Template Blogger Bung Frangki - Teman blogger apa pernah berkunjung ke blog bung frangki? nah kali ini anak sembada membagikan template hasil clonning dari blog beliau. Template ini saya rasa juga sangat responsive. Seperti yang saya jelaskan sebelumnya bahwasanya kita harus sudah menggunakan template yang responsive di era smartphone ini.

Berikut fitur-fitur dari template ini:

FEATURES	AVAILABILITY
Responsive	True
Google Testing Tool Validator	True
SEO Friendly	True
Mobile Friendly	True
Dynamic Heading	True
Adsense Reading	True
Valid Schema.org	True
Hight CTR	True
Personal Blog	True
2 Column	True
Auto Read More With Thumbnail	True
Responsive Add Slot	True
Breadcrumbs	True
About Me Widget	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Responsive Dropdown Menu	True
News Ticker	True
Smooth Back To Top	True
Custom Subscribe Box Widget	True
Responsive	True
Google Testing Tool Validator	True
Custom Pop up Contact Form	True
Shortcodes	True
Unlimited Page Numbered	True

Baca juga : Cara Zoom Image di Blogger

Bila teman-teman tertarik menggunakan template ini, bisa download di bawah ini:

Download

Itu lah clone template bung frangki, semoga bisa bermanfaat.

Dilarang menghapus / mengedit link kredit pembuat template.
Hargailah karya orang lain, agar kamu bisa dihargai. Terima kasih.