Blog Pintasku: March 2015

Cara Membuat Internal Link Di HTML

Kali ini Blog Pintasku masih tetap membuat Tutorial Dasar HTML, tetapi untuk artikel kali ini dibuat untuk melanjutkan penjelasan dari artikel saya sebelumnya tentang Cara Membuat Link di HTML, oleh karena itu artikel yang berjudul Cara Membuat Internal Link Di HTML ini dibuat.

Mungkin sebagian sobat readers disini sudah sering mendengar istilah Internal Link, tapi apakah sobat mengerti Apa itu Internal Link ? dan Bagaimana Cara Membuat Internal Link ? Oke sebelum masuk ke pembahasan saya sarankan untuk membaca beberapa artikel tentang Dasar HTML.

Internal Link adalah sebuah link yang menuju ke bagian lain yang berada di dokumen atau halama web.

Cara Membuat Internal Link

Untuk membuat sebuah di HTML itu sama saja dengan menggunakan tag <a> tetapi dengan atribut berbeda. Pada artikel saya sebelumnya saya menggunakan atribut hrep dengan target itu untuk Eksternal Link, sedangkan untuk Internal Link kita menggunakan Tag id.

Apa itu Atribut id ?

Atribut id adalah sebuah atribut yang bisa digunakan atau di kombinasikan dengan semua tag, kalo secara sederhananya atribut id itu sama dengan "identitas" sebuah tag. Atribut id biasanya digunakan untuk mengkobinasikan dengan CSS ataupun Javascript. Oleh karena itu atribut id ini sering ditemukan pada setiap halaman web jadi Mengenal Atribut id ini sangatlah penting karena termasuk dari Dasar Pemograman Web.

Oke supaya bisa lebih mudah di mengerti silahkan sobat perhatikan contoh penggunaan atribut id berikut ini.

<!DOCTYPE html>
<html>
<head>
<title>Dasar HTML Blog Pintasku</title>
</head>
<body>
<h3 id="judul1">Penggunaan atribut ID</h3>
<a href="#paragraf1">Pengertian HTML</a>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#judul1">Kembali ke judul</a>
<br />
<p id="paragraf1">HTML adalah singkatan dari Hypertext Markup Language. 
Disebut hypertext karena di dalam HTML sebuah text biasa dapat 
berfungsi lain, kita dapat membuatnya menjadi link yang dapat 
berpindah dari satu halaman ke halaman lainnya dengan 
hanya meng-klik text tersebut.</p>
</body>
</html>

Keterangan : Pada contoh di atas saya menggunakan atribut id pada tag , tag heading dan tag <a>.

Kenapa saya mengunakan banyak tag atau baris ? karena untuk membuat halaman web menjadi panjang dan nantinya akan terlihat efeknya dari penggunaan atribut id.

Nahh sekian penjelasan dari Blog Pintasku mengenai Cara Membuat Internal Link Di HTML semoga artikel Tutorial Dasar HTML ini bisa bermanfaat dan membantu untuk semuanya. Terimakasih

Cara Membuat List / Daftar Pada HTML

Pada kesempatan kali ini Blog Pintasku masih membahas seputar Tutorial Dasar HTML. Sebelumnya saya pernah membuat Tutorial Cara Membuat Tulisan Tebal dan Miring Di HTML, nahh sekarang saya akan memberikan Tutorial Cara Membuat Daftar (List) Di HTML.

Membuat sebuah daftar atau List itu memang sering digunakan oleh kita, terlebih jika kita suka membuat Tutorial, dimana kita menggunakan Daftar bernomor untuk mengurutkan langkah langkah dalam sebuah tutorial. Nahh sedangkan pada sebuah Dokumen HTML kita harus menggunakan beberapa Tag Khusus untuk bisa Membuat sebuah daftar atau List baik itu dengan menggunakan nomor maupun simbol. Oke kita langsung saja masuk ke Tutorialnya dibawah ini.

Cara Membuat List / Daftar Di HTML

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

Ordered List
Unordered List
Defenition List (Description List)

1. Ordered List

Ordered List atau bisa diartikan secara sederhana adalah "berurutan" biasanya untuk membuat sebuah daftar yang berurutan itu menggunakan sebuah angka atau hurup. sedangkan untuk penulisannya di dalam HTML ordered list menggunakan Tag <ol> sedangkan tag untuk membuat listnya itu menggunakan tag <li>. Supaya bisa lebih gampang dimengerti silahkan perhatikan contoh kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Daftar </title>
</head>
<body>
  <h1>Daftar Murid</h1>
  <ol>
  <li>Andi</li>
    <li>Amir</li>
    <li>Budi</li>
    <li>Dono</li>
    <li>Udin</li>
  </ol>
</body>
</html>

Hasilnya :

2. Unordered List

Unordered List adalah kebalikannya dari Ondered List yang artinya "Tidak berurutan". Unordered List biasanya menggunakan sebuah simbol baik itu bulatan maupun kotak. Untuk membuat Unordered List di HTML itu hanya perlu merubah tag <ol> menjadi <ul>.

Perhatikan contoh kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Daftar </title>
</head>
<body>
  <h1>Daftar Murid</h1>
  <ul>
  <li>Andi</li>
    <li>Amir</li>
    <li>Budi</li>
    <li>Dono</li>
    <li>Udin</li>
  </ul>
</body>
</html>

Hasilnya :

3. Defenition List

Defenition List biasanya digunakan untuk membuat sebuah daftar definisi atau daftar penjelasan. Penggunaan List ini memang sangatlah jarang, berbeda dengan jenis Ondered List dan Unordered List. Sedangkan Cara Membuat Defenition List itu menggunakan Tag <dl> sedangkan untuk judul deskripsi menggunakan tag <dt> dan untuk penjelasan atau deskripsi menggunakan tag <dd>.

Supaya bisa lebih gampang dimengerti perhatikan Contoh kode berikut ini.

<!DOCTYPE html>
<html>
<head>
<title>Membuat Daftar</title>
</head>
<body> 
<dl>
<dt>Ordered List</dt>
<dd>Digunakan untuk membuat daftar beraturan.</dd>
<dt>Unordered List</dt>
<dd>Digunakan untuk membuat daftar secara tidak beraturan.</dd>
<dt>Defenition List</dt>
<dd>Digunakan untuk menjelaskan sebuah keterangan atau deskripsi.</dd>
</dl>
</body>
</html>

Hasilnya :

Sekian Penjelasan dari saya mengenai Cara Membuat List / Daftar Pada HTML semoga tutorial ini bisa bermanfaat untuk semuanya. Mungkin artikel selanjutnya saya masih membahas tentang Tutorial Dasar HTML untuk itu tetap kunjungi Blog Pintasku

Cara Membuat Tulisan Tebal dan Miring di HTML

Kali ini Blog Pintasku masih membahas tentang Tutorial Dasar HTML, sebelumnya mengenai Dasar HTML saya pernah membuat Tutorial :

nahh sekarang saya akan membahas Bagaimana Cara Membuat Tulisan Tebal Dan Miring di HTML ? Oke langsung saja simak berikut ini.

Cara Membuat Tulisan Tebal dan Miring di HTML

Untuk membuat tulisan Tebal dan Miring di HTML itu memerlukan sebuah Tag Khusus, yaitu :

Tulisan Tebal : tag atau tag
Tulisan Miring : tag atau tag

Oke supaya bisa lebih gampang mengerti silahkan sobat perhatikan Contoh Struktur kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Tulisan Tebal dan Miring</title>
</head>
<body>
  <p>Admin dari <strong>Blog Pintasku</strong> itu <strong>Ganteng</strong>, 
  Tetapi otaknya itu <em>Miring</em></p>
</body>
</html>

Hasilnya :

Contoh kode di atas saya menggunakan Tag untuk tulisan tebal dan Tag untuk tulisan miring.

Apa perbedaan dari Tag dengan dan Tag dengan ?

Dari segi fungsi antara Tag dengan tag dan tag dengan tag itu sama saja untuk menebalkan tulisan dan memiringkan Tulisan, tetapi ada perbedaan yang mendasar antara dengan tag dan tag dengan tag , yaitu :

