Memasang Slide Out Tombol Follow Di Blog

Memasang Slide Out Tombol Follow Di Blog

Tips Blogger Widget

Memasang Slide Out Tombol Follow di Blog - Kali ini akan menawarkan sebuah Widget tutorial cara memasang "follow this blog" yang memang sudah disediakan oleh blogger, namun di sini aku akan menyebarkan tombol "follow this blog" pengaruh slide out dengan posisi melayang di bawah blog yang dapat teman pasang.

Tombol ini akan lebih gampang terlihat oleh pengunjung. Apalagi kalau pengunjung tertarik dengan artikel yang dibaca, tidak menutup kemungkinan pengunjung akan pribadi join dan follow blog kita melalui tombol "follow this blog" yang kita pasang di bawah blog semoga tombol ini lebih berfungsi dan bermanfaat.

Memasang Slide Out Tombol Follow di Blog

1. Cara menambahkannya sangat mudah, silakan buka Blogger > Tata letak > Buat widget gres kemudian tambahkan instruksi di bawah ini

<style scoped='' type="text/css"> /*<![CDATA[*/ #arlinafollowSubscribe{background-color:#464646;width:220px;color:#fff;position:fixed;z-index:999;right:10px;bottom:0} .arlinafollowButton{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} .arlinafollowButton span{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOQnRLhaM53HxaSoyGn469CJm1DwBjgL1Z33oEqjsKWXmfoRSalihjJMfVqUEt6sl-sDQ_9PlpS1QmP51gTRP4QYMhOgQLOZ0pmqGfXBivl7zl5-6JCo0XTwz6D_UdCmItcAAIk4keEqJb/s1600/follow-blogger.png") no-repeat scroll 0 3px transparent;padding-left:15px} .arlinafollowButton:hover,.arlinafollowButton:focus,.followActive,.followActive:hover{color:#fff} .arlinafollowButton:hover span,.followActive span{background-position:0 -37px!important} .followactive{background-color:#333} .arlinafollowForm{padding:15px;margin:auto;text-align:center;font-size:12px} .arlinafollowForm p{margin:10px 0} .arlinaFollowFooter{text-align:center;font-size:11px;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c} .arlinaFollowFooter a{color:#aaa;background:none;text-decoration:none} .arlinaFollowFooter 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("#arlinafollowSubscribe"),t="-"+o.outerHeight()+"px";o.hide().css({bottom:"-510px"}),setTimeout(function(){o.show().animate({bottom:t})},500),e(".arlinafollowButton").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="arlinafollowSubscribe" style="bottom: -971px;">   <div class="arlinafollowForm">     <a class="arlinafollowButton" href="#" title="Memasang Slide Out Tombol Follow di Blog"><b>+ Follow</b></a>     <br />     <a href="http://www.Blogger.com/follow-blog.g?blogID=7342017194742683056" title="Memasang Slide Out Tombol Follow di Blog" 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/AVvXsEiEvfZq-WMKVKPL8nUCss1vMudLBhuIsidBTC3b9cv3yG3_g-KpmDZYZDLCRxmZbhiZeO_T4dNF-Lf2AxSazcwXocC0l6pvaXCQLybTg-OCHYbiHPKkaFmjfOyHgey1plAtTUUqzpgY6r2_/s1600/Follower.png" alt="Memasang Slide Out Tombol Follow di Blog Memasang Slide Out Tombol Follow di Blog" /></a>     <br />     <p>with Google Friend Connect</p>   </div> </div>

Ganti instruksi yang ditandai dengan instruksi blog ID sobat. Kode blog ID biasanya dapat teman lihat di dashboard blog pada search kafetaria browser menyerupai gambar di bawah ini

2. Simpan widget.

Result

Demikian tutorial blog Memasang Slide Out Tombol Follow di Blog, semoga bermanfaat.
Sumber http://arlinadesign.blogspot.com

Membuat Recent Post By Label Dengan Fungsi Tab

Membuat Recent Post By Label Dengan Fungsi Tab

Tips Blogger Widget

Membuat Recent Post by Label dengan Fungsi Tab - Kali ini akan memperlihatkan tutorial cara menciptakan widget recent post menurut label dengan bentuk tab yang dapat dengan gampang dipasang pada blog.

Langsung saja, silakan ikuti tutorial berikut ini

1. Login ke blogger sobat, buka template editor, lalu tambahkan isyarat CSS di bawah ini sempurna sebelum ]]></b:skin> atau </style>

