Membuat Tombol Login dan Logout Blogger di Blog

Berawal dari melihat sebuah blog yang menggunakan tombol Dashboard dengan menggunakan link home Blogger untuk menuju dashboard blog dan sekaligus untuk login atau logout, kemudian saya coba berpikir lain yaitu membuat tombol login dan atau tombol logout lain yang menggunakan langsung link login dan logout akun Google yang mengarah ke halaman Blogger.

Tombol ini sangat sederhana karena hanya menggunakan CSS dengan menggunakan link yang menuju ke halaman login akun Google yang mengarah ke halaman home Blogger atau Dashboar Blog seperti gambar gif di bawah ini atau silahkan coba link demonya.

Jika tertarik untuk mencoba tombol login dan logout Blogger ini silahkan gunakan kode-kode di bawah ini.

Kode CSS

 #adminblog{background: #F4836A;color: #fff!important;width:60px;border:none;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 0;position:absolute;top:10px;left:10px;transition:all .4s ease-in-out;}

#layoutlogin{background:#000;opacity:.7;position:absolute;top:0;left:0;right:0;bottom:0;z-index:99999;display:none}
#login{position:absolute;width:222px;height:auto;top:30%;left:50%;margin-left:-111px;font-family:Arial;z-index:100000;display:none}
#loginbox{background:#fff;width:200px;padding:10px;display:none;position:absolute;top:62px;left:0;border:1px solid #ddd;border-radius: 2px;z-index:1;overflow:hidden;}
#loginbox .emaillogin input.email {color: #777;padding: 10px;font-size: 14px;font-family:Arial;width:89%;border:1px solid #ddd;border-radius: 2px;}
#loginbox .emaillogin input:focus {outline: none;}
#loginbox .emaillogin input.signin-btn{background: #F4836A;color: #fff!important;border:none;outline: none;width:100%;font-size: 14px;font-family:Arial;cursor:pointer;border-radius: 2px;margin-top: 10px;padding: 11px;}
#login1,#login2{color: #777;padding:5px 10px;font-size: 14px;font-family:Arial;width:38%;display:none;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:38px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
#login2{border-bottom:none;z-index:2}
#Admin1,#Admin2{color: #777;padding:5px 0;font-size: 14px;font-family:Arial;width:100%;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:0px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
.logout{background: #F4836A;color: #fff!important;width:38%;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 10px;position:absolute;top:38px;right:-1px;transition:all .4s ease-in-out;}
a.logout{text-decoration:none}
#Admin1:hover,#login1:hover{background:#eee}
.logout:hover,#adminblog:hover{background:#d56148} 

Kode #adminblog adalah kode CSS untuk mengatur tampilan dan posisi tombol Admin.
Jika tombol Login terlalu ke bawah atau terlalu masuk ke Form, silahkan atur atau tambahkan angkanya pada kode top pada kode CSS #loginbox

Kode HTML
Silahkan simpan di atas kode </body>

 <div id="adminblog" onclick="document.getElementById('login').style.display='block';layoutlogin.style.display='block';adminblog.style.display='none';">Admin</div>

<div id='login'>
<div id="Admin1" onclick="document.getElementById('login1').style.display='inline';logoutbox.style.display='inline';Admin1.style.display='none';Admin2.style.display='inline';">Silahkan Pilih</div>
<div id="Admin2" style="display:none" onclick="document.getElementById('login1').style.display='none';logoutbox.style.display='none';Admin1.style.display='inline';Admin2.style.display='none';">Silahkan Pilih</div>
<div id='login1' onclick="document.getElementById('loginbox').style.display='block';login1.style.display='none';login2.style.display='inline';logoutbox.style.display='none';">Login</div>
<div id='login2' style="display:none" onclick="document.getElementById('loginbox').style.display='none';login1.style.display='inline';login2.style.display='none';logoutbox.style.display='inline';">Login</div>
<div id='loginbox'>
<div class='emaillogin'>
<form action="https://accounts.google.com/ServiceLogin?service=blogger&amp;continue=https://www.blogger.com/home&amp;followup=https://www.blogger.com/home" method="post" target="_blank" onsubmit="onlogin()">
    <input class="email" value="Username" name="Email" onblur='if (this.value == &quot;&quot;) {this.value = &quot;Username&quot;;}' onfocus='if (this.value == &quot;Username&quot;) {this.value = &quot;&quot;;}' type="text" />
      <input class="signin-btn" value="Sign In" name="submit" type="submit" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';"/>
    </form>
   </div>
  </div>  
    <div id='logoutbox' style="display:none">
<a class='logout' href="https://accounts.google.com/Logout?service=blogger" target="_blank" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';">Logout
   </a>
  </div>
    </div>
<div style="clear:both"></div>
<div id="layoutlogin"></div> 

Demo :

Demo
Click here

Selamat mencoba =)


sumber : http://www.kompiajaib.com/2014/09/membuat-tombol-login-dan-logout-blogger.html

Membuat Progress Bar di Blog Seperti Youtube