Tag dengan Tag berbeda dari segi pengartiannya kalau tag hanya untuk menandakan tulisan itu itu menebalkan saja. sedangkan tag mendefinisikan bahwa teks tersebut "penting"
Tag dengan tag : tag adalah singkatan dari "italic" sedangkan tag adalah "emphasis", tetapi penggunaan tag itu ketika zaman XHTML sering digunakan untuk sekarang penggunaan tag itu lebih baik. Namun di HTML5 tag dengan tag masih digunakan tetapi dengan fungsi tag yang di ubah untuk menandai bagian text dengan alternative voice

Cara Membuat Hyperlink Di HTML

Kali ini Blog Pintasku masih memberikan Tutorial Dasar HTML, sebelumnya saya pernah membuat Tutorial Cara Membuat Daftar/ List Di HTML, nahh untuk sekarang saya akan memberikan Tutorial Cara Membuat Link Di HTML.

Sebelum masuk ke Tutorial sebaiknya sobat harus tahu terlebih dahulu Apa Itu Link ? Apa Fungsi Link ?

Link adalah sebuah cara untuk menghubungkan antara 1 alamat dengan alamat yang lainnya. HTML itu singkatan dari Hypertext Markup Laguage, nahh yang di maksudkan link di dalam HTML itu adalah Hypertext tersebut. Nahh sedangkan Fungsi Hypertext itu adalah untuk membuat sebuah tulisan atau gambar ketika di klik akan berpindah ke halaman lain atau ke alamat lain. Nahh sekarang bagaimana Cara Membuat Link Di Halama HTML

Cara Membuat Link Di HTML

Di dalam HTML jika kita membuat sebuah link kita memerlukan sebuah tag khusus, yaitu tag <a>. Tag <a> adalah anchor. Di dalam tag <a> itu terdapat banyak atribut yang bisa digunakan, tapi untuk kali ini saya akan menggunakan atribut hrep dan target karena atribut tersebut adalah yang sering digunakan untuk Eksternal link.

1. Atribut Hrep

Hrep adalah singkatan dari "hypertext reference" Fungsi dari Herp adalah sebagai tempat yang berisi alamat yang akan dituju. Supaya bisa lebih gampang di mengerti oleh sobat silahkan perhatikan contoh penggunaan Tag <a> dengan atribut hrep berikut ini.

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag Link </title>
</head>
<body>
  <h1>Belajar Tag Link dengan atribut hrep</h1>
  <p>Ini adalah contoh penggunaan tag link dari
  <a href="http://pintasku.blogspot.com">Blog pintasku</a></p>
</body>
</html>

Hasilnya :

Keterangan : Kode yang berwarna merah adalah alamat tujuan

2. Atribut Target

Atribut Target berfungsi untuk menentukan apakah alamat yang akan dituju terbuka di jendela browser saat ini atau akan terbuka di jendela browser yang baru.

Pada umumnya jika kita membuat link setiap link yang kita klik biasanya terbuka pada jendela yang sama atau secara sederhananya menimpa halaman yang sedang terbuka saat ini. Nahh dengan menggunakan Atribut target kita bisa membuat alamat yang akan dituju itu terbuka pada jendela browser baru.

Dibawah ini adalah contoh penggunaan tag <a> dengan atribut target.

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag Link </title>
</head>
<body>
  <h1>Belajar Tag Link dengan atribut target</h1>
  <p>Ini adalah contoh penggunaan tag link dari
  <a href="http://pintasku.blogspot.com"
target=”_blank”>Blog Pintasku</a> dengan atribut target yang akan terbuka di jendela baru</p>
</body>
</html>

Hasilnya :

Catatan : Pada artikel kali ini saya menggunakan eksternal link, yaitu link yang menuju keluar halaman atau halaman lain, nahh ada juga link yang menuju ke halaman yang sedang dibuka tetapi menuju kebagian lain di halaman atau dokumen tersebut. Untuk lebih jelasnya silahkan sobat baca pada artikel yang berjudul Cara Membuat Internal Link Di HTML

Sekian artikel mengenai Tutorial Cara Membuat Hyperlink Di HTML Semoga artikel ini bisa bermanfaat dan membantu semuanya dalam mempelajari Dasar HTML, Terimakasih telah berkunjung

Cara Mudah Setting Robot.txt Di Blogger

Kali ini Blog Pintasku akan berbagi tentang Cara Mudah Setting Robot.txt Di Blogger. Mungkin sebagian dari sobat ada yg pernah mendengar kata Robot.txt, tapi apakah sobat mengerti Apa itu Robot.txt ?

Apa itu Robot.txt ?

Robot.txt atau bisa juga disebut dengan Robots Exclusion Protocol adalah perintah untuk Robot Mesin Pencari (Search Engine) untuk bisa atau tidaknya menelusuri halaman halaman di blog atau di web kita.

Pada Umumnya setiap blog itu mempunyai robot.txt yang sudah diberikan oleh pihak Blogger. Berikut ini adalah sebuah kode robot.txt yang diberikan oleh pihak blogger.

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://namablogsobat/feeds/posts/default?orderby=UPDATED

Atau bisa juga dilihat oleh sobat di : http://namablogsobat.blogspot.com/robots.txt
Keterangan :

User-agent: Mediapartners-Google
Robot Google Adsense merayapi / mengakses blog

Disallow:
Yang tidak diperbolehkan tidak ada

User-agent: *
Semua robot Search Engine / mesin pencari

Disallow: /search
Tidak diperbolehkan merayapi folder search dan setrusnya, seperti ..../search/label dan ... search/search?updated... karena label di blogger bukanlah URL asli yang menuju ke sebuah halaman.

Allow: /
Mengizinkan semua halaman untuk dirayapi atau di akses, kecuali yang tertulis pada Disallow di atas. Tanda (/) kurang lebih artinya nama blog.

Sitemap: http://namablog/feeds/posts/default?orderby=UPDATED

sitemap atau alamat feed blog kita.

Pada Settingan kode di atas adalah untuk membuat Search Engine bisa mengindex semua halaman yang ada di blog kita.

Bagaimana Cara Supaya Halaman Tertentu Tidak Terindex ?

Untuk membuat Google Search Engine tidak bisa mengakses halaman tertentu. Misalnya saya ingin mencegah halaman about me dengan URL "http://pintasku.blogspot.com/p/about-me.html" tidak bisa di index oleh Mesin Pencari Google.

Maka Settingan Robot.txt nya adalah seperti dibawah ini.

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Disallow: /p/about.html
Allow: /

Sitemap: http://namablog/feeds/posts/default?orderby=UPDATED

Dimana Cara Setting Robot.txt di Blogger.

Untuk mengedit setting robot.txt di blogger silahkan ikuti petunjuk dibawah ini.

Log in ke blogger seperti biasa.
Klik setelan > Preferensi penelusuran / Search preferences.
Pada tab perayap dan pengindeksan pilih robot.txt.
Dan masukkan kodenya seperti di atas.

Sekian artikel mengenai Cara Mudah Setting Robot.txt Di Blogger semoga artikel ini bisa bermanfaat untuk semuanya. Terimakasih.

Cara Jitu Keluar Dari Google Sandbox

Pada kesempatan kali ini Blog Pintasku akan membahas Bagaimana Cara Keluar Dari Google Sandbox. Sebelumnya saya pernah membahas Apa Itu Google Sandbox ? nahh kali ini cara mengatasinya. Google Sandbox itu sangatlah merugikan sekali bagi para sobat Blogger dan mungkin saja sobat juga pernah merasakan efek dari Google Sandbox ini. Saya pernah juga membaca dari beberapa sumber, mengenai Cara Keluar Dari Google Sandbox. tapi kebanyakan masih kurang efektif. Nahh Oleh karena itu saya akan memberikan Tutorial Keluar Dari Google Sandbox berdasarkan pengalaman saya.

Bagi sobat yang belum paham mengenai Apa itu Google Sandbox silahkan sobat baca artikel saya sebelumnya tentang :

Mengenal Apa Itu Google Sandbox

Cara Jitu Keluar Dari Google Sandbox

Apa Penyebab dari Google Sandbox ?

