Blog Pintasku: 2015

Mengenal Pengertian Dan Sejarah MySQL

Sebelumnya kita pernah Mengenal Apa itu PHP ? nahh untuk menjalankan program PHP itu memerlukan MySQL dan Apache, tapi untuk postingan kali ini saya akan menjelaskan Mengenal Pengertian MySQL ? Oke sekarang simak penjelasannya berikut ini.

Pengertian MySQL

MySQL adalah sebuah software (perangkat lunak) sistem manajemen basis data SQL atau DBMS yang bersifat open source dan sangat populer saat ini. MySQL juga memiliki beberapa fitur seperti multithreaded dan multi-user. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

Sejarah MySQL

Michael Widenius (a.k.a. Monty)

MySQL pertama kali ditemukan oleh Michael Widenius (a.k.a. Monty) pada tahun 1979 di Swedia. Michael Widenius (a.k.a. Monty) adalah seorang programer dari sebuah perusahaan bernama TcX di Swedia. Pada saat itu Monty sedang mengembangkan sebuah sistem database sederhana yang dinamakan UNIREG. UNIREG ini menggunakan koneksi low-level ISAM database engine dengan indexing (baca : sistem database sederhana yang mendukung index).

Pada tahun 1994 perusahaan TcX tersebut sedang mengembangkan aplikasi berbasis web, dan berencana menggunakan UNIREG sebagai sistem databasenya. Tetapi TcX menganggap kalau UNIREG tidak cocok untuk database yang dinamis seperti web, oleh karena itu UNIREG ditolak oleh TcX.

TcX mencoba mencari alternatif sistem database lainnya, salah satunya adalah mSQL (miniSQL), sebuah RDBMS yang tidak terlalu mahal dan hampir open source, maksudnya jika anda membeli aplikasi ini, anda juga akan mendapatkan source code nya juga. Namun mSQL versi 1 ini juga memiliki kekurangan, yaitu tidak mendukung indexing, sehingga performanya tidak terlalu bagus.

Dengan hasutan petinggi-petinggi TcX, Monty mencoba menghubungi David Hughes (programmer yang mengembangkan mSQL) untuk menanyakan apakah ia tertarik mengembangkan sebuah konektor di mSQL yang dapat dihubungkan dengan UNIREG ISAM sehingga mendukung indexing. Pada saat itu Hughes menolak, dengan alasan sedang mengembangkan teknologi indexing yang independen untuk mSQL versi 2.

Dikarenakan penolakan David Hughes, TcX (dan juga Monty) akhirnya memutuskan untuk merancang dan mengembangkan sendiri konsep sistem database baru. Sistem ini merupakan gabungan dari UNIREG dan mSQL (yang source codenya dapat bebas digunakan). Sehingga pada May 1995, sebuah RDBMS baru, yang dinamakan MySQL dirilis.

David Axmark dari Detron HB, rekanan TcX mengusulkan agar MySQL di ‘jual’ dengan model bisnis baru. Ia mengusulkan agar MySQL dikembangkan dan dirilis dengan gratis. Pendapatan perusahaan selanjutnya di dapat dari menjual jasa “support” untuk perusahaan yang ingin mengimplementasikan MySQL. Konsep bisnis yang juga diterapkan perusahaan-perusahaan Open Source lainnya.

Asal Mula Nama dan Logo MySQL

Asal penamaan MySQL sendiri agak unik. Monty berkata :

It is not perfectly clear where the name MySQL derives from. TcX’s base directory and a large amount of their libraries and tools have had the prefix ‘My’ for well over ten years. However, my daughter (some years younger) is also named My. So which of the two gave its name to MySQL is still a mystery.

Berbagai sumber menyatakan, bahkan juga di situs MySQL sendiri bahwa “My” dari MySQL berasal dari nama anak perempuan Monty. Namun seperti kutipan diatas, Monty pun mengakui bahwa selama ia di TcX, library dan aplikasi yang dikembangkan perusahaan itu juga banyak dimulai dengan awalan “My”.

MySQL Logo

Sedangkan Logo lumba-lumba dalam lambang MySQL di namai Sakila, yang berasal dari sebuah kontest “Name the Doplhin” yang diadakan MySQL AB. Nama Sakila ini diajukan oleh Ambrose Twebaze, seorang programmer open source dari Swaziland, Afrika. ‘Sakila‘ memiliki akar dari bahasa Siswati, bahasa yang digunakan di Swaziland.

Source :

http://dev.mysql.com/doc/refman/5.0/en/history.html
http://docstore.mik.ua/orelly/weblinux2/mysql/ch01_02.htm
http://buytaert.net/the-history-of-mysql-ab
http://monty-says.blogspot.com/2009/12/help-saving-mysql.html

Menyembukan Sidebar Di Halaman Tertentu Pada Blogger

Menyembukan Sidebar Di Halaman Tertentu Pada Blogger - Terkadang kita ingin bisa menyembunyikan sidebar di halaman tertentu dan membuat halaman tersebut menuliki lebar maxsimal seperti ukuran lebar template blog. Tenang, untuk kali ini Blog Pintasku akan memberikan tutorial untuk menyembunyikan sidebar tersebut, silahkan simak tutorialnya berikut ini.

Menghilangkan sidebar di halaman terntentu di blogger itu sangatlah mudah, sobat hanya perlu mencari selector css pada tag sidebar lalu meletakannya di dalam tag kondisonal blogger .

Mencari Selector Sidebar

Karena setiap template yang digunakan itu pastinya berbeda - beda jadi kita harus mengetahui selector yang digunakannya. biasanya yang berbeda itu dari nama id. Untuk mecari selector sidebarnya kita bisa menggunakan fitur Inspect Element yang ada pada browser, umumnya sih browser modern pasti memiliki fitur ini, tetapi saya sarankan sobat menggunakan browser mozilla. dan google chrome. Oke sekarang ikuti instruksi berikut ini,

Buka blog sobat
Jika sudah tampil blognya sekarang kita klik kanan, lalu pilih Inspect Element, maka akan muncul bar seperti pada gambar.
Jangan lupa kita harus mencari terlebih dahulu, tag sidebarnya, biasanya terletak di dalam tag <div id='content-wrapper'>

Nahh kita sudah mendapatkan selector CSSnya, sekarang kita masuk ke tutorial selanjutnya.

