Trik Blog Versi Indonesia

7 Tool Pengecek Para Plagiat Copy paste

pribadisidik@gmail.com (iland) — Sun, 13 Oct 2013 20:09:00 -0700

Salah satu masalah etika yang blogger harus hindari seperti wabah adalah Plagiarisme . Yang terakhir ini dapat didefinisikan sebagai aktivitas yang melibatkan menyalin konten dari situs lain atau sumber , tanpa kutipan .
1 . Plagiarisme Checker oleh SMALL SEO

Tool ini merupakan plagiarisme checker online yang ditawarkan oleh smallseotools.com . Anda tidak perlu men-download program apapun. Cukup copy dan paste konten Anda dan klik " periksa tombol plagiarisme . " Jika frase atau kalimat menjadi merah , itu berarti bahwa sudah ada secara online yang berarti bahwa Anda harus parafrase itu . <Link>

2 . Viper , Scanner Anti - Plagiarisme oleh Scanmyessay.comSaya telah menggunakan viper untuk beberapa waktu dan viper cukup bagus dalam mencari plagiarisme . Namun, tidak seperti alat pertama , ini membutuhkan instalasi perangkat lunak bebas dari mereka dan mendaftar untuk account baru . Jadi ini mungkin memakan waktu pada awalnya dibandingkan dengan menggunakan alat pertama.
3 . The Plagiarisme Scanner oleh Dustball.comPlagiarisme ini scanner dapat digunakan secara online mirip dengan plagiarisme checker oleh Seo Tools Kecil . Mereka menawarkan kedua layanan anti - plagiarisme gratis dan berbayar . <link>

4 . Plagiarisma.netMenawarkan plagiarisme scanner yang dapat digunakan secara online dan mendukung bahasa 190plus . Aku mencoba mendaftar tapi aku punya beberapa masalah mendaftar . Mungkin hanya aku . Namun demikian , Anda masih bisa menggunakannya tanpa pendaftaran tetapi hanya versi terbatas yang tersedia untuk para pengguna yang tidak terdaftar . <link>

5 . Plagium.comIni adalah checker plagiarisme online yang dapat digunakan secara gratis . Namun, jika Anda ingin pencarian yang mendalam , biaya tertentu berlaku. Anda juga dapat menyumbang untuk tim mereka sejak menjaga plagiarisme scanner online adalah mahal . <link>

6 . Duplichecker.comAlat lain plagiarisme dipercaya merupakan duplichecker . Di sisi lain , Anda hanya diperbolehkan untuk menggunakannya sekali sehari jika Anda ingin layanan mereka secara gratis . <link>

7 . Copyscape.comSebuah alat anti plagiarisme yang hanya membutuhkan Anda untuk mengirim URL dari artikel Anda untuk memeriksa plagiarisme . Tidak seperti Plagium dan Plagiarisme , tidak memeriksa dokumen atau file untuk plagiarisme , hanya artikel di web . <link>

Apakah Anda tahu ada alat checker bebas plagiarisme yang tidak disebutkan dalam artikel ini ? Silakan berbagi di bagian komentar di bawah ini dan berbagi pengalaman Anda tentang hal itu .

5 Cara Untuk Membuat Uang Dengan Blog Anda

pribadisidik@gmail.com (iland) — Sat, 12 Oct 2013 21:36:00 -0700

Ada banyak cara yang bagus untuk mendapatkan penghasilan tambahan di internet dan memulai sebuah blog adalah salah satu yang lebih populer . Menyiapkan sebuah blog adalah benar-benar sederhana dan Anda dapat dengan cepat mulai membuat uang dari menulis tentang sesuatu yang Anda cintai . Berikut adalah lima cara Anda dapat menghasilkan uang dengan blog Anda:

1 . Posting Untuk Dibayar

Anda tidak perlu membuat blog Anda sendiri untuk membuat uang . Ada berbagai situs di luar sana yang memungkinkan Anda untuk menulis posting blog tentang topik tertentu bagi pemilik penyedia situs perusahaan dan anda akan mendapatkan uang .