Google Sandbox terjadi karena blog atau web sobat melakukan tindakan SPAM. Google Sandbox ini biasanya terkena kepada Blog yang mengikuti kegiatan Kontes SEO, bukan berarti jika kita mengikuti kontes SEO blog kita akan terkena Google Sandbox, maksudnya itu rata rata peserta kontes SEO selalu melakukan Optimasi Blog atau Web mereka dan mereka rata rata suka melakukan Over Optimasi supaya blog atau web mereka bisa mendapatkan posisi pertama di Google.

Memang dengan melakukan tindakan SPAM itu bisa menaikan Tingkat SERP Blog tetapi itu juga akan berakibat FATAL pada blog kita. Untuk lebih lengkapnya silahkan baca Penyebab Google Sandbox

Bagaimana Cara Keluar dari Google Sandbox ?

Perlu diketahui kembali oleh sobat Google Sandbox ini ada 2 macam, yaitu :

Sandbox untuk web atau blog, otomatis semua isi atau halaman - halaman dari blog atau web itu terkena juga.
Sandbox untuk beberapa halaman atau artikel saja.

Jika sobat terkena Google Sandbox Web atau Blog, silahkan ikuti langkah - langkah berikut ini.

Jangan melakukan Backlink secara berlebihan, cukup 1 hari itu hanya 10 backlink.
Jangan melakukan PING secara Agresif, biasakan untuk melakukan Ping hanya ketika selesai Update artikel atau postingan.
Submit Ulang Sitemap di Google Webmaster jika sudah di Resubmit sekarang lakukanlah PING hanya 1 kali.

Nahh sekarang jika terkena Google Sandbox hanya beberapa halaman atau artikel.

Menulis Ulang Artikel.
Kurangi jumlah keyword di 100 kata pertama.
Ganti URL halaman tersebut.
Cek Keyword Desenty pada artikel
Sekarang submit kembali Artikel tersebut ke Google Crawl URL

Sekian Tutorial Cara Jitu Keluar Dari Google Sandbox, semoga Tutorial ini bisa bermanfaat untuk pemaca. Terimakasih.

Membuat Judul Di HTML Dengan Tag Heading

Cara Membuat Judul Di HTML Dengan Tag Heading - Pada kesempatan kali ini Blog Pintasku masih memberikan Tutorial Dasar HTML, tutorial ini dibuat untuk sobat yang ingin Belajar Dasar HTML. Sebelumnya saya membuat Tutorial Cara Membuat Sebuah Paragraf Di HTML, nahh kali ini saya akan memberikan Tutorial Membuat Judul Paragraf Di HTML.

Cara Membuat Judul Di HTML Dengan Tag Heading

Untuk Membuat Judul Di HTML itu sudah ada sebuah tag khusus yang dikenal dengan sebutan Tag Heading. Tag Heading itu ada beberapa tingkatan, yaitu : <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>

dan setiap tingkatan tag tersebut mempunyai fungsi masing masing untuk sebuah halaman web. Untuk mengetahui apa saja fungsinya silahkan sobat masuk saja pada Artikel saya sebelumnya tentang :

Mengenal Fungsi Tag Heading H1, H2, H3, H4, H5, dan H6

Biasanya Tag Heading itu secara otomatis (Default) akan tampil pada browser dengan tulisan yang tebal dan tinggi, berbeda dengan tulisan paragraf. Oke langsung saja ke praktiknya biar lebih mudah dimengerti.

Berikut ini adalah Contoh Kode Tag Heading H1 H2 H3 H4 H5 H6,

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Tag Heading</title>
</head>
<body>
  <h1>Contoh judul dengan tag h1</h1>
  <h2>Contoh judul dengan tag h2</h2>
  <h3>Contoh judul dengan tag h3</h3>
  <h4>Contoh judul dengan tag h4</h4>
  <h5>Contoh judul dengan tag h5</h5>
  <h6>Contoh judul dengan tag h6</h6>
</body>
</html>

Hasilnya :

Nahh sedangkan untuk menggabungkan antara Tag Heading H1 H2 H3 H4 H5 H6 dengan Tag Paragraf . Untuk mempermudah sobat mengerti silahkan perhatikan contoh kode berikut ini.

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Tag Heading</title>
</head>
<body>
  <h1>Contoh judul dengan tag h1</h1>
  <p>Ini adalah paragraf pertama<p>
  <h2>Contoh judul dengan tag h2</h2>
  <p>Ini adalah paragraf kedua<p>
  <h3>Contoh judul dengan tag h3</h3>
  <p>Ini adalah paragraf ketiga<p>
  <h4>Contoh judul dengan tag h4</h4>
  <p>Ini adalah paragraf keempat<p>
  <h5>Contoh judul dengan tag h5</h5>
  <p>Ini adalah paragraf kelima<p>
  <h6>Contoh judul dengan tag h6</h6>
  <p>Ini adalah paragraf keenam<p>
</body>
</html>

Hasilnya :

Perlu sobat ketahui setiap Tag Heading itu memiliki fungsi yang berbeda - beda dan penempatannya juga yang berbeda. Bahkan faktor penempatan Tag Heading mempengaruhi Tingkat SEO pada sebuah Blog atau Web. Nahh untuk artikel selanjutnya akan membahas bagaimana Cara Membuat Daftar Nomor di HTML

Sekian artikel Tutorial dari Blog Pintasku tentang Membuat Judul Di HTML Dengan Tag Heading Semoga bisa bermanfaat untuk semuanya. Terimakasih

Cara Membuat Sebuah Paragraf Pada HTML

Pada kesempatan kali ini Blog Pintasku masih tetap memberikan Artikel mengenai Tutorial Dasar HTML, sebelumnya saya pernah membuat artikel tentang Mengenal Struktur Dasar HTML, nahh sekarang kita akan masuk ke Cara Membuat Paragraf Pada HTML.

Cara Membuat Paragraf Di HTML

Untuk Membuat Paragraf di HTML, kita akan mengambil contoh Dokumen HTML dari artikel sebelumnya tentang Mengenal Struktur Dasar HTML dan sekarang kita akan menambahkan beberapa Tag atau beberapa Text pada dokumen tersebut sehingga nanti hasilnya akan menjadi sebuah Paragraf di Browser sobat. Dibawah ini adalah contoh kode HTML untuk sebuah Paragraf.

<!DOCTYPE html>
  <html>
  <head>
    <title>Cara Membuat Paragraf HTML</title>
  </head>
<body>
   Ini Hanyalah Contoh Paragraf saja.
</body>
</html>

Nahh di atas adalah berupa kodenya jika di jalankan dengan Browser nanti hasilnya akan seperti dibawah ini.

Catatan : Penggunaan Spasi pada Kode HTML itu tidaklah berpengaruh. Maksudnya adalah jika kita membuat jumlah jarak spasi yang banyak itu nantinya akan di abaikan, untuk lebih jelasnya silahkan lihat pada contoh dibawah ini.

<!DOCTYPE html>
  <html>
  <head>
    <title>Cara Membuat Paragraf HTML</title>
  </head>
<body>
   Ini Hanyalah          Contoh            Paragraf saja.
</body>
</html>

Hasilnya :

Mengenal Tag Paragraf

Pada HTML itu jika kita ingin membuat sebuah paragraf, itu sudah disediakan Tag Khusus untuk membuatnya, yaitu dengan menggunakan Tag . Nahh sekarang kita akan menambahkan Tag pada contoh di atas.

<!DOCTYPE html>
  <html>
  <head>
    <title>Cara Membuat Paragraf HTML</title>
  </head>
<body>
   <pre>Membuat paragraf di HTML itu mudah.</pre>
</body>
</html>

Hasilnya :

Bagaimana Cara Membuat Paragraf Lebih dari 1 di HTML ?

Untuk membuat paragraf lebih dari 1 di HTML itu ada 2 cara, yaitu :

Dengan Menggunakan kembali Tag

<!DOCTYPE html>
  <html>
  <head>
    <title>Cara Membuat Paragraf HTML</title>
  </head>
<body>
   <p>Membuat paragraf di HTML itu mudah.</p>
   <p>Dengan Tutorial Dari Blog Pintasku.</p>
</body>
</html>

Dengan Menggunakan Tag Page Break

<!DOCTYPE html>
  <html>
  <head>
    <title>Cara Membuat Paragraf HTML</title>
  </head>
<body>
   Membuat paragraf di HTML itu mudah.
   <br/>
   Dengan Tutorial Dari Blog Pintasku.