Menyembukan Sidebar Di Halaman Tertentu Pada Blogger

Oke sekarang kita sudah mendapatkan selector sidebar, sekarang kita terapkan di blogger cara menyembunyikan sidebar tersebut.

Langkah 1 : Masuk menu Templates > Edit HTML

Langkah 2 : Sekarang letakan kode berikut ini tepat di atas tag </head>

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#sidebar-wrapper {display:none;}

#main-wrapper {width:100%;}
</b:if>
</style>

Keterangan :
Tulisan yang berwarna merah adalah tag kondisonal blogger, sobat bisa menggantinya sesuai dengan kebutuhan sobat. Untuk melihat daftar tag kondisonal blogger, silahkan baca artikel saya mengenai

Mengenal Tag Kondisonal Di Blogger

Sedangkan Tulisan yang berwarna biru adalah kode css untuk isi halaman, jadi disana adalah kode css untuk melebarkan isi halaman tersebut. Dan semua selectornya bisa di ganti sesuai dengan selector yang digunakan pada template blog sobat.

Sekian Tutorial Cara Menyembukan Sidebar Di Halaman Tertentu Pada Blogger, semoga tutorial ini bisa membantu dan bermanffat untuk semuanya. Terimakasih

Membuat Widget Ricent Post Slider Responsive Di Blogger

Membuat Widget Ricent Post Slider Responsive Di Blogger - Sebelumnya Blog Pintasku pernah memberikan Tutorial Membuat Ricent Post Slider Rotator Di Blogger, nahh untuk postingan kali ini kita akan belajar cara membuat widget ricent post slider juga, tetapi untuk yang satu ini berbeda, karena memiliki desain yang lebih elegan dan Responsive.

Ricent Post artinya postingan terbaru, jadi slider ini nantinya akan menampilkan postingan terbaru dari blog sobat dengan efek slider. Widget ini menurut saya bagus untuk di tampilkan di halaman Home Page blog sobat, apalagi jika template blog sobat sudah responsive, maka widget ini juga cocok untuk blog sobat. Oke langsung saja ke tutorialnya berikut ini, tapi sebelum mengikuti tutorialnya silahkan lihat dulu tampilan slidernya, klik tombol demo untuk melihat tampilan widget ricent post slider responsive.

Demo Widget

Membuat Widget Ricent Post Slider Responsive Di Blogger

Langkah 1 : Masuk ke menu Templates > Edit HTML
Langkah 2 : Masukan kode CSS berikut ini, tepat di atas tag ]]></b:skin>

#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Langkah 3 : Sekarang kita letakan script berikut ini dan letakan di atas tag </body>

<script type="text/javascript" src="https://googledrive.com/host/0Bwx-LVTRaDmab21RLXU1RDZfZlE"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://pintasku.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Ganti tulisan url yang berwarna merah dengan url blog sobat.
Langkah 4 : Nahh sekarang kita hanya perlu menambahkan tag HTML berikut ini tepat di atas tag <div id='content-wrapper'>

<div id="featuredpost"></div>

Langkah 5 : Save dan lihat hasilnya

Sekian Tutorial Cara Membuat Widget Ricent Post Slider Responsive Di Blogger semoga tutorial di atas bisa membantu dan bermanfaat untuk semuanya. Terimakasih

Belajar Styling List Dengan CSS

Belajar Styling List Dengan CSS - Sebelumnya kita pernah mempelajari Tutorial Cara Membuat Daftar (List) dalam HTML, Nahh untuk sekarang kita akan belajar Bagaimana Cara Styling atau memanipulasi List / daftar menggunakan CSS, oke langsung saja simak tutorialnya berikut ini.

Pada umumnya Pada HTML sebuah daftar/list ini ada 2 jenis, yaitu :

Ordered List <ol> ( untuk membuat daftar / list menggunakan angka atau huruf )
Unordered List <ul> ( untuk membuat daftar / list menggunakan simbol )

Untuk lebih jelasnya silahkan baca saja pada tutorial :

Cara Membuat List / Daftar Pada HTML

Sedangkan untuk cara memanipulasinya itu kita bisa menggunakan sebuah property list-style-type dan list-style-image.

1. Property List Style Type

Property List Style Type memiliki 4 nilai (value), yaitu :

circle
square
upper-roman
lower-alpha

Berikut ini adalah contoh penggunaanya dalam HTML.

<!DOCTYPE html>
<html>
   <head>
        <title>Belajar Styling List Dengan CSS</title>
<style>
ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Nilai circle dan square untuk unordered lists:</p>
<ul class="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ul>

<ul class="b">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ul>

<p>Nilai upper-roman dan lower-alpha untuk ordered lists:</p>
<ol class="c">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ol>

<ol class="d">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ol>

</body>
</html>

2. Property List Style Image

Nilai (Value) untuk Property List Style Image itu menggunakan sebuah gambar, sesuai dengan nama propertynya, yaitu image.

Supaya bisa lebih mengerti, sekarang sobat buatlah sebuah folder baru, lalu sekarang kita buat halaman HTML dan CSS dengan kode berikut ini dan letakan di folder baru tersebut. Jangan lupa untuk menyimpan sebuah gambar pada folder tersebut.

<!DOCTYPE html>
<html>
   <head>
        <title>Belajar Styling List Dengan CSS</title>
