Home » Archives for 2011

Menampilkan Gambar Profile dihalaman Hasil Pencarian Google

Bisa dipastikan robot Google sekalipun tidak mungkin bisa menentukan keaslian
suatu artikel, yang mungkin bisa tentu saja hanya penulis artikel itu sendiri.
Tapi dengan hadirnya fasilitas untuk menampilkan gambar Profile Anda dalam hasil
pencarian tentu ini akan menjadi cerita lain, selain terlihat bahwa Anda adalah
penulis sebenarnya dan itu juga menjadi kesan profesional buat Anda. Coba saja
Anda mencari artikel yang menarik di Google, Anda tentu akan melihat 10 hasil
pencarian pertama dan bisa dipastikan semuanya mempunyai judul yang hampir mirip
bahkan sama persis, lalu bagaimana jika di antara 10 hasil pencarian tersebut
terpajang wajah tampan Anda, tentu si pencari akan melirik Anda terlebih dahulu
walapun artikel blog Anda sendiri hanya berada pada urutan ke 6, itu karena
halaman Google sering berisi penuh dengan teks dan dengan demikian orang mungkin
akan tertarik lebih ke arah hasil yang memiliki beberapa elemen visual (foto
penulis) yang melekat padanya. Asalkan bukan artikel COPAS aja ya tar malah
malu2in, udah copas nampang pula hehehe

Cara menampilkan gambar Profile dihalaman hasil result Google:

CARA I:

1. Pertama, silahkan buat satu halaman "About me" di blog Anda, untuk
pengguna blogger Anda bisa membuatnya melalui halaman Statis Page atau bisa juga
menggunakan halaman Standar Post. Agar lebih mudah Anda bisa melihat halaman
"About me" milik saya
disini.

2. Buat satu Text Link yang mengarah ke halaman URL Profile Google+ Anda dan
jangan lupa menanamkan satu Tag rel="me" (ingat
hanya satu tag saja) dalam link tersebut.

<a href="https://plus.google.com/ID_Anda" rel="me">Agus Ramadhani</a>

3. Ini sangat penting, pastikan semua artikel diblog Anda terkait kehalaman
"About me". Caranya sangat mudah, Anda tinggal memasang saja link "About me" di
menu, saya sendiri memasangnya di halaman About dalam widget saya (lihat paling
bawah di blog ini ditandai dengan text link Read more
), dan pastikan Anda memasang Tag rel="author"
pada link tersebut.

<a href="http://www.blog-Anda.com/p/about-me.html"
rel="author">About me</a>

4. Langkah terakhir silahkan masuk ke halaman profile Google+ Anda disini
https://plus.google.com
dan tuju ke tombol "Edit Profile" kalau sudah silahkan tuju ke pengeditan
"Profile lainnya", biasanya Anda diminta untuk memasukan alamat blog Anda, nah disini Anda tinggal memasukan Link "About me" saja beserta
URL-nya.

Sampai tahapan ini sebenarnya sudah selesai dan biarkan google merayapi
halaman Anda terlebih dahulu. Perlu juga diketahui bahwa tidak ada jaminan
gambar anda akan tampil, semua tergantung analisa google itu sendiri setelah
merayapi halaman anda.

CARA II:

Cara yang kedua jauh lebih praktis dimana Anda tinggal
menambahkan satu badge icon profile saja, caranya silahkan langsung menggunakan
Profile Button Creator dialamat ini

http://www.google.com/webmasters/profilebutton

Pastikan cara kedua ini tidak berlaku jika Anda sudah menggunakan cara
pertama, jika tidak akan terjadi duplikat Profile Author.

Verifikasi Author

Agar gambar Profile Anda bisa tampil dan berjalan dengan sempurna sebaiknya
Anda perlu melakukan verifikasi dengan mengujicobanya terlebih dahulu.

1. Silahkan buka

Rich Snippets Testing Tool

2. Masukan salah satu link artikel (posting) Anda yang terbaru.

3. Jika tidak ada masalah maka gambar profile beserta nama Anda akan muncul
dan ditandai dengan nilai verifikasi yang bener.

Tips jika ada kesalahan

1. Pastikan Anda hanya menggunakan kedua tag rel="me" dan rel="author"
diatas satu kali saja jangan sampai ada duplikat.

2. Pastikan Anda benar-benar memasukan gambar Anda pada Profile Google+,
sebaiknya termasuk dengan Isi biodata Anda secara lengkap.

3. Pastikan halaman profile Google+ Anda benar-benar terkait dengan halaman
blog Anda, termasuk halaman About me tadi.

4. Google akan memilih thumbnail gambar dari halaman Profil Google+ Anda,
sebaiknya gunakan gambar yang sebenarnya dari diri Anda sendiri (bukan ikon).
Gambar harus terlihat baik bahkan ketika dikompresi menjadi gambar thumbnail
50x50.

Silahkan baca dokumentasi selengkapnya
disini

Semoga tutorial diatas berguna :)

Cara Memasang Tombol Google+ di Blogger

Saya yakin pembaca setia blog ini tidak kesulitan untuk memasang tombol Google+ (G+), tapi tidak semua juga mengerti caranya, terlebih yang baru
belajar ngeblog. Selain itu disini saya juga mencoba menjelaskan secara
rinci dari beberapa masalah yang kadang membuat tombol Google+ tidak bekerja
sebagaimana mestinya. Jadi silahkan luangkan waktu sejenak untuk belajar
tutorialnya dibawah ini:

Langkah memasang tombol G+ sangat mudah silahkan ikuti tutorial dibawah
ini

Silahkan memasang Script dibawah ini atas Tag </body>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Kemudian anda bisa memasang tombol G+ dimana saja dengan menambahkan kode
dibawah ini.

<g:plusone size="small"></g:plusone>

Cara memasang tombol G+ diatas sebenarnya sudah selesai, tapi jika anda ingin
menambahkan kode yang lebih rinci anda bisa mencoba beberapa script dibawah ini:

Tombol G+ dengan ukuran Standar (24 piksel)

<g:plusone></g:plusone>

Tombol G+ dengan ukuran Kecil (15 piksel)

<g:plusone size="small"></g:plusone>

Tombol G+ dengan ukuran Sedang (20 piksel)

<g:plusone size="medium"></g:plusone>

Tombol G+ dengan ukuran Tinggi (60 piksel)

<g:plusone size="tall"></g:plusone>

Tombol G+ Untuk HTML5

<div class="g-plusone" data-size="standard" data-count="true"></div>

Anda juga dapat membuat custom tombol G+ sendiri

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {"parsetags": "explicit"}
</script>
<script type="text/javascript">
  function renderPlusone() {
    gapi.plusone.render("plusone-div");
  }
</script>
<body>
  <a href="#" onClick="renderPlusone();">Render the +1 button</a>
  <div id="plusone-div"></div>
</body>

Custom Tombol G+ dengan URL khusus

<!-- customized for a specific address -->
<g:plusone href="https://plus.google.com/108442421331149025926"></g:plusone>