</body>
</html>

Nahh sekarang Bagaimana Cara Membuat Judul Pada Paragraf di HTML ? Untuk membuat judul paragraf di HTML silahkan sobat masuk saja pada artikel tentang : Cara Membuat Judul Di HTML

Sekian Tutorial Cara Membuat Sebuah Paragraf Pada HTML, semoga tutorial ini bisa bermanfaat untuk semuanya terutama bagi yang baru belajar di bidang HTML. Terimakasih

Cara Membuat Tombol Social Media Keren di Blog

Cara Membuat Tombol Social Media Keren di Blog - kali ini Blog Pintasku masih memberikan Tutorial Widget Tombol Social Media, tapi yang akan saya share kali ini sangatlah keren karena widget sosial media ini menggunakan gaya eye-catching dan di desain untuk mempercantik blog sobat. Perlu diketahui juga dengan menggunakan widget ini sobat bisa menarik pengunjung sobat untuk bisa menjadi penggemar blog sobat di jejaring sosial media.

Widget Sosial Media ini juga tidak membuat blog anda menjadi lambat atau lelet, dan juga sobat bisa memperbanyak pengunjung atau lebih tepatnya Meningkatkan Jumlah Visitor di blog. Oke sekarang langsung saja ke Tutorialnya.

Cara Membuat Tombol Sosial Media Keren di Blog.

Pertama, seperti biasa Login dulu ke Blogger.
Sekarang masuk ke bagian Tata Letak (Layout)
Tambahkan Gadget (Add Gadget), lalu pilih HTML/Javascript

Copy kode berikut ini dan letakan seperti pada gambar di atas.