<style>
ul {
    list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ul>

</body>
</html>

Nahh cukup sekian Tutorial Belajar Styling List Dengan CSS semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih

Cara Ampuh Menghilangkan Link Aktif Di Komentar Blogger

Kali ini Blog Pintasku akan memberikan Tutorial Menghilangkan Link Aktif Di Komentar Blogger, terkadang kita sebagai owner blog, suka terganggu oleh sebuah komentar spam. Maksud komentar spam disini adalah komentar sering terdapat sebuah link aktif, dan biasanya juga komentar yang di cantumkan juga adalah komentar yang tidak bermutu.

Sebagai owner blog pastinya kita tidak ingin blog kita itu di anggap sebagai blog spam, karena di dalam blog kita itu terdapat banyak komentar link aktif (Spammer). Oleh karena itu kita harus mengambil cara supaya blog kita terhindar dari komentar link aktif (Spammer).

Untuk menghilangkan link aktif pada komentar blogger, itu ada beberapa cara dan semua cara tersebut menggunakan Javascript, berikut ini Blog Pintasku akan membagikan 3 cara untuk menghilangkan link aktif di komentar blog, 2 dari cara tersebut kita memerlukan bantuan jQuery, Berikut ini tutorialnya

Menghilangkan Link Aktif Di Komentar Blogger Dengan jQuery

Pastikan sobat sudah Memasang jQuery Di Blog, jika belum silahkan copy script berikut ini dan letakan tepat di atas tag </head> pada blog sobat.

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

Jika sudah terpasang jQuery pada blog sobat, nahh sekarang kita hanya perlu menambahkan sebuah fungsi, berikut ini ada 2 fungsi yang akan saya share untuk Menghilangkan Link Aktif Di Komentar Blogger.

Script Pertama.

</script>
<script type='text/javascript'>
$(function() {
$('#comments p').find('a').remove(); });
</script>

Script Kedua

<script type='text/javascript'> jQuery(document).ready(function(){ jQuery("#comments p").find("a").replaceWith("<span> Dilarang menggunakan Link Aktif.</span>"); }); </script>

Menghilangkan Link Aktif Di Komentar Blogger Dengan Javascript

Nahh di atas kita menggunakan bantuan jQuery, sedangkan untuk cara ini kita menggunakan javascript saja tanpa menggunakan bantuan jQuery, berikut ini tutorialnya.

Copy script berikut ini dan letakan pada tag </body> atau pada tag </head>

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
            content[i].className = "spammer-detected";
        }
    }
} 
blockLinks('comment-holder', 'p');
//]]>
</script>

Sekian Tutorial Cara Ampuh Menghilangkan Link Aktif Di Komentar Blogger semoga tutorial ini bisa bermanfaat dan bisa membantu untuk semuanya. Terimakasih telah membaca

Tag Colgroup Dan Tag Col Dalam Tabel HTML

Mengenal Tag Colgroup Dalam Tabel HTML - Nahh satu lagi tag yang akan kita pelajari di dalam Membuat Tabel Dalam HTML, yaitu tag colgroup dan tag col. Dimana fungsi dari tag colgroup dan tag col ini adalah untuk menghubungkan atau mengaitkan keseluruhan kolom dalam tabel.

Misalnya jika kita ingin memanipulasi tabel dalam HTML, tetapi pada seluruh kolom pertama dan ketiga dari tabel. kita bisa menggunakan tag colgroup dan tag col. Jika di dalam CSS kita bisa memanipulasinya dengan menambahkan atribut class di dalam bagian tr, maka seluruh baris tersebut akan berubah.

Supaya bisa lebih mengerti silahkan perhatikan contoh penggunaan tag colgroup dan tag col dalam tabel HTML, berikut ini.

<!DOCTYPE html>
<html>
   <head>
        <title>Penggunaan tag colgroup dan col dalam Tabel</title>
   </head>
<body>
<h3>Belajar Tag colgroup dan col dalam Tabel</h3>
<table border="1">
    <colgroup>
        <col style="background-color:yellow" />
        <col style="background-color:green" />
        <col />
    </colgroup>
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr style="color:blue">
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Mengenal Tag thead, tfoot dan tbody dalam Tabel HTML

Sebelumnya kita pernah belajar Cara Membuat Tabel Dalam HTML, untuk membuat tabel itu pada dasarnya hanya diperlukan 3 tag saja, yaitu : tag table, tag tr, dan tag td. Nahh sedangkan untuk membuat sebuah tabel yang lebih spesifik atau lebih detail di dalam HTML itu menyediakan tag lain yaitu tag thead, tfoot dan tbody, dimana fungsi tag tersebut adalah untuk membuat bagian bagian tabel, atau lebih tepatnya layout tabel, misalnya kita bisa memisahkan antara kolom tabel header dengan kolom tabel isi dan kolom tabel footer.

Apa manfaat menggunakan tag thead, tfoot dan tbody itu ? Untuk mempermudah kita di dalam pengeditan tabel apalagi kalo kita membuat tabel dengan jumlah kolom banyak dan kita menggunakan 3 tag dasar saja itu sangat memusingkan kita jika kita ingin mengedit tabel tersebut, nahh dengan menggunakan tag thead, tfoot dan tbody kita bisa lebih mudah mengedit antara bagian heading, isi, dan footer.

Supaya bisa lebih mengerti dalam penggunan tag thead, tfoot dan tbody, perhatikan contoh kode berikut ini.

<!DOCTYPE html>
<html>
   <head>
      <title>Penggunaan Tag thead, tfoot dan tbody dalam Tabel</title>
   </head>
<body>
<h3>Belajar Tag thead, tfoot dan tbody dalam Tabel</h3>
<table border="1">
    <thead>
        <tr>
          <th>Judul 1</th>
          <th>Judul 2</th>
          <th>Judul 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
          <td>Baris 1, Kolom 1</td>
          <td>Baris 1, Kolom 2</td>
          <td>Baris 1, Kolom 3</td>
        </tr>
        <tr>
           <td>Baris 2, Kolom 1</td>
           <td>Baris 2, Kolom 2</td>
           <td>Baris 2, Kolom 3</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Nahh pada contoh di atas, kita bisa melihat dengan jelas antara bagian table heading, table body dan table footer. Memang jika kita ingin membuat sebuah tabel, tag ini tidak terlalu diperlukan tetapi jika kita membuat tabel dengan jumlah kolom yang banyak kita sebaiknya menggunakan tag thead, tfoot dan tbody.

Sekian Tutorial Mengenal Tag thead, tfoot dan tbody dalam Tabel HTML semoga tutorial ini bisa bermanfaat dan bisa membantu sobat dalam belajar HTML. Terimakasih

Menganal Tag Caption Dalam Tabel HTML

Sebelumnya kita pernah Menganal Tag Th <th> Dalam Tabel HTML, yang memiliki kegunaan untuk membuat judul kolom dalam tabel html, nahh untuk sekarang kita akan mengenal satu tag lagi, yaitu tag caption, dimana tag caption ini berfungsi untuk membuat judul atau keterangan tabel html.

Meskipun tag caption ini jarang digunakan, tetapi tag ini sangat bermanfaat, apalagi kalo kita membuat banyak tabel di dalam 1 buah artikel, tag ini sangat perlu digunakan jadi kita bisa membuat keterangan atau judul pada setiap tabel yang ada.

