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

Cara Memasang Tombol Reaksi Di Blogger Dengan Vicomi

Cara Memasang Tombol Reaksi Di Blogger Dengan Vicomi

Tips Blogger Widget

Diantara teman blogger mungkin sudah familiar dengan tombol reaksi yang sering muncul di situs-situs info disertai dengan ikon/emoji yang eye catching, di simpulan goresan pena artikel biasanya teman akan melihat tombol reaksi tersebut. Tombol reaksi ini berfungsi untuk menambah umpan balik dari pembaca mengenai balasan dari artikel yang sedang ia baca.

Bagi yang memakai platform WordPress terdapat plugin DW Reaction, Emotify Reaction, dan plugin tombol reaksi lainnya yang sanggup ditambahkan dengan gampang ke situs WordPress. Namun bagaimana dengan platform Blogger? Sebetulnya di blogger sendiri sudah menyediakan fitur tombol reaksi yang sanggup kita tambahkan ke blog hanya saja tampilannya tombol radio saja sanggup dibilang sangat sederhana, namun pada kesempatan ini saya akan menyebarkan bagaimana cara memasang tombol reaksi di blog dengan third party Vicomi yang lebih keren dari tombol reaksi bawaan blogger.

Cara Memasang Tombol Reaksi di Blogger dengan Vicomi

Bagi teman yang tertarik untuk memasang tombol reaksi Vicomi ini, silakan ikuti langkah-langkah berikut ini

Pertama yang harus dilakukan yakni dengan menciptakan akun di situs Vicomi

Kemudian klik tombol Get Your Free Reaction Tools Now, sehabis itu pilih Code For HTML Website, klik tombol Get the code for HTML website

Selanjutnya isi form dengan lengkap

Kemudian copas isyarat yang disediakan ke dalam blog

Contoh Cara Penambahan ke Tema Blogger

Tambahkan isyarat ibarat pada gambar di atas ke dalam tema sebelum </body> (Sesuaikan dengan isyarat token blog sobat)

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ // Tombol Reaksi Vicomi !function(){var e=document.createElement("script");e.async=!0,e.src="https://assets-prod.vicomi.com/vicomi.js?token=1d852d9a6638475caf87db6cf9dd5255";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)}(); //]]> </script> </b:if>

Tambahkan juga isyarat HTML di bawah ini sehabis isyarat <data:post.body/> paling bawah yang dibungkus tag kondisional halaman artikel

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='kabarvicomi'> <div class='kabarvicomi'> <div data-access-token='1d852d9a6638475caf87db6cf9dd5255' data-display-type='4' id='vc-feelback-main'/> </div> </div> </b:if>

Di sini saya menamberi CSS suplemen kabarvicomi, tambahkan juga CSS ini sebelum </style>

#kabarvicomi{position:relative;margin:0 auto 20px auto;overflow:hidden} .kabarvicomi{margin:-28px auto 0 auto}

Setelah itu klik tombol Simpan tema, selesai dan lihat jadinya di blog.

Sobat juga sanggup mengatur tampilan dari tombol reaksi di dasbor Vicomi, silakan eksplorasi sesuai kebutuhan

Kekurangan dari tombol reaksi ini yakni tidak support untuk multi situs, jadi hanya sanggup menambahkan satu situs per akun.

Sekian dari mengenai Cara Memasang Tombol Reaksi di Blogger dengan Vicomi, terima kasih sudah berkunjung dan salam blogger 😊

Sumber http://arlinadesign.blogspot.com

Cara Memasang Recent Comments Disqus Di Blog

Cara Memasang Recent Comments Disqus Di Blog

Disqus Tips Blogger Widget

Recent Comments Disqus berfungsi menampilkan komentar terbaru dari Disqus di situs teman dengan tampilan slide dari samping dan kalau teman menekan tombol icon lonceng di pojok atas maka widget recent comments ini akan terbuka. Dengan widget ini teman akan jadi lebih gampang mengetahui komentar terbaru dari Disqus di situs sobat.

Bagi teman yang ingin memasangnya, silakan ikuti langkah-langkah berikut ini.

Cara Memasang Recent Comments Disqus di Blog

Widget ini memakai font Awesome, silakan tambahkan link CSS berikut di atas </head>

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

Pertama, buka Blogger klik hidangan Tema dan klik tombol Edit HTML lalu tambahkan aba-aba CSS di bawah ini sebelum </head>