Membuat Progress Loading Bar Blog Seperti Youtube - Jika kita jeli ketika kita membuka halaman Youtube, maka kita akan melihat sebuah progress bar di paling atas situs berwarna merah dari kiri ke kanan. Cukup keren bukan? Kita pun bisa membuat pregress loading bar seperti itu di Blogger dengan bantuan javascript.
Untuk contoh progress bar Youtube bisa Anda lihat pada animasi gif di bawah ini. Dan demo penerapan nanobar progress bar pada blog bisa Anda coba pada link demo di bawahnya

Demo
Click here

Bagaimana? Anda tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan copy kode javascript di bawah ini dan simpan di atas kode </body>

 <script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script> 

Kustomisasi

height:"2px" untuk ketebalan loading bar.
a.bg=a.bg||"#db3131" untuk warna loading bar, silahkan ganti #db3131 dengan warna yang Anda sukai.


sumber : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html

Follow Sosial Media Slide Out with Jquery

Tentunya Anda sudah tidak asing lagi dengan template Pakdhe Johny buatan Maskolis kan? Yup... sebuah template Blogger dengan fitur-fitur yang menarik yang patut Anda coba. Pada template tersebut terdapat tombol follow social media di sisi kanan blog yang cukup menarik yang di susun dengan css dan jquery dengan menggunakan css sprite untuk image/icon sosial medianya.

Ketika Anda meng-hover-nya, maka tombolnya akan keluar (slide out) dan akan ada efek memantul (bounce) diakhirnya, begitu pun ketika dilepas. Cukup menarik bukan? Nah kali ini saya akan sharing cara membuat sosial media seperti pada template Pakdhe Johny tersebut namun dengan css dan jquery yang berbeda tetapi tetap menghasilkan tombol yang serupa yang saya sebut dengan follow social media slide out with jquery.

Namun untuk css sprite-nya tetap menggunakan image yang sama yang telah dibuat Maskolis. Silahkan coba, perhatikan, dan bandingkan demo di link bawah ini dengan yang ada di template Pakdhe Johny.

Demo
Click here

Untuk kode-kodenya silahkan copy dari iframe JSFiddle di bawah ini. Untuk kode javascript dan HTML-nya silahkan simpan di atas kode </body>

Namun jangan lupa karena ini menggunakan efek toggle bounce, maka harus menambahkan jquery library dan jquery ui di templatenya seperti di bawah ini berapa pun versinya. Jika sudah ada (berapa pun versinya) maka tidak usah menambahkannya lagi. Selamat mencoba dan semoga bermanfaat...

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

Tentunya Anda sudah tidak asing lagi dengan template Pakdhe Johny buatan Maskolis kan? Yup... sebuah template Blogger dengan fitur‐fitur yang menarik yang patut Anda coba. Pada template tersebut terdapat tombol follow social media di sisi kanan blog yang cukup menarik yang di susun dengan css dan jquery dengan menggunakan css sprite untuk image/icon sosial medianya. Ketika Anda meng‐hover‐nya, maka tombolnya akan keluar (slide out) dan akan ada efek memantul (bounce) diakhirnya, begitu pun ketika dilepas. Cukup menarik bukan? Nah kali ini saya akan sharing cara membuat sosial media seperti pada template Pakdhe Johny tersebut namun dengan css dan jquery yang berbeda tetapi tetap menghasilk


sumber : http://www.kompiajaib.com/2014/08/follow-social-media-slide-out-with.html

Widget Google Followers dan Facebook Like box Sliding

Jika sobat blogger pernah melihat ada Fb+Google Like melayang di piggir dan jika di arahkan dengan cursor akan muncul, kali ini saya akan share xD

Langsung saja ya, Berikut langkah penerapannya :

 .socialbox{
    position:fixed;
    top:100px;
    right:-286px;
    height:250px;
    width:285px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
}
.fbicon-box{
    width:30px;
    height:35px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#405D9B;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Arial;
    font-size:30px;
    font-weight:700;
    text-align:center;
    padding-top:2px;
}
.socialbox:hover{
    right:0;
    z-index:2;
}

.socialbox2{
    position:fixed;
    top:145px;
    right:-279px;
    height:230px;
    width:258px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
    padding:10px;
}
.gpicon-box{
    width:30px;
    height:32px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#DD4B39;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Georgia;
    font-size:20px;
    font-weight:700;
    text-align:center;
    padding-top:5px;
}
.socialbox2:hover, .socialbox2:active{
    right:0;
} 

• Kode HTML

Untuk kode HTML juga sama, jika Anda sudah memasang Sliding Facebook Like Box dari postingan sebelumnya silahkan ganti dengan kode HTML-nya dengan kode HTML di bawah ini :

 <div class="socialbox">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/troublemaker" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class="socialbox2">
    <div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/+Raditya_ID" data-source="blogger:blog:followers" data-width="260"></div>
</div> 

Silahkan ganti URL profil Facebook dan profil Google+ di atas dengan URL profil Facebook dan profil Google+ Anda.

Kemudian silahkan tambahkan javascript SDK facebook dan javascript Google+ di bawah ini. Jika ternyata di blog Anda sudah terdapat kode-kode ini silahkan lewati langkah ini.

• Javascript Facebook