Bagaimana cara menggunakan tag caption ? Untuk menggunakan tag caption, sobat hanya perlu menambahkan tag ini sesudah tag pembuka tabel <table> atau bisa juga sebelum tag penutup tabel </table>. Jika dari segi tampilan, tag ini akan di tampilkan pada bagian atas tabel atau sebelum tabel.

Supaya bisa lebih mengerti, berikut ini adalah contoh penggunaan tag caption dalam tabel html.

<!DOCTYPE html>
<html>
    <head>
        <title>Cara Penulisan Tag th dalam Tabel HTML</title>
    </head>
<body>
<h2>Mengenal Tag th untuk Tabel HTML</h2>
<table border="1">
<caption>ini adalah tag caption</caption>
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>

ini contoh penggunaan tag caption dalam tabel HTML

Mengenal Tag th (Table Header) dalam Tabel HTML

Mengenal Tag th (Table Header) dalam Tabel HTML - Sering kali ketika kita membuat sebuah tabel, kita selalu membuat pada baris pertama tabel, digunakan sebagai untuk membuat judul, nahh di dalam HTML untuk membuat judul kolom dalam tabel html itu memerlukan sebuah tag, yaitu tag <th>.

Jika di dalam segi tampilan, tag <th> ini sering dibedakan dengan tag lainnya, yaitu dengan diberikan style CSS, baik itu dari warna background, warna tulisan ataupun font dan secara default tag ini akan ditampilkan lebih mencolok dari tag lainnya. Bagaimana cara menggunakan tag <th> ini ? untuk menggunakan tag <th> ini sobat hanya perlu mengganti mengganti tag td dengan th pada baris pertama tabel.

Supaya bisa lebih mengerti, dibawah ini adalah contoh kode Tabel HTML, yang menggunakan Tag th.

<!DOCTYPE html>
<html>
    <head>
        <title>Cara Penulisan Tag th dalam Tabel HTML</title>
    </head>
<body>
<h2>Belajar Tag th untuk Tabel HTML</h2>
<table border="1">
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>

contoh penggunaan tag th dalam tabel HTML

Cara Menambahkan Widget SoundCloud Di Blogger

Mungkin sobat sudah tidak asing lagi mendengar kata "soundcloud", tapi mungkin juga ada sebagian reader yang belum tau, atau baru tau. nahh pada tutorial kali ini saya akan memberikan tutorial Cara Menambahkan Widget Soundcloud Di Blogger. Widget Soundcloud disini berfungsi untuk Menambahkan Musik Di Blogger. Oke sebelum masuk ke tutorial saya akan jelaskan secara singkat mengenai soundcloud.

Apa itu Soundcloud ?

Soundcloud adalah sebuah situs yang memungkinkan kita untuk berbagi suara, (suara disini bisa di artikan dalam banyak hal) dalam format file mp3, dan bahkan kita juga bisa digunakan sebagai sarana distribusi, dan promosi dari rekaman suara.

Cara Menambahkan Widget SoundCloud Di Blogger

Langkah 1 : Masuk ke situs Soundcloud.com

Langkah 2 : Silahkan cari musik yang di inginkan oleh sobat, bisa menggunakan kolom pencarian.

SS- Menambahkan Widget SoundCloud Di Blogger - 1

Langkah 3 : Misalkan, saya mencari musik dari Skrillex, lalu klik tombol share.

SS- Menambahkan Widget SoundCloud Di Blogger - 2

Langkah 4 : Jika sudah di klik, maka akan muncul, pop up seperti di bawah ini, lalu pilih "Embed".

SS- Menambahkan Widget SoundCloud Di Blogger - 4

Langkah 5 : Jika sobat ingin mengatur ukuran widget silahkan edit kode yang di atas, lalu cari atribut height

Langkah 6 : Sedangkan jika ingin membuat musik autoplay silahkan scroll kebawah cari tulisan "More Option" dan centang tulisan "autoplay"

Cara Memasukan Widget Soundcloud Di Blogger

Jika sudah mendapatkan kodenya kita sekarang langsung menuju blogger untuk menambahkan widget soundclod tersebut.

Masuk ke menu Layout (Tata Letak)
klik "add widgets" Lalu pilih HTML/Javascript
Sekarang masukan kode widget soundclod tersebut pada kolom yang disediakan.
Save, dan sekarang lihat hasilnya.

Sekian Tutorial Cara Menambahkan Widget SoundCloud Di Blogger semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih

Mengenal Apa Itu PHP ( Hypertext Preprocessor )

Mengenal Apa Itu PHP ( Hypertext Preprocessor ) - Sebelumnya kita pernah Belajar HTML dan CSS, nahh sekarang kita akan mempelajari Tutorial Belajar PHP, untuk perkenalan pertama kita sebaiknya mengetahui tentang Pengertian PHP atau lebih tepatnya Apa Itu PHP ? dan Apa Fungsi PHP ? Oke supaya tidak banyak cing cong kita langsung saja cekidot ke pembahasan berikut ini.

Pengertian Apa Itu PHP ( Hypertext Preprocessor )

PHP singkatan dari Hypertext Preprocessor, dimana maksud PHP sebeneranya adalah sebuah bahasa pemoraman script server-side yang didesain untuk pengembangan web, dan bisa juga digunakan secara bersamaan dengan HTML. PHP diciptakan pada tahun 1994 dan dikembangankan pada tahun 1995 oleh Ramus Lerdorf dan sekarang dikembangkan oleh The PHP Group, sobat bisa mengakses situs resmi PHP yang beralamat di www.php.net.

Pada awalnya PHP adalah singkatan dari "Personal Home Page", selanjutnya diganti menjadi FI ("Forms Interpreter"). Ketika versi ke 3.0 bahasa pemograman ini di ubah menjadi Hypertext Preprocessor dan memiliki sebutan PHP. Berdasarkan Survey Netcraft pada bulan Desember 1999, PHP sudah menjadi bahasa pemograman yang powerful dan tidak hanya digunakan untuk membuat halaman web sederhana, dan bahkan sekarang jutaan situs menggunakan bahasa pemograman PHP, beberapa situs terkenal yang menggunakan PHP adalah NASA, Wikimedia ( Software yang digunakan oleh Wikipedia), Wordpress, phpBB, dll.

