Cara Membuat Material Design Related Post Di Blog

<div class="center"><div cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><img alt="Cara Membuat Material Design Related Post Di Blog" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu2ENQOjvcEx7Mey6BkKOkWmgzyCTIy5riSY9Yglfa6izqRhCxy3_pU_VAThAnDDERbXJoGI8i0teslMiMt6TjniSt-KCsxiEQenpydYlOqQXE0txY4yV5M9kNk2sJq22Lv3Ig19wBGf4/s1600/Related+Post+Menggunakan+Material+Design.png" style="margin-left: auto; margin-right: auto;" title="Cara Membuat, memasang Material Design Related Post Di Blog blogger terbaru" width="640" /></div></div>Baiklah kali ini saya akan coba membagikan sedikit tutorial blog yaitu <a href="http://www.zandask.cf/2017/04/baiklah-kali-ini-saya-akan-coba.html"><b>Cara Membuat Material Design Related Post Di Blog</b> </a>ini cukup sederhana, di balik tutorial ini shobat blogger ku pasti ada keinginan mempercantik tampilan blognya guna mempermudah pengunjung untuk mengakses keterkaitan post yang sedang di baca.<br /><div id="wrap"><a class="btn" href="http://adf.ly/1lCQ6w" rel="”nofollow”" target="_blank">Result <i class="fa fa-paper-plane"></i></a></div>bagaiman berminat untuk memasangnya di blog mu?? jika iya silahkan ikuti tutorialnya di bawah ini.<br /><h4>Cara Membuat Material Design Related Post Di Blog</h4>Sebelum melanjutkannya. <br /><h3>Apasih arti dari related post?? </h3>Lebih lengkapnya <b>Related Post</b>: adalah aplikasi script <b>html</b> yang di pasang pada blog atau website. Related post biasanya menampilkan gambar, Judul Post, dan beberapa content yang terkait dengan postingan/artikel yang sedang di baca.<br /><h3>Nah Tersu untuk alasan yang wajib untuk di pasang pada web atau blog bagaimana tuh??</h3>Kegunaannya ialah agar pengunjung (pembaca) dapat meneruskan bacaan yang terkait dan menjadikan pengunjung lebih betah (dalam mengunjungi situsnya).<br />Dari namanya saja <b>Related Post</b> "(Artikel Terkait)" Maka kategory artikel/postinganya yang sama di tampilkan dengan tulisan di sebuah judul artikel (Post). Misalkan kategory yang sedang di baca adalah <b>Tips Blog</b>, maka yang akan di tampilkan oleh <b>Related Post</b> ini iyalah postinga/artikel yang serupa (terhubung) Kategory yang sama.<br />Yapsss sudah tau dengan pengertiannya, mari ikuti pemasangnya di bawah ini<br /><h3>Cara Memasang Material Design Related Post Di Blog</h3>1. Buka terlebih dahulu <b>Blogger>Tema>Edit Html</b>. Lalu pastekan kode di bawah ini tepat di atas kode <kbd>]]></b:skin> </kbd>atau<kbd></style></kbd>, Untuk mempercepat pencarian silahkan kamu klik tombol<br /><div class="kbrd">CTRL</div>+<br /><div class="kbrd">F</div>Pada Keyboard kamu.<br /><pre data-codetype="CSSku" title="CSS"><code class="language-css">/* Related Post CSS */<br />.related-post-item-tooltip{height:54px;overflow:hidden;width:50%;float:left;text-overflow:ellipsis;padding:10px}#related-post .material-icons{font-size:200%;right:20px;color:#607D8B;top:-1px;position:absolute}#related-post{background:#fff;margin:10px}.related-post{margin:30px 0 0;position:relative;padding:0 0 10px}.lol h4 i,.related-post h4 i{margin-right:14px}.lol h4,.related-post h4{border-radius:4px;color:#555;font-size:100%;font-family:'Roboto',Arial;text-transform:uppercase;text-align:left;font-weight:700;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;padding:15px 20px 12px;margin:0 0 20px}.related-post-style-3,.related-post-style-3 li{margin:0 auto;padding:0!important;list-style:none;word-wrap:break-word}.related-post-style-3 li a{font-family:'Roboto',sans-serif;color:#666;font-weight:700!important;font-size:14px;line-height:1.4em}.related-post-style-3 li a:hover{color:#111}.related-post-style-3 .related-post-item{display:inline-block;float:left;border-radius:3px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:47%;margin-right:15px;height:auto;padding:0;margin-bottom:20px!important;position:relative;overflow:hidden}.related-post-style-3 .related-post-item:focus{outline:none;border:none}.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:40%;height:100px;float:left}.related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto!important;transition:all 1s ease-out}.related-post-item:hover .related-post-item-tooltip a{opacity:1}.related-post-item-tooltip a{color:#666!important;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;font-size:12px!important;position:relative}<br />@media screen and (max-width:480px){.related-post-style-3 .related-post-item{width:100%!important}.related-post-style-3 .related-post-item-thumbnail{height:100px!important}}</code></pre>2. Nah jika sudah silahkan selanjutnya kamu cari kode berikut<kbd><div class='post-footer-line post-footer-line-3></kbd> atau <kbd></article></kbd>, Silahkan shobat cari satu-persatu dengan kode yang sama, karna setiap template memiliki markup kode yang berbeda-beda. lalu  pastekan kode berikut tepat di bawahnya.<br /><pre data-codetype="HTMLku" title="JavaScript"><code class="language-css"><div class='related-post' id='related-post'/><br /><script type='text/javascript'><br />var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><br />&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><br /></b:loop></b:if>];<br />var relatedPostConfig = {<br />homePage: &quot;<data:blog.homepageUrl/>&quot;,<br />widgetTitle: &quot;&lt;h4&gt;&lt;i class=&#39;fa fa-bookmark&#39;&gt;&lt;/i&gt; Related Post&lt;/h4&gt;&quot;,<br />numPosts: <mark>6</mark>,<br />summaryLength: 370,<br />titleLength: &quot;auto&quot;,<br />thumbnailSize: 300,<br />noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,<br />containerId: &quot;related-post&quot;,<br />newTabLink: false,<br />moreText: &quot;Read More&quot;,<br />widgetStyle: 3,<br />callBack: function() {}<br />};<br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.idblanter.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+""):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);<br />//]]><br /></script></code></pre><blockquote><mark>6</mark> adalah banyak postingan yang akan di tampilkan, silahkan ganti sesuai dengan selera kamu</blockquote>3. Terakhir silahkan save tema/simpan, dan lihat salah satu postingan yang sudah terpasang kategory (label). Semoga berhasil <style type="text/css">@media screen and (max-width:1037px){.browser-mockup:after {display:none}} img:hover {border-radius: none;-webkit-filter: brightness(0.92);} #tempat-judul h2{font-weight: bold;margin: 20px -25px;font-family:'Roboto',Arial;background:#04829e;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);border-radius:4px;color:#fff;padding:20px;font-size:17px} li {margin: .0em 0;}.share-post-top{padding:10px 0;overflow:hidden;margin-top:10px;border-bottom:1px solid #ddd}.widget .post-body>.share-post-top ul{padding:0}.share-post-top li{float:right;margin:0 1%;width:auto;padding:0;list-style:none;position:relative} .browser-mockup:hover:before{background-color:#fc0;box-shadow:0 0 0 2px #fc0,1.5em 0 0 2px #00ff93,3em 0 0 2px #f00} .id{height:305px;overflow:auto;padding:20px;user-select: all;-webkit-user-select: all;-moz-user-select: all;} .browser-mockup{margin-top: 10px;margin-bottom: 10px;border-top:3em solid rgb(56,54,54);position:relative;border-radius:5px 5px 5px 5px;width:100%;height:350px;background-color:#000101;color:#ffbe00} .browser-mockup:before{display:block;position:absolute;content:'';top:-1.50em;left:1em;width:0.5em;height:0.5em;border-radius:50%;background-color:#f44;box-shadow:0 0 0 2px #f44,1.5em 0 0 2px #9b3,3em 0 0 2px #fb5;transition:all .3s ease-out} .browser-mockup:after{position:absolute;content:'';top:-2.4em;left:5.5em;width:calc(100% - 7em);height:1.9em;border-radius:2px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEEPJvYLkCTa9CHV0719KkplVFYvnJMGa-aJLYNq4xdwv98HnWEJFbxDW45I_I_CG1SWtsDLuIf7ByRp_9a_bAT3pWjfQbBHNrTs_pOsb_sCIYPVC4mhZ1Z1vY4_8lUvv8uMzyDtkvpaM/s1600/Html.png);background-size:100%}.buttonx {display: inline-flex;border-radius: 4px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);font-size: 13px;font-weight: 700;text-transform: uppercase;color: #FFF!important;background-color: #22a1c4!important;margin: 5px;padding: 8px 20px;text-shadow: none;transition: all 1s;}.buttonx:hover, .buttonx:hover, .buttonx.link:hover {background: #1D7891!important;box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 15px 0 rgba(0,0,0,0.12);}.share-post-top li a{padding:9px 9px 9px 32px;color:#fff;display:block;box-shadow:0 2px 10px 0 rgba(0,0,0,0.09),0 2px 4px 0 rgba(0,0,0,0.09);border-radius:2px;font-size:13px;transition:all .3s ease-in-out}.share-post-top li a:hover{color:#fff;border:none;box-shadow:0 3px 10px 0 rgba(0,0,0,0.15),4px 3px 10px 1px rgba(0,0,0,0.18)}.share-post-top li .twitter{background-color:#19bfe5}.share-post-top li .facebook{background-color:#3b5998}.share-post-top li .gplus{background-color:#d64136}.share-post-top li .pinterest{background-color:#cb2027}.share-post-top li .linkedin{background-color:#304e6c}.share-post-top li .twitter:hover,.share-post-top li .facebook:hover,.share-post-top li .gplus:hover,.share-post-top li .pinterest:hover,.share-post-top li .linkedin:hover{color:#fff}.share-post-top li:first-child{margin-right:0}.share-post-top li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all .6s ease-out}.share-post-top li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1)}.share-post-top li .fa{display:initial}#shareiddzgn{overflow:hidden;padding-bottom:20px}.page-menu{float:left;width:auto;height:auto;padding-left:15px;margin:0 5px 0 0;font-size:100%;font-weight:400}.related-post2{margin-bottom:15px;padding:10px}.related-post2 h4{font-size:14px;margin:0 0 .5em;text-transform:uppercase;padding:10px;color:#f0f0f0;text-transform:uppercase;background:#4178b5;overflow:hidden;box-shadow:0 4px 4px #888;border-bottom:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;margin-bottom:10px}.related-post2 h4:before{content:"\f0ab";font-family:FontAwesome;margin-right:8px;display:inline-block;float:right}.related-post-style-2{margin:0 0 0 0!important;padding:0 0 0 0!important;list-style:none}.related-post-style-2 li{margin:0 0 0 0;padding:0 0 0 0}.related-post-style-2 li{padding:5px 0!important;border-top:1px solid #eee;overflow:hidden}.related-post-style-2 li:first-child{border-top:none}.related-post-style-2 .related-post-item-thumbnail{width:50px;height:50px;max-width:none;max-height:none;background:#fff;border:1px solid #e5e5e5;padding:6px;float:left;margin:2px 8px 0 0}.related-post-style-2 .related-post-item-title{font:bold 14px Arial,sans-serif}.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden;font-size:11px}.related-post-style-2 .related-post-item-more{}.post-body h3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj2vY12x6csVAD0I6yZh9d0suKCsaifihMVrPy536_Egy31A1hmCcwYIegONZ2exk-OCbVdJxP2t12Zx3bGG2BgizXpeMc9siEKlYpKd2j6RSeMFK6wg5fuJHOjQp9tNMkb3JCdtF-y0E/s22/seocipsh3.png) no-repeat 5px 6px;font-size:90%;color:#222;margin:15px 0;padding:9px 38px}.post{padding:0 20px 10px 20px}.post-body a:link{;text-decoration:none;transition:all .3s ease-in-out}.post-body{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 0 10px 0;margin:0 0 10px 0;}.post-body img{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;background:#fdfdfd;height:auto;max-width:100%;border:0;margin-bottom:2.0px;box-shadow:0 0 0 1px rgba(0,0,0,0.03);opacity:1;transition:all .6s ease}.post-body img:hover{opacity:0.95}.post-body a.img,.post-body .separator a{margin-left:0!important;margin-right:0!important}h3.post-title,h2.post-title,h1.post-title{font-size:1.5rem;color:#768187;margin:0;margin-left:-20px;margin-right:-20px;padding:30px 20px}.post-body h4,.post-body h5,.post-body h6{position:relative;margin:0 0 10px;padding:10px 0;border-bottom:2px solid #e0e0e0;font-weight:500;letter-spacing:1px}.post-body h4{font-size:120%}.post-body h5{font-size:100%}.post-body h6{font-size:80%}.post-body h4:before,.post-body h5:before,.post-body h6:before{content:'';position:absolute;bottom:-2px;left:0;right:0;background:#fc4f69;width:7%;height:2px}li{margin:0.5em 0.1em}.post-body a:link:hover{color:#138be6;text-decoration:none}.post-vinfo{margin-top: 25px;font-size:small;padding:0;font-weight:700;color:#444}.author-info,.time-info,.comment-info,.label-info,.review-info,.post-vinfo a{color:#444}.post-vinfo a:hover{color:#888;text-decoration:none}.label-info a{color:#444;padding:3px 4px}.label-info a:hover{color:#4399cd}.CSS_LIGHTBOX{z-index:9999!important}.banner2{margin:10px auto 20px auto}.kotak_iklanpost{display:block;position:relative;margin:0 auto 20px auto;text-align:center}#blog-pager{margin:0}a.blog-pager-newer-link,a.blog-pager-older-link,a.home-link{color:#79798d;width:initial;height:initial;line-height:initial;padding:5px 0;margin:0;border:initial;background:initial}#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover,a.home-box:hover,.mobile-desktop-link a.home-link:hover{color:#151515!important}a.blog-pager-newer-link:hover,a.blog-pager-older-link:hover,a.home-link:hover{background:initial}#blog-pager-newer-link a,#blog-pager-older-link a,a.home-link{color:#79798d;font-size:15px;font-weight:700;transition:all .3s ease-in-out}.bagitiga{-webkit-column-count:3;-moz-column-count:3;column-count:3}.bagitiga img{-webkit-backface-visibility:hidden;margin-bottom:15px;max-width:100%}.bagitiga br,.post-body #wrap a[target="_blank"]:after,.post-body .sharebrow a[target="_blank"]:after,.post-body .kotak_iklan2 a[target="_blank"]:after,.post-body .sharebrow a[target="_blank"]:after .fb,.post-body .sharebrow a[target="_blank"]:after .gp,.post-body .sharebrow a[target="_blank"]:after .tw,.post-body .sharebrow span[target="_blank"]:after .pl,#wrap a.btn[target="_blank"]:after{display:none}#resize-box{background-color:#fff}#HTML6{width:302px;-webkit-transform:translateZ(0)}.post-body .kotak_iklan2{position:relative;display:table;margin:20px auto}.post-body .kotak_iklan2 img{-webkit-touch-callout:initial;-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:initial;pointer-events:initial}.text-me-in{position:relative;background:#ffe4ad;padding:13px 12px 12px 12px;margin:20px auto;text-align:center;border:3px solid #ebd099}.text-me-in:before{display:inline;content:'Kunjungi situs:';color:#908575;padding:0 10px;font-weight:700}.text-me-in a{background:#f8695f;padding:5px 8px;border-radius:3px;border:1px solid #e05b52;color:#fff}.text-me-in a:hover{background:#fff;color:#e05b52}#bloggercommentbase{position:relative;overflow:hidden;display:block;clear:both;margin:0 auto}#comments{position:relative;color:#444;clear:both;margin:0 auto;padding:20px;border:1px solid rgba(0,0,0,0.12);border-top:0}.post-comment-link{visibility:hidden}#comments h3{display:inline-block;margin-bottom:20px;font-size:14px;position:absolute;background:#378f9d;color:#fff;font-weight:700;border-radius:20px;text-transform:uppercase;padding:10px 20px 10px 50px}#comments2{display:none;clear:both;padding:10px 0;margin-top:0;font-family:Roboto,Arial,sans-serif}#comments2 h3{margin:0;font-size:18px;font-weight:500;color:#666;padding-bottom:10px;border-bottom:1px solid #ddd}#comment_block{padding-top:25px}.disqus-bar{display:inline;float:right;padding:5px 10px;cursor:pointer;background:#fafafa}.disqus-bar{margin-left:3px;margin-top:20px;border-radius:1px 1px 0 0;border:1px solid #ddd;border-bottom:none}.disqus-box{width:100%;padding:0;border-top:1px solid #ddd}.btncurrent{padding:5px 10px 6px;margin-bottom:-1px;background:#fff}.comment-text{font-family:'Roboto',Arial;font-weight:bold;display:inline;float:left;padding:5px 10px 5px 0;margin-top:20px}.comment-text:after{content:\f061;;font-family:FontAwesome;color:#555;margin-left:5px}#commentBodyField{height:auto!important}.pesan-komentar h5{box-shadow:0 7px 5px 1px rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);left:0;width:100%;font-size:14px;margin:0;background:#04a4bf;color:#fff;padding:15px 20px;font-weight:700;position:relative;text-transform:uppercase;overflow:hidden;bottom:16px!important}.pesan-komentar h5:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#04a4bf;color:#fff;top:0;right:0;padding:13px 20px;position:absolute}.pesan-komentar{border-radius:4px;background:#fff;padding:0 10px 10px;width:auto;margin-top:20px;line-height:1.3em;position:relative;font-weight:400;font-size:14px;color:#555;border-bottom:3px solid #07ACEC}.parser{border-radius: 3px;background:#07ACEC;font-size:13px;padding:5px 8px;margin:0 5px 5px;cursor:pointer;display:inline-block;float:left;text-align:center;color:#fff!important}#parser{padding:0;margin:10px 0 0;display:none}#parser td{border:none}#parser table,#parser2 table{margin:0 auto;width:100%;border:none}#parser textarea#somewhere,#parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:100px;width:100%;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#parser textarea#somewhere:active,#parser textarea#somewhere:focus,#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #07ACEC;outline:0}input.button-parse{padding:7px 10px;cursor:pointer;background:#07ACEC;border:none;font-size:12px;color:#fff;font-weight:bold;font-family:'Roboto',sans-serif}.pesan-komentar .strike{text-decoration:line-through}.pesan-komentar:before{content:"";width:0;height:0;position:absolute;bottom:-22px;left:22px;border:11px solid transparent;border-color:#07ACEC transparent transparent}.pesan-komentar:after{content:"";width:0;height:0;position:absolute;bottom:-20px;left:15px;border:10px solid transparent;border-color:#55 transparent transparent}.pesan-komentar ul{list-style:none;padding:0 10px 5px}.pesan-komentar code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#555}.clear{clear:both}#emoshow{display:none;overflow:hidden;padding:10px 0}.emolist{font-size:18px;padding:5px;overflow:hidden;float:left}}@media screen and (max-width:480px){#parser{display:none}]@media only screen and (max-width:960px){.bagitiga{-webkit-column-count:2;-moz-column-count:2;column-count:2}}@media only screen and (max-width:640px){.post{padding:0 10px 10px 10px;border:0}#content-wrapper{padding:0}.bagitiga{-webkit-column-count:1;-moz-column-count:1;column-count:1}#HTML6{position:relative!important;width:auto!important}ul#relate-summary{padding:0}ul#relate-summary li{padding:5px 0}ul#relate-summary li img,#relate-summary .news-text{display:none}ul#relate-summary li a.relinkjdulx{display:block;font-weight:700;line-height:normal;overflow:hidden;padding:10px 10px 10px 0}}@media only screen and (max-width:480px){.post{padding:0 0 10px 0}.pesan-komentar ul{padding:10px}.parser{margin:0 10px 10px}}@media only screen and (max-width:320px){.text-me-in a{display:block}h3.post-title:before,h1.post-title:before,h3.post-title:after,h1.post-title:after,h3.post-title:after,h1.post-title:after,#comments .click-comment{visibility:hidden}}@media print{body{padding:0}#outer-wrapper{border-right:none;border-left:none}#post-wrapper{width:100%;margin:0 auto}.post-vinfo{background:#fff;border:none}.post{background:#fff;margin:0 0 15px;padding:15px;border:none}h1.post-title{border-bottom:none}.post blockquote{background:transparent;border:none}.iddzgnttop-wrapper,#nav,#BackToTop,#search,.breadcrumbs,.halaman,#blog-pager,.banner,#banner,.banner2,#banner2,#sidebar-wrapper,#virelated-post,#comments,#iddzgnft-wrapper,#header-wrapper,div#banner,div#banner2,.iddzgnt-mainmenu,h2.sharetitle,.sharede,.sharebrow{opacity:0;display:none;visibility:hidden;width:0;height:0}} </style>