Simpan di bawah kode <body>

 <div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script> 

• Javascript Google+

Simpan di atas kode </body>

 <script type='text/javascript'>
 (function() {
  var po = document.createElement('script');         
  po.type = 'text/javascript';         
  po.async = true;         
  po.src = 'https://apis.google.com/js/plusone.js';         
  var s = document.getElementsByTagName('script')[0];  s.parentNode.insertBefore(po, s);
 })(); 
</script> 

Kemudian jangan lupa silahkan pastikan blog Anda sudah menggunakan jquery library seperti di bawah ini (berapa pun versinya).

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script&gt;

Lihat Demo : 

Demo
Click here

sumber : http://www.kompiajaib.com/2014/04/g-followers-dan-facebook-like-box-sliding-widget.html

Font Awesome 4.4.0

Ada kabar baru dari Font Awesome, di akhir bulan Juli 2015 ini Font Awesome telah mengumumkan bahwa mereka telah mengupdate ke versi terbaru yaitu versi 4.4.

Jika Font Awesome mengupdate versinya maka berarti ada penambahan ikon baru. Dan memang benar adanya, bahwa pada versi terbaru kali ini ada penambahan ikon baru sebanyak 66 buah ikon, seperti: ikon baterai, jam gelas, ikon browser seperti mozilla, opera, dan firefox, serta ikon lainnya seperti pada gambar di bawah ini.

Nah bagi yang memerlukan beberapa ikon baru seperti pada gambar di atas, silahkan update font awesome yang Anda gunakan.

Jika sebelumnya Anda menggunakan script Font Awesome seperi di bawah ini.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Maka Anda cukup merubah angka 4.3.0 menjadi 4.4.0 pada script di atas, sehingga menjadi seperti berikut ini.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Namun jika Anda merasa tidak memerlukan ikon-ikon seperti pada gambar di atas, maka Anda tidak perlu meng-update-nya.

Sekian semoga bermanfaat =)

Cara Menghemat Kuota Internet

Internet kini semakin mahal saja. Kadang ISP (penyedia layanan Internet) tidak sesuai dengan kebutuhan pelanggannya. Misalnya bagi orang yang hobi download setiap hari, biasanya ia berlangganan Internet berbasis unlimited (tanpa batasan kuota/sepuasnya). Yang membebani pelanggan adalah adanya FUP, yaitu kebijakan pemakaian wajar atau lebih singkatnya: kuota pada unlimited yang berkecepatan normal. Ketika kuota FUP habis, maka kecepatan koneksi Internet akan diturunkan. Pelanggan dapat membeli kuota FUP agar kecepatan Internet kembali normal.

Akhirnya, saya membeli kuota Internet 8GB untuk sebulan dengan kecepatan yang lumayan, dan berusaha untuk menghematnya semaksimal mungkin. Mungkin itu cukup untuk sebulan. Tetapi hawa nafsu untuk mengunduh suatu aplikasi dengan ukuran yang besar selalu menghantui saya untuk menghabiskan kuota. Untung saja, tips menghemat kuota Internet ini bisa sangat berguna walaupun agak menyakitkan dan terlihat sepele.

Dalam artikel "16 Cara Menghemat Kuota Internet di Windows 8.1" sudah tertulis tips yang sederhana. Anda mungkin berpikir bahwa itu kurang efektif, atau mungkin berpikir bahwa itu hanya disajikan untuk pemula. Tetapi pada artikel ini, Anda akan mengetahui caranya menghemat kuota Internet paling jitu dan kebanyakan jarang terpikirkan.

1. Gunakan Aplikasi Jejaring Sosial/Berita sebagai Pengganti Mengunjungi Situs Aslinya

Di Windows Store terdapat banyak aplikasi jejaring sosial dan berita sebagai pengganti mengunjungi situs aslinya melalui peramban web. Aplikasi Facebook adalah salah satunya.

Selain Facebook, di Windows Store juga tersedia aplikasi berita seperti VIVANews. Mungkin juga banyak aplikasi berita lainnya yang bisa Anda temukan di sana. Selain aplikasi jejaring sosial dan berita, Anda juga bisa menonton video YouTube melalui aplikasi Hyper for YouTube agar kuota Internet tidak cepat habis.

Ketika pengguna mengunjungi situs aslinya melalui peramban web (web browser), maka koneksi Internet akan dipakai untuk memuat seluruh kode HTML, CSS, dan lainnya agar situs tersebut tampil sebaik-baiknya. Hal ini akan menghabiskan kuota yang lebih besar daripada menggunakan aplikasi jejaring sosial dan berita. Jadi, gunakanlah aplikasi Windows 8.1 karena koneksi Internet takkan dipakai untuk memuat seluruh kode itu, melainkan akan memuat feed-nya (berita/informasi) saja.

Sebenarnya, mengunjungi situs aslinya akan lebih aman karena akan menampilkan kontennya sebaik-baiknya. Atau mungkin sebaliknya, menggunakan aplikasi akan terasa lebih aman dan cepat, contoh: situs web facebook.com menampilkan banyak iklan, sedangkan aplikasinya jarang sekali menampilkan iklan.


