Cara Menyalin Tulisan di PDF Yang Berasal Dari Gambar

Cara Menyalin Tulisan di PDF Yang Berasal Dari Gambar

Cara Menyalin Tulisan di PDF Yang Berasal Dari Gambar

Cara Menyalin Tulisan di PDF Yang Berasal Dari Gambar. Artikel ini merupakan cara menyalin, atau mengambil tulisan dari file PDF yang file aslinya diambil dari scan, photo atau yang lainnya yang berupa image. Gimana, ya?.. Ya, pokoknya begitulah.. Sebenarnya saya agak bingung memberikan judul artikel ini dengan kata-kata yang pas. Forgive me, wahai pembaca budiman... 🙏🙏

Berawal dari pengalaman saya yang dimintai, upss!.. Sorry agak jorok kata-katanya 😅 maksud saya diminta tolong untuk menyalin tulisan dari foto yang dikirim oleh temannya teman saya, 🤔.. Iya gitu, pokoknya. Intinya teman saya minta tolong menconvert tulisan di foto dari handphone nya.

Pada waktu itu yang tergambar dibenak saya adalah bagaimana cara mentranslate atau merubah tulisan pada gambar untuk dijadikan tulisan yang bisa dipindahkan di microsoft word.

Setelah mencoba googling akhirnya saya menemukan caranya, yaitu dengan software Free OCR to Word. Anda bisa search di google dengan kata kunci diatas. Namun dengan software tersebut tentu saja kita harus menginstall. Karena tidak mau ribet, kemudian saya coba lagi searching dengan menambahkan kata online di depannya. Lalu ketemulah dengan situs onlineocr.net.

Lalu bagimanakah caranya? Simak tutorial berikut!

Cara Menyalin Tulisan di PDF Yang Berasal Dari Gambar

Untuk langkah-langkahnya adalah :
1. Buka dulu situs onlineocr diatas. Pada step 1, silakan klik select file, kemudian temukan file anda di komputer lalu klik open.
2. Kemudian di step 2, silakan pilih bahasa (language)
3. Diteruskan dengan memilih output format yang dikehendaki. Saya sarankan pilih text plain untuk hasil tulisan.
4. Step 3, klik convert, tunggu hingga selesai.

Cara Menyalin Tulisan di PDF Yang Berasal Dari Gambar
Setelah langkah ke 4 nanti akan muncul kotak dengan isi tulisan, barulah kemudian anda bisa mengcopy hasilnya kemudian dipindahkan ke Ms. Word. Tentu saja hasilnya nanti car-kacir (bahasa maduranese 😅), tetapi tenangkan hatimu, nanti anda bisa mengeditnya di Ms. Word.

Nb :
  • Jika file PDF yang berupa image anda terlihat agak gelap, silakan diedit dulu dengan software image editor yang anda miliki. Bisa dengan photoshop, photoscape, atau yang lain. Maaf tidak saya bahas disini karena.............. capek ngetiknya 😆
  • Cara ini bisa juga dipakai untuk menyalin tulisan dari foto ke Ms. Word
Untuk tutorial video silakan lihat di bawah
Demikian artikel singkat tentang Cara Menyalin Tulisan di PDF Yang Berasal Dari Gambar semoga bermanfaat. Terima kasih telah berkunjung ke blog agung jaka nugraha. Wassalam

Cara Menyalin Tulisan di PDF Yang Berasal Dari Gambar

Menu Collapse Responsive dengan Logo

Menu Collapse Responsive dengan Logo

Menu Responsive Collapse dengan Logo

Menu Collapse Responsive dengan Logo. Mungkin anda bertanya-tanya apa itu menu collapse, menu collapse adalah sticky menu yang ketika layar discroll ke bawah menu tersebut akan menghilang dan akan muncul lagi ketika layar discroll ke atas.

Keunggulan dari menu ini selain berada diposisi sticky (tetap diatas mengikuti layar) juga responsive dan menggunakan hamburger menu ketika berada pada tampilan mobile. Selain itu menu ini dapat menggunakan logo dalam format gambar atau text serta dilengkapi dengan search bar.

Menu Collapse Responsive dengan Logo

Langsung saja kita ikuti langkah-langkahnya.
1. Buka blogger pilih menu tema disebelah kiri kemudian klik edit HTML.
2. Letakkan kode HTML ini di bawah kode <header> atau sejenisnya
<nav class='float_wrapper'>
<div class='ct-wrapper'>
<div id='cssmenu'>
<div class='icon-searchku' id='search-resp'>
<span class='show'><a class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-search'/></a></span>
</div>
<div class='logo'><a expr:href='data:blog.homepageUrl' title='home'><img alt='bromo tour package' src='https://4.bp.blogspot.com/-thWUDH3eEZY/W_MRVMQ2shI/AAAAAAAAAZ4/6RUo9F6gEfYMOaH4MVmgJ-90O6FUGKm-ACLcBGAs/s1600/MOUNT%2BBROMO%2BTOUR%2BGUIDE%2Bwhite.png'/></a></div>
<div id='head-mobile'/>
<div class='button'/>
<ul class='menumen'>
<li><a href='#'>Official</a>
   <ul>
      <li><a href='/p/about.html' title='about'>About</a></li>
      <li><a href='/p/privacy-policy.html' title='privacy policy'>Privacy Policy</a></li>
      <li><a href='/p/term-of-service.html' title='term of service'>TOS</a></li>
   </ul>
</li>
<li><a href='#'>Tour Package</a>
   <ul>
      <li><a href='/p/bromo-tour.html' title='bromo tour'>Bromo Tour</a></li>
      <li><a href='/p/ijen-crater-tour-package.html' title='ijen crater tour'>Ijen Crater Tour</a></li>
      <li><a href='/p/semeru-trekking-tour-package.html' title='semeru trekking tour'>Semeru Trekking Tour</a></li>
      <li><a href='/p/east-java-tour-package.html' title='east java tour'>East Java Tour</a></li>
   </ul>