PHP dapat digunakan secara gratis (free) dan bersifat Open Source. PHP dirilis dengan menggunakan lisensi "PHP License", sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasanya digunakan untuk proyek yang bersifat Open Source.

Keunggulan PHP Dengan Bahasa Pemograman Lainnya

Sangat Banyak Server-server website yang mendukung bahasa pemrograman PHP ini karena memiliki fungsi yang bagus.
Bahasa Pemrograman PHP dapat digunakan dengan mudah oleh setiap Web Developer dikarenakan script dan kode-kode Bahasa PHP ini sangat mudah dipahami.
PHP merupakan Bahasa Pemrograman yang tidak pernah dan tidak akan pernah melakukan sebuah kompilasi didalam penggunannya.
PHP adalah Bahasa Pemrograman Komputer yang sering dan memiliki banyak refrensi dari segala sumber.
Bahasa Pemrograman PHP Bersifat Sumber Terbuka yaitu dapat digunakan di segala jenis mesin Seperti Unix, Windows, Linux, DLL.
Bahasa Pemrograman PHP Dapat menjalankan sebuah ataupun beberapa perintah dari suatu sistem.
PHP dapat dijalankan dan digunakan secara runtime melalui sebuah konsol.

Karena dari keunggulan dan kepopulerannya, sekarang PHP sudah menjadi standar bagi programmer web di seluruh dunia. Menurut wikipedia pada bulan februari 2014, sekitar 82% dari web server di dunia menggunakan PHP. PHP juga menjadi dasar dari aplikasi CMS (Content Management System) populer seperti Joomla, Drupal, dan WordPress.

Berdasarkan overview dari situs w3techs.com pada tanggal 30 Mei 2015 penggunaan bahasa pemograman server-side yang sering digunakan adalah PHP, perhatikan diagram berikut ini.

Pada diagram di atas, terlihat bahwa bahasa pemograman PHP digunakan oleh 81.9% dari seluruh websites yang menggunakan bahasa pemograman server-side.

Cukup sekian penjelasan singkat mengenai Mengenal Apa Itu PHP ( Hypertext Preprocessor ), semoga penjelasan di atas bisa membantu dan bermaaat untuk semuanya, terutama untuk sobat yang ingin Belajar Pemograman PHP. Terimakasih

Membuat Tombol Back To Top Efek Bounce Di Blogger

Cara Membuat Tombol Back To Top Di Blogger_Cover_Pintasku

Sebelumnya kita pernah mempelajari Cara Membuat Tombol Back To Top Di Blogger, nahh untuk Tutorial kali ini juga masih sama seputar cara membuat tombol back to top tetapi untuk kali ini Blog Pintasku akan memberikan tutorial Membuat Tombol Back To Top Efek Bounce Di Blogger.

Efek Bounce disini maksudnya adalah efek bola memantul, Mungkin dulu sobat pernah mengenal sebuah game dari handphone jaman dahulu, yaitu game Bounce, dimana game tersebut ada sebuah bola memantul, nahh bola yang memantul itu disebut Bounce. Oke sekarang kita langsung saja masuk ke tutorialnya berikut ini.

Membuat Tombol Back To Top Efek Bounce Di Blogger

Pastikan pada template blog sobat sudah Memasang jQuery, jika belum silahkan copy kode berikut ini dan letakan tepat di atas tag </head>.

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

Nahh sekarang kita Copy script berikut ini dan letakan tepat di atas tag </head>

<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } }); $(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script>

Sekarang kita cari tag ]]></b:skin>, lalu kita copy kode CSS berikut ini dan letakan tepat di atas tag ]]></b:skin>.

#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;} #BounceToTop:hover {background:#2a3542;} #BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;} #BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;} #BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}

Lalu sekarang kita letakan kode HTML berikut ini dan letakan tepat di atas tag </body>

<style type='text/css' scoped='scoped'> #BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id="BounceToTop" style="display: block;"></div>

Save Templates, dan sekarang lihat hasilnya.

Sekian Tutorial Membuat Tombol Back To Top Efek Bounce Di Blogger, semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih

Mengenal Atribut Rowspan dan Colspan Dalam Tabel HTML

Sebelumnya kita sudah Mengenal Atribut border, cellpadding, dan cellspacing dalam HTML, nahh untuk kesempatan kali ini kita akan mengenal lagi beberapa atribut dalam HTML, yaitu atribut rowspan dan colspan. Oke langsung simak berikut ini tutorialnya.

Mengenal Atribut Rowspan dan Colspan Dalam Tabel HTML

Fungsi atau kegunaan dari kedua ini, adalah untuk menyatukan, tabel, tapi tiap atribut ini memiliki fungsi tersendiri, yaitu

Atribut rowspan berfungsi untuk menggabungkan antar baris kolom dalam tabel html.
Atribut colspan berfungsi untuk menggabungkan antar kolom dalam tabel html

Supaya bisa lebih mengerti, langsung saja ke contoh penggunaannya, berikut ini.

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel</title>
</head>
<body>
<h1>Contoh atribut colspan dan rowspan </h1>
<table border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td rowspan="4">Baris 2, 3 & 4, Kolom 1</td>
        <td colspan="2" >Baris 2, Kolom 2 & 3</td>
    </tr>
    <tr>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Contoh Atribut Rowspan dan Colspan Dalam Tabel HTML

Fungsi dari atribut rowspan dan colspan ini sama halnya dengan fungsi merge cell yaitu menyatukan kolom dan baris dalam tabel

Atribut Border, Cell Padding, dan Cell Spacing Dalam Tabel HTML

Blog Pintasku kali ini akan melanjutkan kembali Tutorial Belajar HTML, dimana sebelumnya kita pernah belajar Cara Membuat Tabel Dalam HTML, nahh sekarang kita akan belajar mengenai Atribute Border, Cell Padding, dan Cell Spacing Dalam Tabel HTML. Oke langsung saja ke tutorialnya berikut ini.

1. Atribute Border Dalam Tabel HTML

Border adalah sebuah atribute, di dalam html, jika di dalam css border itu adalah sebuah property. Fungsi border ini adalah untuk membuat garis tepi. Nahh jika di dalam tabel html, atribut border ini digunakan untuk memberikan efek garis tepi pada tabel. Jika kita tidak menambahkan atribut border pada tabel, maka tabel akan di tampilkan tanpa garis tepi.