/* Recent Post Label */ .recent-labpost{margin:20px;} .rctab-button > span{padding:15px 20px;cursor:pointer;position:relative;color:#222;display:inline-block;font-size:120%;font-weight:700;} .rctab-button > span.active{color:#222;background:rgba(0,0,0,0.05)} .rctab-button > span.active:before{content:'';top:0;opacity:1} .rctab-content{padding:15px;background:rgba(0,0,0,0.05);position:relative;min-height:100px;overflow:auto} .rctab-item{float:left;width:48%;margin:10px 1%;background:#fff;border:1px solid rgba(0,0,0,0);transition:all .3s;} .rctab-item:hover{border:1px solid rgba(0,0,0,0.1);} .rctab-item-inner{padding:10px} .rctab-item img{float:left;width:120px;height:auto;} .rctab-item h3{float:right;width:calc(100% - 130px);height:20px;margin:10px 0;font-size:120%} .rctab-item h3 a{color:#222}.rctab-item h3 a:hover{color:#e74c3c} .loader{position:absolute;left:50%;top:50%;margin-left:-27.5px;margin-top:-27.5px;transition:all .3s linear} .hide-load .loader{opacity:0} .squarin{background:#374140;width:15px;height:15px;float:left;top:-10px;margin-right:5px;margin-top:5px;position:relative;opacity:0;-webkit-animation:enter 6s infinite;animation:enter 6s infinite} .enter{top:0;opacity:1} .squarin:nth-child(1){-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s} .squarin:nth-child(2){-webkit-animation-delay:2.1s;-moz-animation-delay:2.1s;animation-delay:2.1s} .squarin:nth-child(3){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s;background:#09c} .squarin:nth-child(4){-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;animation-delay:0.9s} .squarin:nth-child(5){-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s} .squarin:nth-child(6){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s} .squarin:nth-child(8){-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s;animation-delay:0.3s} .squarin:nth-child(9){-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;animation-delay:0.6s} @media screen and (max-width:768px) { .rctab-item{float:left;width:100%;} .rctab-item {margin:10px auto;}} 

2. Selanjutnya tambahkan isyarat di bawah ini sebelum </head>

<script type='text/javascript'> //<![CDATA[ function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsfZ5evSuKSCPryyFmzWbpOtzIAPtY4dcmQbMAG57NjlkgV4jCla_pLIhX6RbhyphenhyphenJr2aKNGEnQY-6vKX3aSELBfWd2z1h2bw1a5QIcrYgp_N7ukTdDCSnIdmFGNydi30_jTbKfHJnCgc5M/s1600/thumb.png",t[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsfZ5evSuKSCPryyFmzWbpOtzIAPtY4dcmQbMAG57NjlkgV4jCla_pLIhX6RbhyphenhyphenJr2aKNGEnQY-6vKX3aSELBfWd2z1h2bw1a5QIcrYgp_N7ukTdDCSnIdmFGNydi30_jTbKfHJnCgc5M/s1600/thumb.png"),t}function load_w_tab(a){var t=a.find(".rctab-content>.active"),e=t.attr("data-load");$.ajax({type:"GET",url:"/feeds/posts/summary/-/"+e+"?max-results=20&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(a){if(a.feed.entry){t.append('<div class="wtab-inner"></div>');for(var e=0;e<a.feed.entry.length;e++){for(var i=a.feed.entry[e],d=0;d<a.feed.entry[e].link.length;d++)if("alternate"==a.feed.entry[e].link[d].rel){var s=a.feed.entry[e].link[d].href;break}var n=i.title.$t,l=getMeImg(i.media$thumbnail),r='<div class="rctab-item"><div class="rctab-item-inner"><a href="'+s+'"><img src="'+l[0]+'"/></a><h3><a href="'+s+'">'+n+'</a></h3><div style="clear:both"></div></div></div>';t.find(".wtab-inner").append(r)}t.addClass("hide-load")}}})}function getwtabs(e){for(var labelArr=eval(e.attr("data-label")),html='<div class="rctab-button">',i=0;i<labelArr.length;i++)html+='<span data-target="'+labelArr[i]+'-genova">'+labelArr[i]+"</span>";html+='</div><div class="rctab-content">';for(var i=0;i<labelArr.length;i++)html+='<div data-load="'+labelArr[i]+'" data-container="'+labelArr[i]+'-genova">'+loaderHTML+"</div>";html+="</div>",e.append(html),e.find(".rctab-button>span").first().addClass("active"),e.find(".rctab-content>div").hide(0),e.find(".rctab-content>div").first().show(0).addClass("active loaded"),setTimeout(function(){load_w_tab(e)},500),e.find(".rctab-button>span").click(function(){var a=$(this).attr("data-target"),t=$(this),i="";e.find(".rctab-content>div").each(function(){$(this).attr("data-container")==a&&(e.find(".rctab-button>span").removeClass("active"),t.addClass("active"),e.find(".rctab-content>div").removeClass("active").hide(0),$(this).fadeIn().addClass("active"),i=$(this))}),i.hasClass("loaded")||(i.addClass("loaded"),setTimeout(function(){load_w_tab(e)},500))})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';$(function(){getwtabs($(".recent-labpost"))}); //]]> </script> <script type='text/javascript'> //<![CDATA[ function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsfZ5evSuKSCPryyFmzWbpOtzIAPtY4dcmQbMAG57NjlkgV4jCla_pLIhX6RbhyphenhyphenJr2aKNGEnQY-6vKX3aSELBfWd2z1h2bw1a5QIcrYgp_N7ukTdDCSnIdmFGNydi30_jTbKfHJnCgc5M/s1600/thumb.png",t[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsfZ5evSuKSCPryyFmzWbpOtzIAPtY4dcmQbMAG57NjlkgV4jCla_pLIhX6RbhyphenhyphenJr2aKNGEnQY-6vKX3aSELBfWd2z1h2bw1a5QIcrYgp_N7ukTdDCSnIdmFGNydi30_jTbKfHJnCgc5M/s1600/thumb.png"),t}function getauthor(a){for(var t=0;t<a.length;t++)var e="<span class='author'>&#xf007; "+a[t].name.$t+"</span>";return e}function getmeta(a){var t=[];t[1]="Jan",t[2]="Feb",t[3]="Mar",t[4]="Apr",t[5]="May",t[6]="Jun",t[7]="Jul",t[8]="Aug",t[9]="Sep",t[10]="Oct",t[11]="Nov",t[12]="Dec";var e=a.substring(0,4),s=a.substring(5,7),n=a.substring(8,10),i="<span class='date'>&#xf017; "+t[parseInt(s,10)]+" "+n+" "+e+"</span>";return i}function t(a){var a,t,e=[];for(t=0;a>t;t++)e.push(t);return shuffle(e)}function getmashrandom(a){var e="/feeds/posts/summary/?max-results=500&alt=json-in-script",s=a.find("div.tab-mash-random");s.find("span#tab-mash-random").addClass("loaded"),s.append('<ul class="random-inner"></ul>'),$.ajax({type:"GET",url:e,async:!0,contentType:"application/json",dataType:"jsonp",success:function(a){s.addClass("hide-load");for(var e=a.feed.entry,n=e.length,i=t(n),r=0;5>r;r++){for(var d=0;d<a.feed.entry[i[r]].link.length;d++)if("alternate"==e[i[r]].link[d].rel){var l=a.feed.entry[i[r]].link[d].href;break}var c=getMeImg(e[i[r]].media$thumbnail),o=e[i[r]].title.$t,u=e[i[r]].published.$t,h=getmeta(u),f=getauthor(e[i[r]].author),m='<li><a href="'+l+'"><img  class="toLoad" src="'+c[0]+'"/></a><div class="recent-list-c"><h3><a href="'+l+'">'+o+'</a></h3><div class="meta">'+f+" "+h+"</div></div></li>";s.find("ul").append(m)}}})}function getmashrecent(a){a.find("span#tab-mash-recent").addClass("loaded"),$.ajax({type:"GET",url:"/feeds/posts/summary?max-results=20&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(t){if(t.feed.entry){a.find("div.tab-mash-recent").append('<ul class="recent-post-list"></ul>');for(var e=0;e<t.feed.entry.length;e++){for(var s=t.feed.entry[e],n=0;n<t.feed.entry[e].link.length;n++)if("alternate"==t.feed.entry[e].link[n].rel){var i=t.feed.entry[e].link[n].href;break}var r=s.title.$t,d=getmeta(s.published.$t),l=getauthor(s.author),c=getMeImg(s.media$thumbnail),o="<li class='recent-post-item'><a href='"+i+"'><img src='"+c[0]+"'/></a><div class='recent-list-content'><h3><a href='"+i+"'>"+r+"</a></h3><div class='recent-list-meta'>"+d+l+"</div></div></li>";a.find("div.tab-mash-recent ul").append(o)}}}})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';shuffle=function(a){for(var t,e,s=a.length;s;t=parseInt(Math.random()*s),e=a[--s],a[s]=a[t],a[t]=e);return a},$(function(){$(".thetabs").each(function(){var a=$(this);a.append("<div class='tab-mash-outer'><div class='tab-mash-button'><span class='active' id='tab-mash-recent'><i class='fa fa-rss'></i> Recent</span><span id='tab-mash-random'><i class='fa fa-random'></i> Random</span></div><div class='tab-mash-content'><div class='tab-mash-recent min-height-need'></div><div class='tab-mash-random min-height-need' style='display:none;'>"+loaderHTML+"</div></div></div>"),getmashrecent(a),a.find(".tab-mash-button>span").click(function(){var t=$(this),e=a.find(".tab-mash-content>div");e.each(function(){$(this).hasClass(t.attr("id"))?($(this).fadeIn(),a.find(".tab-mash-button>span").removeClass("active"),t.addClass("active"),t.hasClass("loaded")||("tab-mash-random"==t.attr("id")?(t.addClass("loaded"),setTimeout(function(){getmashrandom(a)},500)):"tab-mash-comment"==t.attr("id")&&(t.addClass("loaded"),setTimeout(function(){getmashcomment(a)},2e3)))):$(this).hide(0)})})})}); //]]> </script>

Edit pada isyarat yang ditandai untuk memilih jumlah post yang akan dimunculkan

3. Tambahkan isyarat pemanggil ini bebas diantara tag pembuka <body> dan tag epilog </body>

<div class='recent-labpost' data-label='[&quot;NAMA LABEL&quot;,&quot;NAMA LABEL&quot;,&quot;NAMA LABEL&quot;,&quot;NAMA LABEL&quot;,&quot;NAMA LABEL&quot;]'/>

Ganti NAMA LABEL di atas dengan nama label pada blog sobat.

4. Terakhir, simpan template.

Demo

Demikian tutorial Membuat Recent Post by Label dengan Fungsi Tab, biar bermanfaat.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Artikel Terkait Di Dalam Postingan

Cara Memasang Artikel Terkait Di Dalam Postingan

CSS HTML Javascript Tips Blogger Widget

Cara Memasang Artikel Terkait di Dalam Postingan - Halo sahabat blogger, tentunya sahabat sudah mengetahui dengan fungsi sebuah widget artikel terkait di blog yang menampilkan sejumlah artikel terkait sesuai label di bawah artikel baik itu dalam bentuk link dan thumbnail ataupun link saja.

Namun sedikit berbeda dari sebelumnya, di sini aku akan menunjukkan tutorial Cara Memasang Artikel Terkait di Dalam Postingan. Seperti yang aku singgung sebelumnya di artikel Cara Memasang Iklan Adsense di Tengah Postingan bahwa sahabat juga sanggup memasang instruksi atau widget lain di dalam instruksi tersebut, tutorial blogger kali ini pun masih memakai instruksi yang sama. Tutorial ini aku dapatkan dari blog http://kileakskiteaks.blogspot.com/search?q=cara-memasang-iklan-adsense-di-tengah-postingan dan telah aku modifikasi kembali diadaptasi dengan style saya.

Manfaat lain yang didapatkan dari memasang artikel terkait di dalam postingan ini adalah untuk menambah jumlah pengunjung serta meningkatkan kualitas Internal Link di blog sobat.

Bagi yang ingin memasangnya di blog, silakan ikuti langkah-langkah Cara Memasang Artikel Terkait di Dalam Postingan atau lebih tepatnya di tengah konten artikel berikut ini

Cara Memasang Artikel Terkait di Dalam Postingan

1. Buka Blogger > Template > Klik tombol Edit HTML > Tambahkan instruksi di bawah ini sebelum tag </head>

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

2. Tambahkan CSS di bawah ini sebelum instruksi ]]></b:skin> atau </style>