<style type='text/css'> /* Animation */ @keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}} @keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}} /* Recent Comments Disqus */ .header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden} .header-1 h4{font-size:18px;float:left;color:#fff} .header-1 img{float:right} .notif-show{position:fixed;top:10px;right:10px;z-index:997;color:#fff!important;background:rgba(0,0,0,0.2);font-size:16px;font-weight:normal;width:auto;padding:6px 8px;cursor:pointer;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:2px;transition:all .6s} .notif-show:hover{background:#2e9eff;animation:rubberBand 1s} #disqus-notif{position:fixed;background:#fff;z-index:999;width:25%;top:0;right:-769px;bottom:0;transition:all .5s} #disqus-notif.active{right:0} #overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0} #disqus-notif .close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:15px;top:-7px;visibility:hidden;opacity:0;transition:all .5s} #disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:6px;font-size:35px;font-weight:700;color:#fff} #disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)} #RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%} #RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden} #RecentComments img.dsq-widget-avatar{margin:0 10px 0 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block} #RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400} #RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ced6e0;font-size:12px} #RecentComments p.dsq-widget-meta a:hover{color:#a4b0be} #RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:1px solid rgba(0,0,0,0.08)} #RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:700;font-size:14px;margin:7px 0 0 0} #RecentComments a.dsq-widget-user:hover{color:#2e87e7} #RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0} #RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5} #RecentComments .dsq-widget-item pre{position:relative;background-color:#f8cf82;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px} #RecentComments .dsq-widget-item pre code{color:#000} #disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s} @media screen and (max-width:1366px){#disqus-notif{width:35%}} @media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}#disqus-notif .close-text{display:none}} </style>

Selanjutnya tambahkan aba-aba ini bebas diantara aba-aba <body> dan </body> atau cukup tambahkan sebelum </body>

<a class='notif-show' href='javascript:;'><i class='fa fa-bell'/></a> <div id='overlay-1'/> <div id='disqus-notif'> <a class='close-1' href='javascript:;' title='Close'>&#215;<span class='close-text'>Close</span></a> <div class='header-1'><h4>Notifications</h4><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHTEdYQElDanhNd4isuCkTjo41wMQNZWMJYrttW8h0vaecO9Vbn69kiOKkgyWwIBf5Xd9byX_ss3URWCYzU9OX-uqDXwFjs5llaBAV4GRfKRhGn4fCuKqikF7agYx2gQHXV9bRfSmdfLh7/s1600/Disqusq.png' title='Disqus'/></div> <div class='dsq-widget' id='RecentComments'> <script defer='defer' type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://arlinadesign.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>"); //]]> </script> </div> </div>

Ganti aba-aba yang ditandai dengan username Disqus blog sobat. Edit pada bab ini kalau teman ingin mengubah setelan recent comments

num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180

Nilai	Keterangan
num_items=20	Jumlah komentar yang muncul
hide_mods=0	Ganti 0 dengan 1 untuk menyembunyikan komentar admin
hide_avatars=0	Ganti 0 dengan 1 untuk menyembunyikan avatar
avatar_size=32	Ukuran gambar avatar
excerpt_length=180	Jumlah goresan pena komentar yang tampil

Selanjutnya tambahkan aba-aba ini di bawah sebelum </body>

<script defer='defer' type='text/javascript'> //<![CDATA[ // Recent Comments Disqus $(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})}); $(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})}); $("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank'); //]]> </script>

Selesai, klik tombol Simpan tema untuk perubahan dan cek alhasil di blog sobat.

• Result

Demikian Cara Memasang Recent Comments Disqus di Blog, biar bermanfaat bagi sobat. Wassalam.
Sumber http://arlinadesign.blogspot.com

Cara Terbaru Menambahkan Formulir Kontak Di Blog

Cara Terbaru Menambahkan Formulir Kontak Di Blog

Tips Blogger Widget

Kali ini akan menyebarkan Cara memasang Widget Formulir Kontak pada Halaman Statis menyerupai pada blog ini. Sebelumnya aku juga pernah menyebarkan caranya pada postingan ini Memasang Formulir Kontak Pada Halaman Statis, perbedaan dari yang akan aku bagikan kini hanya pada tampilan saja sebab ada usul dari teman blogger untuk menyebarkan tampilan formulir kontak menyerupai blog ini.

Baiklah, berikut Cara Terbaru Menambahkan Formulir Kontak di Blog.

Pertama, buka Blogger tambahkan widget formulir kontak di sajian Tata Letak > Klik Tambahkan Gadget > Setelah sajian terbuka, pilih Gadget Lainnya dan klik tanda plus di widget Formulir kontak lalu klik Simpan.

Silakan lewati langkah ini jikalau di blog teman sudah menambahkan widget Formulir kontak.

Selanjutnya, klik sajian Tema > Klik tombol Edit HTML > Tambahkan isyarat CSS di bawah ini sebelum </head>

<style type='text/css'> #ContactForm1,#ContactForm1 br{display:none} </style>

Setelah itu klik tombol Simpan tema.

Selanjutnya klik sajian Halaman > Klik tombol Halaman baru dan tambahkan isyarat di bawah ini pada tab HTML post.

Edit juga Setelan entri pada sajian Pilihan

<form name="contact-form"> <div class='formcolumn1'> <input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /> </div> <div class='formcolumn2'> <input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /> </div> <div class='formcolumn3'> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea> </div> <div class='formcolumn4'> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /> </div> <div style="max-width: 100%; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form>  <style scoped="" type="text/css"> #ContactForm1,#comments{display:none} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .formcolumn4{position:relative} .formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUrfNgbxhGeBmJReOkCfHFqULqm2LyMBeUpqbf4cKmSvHr1XMgjVMqkh9PDRt0gW6sytUYA-r3NeKJbWwlFbfBG8TPwtB_Ru0d9AugMpl7vLpJwCGC_xWW0Y45ybp7epZ5tXXz4UGcirkp/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px} form{color:#888} .formcolumn1,.formcolumn2{float:left;width:50%} .formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0} .formcolumn2{padding:0 0 0 10px} @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}} </style>

Bagi yang mengoptimasi blognya dengan menyembunyikan CSS dan JS Blogger tambahkan isyarat di bawah ini sempurna di bawah isyarat pada langkah sebelumnya

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7342017194742683056';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7342017194742683056','//www.arlinadzgn.com/','7342017194742683056'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>

Ganti semua isyarat yang ditandai dengan URL dan ID blog sobat. ID blog sanggup didapatkan ketika kita membuka salah satu blog di Blogger dan akan tampil pada tab browser

Jika sudah ditambahkan klik tombol Publikasikan dan selesai.

• Contoh Tampilan

Itulah Cara Terbaru Menambahkan Formulir Kontak di Blog, selamat mencoba dan supaya bermanfaat, wassalam.

Sumber http://arlinadesign.blogspot.com

Cara Memasang Tombol Go Up Dan Go Down Di Blog

Cara Memasang Tombol Go Up Dan Go Down Di Blog

Tips Blogger Widget

Kali ini akan menyebarkan tips Cara Memasang Tombol Go Up dan Go Down di Blog. Apa itu Tombol Go Up dan Go Down? Tombol Go Up dan Go Down ialah tombol yang berfungsi baik cara untuk melompat ke atas maupun ke bawah dengan gampang dan singkat, daripada menggerakannya dengan mouse. Ini ialah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan mudah.

Tombol Go Up dan Go Down mempunyai peranan cukup penting bagi sebuah situs dengan konten yang mempunyai halaman yang panjang. Untuk situs yang mempunyai banyak warta pada halamannya akan menciptakan konten-konten lain terlewati tanpa disadari menggulir jauh ke bawah halaman.

Baiklah, bagi yang ingin memasangnya silakan ikuti langkah berikut ini

Cara Memasang Tombol Go Up dan Go Down di Blog

Langkah pertama, buka Blogger > Klik sajian Tema > Klik Edit HTML

Kode yang akan aku bagikan ini memakai ikon dari Fontawesome, jikalau belum ditambahkan. Tambahkan isyarat di bawah ini sebelum </head> pada Template editor.

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

Setelah menambahkan isyarat Fontawesome silakan tambahkan isyarat di bawah ini sempurna sebelum </head>

Versi 1

<style type='text/css'> /* Go Up and Down */ #scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99} #scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #top{position:absolute;top:0} </style>

Versi 2 yang lebih sederhana

<style type='text/css'> /* Go Up and Down */ #scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99} #scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px} #scrollToTop a:hover{color:rgba(0,0,0,0.5)} #top{position:absolute;top:0} </style>

Kemudian tambahkan kedua isyarat di bawah ini sebelum </body>

<ul id='scrollToTop'>   <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>   <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li> </ul> <div id='top'/> <div id='bottom'/>

<script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})}); $(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})}); //]]> </script>