Nilai untuk atribut ini juga adalah berupa angka yang di ukur berdasarkan satuan pixel. misalnya, jika kita memberikan nilai 3 pada atribut border ini, maka nantinya tabel akan memiliki garis tepi dengan ukuran 3 pixel pada seluruh sisi tabel.

Contoh penggunaan atribut border dalam tabel html

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut border dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut border dalam Tabel</h3>
<table border="0">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
<br />
 
<table border="3">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Contoh Penggunaan Atribut border dalam tabel HTML

2. Atribute Cellpadding dalam tabel HTML

Padding adalah jarak, jika di dalam CSS nanti kita akan sering menemukan property padding, nahh sedangkan jika dalam tabel HTML, atribut cellpadding berarti untuk mengatur jarak kolom dalam tabel, antara kontent tabel dengan bagian sisi kolom tabel.

Sedangkan untuk nilai dari atribut ini sama halnya dengan atribut border yaitu menggunakan angka yang di ukur dengan satuan pixel.

Contoh Penggunaan atribut cellpadding dalam tabel HTML.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellpadding dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellpadding dalam Tabel</h3>
<table border="1" cellpadding="0">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
<br />
 
<table border="1" cellpadding="5">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>

3. Atribut cellspacing dalam tabel HTML

Nahh sekarang atribut cellspasing, atribut ini digunakan untuk mengatur jarak antara garis tepi dari bagian dalam dengan garis tepi yang dibagian luar. Nahh untuk nilainya juga sama seperti atribut sebelumnya.

Contoh penggunaan atribut cellspacing dalam tabel HTML

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut cellspacing dalam Tabel</title>
</head>
<body>
<h3>Belajar atribut cellspacing dalam Tabel</h3>
<table border="1" cellspacing="0">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
<br />
 
<table border="1" cellspacing="5">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Membuat Ricent Post Slider Rotator Di Blogger

Membuat Ricent Post Slider Sidebar Di Blogger- Pastinya sobat sudah tau, apa itu Ricent Post ? Ricent Post adalah Postingan Terbaru, Secara Default biasanya ricent post itu adanya di bagian homepage blog, ketika sobat selesai membuat artikel, maka artikel baru tersebut akan muncul di bagian homepage.

Nahhh bagi sobat yang ingin menampilkan artikel terbaru, di bagian manapun, baik itu sidebar ataupun footer, tetapi menurut saya tepat yang lebih pas itu diletakan pada bagian sidebar blog. Widget Ricent Post ini sudah di ditambahkan fitur slider, jadi ricent post ini nantinya akan berbentuk slider. Bagaimana cara menambahkan widget ricent post slider di blog ? Untuk menambahkan widget ini sobat hanya perlu mengikuti tutorial dibawah ini. Jika ingin melihat tampilan demonya silahkan tekan tombol dibawah ini.

Demo

Cara Menambahakan Ricent Post Slider Rotator Di Blogger

Tambahkan Plugin Jquery di blog, dengan caraMasuk menu Templates > Edit HTML
Letakan kode berikut ini tepat di atas tag </head>, jika pada template blog sobat sudah terpasang makan lewati saja cara ini.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Save Templates, lalu masuk ke menu Layout (Tata Letak)
Klik Add widget, lalu pilih, HTML/Javascript
Sekarang letakan kode berikut ini.

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0Bwx-LVTRaDmadG5uV3FfbWhLNWc"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="https://googledrive.com/host/0Bwx-LVTRaDmaRU9sTThmdENITms"></script>
<script type="text/javascript">
makeSlider({
    url: "http://pintasku.blogspot.com" // ganti alamat URL
});
</script>

Save, dan lihat hasilnya.

Sekian Tutorial Cara Pasang Widget Ricent Post Slider Rotator Di Blogger, semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih

Cara Membuat Tombol Back To Top Di Blogger

Tutorial kali ini Blog Pintasku akan memberikan tutorial Cara Membuat Tombol Back To Top Di Blogger, dengan menambahkan fitur tombol back to top itu memudahkan pengunjung untuk kembali ke bagian atas blog, jadi pengunjung tidak perlu repot- repot men-scroll.

Terkadang juga kita sebagai owner blog memerlukan fitur ini jika, membuka artikel yang panjang atau artikel yang memiliki komentar yang banyak kita harus men-down scrool ke bawah terus harus men-scrool kembali ke atas, itu sangatlah memerlukan waktu dan tenaga. Nahh untuk menambahkan tombol back to top itu sangatlah mudah, sobat hanya perlu mengikuti tutorialnya berikut ini.

Cara Menambahkan Tombol Back To Top Di Blogger

Masuk ke menu Templates > Edit HTML
Jika sudah masuk, sekarang tambahkan jquery pada blog sobat, dengan cara meletakan kode dibawah ini, tepat di atas tag </head>. Jika pada template blog sobat sudah dipasang maka jangan di tambahkan.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Sekarang, letakan kembali script dibawah ini dan letakan juga di bagian atas tag </head>.

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

Nahh sekarang kita letakan kode CSS berikut ini dan letakan tepat di atas kode ]]></b:skin>

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}

Lalu kita cari lagi tag </body> dan letakan kode berikut ini tepat di atas tag </body>

<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOaAbrKqOYOKJVjUTncV20-MqR2On3ygklx_OynJIWX2bs3f9NAY7oUxn-NQ8TL_W-16ekQx-f8MMUXxY84w_eewoo7pHO0ssHsWW-M6xMQ9Ei_2lk50tBLwFRwT7FvYYojK4d0RjFqw/s1600/backtotop.png'/></div>

Save dan lihat hasilnya.

Sekian Tutorial Cara Membuat Tombol Back To Top Di Blogger, semoga tutorial ini bisa bermanfaat dan bisa membantu semuanya, terimakasih.

Membuat Daftar Isi Blog Efek Tab Vertical Responsive

Sebelumnya Blog Pintasku sudah memberikan Tutorial Cara Membuat Daftar Isi Sederhana Di Blogger nahh kali ini juga masih akan memberikan tutorial membuat daftar isi di blog tetapi untuk kali ini tampilan daftar isinya di tampilkan dengan style menu tab vertical.

