Membuat Kotak Script Seperti HTML CSS Dan JQUERY pada Postingan Seperti Arlina

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtBgY_D2ZK4s0Dfi6X8o2z36caQkxM5-2CfjSQaXkduksHeo3JfFYC93Jg2oh09bJJ2sa2FOM1vEszFXhnc2_4PiFd69VeFz2qgDDaDrHmIGPwvhyHBNvxKDgIuoQsuYVmP8-7YQZX3w/s1600/kotak-kode-post-scroll-iframe.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Kotak-kode-post-scroll-iframe" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtBgY_D2ZK4s0Dfi6X8o2z36caQkxM5-2CfjSQaXkduksHeo3JfFYC93Jg2oh09bJJ2sa2FOM1vEszFXhnc2_4PiFd69VeFz2qgDDaDrHmIGPwvhyHBNvxKDgIuoQsuYVmP8-7YQZX3w/s400/kotak-kode-post-scroll-iframe.png" title="Kotak Kode Post Scroll" width="400" /></a></div> Kotak Kode Post<br /> <br /> <br /> Setelah Sebelumnya Kita Membuat iframe, sekarang kita akan membuat kotak kode seperti pada blog arlina design<br /> dengan kotak kode ini blog yang memuat konten kode akan terlihat rapi dan mudah untuk para pembaca mengkopinya<br /> Cara Membuat Kotak Kode Untuk Postingan<br /> 1. <span style="color: red;">Masuk Blogger,</span><br /> 2. <span style="color: orange;">Klik Template,</span><br /> 3. <span style="color: #999999;">Klik Edit HTML,</span><br /> 4. <span style="color: lime;">Copy kode yang ada di kotak kode di bawah ini dan pastekan tepat di atas kode</span> <span style="color: #6fa8dc;">]]></b:skin></span><br /> <br /> <pre data-codetype="CSSku" title="CSS"><code class="language-markup"> /* CSS Syntax Highlighter */ pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;} pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;} pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px} pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute} pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto} code .token.important {font-weight:bold;} code .token.entity {cursor:help;} pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;} pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before, pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;} </code></pre> 5. Simpan Template.<br /> <br /> Cara Memanggil CSS Kotak Kode<br /> 1. <span style="color: #f1c232;">Buat Postingan Baru</span><br /> 2. <span style="color: #444444;">Pilih HTML (Bukan Compose),</span><br /> 3. <span style="color: orange;">Salin kode di bawah ke HTML tadi</span><br /> <br /> <blockquote class="tr_bq"> <span style="color: orange;"><pre data-codetype="CSSku" title="CSS"><code class="language-markup"><span style="color: red;">Kodeanda di sini......</span></code></pre></span></blockquote> <br /> <blockquote class="tr_bq"> Catatan :<br /><blockquote> - Ganti CSSku dan CSS jika ingin diganti namun hanya ada 4 yaitu CSSku dan CSS, HTMLku dan HTML, JavaScriptku dan JavaScript, jQueryku dan jQuery,</blockquote> </blockquote> <br /> - Ganti tulisan <span style="color: red;">kode anda di sini...... </span>dengan kode yang ingin anda pasang di dalam kotak kode atau kotak script kode yang telah di buat. namun, sebelum anda memasukan kode anda usahakan untuk memparse kode terlebih dahulu.<br /> <br /> 4. Selesai.<br /> <br /> Dan memang kenyataan saya aja pakai itu :v<br /> -----------------------------------------------------<br /> <span style="font-family: Arial;"><span style="font-size: 13px;">Dan Selesai Click Save Dan Apa Yang Terjadi😀</span></span><br /> <span style="font-family: Arial;"><span style="font-size: 13px;">Pfpp Capek Juga ya Ngetiknya 😄😄 , heheheeh</span></span><br /> <span style="font-family: Arial;"><span style="font-size: 13px;">Dan Terimah KAsih Telah Baca .. Tadi kalau kesalahan script Silahakan komentar bawah yah ..</span></span><br /> <span style="font-family: Arial;"><span style="font-size: 13px;">Semoga bermanfaat !!! [ <span style="color: orange;">Edit Sesuka Anda</span> ] </span></span>

Cara Membuat Popular Post Dengan Thumbnail