Cara Mengatasi Gambar Thumbnail Buram Pada Widget Populart Post

<div class="post-body entry-content" id="post-body-641417854158391357"><div class="center"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbc8qTJBBc6YUb_0fTZ1SQFhDGU_SwPVJOnUBvTj7XaWDq9L-4oT2g-UVBZzbC7N3eGPo7gL_CDQHSh9hIHyzx47NFMTjAHt2bCTtDfLM_48C6kGWHhi-bA7XgiTztkG2t48lk9SPv-lg/s1600/Cara+Mengatasi+Gambar+Buram+Widget+Populart+Post.png" /></div><b><a href="http://www.zandask.cf/2017/04/cara-mengatasi-gambar-thumbnail-buram.html">Cara Mengatasi Gambar Thumbnail Buram Pada Widget Populart Post</a>:</b><br /><b>Beberapa waktu lalu saya membagikan postingan yang sama permasalahanya yaitu <a href="http://www.zandask.cf/2017/04/cara-mengatasi-gambar-thumbnail-buram.html" target="_blank">Mengatasi Thumbnail Gambar Buram Di Blog</a> itu hanya pada bagian postingan homepage, nah jika permasalahanya pada widget populart post blog bukan pada postingan post homepage, lantas bagai mana cara mengatasinya??,</b><br /><b>Sebenarnya ada banyak cara untuk mengatasi permasalahan terjadinya gambar buram pada widget populart post salah satunya menggunakan JavaScript aktif untuk memperbaikinya, shobat bisa coba memasang javascript untuk mengembalikan gambar thumbnail buram pada widget populart post shobat.</b><br /><br /><h4>Cara Mengatasi Gambar Thumbnail Buram Pada Widget Populart Post</h4>1. Masuk ke Blogger>Tema>Edit Html, Silahkan shobat cari kode <kbd></body></kbd>, Lalu shobat pastekan JavaScript di bawah ini tepat sebelum kode yang di cari tadi. Untuk mempermudah pencarian shobat bisa klik tombol <br /><div class="kbrd"><span style="color: red;">CTRL+F</span></div>Pada keyboard  shobat.<br /><pre data-codetype="HTMLku" title="JavaScript"><code class="language-markup"><script type='text/javascript'>$('.PopularPosts ul li img').attr('src', function(i, src) {<br />return src.replace('s72-c', 'w170-h170');<br />});</script></code></pre>Sekarang coba shobat Save/Simpan template shobat, lalu silahkan lihat kembali blog shobat apakah masih buram atau tidak??, Kalo tidak selamat Populart post shobat kini sudah pulih kembali.<br /><br />Mungkin sampe di sini dulu tutorial saya kali ini selamat mencoba. </div>