2. Berlangganan Kuota yang Waktu Pemakaiannya Dibagi

Ada salah satu ISP yang menyajikan paket Internet murah nan cepat dengan waktu pemakaian koneksi Internet-nya dibagi menjadi beberapa waktu. Misalnya, pelanggan membeli kuota 8GB untuk sebulan. Namun waktu pemakaiannya dibagi menjadi: 00-06 WIB sebanyak 500MB, 09-17 WIB sebanyak 6GB, sedangkan kuota 24 jam sebanyak 1,5GB.

Tentu ini akan menghemat kuota Internet. Pelanggan yang menghabiskan kuota 24 jamnya tidak akan kehilangan kuota siangnya (09-17 WIB) dan kuota dini hari sampai pagi hari (00-06 WIB), dan pelanggan tidak dapat memakai koneksi Internet saat malam hari (17-24 WIB) dan sekitar pukul 06-09 WIB, ketika kuota 24 jam sudah habis. Dengan demikian, berlangganan paket Internet seperti ini akan menghemat kuota Internet.

3. Membatasi Kecepatan Koneksi Internet

Membatasi atau bahkan menurunkan kecepatan koneksi Internet akan membatasi pemakaian Internet karena hawa nafsu berinternet dapat dikendalikan. Maksudnya, hal ini dapat membatasi pemakaian Internet agar pelanggan takkan streaming, download yang berat-berat, atau hal lainnya yang menyebabkan kuota cepat habis; dan menggunakan Internet hanya untuk hal-hal yang penting. 

Ada beberapa cara yang bisa dilakukan untuk membatasi kecepatan koneksi Internet. Salah satunya adalah dengan memilih paket Internet yang lambat namun ber-kuota besar.

Saya selalu memakai ISP yang memberi 100MB dengan harga Rp. 5.000, dan itu terasa sangat lambat. Hal itu telah membatasi pemakaian Internet yang menyebabkan kuota cepat habis, dan saya cenderung melakukan hal-hal yang penting saja dengan koneksi Internet.

Tapi kalau kebutuhan untuk berinternet memang sangat penting, mungkin Anda perlu meningkatkan kecepatannya, bukan menurunkannya atau membatasinya. Bisa saja koneksi Internet yang sangat lambat akan mengurangi kualitas situs web yang sedang dimuat, dan akhirnya Anda malah me-refresh berkali-kali situs yang gagal dimuat itu hingga menghabiskan banyak kuota Internet.

Jadi, pastikan Anda memilih layanan Internet yang tidak terlalu lambat, mungkin minimal berkecepatan 20KBps, dan itu tergantung pada wilayah Anda.

Jika Anda keberatan membeli paket Internet yang lambat, mungkin masih ada cara yang lain. Tunggu artikel berikutnya.


4. Internet Gratis: Pergi ke Tempat Berfasilitas Wi-Fi Gratis

Biasanya tempat yang memberikan fasilitas Wi-Fi gratis adalah restoran. Mungkin Anda perlu memesan sesuatu selagi berinternet di sana.


5. Internet Gratis: Memakai Wi-Fi Tetangga

Tentu saja, memakai Wi-Fi tetangga akan berdampak baik terhadap keuangan Anda. Tapi Anda perlu meminta izin terlebih dahulu sebelum memakai Wi-Fi-nya, mungkin juga meminta password Wi-Fi-nya. Tapi jangan pernah mencuri Wi-Fi tetangga yang telah terdeteksi di komputer, nanti malah bermasalah dengan tetangga hanya karena Wi-Fi; dan mencuri itu dosa.


6. Memperbarui Driver yang Berkaitan dengan Koneksi Internet

Ketika suatu modem (atau perangkat lainnya) tidak bekerja semestinya, maka memperbarui driver-software-nya adalah jalan yang tepat untuk mengatasinya. Memperbarui driver tentu berguna untuk meningkatkan kompatibilitas, fitur, atau yang lain terhadap suatu perangkat keras, termasuk perangkat keras seperti modem.

Mungkin memperbarui driver juga dapat menghemat kuota Internet karena modem bekerja lebih baik.

Memperbarui driver bisa dilakukan dengan menggunakan Windows Update, atau gunakan Driver Booster agar driver lebih up-to-date. 

7. Tips Lain

Memperbarui peramban web mungkin akan menghemat kuota Internet, karena peramban web akan bekerja lebih baik setelah memperbaruinya.

Ada pula yang menyetel koneksi Internet-nya sebagai metered connection sebagai cara yang efektif untuk menghemat kuota. Atau baca artikel "16 Cara Menghemat Kuota Internet di Windows 8.1".

Mungkin masih banyak trik untuk menghemat kuota Internet yang tidak saya pikirkan. Jika Anda memiliki trik lain, silahkan menambahkannya lewat kotak komentar =)

Cara Menambahkan Tombol Konversi dan Emoticon di Blog

Untuk Tampilan Tombolnya, bisa dilihat seperti di bawah:

Jika anda mengklik tombol 'Conversion', maka akan muncul tabel konversi, dan jika anda mengklik tombol 'Emoticon', maka akan muncul emoticon komentar.