2 . Tempatkan Iklan Di Blog Anda

Salah satu yang paling mudah , dan yang paling umum , cara untuk membuat uang dengan blog Anda adalah dengan posting iklan ke blog Anda . Program ini bekerja dengan memasukkan banner iklan di blog Anda dan setiap kali seseorang mengklik iklan Anda akan mendapatkan persentase tertentu dari laba dari perusahaan .Ini adalah metode yang sangat sederhana dan dapat menyediakan Anda dengan penghasilan yang baik asalkan blog Anda memiliki potensi tertentu untuk membuat iklan di situs Anda sehingga tampak relevan .

3 . Program Afiliasi

Favorit lainnya di kalangan blogger adalah untuk bergabung dengan berbagai program afiliasi . Cara ini bekerja adalah dengan Anda menempatkan link ke produk di website Anda dan setiap kali seseorang membeli produk melalui link website Anda, Anda akan diberikan dengan persentase.Sekali lagi , ini bekerja sangat baik ketika blog Anda terfokus pada subjek tertentu dan memiliki sesuatu untuk dilakukan dengan beberapa jenis produk . Misalnya , program Afiliasi Amazon benar-benar berguna jika Anda berbicara tentang buku atau barang-barang rumah, seperti peralatan dapur .

4. Pemasaran Dagangan

Anda juga dapat menggunakan blog Anda untuk menjual barang dagangan tambahan . Sebuah pilihan favorit adalah untuk menawarkan E -book di situs untuk yang topik serupa tentang blog Anda .
Anda bahkan dapat melakukan sesuatu yang sederhana dan menyenangkan seperti Memasarkan produk anda seperti T-shirt untuk orang agar membeli . Hal ini juga dapat menyediakan Anda dengan lebih banyak pembaca dan memastikan banyak orang mengenal blog Anda tanpa Anda harus langsung memasarkan hanya secara online.

5 . Menjadi Seorang Ahli dalam blogging

Anda juga dapat memilih untuk menjadi seorang ahli di bidang Anda dan ini bisa membantu Anda mendapatkan kesempatan lain juga. Misalnya, Anda bisa menjadi seorang ahli dalam blogging serta jasa pembicara motivasi di lapangan dan mendapatkan kesempatan untuk berbicara di konferensi mengenai bidang tentang blog anda.
Dalam rangka untuk membuat blog Anda sukses dan membuat uang dengan salah satu metode di atas Anda perlu memastikan orang menemukan blog Anda dengan mudah . Lihatlah dan dapatkan SEO ranking tool untuk membantu memastikan blog Anda mendapatkan lalu lintas yang cukup untuk menyediakan Anda dengan penghasilan tambahan .

Thanks Regard

Trik Pemula

3 Top Jaringan Iklan

pribadisidik@gmail.com (iland) — Sat, 12 Oct 2013 21:15:00 -0700

Jadi Anda telah membangun sebuah situs web dan menyadari bahwa bagian yang sulit dari seluruh usaha masih akan datang - menarik pengunjung ke situs web Anda baru saja dibuat . Hanya memiliki kehadiran web di luar sana tidak menjamin mendapatkan stabil , lalu lintas yang ditargetkan . Google dan mesin pencari lainnya tahu bahwa blog Anda yang baru , dan mereka tidak menunjukkan minat di dalamnya sampai orang lain lakukan . Di sinilah jaringan periklanan ikut bermain . Dengan bantuan mereka Anda akan dapat meningkatkan lalu lintas Anda langsung dengan usaha minimal dan pada harga yang wajar . Jadi , di bawah ini saya akan daftar dan menjelaskan beberapa jaringan periklanan yang paling populer untuk membantu Anda meningkatkan traffic dan penghasilan Anda .

AdWords