Untuk customize tombol G+ saya menyarankan anda memasukan url dari Google+ profile atau halaman (page) G+ yang sudah ada buat, lihat tutorialnya disini

Cara pasang Tombol G+ disebelah Tombol Facebook (dalam halaman posting)

Kode standar Google+ tidak bekerja pada postingan dalam lingkup halaman
home (index).

Pada halaman Posting dengan menggunakan kode

<G:Plusone/>
biasanya tidak terjadi masalah, tapi saat kalian mencoba memasang tombol G+ yang
ditujukan pada halaman post yang letaknya berada dalam halaman utama ini
biasanya bermasalah karena G+ setahu saya tetap akan mendeteksi sebagai halaman
index bukan sebagai halaman post. Untuk mengatasi masalah ini silahkan mencoba
menggunakan kode ini <g:plusone expr:href='data:post.url'/>

Sebenarnya G+ sendiri sudah menyedian Custom Badge yang bisa anda coba
langsung di alamat ini
disini atau
anda bisa melihat informasi Full API selengkapnya
disini

Jangan lupa bergabung dihalaman G+ saya:

Halaman Resmi Agus Ramadhani

Halaman Resmi o-om.com

Halaman Resmi
Zoomtemplate.com

Bagaimana Membuat Halaman di Google+

Seperti Facebook yang sukses membuat halaman Page khusus selain halaman
profile, Google+ (G+) beberapa waktu lalu juga kembali merilis halaman page yang
khusus dibuat untuk tujuan halaman penggemar seperti website, merek, bisnis dll. Dan tidak diragunakan lagi halaman ini sangat berguna untuk membuat saluran trafik dengan cara mempromosikan blog atau website. Jika anda sudah pernah membuat halaman
page untuk facebook saya rasa anda tidak akan bertanya lagi dengan page pada
G+ karena cara kerjanya sangat mirip dan hampir sama :)

Ada kelebihan yang di miliki Page pada G+ jika dibandingkan Facebook,
dimana Page pada G+ dalam waktu dekat akan terintegrasi dengan hasil pencarian
pada Google Search Engine, kita cukup memberi tanda (+) saja sebelum melakukan
pencarian, misalkan kita mengetikan +pepsi atau +angry bird maka secara
otomatis Google akan memberikan hasil result tertentu yang terkait dengan Page
pada G+. Bayangkan jika itu adalah halaman anda yang tampil pertama, tentu BOOM
trafik tidak akan diragukan lagi. Tapi ada tapinya, halaman yang muncul mungkin
adalah halaman yang populer dengan jumlah penggemar terbanyak :) jadi berusahalah
untuk membuat halaman G+ anda Populer, asalkan jangan buka halaman Salon ++ aja ya
wkwkwkkwk.

Tutorial Cara Membuat Halaman di Google+

Prosesnya gak ribet dan sangat sederhana yang penting anda sudah terdaftar
disana.

1. Langsung tuju ke halaman ini

https://plus.google.com/pages/create

2. Pilih halaman yang ingin anda buat, Saya sendiri memilih tab (Lainnya)
atau anda bisa memilih halaman tertentu misalkan blog atau website jadi terserah saja.

3. Silahkan masukan judul halaman dengan alamat blog yang ingin dipromosikan.
Jangan lupa beri tanda centang bahwa anda setuju dan tekan tombol (Buat)

4. Masukan slogan halaman minimal 10 kata dan tambahkan photo biar manis.

5. Selesai, tinggal di promosikan saja linknya :)

Jangan lupa bergabung dihalaman G+ saya:

Halaman Resmi Agus Ramadhani

Halaman Resmi o-om.com

Halaman Resmi
Zoomtemplate.com

Launching Zoom Free Video Tutorials

Rasanya kurang lengkap kalau saya hanya menyajikan materi
Blogger Tutorials dan membagikan
Blogger Templates secara gratis saja,
untuk melengkapinya, hari ini saya coba mengembangkan blog yang khusus
menampilkan semua
Free Video
tutorials secara visual. Walapun saat ini semua
tutorial video
yang saya publikasikan hanya video milik orang lain, saya rasa itu tidak
jadi masalah :) yang penting semua video tersebut bisa jadi media cara mudah belajar ngeblog. Semoga saja untuk kedepannya saya juga memiliki video buatan sendiri :)

Kalau rekan punya video tutorial buatan sendiri atau memiliki
referensi tutorial video menarik lainnya..tidak ada salahnya
mengirimkannya kepada saya biar bisa di publikasikan dan kita pelajari
bersama. Silahkan sambangi aja langsung blog video tutorial terbaru saya disini

SERP SEO Tool Khusus Untuk Kontes SEO

Search Engine Results Page (SERP) Tool ini merupakan SEO Tools yang dirancang khusus untuk memudahkan sobat melacak kata kunci target di Search Engine Google. Ini sangat berguna buat sobat yang sedang ikutan kontes atau sekedar hanya untuk melacak posisi keyword target di Google.

Cara melacak:

1. Untuk mencobanya silahkan Langsung ke Sini

2. Masukan Kata Kunci (keyword) yang sedang di ikutkan dalam Lomba SEO Kontes.

3. Masukan Alamat URL Blog yang sedang di lombakan (bisa url saingan atau url sendiri).

4. Pilih target URL Google misalkan lomba diadakan pada Google.com atau Google.co.id (Indonesia).

5. Selalu pastikan memilih YES untuk membersihkan Cache Browser agar hasil pencarian Maksimal.

6. Jika target ditemukan, hasil Pencarian dilacak per 10 result dan ditandai dengan pada nomor halaman.

Semoga Tool diatas bermanfaat :)

Membuat Amplop + Perangko Dengan CSS3

Sudah pernah baca tulisan agenda saya di blog RudyAzhar ? Kalau belum coba baca dulu deh, Nah di postingan tersebut ada amplop yang dibuat dengan CSS3 plus perangkonya. Jadi saya pingin berbagi cara pembuatannya disini. Dan yang saya bagikan hanya kode CSS & HTML saja, saya anggap kalian tahu penempatannya dimana Oke....

Markah HTML

Pertama kita buat dulu markah HTML sebagai berikut :

<div class="amplop">
<span class="perangko triangle"><img src="/wp-content/uploads/2011/10/perangko.jpg" alt="Perangko Sukarno"/></span>
 Dari: Rudy Azhar
<span class="to">Untuk: Keluargaku</span></div>

Satu-satunya gambar yang dipakai adalah gambar Soekarno sebagai perangkonya, tapi sisinya tetap memakai CSS3.

CSS untuk Amplop

Mari kita bentuk CSSnya, pertama sekali kita akan membuat CSS untuk amplopnya dulu.

.amplop {
position:relative; 
width:650px; 
height: 400px; 
margin-bottom:25px; 
border:15px solid transparent;
background: #feb;
}

Hasilnya akan seperti gambar dibawah ini :

Tahap Kedua kita tambahkan garis-garis berwarna biru dan merah pada setiap sisi amplop dengan menggunakan CSS3 linear-gradient.