Simpan tema dan lihat kesudahannya di blog sobat.

• Result

Sekian untuk tips Cara Memasang Tombol Go Up dan Go Down di Blog, biar bermanfaat dan wassalam.
Sumber http://arlinadesign.blogspot.com

Cara Memasang Widget Sharethis Di Blogger

Cara Memasang Widget Sharethis Di Blogger

Tips Blogger Widget

Menambahkan widget share button merupakan salah satu cara untuk mendapat pembaca lebih banyak di blog kita. Karena, dengan memasang widget share ini pengunjung akan jadi lebih gampang untuk membagikan konten di sosial media miliknya.

Mungkin sudah banyak yang sudah tahu bagaimana cara menambahkan widget share dan mungkin juga ada sebagian yang belum tahu, jadi tidak ada salahnya kali ini akan membuatkan tips Cara Memasang Widget ShareThis di Blogger dengan efek melayang di pinggir halaman atau dipasang di dalam postingan blog. Tips ini juga sekaligus untuk menjawab ajakan dari Andika Pandanu lewat formulir kontak blog ini sebagai berikut

Bagi yang ingin memasang widget ShareThis ini silakan ikuti langkah-langkah di bawah ini.

Cara Memasang Widget ShareThis di Blogger

Pertama, jikalau teman belum mempunyai akun di ShareThis silakan daftar terlebih dahulu di link ini https://www.sharethis.com. Cara daftarnya klik sajian Account di pojok kanan atas halaman ShareThis, lalu akan muncul halaman menyerupai ini dan klik goresan pena Sign up - it's free

