04/26/17

Cara Membuat Share Button Efek Show Hide Material Design

By TUTORIALJIB on April 26, 2017

<img alt="Related image" src="http://i1069.photobucket.com/albums/u475/kradakan23/kradakanblogspot/sharethisscreenshootkradakanblog.png" />  /><a href="http://www.zandask.cf/2017/04/cara-membuat-share-button-efek-show.html">Cara Membuat Share Button Efek Show Hide Material Design</a>: Share Button atau biasa di sebut tombol share sosial media sudah tidak asing lagi dengan kata ini, share button adalah aplikasi kecil yang dapat kita di pasang pada blog/web dengan berupa sekumpulan kode CSS, HTML, dan juga JavaScript. Share button banyak memiliki fariasi (style) yang berbeda, misalkan seperti <a href="http://www.zandask.cf/2017/04/cara-membuat-share-button-efek-show.html" target="_blank">Widget Like Box Melayang Di Blog</a> , sebenarnya kegunaanya sama yaitu untuk mempermudah pengunjung blog yang ingin melakukan sharing artikel ke sosmed mereka, bedanya hanyalah di lengkapi dengan tombol like namun tidak menggunakan efek show hide seperti share button yang akan kita bahas ini. <div id="wrap"><a class="btn" href="http://bluenik.com/5TT" rel="”nofollow”" target="_blank">Result </a></div>Share button, banyak Designer-designer web yang mengembangkanya sehinggan memiliki model masing-masing tombol share ini tergantung yang membuatnya. sedangkan untuk tombol yang saya bagikan ini menggunakan efek material design, apa lagi material design gini sudah merambat ke Designer-designer web, sehingga banyak yang mengembangkanya termasuk saya. <h4>Cara Membuat Share Button Efek Show Hide Material Design</h4>Untuk cara pemasanganya memang masih terbilang rumit, namun jelas jika anda punya tekat pasti bisa. hanya butuh kemampuan pemahan yang jeli. 1. Silahkan shobat masuk ke Blogger>Tema>Edit Html, lalu silahkan kamu pastekan kode link CSS berikut tepat di bawah kode <kbd><head></kbd>, untuk mempercepat pencarian silahkan klik tombol <div class="kbrd">CTRL</div>+ <div class="kbrd">F</div>pada keyboard shobat. <pre data-codetype="CSSku" title="CSS"><code class="language-css"> <link href='https://cdn.rawgit.com/BulshitMan-BM/ID-Dzgn/ce097e4e/Material.css' rel='stylesheet'/></code></pre>2. Nah jika sudah, selanjut kamu cari kode <kbd></body></kbd>, lalu copas kode berikut tepat di atasnya. <pre data-codetype="HTMLku" title="JavaScript"><code class="language-css"> <script> $(window).load(function() { var buttonCircles = $(&quot;.nav-circle&quot;); $(&quot;.btn-nav&quot;).on(&quot;tap click&quot;, function() { $(this).toggleClass(&quot;closed-nav&quot;) if ($(this).hasClass(&quot;closed-nav&quot;)) { slideDown(); } else { slideUp() } }); $(&quot;.round-circle&quot;).click(function() { $(&quot;.btn-nav&quot;).toggleClass(&quot;closed-nav&quot;); slideUp(); }) //<![CDATA[ function slideDown() { var topMargin = 20 for (i = 0; i < buttonCircles.length; i++) { topMargin += 85 $(buttonCircles[i]).animate({ top: topMargin }, function() { $(".circle-container, .round-circle").css("visibility", "visible"); if ($(".fa-plus").hasClass("unRotateIcon")) { $(".fa-plus").removeClass("unRotateIcon").addClass("rotateIcon"); } else { $(".fa-plus").addClass("rotateIcon"); } }) } } function slideUp() { var resetTop = 20 for (i = 0; i < buttonCircles.length; i++) { $(buttonCircles[i]).animate({ top: resetTop }, 400, function() { $(".circle-container, .round-circle").css("visibility", "hidden"); if ($(".fa-plus").hasClass("rotateIcon")) { $(".fa-plus").removeClass("rotateIcon").addClass("unRotateIcon"); } else { $(".fa-plus").addClass("unRotateIcon"); } }) } } });//]]></script> <div style='clear: both;'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js'/></code></pre>3. Jika sudah sekarang silahkan kamu cari kode bebas <kbd>]]></b:skin></kbd> atau bisa juga <kbd></style></kbd> dan paste kode berikut tepat di atasnya. <pre data-codetype="CSSku" title="CSS"><code class="language-css"> .btn-nav { position: absolute; left: 20px; top: 20px; background-color: #000 !important; z-index: 9999; height: 60px !important; width: 60px !important; line-height: 80px !important; } .fa-plus { color: #fff !important; font-size: 2em !important; margin-top: 11px; font-weight: 300; } .plus-container { border: 1px solid #fff; margin-top: 100px; text-align: center; } .fa-exp { font-size: 6em; margin: 0 auto; display: block; } .round-circle { border-radius: 50%; background-color: #228a9c; width: 60px; height: 60px; position: absolute; top: 20px; text-align: center; line-height: 80px; visibility: hidden; } .round-circle > a { height: 80px; width: 80px; } .facebook { background: rgba(0, 88, 255, 0.83);} .gplus {background:#de0d00;} .twitter {background: #00c0dc;} .phone { background: #09d248;} .circle-container { visibility: visible; position: absolute; height: 400px; left: 20px; width: 100px; } .first-circle { z-index: 4; } .second-circle { z-index: 3; } .third-circle { z-index: 2; } .forth-circle { z-index: 1; } .fixed-container { position: fixed; z-index: 99999; display: block; } .fa-nav { color: #fff; font-size: 25px; margin-top: 18px; } @-webkit-keyframes rotateIcon { from { -webkit-transform: rotateZ(0); -moz-transform: rotateZ(0); -ms-transform: rotateZ(0); -o-transform: rotateZ(0); transform: rotateZ(0); } to { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-moz-keyframes rotateIcon { from { -webkit-transform: rotateZ(0); -moz-transform: rotateZ(0); -ms-transform: rotateZ(0); -o-transform: rotateZ(0); transform: rotateZ(0); } to { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-o-keyframes rotateIcon { from { -webkit-transform: rotateZ(0); -moz-transform: rotateZ(0); -ms-transform: rotateZ(0); -o-transform: rotateZ(0); transform: rotateZ(0); } to { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes rotateIcon { from { -webkit-transform: rotateZ(0); -moz-transform: rotateZ(0); -ms-transform: rotateZ(0); -o-transform: rotateZ(0); transform: rotateZ(0); } to { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } } .rotateIcon { -webkit-animation-name: rotateIcon; -moz-animation-name: rotateIcon; -o-animation-name: rotateIcon; animation-name: rotateIcon; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes unRotateIcon { from { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } to { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } } @-moz-keyframes unRotateIcon { from { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } to { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } } @-o-keyframes unRotateIcon { from { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } to { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } } @keyframes unRotateIcon { from { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } to { -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } } .unRotateIcon { -webkit-animation-name: unRotateIcon; -moz-animation-name: unRotateIcon; -o-animation-name: unRotateIcon; animation-name: unRotateIcon; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } .ua { position: absolute; right: 20px; bottom: 20px; color: #fff; font-size: 2em; } .fa { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .ua:hover .fa { color: #67809F; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } ul { list-style-type:none; margin:0; padding:0; }</code></pre>4. Nah jika ketiga tahap di atas sudah kamu selesaikan, sekarang kamu tinggal melakukan tahap terakhir (Memasang Html Share Button), silahkan kamu cari tag pembuka body <kbd><body</kbd> lalu pastekan kode Html berikut tepat di bawahnya. <pre data-codetype="HTMLku" title="HTML"><code class="language-css"> <div class='fixed-container'> <a class='btn-floating btn-large waves-effect waves-light circle btn-nav' rel='nofollow noreferrer'></a> <div class='circle-container'> <div class='round-circle nav-circle waves-effect waves-teal first-circle facebook'> <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share To Facebook'></a> </div> <div class='round-circle nav-circle waves-effect waves-teal second-circle gplus'> <a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share To Google+'></a> </div> <div class='round-circle nav-circle waves-effect waves-teal third-circle twitter'> <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share To Twitter'></a> </div> <div class='round-circle nav-circle waves-effect waves-teal forth-circle phone'> <a href='#contact' rel='nofollow noreferrer'></a> </div> </div> </div></code></pre><blockquote>- Sebelum kamu memasang Share Button ini pastikan sudah terpasang Link CSS Font Icon Awesome di template kamu. - #contact Silahkan kamu ganti dengan Url Contact Us kamu, atau kamu bisa mengubahnya sesuai dengan selera kamu. - Jika kamu kreative kamu pasti bisa mengubah posisi Share Button ini. - Jangan Lupa BackUp terlebih dahulu template blog kamu, untuk berjaga-jaga bila nanti terjadi error dalam pemasangan.</blockquote>5. Terakhir silahkan kamu Save tema/Simpan template kamu, lalu lihat hasilnya. Oky mungkin sampe di sini dulu tutorial saya kali ini semoga bisa bermanfaat bagi shabat bloggerku semua jika ada pertanyaan lain silahkan shobat berikan pertanyaan dalam bentuk komentar di bawah.

Updated at: April 26, 2017

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

By TUTORIALJIB on April 26, 2017

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5fXRiIak5xIs3u6eTWXsa9RB25fAq6923P_lo9_b-Nbe8S-o_W0PfDDxbdkcuD61IfWdy2Wj2bdmNgvWO6-XJWXZiNLC3zntHRl2BasukPnhbkVvQ4l9GuG3QSsZDCoQt2qa-6NBAbKU/s1600/Cara+Memindahkan+Element+Tombol+Download++Postingan+Ke+Sidebar+Blog.png" /> <a href="http://www.zandask.cf/2017/04/cara-memindahkan-element-tombol.html">Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog</a>: Baiklah kali ini blog ID Dzgn akan coba membagikan sedikit tutorial untuk Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog,  biasa di gunakan untuk membuat tombol Download, Preview, dan Buy Now, nah buat kamu yang sudah pernah melihat demo/style yang mirip dengan tutorial berikut ini pasti keren bukan, tutorial ini bertujuan untuk menjadikan blog terlihat lebih Rapi, Keren, dan terlihat lebih Prefesional tentunya. memindahkan element tombol download postingan ke sidebar blog sudah banyak yang menggunakanya terbukti blog mereka menjadi lebih keren rapi, dan tentunya saja seperti yang saya katakan tadi prefesional, karena pengunjung akan betah jika blog yang mereka kunjungi memeliki tampilan yang menarik, rapi, juga keren, pengunjung pastinya akan merasa betah Berlama-lama untuk kunjung. Bagi yang masih bingung dengan tampilan element template seperti gambar di atas, bisa lihat demonya di bawah ini: <div class="separator" style="clear: both; text-align: center;"><a class="buttonx" href="http://themedzgn.blogspot.co.id/2017/04/masign-grid.html" target="_blank">Demo</a></div>Oky tampa Basa-basi yuk pasang langsung di blog kamu. <h4>Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog</h4>1. Silahkan buka Blogger>Tema>Edit Html, pada edit html silahkan kamu cari kode <kbd>]]></b:skin></kbd> lalu silahkan pastekan kode berikut tepat di atasnya, untuk mempercepat pencarian silahkan kamu klik tombol <div class="kbrd">CTRL</div>+ <div class="kbrd">F</div>pada keyboard kamu. <pre data-codetype="CSSku" title="CSS"><code class="language-css"> /* CSS StoreStyle */ #store-style{overflow:hidden;font-family:'Open Sans',sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px} #store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}.rio-ss{padding-top:15px;overflow:hidden}.idb{line-height:1.5;padding:25px 0 5px} #store-style .storebutton:hover{background:#333;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px} .storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:left} .storelist:last-child{border-bottom:none} .storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}</code></pre>2. Nah kalo sudah selesai, selanjutnya silahkan kamu cari kode <kbd></head></kbd> pastekan kode berikut tepat di atasnya. <pre data-codetype="HTMLku" title="JavaScript"><code class="language-css"><script type='text/javascript'> /*<![CDATA[*/ $(document).ready(function(){ $('a[name="details"]').before($('#Theme-details').html()); $('#Theme-details').html(''); }); /*]]>*/ </script> </code></pre>3. Nah sekarang silahkan kamu cari markup kode sidebar contohnya: <kbd>aside id='sidebar-wrapper'</kbd> atau <kbd><div id='sidebar-wrapper</kbd> jika sudah ketemu sekarang silahkan kamu letakan kode berikut tepat di atasnya. <pre data-codetype="HTMLku" title="HTML"><code class="language-css"> <a name='details'/> <div class='clear'/></code></pre><blockquote>Tag markup awalan kode sidebar tidak selalu sama, dalam template memiliki strukture kode yang berbeda-beda, maka dari itu kenali terlebih dahulu tag kodenya dengan teliti.</blockquote> Nah kemungkinan contoh peletakan langkah ke 3 persis seperti gambar di bawah ini. <div class="separator" style="clear: both; text-align: center;"><img alt="Contoh Peletakan Kode Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimtI6Q7_FAjVdS1gxkRMd1KEYLuBCq6evx2ZU6M3GFQxaIKX5pTcaM5qKBF1V6BIgX8KQ-N8hm6HtktPtyJJvwPLYBe6MY2QV9tFNBXBrNTVhGwYAJiM8RUwZm9BStzNAjUI-9nuWVn5U/s1600/Contoh+Tag+kode+awalan+sidebar.jpg" title="Contoh Peletakan Kode " /></div> Nah sekarang silahkan kamu save tema. 4. Sekarang pindah, ke menu Postingan buat postingan baru kamu atau Jika kemungkinan kamu ingin menyisipkan tombol ini dalam postingan yang sebelumnya sudah kamu publikasikan, silahkan kamu edit kembali. lalu pindah dari mode Compose ke HTML lalu letakan kode berikut terserah di bagian mana, tapi untuk menjaga postingan agar tetap terlihat seo di mata pencarian google (Search Engine) letakan kode berikut tepat paling bawah postingan (akhir). <pre data-codetype="HTMLku" title="HTML"><code class="language-css"> <div style="display:none"> <div id="Theme-details"> <div id="store-style"> <center><a class="storebutton but1" href="#LINK-DEMO" target="_blank">Live Preview</a></center> <div class="rio-ss idb"> See it live with all the features that exist, both on the homepage and the page posts.</div> </div> <div id="store-style"> <center><a class="storebutton but2" href="#LINK-PURCHASE" target="_blank">$5.20 - Buy Now</a></center> <div class="rio-ss"> Support Template Update Remove Footer Credits For Unlimited Domains No Encrypted Scripts Support Color Change And Much More... </div> </div> <div style="clear:both"> </div> </div> </div> </code></pre><blockquote>Nah nantinya kode di atas akan berpindah secara otomatis ke bagian sidebar blog kamu Nah ini yang perlu di ketahui, tutorial ini akan otomatis responsive jika template yang kamu gunakan sudah di lengkapi dengan fitur responsive, jadi perlu teliti terlebih dahulu dalam memilih template.</blockquote> Nah jika kamu ingin yang di tampilkan hanya terlihat text silahkan kamu ganti dengan kode berikut. <pre data-codetype="HTMLku" title="HTML"><code class="language-css"><div style="display:none"> <div id="Theme-details"> /* Tulisan yang ingin ditampilkan di sidebar blog. */ <div style="clear:both"> </div> </div></code></pre> Terakhir silahkan kamu Publikasi/simpan lalu pilih pertinjau. mungkin sampe di sini saja tutorial saya akali ini, semoga bermanfaat ya.

Updated at: April 26, 2017

Cara Membuat Related Post/Artikel Terkait di Bawah Postingan

By TUTORIALJIB on April 26, 2017

Untuk Postingan Kali ini saya akan membagikan <a href="http://www.zandask.cf/2017/04/cara-membuat-related-postartikel.html">Cara Membuat Related Post/Artikel Terkait di Bawah Postingan</a>, Umumnya template blogger sekarang sudah di katakan rata-rata telah memenuhi kreteria sebagai template user friendly, salah satu komponen pada template yang user friendly adalah Related Post, Related Post merupakan sesuatu yang simple kelihatannya tapi mempunyai efek yang cukup bagus bagi blog kita. Tanpa panjang lebar mari kita eksekusi, ntuk contohnya bisa dilihat diblog ini. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIN0YmStCd49xoi8VhhsUr6W7Q5sC-fAYzRBCy1ZyxXS15C-poRZxLdYdm3aogyK0kTtj9x8Wo06U4YJtE_N83cW8LoqvD63o42bSKIKOFkSD1rpDgaLsbZN4Aom5_H3vkHWMmiRs8pI/s1600/Cara+Membuat+Related+Post+di+Bawah+Postingan.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Related Post/Artikel Terkait di Bawah Postingan" border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIN0YmStCd49xoi8VhhsUr6W7Q5sC-fAYzRBCy1ZyxXS15C-poRZxLdYdm3aogyK0kTtj9x8Wo06U4YJtE_N83cW8LoqvD63o42bSKIKOFkSD1rpDgaLsbZN4Aom5_H3vkHWMmiRs8pI/s640/Cara+Membuat+Related+Post+di+Bawah+Postingan.png" title="Cara Membuat Related Post/Artikel Terkait di Bawah Postingan" width="640" /></a></div> <h3>Berikut tutorial membuat related post yang simple dan tidak ribet</h3><div>Buka Blogger > Tema > Klik tombol Edit HTML dan tambahkan kode berikut ini sebelum kode <kbd>]]></b:skin></kbd> atau <kbd></style></kbd></div><pre data-codetype="CSSku" title="CSS"><code class="language-markup"> /* TipsRyand Related Post */ #related-post {margin:0 auto;padding:0;text-align:center;} #related-post h4{font-size:14px;margin:0 0 10px 0;background:#374760;color:#fff;padding:12px 20px;font-weight:700;position:relative;text-align:left;text-transform:uppercase;overflow:hidden} #related-post h4:after{display:inline-block;content:&amp;quot;\f02c&amp;quot;;font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#2e3b4f;color:#fff;top:0;right:0;padding:13px 20px;position:absolute} .relhead {font-size:100%;font-weight:normal;line-height:150%;padding:0 0 10px 0;overflow:hidden;} #related-summary .news-text{display:block;text-align:left;font-weight:normal;color:#888;font-size:12px;margin-top:10px} ul#related-summary{margin:0 auto;padding:0 10px;list-style:none;word-wrap:break-word} ul#related-summary li{position:relative;list-style:none outside none;overflow:hidden;margin:0 10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.12)} ul#related-summary li:last-child{border:0} ul#related-summary li a{display:block;} ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:90px;max-height:70px;vertical-align:middle;overflow:hidden;float:left;margin:0 10px 0 0;border:1px solid rgba(0,0,0,0.12);padding:3px;background:#fff;transition:all 1s ease-out} ul#related-summary li:hover img {opacity:0.96;} ul#related-summary li a.relinkjdulx{position:relative;color:#2c4584;display:block;font-weight:700;line-height:normal;overflow:hidden;text-align:left;text-transform:none} ul#related-summary li a.relinkjdulx:hover{color:#374760;} @media only screen and (max-width:640px){ h1.post-title.entry-title,h2.post-title.entry-title{font-size:180%!important;} ul#related-summary {padding:0} ul#related-summary li {padding:5px 0;} ul#related-summary li:last-child{border-bottom:none;} ul#related-summary li img,#related-summary .news-text{display:none;} ul#related-summary li a.relinkjdulx {display:block;font-size:14px;font-weight:700;line-height:normal;overflow:hidden;padding:10px 10px 10px 0;}</code></pre> Langkah selanjutnya, tambahkan kode dibawah ini sebelum kode <kbd></body></kbd> <pre data-codetype="CSSku" title="JavaScript"><code class="language-markup"> <script type='text/javascript'> //Related Post Thumb $(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(/\/s[0-9]+(\-c)?\//,&quot;/w200-h140-c/&quot;))}); </script></code></pre> Tambahkan kode berikut sebelum kode <kbd></head></kbd> <pre data-codetype="CSSku" title="JavaScript"><code class="language-markup"> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ //<![CDATA[ //Related Post var relnojudul = 0; var relmaxtampil = 5; var numchars = 120; var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+=""+relcuplikan[D]+" ... ";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}}; //]]> </script> </b:if></code></pre> terakhir, tambahkan kode dibawah ini diatas kode <kbd><div class='post-footer'></kbd> atau dibawah kode<kbd><data:post.body/></kbd> yang kedua atau ketiga, sampai Related Post muncul. <pre data-codetype="CSSku" title="HTML"><code class="language-markup"> <div id='related-post'> <div class='relhead'> <h4>Artikel Terkait</h4> <div class='clear'/> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='related-summary'> <script type='text/javascript'>artikelterkait();</script> </ul> </div> </div> </div></code></pre> Akhirnya jadi juga, jika ada yang ingin ditanyakan silahkan komentar dibawah, jika ada kesempatan akan saya balas. Terimakasih <script type="text/javascript"> var obj0=document.getElementById("post14321992734208116023"); var obj1=document.getElementById("post24321992734208116023"); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf(" "); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script> <div class="clear"></div>