StartRight WordPress Themes

<b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px 0.25em; transition: color 0.2s; vertical-align: baseline;"><a href="http://www.zandask.cf/2017/04/startright-wordpress-themes.html">StartRight WordPress Themes</a></b><span style="background-color: white; color: #444444; font-family: "open sans"; font-size: 14px;"> is With StartRight, a beautiful free WordPress theme, your business will look fantastic no matter the device. Get a beautifully responsive professional website which delivers for you on desktops, tablets and mobiles. It’s headache-free with StartRight.</span><br /><div class="separator" style="background-color: white; border: 0px; clear: both; font-family: "Open Sans"; font-size: 14px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><span style="color: black;"><a class="buttonx" href="http://demo.kaizenthemes.com/2016/12/startright-wordpress-themes.html" style="background-attachment: initial; background-clip: initial; background-color: rgb(0, 153, 255) !important; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border: 2px solid rgb(255, 255, 255) !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 3px 0px; outline: none; padding: 5px 15px; text-decoration-line: none; text-shadow: none !important; text-transform: uppercase; transition: all 0.25s; vertical-align: baseline;" target="_blank">LIVE PREVIEW</a> <a class="buttonx" href="https://wordpress.org/themes/startright/" style="background-attachment: initial; background-clip: initial; background-color: rgb(0, 153, 255) !important; background-image: initial; background-origin: initial; background-position: 0px center; background-repeat: initial; background-size: initial; border: 2px solid rgb(255, 255, 255) !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 3px 0px; outline: none; padding: 5px 15px; text-decoration-line: none; text-shadow: none !important; text-transform: uppercase; transition: all 0.25s; vertical-align: baseline;" target="_blank">DOWNLOAD NOW</a></span></div><div class="separator" style="background-color: white; border: 0px; clear: both; color: #444444; font-family: "Open Sans"; font-size: 14px; font-stretch: inherit; font-variant-numeric: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirI37bQR725b73dxf3ythB01Apj0tNcxAVU-CAUe7rgqgd_4jGfVpzgcKoNCI2NT3A0F8K00wVagym3LTofas7vguk_GMbjrco44pvGGMm-GLK7MVO8hQStrh27lf6jszwHt84KQhr6HbO/s1600/StartRight+WordPress+Themes.jpg" imageanchor="1" style="border: 0px; color: #637182; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 1em; outline: none; padding: 0px; text-decoration-line: none; transition: all 0.25s; vertical-align: baseline;"><img alt="StartRight%2BWordPress%2BThemes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirI37bQR725b73dxf3ythB01Apj0tNcxAVU-CAUe7rgqgd_4jGfVpzgcKoNCI2NT3A0F8K00wVagym3LTofas7vguk_GMbjrco44pvGGMm-GLK7MVO8hQStrh27lf6jszwHt84KQhr6HbO/s1600/StartRight+WordPress+Themes.jpg" style="background: rgb(253, 253, 253); border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px auto; max-width: 95%; outline: none; padding: 8px; position: relative; vertical-align: middle;" /></a></div>