Google Adwords tidak menguntungkan seperti dulu lagi , alat ini iklan oleh Google masih bisa membantu Anda menghasilkan uang . Membuat akun AdWords adalah proses cepat dan tanpa ribet . Yang Anda butuhkan adalah untuk melakukan penelitian keyword dan memiliki iklan banner yang siap . Setelah Anda telah mengkonfigurasi pengaturan AdWords , iklan Anda akan muncul di samping hasil pencarian yang ditampilkan kepada orang-orang mencari web menggunakan salah satu keyword . Iklan Anda akan ditampilkan kepada pemirsa yang tertarik dengan layanan Anda . Sistem ini tidak memiliki persyaratan pembelanjaan minimum . Satu hal yang mungkin mengganggu Anda tentang penggunaan alat ini adalah bahwa Anda tidak dapat melihat terlebih dahulu di mana banner Anda akan ditempatkan . Hal ini untuk mengatakan bahwa Anda akan harus merancang 'universal' iklan banner bahwa dalam kebanyakan kasus tidak akan dikaitkan dengan gaya website , palet warna dan aspek lainnya .

BizzCPV

Unlike AdWords , layanan web BizzCPV tidak berurusan dengan sistem otomatis untuk menempatkan iklan Anda . Ini jaringan periklanan diarahkan mengembangkan solusi unik untuk setiap situs web tertentu . Ini berarti Anda akan dapat membentuk sendiri , kampanye iklan yang luar biasa di sana . Anda akan dapat mempersempit target audiens Anda dengan bahasa , keyword , geografi , waktu , penggunaan perangkat mobile dan bahkan mengatur IP tertentu dan persyaratan peramban . Ini berarti banner Anda akan ditampilkan untuk ' orang yang tepat ' saja. Kabar baik tentang BizzCPV adalah bahwa layanan mereka mencakup hampir semua aspek yang berhubungan dengan iklan online - dari pembuatan iklan kustom ( Flash, JavaScript , teks dan banner standar ) untuk Manajemen Afiliasi . Untuk mempelajari lebih lanjut tentang layanan kunjungi website resmi mereka .

Yahoo Bing Network
Hampir Sama dengan Adwords , Yahoo Bing Jaringan menggunakan jumlah maksimum ,pengiklan siap untuk membayar per klik ( PPC ) dan CTR banner ( click-through rate) untuk menentukan seberapa sering iklan akan ditampilkan . Sistem ini agak transparan dan mudah digunakan. Iklan Bing menyediakan pelanggan mereka dengan alat desktop yang berguna yang memungkinkan mereka untuk mengelola kampanye offline ( Bing Ads Editor ) . Semua perubahan yang Anda buat untuk kampanye saat offline dapat kemudian disinkronisasikan secara online . Dengan jaringan iklan Anda dapat menjalankan iklan Anda pada waktu tertentu dalam sehari dan pada hari-hari tertentu dalam seminggu .

Ini penting untuk memberitahu orang tentang website baru Anda , dan salah satu cara termudah untuk melakukannya adalah dengan menggunakan jaringan iklan profesional .

trimakasih :)

SEO Tool Terbaik Untuk Optimalisasi Blog

pribadisidik@gmail.com (iland) — Sat, 12 Oct 2013 20:56:00 -0700

Setelah Trik-Pemula berbagi semua tips, trik dan tweak untuk membiarkan Anda lebih mengoptimalkan blog berbasis Blogger Anda, waktu sekarang untuk berbagi favorit saya SEO Tools yang tidak membosankan adalah Search Engine Optimization. Ini adalah alat utama saya untuk memahami strategi pesaing saya. Ada banyak tool yang ditemukan online tapi Anda hanya perlu satu sumber yang dapat menyediakan Anda dengan semua yang Anda butuhkan.Rapid Searchmetrics adalah sebuah website yang memiliki semua apa yang perlu webmaster. Dari gratis untuk layanan premium, mereka membuat pekerjaan Anda hanya menyenangkan. Saya menikmati menggunakan mereka banyak dan selalu melacak CSS, Java, batas Ukuran Gambar menggunakan alat ini. Itu selalu membantu saya melacak waktu beban saya dan membangun link internal dan eksternal. Saya hanya berharap Anda menemukan layak mencoba dan menggunakan.