Updated at: April 26, 2017

Cara Membuat Blockquote Keren di Blog

By TUTORIALJIB on April 26, 2017

<a href="http://www.zandask.cf/2017/04/cara-membuat-blockquote-keren-di-blog.html">Cara Membuat Blockquote Keren di Blog</a> - Mungkin sobat blogger sudah tidak asing lagi dengan nama blockquote, karena ini juga bagian dari fasilitas membuat artikel dalam memasukkan kode-kode html atau untuk kata kata kutipan di postingan atau laman blog. Biasanya blockquote digunakan untuk memperjelas suatu arahan dalam artikel, atau memperjelas informasi supaya terlihat menonjol, seperti kata warning atau catatan kalimat penting dalam sebuah artikel atau tulisan. Contohnya ketika kita membuat atau menulis sebuah artikel di dalam blog maka dapat dipastikan akan ada sebuah blok kalimat/tulisan penting yang perlu disampaikan kepada pembaca. Dan salah satu cara untuk melakukannya kita dapat menggunakan tool quote yang telah disediakan oleh platform blogger itu sendiri. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIvKF6UXCOac_nmOtDH0-xhegyqwgEBPbLDBoCoOxoRNAiiMz-USSSA6Sdxavqt__pVahOfhqtBWmD-xqarA2yxMhqUehAjHuo7TB6ESyZX6on2tRQrD-rjq8Osg3x3IpzjhR5TYWGIjY/s1600/Cara+Membuat+Blockquote+Keren+di+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Blockquote Keren di Blog" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIvKF6UXCOac_nmOtDH0-xhegyqwgEBPbLDBoCoOxoRNAiiMz-USSSA6Sdxavqt__pVahOfhqtBWmD-xqarA2yxMhqUehAjHuo7TB6ESyZX6on2tRQrD-rjq8Osg3x3IpzjhR5TYWGIjY/s400/Cara+Membuat+Blockquote+Keren+di+Blog.png" title="Cara Membuat Blockquote Keren di Blog" width="400" /></a></div> Blockquote ini juga berfungsi untuk code-code seperti HTML, CSS, jQuery, dll. Sebenarnya blockquote di template default sudah ada namun blockquote bawaan blogger tampilannya mungkin agak kurang menarik dan terlihat biasa-biasa saja alias kurang keren, sehingga bisa jadi mungkin akan di abaikan oleh pengunjung namun jika anda membuat blockquote yang bagus maka perhatian untuk blockquote akan lebih di perhatikan. Pada akhirnya pemilik blog ingin membuat tampilan lebih menarik agar blog makin terlihat rapi dan keren pastinya. sehingga perlu dilakukan penambahan atau perubahan tampilan sesuai tema/topik tulisan masing-masing. Sebenarnya mengenai Kotak Catatan seperti ini sudah banyak sekali di bahas oleh para blogger yang lain, namun untuk mendokumentasi ilmu yang saya dapat dari tetangga, saya Share kembali di blog ini. <h3>Cara Membuat Blockquote Keren di Blog</h3> Tutorial Membuat Kotak Catatan / Keterangan Di Postingan Blogger <ul><li>Seperti biasa, kalian harus sudah login ke akun blogger</li><li>Selanjutnya masuk ke menu <kbd>Template / Tema</kbd>, Klik <kbd>Edit HTML</kbd></li><li>Kalo sudah masuk Edit HTML kalian cari kode <kbd></head></kbd></li><li>Setelah ketemu, masukan css costum blockquote dibawah ini tepat di atasnya</li><li>Jika icon tidak muncul, pastikan kalian sudah memasang kode Font Awesome</li></ul> <pre data-codetype="CSSku" title="CSS"><code class="language-markup">.post-body blockquote {text-align: left;background: #1b9a62;position: relative;display: block;padding: 55px 20px 20px;color: #fff;border-radius: 3px;} .post-body blockquote:before {position: absolute;content: 'Catatan';background: #0b6e3e;position: absolute;top: 0;padding: 9px 0;left: 0;right: 0;color: #fff;display: block;margin: 0;font-weight:700;text-indent: 15px;border-radius:3px 3px 0 0;} .post-body blockquote:after {display: inline-block;content: "\f0a1";font-family: fontAwesome;font-style: normal;font-weight: normal;font-size: 18px;color: #fff;top: 0;right: 0;padding: 9px 14px;position: absolute;}</code></pre> <ul><li>Jika sudah, Save Template kalian.</li></ul><div style="text-align: center;"><ul class="button"><li><a class="demo" href="https://codepen.io/tipsryand/full/BWgvjX/" target="_blank">DEMO</a></li></ul></div><blockquote class="tr_bq">Jika ingin merubah kata Catatan Cari dan edit kode css yang telah saya tandai diatas Dan jika ingin merubah warna, cari dan edit kode warna yang telah ditandai diatas</blockquote> Memasang blockquote di postingan blog <ul><li>Kalian block terlebih dahulu text yang akan dimasukan ke dalam blockquote, lalu klik icon kutip dua di menu atas postingan, Lihat Gambar<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNSoFc8QeD8aZbEhw3NWwW1kY-ILVHj5OPeJ1Igg-dEgCM8CORtE1dDELOZu9MMQHKWUJzpoFRoVV8LZhZpdtmW7GyLUIimkKq6_RVWTuccsa4ZRT-83w17xVlIgDVJ10L5WVBNcuGDok/s1600/Cara+Membuat+Blockquote+Keren+di+Blog+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNSoFc8QeD8aZbEhw3NWwW1kY-ILVHj5OPeJ1Igg-dEgCM8CORtE1dDELOZu9MMQHKWUJzpoFRoVV8LZhZpdtmW7GyLUIimkKq6_RVWTuccsa4ZRT-83w17xVlIgDVJ10L5WVBNcuGDok/s1600/Cara+Membuat+Blockquote+Keren+di+Blog+1.png" title="Cara Membuat Blockquote Keren di Blog" /></a></div></li><li>Nah begitu lah cara membungkus text dengan blockquote</li><li>Kalo sudah tinggal publikasikan postingan kalian dan lihat hasilnya</li></ul>

Updated at: April 26, 2017

Tutorialjib

Cara Membuat Share Button Efek Show Hide Material Design

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

Cara Membuat Related Post/Artikel Terkait di Bawah Postingan

Cara Membuat Blockquote Keren di Blog

Popular Posts

Sponsor Iklan

Blog Archive