Cara Membuat Table Keren Di Postingan Blog

<div class="center"><img alt="Cara Membuat, Memasang Table Keren Di Postingan Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjjIXyTAHtxMRkJ5XBJFLTnwlHHh3SOhdEBuEsRLY6nOtdCwuvJ-55oQTfK2iYkRPrFUjKrQPI5-h5xgyp0uVHGl96cYI82Ke46oW5H7iUPCcmqi5bgvpk_4h4d87fe1P13to4PSVpWI/s1600/Cara+MembuatTable+Keren+di+postingan+blog.png" title="Cara Membuat Table Keren Di Postingan Blog" /></div><br /><a href="http://www.zandask.cf/2017/04/cara-membuat-table-keren-di-postingan.html"><b>Cara Membuat Table Keren Di Postingan Blog:</b> </a><br /> Ok , Selamat Malam ,  Baiklahh Saya Akan Beri Tutorial Deangan <a href="http://www.zandask.cf/2017/04/cara-membuat-table-keren-di-postingan.html">Cara Membuat Table Keren Di Postingan Blog</a> Jadi? Post table bisanya di gunakan pada postingan artikel yang ingin menampilkan jumblah atau formulir data tertentu, saya juga menggunakan post table pada postingan saya, saya menggunakan post table untuk menampilkan Fitur-fitur template yang saya bagikan namun dengan tampilan yang sedikit berbeda.<br />Post table ini cocok untuk di gunakan di blog/website yang menyediakan resfrensi berbagai jenis penjualan maupun pembelian. Post table ini di gunakan untuk mempercantik artikle yang di publikasikan apalagi artikel tersebut berisikan daftar (Isi atau Fitur) terntentu.<br /><br />Untuk membuat Post table ini cukup mudah kamu hanya perlu melakukan sedikit tahap dalam pemasangnya.<br /><h4>Cara Membuat Table Keren Di Postingan Blog</h4><h3>Langkah Pertama</h3>Langkah Pertama Kamu masuk ke Blogger kamu, lalu pilih menu Tema, pilih Edit Html. Pada Edit Html silahkan kamu cari kode <kbd>]]</b:skin></kbd>, lalu pastekan kode CSS berikut tepat sebelum kode yang di cari tadi, untuk mempercepat pencarian silahkan klik tombol <br /><div class="kbrd"><span style="color: red;">CTRL+F</span></div>pada keyboard kamu.<br /><div class="browser-mockup"><div class="id"><div class="browser-mockup" style="background-color: #000101; border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: initial; border-left-style: initial; border-radius: 5px; border-right-color: initial; border-right-style: initial; border-top-color: rgb(56, 54, 54); border-top-style: solid; border-width: 3em 0px 0px; box-sizing: border-box; color: #ffbe00; font-family: Roboto, Arial; font-size: 15px; font-stretch: inherit; font-variant-numeric: inherit; height: 350px; line-height: inherit; margin: 10px 0px; padding: 0px; position: relative; vertical-align: baseline; width: 652.25px;"><div class="id" style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: 305px; line-height: inherit; margin: 0px; overflow: auto; padding: 20px; user-select: all; vertical-align: baseline;">/* CSS Post Table */<br />table{border-collapse:collapse;border-spacing:0;}<br />.post-body table td{border:1px solid #e9e9e9;padding:10px;text-align:center;vertical-align:top;}<br />.post-body table th {border:1px solid #029864;padding:15px 8px!important;text-align:center;vertical-align:top;color:#fff;}<br />.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}<br />.post-body th{background:#fff;font-weight:bold;text-transform:capitalize;font-size:15px;}<br />table {max-width:100%;width:100%;margin:1.5em auto;}<br />table.section-columns td.first.columns-cell{border-left:none}<br />table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}<br />table.columns-2 td.columns-cell{width:50%}<br />table.columns-3 td.columns-cell{width:50%}<br />table.columns-4 td.columns-cell{width:30%}<br />table.section-columns td.columns-cell{vertical-align:top}<br />table.tr-caption-container{padding:4px;margin-bottom:.5em}<br />td.tr-caption{font-size:80%}<br />.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}<br />.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}<br />.services_list{text-align:left !important}<br />.services{background:#0f9d58!important;width:28%;overflow:hidden;text-align:center!important;border-left:0}<br />.free_version,.premi_version,.theme_instal{background:#1dc087!important;width:22%;overflow:hidden;text-align:center!important}<br />.premi_version{background:#0f9d58!important}<br />.post-body i.fa-check,.post-body i.fa-times,.post-body i.fa-minus{height:27px;width:27px;line-height:27px;text-align:center;border-radius:99em;color:#fff}<br />.post-body i.fa-check{background:#83cd30}<br />.post-body i.fa-times{background:#f13a3a}<br />.post-body i.fa-minus{background:#ffbd2e}</div></div></div></div><blockquote>Jika di template kamu sudah terpasang CSS Post Table sebelumnya kamu bisa menghapusnya atau langsung menggantinya dengan CSS Post Table di atas</blockquote><br />Nah jika sudah sekarang silahkan kamu save tema/simpan, Lalu silahkan ikuti cara ke dua berikut ini.<br /><h3>Langkah Kedua</h3>Langkah kedua yang harus kamu lakukan adalah masuk ke menu postingan kamu, buat postingan baru. atau pilih postingan yang ingin kamu sisipkan Post Tablenya,<br />Pada menu postingan terdapat pilihat <b>Compose</b> dan<b> HTML</b><br /><img alt="Cara memasang Post Table Di postingan Blog Keren " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO7rZ3N3ewY23zNafi44GfmTegd8tq2FoNWwdUGOTpmoE6S_PvX180-Y331w46Kxd0PwqOeTe9k8COpNXFUJ8By3lday8Y9CxUYVhwFoO0OkVFkf1hixFSTL4ldHuzwjYvdJzClHbYAfI/s1600/HTML.png" title="Memasang Post Table keren di postingan blog" /><br />Silahkan kamu Pindahkan Mode Compose ke mode HTML, lalu pastekan kode HTML berikut terserah di mau di mana posisinya, tergantung selera kamu.<br /><pre data-codetype="HTMLku" title="HTML"><code class="language-markup"><br /><div class="buy_now"><table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody><br /><tr><th class="services">Services</th><th class="free_version">Free Version</th><th class="premi_version">Premium Version</th><th class="theme_instal">Theme + Installation</th></tr><br /><tr><td class="services_list">File Documentation</td><td><i class="fa fa-minus" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr><br /><tr><td class="services_list">Remove Footer Credits</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr><br /><tr><td class="services_list">One Time Payment</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr><br /><tr><td class="services_list">No Encrypted Scripts</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr><br /><tr><td class="services_list">Lifetime Premium Support</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr><br /><tr><td class="services_list">For Unlimited Domains</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr><br /><tr><td class="services_list">Lifetime Template Updates</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr><br /><tr><td class="services_list">Theme Installation Service</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr><br /></tbody> </table></div></code></pre>Silahkan kamu ubah sesuai dengan keinginan kamu, jika kamu kreatif kamu pasti tidak pusing untuk masalah seperti ini, Terakhir siklahkan kamu save/Publikasikan.<br /><br />Silahkan kamu lihat kembali postingan kamu, Jika sudah terpasang selamat.<br />mungkin sampe di sini dulu postingan saya kali ini, semoga bermanfaat, jika ada kesusahan bisa di tanyakan dengan berkomentar di bawah ini.