trimakasih :-)

Mengecek Speed atau Kecepatan Blog

pribadisidik@gmail.com (iland) — Sat, 12 Oct 2013 07:44:00 -0700

Jika Anda seorang blogger atau web developer maka Anda harus memiliki pengetahuan tentang situs web Anda. Semua orang tahu tentang website nya Alexa, PR dan sebagainya, tapi saya mencatat bahwa banyak blogger tidak tahu tentang kecepatan beban situsnya. Ini juga merupakan hal yang paling penting yang harus anda tahu tentang blog anda sendiri.

Efek dari Load Blog Cepat :

     @ Agar Anda Tidak Kehilangan Lalu Lintas pengunjung
     @ Mempercepat pengguna untuk mengklik link informasi blog Anda (jika mereka tahu     bahwa website   Anda terlalu berat ,maka mereka akan meninggalkan blog anda)
    @ Meningkatkan Alexa Rank

Langkah-langkah untuk mengukur speed / waktu load blog:

5 Design Terbaik dan Plugin SEO Template untuk Blogger

pribadisidik@gmail.com (iland) — Sat, 12 Oct 2013 07:09:00 -0700

Template memainkan peran yang sangat penting dalam blogging. Blogger memiliki pilihan untuk memilih template mereka untuk blog mereka memberikan melihat. Jika Anda memiliki template mengagumkan dan postingan yang bagus berkualitas maka Traffic blog Anda akan lebih tinggi dalam beberapa bulan.

Jika ada yang memiliki template berkualitas rendah dan memiliki posting mengagumkan di blog-nya, maka Traffic blog-nya tidak akan naik dan Anda juga dapat menambahkan meta tag dan hal lain yang disebut SEO kiat-kiat atau tambahkan Plugin SEO untuk hasil mesin pencari terbaik. Standar template blogger tidak memiliki semua ini, Anda harus menambahkan template Anda sendiri untuk hasil mesin pencari terbaik. Hari ini saya akan menunjukkan template yang memberikan tampilan yang besar ke blog Anda serta memberikan Anda peringkat SEO tinggi. Semua template SEO Friendly dan sepenuhnya akan mampu menyesuaikan.

1: Retina Blogger Template:

Platform: Blogger/ Blogspot
Author: Templateism

Download

Preview

Ini adalah template gaya majalah, bagi mereka yang memiliki blog multi-niched. Dalam tema ini, Anda memiliki pilihan untuk menampilkan posting label dan kategori yang berbeda. Blog ini sepenuhnya SEO friendly dan melihat mengagumkan.

2. WebMag Blogger Template:

Platform: Blogger/ Blogspot
Author: Templateism

Download
Preview

Template ini dibuat sangat disesuaikan CSS3 dan HTML5 bahasa yang sangat efisien dan memiliki beberapa fungsi disesuaikan tinggi, memiliki futured posting geser bar, bar pengumuman, Plugin jaringan sosial dan sangat user friendly dan juga SEO friendly.

3. Timeline Magazine Blogger Template:

Platform: Blogger/ Blogspot
Author: Templateism

Download
Preview

Template ini memberikan tampilan Facebook untuk blog Anda, blog ini memiliki antarmuka yang mengagumkan dengan tampilan timeline dengan horisontal layar posting tampilan dengan tema warna biru dan putih. Ini adalah SEO template yang ramah sangat untuk blogger yang memberikan hasil terbaik di mesin pencari.

4: Metro Classic Template:

Platform: Blogger/ Blogspot
Author: Templateism
Download

Preview

Ini adalah klasik dirancang template baru untuk blogger dengan gaya terbaru "Tiles" dan "Metro" , sama seperti windows 8 miliki. Memiliki meninggalkan slide bar sorot penuh, fitur daerah dan memiliki jendela 8 lihat dengan SEO friendly.

