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

Cara Membuat Smooth Accordion Dropdown Menu

Cara Membuat Smooth Accordion Dropdown Menu

Cara Membuat Smooth Accordion Dropdown Menu

Cara Membuat Smooth Accordion Dropdown Menu. Menu merupakan suatu hal yang penting dalam suatu blog. Tanpa adanya menu, para visitor akan kebingungan dalam menjelajahi blog kita. Seperti halnya jalan raya tanpa rambu-rambu penunjuk jalan, maka dapat dipastikan para pengguna akan kebingungan arah tujuan mereka.

Dibawah ini akan saya coba men-share-kan tutorial Cara Membuat Smooth Accordion Dropdown Menu yang pastinya akan membuat blog anda keliatan indah dan pastinya terlihat canggih. Karena di plugin ini efek yang ditimbulkan sangat halus seperti pipinya Luna Maya. Hahahhahaha.. JK

Smooth Accordion ini dibuat oleh fainder, anda bisa menelusurinya dengan mengunjungi link berikut. Dan yang paling saya suka adalah efek yang digunakan tidak begitu memberatkan blog, hanya menggunakan CSS dan JS ringan, sehingga kita bisa menambah nilai lebih blog kita dengan menggunakan Smooth Accordion ini.

Baik, tanpa menunggu lama kita akan memulai tutorial Cara Membuat Smooth Accordion Dropdown Menu. Selamat mencoba, dan semoga berhasil!!!

Cara Membuat Smooth Accordion Dropdown Menu

Langkah 1. Buka menu Tata Letak di blogger >> Tambahkan Gadget >> pilih HTML/Javascript. Buat menu anda dengan struktur HTML seperti dibawah ini kemudian SAVE

<ul id="accordion" class="accordion">
  <li>
    <div class="link"><i class="fa fa-database"></i>Web Design<i class="fa fa-chevron-down"></i></div>
    <ul class="submenu">
      <li><a href="#">Photoshop</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
    </ul>
  </li>
  <li>
    <div class="link"><i class="fa fa-code"></i>Coding<i class="fa fa-chevron-down"></i></div>
    <ul class="submenu">
      <li><a href="#">Javascript</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">Ruby</a></li>
    </ul>
  </li>
  <li>
    <div class="link"><i class="fa fa-mobile"></i>Devices<i class="fa fa-chevron-down"></i></div>
    <ul class="submenu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Mobile</a></li>
      <li><a href="#">Desktop</a></li>
    </ul>
  </li>
  <li>
    <div class="link"><i class="fa fa-globe"></i>Global<i class="fa fa-chevron-down"></i></div>
    <ul class="submenu">
      <li><a href="#">Google</a></li>
      <li><a href="#">Bing</a></li>
      <li><a href="#">Yahoo</a></li>
    </ul>
  </li>
</ul>

Langkah 2. Silakan buka tempat dimana CSS anda berada, biasanya didalam <b:skin>, lalu paste kode CSS dibawah ini. Nb : Anda juga bisa memodifikasinya sesuai dengan selera.