Ingin memasangnya? Ini dia caranya:

1. Log in Blogger
2. Klik Template, edit HTML
3. Cari kode <b:includable id='threaded-comment-form' var='post'>...</b:includable>
dengan Ctrl + F
4. Ubah kode di atas menjadi seperti :

 
      <b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
<div id='form-wrapper'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>
    <b:else/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;' title='Show Conversion Box'>Conversion</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;inline-block&apos;' title='Hide Conversion Box'>Conversion</a></span>
</span>
<span class='small-button1'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;none&apos;' title='Show Emoticon'>Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById(&apos;emo-box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide-emo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-emo&apos;).style.display=&apos;inline-block&apos;' title='Hide Emoticon'>Emoticon</a></span>
</span>
  </p>
<div id='konversi-box'>
    <textarea id='codes' placeholder='Write/paste the code here then click &apos;Conversion&apos;' spellcheck='false'/>
<div class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>Conversion</button>
<button onclick='cdClear();'>Clean</button>
</div>
<span class='checkbox'>
<input checked='true' id='opt1' type='checkbox'/>Konversi <code>&amp;</code><br/>
<input id='opt2' type='checkbox'/>Konversi <code>&#39;</code><br/>
<input id='opt3' type='checkbox'/>Konversi <code>&quot;</code><br/>
<input checked='true' id='opt4' type='checkbox'/>Konversi <code>&lt;</code><br/>
<input checked='true' id='opt5' type='checkbox'/>Konversi <code>&gt;</code>
<script type='text/javascript'>
//<![CDATA[
function cdClear() {
var wtarea = document.getElementById('codes');
wtarea.value = '';
wtarea.focus();
document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2'),
opt3 = document.getElementById('opt3'),
opt4 = document.getElementById('opt4'),
opt5 = document.getElementById('opt5');
cv = cv.replace(/\t/g, "    ");
if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
if (opt4.checked) cv = cv.replace(/</g, "&lt;");
if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
cv = cv.replace(/^/, "<i rel=\"pre\">");
} else {
cv = cv.replace(/^/, "<i rel=\"code\">");
}
cv = cv.replace(/$/, "</i>");
ctarea.value = cv;
ctarea.focus();
ctarea.select();
};
//]]>
</script>
</span>
</div>
</div>
<div id='emo-box'>
  <div class='comment_emo_list'/>
</div>
      <data:blogTeamBlogMessage/>
      
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src' title='comment editor'/>

      <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

        </b:if>
    </b:if>
</div>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable> 

5. Cari kode </style> atau ]]></b:skin>> dengan Ctrl + F
6. Copy kode di bawah, lalu paste di atas kode </style> atau ]]></b:skin>

 /* CSS Small Button Forum Komentar */
