Get Adobe Flash playerPlugin for blogger by way2blogging
Related Posts Plugin for WordPress, Blogger...

Membuat Efek Draggable Dengan JavaScript

draggabilly-javascript
Membuat elemen HTML menjadi bisa digeser-geser ternyata jauh lebih mudah dibandingkan dengan apa yang Saya pikir selama ini. Fungsi di bawah ini murni menggunakan JavaScript biasa dan tidak memerlukan library apapun.

Dibawah ini adalah sedikit potongan code yang akan digunakan.

HTML

<div id="draggable-element" style="position:relative;">Drag me!</div>

JavaScript

var selected = null, // Object of the element to be moved
    x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
    x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element

// Will be called when user starts dragging an element
function _drag_init(elem) {
    // Store the object of the element which needs to be moved
    selected = elem;
    x_elem = x_pos - selected.offsetLeft;
    y_elem = y_pos - selected.offsetTop;
}

// Will be called when user dragging an element
function _move_elem(e) {
    x_pos = document.all ? window.event.clientX : e.pageX;
    y_pos = document.all ? window.event.clientY : e.pageY;
    if (selected !== null) {
        selected.style.left = (x_pos - x_elem) + 'px';
        selected.style.top = (y_pos - y_elem) + 'px';
    }
}

// Destroy the object when we are done
function _destroy() {
    selected = null;
}

// Bind the functions...
document.getElementById('draggable-element').onmousedown = function () {
    _drag_init(this);
    return false;
};

document.onmousemove = _move_elem;
document.onmouseup = _destroy;

DEMO


Audio Standards HTML5

Audio Standards HTML5
Audio Standards HTML5

HTML5 is exciting and anyone who builds web pages is looking forward to implementing these new tags into their sites. HTML5 audio tags are definitely one of the ones on the list meant to make life much easier for both webmasters and end users.

Until now there has never been a standard audio player for browsers. If you wanted to place audio on your site you either had to use one of the available players such as Windows Media Player or Quicktime player. With HTML5 audio there is just simple code to use to place audio anywhere on the page without have to have a separate audio player or 3rd party service hosting your audio.

Here is an example of how to use the HTML5 audio tags in your web code.
<audio src=”song.ogg” controls=”controls”>This is alternate text that is seen if the users browser does not recognize the html5 tag</audio>

There are several attributes you can use along with your tag to customize your player. The attributes include autoplay, control customization, looping and pre-loading. Which means you can start your video when someone opens your page, customize what controls they see on the audio player and even loop the video so it plays continuously over and over.

So with the implementation of this tag it is going to become much easier for the average webmaster to add audio to their websites and blogs. The HTML5 video tag is also new and is similar in that it provides and across the board video player for putting videos on your site.

Right now HTML5 tags especially the audio and video tags are very experimental. Browser support while getting better is still in its infancy stages which means that as cool as these tags are implementing them into your designs now is going to leave a huge part of the PC internet users unable to see the content on your site.

One also has to wonder what the effects of HTML5 audio and video tags on web hosting. Until now most web hosts could depend on the fact that if a blog or small website wanted to use video or audio it was likely they would host it elsewhere.

With the ease of using these tags I have a feeling once they become more of a standard and are more widely used web hosts are going to see far more people hosting big audio and video files on their servers. Which could mean a rise in web hosting costs depending on how much extra storage space and bandwidth is being used.

HTML5 is coming there is no way around it but it is going to take some time before you can safely use it in your websites. Tags like the HTML5 audio tag are going to make certain elements of design so much easier, so until then we will just wait.

Membuat Sitelink Pada Search Engine Google

sitelink
sitelink

Apa itu Site Link?


Google sitelink atau sitelink google merupakan link-link khusus yang bersifat dinamis dalam suatu blog/web yang juga merupakan navigasi dari web/blog tersebut. Tidak semua blog/web bisa mendapatkan sitelink dari google, karena untuk mendapatkan sitelink bukanlah hal yang mudah, butuh ketekunan, kesabaran dan optimasi yang tinggi untuk mendapatkannya.

Bagaimana cara agar mendapatkan Sitelink Google?

  1. Membuat sebuah artikel pada blog minimal 3 kali dalam seminggu dan mengoptimalkan maksimal dalam satu hari satu artikel yang menarik.
  2. Pada saat menulis artikel jangan menggunakan anchor text (klik disini) atau yang lainnya.
  3. Gunakan kata kunci pada artikel tersebut yang terkait dan relevan jangan mengulang keyword.
  4. Gambar pada artikel harus menggunakan attribut img dan alt yang berbeda dengan kata kunci postingan artikel anda.
  5. Membuat menu navigasi yang disertai kategori atau label pada blog anda.
  6. Buatlah meta tag deskripsi dan keyword pada blog anda.
  7. Share artikel anda keberbagai sosial media & sosial bookmarking yang ada.
  8. Buatlah artikel terkait pada bawah postingan anda.
  9. Blog anda harus beerumur 3 bulan dan memiliki sebuah artikel minimal 100 postingan.