<div class="socialLinks">
<a href="URL Facebook Sobat" class="fFacebook transition"><span>Facebook</span></a>
<a href="URL Twitter Sobat" class="fTwitter transition"><span>Twitter</span></a>
<a href="URL Instagram Sobat" class="fInstagram transition"><span>Instagram</span></a>
<a href="URL Pinterest sobat" class="fPintrest transition"><span>Pinterest</span></a>
<a href="URL LinkedIn Sobat" class="fLinkedIn transition"><span>LinkedIn</span></a>
<a href="URL Dribble sobat" class="fDribbble transition"><span>Dribbble</span></a>
<a href="URL Google + Sobat" class="fGoogle transition"><span>G+</span></a>
</div>
<style>
.socialLinks{text-align:center;margin:50px 0 0}.socialLinks a{display:inline-block;margin:0 .5em;-webkit-transition-property:all !important;-moz-transition-property:all !important;-o-transition-property:all;transition-property:all !important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;border:2px solid #8fb73e}.socialLinks a:hover{-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px}.socialLinks span{display:none}.fTwitter{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -655px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:1px -1083px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook:hover{background-color:#369;border-color:#fff;background-position:1px -1141px}.fTwitter:hover{background-color:#28aae1;border-color:#fff;background-position:0 -718px}.fInstagram:hover{background-color:#517fa4;border-color:#fff;background-position:0 -597px}.fPintrest:hover{background-color:#cc2127;border-color:#fff;background-position:0 -285px}.fLinkedIn:hover{background-color:#007fb1;border-color:#fff;background-position:0 -860px}.fDribbble:hover{background-color:#ea4c89;border-color:#fff;background-position:0 -52px}.fGoogle:hover{background-color:#e46044;border-color:#fff;background-position:0 -395px}.fInstagram{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -527px;background-repeat:no-repeat;height:62px;width:62px}.fPintrest{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -226px;background-repeat:no-repeat;height:62px;width:62px}.fLinkedIn{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -790px;background-repeat:no-repeat;height:62px;width:62px}.fDribbble{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 11px;background-repeat:no-repeat;height:62px;width:62px}.fGoogle{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);background-position:0 -343px;background-repeat:no-repeat;height:62px;width:62px}
</style>

Keterangan :

Save (Simpan) dan lihatlah hasilnya.

Sekian Tutorial dari saya mengenai Cara Memasang Tombol Social Media Keren di Blog semoga tutorial ini bisa bermanfaat untuk semuanya dan terimakasih telah mengunjungi Blog Pintasku

Mengenal Apa itu Google Dance ?

Apa itu Google Dance ? - Mungkin sobat sudah pernah mendengar kata Google Dance, tapi apakah sobat mengerti apa sih Google Dance itu ?, Google Dance, Google Panda adalah hal yang paling ditakuti oleh para blogger di seluruh dunia. Google dance itu sama halnya dengan Google Sandbox yang pernah saya jelaskan sebelumnya, jika ingin mengetahui Apa itu Google Sandbox silahkan masuk saja ke postingan saya sebelumnya di :

Oke pada kesempatan kali ini saya akan menjelaskan tentang Apa itu Google Dance ? Apa Penyebab Google Dance ?, silahkan sobat baca dibawah ini.

Apa Itu Google Dance ?

Google dance kalau di artikan secara harfiah adalah Tarian Google, Hahaha. bukan itu pengertian dari Google Dance, Maksud dari Google dance merupakan sebuah tools Algoritma dari Google yang berfungsi untuk menentukan sebuah blog atau web di dalam suatu SERP (Search Engine Result Page), Apakah SERP yang akan di dapatkan tinggi atau bahkan sebaliknya yang bisa membuat tertinggal jauh.

Google Dance ini memberikan SERP pada sebuah blog atau website secara tidak menentu kadang ada di page pertama atau bahkan ada di page terakhir blog kita itu, jadi jika sobat terkena Google Sandbox nanti sobat akan mendapatkan Trafik yang aneh, kadang naik dan kadang juga turun. Google Dance ini biasanya datang setiap beberapa bulan sekali. dimana Fungsi Google Dance ini adalah untuk memvalidasi konten atau link yang ada blog atau web, apakah dibuat oleh manusia ataupun dibuat oleh Bot Generator.

Sebenarnya Google Dance itu tidaklah berbahaya namun sangat menjengkelkan, Kenapa bisa menjengkelkan ? Yaah siapa yang tidak akan jengkel kalau visitor blog sobat naik turun dan bahkan kalau turun biasanya mendapatkan ratusan perhari ini malah mendapatkan puluhan.

Apa Penyebab Terjadinya Google Dance ?

Penyebab blog atau website terkena Google Dance adalah sebagai berikut :

Umur Blog.

Over Backlink

Salah Ping

Over Keyword

Inbound Link

Outbound Link

Postingan, (Update Artikel)

Mengenal dan Memahami Struktur Dasar HTML

Hallo sobat Blog Pintasku, sebelumnya saya membuat artikel tentang Mengenal Apa itu Tag, Atribut, dan Elemen pada HTML, nahh untuk sekarang masih berhubungan dengan Tutorial Dasar HTML, tapi untuk kali ini saya akan memberikan Tutorial untuk Mengenal dan Memahai Struktur Dasar HTML.

Bagi sobat yang belum paham mengenai HTML silahkan sobat baca pada artikel saya sebelumnya mengenai HTML dibawah ini.

Oke sekarang langsung masuk ke topik utama, silahkan sobat baca dibawah ini.

Cara Membuat Struktur Dasar Halaman HTML

Pada umumnya untuk membuat struktur dasar dari HTML itu adalah Tag DTD atau DOCTYPE, tag html, tag head, dan tag body, semua tag tersebut adalah tag paling dasar atau lebih tepatnya tag yang sering ditemukan pada setiap dokumen HTML, walaupun pada umumnya tidak hanya Tag itu saja untuk struktur dasar HTML.

Supaya lebih gampang silahkan sobat untuk membuka text editor atau software web desain sobat, mau itu notepad ++. CoffeeCup Free HTML Editor , PageBreeze dll. Lalu ketikan kode dibawah ini.

<!DOCTYPE html>
  <html>
  <head>
    <title>Untuk Judul Website</title>
  </head>
<body>
   <p>Ini Hanyalah Contoh saja dari Blog Pintasku</p>
</body>
</html>

Sekarang save dengan ekstensi .html , misalnya halamanku.html dan jalankan dokumen tersebut menggunakan web browser sobat dan lihat hasilnya seperti gambar dibawah ini.

Nahh sekarang kita akan membahas satu persatu tag yang ada pada contoh kode di atas, dan yang ada pada contoh di atas adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<Title>
<body>

1. <!DOCTYPE html> atau DTD

DOCTYPE atau lebih dikenal dengan DTD merupakan singkatan dari Document Type Declaration, dimana fungsi dari DTD adalah untuk memberitahukan atau memberikan informasi kepada web browser bahwa dokumen yang akan di proses itu adalah dokumen HTML. Perlu diketahui oleh sobat DTD itu memiliki banyak versi tergantung pada versi HTML yang digunakan. Untuk contoh di atas kita menggunakan DTD versi HTML5.

Bagaimana kalau kita lupa tidak memasukan Tag DTD pada sebuah dokumen HTML ? Jika kita lupa tidak memasukan Tag pada dokumen HTML itu tidak akan berpengaruh terhadap tag lain atau bisa membuat error, dan web browser juga akan membaca dokumen HTML kita itu seperti biasa, akan tetapi jika kita tidak memasukan Tag DTD pada dokumen HTML, Web browser akan menjalankan dokumen kita pada mode khusus, yaitu mode quirk mode. Pada Quirk mode browser akan menganggap dokumen kita itu sudah jadul karena browser menerjemahkan Dokumen HTML atau web page (Halaman Web) berbeda dari biasanya.

2. Tag <HTML>

Tag HTML adalah Tag dari kesulurah semua tag pada Halaman Web atau dokumen kalau secara sederhananya yaitu pembungkus dari kesuluruhan Tag yang ada pada Halaman Web atau dokumen. Tag pembuka ditulis dengan kode.

<HTML>

Sedangkan Tag Penutup seperti dibawah ini.

</HTML>

3. Tag <Head> dan Tag <Title>

Tag <Head> biasanya oleh sebagian orang orang sering digunakan untuk menyimpan CSS, Javascript, Meta, dan kode kode lainnya yang tidak akan muncul di browser.

Tag <Title> adalah Tag untuk Judul sebuah halaman, biasanya untuk membuat Judul biasanya menggunakan Tag H1. H2 H3 H4 H5 H6. Tetapi pada contoh di atas saya menggunakan Tag Title saja, dan lihatlah Hasil pada browser disana pada bagian atas browser sobat ada isi atau elemen dari Tag Title

4. Tag <body>

Tag <Body> tag ini biasanya berisikan isi dari sebuah halaman web atau isi dari dokumen HTML, baik itu berupa paragraf, gambar, link, tabel, dan lain lain. Nahh untuk sobat yang suka ngedesain halaman blogger, atau halaman web, Tag yang biasanya kita edit atau modifikasi itu terletak di dalam Tag <Body>.

Catatan : Semua tag yang ada pada contoh kecuali tag <!DOCTYPE html> atau DTD adalah Tag yang berpasangan, sedangkan Tag <!DOCTYPE html> atau DTD adalah tag Tunggal jadi kita harus bisa mengetahui Setiap Tag yang ada, Untuk membedakan antara Tag Tunggal dan Tag Berpasang dilihat dari elemen, tag berpasang selalu ada elemen sedangkan Tag Tunggal tidak.

Sekian Pembahasan dari saya mengenai Mengenal dan Memahami Struktur Dasar HTML semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih telah membaca

Mengenal Tag, Elemen dan Atribut Dalam HTML

Pada kesempatan kali ini Blog Pintasku akan memberikan penjelasan Tentang Mengenal Tag, Elemen dan Atribut Dalam HTML. Artikel ini di khususkan bagi sobat yang masih awam atau pemula di bidang HTML. Sebelum masuk kedalam pembahasan utama saya sarankan sobat untuk membaca terlebih dahulu artikel saya sebelumnya mengenai.

Mengenal dan Memahami Apa itu HTML

Mengenal Tag, Elemen dan Atribut Pada HTML

Apa itu Pengertian Tag pada HTML ?

Tag adalah sebuah tanda khusus (Markup) dimana tanda tersebut berfungsi untuk memberitahu web browser bagaimana suatu text, link, paragraf, gambar, dll bisa ditampilkan. Tag di dalam HTML itu diberi tanda dengan 2 karakter "<" dan ">" (tanpa tanda kutip). Penulisan Tag pada HTML itu haruslah berpasangan, yakni ada Tag sebagai pembuka dan Tag sebagai penutup. Jadi ketika kita akan menuliskan sebuag Tag pada HTML kita harus menggunakan tag pembuka pada awal kalimat dan tag penutup pada akhir kalimat.

Contohnya seperti kode dibawah ini :

<p> Ini hanyalah contoh saja </p>

Keterangan :

 : adalah Tag Pembuka untuk paragraf
ini hanyalah contoh saja : Objek atau Elemen
 : adalah Tag Penutup paragraf

Perlu sobat ketahui juga Tag itu dibagi menjadi 2 macam, yaitu :

Tag yang berpasangan, yaitu tag yang dimulai dengan tag pembuka dan diakhiri dengan tag penutup, contoh: <head> ... </head>.
Tag tunggal, artinya tag yang berdiri sendiri tanpa pasangan, contoh: , <img> atau bisa juga ditulis dengan , <img/> atau juga , <img />

Contoh pada di atas termasuk kedalam Tag Berpasang yang di awali dengan Tag Pembuka dan Tag Penutup. Penulisan pada Tag berpasang harus teliti, apalagi pada bagian tag penutup kita sering lupa menyisipkan tanda slash "/" pada bagian tag penutup.

Apa itu Pengertian Elemen Pada HTML ?

Elemen adalah isi dari tag yang berada diantara tag pembuka dan tag penutup. bisa di lihat kembali pada contoh di atas. disana ada tulisan berwarna merah yang bertuliskan "ini hanyalah contoh saja" nahh itu yang di maksud dengan Elemen.

Perlu di ingat Elemen itu tidak hanya berisikan dengan text, tetapi bisa juga berisikan dengan tag lain, contohnya seperti dibawah ini.

<p> Ini hanyalah <b>Contoh Saja</b> </p>

Apa itu Pengertian Atribut Pada HTML ?

Atribut merupakan isi dari tag yang berada diantara tag pembuka dan tag penutup, dimana fungsinya adalah untuk memberikan informasi kepada tag tersebut. Informasi ini biasanya berupa instruksi atau objek, baik itu text, warna, ukuran tulisan, dll. Pada setiap atribut memiliki pasangan nama dan nilai (value), yang ditulis name=”value”. Perlu di ingat untuk nilai (value) itu selalu di ampit dengan tanda kutip bisa menggunakan tanda kutip satu (‘) atau dua (“). Struktur dasar penulisan Atribut pada sebuah Tag di dalam HTML seperti dibawah ini.

<tag atribut1="value" atribut2="value" ... ></tag>

Sedangkan untuk contoh yang bisa sobat langsung praktikan dibawah ini.

<a href="http://pintasku.blogspot.com">ini adalah sebuah link</a>

Keterangan :

href : adalah Atribut
"http://pintasku.blogspot.com" : adalah nilai dari atribut.

Sekian penjelasan mengenai Mengenal Tag, Elemen dan Atribut Pada HTML, semoga artikel ini bisa bermanfaat untuk semuanya. Terimakasih

Cara Membuat Widget Tombol Social Media Melayang di Blog

Topik Kali ini saya akan share mengenai Tutorial Cara Membuat Widget Floating Tombol Social Media di Blog, Mungkin sobat sudah tidak asing lagi melihat tombol Social Media Mengapung Pada Blog lain. Tapi pernahkah sobat berpikir bagaimana Cara Mebuatnya ? Nahh bagi sobat yang ingin Melihat tutorialnya langsung saja ikuti Tutorial Blogger dibawah ini.

Sebelum masuk ke Tutorial saya akan memberikan penjelasan secara singkat terlebih dahulu. Fungsi Tombol SOSMED atau lebih tepatnya Sosial Media ini berfungsi untuk menghubungkan antara web atau blog dengan Jejaring Sosial Media Blog atau Web tersebut, jadi pengunjung akan gampang menghubungkan antara akun sosial media mereka dengan akun sosial media blog tersebut dengan begitu Pengunjung akan selalu mengetahui Update terbaru dari Blog atau web Tersebut.
Sebelumnya saya pernah Share Juga Bagaimana :

Oke sekarang masuk ke Tutorialnya.

Cara Memasang Widget Social Media Melayang di Blog

Untuk cara memasangkan widget tersebut terlebih dahulu kita harus menyimpan beberapa script di Editor HTML, ikuti petunjuknya dibawah ini.

Seperti biasa, Login Ke Blogger
Masuk Ke Editor HTML (Template >> Edit HTML)
Copy kode berikut ini dan letakan tepat di atas kode ]]></b:skin>