5: Geeks Gedget Template:

Platform: Blogger/ Blogspot
Author: Templateism

Download
Preview

Ini adalah template blogger interface yang sangat mengagumkan dengan warna dan tampilan yang menarik pengguna untuk blog Anda. Template ini memiliki head floating bar yang selalu menempel di sisi atas ketika Anda gulir ke bawah halaman Anda.

Dengan menerapkan salah satu di atas template, anda pasti mendapatkan hasil terbaik dari Anda pembaca dan mesin pencari.

#Thank's Regard

Trik Pemula
Keep Blogging

Drop Down Multi Level Menu

pribadisidik@gmail.com (iland) — Thu, 10 Oct 2013 06:42:00 -0700

Sekarang saya ingin berbagi dengan Anda. Lihat demo untuk melihat Mac-seperti multi-level menu dropdown yang saya buat menggunakan border-radius, box-shadow, dan text-shadow. Hal itu membuat sempurna di Firefox, Safari dan Chrome. Dropdown juga bekerja pada browser compitable non-CSS3 seperti IE7 +, tetapi sudut bulat dan bayangan tidak akan diberikan.

Ganti / Ubah Url serta tulisan yang seperlunya diganti dengan URL dan tulisan anda

HASIL MARKUP HTML :

<link rel="stylesheet" href="sumber.css" type="text/css"/>
<ul id="nav">
 <li class="current"><a href="http://trik-pemula.blogspot.com">Home</a></li>
 <li><a href="#">My Projects</a>
 <ul>
  <li><a href="http://trik-pemula.blogspot.com/search/label/css-menu">CSS Menu</a>
  <ul>
   <li><a href="http://trik-pemula.blogspot.com/2013/10/drop-down-menu.html">Drop Down Menu</a></li>
   <li><a href="http://www.ndesign-studio.com/wp-themes">Drop Down Menu Multi Level</a></li>
   <li><a href="http://trik-pemula.blogspot.com/2013/10/cool-animated-navigation-with-css-and.html">Cool Animated</a></li>
  </ul>
  </li>
  <li><a href="http://trik-pemula.blogspot.com/search/label/css-image">CSS-Image</a>
  <ul>
   <li><a href="http://trik-pemula.blogspot.com/2013/10/image-slide-in-captions.html">Image Slide In Captions</a></li>
  </ul>
  </li>
  <li><a href="http://trik-pemula.blogspot.com/search/label/css-basic">CSS-Basic</a></li>
 </ul>
 </li>
 <li><a href="#">Multi-Levels</a>
 <ul>
  <li><a href="#">Team</a>
  <ul>
   <li><a href="#">Sub-Level Item</a></li>
   <li><a href="#">Sub-Level Item</a>
   <ul>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
   </ul>
   </li>
   <li><a href="#">Sub-Level Item</a></li>
  </ul>
  </li>
  <li><a href="#">Sales</a></li>
  <li><a href="#">Another Link</a></li>
  <li><a href="#">Department</a>
  <ul>
   <li><a href="#">Sub-Level Item</a></li>
   <li><a href="#">Sub-Level Item</a></li>
   <li><a href="#">Sub-Level Item</a></li>
  </ul>
  </li>
 </ul>
 </li>
 <li><a href="https://plus.google.com/109617849762706249664">Google +</a></li>
 <li><a href="http://facebook.com/ilandnurshidik">Contact Us on FB</a></li>
</ul>

STYLE CSS :

Langsung sedot sumber.css open

DOWNLOAD | DEMO

Drop Down Menu

pribadisidik@gmail.com (iland) — Thu, 10 Oct 2013 06:03:00 -0700