.accordion{width:100%;max-width:360px;margin:30px auto 20px;background:#FFF;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.accordion .link{cursor:pointer;display:block;padding:15px 15px 15px 42px;color:#4D4D4D;font-size:14px;font-weight:700;border-bottom:1px solid #CCC;position:relative;-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.accordion li:last-child .link{border-bottom:0}
.accordion li i{position:absolute;top:16px;left:12px;font-size:18px;color:#595959;-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.accordion li i.fa-chevron-down{right:12px;left:auto;font-size:16px}
.accordion li.open .link{color:#b63b4d}
.accordion li.open i{color:#b63b4d}
.accordion li.open i.fa-chevron-down{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.submenu{display:none;background:#444359;font-size:14px}
.submenu li{border-bottom:1px solid #4b4a5e}
.submenu a{display:block;text-decoration:none;color:#d9d9d9;padding:12px;padding-left:42px;-webkit-transition:all .25s ease;-o-transition:all .25s ease;transition:all .25s ease}
.submenu a:hover{background:#b63b4d;color:#FFF}

Langkah 3. Silakan paste kan javascript berikut diatas </body>

<script>
/*<![CDATA[*/
$(function(){var t=function(t,e){this.el=t||{},this.multiple=e||!1,this.el.find(".link").on("click",{el:this.el,multiple:this.multiple},this.dropdown)};t.prototype.dropdown=function(t){var e=t.data.el;$this=$(this),$next=$this.next(),$next.slideToggle(),$this.parent().toggleClass("open"),t.data.multiple||e.find(".submenu").not($next).slideUp().parent().removeClass("open")};new t($("#accordion"),!1)});
/*]]>*/
</script>

Demikian tutorial Cara Membuat Smooth Accordion Dropdown Menu, semoga bermanfaat. Terimakasih telah berkunjung ke Agung Jaka Nugraha. Wassalam

Cara Membuat Smooth Accordion Dropdown Menu

Menggunakan Shareit untuk Presentasi dengan Power Point

Cara Menggunakan Shareit untuk Presentasi dengan Power Point

Cara Menggunakan Shareit untuk Presentasi dengan Power Point. Mungkin dari sebagian besar pengguna Android telah memasang aplikasi multiguna ini di smartphone-nya. Shareit sendiri sebenarnya adalah suatu aplikasi transfer file yang mempunyai fungsi bermacam, seperti transfer file dari smartphone ke komputer atau laptop tanpa bantuan kabel data, kendali jarak jauh, sampai dengan mengoperasikan Ms Powerpoint. Bagi anda yang belum tahu apa itu Shareit bisa anda intip dari Google Playstore di smartphone anda, dengan mengetikkan kata kunci pada jendela pencarian, "Shareit".

Selain sebagai salah satu aplikasi media transfer cepat dengan menggunakan jaringan local wiFi  (tanpa harus menggunakan internet data), aplikasi Shareit juga bisa dipakai untuk kegiatan presentasi dengan memanfaatkan Microsoft Office Power Point di komputer atau laptop, seperti halnya ketika kita memakai alat Presenter. Bagaimana caranya? Silakan simak tutorial berikut ini!

Cara Menggunakan Shareit untuk Presentasi dengan Power Point

Ada 2 langkah persiapan yang harus anda lakukan.
Yang pertama download aplikasinya dulu baik di smartphone atau di Laptop/Komputer anda melalui link dibawah!
  • Shareit for smartphone ==> Download disini (download melalui smartphone)
  • Shareit for PC ==> Download disini (download melalui PC)
  • Lalu install keduanya dimasing-masing device
Langkah yang ke dua yaitu mengkoneksikan smartphone anda dengan Komputer atau Laptop.
  1. Silakan buka Shareit di Komputer / laptop anda
  2. Kemudian buka juga Shareit di smartphone
  3. Pada layar beranda di smartphone silakan pilih menu "Lebih Banyak"
    Menggunakan Shareit untuk Presentasi dengan Power Point
  4. Pada jendela munculan silakan pilih "Sambungkan ke PC"
    Menggunakan Shareit untuk Presentasi dengan Power Point
  5. Lalu buka Shareit di Komputer / Laptop pilih "Show QR Code"
    Menggunakan Shareit untuk Presentasi dengan Power Point

    Menggunakan Shareit untuk Presentasi dengan Power Point
  6. Setelah muncul barcode, pada shareit di smartphone pilih "Pindai untuk koneksi" lalu scan barcode di komputer dengan smartphone anda.
    Menggunakan Shareit untuk Presentasi dengan Power Point
  7. Setelah kedua device tersambung, maka anda sudah siap untuk menggunakannya.
Cara menggunakan
  1. Setelah tersambung seperti setelah langkah 6 dan 7 diatas, akan muncul jendela baru di smartphone, lalu pilih kendali PPT.
    Menggunakan Shareit untuk Presentasi dengan Power Point
  2. Smartphone anda telah siap menjadi kendali power point anda. Nb: untuk panah keatas adalah menggeser ke layar / action (animation) berikutnya, sedangkan panah ke bawah untuk menggeser ke layar / action (animation) sebelumnya. Silakan coba-coba sendiri. Untuk stop, silakan ketuk "HENTIKAN" diatas layar smartphone.
    Menggunakan Shareit untuk Presentasi dengan Power Point
Demikian tutorial Cara Menggunakan Shareit untuk Presentasi dengan Power Point semoga bermanfaat.

Cara Menggunakan Shareit untuk Presentasi dengan Power Point

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge. Adobe Reader dan Adobe Flash dan Java, diklaim bertanggung jawab atas sekitar 66% kerentanan terhadap sistem operasi Windows.

Namun, bagi banyak orang mereka tetap memilih menggunakannya untuk alasan tertentu yang bagi sebagian orang membutuhkannya, seperti game atau aplikasi lain yang menggunakan flash player sebagai aplikasi penjalannya.

Dalam artikel ini, kita akan mempelajari bagaimana cara menonaktifkan atau mengaktifkan Adobe Flash Player di Google Chrome, Firefox, Edge, dan Opera di Windows 10/8/7.

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge

Untuk bisa menggunakan flash tentu saja anda diharuskan menginstall adobe flash dan mengaktifkannya. Sebagai catatan penting agar bisa berjalan dengan baik anda harus mengupdatenya setiap kali ada pembaharuan. Jika Anda menggunakan Internet Explorer di Windows 10/8, maka Flash telah terintegrasi, dan pembaruannya ditawarkan secara otomatis oleh Windows Update.

Setelah anda sudah memastikan bahwa adobe anda sudah berjalan dengan baik, sekarang saatnya untuk mempelajari bagaimana menggunakannya.

Flash di Chrome

Buka browser Google Chrome. Laman chrome://plugin telah dihapus di Chrome 57 dan semua versi yang lebih baru. Jadi sekarang Anda harus membuka chrome://settings/content/flash pada address bar untuk mengontrol saat konten Adobe Flash dimuat.

Info : Untuk memeriksa versi terinstal Adobe Flash Player chrome://components.

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge

Flash di Firefox

Dari menu Mozilla Firefox, silakan pilih Add-on. Di bawah Plugins, pilih Shockwave Flash. Dari menu drop-down, pilih Tanya untuk mengaktifkan, Selalu aktifkan atau Jangan aktifkan, seperti yang diinginkan.

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge

Flash di Opera

Buka Menu Opera. Pilih Kelola Ekstensi. Silakan klik di Enabled link dan Disable the Flash Player. Untuk mengaktifkannya, Anda dapat memeriksa di bawah tautan Disabled.

Catatan penting : Di Opera 45 dan versi yang lebih baru, jika Anda telah mengaktifkan Sidebar kiri dari Menu Opera, kita akan melihat tautan Ekstensi berbentuk kubus. Klik di atasnya untuk membuka halaman Extensions. Di sini bisa melihat semua Ekstensi.

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge

Flash di Edge

Untuk menonaktifkan atau mengaktifkan Flash Player, buka Microsoft Edge, klik tombol tiga titik dan pilih Settings. Gulir ke bawah ke bawah dan pilih Lihat pengaturan lanjutan
Pada halaman berikutnya, Anda bisa menemukan pilihan yang disebut Use Adobe Flash Player . Toggle tombol untuk menghidupkan atau mematikannya.

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge


Demikian artikel Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge. Semoga bermanfaat.

Cara Mengaktifkan Flash Player di Chrome, Firefox, Opera, dan Edge

Alasan Mengapa Baterai Android Cepat Habis

Alasan Mengapa Baterai Android Cepat Habis

Alasan Mengapa Baterai Android Cepat Habis. Perangkat Android sudah menjadi bagian dari hidup manusia modern. Berbagai macam produk setiap tahunnya dikeluarkan oleh produsen dengan berbagai macam aplikasi didalamnya yang dapat menunjang dan mendukung aktivitas kita sehari-hari.

Terkadang aplikasi-aplikasi tersebut seringkali membuat umur baterai android cepat habis. Itu hanyalah satu hal saja yang mempengaruhi. Ada beberapa hal yang akan kami rangkum dalam postingan kali ini, semoga bisa bermanfaat untuk kita semua.

Alasan Mengapa Baterai Android Cepat Habis

Alasan Mengapa Baterai Android Cepat Habis

Beberapa hal yang menjadi alasan mengapa baterai android cepat habis adalah sebagai berikut.

Penggunaan Wallpaper yang Terang

Disaat memeriksa jam, pesan SMS, WA atau panggilan tidak terjawab, Anda selalu melihat layar utama telepon Anda. Wallpaper dengan warna terang dan mencolok di layar utama ponsel benar-benar bisa "memakan baterai". Makanya lebih baik menggunakan wallpaper hitam putih . Ini akan membantu menghemat baterai android.

Penetapan waktu tunggu tampilan layar

Pengaturan waktu tunggu tampilan layar secara defaut adalah 30 detik dihitung dari waktu delay menggunakan smartphone. Cobalah untuk mengatur layar dengan menggunakan waktu terpendek yang tersedia, biasanya 15 detik dengan begitu umur baterai akan lebih lama.

Pengaktifan WiFi, Bluetooth, dan GPS

Terkadang seseorang lupa menonaktifkan WiFi, Bluetooth, dan GPS disaat mereka selesai menggunakan. Padahal hal tersebut bisa memakan memori dan memperpendek umur baterai.

Sebenarnya sah-sah saja jika kita menyalakan layanan data dengan alasan kecepatan informasi, namun jika hal tersebut tidak perlu maka lebih baik kita matikan. Seperti contoh saat rapat, atau ketika kita berada di daerah yang sulit mendapatkan jaringan telepon atau data seluler.

Selalu membawa Smartphone di tangan

Cobalah untuk tidak selalu membawa ponsel Anda ke tangan Anda saat cuaca panas. Karena ketika suhu naik, maka smartphone juga ikut panas. Selain itu, suhu tubuh juga ikut naik melalui tangan kita. Hal tersebut akan membawa lebih banyak kesempatan baterai ponsel terlalu panas dan sebagai akibatnya, baterai akan kehabisan tenaga.

Pengaktifan layar auto totate

Silakan anda matikan fungsi Auto-rotate kecuali jika memang benar-benar diperlukan. Sensor khusus - accelerometer - akan aktif ketika anda mengaktifkan fungsi ini, dan hal tersebut tentu saja mengkonsumsi lebih banyak energi untuk baterai smartphone anda.

Penggunaan Mode Getar

Biasanya kita menggunakan mode getar ketika sedang dalam keadaan sedang tidak ingin diganggu. Sebenarnya boleh-boleh saja, namun terkadang orang lupa menonaktifkannya. Tentu saja hal ini juga memperpendek tenaga baterai. Jika memungkinkan silakan gunakan saja Mode Senyap atau Mode Suara.

Memaksimalkan Kecerahan Layar

Terkadang disaat kita berada diluar ruangan yang terang, ketika melihat smartphone akan silau. maka kita harus menggunakan pengaturan kecerahan layar dengan diatur lebih terang dari biasanya. Hal tersebut juga bisa mengurangi tenaga baterai.

Solusinya adalah saat berada di gedung, cobalah untuk menurunkan kecerahan layar Anda setidaknya sebesar 30-40%. Jumlah cahaya ini biasanya lebih dari cukup untuk melihat semua informasi di layar. Selain itu, ini akan membantu memperpanjang umur baterai Anda secara dramatis.

Saat berada di luar ruangan, jangan gunakan tingkat kecerahan maksimal. Sebaiknya gunakan fungsi auto-brightness untuk membantu Anda melihat layar ponsel meski di bawah sinar matahari. Ditambah dengan pengaturan waktu tunggu tampilan diatur selama 15 detik.

Tidak menutup aplikasi dengan sempurna

Yang dimaksud dengan tidak menutup aplikasi disini adalah, ketika kita selesai membuka aplikasi seperti WA, instagram atau facebook terkadang kita hanya memencet tombol home. Dan buruknya lagi kita menganggap aplikasi tersebut sudah tertutup secara sempurna, padahal tidak.

Pada saat kita hanya memencet tombol home, sebenarnya yang terjadi adalah program tetap berjalan dan mengonsumsi baterai saat beroperasi di latar belakang. Jadi ingatlah untuk menutup semua jendela dari waktu ke waktu. Biasanya pada smartphone samsung dengan cara memencet tombol dobel kotak 😆 (gak tau namanya, biasanya berada disebelah kiri bawah layar) lalu menggeser aplikasi yang sedang berjalan ke samping.

Demikian informasi tentang Alasan Mengapa Baterai Android Cepat Habis semoga bermanfaat.

Alasan Mengapa Baterai Android Cepat Habis

5 Unsur Utama Penguatan Pendidikan Karakter, Metode, dan Strategi Pembelajaran Terbaru 2017

5 Unsur Utama Penguatan Pendidikan Karakter, Metode, dan Strategi Pembelajaran

5 Unsur Utama Penguatan Pendidikan Karakter, Metode, dan Strategi Pembelajaran Terbaru 2017

5 Unsur Utama Penguatan Pendidikan Karakter, Metode, dan Strategi Pembelajaran Terbaru. Pada tahun 2010 pemerintah Indonesia mencanangkan sekaligus melaksanakan kebijakan Gerakan Nasional Pendidikan Karakter berlandaskan Rencana Aksi Nasional (RAN) Pendidikan Karakter Bangsa. Hal tersebut perlu  dilanjutkan, dioptimalkan, diperdalam, dan bahkan diperluas sehingga
diperlukan penguatan pendidikan karakter bangsa. Untuk itu, sejak sekarang perlu dilaksanakan Gerakan Penguatan Pendidikan Karakter (PPK) dengan mengindahkan asas keberlanjutan dan kesinambungan.

Gerakan PPK yang diatur sesuai dengan Perpres No. 87 Tahun 2017 menempatkan pendidikan karakter sebagai dimensi terdalam atau inti pendidikan nasional sehingga pendidikan karakter menjadi poros pelaksanaan pendidikan dasar dan menengah. Lebih lanjut, Gerakan PPK perlu mengintegrasikan, memperdalam, memperluas, dan sekaligus menyelaraskan berbagai program dan kegiatan pendidikan karakter yang sudah dilaksanakan sampai sekarang.

Dalam hubungan ini, pengintegrasian dapat berupa :

  • Pemaduan kegiatan kelas, luar kelas di sekolah, dan luar sekolah (masyarakat/komunitas);
  • Pemaduan kegiatan intrakurikuler, kokurikuler, dan ekstrakurikuler; 
  • Pelibatan secara serempak warga sekolah, keluarga, dan masyarakat; 
  • Perdalaman dan perluasan dapat berupa penambahan dan pengintensifan kegiatan-kegiatan yang berorientasi pada pengembangan karakter siswa, penambahan dan pemajanan kegiatan belajar siswa, dan pengaturan ulang waktu belajar siswa di sekolah atau luar sekolah; 
  • Penyelerasan dapat berupa penyesuaian tugas pokok guru, Manajemen Berbasis Sekolah, dan fungsi Komite Sekolah dengan kebutuhan Gerakan PPK.
5 Unsur Utama Penguatan Pendidikan Karakter, Metode, dan Strategi Pembelajaran Terbaru 2017

5 Unsur Utama Penguatan Pendidikan Karakter (PPK)

Ada 5 nilai utama karakter yang saling berkaitan membentuk jejaring nilai yang perlu dikembangkan sebagai prioritas Gerakan PPK. Kelima nilai utama karakter bangsa yang dimaksud adalah sebagai berikut:

1. Religius

Nilai karakter religius mencerminkan keberimanan terhadap Tuhan yang Maha Esa yang diwujudkan dalam perilaku melaksanakan ajaran agama dan kepercayaan yang dianut, menghargai perbedaan agama, menjunjung tinggi sikap toleran terhadap pelaksanaan ibadah agama dan kepercayaan lain, hidup rukun dan damai dengan pemeluk agama lain. Nilai karakter religius ini meliputi tiga dimensi relasi sekaligus, yaitu hubungan individu dengan Tuhan, individu dengan sesama, dan individu dengan alam semesta (lingkungan). Nilai karakter religius ini ditunjukkan dalam perilaku mencintai dan menjaga keutuhan ciptaan. Subnilai religius antara lain cinta damai, toleransi, menghargai
perbedaan agama dan kepercayaan, teguh pendirian, percaya diri, kerjasama antar pemeluk agama dan kepercayaan, antibuli dan kekerasan, persahabatan, ketulusan, tidak memaksakan kehendak, mencintai lingkungan, melindungi yang kecil dan tersisih.

2. Nasionalis

Nilai karakter nasionalis merupakan cara berpikir, bersikap, dan berbuat yang menunjukkan kesetiaan, kepedulian, dan penghargaan yang tinggi terhadap bahasa, lingkungan fisik, sosial, budaya, ekonomi, dan politik bangsa, menempatkan kepentingan bangsa dan negara di atas kepentingan diri dan kelompoknya. Subnilai nasionalis antara lain apresiasi budaya bangsa sendiri, menjaga kekayaan budaya bangsa,rela berkorban, unggul, dan berprestasi, cinta tanah air, menjaga lingkungan,taat hukum, disiplin, menghormati keragaman budaya, suku,dan agama.

3. Mandiri

Nilai karakter mandiri merupakan sikap dan perilaku tidak bergantung pada orang lain dan mempergunakan segala tenaga, pikiran, waktu untuk merealisasikan harapan, mimpi dan cita-cita.
Subnilai mandiri antara lain etos kerja (kerja keras), tangguh tahan banting, daya juang, profesional, kreatif, keberanian, dan menjadi pembelajar sepanjang hayat.

4. Gotong Royong

Nilai karakter gotong royong mencerminkan tindakan menghargai semangat kerja sama dan bahu membahu menyelesaikan persoalan bersama, menjalin komunikasi dan persahabatan, memberi bantuan/ pertolongan pada orang-orang yang membutuhkan. Subnilai gotong royong antara lain menghargai, kerja sama, inklusif, komitmen atas keputusan bersama, musyawarah mufakat, tolongmenolong, solidaritas, empati, anti diskriminasi, anti kekerasan, dan sikap kerelawanan.

5. Integritas

Nilai karakter integritas merupakan nilai yang mendasari perilaku yang didasarkan pada upaya menjadikan dirinya sebagai orang yang selalu dapat dipercaya dalam perkataan, tindakan, dan pekerjaan, memiliki komitmen dan kesetiaan pada nilai-nilai kemanusiaan dan moral (integritas moral). Karakter integritas meliputi sikap tanggung jawab sebagai warga negara, aktif terlibat dalam kehidupan sosial, melalui konsistensi tindakan dan perkataan yang berdasarkan kebenaran. Subnilai integritas antara lain kejujuran, cinta pada kebenaran, setia, komitmen moral, anti korupsi, keadilan, tanggungjawab, keteladanan, dan menghargai martabat individu (terutama penyandang disabilitas).

Metode dan Strategi Pembelajaran Penguatan Pendidikan Karakter (PPK)

Metode Pembelajaran PPK

Penguatan Pendidikan Karakter terintegrasi dalam kurikulum dilakukan melalui pembelajaran di kelas dengan menggunakan metode pembelajaran yang tepat. Guru harus pandai memilih agar
metode pembelajaran yang digunakan secara tidak langsung menanamkan pembentukan karakter peserta didik. Metode pembelajaran yang dipilih harus dapat membantu guru dalam memberikan pengetahuan dan keterampilan yang dibutuhkan peserta didik.

Melalui metode tersebut diharapkan siswa memiliki keterampilan yang dibutuhkan pada abad 21, seperti kecakapan berpikir kritis (critical thinking), berpikir kreatif (creative thinking), kecakapan berkomunikasi (communication skill), termasuk penguasaan bahasa internasional, dan kerja sama dalam pembelajaran (collaborative learning).

Beberapa metode pembelajaran yang dapat dipilih guru secara kontekstual, antara lain:
  1. Metode pembelajaran saintifik (Scientific Learning), sebagai metode pembelajaran yang didasarkan pada proses keilmuan dengan langkah kegiatan mulai dari merumuskan masalah, merumuskan hipotesis, mengumpulkan data, menganalisis data, dan menarik simpulan. 
  2. Metode inquiry / discovery learning, yaitu penelitian / penyingkapan. Dalam Webster’s Collegiate Dictionary inquiry didefinisikan sebagai “bertanya tentang” atau “mencari informasi dengan cara bertanya”, sedangkan dalam kamus American Heritage, discovery disebut sebagai “tindakan menemukan”, atau “sesuatu yang ditemukan lewat suatu tindakan”. 
  3. Metode pembelajaran berbasis masalah (problem-based learning),yaitu metode pembelajaran yang memfokuskan pada identifikasi serta pemecahan masalah nyata, praktis, kontekstual,berbentuk masalah yang strukturnya tidak jelas atau belum jelas solusinya(ill-structured) atau open ended yang ada dalam kehidupan siswa sebagai titik sentral kajian untuk dipecahkan melalui prosedur ilmiah dalam pembelajaran, yang kegiatannya biasanya dilaksanakan secara berkelompok. 
  4. Metode pembelajaran berbasis proyek (project-based learning), yaitu pembelajaran yang menggunakan proyek sebagai media dalam proses pembelajaran untuk mencapai kompetensi sikap, pengetahuan, dan keterampilan. Penekanan pembelajaran terletak pada aktivitas-aktivitas siswa untuk menghasilkan produk dengan menerapkan keterampilan meneliti, menganalisis, membuat, sampai dengan mempresentasikan produk pembelajaran berdasarkan pengalaman nyata. 
  5. Metode pembelajaran kooperatif (cooperative learning),yaitu suatu model pembelajaran di mana siswa belajar dalam kelompok-kelompok kecil (umumnya terdiri dari 4-5 orang siswa) dengan keanggotaan yang heterogen (tingkat kemampuan, jenis kelamin, dan suku/ras berbeda). Dalam menyelesaikan tugas kelompok, setiap anggota saling bekerja sama dan membantu untuk memahami suatu bahan pembelajaran. 
  6. Metode pembelajaran berbasis teks (text-based instruction / genrebased instruction), yaitu pembelajaran yang berorientasi pada kemampuan siswa untuk menyusun teks. Metode pembelajaran ini mendasarkan diri pada pemodelan teks dan analisis terhadap fitur-fiturnya secara eksplisit serta fokus pada hubungan antara teks dan konteks penggunaannya. Perancangan unit-unit pembelajarannya mengarahkan siswa agar mampu memahami dan memproduksi teks baik lisan maupun tulis dalam berbagai konteks. Untuk itu, siswa perlu memahami fungsi sosial, struktur, dan fitur kebahasaan teks.

Strategi Pembelajaran PPK

Adapun pilihan dan penggunaan metode-metode pembelajaran tersebut dapat dilaksanakan dengan beberapa strategi, antara lain:
  1. Pembelajaran kolaboratif (collaborative learning) Melalui pembelajaran ini, peserta didik berlatih bagaimana bekerja sama dengan orang lain untuk menyelesaikan sebuah proyek bersama Fokus nilai dan keterampilan yang menjadi sasaran dalam strategi pembelajaran kolaboratif adalah kemampuan bekerja sama. 
  2. Presentasi Peserta didik diminta untuk mempresentasikan hasil pemikiran, tulisan, dan kajiannya di depan kelas. Nilai yang dibangun dengan strategi ini adalah rasa percaya diri, kemampuan berkomunikasi dan menyampaikan gagasan, serta kemampuan untuk mempertahankan pendapat dalam berargumentasi. Bagi peserta didik yang mempresentasikan, ia akan berlatih berargumentasi dengan baik. Bagi teman-teman sekelas, mereka akan belajar mengkritisi sebuah argumentasi dengan memberikan argumentasi lain yang lebih rasional dan berdasarkan data/fakta. Strategi ini akan memperkuat kemampuan untuk berpikir kritis dan meningkatkan kemampuan berkomunikasi peserta didik.
  3. Diskusi dalam pembelajaran, peserta didik perlu dilibatkan secara aktif bersama teman-temannya secara berkelompok, berintegrasi secara verbal, saling bertukar pikiran dan informasi, saling mempertahankan pendapat, mengajukan usulan dan gagasan yang lebih baik, serta bersama-sama memecahkan masalah tertentu dalam pembelajaran. Fokus penguatan karakter pada strategi ini adalah kemampuan berpikir kritis, kemampuan berkomunikasi, menghargai pendapat orang lain, percaya diri, dan mempengaruhi orang lain melalui tata cara berargumentasi yang baik. 
  4. Debat Peserta didik perlu diberi kesempatan untuk beradu argumentasi dalam sebuah perdebatan yang topiknya dipilih secara aktual dan kontekstual, agar mereka dapat mempertahankan argumentasinya secara logis, rasional, dengan bahasa yang komunikatif dan memikat perhatian pendengar (audiens). Fokus penguatan karakter pada strategi inia dalah kemampuan berpikir kritis,kemampuan berkomunikasi, percaya diri, dan mempengaruhi orang lain melalui tata cara berargumentasi yang baik. 
  5. Pemanfaatan TIK dalam pembelajaran, peserta didik dapat memanfaatkan teknologi informasi dan komunikasi (TIK) dalam rangka menyelesaikan tugas-tugas sekolah. Dengan memanfaatkan TIK untuk pembelajaran, diharapkan kemampuan peserta didik dalam menggunakan sarana TIK lebih baik, pembelajaran pun lebih efektif dan menarik. Fokus pada kegiatan ini adalah literasi digital.
Untuk selanjutnya silakan download Konsep dan Pedoman Penguatan Pendidikan Karakter disini.

5 Unsur Utama Penguatan Pendidikan Karakter, Metode, dan Strategi Pembelajaran Terbaru 2017

Cara Print dari HP Android dengan koneksi Wifi

Cara Print dari HP Android dengan koneksi Wifi

Cara Print dari HP Android dengan koneksi Wifi. Jaman yang sudah berkembang sekarang membuat manusia memiliki bermacam kebutuhan yang serba komplek. Semua pekerjaan dijalankan melalui sebuah aplikasi di smartphone, baik itu belanja online, jualan online, pengiriman berkas kerja, bahkan pacaran pun sekarang online, heehehehehhe.. JK 😂

Cara Print dari HP Android dengan koneksi Wifi

Ngomong-ngomong tentang jualan online, ada diantaranya adalah bisnis jualan pulsa. Pernah saya membahas perbedaan kelebihan dan kekurangan beberapa bisnis agent jualan pulsa yaitu antara paytrend, bebas bayar, dan pulsagram (silakan klik untuk penjelasan lebih lanjut).

Pada bisnis tersebut kita hanya memerlukan sebuah aplikasi yang tersemat di smartphone kita, sehingga kita bisa pergi kemana-mana sambil berjualan. Segala kemudahan transaksi online dapat kita dapatkan di aplikasi tersebut antara lain pembelian pulsa, bayar listrik, bahkan sampai pemesanan tiket pesawat dan kereta api pun bisa kita atasi dengan mudah.

Namun disaat kita memerlukan fasilitas pendukung seperti tanda bukti / struk pembayaran dalam bentuk cetak terkadang kita kebingungan karena kita memakai smartphone. Lalu bagaimanakah cara mengatasinya? Simak tutorial berikut!

Cara Print dari HP Android dengan koneksi Wifi

Untuk bisa mencetak struk pembayaran dari HP Android kita memerlukan koneksi antara Google Chrome di PC dengan aplikasi PrinterShare di Android kita. Bagaimana caranya?

Langkah awal (Setting Google Chrome)
1. Copy paste link berikut di address bar google chrome kita --> chrome://devices
2. Klik "tambahkan printer" pada layar

Cara Print dari HP Android dengan koneksi Wifi

Catatan : Anda diharuskan masuk ke akun google, biasanya jika anda belum masuk akun google maka akan muncul jendela baru untuk login ke akun google. Ingat, gunakan akun google yang sama seperti yang terkoneksi di HP Android anda.
3. Lakukan setting seperti pada gambar berikut!

Cara Print dari HP Android dengan koneksi Wifi

Jika langkah diatas telah selesai maka tahap setting di PC sudah selesai, dan kita akan menuju langkah selanjutnya

Langkah di HP
1. Download aplikasi "Printershare" lalu install download disini --> PrinterShare
2. Kemudian install

Sekarang tinggal bagaimana cara mencetak struk dengan memanfaatkan printershare melalui HP.
Sebagai catatan yang perlu diperhatikan adalah bahwa akun chrome anda harus dalam keadaan aktif. Maksutnya disini adalah pada saat anda masuk ke akun, jangan sampai browser anda ditutup (boleh di minimize jika dirasa mengganggu)
Disini saya akan memberikan contoh mencetak struk pembayaran dari aplikasi bebas bayar. Cara untuk mencetaknya adalah sebagai berikut :
1. Buka aplikasi bebas bayar anda lalu pilih menu disebelah kiri, pilih Laporan kemudian Laporan Transaksi
Cara Print dari HP Android dengan koneksi Wifi

2. Pilih salah satu transaksi kemudian ketuk ikon printer disebelah kanannya
Cara Print dari HP Android dengan koneksi Wifi

3. Pada struk yang termuat silakan pilih "screenshot"
Cara Print dari HP Android dengan koneksi Wifi

3. Lalu tunggu beberapa saat akan muncul jendela buka gambar, ketuk "PrinterShare"
Cara Print dari HP Android dengan koneksi Wifi

4. Tunggu koneksi dari HP ke PC, membutuhkan waktu sebentar tergantung seberapa cepat koneksi internet anda.
Cara Print dari HP Android dengan koneksi Wifi

5. Kemudian akan muncul tampilan seperti dibawah ini silakan ketuk "Option"
Cara Print dari HP Android dengan koneksi Wifi

6. Pilih Select Printer
Cara Print dari HP Android dengan koneksi Wifi

7. Pilih "Google Cloud Print"
Cara Print dari HP Android dengan koneksi Wifi

8. Pada saat pertama kali menggunakan anda akan disuruh untuk memilih akun google. Silakan pilih akun google yang telah disetting pada langkah awal
Cara Print dari HP Android dengan koneksi Wifi

9. Jika sukses, akan muncul printer yang telah anda masukkan pada langkah awal tadi, silakan ketuk pilihan printer tersebut.
Cara Print dari HP Android dengan koneksi Wifi

10. Setelah kembali ke jendela semula, silakan ketuk "Option" lagi, lalu pilih "Picture Size"
Cara Print dari HP Android dengan koneksi Wifi

11. Pilih ukuran 4"x6" 10x15cm (untuk cetak struk) lalu ketuk "OK"
Cara Print dari HP Android dengan koneksi Wifi


12. Kembali ketuk "Option", lalu ketuk "Picture Scaling" pilih "Inside" lalu "OK"
Cara Print dari HP Android dengan koneksi Wifi

13. Ketuk "Option" lagi, pilih "Picture Size" ketuk "Fit to Page" lalu "OK"
Cara Print dari HP Android dengan koneksi Wifi

14. ketuk "Option" lagi, pilih "Page Orientation" ketuk "Potrait" lalu "OK"
Cara Print dari HP Android dengan koneksi Wifi

Setelah semua settingan telah selesai maka sudah bisa untuk digunakan untuk mencetak dengan mengetuk "Print" pada layar utama sebelah pojok kanan bawah, kemudian tunggu hingga proses koneksi sampai 100%. Selesai

Demikian tutorial Cara Print dari HP Android dengan koneksi Wifi, semoga bermanfaat. Terima kasih telah membaca artikel Agung Jaka Nugraha. Wassalam

Cara Print dari HP Android dengan koneksi Wifi

Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10. Pada saat kita berada di tempat kerja atau di kantor acapkali kita menggunakan printer sebagai salah satu alat kerja yang selalu dibutuhkan. Printer digunakan sebagai alat untuk mencetak lembar kerja pada saat selesai kita mengetik dengan menggunakan media digital. Maka dari itu disetiap perkantoran selalu terdapat printer.

Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

Di tempat kerja biasanya untuk satu PC atau satu meja terdapat satu printer. Namun bagaimana jika kita bekerja dengan menggunakan laptop sendiri sedangkan kita sendiri terkadang agak malas untuk membuka dan memasang kabel jack printer? Saya punya solusinya.

Yah, mungkin jawaban anda memang benar. Yaitu dengan mensharing printer dengan menggunakan wifi atau jaringan internet yang ada di tempat kerja / kantor. Lalu bagaimana caranya? Silakan simak tutorial berikut.

Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

Untuk bisa menggunakan cara ini langkah awal atau persiapannya adalah antara komputer satu (terhubung dengan printer) dengan komputer lain (tidak terhubung dengan printer) yang akan melakukan pencetakan harus berada dalam satu jaringan, baik itu melalui wifi atau jaringan internet.

Jika bingung dengan bahasa yang saya gunakan, bahasa awamnya adalah kedua komputer / laptop telah terhubung dalam satu jaringan wifi. 😄

Jika langkah diatas sudah dilalui maka ikuti langkah dibawah ini.
Pada komputer yang akan di share printer-nya
1. Klik search pada start di windows lalu ketikkan "manage advanced sharing settings" lalu klik
Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

2. Klik turn on pada setiap pengaturan di menu Public dan Private juga All Network lalu "Save change"
Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

3. Pada start cari devices and printer, kemudian klik kanan pada "printer yang aktif" lalu klik "printer properties"
Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

4. Pada jendela munculan cari dan klik menu "sharing", aktifkan "share this printer" lalu klik OK
Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

Pada komputer satunya
1. Lakukan langkah yang sama seperti pada langkah 1 dan 2 diatas.
2. Buka windows explorer kemudian temukan "Network" yang berada di menu kiri paling bawah sendiri. Pilih nama Komputer yang telah anda aktifkan pada langkah sebelumnya, maka akan terdapat printer yang telah di share.
Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

3. Klik kanan pada ikon komputer tersebut kemudian pilih "connect..."
Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10

Langkah diatas sudah selesai, sekarang tinggal mencoba apakah printer sudah bisa digunakan via wifi.

Untuk membuktikannya silakan coba untuk mencetak sebuah dokumen / file, kemudian klik "Print" pada lembar kerja. Pada name printer akan terdapat nama printer yang telah di share tadi.

Demikian tutorial cara sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan windows 10, semoga bermanfaat. Terima kasih telah membaca artikel Agung Jaka Nugraha. Wassalam

Cara Sharing Printer dengan Wifi | Jaringan Internet Windows 7 dan Windows 10