.social-buttons{position:fixed;top:150px;width:45px;z-index:9999}
.button-left{left:0}
.button-right{right:0}
.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#33353B;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDFtKJ-HeVHVNaWNiyFrAivIZrYdMttr8Zbf7Crjq-biH3zAksITHGMelwRqXhyphenhyphen3H6CwUr3XkE9L-d4O9OQbRi1DfaddZz2LrTCie8IGuAKHsGf24qmtjrCAAmcEqZc4n3RJ5S4kVqFI/s1600/mas-icons.png)}
.button-left #facebook-btn span{background-position:right 10px}
.button-left #twitter-btn span{background-position:right -35px}
.button-left #google-btn span{background-position:right -127px}
.button-left #rss-btn span{background-position:right -80px}
.button-right #facebook-btn span{background-position:12px 10px}
.button-right #twitter-btn span{background-position:11px -35px}
.button-right #google-btn span{background-position:10px -127px}
.button-right #rss-btn span{background-position:11px -80px}
.social-buttons #facebook-btn:hover .social-icon{background-color:#3B5998}
.social-buttons #twitter-btn:hover .social-icon{background-color:#62BDB2}
.social-buttons #google-btn:hover .social-icon{background-color:#DB4A39}
.social-buttons #rss-btn:hover .social-icon{background-color:#FF8B0F}
.social-buttons #pinterest-btn:hover .social-icon{background-color:#D43638}
.social-buttons #youtube-btn:hover .social-icon{background-color:#C4302B}
.social-buttons a:hover .social-text{display:block}
.button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px}
.button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:11px 40px 11px 0}
.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px}
.button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:11px 0 11px 40px}
.social-buttons .social-text{color:#FFF}
.button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px}
.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}

Nahh Copy lagi kode dibawah ini, dan letakan di atas kode </head>

<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'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});  
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });

</script>

Save, dan Keluar dari editor HTML

Nahh Sekarang kita akan masuk ke Cara Pemanggilan Tombol Social Media tersebut dengan menggunakan Widget HTML/Javascript, Ikuti petunjuknya dibawah ini.

Masuk Ke TATA LETAK
ADD GADGET > Cari HTML/JavaScript,

Copy kode berikut ini dan letakan pada kolom seperti gambar pada no 2.

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='URL Facebook Sobat' rel='nofollow' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Facebook</span></span></a>
<a class='itemsocial' href='URL Twitter Sobat' rel='nofollow' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Twitter</span></span></a>
<a class='itemsocial' href='URL Google Plus Sobat' rel='nofollow' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Google</span></span></a>
<a class='itemsocial' href='URL Pinterest Sobat' rel='nofollow' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow us via Pinterest</span></span></a>
<a class='itemsocial' href='URL Chanel Youtube Sobat' rel='nofollow' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via Youtube</span></span></a>
<a class='itemsocial' href='URL Feedburner Sobat' rel='nofollow' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow us via RSS</span></span></a>
</div>

Keterangan :

Save, dan lihatlah hasilnya.

Sekian Tutorial Cara Membuat Widget Tombol Social Media Melayang di Blog semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih

Cara Membuat Blok Catatan Tips, Info, dan Peringatan Keren

Kali ini Blog Pintasku akan share tentang Bagaimana Cara Membuat Blok Catatan Tips, Info, Peringatan . Mungkin sobat sudah tidak asing lagi dengan Tutorial Untuk Blogger ini karena sudah banyak dibahas di beberapa blog tetangga. Mungkin saja ada beberapa Blogger yang masih belum tahu Cara Membuat Blok Catatan ini pada Blog.

Fungsi dari menggunakan Blok Catatan ini adalah untuk memberitahukan atau lebih tepatnya untuk menyimpan catatan penting, mungkin sobat ada yg pernah menggunakan Blockquote sebagai tempat untuk menuliskan hal hal penting, tetapi menurut saya kurang efesien karena tampilannya seperti biasa saja. Tetapi jika sobat menggunakan Blok Catatan seperti pada Tutorial kali ini itu akan memberitahukan Catatan penting, tips, peringatan, dan sukses. Jika sobat ingin melihat contoh Blok Catatan Tips, Info dan Peringatan Ala Blog Pintasku, silahkan sobat klik saja tombol demo dibawah ini.

Membuat Blok Catatan Tips, Info dan Peringatan Keren

1. Masuk Ke Editor HTML Blog Sobat.
2. Copy dan letakan kode berikut tepat di atas kode </b:skin>

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding-left: 10px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-QkcTWrFQseVXikRlyTK10TZUbew4oIKy_rlr_IH1k42uMUYM6wZoMygn7GQp1TdGDGn3JLbvZ6naYf36wXoc6bzcmK_IK9P5LIhRqud-MlhIqueT6zocoYINF4_D2CucwUnUHcp4xI/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtwvRcgru-QO76Rq9N-HzfWh3XpMitVHTJfm86gDOzGl25usnvLnfRzGuB5jAo0DQqM8wjjcH9sYJCkEwmdrth-CIYQsdENCYtMPIwe36N2jxVOSw2L7MctZzA7pFcV_jdI3M3n028d4/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNEijMXmSaqm1XRdA2AlDqg5Poo67Z_BECis7JOcwTUcrXcMMKLiYYlZMrBoiJK7SZSW4hIOOcWMXZsO9RfdLe835aAhyphenhyphenv153ItOQwE32_hgNZ1-JVkaYs5ujBslF0GtRbw1QnEYNxrg/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Nahh sekarang jika sobat ingin memasukannya kedalam postingan atau artikel, itu memerlukan kode pemanggilnya, yang pastinya kode HTML dan sobat harus meletakan kodenya itu di mode HTML dalam postingan

Oke langsung saja, dibawah ini adalah daftar kode kode pemanggilnya. silahkan untuk di bookmark page ini atau di hafalkan kodenya , hehehe

Kode Pemanggil Untuk Catatan Info :

<div class='info'>
Catatan INFO Bro
</div>

Kode Pemanggil Untuk Catatan Tips :

<div class='tips'>
Catatan Tips ini.
</div>

Kode Pemanggil Untuk Catatan Peringatan :

<div class='warning'>
Catatan Peringatan Coy
</div>

Sekian Postingan kali ini Tentang Cara Membuat Blok Catatan Tips, Info, Peringatan Keren Semoga Tutorial Blog ini bisa bermanfaat untuk semuanya. Terimakasih

Source :http://blog.kangismet.net/2013/10/membuat-blok-catatan-tips-dan-peringatan.html

Cara Membuat Tombol Share Dibawah Postingan Valid HTML5

Pada Kesempatan kali ini Blog Pintasku akan berbagi tentang Bagaimana Cara Memasang Tombol Share Dibawah Postingan ? Mungkin sobat pastinya sudah tidak asing lagi melihat Tombol Share yang Terletak dibawah Postingan. Perlu sobat ketahui, Fungsi Memasang Tombol Share ini adalah untuk mempermudah Visitor atau pengunjung ketika ingin membagikan artikel kita melalui Sosial Media, baik itu Facebook, Twitter, Google+, dan Sosial Media Lainnya. Memang Pihak blogger juga menyediakan Tombol share tersebut, tapi tombolnya tersebut tidaklah elegan atau keren, Oleh karena itu saya akan memberikan tutorial Blog mengenai Cara Membuat atau Memasang Tombol Share Dibawah Postingan.

Jika Sobat menggunakan Tombol Share Default dari Blogger, itu menurut saya pribadi kurang efesien karena tidak valid HTML5, Nahh Bagaimana Cara Membuat Tombol share yang bisa valid HTML5 dan lolos dalam W3C, silahkan sobat ikuti saja Tutorial Blogger dibawah ini.

Cara Membuat Tombol Share Dibawah Postingan Valid HTML5