/* Related Post Style 1 */ .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;} .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s} .related-simplify ul li:nth-child(odd){background:#fefefe} .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)} .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s} .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;} .related-simplify a:hover{color:#0383d9;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display:none;} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Contoh tampilan widget Artikel Terkait Style 1

/* Related Post Style 2 */ .related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)} .related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%} .related-simplify ul{margin:0;padding:0} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s} .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;} .related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;} .related-simplify a:hover{color:#0383d9;} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Contoh tampilan widget Artikel Terkait Style 2

/* Related Post Style 3 */ .related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;} .related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px} .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s} .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s} .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;} .related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;} .related-simplify a:hover{color:#fff;text-decoration:underline} .related-simplify ul li:nth-child(n+4) {display:none;} @media only screen and (max-width:768px){ .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0} .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%} .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c} .related-simplify ul li{padding:5px 0} .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Pastikan di blog sahabat sudah memasang Font Awesome semoga icon sanggup muncul

3. Selanjutnya, cari dan ganti instruksi <data:post.body/> dengan instruksi di bawah ini

Di dalam template sahabat akan menemukan beberapa instruksi <data:post.body/> tergantung template yang digunakan, coba satu persatu hingga artikel terkait muncul di dalam halaman artikel

<div expr:id='&quot;post1&quot; + data:post.id'/> <div class='related-simplify'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div> <script type='text/javascript'> var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

4. Simpan template dan lihat hasilnya.

Result

Makara dengan memasang instruksi ini sahabat tidak perlu lagi repot-repot memasang link secara manual di artikel blog. Demikian tutorial Cara Memasang Artikel Terkait di Dalam Postingan yang sanggup berikan. Terima kasih sudah berkunjung dan semoga bermanfaat.
Sumber http://arlinadesign.blogspot.com

Cara Menciptakan Recent Post Widget Berwarna

Cara Menciptakan Recent Post Widget Berwarna

Tips Blogger Widget

Kali ini akan membuatkan tutorial Cara Membuat Recent Post Widget Berwarna yang cukup sederhana namun tetap menarik. Widget ini aku dapatkan dari widget recent post pada template Gravity yang sebelumnya aku publish di blog Idntheme. Widget ini sudah mendukung responsive yang akan mengikuti ukuran layar yang digunakan.

Untuk tampilan live dari widget ini sanggup teman kunjungi pen di bawah ini

Recent Post Widget Berwarna versi 1

Result

Recent Post Widget Berwarna versi 2

Result

Bagaimana, tertarik untuk memasangnya di blog? Bagi teman yang ingin memasangnya, aku akan berikan tutorialnya di bawah ini

Cara Membuat Recent Post Widget Berwarna

Buka Blogger > Tema > Klik tombol Edit HTML dan tambahkan instruksi di bawah ini sebelum instruksi ]]></b:skin> atau </style>