Material Design Download Button Effect Ripple Di Blog

<div class="center"><img alt="Material Design Download Button Effect Ripple di blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfLXQOqPjpmb_9h97J9ZPgK-wbJLfwbW8BkPesY-nvFTa7n6OEx3EPNni0IewK-NQoINGPKBnSaa-ligPtl2ZWxM3h8r1wQgsGqNrQCw9tSVnxPNRDl3xbrPz0YtBcfJVv1e2WHSzTBZU/s1600/Material+Design+Downlload+Button+Effect+Ripple.png" title="Material Design Download Button Effect Ripple" /></div><b><br /></b><a href="http://www.zandask.cf/2017/04/material-design-download-button-effect.html"><b>Material Design Download Button Effect Ripple Di Blog:</b> </a><br />Ok Saya  akan Beritahu coba membagikan Tutorial untuk Cara Membuat Material Design Download Button Effec Riplle Di Blog, nah kamu pasti sudah tau donk Material Design itu apa?? Material Design adalah sebuah tampilan visual yang di luncurkan google pada tahun 2014, umumnya material design sendiri terdapat pada Android, OS dan masih banyak lainya sampe sekarang material design resmi di aplikasikan di berbagai produk Google.<br />Banyak Designer-designer web yang sudah mengembangkan material design ini untuk di terapkan pada template blog/web, apalagi saat ini penggemar tampilan material design sudah makin bertambah termasuk saya, oky kembali ke pembahasan kali ini, nah tutorial kali ini saya bagikan karena ada pengunjung blog ini yang merequest tutorial untuk tombol download menggunakan material design.<br />Jika kamu masih penasaran dengan demo tombol yang akan kita buat kamu bisa lihat demonya lebih lengkap di bawah ini:<br /><div id="wrap"><a class="btn" href="http://adf.ly/1mMxNF" rel="”nofollow”" target="_blank">Result <i class="fa fa-paper-plane"></i></a></div>Nah Mudah-mudahan tutorial saya kali ini bisa menjawab keinginan anda untuk mengubah sedikit demi-sedikit tampilan blog kamu jadi lebih keren.<br /><h4>Material Design Download Button Effect Ripple</h4>1. Masuk ke Blogger>Tema>Edit Html, lalu pastekan kode CSS berikut tepat sebelum kode <kbd>]]></b:skin></kbd>, untuk mempercepat pencarian silahkan kamu klik tombol <br /><div class="kbrd">CTRL</div>+<br /><div class="kbrd">F</div>pada keyboard kamu.<br /><pre data-codetype="CSSku" title="CSS"><code class="language-css">.ripplelink{border:1px solid rgba(0,0,0,0.12)}<br />.btn, .btn-large {<br />text-decoration: none;<br />color: #FFF;<br />background-color:#0092d4 !important;<br />text-align: center;<br />letter-spacing: .5px;<br />-webkit-transition: .2s ease-out;<br />-moz-transition: .2s ease-out;<br />-o-transition: .2s ease-out;<br />-ms-transition: .2s ease-out;<br />transition: .2s ease-out;<br />cursor: pointer;<br />}<br />.btn:hover, .btn-large:hover {<br />background: #08a7ef !important;<br />}.btn i{margin-left:0}<br />.z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover {<br />-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);<br />-moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);<br />box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);<br />}<br />.btn, .btn-large, .btn-flat {<br />border: none;<br />border-radius: 5px;<br />display: inline-block;<br />height: 36px;<br />line-height: 36px;<br />outline: 0;<br />padding: 0 2rem;<br />text-transform: uppercase;<br />vertical-align: middle;<br />-webkit-tap-highlight-color: transparent;<br />}</code></pre>2. Sekarang silahkan kamu cari kode <kbd></body></kbd> lalu pastekan kode Javascript ini di atasnya.<br /><pre data-codetype="HTMLku" title="JavaScript"><code class="language-css"><script><br />$(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});</script></code></pre><br />Nah jika sudah selesai silahkan kamu Simpan/save template.<br /><br />3. Sekarang buat artickle/post baru silahkan kamu ubah modenya terlebih dahulu, pindah dari mode <b>Compose </b>ke mode <b>HTML</b> lalu pastekan kode html berikut.<br /><pre data-codetype="HTMLku" title="HTML"><code class="language-css"><div style="text-align: center;"><a class="btn ripplelink" href="<mark>Url Tujuan</mark>" title=" "><i class="fa fa-download"></i> Download</a><a class="btn ripplelink" href="<mark>Url Tujuan</mark>" title=" ">Demo <i class="fa fa-paper-plane-o"></i></a></div></code></pre><blockquote>Silahkan kamu ganti <mark>Url Tujuan</mark> dengan Link tujuan kamu.<br />Nah untuk penempatan tombol download ini kamu bisa pasang di bagian postingan mana saja,<br />Jika kamu termasuk orang kreative kamu pasti bisa mengedit/mengubah kembali warna atau bentuknya.</blockquote>Jika sudah terakhir silahkan kamu publikasikan/pertinjau untuk melihat hasilnya.<br /><br />Oky jika ada penempatan kata yang salah mohon maaf yaa!, jangan lupa Kritik dan Saran kamu, karna kami sangat membutuhkanya untuk lebih mengembangkan lagi pelayanan yang kami berikan.