Seperti biasa langkah pertama login ke Blogger.
Masuk Ke Editor HTML ( Template - Edit HTML)
Copy kode berikut ini dan letakan tepat di atas kode ]]></b:skin>

.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}
.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}
.widgetshare a:hover {box-shadow: 0 0 5px #FFFFFF; border: 1px solid #e9fbe9; cursor:pointer; }
.fcbok { background: #3B5999; }
.twitt { background: #01BBF6; }
.gplus { background: #D54135; }
.digg { background: #5b88af; }
.lkdin { background: #005a87; }
.tchno { background: #008000; }
.ltsme { background: #fb8938; }

Copy lagi kode dibawah ini, dan letakan di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>

<div class='widgetshare'>
Share : 
<a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> 
<a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");
//]]>
</script>
</div>

Save atau Simpan, dan Lihatlah Hasilnya.

Catatan : Mungkin Biasanya beberapa templates Blog terdapat lebih dari satu kode <data:post.body/> atau <div class='post-footer'> oleh karena itu perlu diperhatikan dan perlu disesuaikan.

Sekian Tutorial dari saya tentang Cara Membuat Tombol Share Dibawah Postingan Valid HTML5. Semoga Tutorial ini bisa bermanfaat untuk semuanya. Terimakasih Telah berkunjung, silahkan berkomentar jika ada yang tidak dimengerti.

Cara Mudah Riset Keyword Paling Ampuh

Cara Mudah Riset Keyword Paling Jitu - Oke Postingan kali ini saya akan menjelaskan Tentang Riset Keyword atau . Mungkin sobat blogger sudah tau apa sih yang dimaksud dengan Riset Keyword itu ? dan apa Manfaat Riset Keyword itu bagi Blog atau web ? Dengan melakukan Teknik Riset Keyword ada kemungkinan halaman atau artikel yang anda tulis itu bisa menempati Posisi Pertama di Google. Oke langsung saja sekarang ke pembahasannya.

Apa itu Riset Keyword ?

Riset Keyword atau bisa di artikan secara harfiah menjadi "Riset Kata Kunci" Maksud dari riset keyword itu adalah Teknik dimana kita mencari Kata Kunci (Keyword) yang berpeluang tinggi untuk menjadi bahan pencarian oleh Pengunjung atau lebih tepatnya Kata Kunci (Keyword) yang sering diketikan oleh Internet User . Perlu sobat ketahui dengan melakukan Teknik Riset Keyword ini sobat bisa mengalahkan saingan saingan Blog sobat. Riset Keyword ini juga termasuk kedalam salah satu Teknik SEO, lebih tepatnya Teknik SEO On Page, karena kita melakukan Optimasi didalam Blog atau Web, dan perlu sobat ketahui juga Riset Keyword juga termasuk kedalam Strategi SEO yang paling mujarab. Hahaha

Intinya Riset Keyword itu adalah Mencari Keyword (Kata Kunci) yang sering diketikan Oleh para Internet User (Pengguna Internet) Sehingga artikel atau Blog sobat berpeluang tinggi untuk menjadi Page 1 di google. Ketika sobat akan melakukan Riset Keyword sobat akan menemuka 2 jenis keyword, yaitu :

Short Keyword (Kata Kunci Pendek atau Singkat)

Blogging
Tutorial Blogger
SEO
Tutorial SEO
Komputer
Widget Blogger

Long Tail Keyword (Kata Kunci Panjang)

Memahami Teknik SEO Long Tail Keyword

Bagaimana Cara Melakukan Research Keyword (Riset Keyword) ?

Nah sedangkan untuk cara melakukan Riset Keyword saya disini menggunakan bantuan Tools, Apa Saja Toolsnya ?

Google Adwords: Keyword Planner
Google Keyword Suggest Tool
MozBar Extension

1. Google Keyword Suggest

Google Keyword Suggest disini saya menggunakannya untuk menambahkan variasi dari short keyword contohnya, saya disini menggunakan keyword "Tutorial SEO" nahh dengan menggunakan Tools ini akan menambahkan variasi. Untuk Mencari Keyword variasi itu ada banyak Toolsnya bukan hanya Tools Generator ini saja, jika sobat ingin tahu silahkan sobat baca saja artikel saya tentang : 12 SEO Tools Untuk Keyword Terbaik

Oke langsung saja ke cara menggunakan Google Keyword Suggest ini, silahkan ikuti tutorial dibawah ini.

Silahkan Kunjungi situs Toolsnya disini : http://tools.seochat.com/tools/suggest-tool/
Jika sudah nanti akan ditampilkan seperti gambar dibawah ini, lalu isikan seperti gambar dibawah ini.

Jika sudah di isi, di kolom Search Silahkan klik Tombol "Search"
Oke jika sudah di klik, nanti akan muncul deretan keyword atau kata kunci Variasi dari keyword "Riset Keyword", silahkan lihat seperti gambar dibawah ini.

Lalu sekarang anda bisa mendownloadnya atau lebih tepatnya di export, tapi lebih baik di block saja keywordnya lalu nanti di copy dan paste ke notepad dulu untuk sementara. Jika sobat lebih memilih untuk di download (Export) silahkan klik tombol seperti gambar dibawah ini.

Nahh Selesai sudah, kita mencari Keyword variasi, dan sekarang kita akan masuk ke Menganalisa Tingkat Pencarian Keyword dengan menggunakan Tools Google Adwords: Keyword Planner

2. Google Adwords: Keyword Planner

Oke di atas itu tadi adalah Cara mencari Keyword Variasi dengan bantuan Google Keyword Suggest, nahh sekarang kita akan masuk ke cara Menganalisis Tingkat Pencarian Keyword dengan menggunakan Tools Google Adwords: Keyword Planner, silahkan ikuti langkah langkahnya dibawah ini.

Masuk ke Situs : Google Adwords: Keyword Planner
Lalu Pilih, “Get traffic estimates for a list of keywords“ dan Upload atau ditulis Keyword yg sudah sobat tadi simpan di notepad., Lalu klik Get Trafick

Oke, sekarang kita akan mendownload data tersebut, lihatlah seperti gambar dibawah ini.

Dan jangan lupa pilih format file .csv dan Klik Download

Nahh sekarang silahkan dibuka oleh sobat, file .csv yang sudah di download dan silahkan dipilih pilih berdasarkan Jumlah Pencarian yang sobat inginkan.

CATATAN : Data data yang di tampilkan dari Google Keyword Planner itu tidak 100% Akurat, oleh karena itu kita harus menyeleksi setiap keyword yang ada.

Untuk Cara Menyeleksi Tingkat Persaingan saya akan post nanti dikarenakan tangan saya yang sudah pegal.
Mungkin sobat masih bertanya tanya bagaimana cara mengetahui Tingkat Persaingan Keyword yang kita cari itu berapa persen,

Sekian penjelasan dari saya mengenai Cara Mudah Riset Keyword Paling Ampuh semoga artikel ini bisa bermanfaat untuk semuanya. Terimakasih.

Mengenal Apa Itu Google Sandbox ?

Apa Itu Google Sandbox ? Mungkin bagi sebagian Blogger pastinya sudah tidak asing lagi mendengar Google Sandbox, tapi apakah sobat tau apa sih yang dimaksud dari Google Sandbox itu ? Oke kali ini Blog Pintasku akan menjelaskan Seputar Google Sandbox.

Google Sandbox bagi para blogger atau bagi orang yang mempunyai situs web pastinya akan takut dengan Sandbox ? Kenapa bisa takut ? Google sandbox ditakutin para Blogger karena google sandbox bisa membuat sebuah web ataupun blog tidak terindex atau tidak ditemukan ? Kenapa bisa tidak ditemukan ? Apakah diculik ? Haha, Google sandbox itu di ibaratkan Penjara atau Kamar Tahanan, Kalo situs web atau blog kita tidak ditemukan oleh google berarti situs web ataupun blog kita itu masuk ke kamar tahanan google. Jadi Apa itu Google Sandbox yang sebenarnya ? Oke sekarang sobat baca tulisan saya dibawah ini.

Apa itu Google Sandbox ?

Menurut dari Wikipedia Google Sandbox adalah semacam istilah pengamatan system Google dalam menentukan Peringkat suatu web atau tinjauan google dalam meng index suatu halaman atau web. Sedangkan menurut Blog Pintasku Google Sanbox itu adalah Peringatan atau hukuman dari Google untuk suatu laman blog atau website dan efek dari Google Sandbox itu akan membuat suatu laman blog atau website di buang dari rangking pengindexan. Waah sangat merugikan sekali bukan ?
Google Sandbox itu dibagi menjadi 2, yaitu :

Sandbox untuk web atau blog, otomatis semua isi atau halaman - halaman dari blog atau web itu terkena juga.
Sandbox untuk beberapa halaman atau artikel saja.

Web atau blog yang sering terkena google sandbox biasanya web atau blog yang mengikuti kontes SEO. Kenapa bisa yang mengikuti kontes SEO terkena Google Sandbox ? Karena para peserta Kontes SEO biasanya suka melakukan Teknik SEO yang terlalu berlebihan oleh karena itu bisa terkena Google Sandbox.

Penyebab Google Sandbox :

Mendapatkan Banyak Backlink yang banyak dalam waktu yang singkat.
Terlalu banyak mengulang kata atau keyword dalam 1 keyword dan kata yang di ulang itu diberikan warna yang sama atau diberikan efek yang sama.
Isi Postingan/Artikelnya hasil dari Copy Paste (COPAS)
Broken Link (Link Rusak).
Over Optimasi, atau lebih tepatnya Optimasi secara berlebihan.
Membuat Backlink dari web atau situs yang terkena Blacklist Google.

Bagaimana Cara Cek Artikel atau Situs web/blog Terkena Google Sandbox ? Untuk Cara Pengecekan mungkin lain kali saya akan jelaskan. Oleh karena itu silahkan Subscribe Blog ini dan nanti sobat akan mendapatkan pemberitahuan Via Email.

Sekian artikel dari saya mengenai Mengenal Apa Itu Google Sandbox, Semoga artikel ini bisa bermanfaat dan Menambah wawasan sobat. Terimakasih.

Membuat Widget Social Subscrebe di Blogger

Membuat Widget Social Subscribe di Blogger - Mungkin Widget Email Subscribe dari Feedburner masihlah sangat biasa atau simpel, tapi dengan sedikit penambahan CSS didalam widget tersebut akan Membuat Widget Email Subscribe menjadi lebih keren dan sobat bisa merubah setiap desain atau warnanya menjadi lebih menarik. Nahh kali ini saya akan berbagi widget email subscribe tetapi dengan multi fungsi yaitu saya menambahkan tombol sosial media seperti tombol facebook, twitter, google plus dan Rss feedburner. Oke langsung saja ke tutorialnya dibawah ini.

Demo

Cara Memasang Widget Social Subscribe di Blogger.

Login ke akun blogger seperti biasa.
Masuk ke bagian Tata Letak lalu pilih Add Widget
Pilih HTML/Javascript
Copy kode dibawah ini dan paste

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" class="login" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pintasku', 'popupwindow', 'scrollbars=yes,width=520,height=520');return true" target="popupwindow">
<ul class="subscribe-faceblog">
<li><a href="URL Facebook sobat" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVv7kVRH5CfjE1zcI8BETFr3Ipa1v7eeG2IkbAno8Q7O-h3e-YFLMOI_N_rSzaAd3sDBbCLMPQv81hH1UJpoK_Ad95eIihbkjOACc-29fqL5BcIGf8gtOXck5Lrs-qAMpnrBk-ZesmzGc/s1600/facebook+tng.png" title="Follow Us on Facebook" /></a></li>
<li><a href="URL Twitter Sobat" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTujkXv4vhiHarPuG6qyPleRfd22_WsIIOBd9TMwI5AVCNCju-aj-Uv44PCmB1KWV76pq9J6DCMAd3y2SEx5H1tUIgybxE8FyScRRoGibFfIyC-naw6yG0l4fzNOkSDf0QZmmW_AFjzk/s1600/twitter+tng.png" title="Follow Us on Twitter" /></a></li>
<li><a href="URL Google Plus sobat" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4aaA0r0SdoxSh4slklczwuhkkMsxt5OE0iqatzU9NhxtGBN2KI6AythJMnBHPmmjD-e-NyflWnczD5Vv4AnmdUXHLJfTWeDe-AFbxPEXJX-arY09hhkPxPC05yXqngjz7N6nfxaGBUBc/s1600/google+tng.png" title="Follow Us on G+" /></a></li>
<li><a href="URL Feedburnet sobat" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSF1cfIDg49reuw6W3_ZQZDiTB5WOL1REidvlc5kXdfHAn833p-SxEDDuA9dWVk1gjgcY2jBEruelQ2yFu1163F0XtsI16unwcpmrZMAeegtsqrCbdQYDbjjpP5yw39-DigZG-EpNNCok/s1600/rss+tng.png" title="Subscribe Us on RSS Feed" /></a></li>
</ul>
<input name="uri" type="hidden" value="pintasku" />
<input class="txtsubscribe" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input name="loc" type="hidden" value="en_US" />
<input class="btsubscribe" type="submit" value="Subscribe" />
</form>
</center>
<style>
.login {
padding: 18px 10px;
width: 300px;
background: #F8F8F8;
background-clip: padding-box;
border: 1px solid #D7DBD7;
}
.txtsubscribe {
background: #F8F8F8;
border: 1px solid rgb(197, 192, 192);
color: #999;
font-weight: bold;
padding: 7px 15px 7px 5px;
text-decoration: none;
width: 160px;
margin-top: 10px;
}
.btsubscribe {
background: #353635;
border: 1px solid #848B84;
color: #FFF;
cursor: pointer;
font-weight: bold;
margin-left: 5px;
padding: 6px;
text-decoration: none;
margin-top: 10px;
}
.subscribe-faceblog{
list-style-type:none;
margin:0;
padding:0;
}
.subscribe-faceblog li{
display:inline;
width: 60px;
height:60px;
}
.subscribe-faceblog li img{
width: 40px;
height: 40px;
margin-right: 5px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.subscribe-faceblog li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>

Keterangan :

merah

Save dan Lihat Hasilnya.

Cara Membuat Internal Link

Apa itu Atribut id ?

Cara Membuat List / Daftar Di HTML

1. Ordered List

2. Unordered List

3. Defenition List

Cara Membuat Tulisan Tebal dan Miring di HTML

Apa perbedaan dari Tag <b> dengan <strong> dan Tag <i> dengan <em> ?

Cara Membuat Link Di HTML

1. Atribut Hrep

2. Atribut Target

Apa itu Robot.txt ?

Bagaimana Cara Supaya Halaman Tertentu Tidak Terindex ?

Dimana Cara Setting Robot.txt di Blogger.

Cara Jitu Keluar Dari Google Sandbox

Apa Penyebab dari Google Sandbox ?

Bagaimana Cara Keluar dari Google Sandbox ?

Cara Membuat Judul Di HTML Dengan Tag Heading

Cara Membuat Paragraf Di HTML

Mengenal Tag Paragraf <P>

Bagaimana Cara Membuat Paragraf Lebih dari 1 di HTML ?

Cara Membuat Tombol Sosial Media Keren di Blog.

Apa Itu Google Dance ?

Apa Penyebab Terjadinya Google Dance ?

Cara Membuat Struktur Dasar Halaman HTML

1. <!DOCTYPE html> atau DTD

2. Tag <HTML>

3. Tag <Head> dan Tag <Title>

4. Tag <body>

Mengenal Tag, Elemen dan Atribut Pada HTML

Apa itu Pengertian Tag pada HTML ?

Apa itu Pengertian Elemen Pada HTML ?

Apa itu Pengertian Atribut Pada HTML ?

Cara Memasang Widget Social Media Melayang di Blog

Membuat Blok Catatan Tips, Info dan Peringatan Keren

Cara Membuat Tombol Share Dibawah Postingan Valid HTML5

Apa itu Riset Keyword ?

Bagaimana Cara Melakukan Research Keyword (Riset Keyword) ?

1. Google Keyword Suggest

2. Google Adwords: Keyword Planner

Apa itu Google Sandbox ?

Penyebab Google Sandbox :

Cara Memasang Widget Social Subscribe di Blogger.