CSS Recent Post Widget Berwarna versi 1

/* Featured Versi 1 */ .gravityfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px} .gravfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%} .gravfeatureditem .gracontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,60px);opacity:0;visibility:hidden;transition:all .3s} .gravfeatureditem:hover .gracontent{opacity:1;visibility:visible;transform:translate(0,0)} .gravfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center} .gravfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%} .gravfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s} .gravfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0.9;transition:background 0.3s linear,opacity 0.3s linear} .gravfeatureditem.first a:before,.gravfeatureditem.first .gracontent{background:#56a8df} .gravfeatureditem.second a:before,.gravfeatureditem.second .gracontent{background:#e49148} .gravfeatureditem.third a:before,.gravfeatureditem.third .gracontent{background:#5bccb6} .gravfeatureditem.fourth a:before,.gravfeatureditem.fourth .gracontent{background:#f5b44c} .gravfeatureditem a:hover:before{opacity:0.1;} .gravfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellygrav .6s linear;opacity:1;visibility:visible;transition:all .3s} .gravfeatureditem:hover a:after{opacity:0;visibility:hidden;transform:translate(0,-60px)} @media screen and (max-width:826px){ .gravfeatureditem{width:50%} .gravfeatureditem.third,.gravfeatureditem.fourth{display:none}} @media screen and (max-width:641px){ .gravfeatureditem{width:100%} .gravfeatureditem.second,.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}

CSS Recent Post Widget Berwarna versi 2

/* Featured Versi 2 */ .gravityfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px} .gravfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%} .gravfeatureditem .gracontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,0);opacity:1;visibility:visible;transition:all .3s} .gravfeatureditem:hover .gracontent{opacity:0;visibility:hidden;transform:translate(0,60px)} .gravfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .gravfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%} .gravfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s} .gravfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0;transition:background 0.3s linear,opacity 0.3s linear} .gravfeatureditem.first a:before,.gravfeatureditem.first .gracontent{background:#56a8df} .gravfeatureditem.second a:before,.gravfeatureditem.second .gracontent{background:#e49148} .gravfeatureditem.third a:before,.gravfeatureditem.third .gracontent{background:#5bccb6} .gravfeatureditem.fourth a:before,.gravfeatureditem.fourth .gracontent{background:#f5b44c} .gravfeatureditem a:hover:before{opacity:0.9;} .gravfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,-60px);animation:jellygrav .6s linear;opacity:0;visibility:hidden;transition:all .3s} .gravfeatureditem:hover a:after{opacity:1;visibility:visible;transform:translate(0,0)} @media screen and (max-width:826px){ .gravfeatureditem{width:50%} .gravfeatureditem.third,.gravfeatureditem.fourth{display:none}} @media screen and (max-width:641px){ .gravfeatureditem{width:100%} .gravfeatureditem.second,.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}

Tambahkan juga link CSS library Material Icons sebelum </head>

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>

Widget memakai CSS library icon dari Material Icons, jikalau teman memakai Fontawesome. Ganti instruksi CSS di bawah ini

.gravfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellygrav .6s linear;opacity:1;visibility:visible;transition:all .3s}