Mungkin sekian artikel dari saya semoga artikel ini menarik dan dapat membantu sobat blogger semua.

Struktur HTML5

Artikel kali ini kita akan membahas HTML5, apa yang kita harus ketahui dari HTML5? Mari simak tulisan kali ini.

HTML5 adalah versi terbaru dari HTML yang statusnya sudah direkomendasikan oleh W3C walau belum 100% sempurna, tapi beberapa sudah bisa dipakai.

HTML5 sangat powerful, sampai-sampai almarhum Steve Jobs pernah mengatakan HTML5 sebagai pengganti Flash, perkataan Steve Jobs tersebut sedikit banyak mempengaruhi para programmer yang ingin mengembangkan flash. Tentunya membuat sebagian dari mereka berpindah ke HTML5. Steve Jobs juga mengatakan kalau Flash itu berat dan boros baterai. Dan Apple tidak akan mensupport Flash lagi.
HTML5

Logo HTML5

Penjelasan tentang logo HTML5 Selengkapnya bisa anda baca di W3

Berikut ini adalah logo HTML5 yang sudah banyak dipasang di website-website yang sudah menerapkan HTML5 di website nya

logohtml5

Status

Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.

Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012 . Kriteria di W3C agar sebuah spesifikasi dapat berstatus – Direkomendasikan – adalah “yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda”. Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk:
Beberapa bab secara relatif telah stabil, maka dari itu implementasinya juga sudah hampir mendekati penyelesaian, dan fitur tersebut sudah dapat digunakan hari ini (misalnya: tag <canvas>). — WHAT Working Group, When will HTML5 be finished?
Markup / Struktur Penulisan
Bagaimana memulai HTML? Cukup menuliskan tag berikut:
<!DOCTYPE HTML>
Lengkap nya sebagai berikut:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>



Ada beberapa Tag HTML baru yang bisa dipakai seiring munculnya HTML5

<header>


Header dari sebuah section, mungkin lebih enak menyebutnya seperti itu
Biasanya Header berfungsi untuk menentukan header dari website yang berisi Logo/Nama Website atau deskripsi website

header juga bisa diletakkan diantara <section>, untuk menandakan judul dari sebuah section

<section>


Section biasanya digunakan untuk meletakkan konten, sebuah section biasanya diletakkan setelah Header, dan sebelum Footer

<nav>


Untuk mendefinisikan area navigasi, biasanya berisi daftar link.

<article>


Article biasanya untuk menempatkan entry independent dalam sebuah blog, majalah, ringkasan dan sebagainya.
biasanya terletak didalam section

<aside>


Sebuah aside menunjukan konten yang berkaitan dengan konten lain nya yang ada di sekitar nya. Biasanya aside bisa digunakan untuk area sidebar pada sebuah blog.

<footer>


Untuk menentukan bagian footer atau bagian bawah dari sebuah website, biasanya berisi hak cipta dari sebuah website.

Penggunaan nya dalam struktur HTML selengkapnya sebagai berikut: 
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Your Website</title> </head> <body> <header> <nav> <ul> <li>Your menu</li> </ul> </nav> </header> <section> <article> <header> <h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </article> <article> <header> <h2>Article title</h2> <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </article> </section> <aside> <h2>About section</h2> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </aside> <footer> <p>Copyright 2009 Your name</p> </footer> </body> </html>

Oke sekian penjelasan tentang HTML5, semoga jika ada tulisan tentang HTML5 lainnya, anda tidak akan bingung.

Seo Tutorial For Beginners

seo

Seo tutorial for beginners, Why you need it?


This is a key question. Why? Cause if you understand this answer, definitely you save a huge amount of time and money. The common mistake for a beginner is his/her excitement. When you excite for something can’t think clearly so you make mistakes. These mistakes cost you time and money. Here’s the big problem, you can’t avoid it. That’s right it’s very hard to avoid your excitement if you are a beginner and the truth is, you have to excite with your success like your first sale, else is to boring and definitely you give away. Which is the solution? You have to trust someone expert with clear view and thinking. Cause this man was here in the same situation with you and he knows where is the traps you have to avoid. That’s why you need a Seo tutorial to avoid all these mistakes beginner’s do. Here some other mistakes were beginners do.

1.Try to find information in Google.

That’s why is bad? Google is the best search engine out there that for sure, but why lose your time when you have all the information you want in one package. That’s right you save huge time with this move. Here’s why. Finding information for seo in Google isn’t so easy, you have to search for all steps of seo, on page seo, of page seo , back links, keywords…….and if you find some you are not for sure is accurate. Imagine find information about an advance Seo technique, it’s hard and waste of time. Just download a Seo tutorial it’s free and you have all the knowledge need a beginner.

