Get Adobe Flash playerPlugin for blogger by way2blogging
Related Posts Plugin for WordPress, Blogger...
Showing posts with label Tutorials. Show all posts
Showing posts with label Tutorials. Show all posts

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


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.

Replace Genesis Breadcrumbs Home Text with Icon or Image

home-icon
In case you haven’t notice, Icons are all the rage these days. All the cool kids are using them, so it only makes sense that you should use them too. And what better place to use one than in your breadcrumbs.

Not every theme uses breadcrumbs, so we’ll give a quick explanation of them. Breadcrumbs are a link “trail” to give a visual representation of the path used to arrive at this page.

Besides giving an easy way for visitors to go back to the previous, parent page or home page, they’re good for SEO (Search Engine Optimization).

As with most things Genesis, there is a filter that allows you to easily modify the breadcrumb display, including the “Home” text:
add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );
function sp_breadcrumb_args( $args ) {
    $args['home'] = 'Home';
    return $args;
}
“Home” is the Genesis default text for the home breadcrumb link. Changing “Home” in the function above will change the Home text that appears in your breadcrumbs.

This works great if you’re only changing the text, but this function encodes html using esc_html(), so if you change it to add an icon or inline image, the code will display instead of the image.

Replace The Home Text With A Font Awesome Home Icon Using A Genesis Filter


Of course, this can be done using css but there’s another way using a different breadcrumb filter. This filter allows you to replace the “Home” text with your html code to display icons or images. The filter name is “genesis_home_crumb”, which does just as it says and filters only the Home portion of the breadcrumb.

Before we can use this filter we have to access the Font Awesome library. On the Font Awesome getting started page, they provide several methods. The first method shows you how you can use the Font Awesome CSS file that’s hosted on the Bootstrap CDN so you don’t have to worry about uploading the files to your own server (if you prefer to host your own, there’s an example for that also.

The proper way to include this file is by using WordPress’ built in wp_enqueue_style function:
add_action( 'wp_enqueue_scripts', 'youruniqueprefix_load_scripts' );
function youruniqueprefix_load_scripts() {
    wp_enqueue_style( 'youruniqueprefix-fontawesome' , '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' ); // font awesome css from cdn
}
Now that we have Font Awesome set up, visit their website to find the icon you want to use. In our case, we’ll use the fa-home icon. If you visit the fa-home icon link, you’ll see the code to add to include the font on your website: <i class=”fa fa-home”></i>

If we replaced “Home” with this code in the genesis_breadcrumb_args filter above, it would show the html and not the icon. So how can we replace the “Home” text with the icon? Using the “genesis_home_crumb” filter, we can rebuild the “Home” part of the breadcrumbs with our html.

Add the function below to your theme’s functions.php file, and your “Home” text will now be replaced with the Font Awesome “fa-home” house icon. Of course, you can use any html you want, so if you are using a different icon set, or want to use an inline image, simply replace the code with your own html and you’ll see the results.
// Replace breadcrumbs "Home" with Home Icon
add_filter ( 'genesis_home_crumb', 'youruniqueprefix_breadcrumb_home_link' ); // Genesis >= 1.5
function youruniqueprefix_breadcrumb_home_link( $crumb ) {
    $crumb = '<a href="' . home_url() . '" title="' . get_bloginfo('name') . '"><i class="fa fa-home"></i></a>';
    return $crumb;
}