</li>
<li><a href='/p/travel-destination.html' title='tour destination'>Destination</a></li>
<li><a href='/p/travel-information.html' title='tour information'>Info</a></li>
<li><a href='/p/travel-tips.html' title='travel tips'>Tips</a></li>
<li><a href='/p/booking.html' title='booking'>Booking Room</a></li>
<li class='icon-searchku'>
<span class='show'><a class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-search'/></a></span>
</li>
</ul>
</div>
  </div>
  </nav>
<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<div id='hide'><a class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></a></div>
<div id='search-wrap'>
<p>ENTER HERE</p>
<div class='search'>
<form action='https://www.mtbromotourguide.com/p/search-result.html' id='searchformku' target='_blank'>
<input name='cx' type='hidden' value='014198858917514360859:eju3z92tzcm'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-formku' name='q' onblur='if(this.value==&amp;apos;&amp;apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&amp;apos;&amp;apos;' type='text' value='Search here ...'/>
<button class='button-searchku' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>
</div>
  </div>
</div>
</div>
3. Letakkan kode CSS berikut ke dalam deretan kode CSS di dalam b:skin
/**Main Menu CSS**/
nav{background:#263238;z-index:999}
.logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#6DDB07;float:left;width:15%}
.logo a{color:#6DDB07;}
nav{position:relative;margin:0 auto;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
ul.menumen{float:right;padding-bottom:0;margin:0}
#cssmenu #head-mobile{display:none}
#cssmenu{background:#263238}
#cssmenu > ul > li{float:left;text-transform: uppercase;}
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto;margin:0}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}
li.icon-searchku{padding-top:3px}
#search-resp{display:none}

@media screen and (max-width:1000px){
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
.logo2{display:none}
#search-resp{display:block;width:55px;height:46px;position:absolute;left:14px;top:2px;cursor:pointer;z-index:12399994}
li.icon-searchku{display:none!important}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none}
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background:#363636;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#333!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#ddd;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
#cssmenu .submenu-button.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button{height:34px;width:34px}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}
#search-resp .show a.tombolkecil{display:block;padding-top:10px}
}
#search-resp{display:block!important;position:absolute;top:3px;right:15px}
#search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow .3s ease-in-out;-moz-animation:shownow .3s ease-in-out;animation:shownow .3s ease-in-out}
@keyframes shownow {
0%{transform:scale(0.9)}
50%{transform:scale(1.01)}
100%{transform:scale(1)}
}
#search-wrap{clear:both;width:75%;margin:0 auto;padding:0;display:block;overflow:hidden}
#searchformku{border:1px solid #fff;border-radius:5px;color:#111;width:99%;margin:0 auto;overflow:hidden;position:relative}
.button-searchku,.button-searchku:hover{clear:both;background:none;border:3px;color:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:23px;cursor:pointer;position:absolute;top:5px;right:10px;font-weight:700}
.button-searchku:active{border:none;outline:none;background:none}
#search-formku{background-color:transparent;width:100%;height:57px;line-height:57px;padding:0 60px 0 20px;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:20px;color:#fff!important;-webkit-box-sizing:border-box}
#search-formku:focus{border:none;outline:0;color:#fff}
#searchformku:focus{border:none;outline:0;color:#3f3f3f}
#box{margin:0 auto;display:none;padding:60px 0 0;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(0,0,0,.94);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s}
#hide a.tombolkecil{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;float:right;overflow:hidden;display:block}
#hide a.tombolkecil:hover{color:#eee;border-color:#eee}
#box p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase}
.icon-searchku a{font-weight:400;width:auto;height:50px;top:6px;cursor:pointer;font-size:20px;color:#dedede}
.icon-searchku{display:block;float:left}
4. Cari </body> lalu letakkan javascript dibawah ini dan taruh / paste di atasnya.
<script>
/*<![CDATA[*/
//Main Menu 
!function(s){s.fn.menumaker=function(o){var e=s(this),n=s.extend({format:"dropdown",sticky:!1},o);return this.each(function(){return s(this).find(".button").on("click",function(){s(this).toggleClass("menu-opened");var o=s(this).next("ul");o.hasClass("open")?o.slideToggle().removeClass("open"):(o.slideToggle().addClass("open"),"dropdown"===n.format&&o.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){s(this).toggleClass("submenu-opened"),s(this).siblings("ul").hasClass("open")?s(this).siblings("ul").removeClass("open").slideToggle():s(this).siblings("ul").addClass("open").slideToggle()})},"multitoggle"===n.format?multiTg():e.addClass("dropdown"),n.sticky===!0&&e.css("position","fixed"),resizeFix=function(){var o=1e3;s(window).width()>o&&e.find("ul").show(),s(window).width()<=o&&e.find("ul").hide().removeClass("open")},resizeFix(),s(window).on("resize",resizeFix)})}}(jQuery),function(s){s(document).ready(function(){s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery),$(function(){var s=$(document).scrollTop(),o=$(".float_wrapper").outerHeight();$(window).scroll(function(){var e=$(document).scrollTop();$(document).scrollTop()>=50?$(".float_wrapper").css("position","fixed"):$(".float_wrapper").css("position","fixed"),e>o?$(".float_wrapper").addClass("scroll"):$(".float_wrapper").removeClass("scroll"),e>s?$(".float_wrapper").removeClass("no-scroll"):$(".float_wrapper").addClass("no-scroll"),s=$(document).scrollTop()})});
/*]]>*/
</script>
5. Simpan

Demikian tutorial tentang Menu Responsive Collapse dengan Logo semoga bermanfaat. Terima kasih telah membaca postingan agung jaka nugraha. Wassalam

Menu Responsive Collapse dengan Logo

Perubahan Tag Kondisional Terbaru Blogspot 2019

Tag Kondisional Terbaru Blogspot

Tag Kondisional Terbaru Blogspot

Tag kondisional terbaru. Tag Kondisional merupakan tag yang digunakan untuk mengatur posisi sebuah elemen, widget, javascript, atau CSS dimana pemposisian tersebut bisa disebabkan karena suatu hal. Antara lain adalah untuk mempercepat loading blog. Karena dengan tag kondisional kita bisa mengatur segala macam elemen web untuk bisa dicostumisasi, sehingga setiap tampilan halaman bisa dibuat berbeda.

Pada dasarnya untuk penulisan tag kondisional yang lama dan baru menurut fungsinya tetap sama, hanya saja penulisannya lebih simpel atau sederhana, jadi bisa lebih bisa menghemat waktu, dan yang paling penting adalah mudah diingat.

Tag Kondisional Terbaru

Dibawah ini adalah list tag kondisional blogger terbaru dari perubahan yang lama ke yang baru.

Halaman Utama (Homepage)

Versi lama
<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if>
Versi baru
<b:if cond='data:view.isHomepage'> ... </b:if>

Halaman Postingan (Post)

Versi lama
<b:if cond='data:blog.pageType == &quot;item&quot;'> ... </b:if>
Versi baru
<b:if cond='data:view.isPost'> ... </b:if>

Halaman Statik (Static page)

Versi lama
<b:if cond='data:blog.pageType == "static_page"'> ... </b:if>
Versi baru
<b:if cond='data:view.isPage'> ... </b:if>

Halaman Index (selain halaman postingan)

Versi lama
<b:if cond='data:blog.pageType == "index"'> ... </b:if>
Versi baru
<b:if cond='data:view.isMultipleItems'> ... </b:if>

Halaman Item (halaman posting dan statik)

Versi lama
<b:if cond='data:blog.pageType in ["item", "static_page"]'> ... </b:if>
Versi baru
<b:if cond='data:view.isSingleItem'> ... </b:if>

Halaman Label

Versi lama
<b:if cond='data:blog.searchLabel'> ... </b:if>
Versi baru
<b:if cond='data:view.isLabelSearch'> ... </b:if>

Halaman Archive

Versi lama
<b:if cond='data:blog.pageType == "archive"'> ... </b:if>
Versi baru
<b:if cond='data:view.isArchive'> ... </b:if>

Halaman Search (Pencarian)

Versi lama
<b:if cond='data:blog.searchQuery'> ... </b:if>
Versi baru
<!-- Termasuk halaman pencarian label -->
<b:if cond='data:view.isSearch'> ... </b:if>

<!-- Hanya halaman pencarian -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'> ... </b:if>

Halaman Layout (Menu Tata Letak)

Versi baru
<b:if cond='data:view.isLayoutMode'> ... </b:if>

Halaman Preview (Pratinjau)

Versi baru
<b:if cond='data:view.isPreview'> ... </b:if>

Halaman Error (404)

Versi lama
<b:if cond='data:blog.pageType == &quot;error_page&quot;'> ... </b:if>
Versi baru
<b:if cond='data:view.isError'> ... </b:if>

Halaman Tertentu (Url)

Versi lama
<b:if cond='data:blog.url == &quot;Url halaman&quot;'></b:if>
Versi baru
<b:if cond='data:view.url == &quot;Url halaman&quot;'></b:if>

Halaman Mobile (smartphone)

Versi baru
<b:if cond='data:blog.isMobileRequest'></b:if>

Penggunaan Tag Kondisional

Pengecualian

Pengecualian biasanya menggunakan kode !=.
Contoh :
<b:if cond='data:blog.url != data:blog.homepageUrl'> ... </b:if>

Tag tersebut diatas bisa dibaca "kecuali pada halaman home"

Dalam versi baru juga bisa menggunakan kode tersebut, yaitu dengan menggunakan kode "!" atau "not".
Contoh:
<b:if cond='!data:view.isHomepage'> ... </b:if>
atau
<b:if cond='not data:view.isHomepage'> ... </b:if>

Penggabungan

Penggabungan 2 tag kondisional dapat dilakukan dengan memberikan "or" atau "and".
Contoh :
<b:if cond='!data:view.isPost or !data:view.isPage'> ... </b:if>

Tag di atas artinya akan muncul pada halaman selain halaman posting dan halaman statik. Arti dari "or" adalah jika salah satu dari kondisi benar maka akan ditampilkan. Jika harus pada kondisi tertentu maka menggunakan "and".

Jika akan menggabungkan beberapa url tertentu maka bisa juga memakai kode "in" dan dengan tanda koma "," sebagai pemisah antar url seperti contoh dibawah
<b:if cond='data:view.url in {&quot;Url 1&quot;,&quot;Url 2&quot;,&quot;Url seterusnya&quot;}'></b:if>

<b:else/>

Selain 2 hal diatas kita juga bisa menggunakan <b:else/>
Contoh :
<b:if cond='data:view.isPost'> kondisi 1 <b:else/> kondisi 2 </b:if>

Biasanya kode diatas digunakan untuk membuat kode HTMLnya.

Sekian artikel tentang Tag kondisional terbaru di Blogspot, semoga bermanfaat. Terima kasih telah membaca postingan Agung Jaka Nugraha. Wassalam

Tag Kondisional Terbaru Blogspot

Cara Memasang Icon SVG di Blog

Cara Memasang Icon SVG
Cara Memasang Icon SVG

SVG merupakan kepanjangan dari Scalable Vector Graphics (SVG). Adalah format gambar yang menggunakan XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi.

Sebuah gambar dengan format SVG disimpan dalam bentuk file XML. Ini berarti, SVG dapat dicari, di-index, ditulis dengan bahasa pemograman dan dikompres. Karena berbasis XML, SVG dapat dibuat dan disunting dengan aplikasi teks apa saja.

Pada saat ini semua browser sudah support dengan format SVG, seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera, dan Safari. Jadi tidak ada kekhawatiran tersendiri bagi para webdeveloper untuk menggunakan format ini karena memang SVG sangat menakjubkan.

Icon SVG vs FontAwesome

Mengapa harus memakai SVG?
Jika kita lihat, biasanya teman-teman web menggunakan Font Awesome atau img yang dihosting untuk menggunakan sebuah icon. Namun hal tersebut justru menambah beban template / web ketika dimuat. Akibatnya halaman akan menjadi tambah lama sampai terlihat semuanya.

Memang sih, dalam penggunaannya Fontawesome menyediakan berbagai macam icon yang bisa kita taruh diblog sesuai keinginan, namun masalahnya jika anda menggunakan Font Awesome, anda harus meletakkan link stylesheet di atas </head>, disitu terkadang saya merasa sedih.. 😁. Dan solusinya kita bisa bermigrasi ke Icon SVG.

Bagaimana caranya? Yuk kita simak tutorial dibawah!

Cara pasang Icon SVG di Blog

  1. Pertama-tama silakan kunjungi web Material Design Icon. Disana akan banyak tersedia berbagai macam icon yang bisa anda taruh di blog.
  2. Pilih satu ikon sesuai kebutuhan.
  3. Pilih tanda "</>" yang berada dibawah, kemudian pilih "View SVG" Copy code yang ditampilkan
  4. Letakkan dibagian mana anda ingin meletakkan icon tersebut di blog.
Lihat gambar! (ilustrasi memilih dan menggunakan icon account-circle)



Kode yang ditampilkan diatas adalah sebagai berikut
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
Silakan ganti ukuran dan warna icon (berlatar) sesuai dengan yang dikehendaki.

Selain cara di atas kita bisa juga memakai 2 cara yang lain :

Memasang dengan HTML dan Internal CSS

Untuk cara ini kita hanya menghapus kode "width:24px;height:24px" dan "fill="#000000" lalu memindahkannya ke bagian CSS dengan kode sebagai berikut
svg {width:24px; height:24px}
svg path {fill:#000000}

Sebagai catatan jika anda menaruhnya dalam elemen div, maka wajib hukumnya anda membuat css elemen induk. Contoh : Jika anda memasangnya pada elemen div id='recent-post' maka css yang anda tulis adalah sebagai berikut
#recent-post svg {width:24px;height:24px}
#recent-post svg path{fill:#000000}

Demikian tutorial cara memasang icon svg di blog untuk memperingan blog kita. Terima kasih telah membaca postingan Agung Jaka Nugraha. Wassalam

Cara Memasang Icon SVG di blog

Membuat Seleksi Otomatis di Tag Pre Tanpa Javascript

Membuat Seleksi Otomatis di Tag Pre Tanpa Javascript

Seleksi Otomatis Tag Pre tanpa javascript

Cara membuat seleksi otomatis di tag pre tanpa javascript. Tag pre merupakan barisan kode yang biasanya digunakan untuk menaruh kode CSS atau Javascript pada blog-blog tutorial. Maka dari itu tag pre biasanya ditulis dengan tanpa pemformatan teks, atau memakai type font monospace, agar terlihat mencolok dari tulisan lainnya.

Tutorial membuat seleksi otomatis tag pre yang bertebaran di google kebanyakan menggunakan javascript, namun kali ini saya akan mensharekan bagaimana membuat seleksi otomatis tag pre tersebut tanpa javascript atau hanya dengan css. Kelebihannya adalah template menjadi lebih ringan.

Baik langsung saja kita coba!

Cara membuat seleksi otomatis tag pre hanya dengan CSS

1. Buka blogger.com
2. Pilih "tema" lalu buka "Edit HTML"
3. Silakan buat CSS untuk dijadikan "class". Disini terserah anda akan menamakannya dengan apa, yang terpenting nanti adalah dalam penerapan di postingannya.
Contoh : Disini saya akan memakai nama class "selection". Maka kode CSSnya adalah sebagai berikut.
.selection {  
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
4. Simpan template anda.

Cara Posting

HARAP DIPERHATIKAN!!!
Untuk penerapannya adalah berikan class "selection" pada tag pre disetiap anda membuat postingan yang akan memakai kode diisinya.
Contoh :
<pre class="selection">
<!-- kode disini -->
</pre>

Demikian tutorial membuat seleksi otomatis di tag pre tanpa javascript semoga bermanfaat. Kami ucapkan terimakasih telah membaca blog Agung Jaka Nugraha. Wassalam

Membuat Seleksi Otomatis di Tag Pre hanya dengan CSS

Menentukan Jumlah Label yang ditampilkan di Postingan

Menentukan Jumlah Label yang ditampilkan di Postingan
Menentukan Jumlah Label yang ditampilkan di Postingan

Menentukan Jumlah Label yang ditampilkan. Untuk menentukan jumlah label pada widget adalah dengan cara memilih widget dan edit label yang akan disembunyikan. Namun, yang akan saya share yaitu cara menampilkan berapa label yang akan tampil pada postingan Blogger, bukan pada widgetnya.

Sebelum kepada ulasan, mari kita pahami dulu bahwa standar kode untuk menampilkan Label adalah seperti dibawah ini :
<b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url + &quot;?max-results=8&quot;' expr:title='data:label.name' rel='tag nofollow'>
        <data:label.name/>
        </a>
        <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
</b:if>

Maka berapapun kita menulis label, label akan muncul seluruhnya pada postingan. Ini artinya, ketika 6 Label ditulis, maka semuanya akan tampil. Hal tersebut akan membuat blog kita tidak kelihatan rapi dan bersih. Bisa kita lihat di ilustrasi dibawah ini.

Menentukan Jumlah Label yang ditampilkan di Postingan

Nah, sekarang untuk memahami penjelasan selanjutnya, harap diperhatikan kode yang saya tandai <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>, ini artinya "Selain label terakhir maka tampilkan koma".

Menentukan Jumlah Label yang Tampil

# Contoh Kasus

Misalkan anda akan membuat sebuah postingan dengan judul 3 Aplikasi Terbaik untuk Memindahkan File di Android, kemudian membuat 6 label. Misal: Aplikasi, Download, Android, Software, PlayStore, dan Apk. Maka akan tampil seperti di bawah ini:

Menentukan Jumlah Label yang ditampilkan di Postingan

Semua label akan tampil seperti gambar di atas, dengan berbagai alasan, misalkan mengganggu tampilan atau estetika, maka sobat hanya ingin menampilkan 3 Label saja. Maka kode untuk Menampilkan Label seperti diatas diganti dengan kode seperti ini
<b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label' index='x'>
    <b:if cond='data:x==0'><data:label.name/>, </b:if>
    <b:if cond='data:x==1'><data:label.name/>, </b:if>
    <b:if cond='data:x==2'><data:label.name/></b:if>
    </b:loop>
</b:if>

Kita menambahkan index=x untuk memanggil label yang di tampilkan. Tetapi kode di atas belum ditambahkan link, sehingga tidak clickable (tidak bisa diklik menuju search label).
Hasilnya :

Menentukan Jumlah Label yang ditampilkan di Postingan

Pembacaan Label ke-1 dimulai dari angka 0, bukan 1. Sehingga menampilkan label ke-1 dengan kode <b:if cond='data:x==0'>

Penulisan <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>, tidak diperlukan karena tidak akan berpengaruh. Label terakhir yang tampil bukan label sesungguhnya.

# Alternatif ke-2

Lebih simple lagi dengan kode di bawah ini :
<b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label' index='x'>
    <b:if cond='data:x&lt;=2'><data:label.name/>, </b:if>
  </b:loop>
</b:if>

Kode diatas akan menampilkan 3 label pertama, tapi terdapat kekurangan pada metode ini yaitu masih menampilkan , (tanda koma) pada label terakhir.

Menentukan Jumlah Label yang ditampilkan di Postingan

# Alternatif ke-3

Saya lebih merekomendasikan kode ini daripada sebelumnya, karena sudah menggunakan Link ke search Label.
<b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label' index='x'>
        <b:if cond='data:x &#60;=2'>
            <a expr:href='data:label.url + &quot;?max-results=8&quot;' expr:title='data:label.name' rel='tag nofollow'>
                <data:label.name/>
            </a>
        <b:if cond='data:x &#60;=1'>,</b:if>
        </b:if>
    </b:loop>
</b:if>

Perhatikan yang berwarna hijau, artinya, sampai label ke 2 akan ditambahkan tanda koma dibelakangnya. Lihat penjelasan disini

Menentukan Jumlah Label yang ditampilkan di Postingan

Pengaplikasian pada Widget Label

Adapun contoh pengaplikasiannya ke dalam widget Label adalah sebagai berikut.
<b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label' index='x'>
    <b:if cond='data:x&lt;6 and data:x&gt;2'>
    <a expr:href='data:label.url + &quot;?max-results=8&quot;' expr:title='data:label.name' rel='tag nofollow'>
    <data:label.name/>
    </a>
    </b:if>
    <b:if cond='data:x&lt;5 and data:x&gt;2'>, </b:if>
  </b:loop>
</b:if>

Kode di atas adalah untuk menampilkan kode ke-3 sampai ke -5. Jadinya seperti gambar dibawah :

Menentukan Jumlah Label yang ditampilkan di Postingan

Silakan diexplore dan disesuaikan dengan keinginan dan imajinasi anda. Atau bisa juga anda mengeksplorasinya dengan Breadcrumb.

Demikian tutorial Menentukan Jumlah Label yang ditampilkan di Postingan semoga bermanfaat. Terima kasih telah membaca postingan Agung Jaka Nugraha. Wassalam

Menentukan Jumlah Label yang ditampilkan di Postingan

Membuat Blockquote Menarik dengan CSS3

Membuat Blockquote Menarik dengan CSS3

Membuat Blockquote Menarik hanya dengan CSS3

Cara Membuat Blockquote dengan CSS3. Blockquote dalam sebuah artikel merupakan salah satu komponen yang bisa dikatakan penting. Elemen ini dipergunakan untuk menegaskan suatu pokok pikiran artikel, atau bahkan digunakan juga untuk mencantumkan quote-quote dari tokoh-tokoh terkenal.

Dengan blockquote pandangan pengunjung menjadi lebih terarah dan bisa memahami artikel yang terkadang begitu panjang dan membosankan untuk dibaca. Oleh karena itu para blog designer berlomba-lomba untuk membuat tampilan blockquote menjadi lebih menarik. Maka tak heran jika banyak bertebaran di google tentang cara membuat blockquote agar menjadi lebih menarik.

Di artikel ini saya akan meng share kan pengalaman saya dalam membuat blockquote, mungkin ada yang berminat silakan dicoba di websitenya, dan saya harap tutoria ini bisa memuaskan anda. 😁

Cara Membuat Blockquote CSS3

1. Langkah pertama silakan buka blogger anda.
2. Pilih menu "Tema" di sebelah kiri lalu pilih "Edit HTML" dilayar sebelah kanan.
3. Silakan cari CSS blockquote (biasanya didalam b:skin) lalu ganti semua dengan CSS dibawah ini.

blockquote{background:#f8cf82;color:#000;font-size:15px;position:relative;padding:2em 1.5em 1.2em;margin:1em auto;text-align:left;box-shadow:-3px 3px 3px #00000040;word-spacing:0}
blockquote:hover{transform:translateY(3px);box-shadow:-1px 0 0 #00000040;transition:all .3s ease-out}
blockquote:before{content:&quot;\f129&quot;;font-family:fontawesome;color:#fff;position:absolute;top:-10px;left:13px;width:26px;height:26px;border-radius:50%;border:3px solid #fff;background:#9C27B0;text-align:center;box-shadow:0 4px 3px #00000052;opacity:.9;transition:all .3s ease-out}
blockquote:hover:before{transform:translateY(-3px);transition:all .3s ease-out}
blockquote:after{content:&quot;&quot;;position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #d8b471 #d8b471;background:#d8b471;display:block;width:0}

4. Silakan simpan template anda.
Jika dirasa kurang puas dengan tampilannya anda bisa merubah beberapa CSS diatas
Demikian tutorial membuat blockquote dengan CSS3, semoga bermanfaat. Terimakasih telah mengunjungi blog Agung Jaka Nugraha, wassalam.

Cara Membuat Blockquote Menarik dengan CSS3

Cara Membuat Related Post Material Design

Cara Membuat Related Post Material Design

Cara Membuat Related Post Material Design Responsive

Cara membuat Related Post. Related Post merupakan salah satu komponen dalam suatu website yang tidak bisa diremehkan. Terkadang navigasi blog yang terlalu banyak dan begitu membingungkan bisa teratasi dengan memasang widget related post ini.

Related Post juga bisa mengkotak kesukaan pengunjung terhadap suatu tema ; misalnya tentang tutorial yang sekarang anda baca ini. Jadi sasaran pengunjung menjadi terarah dan tingkat bounce rate menjadi berkurang.

Dengan tampilan related post yang bermacam saya kira bisa menarik minat pengunjung dan membuat mereka betah berada di blog kita. Namun berbagai macam gaya jika dirasa berlebihan akan membuat pengunjung jadi merasa "jijik". Disamping itu script yang terlalu berat menjadikan widget ini menjadi lama ter-load.

Namun yang akan saya sharekan kali ini adalah widget related post yang ringan dengan tampilan yang bersih ala Material Design. Dan tentu saja responsive, Let's check it out!!

Baca Juga : Halaman Label SEO Friendly

Membuat Related Post Material Design

1. Langkah pertama silakan login di akun blogger anda
2. Masuk ke "Tema" kemudian klik "Edit HTML"
Silakan masukkan kode CSS berikut di atas kode </head>

<b:if cond='data:view.isPost'><style>
//Related
#related-posts ul{margin:0!important}
.related-post{width:47%;display:inline-block;vertical-align:top;margin:1%;border:1px solid #eee;font-size:.8em;line-height:1.4em}
.related-post a{display:block}
.related-post a img{float:left;margin-right:1em;height:77px}
.related-post-title{padding:10px}
</style></b:if>

3. Kemudian cari kode <div class='post-footer-line post-footer-line-1'> atau sejenisnya, yang jelas, intinya kode tersebut berada dibawah postingan, kemudian copy dan pastekan kode di bawah ini.

<b:if cond='data:view.isPost'>
<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/><div class="related-post-title">'+titles[c]+'</div></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<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;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=4;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>

4. Ganti kode var maxresults=4; dan sesuaikan dengan keinginan anda berapa postingan yang akan ditampilkan nantinya.
Contoh : var maxresults=6; untuk menampilkan 6 postingan di widget related post
5. Jika dirasa sudah sesuai silakan Simpan template

Nb : Untuk kode CSS bisa dirubah sesuai dengan keinginan, namun pesan saya modifnya jangan terlalu alay alias berlebihan, ya.. ehehehhehehe... 😁

Ok, demikian sedikit tutorial tentang bagaimana membuat related post material design responsive semoga bermanfaat. Terimakasih telah datang dan berkunjung di blog Agung Jaka Nugraha. Wassalam.

Cara membuat Related Post Material Design Responsive

Membuat Halaman dengan efek animate.css dan WOW.js di Blogspot

Membuat Halaman dengan efek animate.css dan WOW.js di Blogspot

Membuat Halaman dengan efek animate.css dan WOW.js

Cara Membuat Halaman dengan efek animate.css dan WOW.js. Salah satu faktor SEO dari suatu halaman website adalah SEO Onpage dengan memberikan kesan terhadap setiap pengunjungnya pada saat mengunjungi halaman kita. Diantara sekian cara itu adalah dengan menerapkan animasi ke dalam efek-efek peralihan.

Setiap mata pengunjung akan sangat menikmati efek cantik tersebut dan tentu saja membuat mereka betah dengan halaman kita. Dan hal itulah sasaran kita kali ini dalam optimasi OnPage SEO web.

Kalau hanya untuk membuat efek animasi biasanya para webdeveloper menggunakan efek dari animate CSS 3, namun terdapat kekurangan yaitu animasi akan tertutup oleh scroll, sehingga pengunjung tidak akan merasakan efek tersebut.

Untuk menutupi kekurangan tersebut maka kita perlu menambahkan javascript yaitu WOW.js yang nanti akan saya sertakan dalam tutorial dibawah. fungsi wow.js ini adalah untuk menjalankan animasi dari class animate.css ketika element yang diberikan class animasi sudah terlihat dilayar monitor. Walapun element html tertutup scroll atau berada dibagian bawah website akan tetap bisa diberikan efek animasi dan animasi itu sendiri akan berjalan ketika element sudah tampak dilayar monitor.

Baca Juga : Membuat Header Mengecil ketika di Scroll

Membuat Halaman dengan efek animate.css dan WOW.js

Baik, langsung saja kita mulai cara Membuat Halaman dengan efek animate.css dan WOW.js.
1. Buka https://www.blogger.com
2. Cari </head> lalu copy paste kode dibawah ini.
Animate.css
<link href="https://dl.dropbox.com/s/dy890pni7k045na/animate.css?dl=0" rel="stylesheet" type="text/css"></link>

Javascript
<script src="https://dl.dropbox.com/s/kqyr5w7ia2q7fkb/wow.js?dl=0" type="text/javascript"></script>
<script>new WOW().init();</script>

3. Simpan dan selesailah tahapan untuk persiapannya.

Penting :
Untuk menggunakannya adalah sebagai berikut.
Kalo biasanya kita dalam penggunaan animate.css adalah dengan kode seperti ini
<div class="animate fadeIn">Hello i'm fadeIn</div>

Maka kita harus merubah kode yang berwarna merah tersebut sehingga menjadi seperti ini.
<div class="wow fadeIn">Hello i'm fadeIn</div>

Untuk daftar lengkap silakan lihat dibawah ini
 

Efek
    <div class="wow bounce">bounce</div>
    <div class="wow flash">flash</div>
    <div class="wow pulse">pulse</div>
    <div class="wow rubberBand">rubberBand</div>
    <div class="wow shake">shake</div>
    <div class="wow swing">swing</div>
    <div class="wow tada">tada</div>
    <div class="wow wobble">wobble</div>
    <div class="wow bounceIn">bounceIn</div>
    <div class="wow bounceInDown">bounceInDown</div>
    <div class="wow bounceInLeft">bounceInLeft</div>
    <div class="wow bounceInRight">bounceInRight</div>
    <div class="wow bounceInUp">bounceInUp</div>
    <div class="wow bounceOut">bounceOut</div>
    <div class="wow bounceOutDown">bounceOutDown</div>
    <div class="wow bounceOutLeft">bounceOutLeft</div>
    <div class="wow bounceOutRight">bounceOutRight</div>
    <div class="wow bounceOutUp">bounceOutUp</div>
    <div class="wow fadeIn">fadeIn</div>
    <div class="wow fadeInDown">fadeInDown</div>
    <div class="wow fadeInDownBig">fadeInDownBig</div>
    <div class="wow fadeInLeft">fadeInLeft</div>
    <div class="wow fadeInLeftBig">fadeInLeftBig</div>
    <div class="wow fadeInRight">fadeInRight</div>
    <div class="wow fadeInRightBig">fadeInRightBig</div>
    <div class="wow fadeInUp">fadeInUp</div>
    <div class="wow fadeInUpBig">fadeInUpBig</div>
    <div class="wow fadeOut">fadeOut</div>
    <div class="wow fadeOutDown">fadeOutDown</div>
    <div class="wow fadeOutDownBig">fadeOutDownBig</div>
    <div class="wow fadeOutLeft">fadeOutLeft</div>
    <div class="wow fadeOutLeftBig">fadeOutLeftBig</div>
    <div class="wow fadeOutRight">fadeOutRight</div>
    <div class="wow fadeOutRightBig">fadeOutRightBig</div>
    <div class="wow fadeOutUp">fadeOutUp</div>
    <div class="wow fadeOutUpBig">fadeOutUpBig</div>
    <div class="wow flip">flip</div>
    <div class="wow flipInX">flipInX</div>
    <div class="wow flipInY">flipInY</div>
    <div class="wow flipOutX">flipOutX</div>
    <div class="wow flipOutY">flipOutY</div>
    <div class="wow lightSpeedIn">lightSpeedIn</div>
    <div class="wow lightSpeedOut">lightSpeedOut</div>
    <div class="wow rotateIn">rotateIn</div>
    <div class="wow rotateInDownLeft">rotateInDownLeft</div>
    <div class="wow rotateInDownRight">rotateInDownRight</div>
    <div class="wow rotateInUpLeft">rotateInUpLeft</div>
    <div class="wow rotateInUpRight">rotateInUpRight</div>
    <div class="wow rotateOut">rotateOut</div>
    <div class="wow rotateOutDownLeft">rotateOutDownLeft</div>
    <div class="wow rotateOutDownRight">rotateOutDownRight</div>
    <div class="wow rotateOutUpLeft">rotateOutUpLeft</div>
    <div class="wow rotateOutUpRight">rotateOutUpRight</div>
    <div class="wow hinge">hinge</div>
    <div class="wow rollIn">rollIn</div>
    <div class="wow rollOut">rollOut</div>
    <div class="wow zoomIn">zoomIn</div>
    <div class="wow zoomInDown">zoomInDown</div>
    <div class="wow zoomInLeft">zoomInLeft</div>
    <div class="wow zoomInRight">zoomInRight</div>
    <div class="wow zoomInUp">zoomInUp</div>
    <div class="wow zoomOut">zoomOut</div>
    <div class="wow zoomOutDown">zoomOutDown</div>
    <div class="wow zoomOutLeft">zoomOutLeft</div>
    <div class="wow zoomOutRight">zoomOutRight</div>
    <div class="wow zoomOutUp">zoomOutUp</div>
  
Contoh Efek animasi dengan waktu delay :
  <div data-wow-delay=".25s" class="wow bounce">bounce</div>
Contoh Efek dengan durasi waktu :
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounce">bounce</div>
Contoh Efek dengan iterasi/pengulangan :
 <div data-wow-iteration="100" class="wow bounce">bounce</div>

Ok. Selamat mencoba !!!

Sekian tutorial Cara Membuat Halaman dengan efek animate.css dan WOW.js, semoga bermanfaat dan terus semangat!! Terimakasih telah membaca artikel Agung Jaka Nugraha. Wassalam

Cara Membuat Halaman dengan efek animate.css dan WOW.js

Membuat Header Blog Mengecil ketika di Scroll

Membuat Header Blog Mengecil ketika di Scroll

Membuat Header Blog Mengecil ketika di Scroll

Header Blog Mengecil ketika di Scroll. Akhirnya setelah sekian lama vacum nge-posting akhirnya saya muncul lagi (hihihihi..emangnya pocong). Mungkin kita pernah melihat saat blogwalking terdapat beberapa blog yang menggunakan sticky, namun berubah ukuran ketika scroll di tarik ke bawah. Hal itulah yang akan saya bahas dan share disini.

Sebenarnya tutorial ini sudah banyak bertebaran di internet, tetapi mungkin Sobat bingung dengan kata kunci yang dimaksud untuk mencari cara memasang header blog mengecil ketika di scroll. Dan sobat pun menemukan blog ini. Hehehehehe... karena terus terang saya juga bingung apa namanya.. wkwkwkwkwkwk...

Baik langsung saja akan saya bahas di sini, ikuti langkah-langkahnya dengan baik sehingga ujicoba Sobat bisa berhasil. Namun yang perlu saya tekankan disini adalah bahwa kita membuat header bukan membuat sebuah menu. Ok?! Kalau paham langsung saja check it out!!

Baca Juga : Cara Membuat Anchor Link Satu Halaman Dengan Efek Smooth

Membuat Header Blog Mengecil ketika di Scroll

Cara membuat Membuat Header Blog Mengecil ketika di Scroll.
1. Login ke https://www.blogger.com
2. Silakan copy paste kode berikut di atas </head>


<style type='text/css'>
  header1 {
   width: 100%;
   height: 150px;
   overflow: hidden;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   background-color: #0683c9;
   -webkit-transition: height 0.3s;
      -moz-transition: height 0.3s;
      -ms-transition: height 0.3s;
      -o-transition: height 0.3s;
      transition: height 0.3s;
  }
  
  header1 h1#logo {
   font-family: "Oswald", sans-serif;
   font-size: 60px;
   font-weight: 400;
   line-height: 150px;
   display: inline-block;
   float: left;
   height: 150px;
    margin: 0;
    padding: 0;
   color: #fff;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
  }
  
  header1 nav1 {
    display: inline-block;
    float: right;
  }
  
  header1 nav1 a {
  line-height: 150px;
  margin-left: 20px;
  color: #9fdbfc;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  }
  
  /* smaller nav1 */
  
  header1 nav1 a:hover {
    color: #ffffff;
  }
  
  header1.smaller {
      height: 75px;
  }
  header1.smaller h1#logo {
      width: 150px;
      height: 75px;
      line-height: 75px;
      font-size: 30px;
  }
  header1.smaller nav1 a {
      line-height: 75px;
  }
  
  
  @media all and (max-width: 660px) {
      header1 h1#logo {
          display: block;
          float: none;
          margin: 0 auto;
          height: 100px;
          line-height: 100px;
          text-align: center;
      }
      header1 nav1 {
          display: block;
          float: none;
          height: 50px;
          text-align: center;
          margin: 0 auto;
      }
      header1 nav1 a {
          line-height: 50px;
          margin: 0 10px;
      }
      header1.smaller {
          height: 75px;
      }
      header1.smaller h1#logo {
          height: 40px;
          line-height: 40px;
          font-size: 30px;
      }
      header1.smaller nav1 {
          height: 35px;
      }
      header1.smaller nav1 a {
          line-height: 35px;
      }
  }
</style>
sertakan juga kode javascript berikut :

<script type='text/javascript'>
    function init() {
        window.addEventListener('scroll', function(e){
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 200,
            header1 = document.querySelector("header1");
          if ((distanceY) > (shrinkOn)) {
            $(header1).addClass("smaller");
          } else { 
            if ($(header1).hasClass("smaller")) {
              $(header1).removeClass("smaller");
            }
          }
      });
    }
    init();
  </script>

3. Cari kode <body> lalu pastekan kode Html ini dibawahnya

<header1 class='site-header1'>
      <div class='container clearfix'>
        <h1 id='logo'>
                <a href="alamat homepage anda"><img src="alamat img anda"/></a>
            </h1>
        <nav1>
          <a href=''>Lorem</a>
          <a href=''>Ipsum</a>
          <a href=''>Dolor</a>
        </nav1>
      </div>
    </header1>
*rubah link berwarna merah

4. Simpan template dan Selesai

Catatan: Jika trik membuat header blog mengecil ketika discrol ini tidak berhasil mungkin anda perlu merubah atau mengupgrade jQuery library sobat dengan ini : https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

Demikian tutorial Membuat Header Blog Mengecil ketika di Scroll semoga bermanfaat. Terima kasih telah membaca postingan Agung Jaka Nugraha. Wassalam.

Cara Membuat Header Blog Mengecil ketika di Scroll

Cara mudah BackUp File ketika Windows Tidak Mau Booting

Cara mudah BackUp File ketika Windows Tidak Mau Booting

Cara mudah BackUp File ketika Windows Tidak Mau Booting

Cara mudah BackUp File ketika Windows Tidak Mau Booting. Cara ini juga bisa dipakai untuk menyelamatkan file ketika kita terlanjur menghapus windows ketika menginstall. Seperti yang pernah saya alami ketika membantu salah satu teman saya untuk menginstall windows 10 pada laptopnya dengan merk ACER.

Kejadian tersebut sebenarnya sempat membuat saya kaget, karena kejadian itu diluar perkiraan saya. Yaitu ketika data penting sudah saya pindahkan ke drive selain C, kemudian ketika saya akan menginstal pada langkah pemilihan drive untuk penginstalan windows saya memilih C dengan memformatnya.

Setelah pemformatan selesai ternyata windows memberikan peringatan "Windows Cannot Be Installed To Disk 0 Partition 1" sedangkan drive sudah saya format. Wadduuhh!!!.. kataku dalam hati sambil pegang jidat. Sialan!! Ini berarti otomatis saya harus melakukan partisi menyeluruh, dengan kata lain file-file yang sudah saya back-up ke drive selain C juga akan ikut hilang bersamanya.
Mengapa bisa terjadi begitu? Silakan di baca di postingan saya Cara mengatasi Windows Cannot Be Installed To Disk 0 Partition 1.

Tapi setelah diam sebentar dan menenangkan hati, hahahhaha... akhirnya saya teringat, bukankah masih ada ms-DOS yang bisa dibuka? Lalu pikiran saya tertuju ke bagaimana jika saya pindahkan file dengan notepad? Hmm.. layak dicoba, nih.. hihihihii...

Mau tahu caranya? Simak tutorialnya dibawah ini!. Lets check it out!

Lihat Juga :


Cara mudah BackUp File ketika Windows Tidak Mau Booting

Pertama-tama siapkan dulu bahannya. yaitu DVD Windows Installer atau pakai booting USB juga bisa. Untuk cara booting dengan USB bisa kamu cari di pakdhe google dengan keyword membuat windows installer menggunakan Rufus. Selain itu juga persiapkan USB kosong sebagai tempat penyimpanan file yang akan dipindahkan nantinya.

Kalau bahan sudah siap tinggal melakukan eksekusi hahahahhaha...
1. Silakan masukkan DVD windows installer atau colok booting windows USB, kemudian setelah booting silakan setting BIOS dengan pilihan pertama DVD atau USB.
2. Setelah windows installer berjalan silakan pencet tombol Shift+F10, maka akan muncul jendela command promt.
3. Ketik saja"notepad" lalu enter, lalu muncul notepad pada layar.
Cara BackUp File ketika Windows Tidak Mau Booting

4. Dari notepad klik Open, maka akan muncul jendela Open, lalu lihat bagian bawah jendela dari *txt file ganti menjadi All files. Maka akan muncul semua file selain file berekstensi *txt. Disini kita bisa melakukan operasi copy paste file yang akan diamankan.
Cara BackUp File ketika Windows Tidak Booting

Cara BackUp File ketika Windows Tidak Bisa Booting

Cara BackUp File dengan command prompt


5. Selanjutnya terserah anda, hehehehhe..

Nb. Dilarang keras mengklik double file apapun, atau konsekwensinya nanti terjadi freeze alias jadi patung dan tidak bisa melakukan apa-apa. Kamu hanya boleh melakukan copy-paste saja, OK,bro??!

Kalaupun hal diatas terjadi maka silakan menuju jendela command promt lagi lalu ketik "taskmgr" kemudian pilih Notepad klik "End Task" pada bagian bawah jendela. Ulangi lagi dari langkah 3.

OK, saya rasa sudah cukup berbagi pengalaman Cara mudah BackUp File ketika Windows Tidak Mau Booting dari saya, semoga bermanfaat buat kamu. Terima kasih telah membaca postingan Agung Jaka Nugraha, Wassalam

Cara mudah BackUp File ketika Windows Tidak Mau Booting