CSS Drop down menu selalu di daftar keinginan setiap pengembang CSS. Membangun menu seperti ini relatif sederhana. Semua yang perlu Anda ketahui adalah CSS selector, floating dan posisi kontekstual. Tutorial ini akan menjelaskan kepada Anda bagaimana membangun Drop Down Menu CSS dengan cara termudah dan anda bisa membayangkan, yaitu dengan mengikuti pendekatan langkah-demi-langkah. Mari kita mulai!

ganti / ubah tulisan yang perlu diganti dengan url anda sendiri

HASIL MARKUP HTML :

<link rel="stylesheet" href="sumber.css" type="text/css"/>
<link rel="stylesheet" href="sumber_li.css" type="text/css"/>
<ul id="navigation">
 <li><a href="#">Home</a></li>
 <li class="sub">
 <a href="#">About</a>
 <ul>
  <li><a href="#">Us</a></li>
  <li><a href="#">Our Work</a></li>
  <li><a href="#">Projects</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Contacts</a>
 </li>
</ul>

STYLE SUMBER.CSS :

#navigation {
 margin:0;
 padding:0 1em;
 background:#000;
 height:3em;
 list-style:none;
}
#navigation>li {
 float:left;
 height:100%;
 margin-right:0.5em;
 padding:0 1em;
}
#navigation>li>a {
 float:left;
 height:100%;
 color:#c60;
 text-decoration:none;
 line-height:3;
 font-weight:bold;
 text-transform:uppercase;
}
#navigation>li>a:hover {
 color:orange;
 text-decoration: underline;
}

Untuk Penampakan Sumber_li.CSS silahkan open

DOWNLOAD | DEMO

Cool Animated Navigation with CSS and jQuery

pribadisidik@gmail.com (iland) — Thu, 10 Oct 2013 05:03:00 -0700

Animasi visual adalah cara yang bagus untuk membantu pengguna dalam menjelajahi dan berinteraksi dengan situs web didukung dengan navigasi yang indah. Hari ini dengan keajaiban javascript kita bisa menghindari flash sama sekali. Hari ini kita akan membangun sebuah animasi menu navigasi benar-benar keren dengan hanya menggunakan CSS dan jQuery. dari trik-pemula dan jika tidak suka jangan menggunakannya

TULISAN BERUPA LINK URL SILAHKAN UBAH URL SESUAI DIFOLDER MANA ANDA MENYIMPAN FILE CSS DAN JAVASCRIPT.

TULISAN HOME, ABOUT, SERVICES , SOLUTIONS JUGA DAPAT DIRUBAH SESUAI KEINGINAN

HASIL DI HTML :

<link rel="stylesheet" href="main.css" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-bp.js"></script>
<script type="text/javascript" src="navigation.js"></script>
<div id="header">
</div>
<div id="navigation" class="container">
 <div id="home">
  <a href="home">home</a>
 </div>
 <div id="about">
  <a href="about">about</a>
 </div>
 <div id="services">
  <a href="services">services</a>
 </div>
 <div id="solutions">
  <a href="solutions">solutions</a>
 </div>
 <div id="contact">
  <a href="contact">contact</a>
 </div>
</div>
<div class="container">
 <div class="content">
  <div id="content-title">
  </div>
 </div>
</div

INI DIA FILE - NYA ,
buka dan lihat

1. Main.CSS | open
2. Jquery.JS | open
3. Jquery-bp.JS | open
4. Navigation.JS | open

SEKIAN CSS MENU DARI KAMI ..

DOWNLOAD | DEMO

TERIMAKASIH :-)

Menyisipkan CSS Dan Javascript dalam HTML

pribadisidik@gmail.com (iland) — Wed, 9 Oct 2013 07:40:00 -0700

CSS dan Javascript memang sudah tidak asing lagi bagi anda, alangkah baiknya anda mengerti harus tahu "cara menyisipkan CSS dan Javascript ke HTML itu sendiri" karena itu adalah trik dasar css dan javascript , iya kan sobat?? Pembaca Trik - Pemula, ini trik menyisipkan css dan javascript ke dalam html memang caranya begitu mudah dimengerti oleh orang pemula / awam