2. Buy wrong products.

This is a huge wasting of money and time. Not only you lose money for something you don’t know if it works (some costs 70$) but you fall in a huge trap with no end. Here’s why, you try this technique and you see that doesn’t work. Then ask yourself, what I’m doing wrong? And then you try again and again ……… Stop, you doing nothing wrong just the product is crap, the technique never worked. So already you lost 70$ and at list 3weeks to learn and test the Seo technique.

What can I do? How to avoid these scams?

Here some tips for beginners.

1. Subscribe to an expert, it’s free.

An expert will help provide you the best offers and tips that he is sure works well. When download the free package (Seo tutorial for beginners) automatically subscribe to my list. How I know if this expert is a scam to? I don’t know what the others do, here how I choose an expert.

a. See his/her website. Is it professional? Don’t expect something extraordinary, just a good useful site. Read the articles definitely here you can understand if this person knows something about the niche.

b. Ways to save you money. No one scam give’s you tips how to save money. All scams try to take you more money in less time. Cause they have little life time. Soon or late you realize that is a scam. In my free package (Seo tutorial for beginners) I give you tips that save you 100$.

c. The products. Download and try the products. Start with the free one in my case Seo tutorial for beginners 100 seo tips, if this product is useful, you can understand if that person spends some time to choose it. Then buy the cheapest product in my free package is just 4$. If that product give you some value or it works for you is another sign that this expert isn’t another scam. Cause definitely he/she made some research or buy it before promote it to you.

2 Read some reviews.

Go to Google and type the product name + reviews and read some opinions about the product. If you don’t find some, that’s because the product is new or is no so popular. This doesn’t mean it’s a scam. Try to avoid the reviews who say about you can find this information for free. Read the mistake 1 to find why.

3 Don’t buy anything above 70$ is too risky.

Not all the products that costs more 70$ are bad, but imagine to buy a product that costs 200$ and finally you understand that product is a scam or completely useless. If you don’t care to lose 200$ take the risk, but for you who losing 200$ is something, just don’t.

3. Change the course of a Seo technique.

Another common mistake were beginners do. Change the steps of a Seo strategy. You have to follow exactly the Seo steps of a technique cause if you make a change to the course, perhaps this step is crucial so you destroy all the technique. If you have an idea or you want to replace a step that don’t you like better ask an expert first.

Seo tutorial, inside the Free package.


1. 100 Seo tips.

A must have e book not only for beginners. With this e book you take a huge advance from your competitors. Everyone else have to pay for this information, but here you can take it for free.

2. The best guides and advance techniques for your education.

Three recommendations of guides that helps me a lot. These guides starts from the cheapest 4$ to more expensive. Even the cheep one have so useful information that can explode your rankings.

3. Tips to save 100$

How you can save 100$? I’ll give the most common mistake beginner’s do cause their enthusiasm. Plus inside my free package there is a course how to minimize the cost of your education.

4. All tools you need for a Seo course. Free and pay recommendations.

A list of useful tools where definitely help you to your Seo. From keyword search tool to on page Seo and of page Seo tools that help you for the best results.

5. A list of keywords for hungry buyers.

You know what the hungry buyers are, if you don’t read this article. If you want make some serious money online you have to rank under these keywords. In my free package I give you a list of the most profitable keywords that certain make you an income online.

Conclusion


Now you finish this article definitely you are wiser than before. You already learn the most common mistakes that beginners do, how to recognize a scam, product or expert and you realize the value of the product I give you (Seo tutorial for beginners). Make the right choice and avoid one more big mistake.

Quick Tip: Remember to Style Your ALT Text

The alt attribute within an <img> tag provides alternative content for users who can't download images, or who have images turned off altogether. We use this attribute all the time to make our content more accessible, but have you ever considered what it actually looks like?

We're going to use the email template we built in a previous tutorial as an example, but the principles apply just as well to browser-based web design.

<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />

If we take a look at our file with images turned off, this is what it looks like:
altTagsBefore

Clearly the ALT text is unattractive — especially the links. We can do a few things to jazz it up.

For the main heading, we’re going to make the text much larger and change it to our dark blue instead of black. We do this by adding styles to the parent element (in this case a cell). These styles will then be applied to the alt tags within that cell.

This is our cell:

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

We’ll add some text styling so it looks like this:

<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0; color: #153643; font-size: 28px; font-weight: bold; font-family: Arial, sans-serif;">
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>

And we'll style our social media links so that they become white:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
<a href="http://www.twitter.com/" style="color: #ffffff;">
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
<td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
<a href="http://www.twitter.com/" style="color: #ffffff;">
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
altTagsAfter
Simple as that! Now we can be confident that our email will display well, even with images turned off.