Memang tampilan ini di desain untuk mempermudah si users dalam menjelajahi isi artikel yang ada di dalam blog kita. Daftar Isi Blog ini juga responsive support di semua device. Jika sobat ingin melihat langsung tampilan Daftar Isi Blog Keren ini silahkan klik tombol dibawah ini.

Result

Oke jika sudah dilihat Daftar Isi Blog keren barusan, sekarang kita akan masuk ke tutorialnya berikut ini.

Cara Membuat Daftar Isi Blog Responsive Efek Tab Vertical

Untuk cara pemasangan Daftar Isi Blog Efek Tab Vertical Responsive ini sama halnya dengan cara sebelumnya pada tutorial :

Membuat Daftar Isi Blog Efek Tab Vertical Responsive

Yang berbeda hanyalah kodenya saja, silahkan letakan kode berikut ini pada laman di blogger sobat.

Jangan lupa letakan kode berikut pada bagian HTML bukan Compose

<style>
#tabbed-toc{margin:0 auto;background-color:#2C75F9;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333}
#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:white}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}
#tabbed-toc .toc-tabs{width:20%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#FFF;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#015AB2;color:white}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#015AB2;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #015AB2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#000000;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#E3EDFF}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:white;outline:none}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}
@media (max-width:700px){#tabbed-toc{border:2px solid #333}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4)}#tabbed-toc .toc-tabs li a.active-tab{background-color:white;color:#333}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://pintasku.blogspot.com.com/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://googledrive.com/host/0Bwx-LVTRaDmaNnpwTUtlSjhMME0"></script>

Keterangan : Ganti tulisan yang berwarna merah yaitu "http://pintasku.blogspot.com.com/" dengan URL blog sobat.

Cara Mengganti Warna Tampilan

Untuk merubah warna tampilan silahkan cari property background, dan property color untuk warna tulisan, dan berikut ini selector selector CSS yang dipakai.

Gambar Struktur CSS Daftar Isi Keren Responsive

Keterangan Selector CSS .

Selector : #tabbed-toc
Selector : #tabbed-toc .toc-tabs li a:hover
Selector : #tabbed-toc .toc-tabs li a.active-tab
Selector : #tabbed-toc .panel li:nth-child(even)
Selector : #tabbed-toc .toc-content, #tabbed-toc .divider-layer

Sekian Tutorial mengenai Cara Membuat Daftar Isi Blog Efek Tab Vertical Responsive, semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih

Cara Mudah Menambah Kolom Widget Di Atas Postingan Blog

Mungkin sobat merasa bingung karena jika sobat menggunakan template default dari blogger, itu tidak menyediakan kolom di atas postingan, nahh sekarang Blog Pintasku akan memberikan Tutorial Cara Menambah Kolom Widget Di Atas Postingan Blog. Dengan menambahkan kolom widget di atas postingan ini sobat bisa menambahkan hiasan atau fitur blog. Oke langsung saja ke tutorialnya berikut ini.

Menambah Kolom Widget Di Atas Postingan Blog

Untuk menambahkan kolom widget di dalam blogger, kita harus membuat struktur HTML dan Tag Blogger, ikuti tutorialnya dibawah ini.

Masuk ke menu Templates > Edit HTML
Jika sudah masuk, sekarang kita cari kode <div id='main-wrapper'>
Terus sekarang kita copy lalu letakan kode berikut ini tepat di atas <div id='main-wrapper'>

<b:section class='atas-posting' id='atas-posting' preferred='yes'/>

<div id='atas-posting'>
<b:section class='kolom-kiri' id='kolom-kiri/>
<b:section class='kolom-kanan' id='kolom-kiri'/>
</div>

Jika sudah diletakan, sekarang kita cari kode ]]></b:skin> untuk meletakan kode CSSnya
Lalu kita copy dan letakan kode berikut ini, dan letakan tepat di atas kode ]]></b:skin>

.atas-posting{width: 100%;padding:10px 0px 10px 10px;background:#fff;margin:0px 0px 10px 0px;text-align:left;}
.atas-posting .widget{}

#atas-posting h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#atas-posting{
width:600px; /*Sesuaikan ukuran kolomnya*/
}
#kolom-kiri{
width:295px; /*Ukuran Dari kolom Kiri*/
float:left;
margin:4px;
}
#kolom-kanan{
width:295px; /*Ukuran Dari kolom Kanan*/
float:right;
margin:4px;
}

Save templates dan lihat hasilnya

Oke sekian Tutorial Cara Mudah Menambah Kolom Widget Di Atas Postingan Blog, semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih

Mengenal Operator Dalam Javascript

Kesempatan kali ini Blog Pintasku akan membahas seputar Tutorial Belajar Javascript, sebelumnya saya pernah membuat artikel mengenai Mengenal Tipe Data Dalam Javascript, nahh untuk sekarang kita akan belajar tentang Operator Dalam Javascript.

Opertaor Di dalam Javascript itu terbagi menjadi 6 jenis, yaitu :

Operator Aritmatika (Integer)
Operator Assignment
Bitwise Operator
Logical Operator
String Operator

1. Operator Aritmatika

Operator Aritmatika atau bisa juga dibilang operator integer, seperti yang sudah kita kenal, adalah objek bilangan bulat. JavaScript juga mendukung operator standard aritmatika seperti penjumlahan (+), pengurangan (-), perkalian (*), pembagian (/) dam juga modulus atau sisa hasil bagi (%). Supaya bisa lebih mengerti perhatikan tabel berikut ini.

Operator	Definisi	Contoh	nilai y	nilai x (hasil)
+	Penambahan	x=y+2	5	7
-	Pengurangan	x= y-2	5	3
*	Pengkalian	x= y * 2	5	10
/	Pembagian	x= y / 2	5	2.5
%	Modulus	x= y % 2	5	1
++	Increment	x=++y	6	6
++	Increment	x=y++	6	5
--	Decrement	x=--y	4	4
--	Decrement	x=y--	4	5

Berikut ini adalah contohnya :

<script>
var jumlah = 5 + 2; // 7
var selisih = 5 - 2; // 3
var perkalian = 5 * 2; // 10
var pembagian = 6 / 2; // 3
var sisa = 5 % 2; // 1
</script>

1.2 Float