Langkah selanjutnya, tambahkan instruksi di bawah ini sempurna sebelum instruksi </body>

<script type='text/javascript'> //<![CDATA[ // Recent Post function getPostUrl(a){for(var b=0;b<a.link.length;b++)if("alternate"==a.link[b].rel){var c=a.link[b].href;return c}}function getPostPublishDate(a){var b=a.published.$t,c=b.split("-")[2].substring(0,2),d=b.split("-")[1],e=b.split("-")[0],f=["January","February","March","April","May","June","July","August","September","Octobor","November","December"],g=f[d-1],h=g+" "+c+", "+e;return b?h:""}function getPostCategory(a){var b=a.category;b&&(b=a.category[0].term);var c='<div class="category-wrapper"><a class="category" href="/search/label/'+b+'?max-results=10">'+b+"</a></div>";return b?c:""}function Slider(a){for(var c=(new Array,""),d=a.feed.entry.length,e=0;e<d;e++){var f=a.feed.entry[e],g=f.title.$t,h=getPostUrl(f),l=(f.author[0].name.$t,getPostPublishDate(f),getPostCategory(f),f.category[0].term),m=a.feed.entry[e].content.$t,n=$("<div>").html(m);if(m.indexOf("//www.youtube.com/embed/")>-1)var o=a.feed.entry[e].media$thumbnail.url,p=o;else if(m.indexOf("<img")>-1)var q=n.find("img:first").attr("src"),p=q;else var p=no_image;0==e&&(c=c+'<div class="gravfeatureditem first"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),1==e&&(c=c+'<div class="gravfeatureditem second"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),2==e&&(c=c+'<div class="gravfeatureditem third"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),3==e&&(c=c+'<div class="gravfeatureditem fourth"><div class="gracontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>')}slider.html('<div class="gravityfeatured">'+c+"</div>"),$(".gravityfeatured").find(".feat-img").each(function(){$(this).attr("style",function(a,b){return b.replace("/default.jpg","/mqdefault.jpg")}).attr("style",function(a,b){return b.replace("s72-c","s1600")}).attr("style",function(a,b){return b.replace("s320","s1600")}).attr("style",function(a,b){return b.replace("s400","s1600")}).attr("style",function(a,b){return b.replace("s640","s1600")})})}var slider=$("#gravityfeatured .widget-content"),sliderContent=slider.text().trim();"no"!==sliderContent.toLowerCase().trim()&&'"no"'!==sliderContent.toLowerCase()&&""!==sliderContent?"[recent]"!==sliderContent?$.ajax({url:"/feeds/posts/default/-/"+sliderContent+"?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$("#slider").remove(); //]]> </script>

