tag:blogger.com,1999:blog-9171995947291875132024-12-19T10:22:25.813+07:00Blog EksperimenTempat Bereksperimen, Belajar Ngeblog, SEO, Javascript, html, CSS dan segala sesuatu tentang dunia mayaAnonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.comBlogger39125tag:blogger.com,1999:blog-917199594729187513.post-7024951058962753582012-09-04T01:03:00.002+07:002012-09-04T02:10:46.347+07:00Memasang Meta Tags Super SEO
Cara Memasang Meta Tags Super SEO-
Langsung saja :
Masuk ke Template Edit HTML copy Tags dibawah ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content='ISI DENGAN DESKRIPSI UNTUK BLOG SOBAT' name='DESCRIPTION'/>
<meta content='ISI DENGAN KATA KUNCI/KEYWORD KAMU' name='KEYWORDS'/>
</b:if>
&Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-5383920442285991892012-09-03T10:17:00.001+07:002012-09-04T02:10:17.189+07:00Belajar Membuat Blog WordPress Gratis
Belajar Membuat Blog WordPress Gratis Part 2 : Daftar Hosting Gratis
fgfdg
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-74578257179572086522012-09-03T09:21:00.002+07:002012-09-04T02:11:46.265+07:00Apa itu Domain?
Pengertian Dasar Domain, Apa itu Domain?
Apakah Domain itu ?
Domain adalah nama unik yang
diberikan untuk mengidentifikasi nama server komputer seperti web server
atau email server di internet.
Domain memberikan kemudahkan
pengguna di internet untuk melakukan akses ke server dan mengingat
server yang dikunjungi dibandingan harus mengenal deretan nomor atau
yang dikenal IP.
ApaAnonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-55290838027294453122012-09-03T09:20:00.002+07:002012-09-04T02:14:25.239+07:00Belajar Membuat Blog WordPress Gratis
Belajar Membuat Blog WordPress Gratis Part1 – Daftar Domain
Jika anda sedang belajar membuat blog wordpress yang benar-benar bisa
anda kustomisasi sesuka hati, trik ini sangat cocok untuk anda.
Berhubung tulisannya agak panjang, sengaja aku bagi menjadi 3 bagian
agar mudah diikuti dan dipahami.
Pada bagian pertama ini, kita akan mendaftar domain gratis. Dalam
memilih domain gratis, Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-67196663079874093272012-09-02T01:28:00.000+07:002012-09-02T01:36:19.552+07:00Membuat Label Kategori Animasi
Untuk membuat tampilan Label atau Kategori
lebih menarik, sobat bisa mencoba menggantinya dengan label yang
menyerupai awan atau yang lebih dikenal dengan nama Label Cloud. Untuk
membuatnya, anda cuma harus mengikuti beberapa langkah berikut dan copas kode tanpa edit HTML alias lebih simple dan mudah.
1. Login ke akun blogger anda
2. Klik rancangan – element – tambah gadget HTML/Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-12349974239019018062012-09-01T17:13:00.001+07:002012-09-01T18:10:02.217+07:00Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi
Salin kode di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:
blockquote.collapsed {
margin:15px 30px;
font:italic 12px Georgia,Serif;
color:#FDD404;
text-shadow:1px 1px 1px #000000;
text-align:justify;
height:0px;
padding:0px 0px;
background-color:#333333;
border:10px solid #222222;
 Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-64266083403696079512012-09-01T08:14:00.000+07:002012-09-01T08:14:03.765+07:00Popular Post Widget Dengan Animasi
Script ini sangat mudah tinggal masukkan Script di bawah ke dalam "Gadget" Blogger
Masuk ke Blogger Dashboard dan Pilih Design - Page Elements
Klik "Add Gadget" dan pilih "Popular Posts" jumlah popular postingan harus lebih banyak dari 4 (Jika sudah ada gadget ini jangan masukan lagi)
Setelah anda mempunyai Popular Post Gadget kemudian klik "Add Gadget" lagi dan pilih "HTML/Javascript"
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-25401999814961325612012-09-01T08:01:00.000+07:002012-09-01T08:01:15.794+07:00Memasang tags ALT dan TITLE Pada Gambar Secara Otomatis
Memasang tags ALT dan Title
Secara teknis untuk mencapai SEO
pengguaan tag ALT dan TITTLE pada gambar sangatlah penting, karena jika
tanpa itu robot google tidak bisa membaca gambar yang kita unggah dan
untuk mengatasi masalah itu mari kita terapkan tutorial ini pada blog
kita.
Cara penerapannya letakkan kode berikut diatas kode </body>
<script src='https://Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-15426463773870096492012-08-31T19:43:00.000+07:002012-08-31T19:43:43.791+07:00Cara Menduplikasi Semua Hasil Postingan Pada Blog Bagaimana cara untuk menduplikasi postingan ini? Nah bagi kamu yang belum tahu caranya silahkan ikuti langkah-langkah berikut :
Langkah pertama
Login ke akun blogger kamu.
Dari halaman Dasbor, pilih Pengaturan blog asli kamu, sehingga nampak seperti gambar berikut:
Selanjutnya klik pada bagian Ekspor blog, sehingga muncul seperti gambar berikut:
Klik Unduh blog, dan tekan Ok untuk melakukanAnonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-13224747439603837552012-08-31T11:44:00.000+07:002012-08-31T11:44:03.899+07:00Tooltip Kustom Otomatis untuk Semua Tautan Salin kodenya dan letakkan di atas tag </body>
<script type="text/javascript">
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(function() {
var a = document.getElementsByTagName('a');
var t = document.createElement('span');
t.id = "tt";
t.style.position = "absolute";
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-71553843356778449172012-08-31T10:45:00.000+07:002012-08-31T10:45:06.478+07:00Membuat Blog Pager/Navigasi Halaman Blogspot Melayang
Page Navigasi Melayang
Metode pembuatan blog pager/navigasi halaman melayang ini pada dasarnya sama dengan metode pembuatan navigasi breadcrumb melayang. Ada dua posisi peletakkan yang bisa kamu ambil, yaitu posisi melayang di atas atau di bawah jendela.
Pertama-tama masuklah ke halaman editor HTMLtemplatemu, lalu cek Expand Template Widget agar seluruh elemen pembangun posting tampilAnonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-5857985366695003352012-08-31T09:25:00.004+07:002012-08-31T09:25:56.185+07:00Membuat Kotak Keterangan Penulis/Author Box di Bawah Posting Mungkin kalian sudah pernah melihat kotak kecil berisi keterangan dan
pesan penulis disertai judul posting dan tanggal terbit yang biasa
ditampilkan di bawah posting, namun di sini Saya hanya ingin menawarkan
tampilan yang sedikit berbeda seperti ini:
Di sini Saya telah menerapkan beberapa kode perwakilan yang umum
terdapat di dalam sebuah widget posting seperti kode perwakilan judul,
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-60712236207184504082012-08-30T22:18:00.001+07:002012-08-30T22:18:15.171+07:00Mengubah Ukuran Tumbnail Popular PostVersi Javascript
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(parentID, size) {
var parent = document.getElementById(parentID),
image = parent.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
image[i].width = size;
image[i].height = Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-70323972579218160672012-08-30T19:35:00.000+07:002012-08-30T19:35:00.834+07:00CSS Spoiler Kode HTML
<input type="checkbox" class="trigger"/> Buka/Tutup Spoiler
<div class="spoiler">
Konten di sini...
</div>
Kode CSS
input.trigger {
display:inline-block;
margin:0px;
padding:0px;
}
.spoiler {
background-color:white;
padding:15px 30px;
margin:10px 0px 0px;
display:none;
}
input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-59950595184752046532012-08-30T18:57:00.000+07:002012-08-30T18:57:07.898+07:00CSS3 Loading Bar
Kode CSS
.loading {text-align:center;}
.loading span {
display:inline-block;
margin:0px 1px;
width:20px;
height:20px;
background-color:cyan;
}
.loading span:nth-child(1) {
-webkit-animation:loading 0.5s infinite alternate 0s;
-moz-animation:loading 0.5s infinite alternate 0s;
-ms-animation:loading 0.5s infinite alternate 0s;
-o-animation:loading 0.5s infinite alternate 0s;Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-29446307838341364072012-08-30T18:25:00.001+07:002012-08-30T18:48:03.037+07:00Membuat Efek Bayangan pada Area
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:
CSS Bayangan Outset
div {
-webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
-moz-box-shadow:10px 10px 7px #222; /* Firefox */
box-shadow:10px 10px 7px #222; /* W3C */
}
CSS Bayangan Inset
div {
-webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-14295504480179843102012-08-30T17:29:00.001+07:002012-08-30T17:29:35.453+07:00Membuat Text Area 2Melanjutkan posting awal Tentang TextArea 1, untuk memperkaya pengetahuan kita berikut iini beberapa textarea lainnya :
Klik di kotak Area, otomatis text didalam textarea akan di highligh semua
<div style="text-align: center;"> <textarea cols="25" onclick="this.focus(); this.select();" rows="3">
Contoh Text Area otomatis seleksi saat di klik
</textarea></div>
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-82596509376885955572012-08-30T17:15:00.001+07:002012-08-30T17:15:26.781+07:00Membuat Textarea 1
Apa itu text area?. Untuk memudahkan
anda memahami apa itu text area, silahkan alihkan perhatian anda ke
kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah
kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut
text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa
Text area adalah area atau tempat untuk menyimpan text atau tulisan
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-83218445553371873622012-08-30T17:03:00.001+07:002012-08-30T17:54:47.651+07:00Modifikasi Tampilan Text Area/input TextSatu lagi penerapan CSS dalam elemen-elemen input. Sekarang Saya akan memberikan beberapa tip untuk tampilan input text dan textarea.
Ini adalah contoh tampilan input text dan textarea biasa:
Tampilan Textarea Biasa
Dan ini adalah CSS untuk mengubah tampilannya:
input[type="text"] {
font:normal 12px Verdana,Sans-Serif;
border:1px solid #dcdcdc;
background-color:#fafafa;
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-39623519672957580812012-08-30T16:44:00.004+07:002012-08-30T16:44:57.405+07:00Artikel Terkait dengan/tanpa Scroll Bar (no image)Jika kalian merasa tidak suka dengan gaya artikel/posting terkait dengan gambar/thumbnail, berikut ini adalah model elemen posting terkait berbentuk daftar yang lebih sederhana dan praktis:
Artikel Terkait bentuk Daftar
Untuk membuatnya, ikutilah langkah-langkah kebenaran Saya ini:
Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-56269421640858950292012-08-29T21:56:00.000+07:002012-08-29T22:13:42.712+07:00Membuat Readmore Otomatis
Readmore Otomatis
Pada tahu belum apa itu read more?? itu tuh biasanya kalau di halaman depan blog
kan banyak banget tuh daftar postingannya. Biar gak terlalu panjang,
maka postingan pada halaman depan itu disingkat, maksudnya yang tadinya
panjang hanya sebagian saja yang ditampilkan, nah untuk membuat yang
semacam itu menggunakan read more, jika pembaca ingin melanjutkan membaca Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-3740895855571609932012-08-28T23:58:00.000+07:002012-08-29T00:15:36.979+07:00Modifikasi Widget Popular Post With Grid Layout
Modifikasi Widget Popular Post
Grid Layout For The Popular Posts Widget - Cara membuat atau memodifikasi widget popular post menjadi lebih keren bergaya grid layout,
seperti yang kita tahu untuk tampilan widget bawaan blogger ini cukup
menarik, tapi bisa kita modif lagi dengan gaya yang berbeda, dan lebih
keren tampilannya. Pastinya diluar sana sudah banyak yang share tentang
Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-69501057456102577822012-08-28T05:53:00.001+07:002012-08-28T05:53:56.349+07:00Menampilkan Tanggal dan Waktu dengan Javascript
Untuk Menampilkan Hari dan Tanggal, kopas script dibawah ini kedalam eleman laman html/javascript berikut ini (letakkan sesuai dengan keinginan)
Menampilkan Tanggal Versi Bahasa INDONESIA
<script type='text/javascript'>
function dispDate(dateVal) {
DaystoAdd=dateVal
TodaysDate = new Date();
TodaysDay = new Array('Minggu', 'Senin', 'Selasa','Rabu', 'Kamis', 'Jum&#39;at',Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-75218851300500572902012-08-27T20:22:00.001+07:002012-08-27T20:22:44.483+07:00Widget Recent Post Animasi
Widget yang tampak di atas adalah widget recent post/posting
terbaru dengan begitu banyak pilihan. Anda bisa menyembunyikan gambar,
komentar, bulan terbit dan ringkasan atau sebaliknya, menampilkannya.
Menentukan apakah widget ini akan dianimasikan atau tidak juga bisa
dilakukan. Cukup ikuti langkah-langkah di bawah ini dan pelajari tabel
konfigurasinya:
Pertama-tama masuklah ke Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0tag:blogger.com,1999:blog-917199594729187513.post-6160266455343611042012-08-27T15:30:00.002+07:002012-08-27T15:30:37.089+07:00Back To Top Smooth Scroll dengan JQuery
Smooth scroll back to top, adalah sebuah alternatif lain selain pembuatan elemen back to top biasa yang hanya akan mengantarkan Anda menuju ke atas saja tanpa adanya pemberian efek cantik. Untuk membuat tombol back to top biasa caranya sangat sederhana, yaitu dengan cara membuat sebuah tag hyperlink yang memiliki nilai href="#", sekedar untuk mengarahkan Anda ke atas. Intinya adalah, setiap Anonymoushttp://www.blogger.com/profile/04471593278708116268noreply@blogger.com0