1. CSS ke HTML

Contoh Script cara yang pertama yaitu :

Isi CSS di sini

</style>

Letakkan Script di atas sebelum tag </head>. Tulisan yang berwarna hitam sobat ganti dengan Isi property CSS yang ingin sobat masukkan.

Contoh Script Cara yang ke dua :

Pertama-tama sobat buat dulu dokumen yang berisi script CSS dan simpan dengan nama style.css.

Letakkan script di atas sebelum tag </head>. teks yang berwarna merah adalah lokasi file style.css yang sebelumnya sobat buat. Simpan dokumen HTML tersebut pada direktori folder yang sama dengan file style.css.

2. JavaScript ke HTML

Contoh Script cara yang pertama yaitu :

Isi Code Javascript disini

</script>

Contoh Script cara yang kedua yaitu :

Image Slide In Captions

pribadisidik@gmail.com (iland) — Wed, 9 Oct 2013 06:34:00 -0700

Pengunjung Trik-Pemula, dalam demo ini ( trik css ) memberi efek keterangan gambar geser melampaui sebuah gambar pada rollover seperti slide. Efeknya digunakan mengunakan struktur HTML5 standar untuk gambar dengan keterangan, dan CSS3

Mengapa Caption slide pada image ? Mungkin menghemat ruang dalam sebuah layout. Mungkin keterangan itu sendiri adalah identitas keterangan dari gambar dengan design kreativ, Pengunjung Trik-Pemula, itu hanya demo. Jika Anda tidak menyukainya, jangan menggunakannya.

Ganti Teks berwana merah

1. Tulisan left ( jika captions di kiri ), right (kanan), top (atas) dan bot (bawah)

2. Url-gambar.jpg (isikan alamat url gambar yang akan muncul)

3. Teks Caption (isikan dengan keterangan gambar sesuai keinginan)

==============================

Struktur HTML5 :

<figure class="cap-left">
 <img src="url-gambar.jpg" alt="">
 <figcaption>
  Teks Captions...
 </figcaption>
</figure>

=============================

Struktur CSS3  :

figure {
 display:block;
 position:relative;
 float:left;
 overflow:hidden;
 margin:0 20px 20px 0;
}
figcaption {
 position:absolute;
 background:black;
 background:rgba(0,0,0,0.75);
 color:white;
 padding:10px 20px;
 opacity:0;
 -webkit-transition:all 0.6s ease;
 -moz-transition:all 0.6s ease;
 -o-transition:all 0.6s ease;
}
figure:hover figcaption {
 opacity:1;
}
figure:before {
 content:"?";
 position:absolute;
 font-weight:800;
 background:black;
 background:rgba(255,255,255,0.75);
 text-shadow:0 0 5px white;
 color:black;
 width:24px;
 height:24px;
 -webkit-border-radius:12px;
 -moz-border-radius:12px;
 border-radius:12px;
 text-align:center;
 font-size:14px;
 line-height:24px;
 -moz-transition:all 0.6s ease;
 opacity:0.75;
}
figure:hover:before {
 opacity:0;
}
.cap-left:before {
 bottom:10px;
 left:10px;
}
.cap-left figcaption {
 bottom:0;
 left:-30%;
}
.cap-left:hover figcaption {
 left:0;
}
.cap-right:before {
 bottom:10px;
 right:10px;
}
.cap-right figcaption {
 bottom:0;
 right:-30%;
}
.cap-right:hover figcaption {
 right:0;
}
.cap-top:before {
 top:10px;
 left:10px;
}
.cap-top figcaption {
 left:0;
 top:-30%;
}
.cap-top:hover figcaption {
 top:0;
}
.cap-bot:before {
 bottom:10px;
 left:10px;
}
.cap-bot figcaption {
 left:0;
 bottom:-30%;
}
.cap-bot:hover figcaption {
 bottom: 0;
}

=============================

DOWNLOAD | DEMO