background-image: -moz-linear-gradient(#feb, #feb), 
-moz-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -ms-linear-gradient(#feb, #feb), 
-ms-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -o-linear-gradient(#feb, #feb), 
-o-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -webkit-linear-gradient(#feb, #feb), 
-webkit-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-clip: padding-box, border-box;
background-origin: border-box;

Maka hasilnya akan berbentuk seperti ini.

Sampai tahap diatas sebenarnya amplop sudah jadi, tapi saya akan menambah sedikit pemanis dengan box-shadow agar amplop ada kesan timbul serta atribut untuk font.

font: italic 100% Georgia, serif;
box-shadow:2px 2px 13px rgba(0,0,0,.5);

CSS Keseluruhan untuk Amplop

.amplop {
position:relative; 
width:650px; 
height: 400px; 
margin-bottom:25px; 
border:15px solid transparent;
background: #feb;
background-image: -moz-linear-gradient(#feb, #feb), 
-moz-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -ms-linear-gradient(#feb, #feb), 
-ms-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -o-linear-gradient(#feb, #feb), 
-o-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -webkit-linear-gradient(#feb, #feb), 
-webkit-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-clip: padding-box, border-box;
background-origin: border-box;
font: italic 100% Georgia, serif;
box-shadow:2px 2px 13px rgba(0,0,0,.5);
}

Amplopnya sudah jadi, sekarang tinggal kita membuat perangko biar bisa dikirim via Pos...he...he...he... Sebenarnya nggak usah memakai perangko juga bisa, dengan memanfaatkan Kilat Khusus tapi demi menghemat biaya perangko bisa jadi alternatif.

CSS untuk Perangko

Untuk perangko sebaiknya kita cari dulu gambar yang sesuai, kalau sudah ketemu baru kita buat pinggirannya.

.amplop span.perangko {
background: #d8bb9d;
display: block;
float: right;
height: 136px;
margin-left: 20px;
padding: 5px;
width: 101px;
}

.amplop span.triangle {
background-image: -webkit-linear-gradient(45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -webkit-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb);
background-position: 0% 0;
background-repeat: repeat;
background-size: 10px 10px;
background-image: -o-linear-gradient(45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -o-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb); 
background-image: -moz-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -moz-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb); 
background-image: -ms-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -ms-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb); 
background-image: linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb);}

.amplop span.perangko img {
background: #d8bb9d;
display: block;
height: 126px;
padding: 5px;
width: 92px;
}

Untuk perangko ini belum sempurna dibuat karena hanya bagus jika dilihat dengan menggunakan brower Chrome, kalau dilihat menggunakan FireFox masih kurang bagus...he..he...he...

Lihat Demo secara Online →
Nah, udah jadi deh Amplop + Perangko yang siap dikirim lewat Pak Pos...he...he...he... Tapi kira-kira Pak Posnya nerima nggak ya karena semuanya dibuat dengan CSS3... wkwkwkwkwkwkwk.....

Blogger Templates 2012: Blogger Store V2

This is Blogger Store v.2 the best blogger templates 2012 ever made. Comes with more elegant, simple and fresh fresh design. Its beauty can you see in the background pattern on the body and main content combined with appropriate background color.

Download | Live Demo

What the features of Blogger Store v2 ?

I added some new features that do not exist in previous versions, and
here the features you can find on this template.

1. SimpleCart.js v2.2.2.

This template still using SimpleCart.js v.2.2.2 by
The Wojo Group as
ShoppingCart framework. Since I did some editing on this script, now you can
using Indonesian Rupiah (IDR) for the currency. But it’s just a fake because
Indonesian Rupiah currently not listed on
Paypal.

2. Animated ShoppingCart

I added a little animation effects on shopping cart, at default position he
would not be visible and show only the total item and the total price and will
be visible if you click on shopping cart menu. It will further reduce the use of
space on your blog page

2. Superfish Menu.

I’ve added 2 pieces of dropdown menu, Top Secondary and Primary menu. I use

superfish for it because I think superfish is better and give a
softer effect than jQuery sliding menu on blogger store old version.

3. Automatic Featured Content with jQuery Carousel Fred.

As my framework i always using automatic methode for all of my template. and
specially for Blogger Store v2.0 I’m using Automatic featured content from jQuery
Crausel Fred v.4.5.2, this is automaticly work to displaying product by
label or recent product also can display from another source, just need a
several setting.

4. Grid and List Style post integrated with jQuery Plugin.

This is a great one !! you will see two view style on this template, default
is Grid style and will be change to List style if you click switcher button.
This feature is integrated with jQuery Cookie Plugin, so the visitor can see
style of the last time they visited.

5. Advanced Blogger Template Designer Support

This feature gives you flexibility to customize the background and color of
template on Template Designer, so you can get unlimited color and unlimited font
for your template, available for :

Body Background Color

Main Text Color

Font Style and Size

Text Link Color

Background Menu Color

Background and border for Shopping Cart Color

This template also have several additional features:

6. Social Bookmark Icon

7. Search Form

8. Ads Space

9. Animated Sponsors Logo

10. Pattern Background.

I hope you like this template..

Trik Membuat Kotak Banner

Posting merupakan tanggapan kami terhadap pertanyaan Saudari Sri Wahyuni dengan menggunakan fasilitas “Kontak” tanggal 14 September 2011. Mungkin mba telah membaca posting sebelumnya yang berjudul “membuat kotak banner”. Tetapi tidak ada demo untuk melihat hasil pengkodean tersebut.

Pada trik blogger kali ini, kita akan mencoba memperbaharui trik sebelumnya dengan menggunakan CSS3. Widget dikustomisasi untuk pemanfaatan banner berukuran 125×125. Setiap kode CSS dapat diletakkan sebelum ]]></b:skin> & HTML dimasukkan ke dalam penambahan gadget atau widget. Mari kita ikuti bersama trik membuat kotak banner yang dimaksud.

Widget Banner I

CSS

/* Area yang akan digunakan untuk memasang Banner */
.kotak-banner {
background:#999;
border:2px solid #c3c3c3;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

/* Tempat untuk memasang Banner di atas kode ini */
.banner {
background:#c3c3c3;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
position:relative;
width:45.5%;
text-align:center;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}

/* Memunculkan title image saat di dekati tetikus (mouse) */
.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
left:4%;
bottom:3%;
width:92%;
position:absolute;
z-index:1;
}

.banner img {
margin:4% auto 0;
width:125px;
height:125px;
}

.banner:hover {
background:#f1f1f1;
-webkit-box-shadow:0px 0px 5px #fff;
-moz-box-shadow:0px 0px 5px #fff;
-o-box-shadow:0px 0px 5px #fff;
-ms-box-shadow:0px 0px 5px #fff;
box-shadow:0px 0px 5px #fff;
}

<div class="kotak-banner">
  <div class="banner"><a href="###" title="Banner 125x125"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGLlQe7AJnB0xf2VFoNP7kDPPO1CvsHcQmMreATA4apI95AoIkex3kswX9kdbr-VkxpXiNtXTSUo43NfaDkOaUYNQpYaoEl6DZ4QnbMqWRzTpctjvPRkqoNBEsamVmSq1RH4cDL3WFVyE/s800/125x125png.png" alt="Banner"/></a>
  </div>

...

</div>

Catatan:

Copy & paste dimulai kode <div class="banner"> … </div> pada titik, titik,titik (...) untuk menambah banner.
Ganti kode yang dicetak tebal dengan alamat website/halaman blog tujuan banner.
Rubah title (warna biru) sesuai dengan title banner. Nah, title inilah yang akan muncul nantinya dalam banner kita, ketika banner di hover.
Ganti gambar (warna ungu) sesuai dengan alamat gambar (banner) disimpan.
Tambahkan alt seperti yang dicontohkan pada kode yang diberi warna hijau.

Widget Banner II

CSS

cara pengkodean hampir mirip dengan kode CSS pada “Widget Banner I”, cuma merubah background, border, dan ditambah sedikit variasi transform:scale (warna orange). Berikut gambaran kode CSS keseluruhannya.

.kotak-banner {
border:2px solid #444;
margin:0 auto 1.7143em;;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

.banner {
background:#444;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

.banner a:hover:after {
background-color:rgba(0,0,0,0.15);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}

.banner img {
margin:4% auto 0;
width:125px;
height:125px;
}

.banner:hover {
background:#eee;
-webkit-box-shadow:0px 2px 5px #333;
-moz-box-shadow:0px 2px 5px #333;
-o-box-shadow:0px 2px 5px #333;
-ms-box-shadow:0px 2px 5px #333;
box-shadow:0px 2px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
z-index:5;
}

HTML

Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.

Widget Banner III (Rotasi Banner Random)

CSS

.kotak-banner {
background:#fff;
border:2px solid #d4d4d4;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

.banner {
background:#fafafa;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
-ms-transform:rotate(-2deg);
transform:rotate(-2deg);
}

.banner:nth-child(even) {
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
-o-transform:rotate(4deg);
-ms-transform:rotate(4deg);
transform:rotate(4deg);
}

.banner:nth-child(3n) {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
position:relative;
}

.banner:nth-child(4n) {
-webkit-transform:rotate(-4deg);
-moz-transform:rotate(-4deg);
-o-transform:rotate(-4deg);
-ms-transform:rotate(-4deg);
transform:rotate(-4deg);
}

.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}

.banner img {
margin:4% auto 0;
width:125px;
height:125px;
}

.banner:hover {
background:#fafafa;
-webkit-box-shadow:2px 4px 5px #333;
-moz-box-shadow:2px 4px 5px #333;
-o-box-shadow:2px 4px 5px #333;
-ms-box-shadow:2px 4px 5px #333;
box-shadow:2px 4px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
position:relative;
z-index:5;
}

HTML

Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.

Generalisasi

Anda pun dapat menambah, menghilangkan, & memodifikasi widget banner di atas sehingga sesuai dengan yang Anda inginkan. Berhubungan dengan “Widget Banner III” mungkin akan lebih baik jika diterapkan dalam image gallery. Lebih jelas tentang penggunaan CSS3 transform dalam polaroids—termasuk juga image gallery—dapat dipelajari pada website ZURBexpo.Silakan memilih bentuk widget banner yang Anda kehendaki.

Tips SEO pada Blogger.com Bagian Kedua

Ok! Kita akan lanjut pada ulasan tentang SEO. Perlu menjadi catatan penting bahwa posting ini merupakan kelanjutan posting sebelumnya. So, jika Anda terlewat untuk membacanya, saya menyediakan link untuk meloncat ke posting Tips Search Engine Optimization (SEO) pada Blogger.com sebelumnya.

Men-submit Blog ke Perkakas Webmaster

Tentu kita tidak asing lagi dengan yang namanya perkakas web. Betul, perkakas webmaster merupakan salah satu layanan google yang memungkinkan kita untuk mengoptimalkan blog agar terindeks dengan baik. Bagaimana caranya dapat anda baca pada posting Submit Sitemap Blogger.com di Google Webmaster Tools dan Solusi Submit Sitemap di Webmaster Tools.

Update (27 September 2012): cara men-submit situs web atau blog di tiga mesin pencari dapat dibaca pada posting Mendaftarkan Situs Web atau Blog ke Google, Yahoo dan Bing.

Link Building

Link building merupakan usaha untuk membangun tautan dengan menggunakan kata-kata yang mengandung keyword & sesuai dengan tema blog. Tautan dengan kata atau frase kata yang mengandung kata kunci berarti memperjelas target tema yang telah ditetapkan, sedangkan sesuai dengan tema dapat berati bahwa tautan-tautan tersebut mempertahankan tradisi kata kunci utama blog dalam search engine. Terkadang kita keliru mengartikan link building sebagai mengumpulkan tautan sebanyak-banyaknya tanpa mengindahkan kualitas dari kata kunci maupun web/blog yang kita beri tautan (sumber tautan).

Berikut merupakan daftar yang seharusnya kita lakukan dalam membangun tautan yang baik.

Menautkan kata kunci yang sesuai pada posting satu dengan lainnya dalam blog. Ini sesuai dengan posting tips SEO sebelumnya pada tahapan “Membuat Posting dengan hati SEO”.
Kata kunci pada tautan seharusnya menggambarkan dengan jelas tentang apa yang ditautkannya dengan sumber tautan. Dalam bahasa sederhana mungkin dapat dikatakan bahwa kata-kata dalam link menggambarkan sumber link tersebut. Contoh:
- Jika Anda ingin membaca tentang SEO, silakan kunjungi posting [link]Tips Blogging SEO dalam posting[/link] dan [link]SEO dalam Tautan[/link].
- Jika Anda ingin membaca tentang SEO, silakan kunjungi posting [link]di sini[/link] dan [link]di sana[/link].
Berdasarkan contoh di atas, manakah menurut Anda tautan yang lebih ber-kualitas?
Sesekali buatlah sedikit ulasan (review) tentang sumber tautan yang berasal dari web/blog lain. Hal tersebut terkadang mendapat respon positif dari sang empu-nya tautan. Coba bayangkan, jika sumber tautan tetrtarik dengan review kita & kemudian membalas dengan tautan yang mengarah ke posting di blog kita. Bukankah hal tersebut lebih positif dibandingkan dengan “meminta” ditautkan?
Berkenaan dengan poin di atas, bagaimana web/blog lain akan tahu tentang isi posting kita, jika mereka tidak diberitahu. Banyak cara untuk menuju ke sana, salah satu jalan yang cukup ampuh adalah meninggalkan komentar yang relevan serta memiliki bobot dengan posting yang telah dibaca. Memang tidak akan menimbulkan banyak pengaruh di search engine, tetapi jika komentar kita tersebut berguna, maka secara tidak langsung pemilik web/blog & pengguna lain akan tertarik untuk mengunjungi blog kita.
Sebuah blog akan memiliki nilai tersendiri dalam search engine, jika link yang keluar lebih banyak daripada link yang masuk. Dan akan lebih besar lagi nilainya, jika link yang keluar ditaut oleh web/blog yang memiliki kesamaan tema. Jangan pula karena ingin menghindari link yang masuk, maka posting yang seharusnya bersumber pada posting lain, malah tidak mencantumkan tautan sumber tersebut. Ingat! kita telah melakukan repost, sehingga menjadi sebuah keharusan jika kita mencantumkan tautan sumber. Ironisnya lagi, kita telah mencantumkan tautan sumber, tetapi tautan tersebut memiliki properti rel="nofollow". Pernahkan Anda berpikir, seseorang mungkin butuh berhari-hari untuk menyempurnakan postingnya?
Mana yang lebih dominan, sebuah tautan yang me-link ke web/blog kita atau me-link ke posting kita? Mari kita diskusikan ini pada kolom komentar.
Tautkan blog & posting dengan beberapa blog directory, social network dan social bookmarking. Pembaharuan (04 Desember 2012): Terutama yang memberikan layanan berkualitas dan tidak mengharuskan pranala timbal balik.
Jangan lupa, tautkan pula blog & posting ke layanan feed. Tidak jarang narablog menemukan posting yang dia cari pada layanan ini. Untuk Blogger.com dapat menggunakan fasilitas feedburner, silakan membuka kembali posting terdahulu tentang Apa itu RSS FEED dan Cara berlangganan.

Tetaplah memposting dengan hasil karya orisinil Anda

Yah, ini merupakan langkah yang pasti dan akurat. Search engine akan lebih menghargai sebuah karya yang original. Bukan saja mesin saya kira, narablog pun pasti menghargainya. Apalagi karya tersebut memiliki alur yang jelas, mudah untuk dipahami & nyaman untuk dibaca. Tentu, karya yang dimaksud adalah tentang tulisan atau catatan kita di blog. Orisinil bukan berarti melakukan modifikasi kata-kata di sana-sini agar posting yang akan diterbitkan tampak berbeda dengan posting yang kita ‘contek’. Tetapi lebih kepada asal ide. Anda memiliki sebuah ide yang mungkin berbeda, tuangkanlah ide itu dalam suatu bentuk tulisan (posting/artikel).

Saya mempunyai sebuah ide, tapi ide tersebut melenceng dari tema blog saya. Bagaimana sebaiknya?

Wow, sebuah pertanyaan yang sulit. Terus terang saya sendiri mungkin belum/tidak menemukan jawaban yang tepat untuk masalah ini—ada, tetapi hasil meraba-raba. Bagaimana dengan Anda?

Cara Meningkatkan Traffic dan Visitor via Plipeo.com

Plipeo.com

Mungkin rekan blogger belum banyak yang mengetahui cara meningkatkan traffic dan Visitor dengan Mudah dan cepat
serta sedikit menghilangkan kejenuhan bahkan ketergantungan berharap mendapatkan traffic yang hanya datang pada search engine atau blogroll dari blog lain, dan itu pun jarang karena adanya beberapa faktor lain.

Sekarang sobat blogger tidak perlu khawatir, karena sudah adanya Layanan Social Traffic Exchange yang dikhususkan untuk para blogger yaitu
Plipeo.com. Plipeo menghubungkan Blog sobat ke blog lainnya yang sudah menjadi jaringan dari Plipeo.com dan sudah banyak yang menggunakan layanan ini karena mampu meningkatkan Traffic hingga 300%! serta mendatangkan Real Visitor atau pengunjung yang benar-benar tertarget ke blog anda.

Oke deh sekarang langsung saja saya akan menjelaskan cara mendaftar agar cepat mendapat Traffic dan Visitor dari Plipeo.com atau layanan
Traffic Exchange untuk para sobat blogger sebagai berikut:

Silakan sobat persiapkan blog yang akan di daftarkan lalu silakan buka halaman Plipeo.com untuk mendafar atau bisa langsung mengunjungi link berikut
http://plipeo.com/webmaster/signup.

Klik Daftar

Jika sudah pada halaman daftar silakan sobat isi data yang sesuai seperti Website di isi dengan Url blog, Nama, Email serta
Traffic Harian dari blog sobat. dan Plipeo tidak membatasi traffic jadi semua blogger bisa mendaftar dan mendapatkan traffic.

Daftar Plipeo.com

Jika sobat sudah mendaftar maka akan langsung di terima menjadi member dari plipeo, dan langkah selanjutnya yaitu sobat wajib Memasang Widget dari Plipeo dengan mengunjungi halaman Widget Anda ambil code widget tersebut lalu pasang di Blog sobat, bisa di sidebar atau tempat lainnya dan jangan lupa untuk memilih kategori yang ingin di munculkan pada widget serta sedikit memodifikasi Widgetnya agar terlihat indah pada blog sobat

Halaman Widget

Setelah memasang Code Widget pada Blog sobat silakan sobat kirim artikel sobat dengan memilih Tambah Posting Anda, silakan isi Url, Judul ( Usahakan semenarik munkin dan berbeda pada blog sobat, deskirpsi artikel, Tag, lalu Url gambar agar artikel yang sobat masukan terlihat menarik lalu klik submit menyatakab artikel sobat itu original dan tidak sama dengan yang lainnya.

Kirim Artikel Sobat

Bila sobat sudah kirim artikel sobat maka team dari Plipeo.com akan mereview postingan serta widget yang ada di blog sobat, jika sudah benar artikel Tidak hasil dari Kopas ( Copy Paste ) dan widget terpasang maka artikel sobat akan langsung disebar ke jaringan plipeo.

itulah beberapa langkah untuk bergabung, mudah bukan. :) . Layanan seperti ini sudah banyak di Eropa dan Plipeo.com satu-satunya penyedia layanan
Traffic Exchange serupa di Indonesia. dan lihat gambar dibawah salah satu contoh blog yang menggunakan Plipeo mendapatkan traffic hingga 277%.

Traffic Hingga 277%!!

dan tambahan buat sobat blogger, saat ini plipeo sedang mengadakan sebuah kontes Review Plipeo.com jadi sobat hanya menulis artikel tentang mereka atau tutorial terserah sobatlah lalu masukan artikel sobat ke plipeo dengan memasukan ke kategori Support Us dan Total hadiah yaitu sebesar $100 untuk 2 pemenang. kabarnya akan ditambah hadiahnya. silakan lihat pengumumannya di
http://blog.plipeo.com untuk keterangan lebih lanjut.

Salam Blogger Indonesia :)

Tips Search Engine Optimization (SEO) pada Blogger.com

Terlebih dulu saya mengucapkan terima kasih kepada Saudara Indra (arek raos) yang telah memanfaatkan form kontak untuk menanyakan sesuatu kepada kami. Pertanyaan Anda telah sampai kepada kami & semoga posting ini menjadi penawarnya. Agar lebih mudah dalam pendeskripsian, Search Engine Optimization selanjutnya akan kita sebut “SEO”.

Perlu menjadi catatan bahwa saya bukan pakar SEO atau sejenisnya, namun hanya sebagai perpanjangan tangan informasi yang pernah didapat melalui berbagai sumber. Pokok bahasan ini kita batasi tentang pemanfaatan SEO pada Blogger.com & jika terdapat beberapa kejanggalan atau pendapat yang berbeda, dapat kita diskusikan bersama pada kolom komentar.

Kenali Blog Anda, sebelum Anda ‘menyentuh’ SEO

Sebelum melangkah lebih jauh, sebaiknya kita terlebih dulu kenal dengan blog yang kita kelola. Blog tersebut akan banyak bercerita tentang apa? komputer, internet, tutorial, desain web, cerpen, puisi, atau hal-hal yang lain. Artinya disini kita perlu sebuah tema yang akan kita angkat dalam bentuk catatan di web. Apabila sebuah blog memiliki tema tertentu, maka the next step akan lebih mudah untuk melakukan kustomisasi SEO.

Pemilihan tema yang tepat, akan menghasilkan sasaran yang tepat pula. Dengan syarat, kita selalu mempertimbangkan pesaing (kompetitor) yang memiliki tema serupa. Semakin umum sebuah tema, maka semakin banyak terbuka peluang untuk saling berkompetisi.Yah, tentu saja dengan sasaran yang lebih banyak pula. Sebaliknya, tema yang lebih khusus menyebabkan kompetisi akan berkurang & sasaran akan semakin sedikit.

Jika kita membuat blog untuk jangka waktu yang panjang sebaiknya pemilihan tema bisa lebih khusus, bahkan sangat khusus. Tinggal usaha kita untuk mempopulerkan tema tersebut agar dapat diterima oleh orang lain, terutama insan online. Anda tidak memiliki waktu sepanjang itu, maka bersiap-siaplah dengan tantangan para kompetitor yang sudah barang tentu berusaha untuk tampil menjadi nomor 1 (satu) dalam halaman hasil pencarian pada setiap mesin pencari. It's Your Choice.

Optimalisasi Template agar lebih SEO Friendly

Pada tahap ini, pengetahuan & pemahaman tentang koding sangat dibutuhkan. Bagaimana kalau di “copas” saja? Saya tidak menyalahkan langkah tersebut, tetapi ketika suatu pengkodean dari web/blog sumber ada yang keliru—mungkin disebabkan oleh ke-khilaf-an author ketika menulis—tentu kode kita akan menjadi keliru pula.

Adapun secara garis besar langkah-langkah SEO pada tahap ini, antara lain:

Usahakan kata kunci utama berada pada posisi pembuka & penutup blog. Sebagai pembuka berarti berkenaan dengan kepala (header), sedangkan penutup berkenaan dengan kaki (footer) blog.

Merubah markup title
```
<title><data:blog.pageTitle/></title>
```
menjadi
```
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
```
Arti dari markup di atas lebih kurang seperti ini, jika yang ditampilkan adalah halaman posting, maka title blog adalah judul posting diikuti dengan title blog. Jika tidak, maka title blog adalah title blog itu sendiri.

Menambah meta tag, letakkan saja di bawah title seperti pada point di atas.
```
<meta content='deskripsi tentang blog Anda' name='description'/>
<meta content='keyword1,keyword2,keyword3,…' name='keywords'/>
<meta content='INDEX, FOLLOW' name='robots'/>
```
Update (27 September 2012): Lihat simpulan pada posting Kustomisasi Setelan pada Preferensi Penelusuran.

Kustomasi kata kunci pada footer blog, contoh:
```
<p style="font-weight:bold">kata kunci blog Anda</p>
```
Atau Anda dapat berkreasi dengan gaya lain, seperti menambahkan kata kunci pada copyright & sebagainya.

Kustomisasi (X)HTML ((eXtensible) HyperText Markup Language) pada atribut main, widget id Blog1. Custom yang dilakukan pada area ini dapat berupa: pengaturan heading (h1 sampai h6), paragraf, ordered list & unordered list, dan sebagainya. Dengan harapan posting kita akan tampak lebih semantik—bukan hanya sekedar memberikan tanda—namun lebih jauh akan memberikan suatu makna tersendiri bagi pembaca (mendukung keterbacaan).

Mengatur template agar user friendly. Buang widget-widget yang dirasa tidak perlu untuk ditampilkan. Minimal sebuah blog berisikan elemen-elemen identitas blog, posting, alur waktu yang terurut, arsip, & formulir komentar.

Mengatur posisi kode elemen main (bagian posting) di atas kode sidebar. Jika kita pernah melihat posisi sidebar berada di sebelah kiri, bukan berarti kode elemen main (bagian posting) berada di bawah kode sidebar. Nah, ini yang saya maksud bahwa kita perlu mempelajari & memahami pengkodean, baik CSS (Cascading Style Sheets) maupun HTML (HyperText Markup Language).

Membuat Posting dengan hati SEO

Mungkin kedengaran agak asing. Anda telah memiliki suatu tema & usahakan tema tersebut sebagai acuan untuk membuat posting. Ilustrasi, ketika Anda mengikuti upacara bendera, bertepatan pada saat itu bendera merah putih akan dinaikkan. Lagu apa yang Anda dengar? Betul, “Indonesia Raya” & bukan lagu “Balonku Ada Lima”.

Sampai ke tahap ini, Anda sama sekali belum berhadapan langsung dengan yang namanya SEO. Why? Karena kita akan mencoba untuk menyentuhnya terlebih dulu. Aktivitas yang akan kita lakukan pada tahap ini meliputi:

Membuat posting buah karya sendiri yang sesuai dengan tema blog. Setidak-tidaknya blog telah dipersiapkan dengan posting sejumlah 7–10 postingan.

Posting sebaiknya menggunakan bahasa Indonesia yang baik. Tidak ada salahnya, bukan? Pengunjung bukan hanya berasal dari negara asal penulis, sehingga tindakan ini dapat menjadi antisipasi ke-salahtafsir-an berbagai fitur penterjemah. Terkecuali Anda memiliki target pembaca tertentu.

Usahakan posting seakan-akan mengajak pembaca untuk berinteraksi di dalamnya. Tidak mencari pembenaran, tetapi mencari kebenaran atas suatu pokok bahasan yang diuraikan. Sulit? Rajin-rajinlah membaca karya orang lain, bukan untuk di “copas” tetapi untuk dipelajari tata bahasa, irama, dan struktur bacaannya.

Posting bukan hanya dinikmati oleh diri sendiri, namun lebih luas mencakup seluruh aspek, Anda, pembaca, dan mesin. Mesin? Yah, jika mesin tidak dapat membaca, bagaimana halaman blog kita muncul pada hasil pencarian.

Tambahkan alt pada image (gambar) yang include dalam postingan, karena gambar tidak dapat dibaca. Nah, dengan menambahkan alt dalam markup image, kita memberikan alternatif teks yang dapat memaknai arti gambar tersebut.

Tautkan posting dengan posting lain, jika terdapat keterkaitan & hal tersebut dianggap membantu pengunjung untuk memahami bacaannya. Terkadang kita menemui kata atau frase kata yang memiliki tautan tertentu, tetapi seharusnya hal itu tidak perlu dilakukan (dipaksa untuk bertaut). Jangan lakukan tindakan tersebut!

Jangan menerbitkan posting 4–5 postingan dalam sehari (apalagi lebih), karena kemungkinan blog Anda akan dianggap sebagai SPAM. Lakukanlah penskedulan posting, walaupun kita dapat menulis 10 posting dalam sehari. Posting terjadwal dapat berarti mengatur tanggal terbit posting. Anda dapat menemukannya pada saat membuat posting & memilih opsi posting (“Post Options”) tepat berada di bawah form editor (penulisan posting).

Mungkin ada sebagian yang berpendapat, memberikan tanda-tanda tertentu pada teks yang menjadi kata kunci akan meningkatkan SEO, seperti memberi huruf tebal (bold), miring (italic), pewarnaan yang berbeda (color dan/atau background), dan sebagainya.

Mendaftarkan Blog ke beberapa Mesin Pencari

Setelah kita melakukan beberapa tahapan seperti di atas, maka mulailah kita berhadapan dengan SEO. Kita telah memiliki senjata, amunisi yang cukup, dan perangkat pendukung. Bagaimana cara mendaftarkan blog ke beberapa mesin pencari? Anda dapat membaca pada posting sebelumnya, seperti: mendaftar di google, yahoo, dan bing

Update (07 Nopember 2012): Untuk cara mendaftarkan situs web atau blog ke beberapa mesin penelusur lihat pada posting Mendaftarkan Situs Web atau Blog ke Google, Yahoo dan Bing.

Generalisasi

Berdasarkan pokok bahasan di atas, mungkin ini hanya merupakan tahap awal untuk mengoptimalkan sebuah blog dalam mesin pencari. Kita pun belum bisa mengetahui secara pasti hasil pencarian setelah melakukan tahapan-tahapan tersebut. Bukan hanya berhubungan dengan kompetitor, tetapi terkait pula pada relevansi sebuah blog yang dikategorikan masuk dalam daftar pencarian serta—mungkin—umur blog. Namun yang pasti, kita telah melakukan usaha SEO pada blog kita. Terlepas dari itu semua, ini merupakan posting permulaan untuk memperkaya pengetahuan kita tentang langkah demi langkah menuju SEO & tidak menutup kemungkinan akan terbit artkel lain yang menjadi kelanjutannya. Keep your eyes on Optimasi Blog.

Ingat! Tema, deskripsi, dan keyword haruslah sesuai dengan apa terkandung dalam blog kita. Jangan menggunakan manipulasi apapun terhadap unsur-unsur yang saya beri huruf tebal. Pembaca akan senang jika ketiga unsur tersebut sesuai dengan apa yang dia pindai di dalam blog kita. Sebaliknya, ketidak-sesuaian akan mengundang pembaca untuk meninggalkan kesan antipati.
admin quote

Membuat Style pada Link dengan CSS3

Sepertinya sudah lama saya tidak membuat postingan disini, kali ini saya memberikan trick menggunakan CSS3 untuk link saat di sorot (hover efek). Sebenarnya sudah ada beberapa yang sempat saya bagikan di blog saya dengan judul Macam Efek Link Dengan CSS3, dan kali ini saya coba memberikan sesuatu yang baru.

Kita buat Mark-up HTML terlebih dahulu :

<ul class="shift">
    <li><a href="#">Sorot ini</a></li>
    <li><a href="#">Sorot tautan ini</a></li>
</ul>

Sesudah itu mari kita buat CSS-nya :

.shift {
    list-style: none;
    display: inline-block;
}

.shift li {
    background: orangered;
    width: 0%;
    display: block;
    -webkit-transition: all 0.125s ease-in-out;
    -moz-transition: all 0.125s ease-in-out;
    transition: all 0.125s ease-in-out;
}

.shift li:hover {
    width: 100%;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.shift li a {
    text-transform: uppercase;
    display: block;
    color: #000;
    font-size: 1em;
    margin: 0.5em;
    padding: 0.5em;
    text-decoration: none;
    white-space: nowrap;
}

Berikut hasilnya yang sudah jadi, coba sorot tulisan 'Sorot ini' lalu lihat efeknya :

Sorot ini

Sorot tautan ini

Keren kan, cocok untuk membuat efek pada sidebar ataupun footer blog kita. Ada tanggapan ?

Trik Sederhana Cara Proteksi Gambar di Blog

Rasanya sangat mustahil menghindari seseorang menyalin dan menyimpan gambar
yang ada dihalaman blog anda. Hanya dengan melakukan klik kanan dan "save as" siapapun dapat dengan mudah mengambil gambar anda hanya dengan hitungan detik.

Nah disini sebenarnya ada Trik Proteksi sederhana yang bisa anda lakukan
untuk menghindari gambar anda di simpan dari tangan-tanagn jahil, dimana hasil dari gambar yang dicoba disimpan nantinya hanya berupa gambar kosong.

Untuk uji coba silahkan klik kanan dan "save as" gambar dibawah ini:

Kode standar dari gambar biasanya seperti ini:

<img width="500" height="375" src="http://www.o-om.com/contohgambar.jpg"/>

Dengan menerapkan kode sederhana dibawah ini yaitu dengan hanya mengubah artibut src dan penggunaan css style langsung pada gambar maka cara Trik dibawah ini akan menciptakan gambar kosong pada hasil download.

Ingat! selalu pastikan ukuran size dari gambar harus sama dengan aslinya. Walaupun Trik ini menurut saya tidak 100% akurat paling tidak khan cara ini bisa sedikit mengurangi dari tangan pengguna yang non-teknis :)

Styling menggunakan CSS pseudo-element

Pada posting terdahulu, kita juga pernah membicarakan tentang CSS pseudo-element ini, namun hanya terbatas pada “styling ordered dan unordered list”. Selain itu, mungkin kita pernah melihat bentuk teks di dalam elemen atau image berbentuk pita (ribbon), kemudian garis (border) yang memiliki efek tenggelam (press), bentuk melipat di sudut sebuah elemen & mirror text effect (efek cermin pada teks). Semua dapat dilakukan juga dengan menggunakan CSS pseudo-element :before dan/atau :after.

Credit

Untuk penggunaan ribbon & border ber-efek tenggelam dapat Anda baca selengkapnya di blog Rudy Azhar. Dan salah satu nilai plus—pada form komentar ditambahkan oleh Ardianzzz—yang di coding dengan demikian menarik menggunakan CSS pseudo-element (demo ribbon).

Sedangkan untuk membuat efek cermin pada teks, penulis lupa (alpa) dengan link kreditnya. Silakan kontak penulis jika Anda mengklaim bahwa tulisan tentang “efek cermin pada teks” diambil dari sumber Anda & penulis akan segera melakukan update pada link kredit ini.

Indeks Konten

Ribbon (membuat pita)
Border/line press effect (membuat border/garis tenggelam)
Folding angle (melipat sudut)
Mirror effect on the text (efek cermin pada teks)

Ribbon

Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini.

.element {
background:#e1e1e1;
padding:1.5em 2em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em
}
.element h2 {
background:#f90;
border-bottom:.05em solid #666;
/*-- Rounded corner kiri atas --*/
-moz-border-radius:.25em 0 0 0;
-webkit-border-radius:.25em 0 0 0;
border-radius:.25em 0 0 0;
display:block;
left:-1.75em;
padding:.25em 0 .25em 1.75em;
position:relative;
width:60%
}
/* Mulai membentuk ribbon */
.element h2:after, .element h2:before {
content:" ";
display:block;
position:absolute
}
/* Ribbon kanan */
.element h2:after {
top:0;
right:0;
border-top:.85em solid #f90;
border-right:.75em solid #e1e1e1;
border-bottom:.80em solid #f90;
border-left:.75em solid #f90
box-shadow:0 .05em 0 #666;
}
/* Ribbon kiri */
.element h2:before {
bottom:-.25em;
left:0;
border-top:none;
border-right:none;
border-bottom:.25em solid #666;
border-left:.40em solid #666;
/*-- Rounded corner kiri bawah --*/
-moz-border-radius:0 0 0 .25em;
-webkit-border-radius:0 0 0 .25em;
border-radius:0 0 0 .25empx;
z-index:1
}

Dan berikut kode HTML yang menyertainya.

<div class="element">
<h2>Ribbon</h2> <p>Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini…</p>
</div>

—Kembali ke indeks konten—

Border/line press effect

Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut.

.element2 h2 {
padding:0 0 0.25em;
position:relative;
width:100%
}
.element2 h2:after {
content:" ";
position:absolute;
bottom:0;
left:0;
border-top: 1px solid #c3c3c3; /* Warna seharusnya lebih tua dari background */
border-bottom: 1px solid #f1f1f1; /* Warna seharusnya lebih muda dari background */
width:100%
}

Catatan:

Atribut width (warna biru) tidak harus 100%. Artinya jika width bernilai 80% maka left bernilai 10% (letak garis di tengah elemen).
Apabila ingin menambahkan border press di atas h2, tambahkan #element2 h2:before dengan properti yang sama. Kemudian ganti kode yang berwarna merah (bottom:0;) dengan top:0;.

Pada kasus lain, mungkin kita ingin meletakkan border di kanan atau kiri elemen.

Kiri elemen:

top:0;
left:0;
border-left:1px solid #c3c3c3;
border-right:1px solid #f1f1f1;
height:100%;

Kanan elemen:

top:0;
right:0;
border-left:1px solid #c3c3c3;
border-right:1px solid #f1f1f1;
height:100%;

Sedangkan kode HTML pada elemen ini adalah sebagai berikut.

<div class="element2">
<h2>Border/line press effect</h2> <p>Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut…</p>
</div>

—Kembali ke indeks konten—

Folding angle

Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini.

.element3 {
background:-webkit-gradient(linear, right top, left center, from(#e1e1e1), to(#fff));
background:-moz-linear-gradient(right, #e1e1e1, #fff);
border:1px solid #c3c3c3;
padding:1.5em 2em;
position:relative
}
.element3:before, .element3:after {
content:" ";
display:block;
position:absolute;
/*-- Memutar elemen 45 derajat (searah jarum jam) --*/
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
/* Menutup sudut kiri atas elemen berbentuk segitiga */
.element3:after {
top:-2em;
right:-2em;
/*-- Warna border sama dengan warna body (di luar elemen) --*/
border-top:2em solid #fff;
border-right:2em solid #fff;
border-bottom:2em solid #fff;
border-left:2em solid #fff
}
/* Membuat segitiga efek melipat */
.element3:before {
top:0.75em;
right:0.75em;
/*-- Warna border sama dengan warna elemen (kecuali border atas, lebih tua/gelap) --*/
border-top:2em solid #c3c3c3;
border-right:2em solid #e1e1e1;
border-bottom:2em solid #e1e1e1;
border-left:2em solid #e1e1e1;
z-index:1
}

Di bawah ini merupakan kode HTML-nya.

<div class="element3">
<h2>Folding angle</h2> <p>Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini…</p>
</div>

—Kembali ke indeks konten—

Mirror Text

Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut.

.element4 h2 {
font-size:2em;
font-weight:bold;
position: relative
}
.element4 h2:before, .element4 h2:after {
display:block;
position:absolute;
bottom:-0.75em; /* You should change this value to fit your font */
left:0;
right:0
}
.element4 h2:before {
content: "Mirror Text";
opacity:.4;
/* This is how the text is flipped vertically */
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1)
}
.element4 h2:after {
/* Fading using CSS gradient */
/* Don't forget to change the colors to your background color */
background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
/* I left out the `filter` property,
because IE doesn't know `:before` and `:after` pseudo-elements anyway */
content: " ";
height:0.75em
}

Catatan:
Beberapa kode informasi (antara /*…*/) sengaja tidak dirubah/dihapus untuk memudahkan—pelacakan—klaim link kredit nantinya. Background elemen ini bernilai #eeeeee sama dengan rgb(238,238,238) sama dengan rgba(238,238,238,1).

Adapun kode HTML yang menyertainya adalah sebagai berikut.

<div class="element4">
<h2>Mirror Text</h2> <p>Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut…</p>
</div>

—Kembali ke indeks konten—

Generalisasi

Styling menggunakan CSS pseudo-element :before dan/atau :after di atas, mungkin hanya sebagian kecil dari gaya-gaya pengkodean lain. Namun tidak ada salahnya jika kita mengenal & mengetahui—gaya seperti apa—yang mampu didukung oleh CSS pseudo-element tersebut. Apalagi penggunaannya bersih dari penambahan elemen baru. Yah, hanya dengan melakukan kustomisasi pada satu elemen, kita seakan-akan membentuk 2–3 elemen.

Note:
Sampai tulisan ini diterbitkan CSS pseudo-element :before dan/atau :after ~~belum~~ didukung oleh peramban IE (Internet Explorer).

Markah HTML

CSS untuk Amplop

CSS Keseluruhan untuk Amplop

CSS untuk Perangko

Download | Live DemoWhat the features of Blogger Store v2 ?

Widget Banner I

CSS

HTML

Widget Banner II

CSS

HTML

Widget Banner III (Rotasi Banner Random)

CSS

HTML

Generalisasi

Men-submit Blog ke Perkakas Webmaster

Link Building

Tetaplah memposting dengan hasil karya orisinil Anda

Kenali Blog Anda, sebelum Anda ‘menyentuh’ SEO

Optimalisasi Template agar lebih SEO Friendly

Membuat Posting dengan hati SEO

Mendaftarkan Blog ke beberapa Mesin Pencari

Generalisasi

Credit

Indeks Konten

Ribbon

Border/line press effect

Folding angle

Mirror Text

Generalisasi

Popular Posts

Arsip Blog

Label Blog

Total Pageviews

2011 - Mereund Blog

Download | Live Demo

What the features of Blogger Store v2 ?