Setelah itu langkah selanjutnya, tambahkan HTML widget di bawah ini bebas di antara instruksi <body> dan </body>

<b:section class='gravityfeaturedz' id='gravityfeatured' showaddelement='yes'>   <b:widget id='HTML94' locked='false' title='' type='HTML' version='1'>     <b:includable id='main'>   <div class='widget-content'>     <data:content/>   </div> <div class='clear'/> </b:includable>   </b:widget> </b:section>

Simpan template > Klik Tata Letak > Refresh halaman Blogger (klik OK) > Tambahkan instruksi d bawah ini di dalam widget yang telah ditambahkan > Klik Simpan Widget

[recent]

Lihat akhirnya di blog sobat.

Cukupmudah bukan? Demikian tutorial untuk kesempatan kali ini, terima kasih sudah berkunjung.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Kotak Iklan Di Blog

Cara Memasang Kotak Iklan Di Blog

Tips Blogger Widget

Cara Memasang Kotak Iklan di Blog - Pada kesempatan ini Saya akan membahas mengenai tutorial menciptakan kotak iklan di blog yang berukuran 125x125 pixels. Mungkin Anda sudah mengetahui bahwa aktivitas menulis artikel di blog sekarang tidak lagi hanya sekedar pelepas hobi atau mengisi kekosongan waktu. Membuat blog dan memanagenya dengan baik dan benar juga sanggup menghasilkan bahan berupa uang yang sebagian besar para blogger menjadikannya sebagai salah satu mata pencaharian.