Pada dasarnya operator pada float dengan integer itu sama, karena keduanya merupakan jenis objek bilangan (Number). Tetapi yang perlu di perhatikan disini adalah jika kita menggunakana float bersamaan dengan operator integer pada satu operasi maka secara otomatis bilangan Integer akan di konversi menjadi Float. Berikut ini adalah contohnya .

var pecahan = 7.5 + 5; // 12.5

Yang menjadi aneh adalah jika hasil dari operasi di atas hasilnya bilangan bulat, maka operasi tersebut secara otomatis mengkonversinya menjadi bilangan bulat seperti pada contoh berikut ini.

var sama = 7.5 + 2.5; // 10

2. Operator Assignment

Sama halnya dengan bahasa pemograman lainnya, untuk memberikan nilai pada suatu variabel itu harus menggunakan tanda sama dengan (=). Operator Assignment (Pemberi nilai) adalah suatu operator binari yang digunakan untuk memberi nilai dari sisi kiri (biasanya berupa suatu variabel) yang didasarkan pada nilai dari sebelah kanan. Berikut ini adalah contohnya.

x = 10;

Pada contoh di atas x adalah sebuah variabel sedangkan tanda sama dengan (=) adalah operator, dan 10 adalah nilai dari variabel

Dibawah ini adalah tabel jenis - jenis operator assignment.

Operator	Keterangan	Penyingkatan	Contoh
=	Sama dengan	x = y	x = y
+=	ditambah sama dengan	x += y	x = x + y
-=	Dikurangi Sama Dengan	x -= y	x = x - y
/=	Dibagi Sama Dengan	x /= y	x = x / y
%=	Modulus Sama Dengan	x %= y	x = x % y

Contoh penggunaan :

<script>
var x = 10;
var y = 5;
x -= y
alert(x);
</script>

3. Bitwise Operator (Operator Perbandingan)

Bitwise Operator (Operator Perbandingan) hanya bisa di gunakan untuk perbandingan tipe data number dan tipe data string, sedangkan pada tipe data boolean itu tidak bisa. Perhatikan tabel berikut ini.

Operator	Keterangan	Contoh	Contoh Bolean
==	Sama dengan	x == y	True
!=	Tidak sama dengan	x != y	True
>	Lebih besar dari	x > y	False
<	Lebih kecil dari	x < y	True
>=	Lebih besas sama dengan	x >= y	False
<=	Lebih kecil sama dengan	x <= y	False

Contoh penggunaan Operator perbadingan dalam javascript :

<script>
var x = 4;
var y = 5; if(x < y){
 alert("x lebih besar dari y");
}
else if(x > y ) {
 alert("x lebih kecil dari y");
}
</script>

4. Logical Operator (Operator Logika)

Logical Operator (Operator Logika) digunakan untuk menentukan logika antara variabel atau nilai numerik lebih besar/lebih kecil dengan String ataupun sebaliknya. Hasil dari Logikal dapat menggunakan sebuah nilai Boolean, yaitu true / false. Perhatikan tabel berikut ini.

Logika

Keterangan
Contoh
Contoh Bolean
&&
And
x > 100 && y < 1
True
||
Or
x == 6 || y == 6
True
!
Not (! adalah suatu unary operator yang
mempertahankan nilai ekspresi.)
! (x == y)
True

Contoh penggunaan :

<script>
var x = 76;
 
if(x >= 80){
alert("Nilai = A");
 
}else if(x >= 70 && x < 80){
alert("Nilai = B");
 
}else if(x >= 60 && x < 70){
alert("Nilai = C");
 
}else{
alert("Nilai = D");
}
 
</script>

5. String Operator

Operator juga bisa digunakan untuk menambahakan variabel string atau tipe data string secara bersamaan. String memiliki beberapa operator, yaitu :

Operator Concatenation (penggabungan)
Operator konversi.

5.1 Operator Concatenation (penggabungan)

Operator Concatenation (penggabungan) adalah salah satu operator yang sering digunakan, karena Operator Concatenation (penggabungan) ini berguna untuk berguna untuk menggabungkan dua String objek menjadi satu. Berikut ini adalah contohnya.

var string1 = "penggabungan"; // String Pertama
var string2 = "string"; // String kedua
stringConcat = string1 + string2; // Menggabungkan string dengan (+)
document.write (stringConcat); // Menggabungan string

Perhatikan pada baris ke 3 terlihat "stringConcat = string1 + string2" dan disana kita menggunakan operator (+) untuk menggabungkan kedua string "string1 + string2". Sebelum penggabungan, kita memiliki dua string, yaitu "penggabungan" dan "string". Setelah penggabungan dengan operator (+), kita memanggil string tersebut dengan document.write (stringConcat);

Hati-hati di dalam menggunakan Operator Concatenation (penggabungan) pada String dan penjumlahan pada Integer. Berikut adalah contohnya.

var test = 2 + 4 + "9";
alert(test);

Jika kode di atas dijalankan maka hasilnya akan "69", Ko "69" ? karena di dalam javascript itu akan mengambil hasil dari Integer, yaitu (2 + 4 = 6 ) dan karena objek selanjutnya adalah String, maka hasil tersebut akan dirubah menjadi String dan dilakukan operasi concatenation dan hasilnya akan "69"

5.2 Operator Konversi

Sesuai dengan namanya konversi yaitu merubah, maka sudah jelas kegunaannya yaitu untuk merubah. Yang bisa dirubah oleh operator konversi ini yaitu :

parseInt, untuk mengubah string menjadi Integer
parseFloat, untuk mengubah string menjadi Float

5.2.1 parseInt

Fungsi parseFloat() ini adalah untuk merubah (mengkonversi) dari tipe data string ke tipe data numerik bilangan pecahan / floating.

<script>
stringFloat = "2.5"
holaa = 3 + parseFloat(stringInteger);
document.write(diTambah);
</script>

Jika kode di atas di jalankan maka variabel "holaa" mempunyai nilai 5, karena nilai pecahan dari (2.5) dibulatkan menjadi 2 maka jadinya "2+3= 5"

5.2.2 parseFloat

Fungsi parseFloat() adalah untuk merubah (mengkonversi) dari tipe data string ke tipe data numerik bilangan pecahan / floating. berikut contohnya.

<script >
stringFloat = "2.5"
diTambah = 3 + parseFloat(stringInteger);
document.write(diTambah);
</script>

Maka nilai variabel "diTambah" adalah "5,5" hasil dari "2.5+3=5.5"