Kemudian tambahkan keterangan email, password dan alamat blog di halaman selanjutnya. Klik tanda centang di Privacy Notice dan klik tombol GET STARTED - IT'S FREE

Setelah masuk di dasbor ShareThis, klik tombol Get The Code untuk memverifikasi

Kemudian klik tombol Copy dan pastekan isyarat tersebut di dalam template editor blog sebelum isyarat </head> atau isyarat &lt;/head&gt;&lt;!--<head/>--&gt;, jikalau sudah ditambahkan klik tombol Simpan tema.

Jika terdapat pesan kesalahan ketika klik tombol Simpan tema, silakan tambahkan isyarat amp; pada link JS ShareThis misalnya menyerupai ini

<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5aee32b17782d000113e1528&product=social-ab' async='async'></script>

Tambahkan dengan isyarat yang saya tandai di bawah ini

<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5aee32b17782d000113e1528&amp;product=social-ab' async='async'></script>

Jika sudah, kembali ke dasbor ShareThis dan klik tombol Verify. Setelah itu akan muncul pesan All systems go! We've verified sharethis.js in installed dan Widget ShareThis siap digunakan. Biar lebih afdol, kini teman klik sajian Property Settings. Kemudian klik tombol Resend Verification Email dan cek email untuk verifikasi email dari ShareThis.

Nah kini teman tinggal mengaktifkan tombol mana yang ingin dimunculkan di blog, klik sajian Share Buttons dan pilih style yang ingin digunakan. Misalnya saya pilih Sticky Share Buttons, maka aktifkan tombol dari off ke on menyerupai ini

Di sini teman juga sanggup mengatur tombol share apa saja yang ingin diaktifkan dan beberapa pengaturan lainnya dengan mudah.

Tambahan

Reaction Buttons

Untuk mengaktifkan tombol Reaction Buttons, teman hanya perlu pilih sajian Reaction Buttons lalu klik Inline Reaction Buttons dan klik tombol radio dengan posisi off ke on

Kemudian tambahkan isyarat HTML Reaction Buttons ini ke dalam template sehabis isyarat <data:post.body/> paling bawah

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='sharethis-inline-reaction-buttons'/> <div class='clear'/> </b:if>

GDPR Compliance tool

Untuk mengaktifkan fitur GDPR Compliance tool, cukup klik sajian GDPR lalu klik tombol dari off ke on pada sajian sebelah kanan dan edit bab pengaturannya sesuai kebutuhan

Itulah perihal Cara Memasang Widget ShareThis di Blogger, biar bermanfaat dan wassalam.

Sumber http://arlinadesign.blogspot.com