#konversi-box, #hide-konversi,#emo-box,#hide-emo {display:none}
#konversi-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:20px;padding:0;text-align:left;}
.checkbox{font:11px
Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;}
#codes{border:none;width:100%;height:200px;display:block;background-color:#333;color:#aaa;font:normal
12px 'Courier New',Monospace;margin:7px 0
10px;padding:8px;box-shadow:inset 0 0 0 1px #ddd;transition:all 0.5s
linear;}
#codes:focus{background-color:#303030;color:#aaa;border:none;outline:none;transition:all
0.3s linear;}
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{border:none;font-size:12px;font-family:'Open
Sans';font-weight:400;padding:4px
10px;text-decoration:none;background:#eee;color:#aaa;display:inline-block;transition:initial;cursor:pointer;border:0;}
button:hover{background:#aaa;color:#fff;}
button:active{background:#aaa;color:#fff;}
button[disabled],button[disabled]:active{color:#fff;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0
10px 0 0}
.small-button a,.small-button1 a {font-size:12px;font-family:'Open
Sans';cursor:pointer;font-weight:700;margin:10px 5px 5px
0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;color:#fff;padding:4px
10px;cursor:pointer;border-radius:2px;transition: all 0.3s ease-out;}
.small-button a {background-color:#aaa;transition: all 0.3s ease-out;}
.small-button1 a {background-color:#f48878;transition: all 0.3s ease-out;}
.small-button:hover a {background-color:#888;color:#fff;}
.small-button1:hover a {background-color:#f56954;color:#fff;}
span.small-button,span.small-button1 {text-align:left;display:inline-block;} 

Selesai, semoga bermanfaat =)

Cara Membuat Halaman Statis Menjadi Full

kali ini saya akan memposting tentang "Cara Membuat Halaman Statis Menjadi Full ". Sebenarnya ini mudah sekali, karena itu posting ini akan terlihat singkat wekaweka... Tidak usah basa-basi langsung saja ini caranya:

1. Log in Blogger
2. Klik Laman, pilih laman (halaman statis) yang ingin dijadikan full page
3. Copy kode di bawah lalu paste di bagian HTML (bukan Compose ya)

 <style scoped="" type="text/css">
#post-wrapper {width:100%;}
#sidebar-wrapper {display:none;}
</style> 

4. Klik Publikasikan

Jika halaman statis tidak bisa menjadi full page, coba cari css post wrapper dengan cara:

1.  Cari #post-wrapper dengan Ctrl + F

• Kira-kira kodenya seperti :

 /* CSS Post Wrapper */
 #post-wrapper {background:transparent;color:#444;float:left;width:68%;max-width:768px;margin:0 0 10px;}
.post-inner {padding:15px 0 0 0;}
.breadcrumbs {background:#fff;font-size:100%;height:45px;overflow:hidden;padding:0;border:1px solid #e6e6e6;border-bottom:none;}
.breadcrumbs > span {padding:0;}
.breadcrumbs > span:last-child {background:#fdfdfd;color:#666;border-right:none;font-family:'Open Sans';font-size:13px;font-weight:300;padding:10px;line-height:30px;}
.breadcrumbs a {background:#fdfdfd;color:#666;font-family:'Open Sans';font-size:13px;
font-weight:normal;line-height:45px;}
.breadcrumbs span a {color:#666;padding:10px;}
.breadcrumbs span:first-child  a{background:#fdfdfd;color:#666;margin-left:15px;}
.breadcrumbs span a:hover {color:#7fa8f0;}
.breadcrumbs a:hover {color:#7fa8f0;}
.post {background:#fff;margin:0;padding:20px;border:1px solid #e6e6e6;}
.post-body {line-height:1.6em;color:#444;margin-top:15px;font-size:14px;}
.post-body img {max-width:95%;margin:0 auto;height:auto;}
h3.post-title, h2.post-title, h1.post-title {font-family:'Open Sans',sans-serif;font-size:18px;font-weight:400;text-align:center;padding:15px;}
h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {color:#999;}
h3.post-title a:hover, h2.post-title a:hover, h1.post-title a:hover {color:#fe3434!important;}
... 

2. Ubah max-width menjadi auto

Maka kodenya menjadi :

 #post-wrapper {background:transparent;color:#444;float:left;width:68%;max-width:auto;margin:0 0 10px;} 

Sangat mudah bukan, semoga bermanfaat =)

Vienna Lite 2 Responsive Blogger Template

Template ini adalah versi ke 2 dari sebelumnya, hanya ada element yang dihapus jadi lebih ringan

OK langsung saja jika ada yang ingin melihat demo atau mendownload nya, sudah saya kasih link Demo dan link Download nya :)

Demo
Click here



Download
Click here

Perubahan Makna dan Kata

1. Perluasan Makna (Generalisasi)
Generalisasi adalah suatu proses perubahan makna kata dari yang khusus ke yang lebih umum atau dari yang lebih sempit ke yang lebih luas.

Contoh :
- Kata bapak dahulu bermakna ayah, sekarang semua orang yang lebih tinggi kedudukannya disebut bapak.
- Kata berlayar dahulu bermakna mengarungi laut dengan kapal yang memakai layar sekarang mengarungi laut dengan semua jenis kapal, tanpa layar sekalipun.

2. Penyempitan Makna (Spesialisasi)
Spesialisasi adalah proses penyempitan makna kata :

Contoh :
- Kata sarjana dahulu bermakna cendekiawan, sekarang gelar kesarjanaan.
- Kata pembantu dahulu bermakna semua orang yang membantu, sekarang hanya terbatas pada pembantu rumah tangga.

3. Ameliorasi
Ameliorasi adalah makna yang baru dianggap lebih baik daripada makna lama

Contoh :
- Kata istri  dianggap lebih baik dan terhormat daripada bini.
- Kata melahirkan dianggap lebih baik daripada beranak.
- Kata tunawisma  dianggap lebih baik daripada gelandangan.

4. Peyorasi
Peyorasi adalah proses perubahan makna kata menjadi lebih jelek atau lebih rendah daripada makna semula.

Contoh :
- Kata cerai dirasakan lebih kasar daripada kata talak.
- Kata mendengkur lebih kasar daripada kata nyenyak.
- Kata penjara dirasakan lebih kasar daripada kata lembaga pemasyarakatan.

5. Sinestesia
Sinestsia adalah perubahan makna kata akibat pertukaran tanggapan dua indra yang berbeda

Contoh :
- Kata - katamu sungguh pedas untuk didengar.
- Pendengaranmu sungguh sangat tajam.
  Kata pedas  seharusnya ditanggapi oleh indra perasa (bibir/mulut) tetapi justru ditanggapi oleh indra pendengaran. Begitu pula kata tajam  seharusnya ditanggapi oleh indra perasa (kulit), tetapi justru ditanggapi oleh indra pendengaran.

6. Asosiasi
Asosiasi adalah perubahan makna kata akibat persamaan sifat

Contoh :
- Ia memberi amplop kepada petugas sehingga urusannya cepat selesai
  Kata amplop berasosiasi dengan sogok atau suap
- Nilai matematikaku merah.
  Kata merah berasosiasi dengan jelek, tidak baik

Jenis Gangguan Software dan Internetworking

lagi lagi dan lagi masih sama dalam edisi ngeGALAU saya akan mengshare catatan di Book Of TKJ tentang Jenis Gangguan Software dan Internetworking

• Gangguan Keamanan Software
  - Sistem basis data
  - Sistem Operasi
  - Sistem program aplikasi

• Jenis Gangguan Internetworking
  1. Hacking : Pengrusakan pada infrastruktur jaringan yang sudah ada, misalnya pengrusakan pada sistem dari suatu server
  2. Physing : Pemalsuan terhadap data resmi dilakukan untuk hal yang berkaitan dengan pemanfaatannya
  3. Deface : Perubahan terhadap tampilan suatu website secara ilegal
  4. Carding : Pencurian data terhadap identitas perbankan seseorang, misalnya pencurian nomor kartu kredit, digunakan untuk memanfaatkan saldo yang terdapat pada rekening tersebut untuk keperluan belanja online.
  5, Cracking : Pencurian data dari suatu server
  6. Spoofing : Metode / cara kerja yang digunakan hacker dan cracker untuk menyusup ke sebuah jaringan komputer

Primary Storage dan Secondary Storage

Untuk kesekian kalinya saya share catatan yang berada di Book Of TKJ tentang Media Penyimpanan, ada 2 yaitu Primary Storage dan Secondary Storage

1. Primary Storage

- RAM merupakan bagian dari main memory yang dapat anda isi dengan data atau program. Data-data dapat ditulis ataupun dibaca pada lokasi dimana saja pada memory. RAM bersifat Volatile (Jika daya listrik dicabut dari komputer dan komputer tersebut mati maka semua konten yang ada di dalam RAM akan segera hilang permanent).

- ROM merupakan memory yang hanya bisa/dapat dibaca. Pengisian ROM dengan program ataupun data hanya dikerjakan pebrik. ROM biasanya sudah ditulis program ataupun data dari pabrik dengan tujuan-tujuan khusus misal diisi penerjemah (interpreter) dalam bahasa basic sehingga ROM tidak bisa maasuk sebagai memory yang dapat dipergunakan untuk program-program anda. Dan ROM bersifat NIN Volatile

2. Secondary Storage

atau juga dikenal sebagai Eksternal memory merupakan suatu tempat atau suasana yang bisa dipakai komputer untuk menyimpan data atau program, serta mempunyai fungsi yang hampir sama dengan Internal memory. Memory Eksternal dapat digunakan untuk menyelesaikan masalah didalam memory primer, yaitu dapat mengatasi masalah keterbatasan area pada memory primer. Sifat dari memory ini adalah Non Volatile. Contoh secondary storage adalah Flashdisk dan Harddisk

Membuat Artikel Anti Copas Kecuali Bagian Tertentu

Pada tutorial kali ini saya akan membuat Artikel tidak bisa di Copy Paste dengan menggunakan CSS tanpa perlu menambahkan JavaScript yang mungkin saja bisa membuat blog menjadi agak lambat. CSS ini sangat ringan dan mungkin tidak berpengaruh pada loading blog. CSS ini sangat bermanfaat bagi anda para blogger yang tidak ingin artikelnya di Copas oleh orang lain.

Anti Copy Paste pada seluruh artikel :

• Buka akun Blogger anda
• Pilih Template --> Edit HTML
• Letakkan CSS berikut tepat di atas ]]></b:skin> atau </style>

 .post-outer {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
-moz-user-select:none;
} 

• Kemudian Simpan Template

Dengan cara di atas semua tulisan dalam artikel di blog anda tidak dapat di Copas.

Anti Copy Paste pada bagian tertentu

• Buka akun Blogger anda
• Pilih Template --> Edit HTML
• Letakkan CSS berikut tepat di atas ]]></b:skin> atau </style>

 .post blockquote,.post pre,.post code{
  -webkit-touch-callout:text;
  -webkit-user-select:text;
  -khtml-user-select:text;
  -ms-user-select:text;
  -moz-user-select:text;
} 

Dengan cara di atas artikel tidak dapat di Copas kecuali pada bagian Pre, Blockquote, dan Code.

Namun cara diatas tidak valid CSS3 namun sangat manjur untuk menanggulangi orang lain yang ingin mencuri artikel dari blog anda. Semoga bermanfaat....

Perbedaan Gateway Dan Router

langsung saja ya sob tidak usah banyak basa basi tentang Perbedaaan Gateway Dan Router

Perbedaan Gateway dan Router

Gateway adalah sebuah perangkat yang digunakan untuk menghubungkan satu jaringan komputer dengan satu atau lebih jaringan komputer yang menggunakan protocol komunikasi yang berbeda sehingga informasi dari satu jaringan komputer dapat diberikan kepada komputer lain yang protokolnya berbeda.

Manfaat Gateway :

1. Menyediakan konektivitas yang lain mungkin mustahil
2. Mungkin memperluas pilihan untuk menawarkan yang kompetetif
3. Menyediakan titik isolasi antara 2 (dua) systen sangat independen
4. Memungkinkan interkoneksi system warisan dengan produk yang lebih baru

Keterbatasan Gateway :

1. Terbatas kapasitas dan Upgrade
2. Kemampuan terbatas untuk menerjemahkan konsep-konsep yang berbeda
3. Konfigurasi dan pemograman perangkat melalui gateway umumnya tidak mungkin
4. Kegagalan mengakibatkan hilangnya komunikasi antara semua perangkat pada sisi berlawanan dari pintu gerbang
5. Mungkin waktu keterbatasan atau kembali data - cache yang sudah tua
6. Lebuh sulit untuk memecahkan masalah

Router adalah perangkat network yang digunakan untuk menghubungkan beberapa network, baik network yang sama maupun berbeda dari segi teknologinya seperti menghubungkan network yang menggunakan topologi Bus, Star dan Ring.  Router minimal memiliki 2 network interface. Dalam postingan sebelumnya tentang mengenal teknik subneting telah disinggung bahwa koneksi antar network (jaringan dengan subnet IP yang berbeda) hanya bisa terjadi dengan bantuan Router.

Manfaat Router :

1. Router membatasi collision domain
2. Router dapat berfungsi pada LAN dan WAN
3. Router dapat menghubungkan berbagai media dan arsitektur
4. Router dapat determine jalur terbaik/rute untuk data supaya mencapai tujuan
5. Router dapat menyaring siaran

Kerugian dari Router :

1. Lebih mahal dari HUB, bridge dan switch
2. Router hanya bekerja dengan protocol routable
3. Routing update mengkonsumsi bandwidth
4. Meningkatkan Latency karena tingkat lebih benar dari paket penyaringan

Syarat Segmen Client Jaringan

Edisi lembur, dari pada ngeGalau, mending menulis sesuatu yang bermanfaat
Ok langsung saja Syarat Segmen Client Jaringan :

IP : Alamat Komputer
Segmen : Pembagian IP pada jaringan yang ditentukan oleh administrator
Segmentasi Jaringan : Pembagian segmen jaringan untuk meningkatkan performa dari sebuah jaringan komputer

Syarat segmen client jaringan :

• Komputer Server
• Komputer Workstation
• Kabel Coaxial

OK sekian, jika ada kekurangan syarat-syarat diatas mohon komen ya sob ^_^

Cara Menggunakan Font Awesome

Font Awesome memberikan anda kemudahan dalam menggunakan icon website dalam bentuk vector. Font Awesome selayaknya penggunaan font face pada umumnya yang dapat dengan mudah di customized dengan berbagai style css seperti size, color, drop shadow dan lain-lain.

Saat artikel ini saya tulis, versi font awesome adalah 4.0.3 dengan jumlah koleksi icon ada 369 icon dan akan terus dikembangkan dengan menambah koleksi iconnya. Penasaran yah seperti apa font awesome itu? Lihat demonya di sini: http://arlinadesign.blogspot.com/p/font-awesome.html

Apa saja sih kelebihan dalam menggunakan font awesome ini?

• Dalam satu file font terdiri 369 icon.
• Gratis digunakan untuk keperluan komersial.
• Compatible dengan Bootstrap 3.0.0.
• Tidak perlu menggunakan javascript.
• Sangat mudah diberikan style CSS.
• Selalu akan terlihat baik dalam berbagai ukuran font.

Cara penggunaannya adalah sebagai berikut:

1. Download font awesome disini
http://fontawesome.io/

2. Silahkan extract file yang sudah di download. Kemudian open file fontawesome.html di dreamweaver. Untuk menggunakannya anda hanya perlu menulis tag dan classnya untuk setiap icon.

Lihat website resminya disini http://fontawesome.io/

Masalah Software Hardware

Memilah masalah berdasarkan kelompok

• Hardware
  - Kerusakan komponen didalam unit system PC
  - Masalah Konektifitas
  - Memory tidak cukup
  - Power Supply
  - Casing tidak bisa menaggung tambahan periferal internal
  - Resolusi maksimal VGA card tidak sama dengan monitornya
• Software
  - Driver tidak compatible dengan jenis periferalnya
  - Adanya kesalahan pemakaian yang tidak sesuai dengan lingkungan kerja yang disyaratkan
    (ex : temperatur ruangan)
  - Adanya kesalahan pengoperasian software
    (ex : penggunaan kertas yang melebihi ketebalan maksimum yang disyaratkan pada printer)
    atau software
    (ex : melakukan cd burning sementara ada aplikasi di latar belakang yang sedang running juga tidak sesuai dengan user manual
  - Karena Virus, batas licensi software, dll.

Sekian semoga bermanfaat bagi sobat....

Tabel Teknologi WAN

LINE TYPE	SIGNAL STANDARD	BIT RATE CAPACITY
56	DS 0	56 Kbps
64	DS 0	64 Kbps
T1	DS 1	1.544 Mbps
E1	2M	2048 Mbps
E3	M3	34.064 Mbps
J1	Y1	2.048 Mbps
T3	DS 3	44.736 Mbps
OC-1	SONET	51.84 Mbps
OC-3	SONET	155.54 Mbps
OC-9	SONET	466.56 Mbps
OC-12	SONET	622.08 Mbps
OC-18	SONET	933.12 Mbps
OC-24	SONET	1244.16 Mbps
OC-36	SONET	1866.24 Mbps
OC-48	SONET	2488.31 Mbps