sebenarnya sangat mudah,widget nya sudah tersedia di blogger,kita hanya tinggal memasang nya saja,namun masih dengan style default,untuk membuat popular post lebih menarik,ternyata banyak sebagian blogger yang udah share dengan style mereka sendiri kali ini saya akan share cara membuat popular post lebih menarik,popular post nya bisa memunculkan cuplikan,ketika di hover,untuk cara membuat nya ikuti tutorial dibawah ini<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIL8fduxPFzeZW5AbS88wjSF9kEykQq0FKaN3sKUpnQ6ksLr0wcKMpA5BJnp4L5RgfIrpBON5Lxafzd0lPrkQZjerp9hdLJizjQeaFLyLbGlfWrEoHOUqB-sqmbsgPha3OWK0U-7NK7Wo/s1600/Cara+Membuat+Popular+Post+Dengan+Thumbnail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIL8fduxPFzeZW5AbS88wjSF9kEykQq0FKaN3sKUpnQ6ksLr0wcKMpA5BJnp4L5RgfIrpBON5Lxafzd0lPrkQZjerp9hdLJizjQeaFLyLbGlfWrEoHOUqB-sqmbsgPha3OWK0U-7NK7Wo/s640/Cara+Membuat+Popular+Post+Dengan+Thumbnail.png" width="640" /></a></div> <br /> <h3> Cara Membuat Popular Post Dengan Thumbnail</h3> 1. login ke blogger > template > edit html, letakkan kode dibawah ini diatas kode <kbd><span style="background-color: black; color: orange;">]]></b:skin></span></kbd> atau <kbd><span style="background-color: black; color: orange;"></style></span></kbd><br /> <pre data-codetype="CSSku" title="CSS"><code class="language-markup"> </code><blockquote class="tr_bq"> <code class="language-markup">#PopularPosts1{padding:0;}</code><code class="language-markup">#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}</code><code class="language-markup">#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}</code><code class="language-markup">#PopularPosts1 ul li:last-child{border-bottom:none}</code><code class="language-markup">#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}</code><code class="language-markup">#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}</code><code class="language-markup">#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}</code><code class="language-markup">#PopularPosts1 ul li img {</code><code class="language-markup"> width: 318px;</code><code class="language-markup"> height: auto;</code><code class="language-markup">}</code><code class="language-markup">#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}</code><code class="language-markup">#PopularPosts1 ul li:first-child .item-thumbnail {</code><code class="language-markup"> margin: 0px;</code><code class="language-markup"> width: 103%;</code><code class="language-markup"> height: 180px;</code><code class="language-markup"> overflow: hidden;</code><code class="language-markup"> display: block;</code><code class="language-markup">}</code><code class="language-markup">#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}</code><code class="language-markup">#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}</code><code class="language-markup">#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}</code><code class="language-markup">#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}</code><code class="language-markup">#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}</code><code class="language-markup">#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}</code><code class="language-markup">#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}</code><code class="language-markup">#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}</code><code class="language-markup">#PopularPosts1 ul li:first-child .item-title:before{top:25%}</code><code class="language-markup">#PopularPosts1 ul li:first-child .item-title:before{color:#fff}</code><code class="language-markup">#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}</code></blockquote> </pre> <br /> 2. biar gambar thumnail nya gak kabur,letakkan kode dibawah ini diatas<span style="color: orange;"> <kbd style="background-color: black;"></body></kbd></span><br /> <pre data-codetype="CSSku" title="JavaScript"><code class="language-markup"> </code><blockquote class="tr_bq"> <code class="language-markup"><script type='text/javascript'></code><code class="language-markup">//<![CDATA[</code><code class="language-markup">// Popular Post</code><code class="language-markup">var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img,ul.recent_posts_arlina img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,130)});</code><code class="language-markup">//]]></code><code class="language-markup"></script></code></blockquote> </pre> 3. simpan template.<br /> <br /> <blockquote class="tr_bq"> <span style="color: red;">jika tidak berhasil,coba css popular post lama dihapus,diganti dengan css di atas</span></blockquote> <script type="text/javascript"> var obj0=document.getElementById("post14078621952320218757"); var obj1=document.getElementById("post24078621952320218757"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf("<br>"); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script> <div class="clear"> </div>