Menampilkan atau menciptakan space iklan berupa banner di website / blog biasanya dijadikan peluang bisnis tersendiri oleh blog atau website yang mempunyai pengunjung yang banyak dan mempunyai kepopuleran di search engine. Namun tidak menutup kemungkinan blog Anda yang masih gres sanggup usulan oleh pihak advertise untuk memasang iklan mereka ke dalam blog yang Anda miliki. Jika Anda tertarik untuk menyediakan atau menciptakan kotak iklan di blog, ikuti tutorial blogger yang akan Saya jelaskan berikut ini.

Perlu Saya sampaikan sebelum Anda menciptakan kotak iklan de blog yaitu hal yang perlu diperhatikan dalam menampilkan space banner iklan yaitu letak serta susunannya semoga semakin menarik minat orang banyak. Makara tidak asal pasang gambar yang kesannya iklan yang ditampilkan menjadi kurang menarik alasannya berantakan.

1. Silakan login ke Blogger Anda > Tema > Klik Edit HTML > Kemudian tambahkan arahan di bawah ini sebelum arahan ]]></b:skin> atau </style>

/* Kotak Iklan */ .kotak_iklan {text-align: center;} .kotak_iklan  img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;} .kotak_iklan  img:hover {border:1px solid #aaa} .kotak_iklan  img.noborder {border:0;}

2. Simpan template

3. Kemudian klik Tata Letak > Tambah Gadget > Pilih HTML/JavaScript > selanjutnya silakan masukkan arahan berikut ini ke dalam widget gres tadi.

<div class="kotak_iklan"> <a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a> <a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a> <a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>  <a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>  </div>

Perhatikan arahan yang ditandai, isi semua dengan deskripsi Anda.

4. Jika sudah selesai, simpan dan lihat hasilnya

Saya rasa tidak sulit untuk menciptakan kotak iklan di blog, hanya perlu menambahkan beberapa arahan ke dalam template blog. Untuk itu Saya akhiri saja tutorial cara menciptakan kotak iklan di blog ini. Semoga bermanfaat.
Sumber http://arlinadesign.blogspot.com

Memasang Banner Iklan Melayang Di Kanan Dan Kiri Blog

Memasang Banner Iklan Melayang Di Kanan Dan Kiri Blog

Tips Blogger Widget

Cara Memasang Banner Iklan Melayang di Kanan dan Kiri Blog - Pada tutorial kali ini, akan menawarkan tutorial Cara Memasang Banner Iklan Melayang di Kanan dan Kiri Blog. Dalam pemasangan iklan melayang ini, tampilan iklan akan terlihat pada sisi kanan dan sisi kiri blog. Kaprikornus bukan hanya satu iklan melainkan dua banner iklan.

Tertarik untuk memasangnya? Silakan ikuti beberapa langkah berikut ini :

Berikut rujukan tampilan banner ini

Cara Memasang Banner Iklan Melayang di Kanan dan Kiri Blog

1. Login ke Blogger > Lalu klik Tata Letak > Buat widget gres > Kemudian salin arahan di bawah ini didalamnya

<style scoped='' type="text/css"> #iklankirikanan{position:fixed;_position:absolute;top:0;right:0;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)} </style> <script type="text/javascript"> function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close1(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("iklankirikanan").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar </script> <br /> <div class="clear"> </div> <div id="iklankirikanan"> <div style="text-align: right;"> <a href="" onclick="close1(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif_6LHaw8nyiZHkryfJLVrDQ3vEmnGtDUE6RJVPRaTniIcYLzkLbBgYB1Qp2PLomcnsqP3fA7gtzsync5ItRryQjkm3kgFwN6UA5e1GvoyBNxctW-6_zJMRwbvuYFeGU-aXq9swIJE_mto/s1600/close-btn.png" /></a></div> <div onclick='close1()'> <div style="background: #fff;"> <a target="_blank" href="LINK-TUJUAN"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSQK32AKigPauq8Fl0Vuyba1yXWQ5x6VxHyNoM5-E6f53DsP_DUwZOfE9Nlt_4C5fTzUrqS29lGH61SB3FHRq4Wp7PsAPnagSQqj50yTgme_JMF5CRf-nhvFugVZzBre1mDPDY80oaXTf9/s1600/ban-melayang.gif" style="border: none;" alt="Cara Memasang Banner Iklan Melayang di Kanan dan Kiri Blog Memasang Banner Iklan Melayang di Kanan dan Kiri Blog" /></a></div> </div></div> <style scoped='' type="text/css"> #iklankirikanan1{position:fixed;_position:absolute;top:0;left:0;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)} </style> <script type="text/javascript"> function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close11(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("iklankirikanan1").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar </script> <br /> <div class="clear"> </div> <div id="iklankirikanan1"> <div style="text-align: left;"> <a href="" onclick="close11(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif_6LHaw8nyiZHkryfJLVrDQ3vEmnGtDUE6RJVPRaTniIcYLzkLbBgYB1Qp2PLomcnsqP3fA7gtzsync5ItRryQjkm3kgFwN6UA5e1GvoyBNxctW-6_zJMRwbvuYFeGU-aXq9swIJE_mto/s1600/close-btn.png" /></a></div> <div onclick='close11()'> <div style="background: #fff;"><a target="_blank" href="LINK-TUJUAN"><img style="border: none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSQK32AKigPauq8Fl0Vuyba1yXWQ5x6VxHyNoM5-E6f53DsP_DUwZOfE9Nlt_4C5fTzUrqS29lGH61SB3FHRq4Wp7PsAPnagSQqj50yTgme_JMF5CRf-nhvFugVZzBre1mDPDY80oaXTf9/s1600/ban-melayang.gif" width="160" height="600"/></a><p></p></div></div></div>

Isi / ganti arahan yag ditandai dengan keterangan Anda.

2. Simpan widget.

• DEMO

Demikian tutorial Cara Memasang Banner Iklan Melayang di Kanan dan Kiri Blog, supaya berhasil terpasang di blog Anda.
Sumber http://arlinadesign.blogspot.com

Cara Menambahkan Light Gallery Di Tema Blog

Cara Menambahkan Light Gallery Di Tema Blog

Tips Blogger Widget

Light Gallery ini berfungsi untuk menampilan galeri dari gambar atau video ketika kita membuka gambar atau video pada blog.

Light Gallery yaitu plugin untuk sebuah website dibentuk oleh Sachin N di Github. Untuk fungsi berdasarkan aku hampir sama dengan Lightbox yang sudah ada di Blogger, namun dengan fitur yang lebih baik. Sperti sudah support Responsive, galeri gambar yang dapat digeser, tampilan yang lebih menarik, tombol untuk mendownload gambar dan tombol fullscreen, transisi yang lebih smooth, serta kelebihan lainnya yang tidak dimiliki Lightbox standar Blogger.

Untuk menambahkannya ke dalam blog sobat, silakan ikuti Cara Menambahkan Light Gallery di Tema Blog berikut ini

Cara Menambahkan Light Gallery di Tema Blog

Sebelum menambahkan Light Gallery sebaiknya nonaktifkan Lightbox standar Blogger di Setelan

Pertama buka Template Editor blog, tambahkan isyarat di bawah ini sempurna sebelum body epilog template menyerupai ini </body>

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/> <link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/> <script type='text/javascript'> //<![CDATA[ $('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[imageanchor]"}); //]]> </script>

Bagi yang sudah mengoptimasi gambar pada postingan Beberapa Optimasi Artikel Blog dengan menghilangkan imageanchor="1" dan mengganti border="0" dengan style="border: none;", gunakan isyarat di bawah ini

<script src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/c5d422c5/lightgallery.js'/> <link href='https://cdn.jsdelivr.net/lightgallery/1.3.9/css/lightgallery.css' rel='stylesheet'/> <script type='text/javascript'> //<![CDATA[ $('#animated-thumbnail').lightGallery({thumbnail:true,getCaptionFromTitleOrAlt:true,selector:"a[style]"}); //]]> </script>

Jika hanya ingin menampilkan pada halaman tertentu, silakan bungkus isyarat di atas dengan Tag Kondisional

Kemudian cari post-body menyerupai ini

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

Kode di atas dapat berbeda tergantung tema yang digunakan.

Ganti dengan isyarat ini

<div class='post-body entry-content' id='animated-thumbnail' itemprop='articleBody'>

Simpan template dan selesai. Untuk melihat balasannya klik tombol di bawah ini

Result

Untuk pengaturan lebih lengkapnya, sahabat dapat kunjungi link ini

Responsive

Sekian dari saya, selamat mencoba.
Sumber http://arlinadesign.blogspot.com