Cara Membuat Link Pada Gambar

Mungkin biasanya kita melihat penggunaan link pada teks yang umum muncul di blog atau website-website orang lain. Ternyata selain teks, kita juga bisa membuat link pada gambar yang berguna untuk mengarahkan orang yang mengklik gambar tersebut ke alamat URL yang anda inginkan.

Untuk menambahkan gambar ke dalam halaman baik itu artikel, bagian widget atau dimanapun, anda bisa menggunakan tag HTML <img src="http://"> . Kode IMG SRC itu adalah tag dalam html untuk menyertakan file berupa IMAGE dan http:// merupakan link dari gambar anda. Jadi sebelumnya, pastikan anda sudah mengupload gambar anda ke internet sehingga nantinya didapatkan link URL untuk gambar tersebut.

Sekarang mari kita praktekan cara memanggil gambar ke dalam artikel dengan kode di atas. Kebetulan saya sudah memiliki satu buah gambar yang sudah di upload. Berikut adalah link dari gambar saya : http://megacara.com/wp-content/uploads/2013/04/form2-430x200.jpg

maka kode untuk memanggil gambar tersebut menggunakan kode html adalah seperti ini :

<img src="http://megacara.com/wp-content/uploads/2013/04/form2-430x200.jpg">

(Hasilnya seperti di bawah ini !)

Selain itu anda juga menambahkan atribut seperti WIDTH untuk mengatur lebar gambar dan HEIGHT untuk mengatur tinggi gambar. Atribut ini diletakan setelah link gambar tersebut.

<img src="http://megacara.com/wp-content/uploads/2013/04/form2-430x200.jpg" widht="100px" height="100px">

(Hasilnya seperti ini !)

sekarang bagimana cara menambahkan link pada gambar ? anda cukup menambahkan kode <a href="http://"> Maka kodenya nanti akan seperti ini :

<a href="http://digitalareas.blogspot.com"><img src="http://megacara.com/wp-content/uploads/2013/04/form2-430x200.jpg"></a>

(Hasilnya seperti ini ! )

Klik gambar tersebut dan anda akan menuju ke halaman utama blog ini 

Saya rasa sudah cukup jelas apa yang saya utarakan di atas, sekarang anda hanya perlu mencobanya untuk membuktikan hasilnya. Jadi rasanya artikel Cara Membuat Link Pada Gambar cukup sampai disini saja. Semoga bermanfaat

Read More

Cara membuat popular berjalan pada widget blogger

tutorial ini saya ambil dari yang saya lakukan kemaren, bagi kamu yang mau pasan jua bisa ikuti langkah-langkangya yang saya lakukan ini, mungkin kamu bingung cari di mana dan akhirnya nyasar disini, dan mungkin banyak bertanyakan yang menghinggap di benak kalian , mungkn kalian bertanya bagaimana caranya memasang widget popular post berjalan??, atau tutorialnya membuat popular post berjalan??, nah sobat kali ini saya akan kasih tutorial iini bagi sobat blogger beginners semua nah sobat silaka ikuti langkah-langkahnya si bawah ini.

1. pertama kalian seperti biasa memasang widget kalian yaitu popular post standar pada kalian
2.  kalau sudah memasang widget popular post langkah selanjutnya kalian hanya menambahkan script di bawah ini di widget kalian terserah mau di taruh di mana, yang penting ada di widget kalian. mau di bawah, atas, dll.
3. caranya memasangnya login blogger>> tata letak>> add gadget>>HTML/Java Script>> pastekan script di  bawah ini>> simpan>> selesai....

script untuk popular post berjalan

 <style type="text/css" media="screen">

    #PopularPosts1 {
     overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:400px;
      
    }

    #PopularPosts1 ul {
    width:342px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }

    #PopularPosts1 li {
     width:334px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:80px;
    overflow: hidden;
    background:#fff url() repeat-x;
    border:1px solid #ddd;
    }

    #PopularPosts1 li .item-title {
        color:#A5A9AB;
        font-size:1em;
        margin-bottom:0.5em;
    }

    #PopularPosts1 li .item-title a {
     text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }

    #PopularPosts1 li img {
     float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }

    #PopularPosts1 li .item-snippet {
      overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }

    #PopularPosts1 .item-snippet a,
    #PopularPosts1 .item-snippet a:visited {
        color:#3E4548;
        text-decoration: none;
    }

    #PopularPosts1 .spyWrapper {
        height: 100%;
        overflow: hidden;
        position: relative;  
    }

    #PopularPosts1 {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }

    .tags span,
    .tags a {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
    }

    a img {
        border: 0;
    }

    -->
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
    $(function () {
        $('.popular-posts ul').simpleSpy();
    });
    </script>
    <script src="http://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>

nah itu sia sobat sedikit tutorial dari saya semoga bermangfaat sampai jumpa di posting selanjutnya ya sob... jangan lupa sharing dan komentarnta atau likenya juga boleh... hehehhehe..

Read More

Cara menulis artikel di blog

Setelah Anda membuat blog di blogger, mungkin perlu juga di jelaskan bagaimana cara menulis artikel di blog yang di mulai dari mengenal fitur-fitur yang tersedia di menu editor blogger.com dan akan di lanjutkan dengan tips cara menulis artikel di menu blog yang baik.

Tujuan dari mengetahui teknik penulisan di blog kali ini adalah terkait dengan menata tampilan tulisan dengan mengetahui fungsi atau kegunaan masing masing fitur di editor blogspot.

Disini saya akan menjelaskan beberapa fitur dengan singkat karena tentu anda sudah mengenal fungsi dari gambar icon-icon tersebut sebagaimana di Ms.Word. Kalau bisa ketika mengikuti panduan ini anda langsung praktek. Jadi pertama,,,

Silahkan buka blog anda di blogger.com, setelah itu klik gambar pensil yang jika di arahkan kursur di atasnya akan muncul tulisan "Buat entri baru". Anda akan masuk ke halaman post editor blogspot, lalu lihat gambar berikut yang penomoran nya disesuaikan dengan penjelasan di bawahnya

1. Tulislah judul artikel yang akan anda buat di kotak Entri ini, coba sekarang tulis judul, misal"Panduan Cara Menulis Artikel di blogspot"

2. Ini adalah kotak penulisan artikel, disinilah anda nantinya menulis hal-hal yang ingin anda bagi di dunia maya, silahkan ketik satu paragraf atau beberapa kalimat saja.

3. Simbol F ini berfungsi untuk memilih jenis huruf (font) dari tulisan anda, caranya,,, coba blok menggunakan kursor (Klik, tahan, lalu seret mouse untuk menutupi paragraf yang tadi anda tulis)  lalu klik icon F dan pilih jenis font yang anda inginkan.

4. Simbol T ini berfungsi untuk mengatur ukuran huruf
smallest
small
nomal
large
largest

dan untuk ukuran normal atau default bisa mengunakan 12px, 13px, 14px sesuai dengan keinginan anda ketika mengatur ukuran huruf blog agar enak dibaca

5. Kotak bertuliskan "Normal" ini, berfungsi untuk mengatur tingkat kepentingan;
Heading (h2) yang biasanya digunakan pada judul artikel
Subheading (h3)digunakan pada sub judul
Minor Heading (h4) di gunakan pada bagian dari sub judul
Jika anda memilih Normal berarti tidak ada bagian yang lebih penting dari bagian yang lain

6. HTML
Coba anda sekarang klik pada bagian ini, maka akan terlihat kode HTML untuk mengedit jika ada susunan artikel yang kurang rapi misal jarak antar paragraf yang terlalu lebar, tampilan ketika mengetik di editor blog berbeda dengan PRATINJAU atau jika anda ingin menambahkan kode-kode tertentu untuk hiasan pada artikel. Sekarang silahkan kembalikan ke setelan COMPOSE lagi.

7. Empat icon ini fungsinya sama dengan di Ms.Word, silahkan blok/highlight (klik, tahan , geser ke ) salah satu kalimat lalu klik salah satu dari icon tersebut
Bold
italic
Underline
Strikehrough

8. untuk mengatur warna tulisan menjadi merah, kuning, biru dan lain-lain
9. untuk memberi background warna pada tulisan contohnya "tehnik menulis artikel yang menarik"
10. untuk memasukkan link pada tulisan misal, saya memasukkan link pada tulisan ini "cara mengganti background blog dengan gambar" yang mengarah ke salah satu url artikel saya. cara memasukkan link pada tulisan ini sama dengan cara sebelumnya, tinggal anda blok dan tekan icon Link

11. Icon ini digunakan ketika anda ingin memasukkan gambar ke dalam artikel, sebagaimana yang sobat bisa lihat pada artikel ini terdapat beberap gambar sebagai penjelas keterangan. dan yang paling atas adalah gambar penghias.
12. digunakan untuk memasukkan video ke dalam artikel postingan
13. Berfungsi untuk memotong artikel agar artikel yang tampil di homepage ( beranda / halaman depan blog ) tidak terlalu panjang. Tapi jarang blogger yang menggunakan tools ini. Kebanyakan menggunakan "Read More" otomatis agar tampilan home page blog lebih rapih dan lebih menarik.

14. Berfungsi untuk mengatur perataan huruf rata kiri, rata tengah, rata kanan, rata kanan-kiri
15. untuk memberi penomoran secara otomatis, silahkan di coba,,, kalau contohnya bisa dilihat pada penjelasan SETELAN ENTRI
16. untuk memberi tanda bullet pada list atau daftar contoh nya bisa anda lihat di bawah, ketika membahas penggunaan Publikasikan, Simpan,,,

17. Qoute, digunakan untuk membuat petikan kalimat yang akan menjorok ke tengah, biasa digunakan pada kalimat kesimpulan
18. untuk menghilangkan format tulisan, menghapus bullet atau penomoran sehingga semua tulisan yang saudara beri
19. untuk mengecek spelling apa ada tulisan yang salah ketik atau bahasa tidak baku


Setelan Entri

1. Label : Berfungsi untuk memberi label/kategori pada artikel. misalnya artikel dengan judul "Cara menulis artikel di blog" di beri label "tips blogging". Sebuah artikel bisa diberi lebih dari satu label caranya, pisahkan label satu dan yang lain dengan koma. Cara menggunakannya : klik Tulisan "Label", masukkan nama label yang di inginkan pada kotak yang tersedia, lalu klik "Selesai".
2. Jadwal : Berfungsi untuk mengatur waktu penerbitan artikel yang di inginkan.
3. Lokasi : Berfungsi untuk menentukan lokasi anda.  Cara menggunakannya : Klik tulisan "Lokasi". Masukan nama kota atau negara pada kotak putih lalu klik "Telusuri". Jika sudah ditemukan ( Lihat gambar petanya ), klik tombol "Selesai".
4. Link : Digunakan untuk melampirkan Link pada artikel
5. Deskripsi Penelusuran : Berfungsi untuk memasukkan deskripsi atau penjelasan isi artikel anda.
6. Pilihan : Berfungsi untuk mengatur komentar artikel diizinkan atau tidak, Penafsiran HTML, dan perintah Enter.

Tombol Publikasikan, Simpan, Pratinjau, dan tutup

• Publikasikan : Berfungsi untuk menerbitkan atau mempublikasikan  artikel yang telah selesai ditulis dan memasukkan/menyimpan artikel kedalam blog sekaligus menampilkannya di internet.
• Simpan : Berfungsi untuk menyimpan artikel di draft. Kadang untuk menulis artikel, kita membutuhkan waktu beberapa jam. Karena ada keperluan tapi artikel belum selesai di ketik, gunakan tombol ini untuk menyimpan artikel yang telah di ketik sebelumnya agar bisa melanjutkan menulis artikelnya di lain waktu.
• Pratinjau : Berfungsi untuk melihat tampilan artikel di blog sebelum dipublikasikan.Jadi gunakan apakah ada tampilan yang tidak sesuai dengan tampilan di post editor
• Tutup : Berfungsi untuk menutup halaman "Post Editor" blogspot dan akan di arahkan ke halaman "Semua Pos" ( Termasuk artikel yang ada di draft / konsep )

Cukup ini dulu tutorial cara menulis artikel di blog untuk pemula, sebenarnya masih ada yang perlu di jelaskan lagi tentang penggunaan lebih mendalam pada masing-masing fitur nya, tapi menulis sampai disini juga sudah lumayan kuras tenaga dan waktu, jadi jika ada yang kurang jelas, lebih baik tanyakan di kotak komentar saja ya,,,Maaf dan Terima kasih

Read More

Metro UI Blogger Template

Metro UI is an innovative Windows 8 Style Blogger Template. This theme has a lot of similarities with the Microsoft’s latest operating system Windows 8. This template is ideal for blogging niche like technology, multimedia, entertainment, magazine, and etc.

Nonetheless, that’s not all because it is robust enough to be used on any kind of website. By default, this theme has a greenish color scheme. However, you can customize the theme as per the needs. It has some built-in extra-ordinary features like Numbered page navigation, Elegant Menu, 4 column footer, and much more

Features of Metro UI Blogger Template:

1. Numbered Page Navigation: This is our first theme which has built-in numbered page functionality. It shows numbers instead of older/newer post buttons. It not only increase user engagement but also helps in reducing the bounce rate.


2. Custom Header: The header of this theme is one of its kinds. It looks a like Windows 8 and has extremely efficient Hover effects. All an all, the colorful header are would surely amaze your readers. 


3. SEO-Friendly: We have also installed an SEO Plugin in this template, which would surely help you to increase your organic traffic in quick succession. Though, the plugin is not FREE, but it is sponsored by MyBloggerLab.com. Therefore, it is free only for this theme.


4. Featured Image AREA: Many of our users always complains that slider slows down their blog. Keeping that in mind, we have added a Featured image area instead of sliders. It will only appear on the homepage.

More Features: WordPress Look, Web 2.0, Magazine Style, Green and light orange color Scheme, threaded commenting system, and much more.

How To Customize Header LOGO?

First create an Image Logo of 118px Width and 62px height then Upload it through Picasa Web album or your preferred blogger hosting. Now In order to customize the Logo, you have to first log on to Blogger.com >> your site >> Template >> Edit HTML >> Proceed. Search for the following Image URL and replace it with the image URL of your logo.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhjZhMlkBKFh3UymBkt8B0d39AQt1e4Z2V76GkCtN7Z2ujIvIzRSp_AFfJdygW6CTjU5Bp9iJ2sIOsgnHah_PY9zMhxDv8QfZPmRXDzAbhPoOGtMwXoJH-7517u2yXrDbiMKIgoEMTZpY/s1600/metro.png

How To Customize Navigation Menus:

Go To Blogger.com >> Template >> Edit HTML >> Proceed. Now search for the following coding in the template. After finding it Replace # with your URLs and Save the template.

Header Navigation:

<!-- Header Nav-->
<a class='mm_home' href='#'>Home</a>
<a class='mm_wishlist' href='#' id='wishlist-total'>Wish List</a>
<a class='mm_account' href='#'>My Account</a>
<a class='mm_checkout' href='#'>Checkout</a>
<a class='mm_account' href='#'>My Account</a> 

Main Navigation Menu :

<ul id='nav'>
<li class='level0 first homelink'><a href='#'><span>Home</span></a></li>
<li class='level0 first homelink'><a href='#'><span>Desktop</span></a></li>
<li class='level0 first homelink'><a href='#'><span>Laptops</span></a></li>
</ul>

From The Designer's Desk:

This Theme is indeed cute in terms of looking and has the sharp color scheme that attracts our attention. Hopefully this theme would help you to gaining some extra SEO exposure and more user engagement..

Read More

Metro UI Blogger Template

Metro UI is an innovative Windows 8 Style Blogger Template. This theme has a lot of similarities with the Microsoft’s latest operating system Windows 8. This template is ideal for blogging niche like technology, multimedia, entertainment, magazine, and etc.

Nonetheless, that’s not all because it is robust enough to be used on any kind of website. By default, this theme has a greenish color scheme. However, you can customize the theme as per the needs. It has some built-in extra-ordinary features like Numbered page navigation, Elegant Menu, 4 column footer, and much more

Features of Metro UI Blogger Template:

1. Numbered Page Navigation: This is our first theme which has built-in numbered page functionality. It shows numbers instead of older/newer post buttons. It not only increase user engagement but also helps in reducing the bounce rate.


2. Custom Header: The header of this theme is one of its kinds. It looks a like Windows 8 and has extremely efficient Hover effects. All an all, the colorful header are would surely amaze your readers. 


3. SEO-Friendly: We have also installed an SEO Plugin in this template, which would surely help you to increase your organic traffic in quick succession. Though, the plugin is not FREE, but it is sponsored by MyBloggerLab.com. Therefore, it is free only for this theme.


4. Featured Image AREA: Many of our users always complains that slider slows down their blog. Keeping that in mind, we have added a Featured image area instead of sliders. It will only appear on the homepage.

More Features: WordPress Look, Web 2.0, Magazine Style, Green and light orange color Scheme, threaded commenting system, and much more.

How To Customize Header LOGO?

First create an Image Logo of 118px Width and 62px height then Upload it through Picasa Web album or your preferred blogger hosting. Now In order to customize the Logo, you have to first log on to Blogger.com >> your site >> Template >> Edit HTML >> Proceed. Search for the following Image URL and replace it with the image URL of your logo.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhjZhMlkBKFh3UymBkt8B0d39AQt1e4Z2V76GkCtN7Z2ujIvIzRSp_AFfJdygW6CTjU5Bp9iJ2sIOsgnHah_PY9zMhxDv8QfZPmRXDzAbhPoOGtMwXoJH-7517u2yXrDbiMKIgoEMTZpY/s1600/metro.png

How To Customize Navigation Menus:

Go To Blogger.com >> Template >> Edit HTML >> Proceed. Now search for the following coding in the template. After finding it Replace # with your URLs and Save the template.

Header Navigation:

<!-- Header Nav-->
<a class='mm_home' href='#'>Home</a>
<a class='mm_wishlist' href='#' id='wishlist-total'>Wish List</a>
<a class='mm_account' href='#'>My Account</a>
<a class='mm_checkout' href='#'>Checkout</a>
<a class='mm_account' href='#'>My Account</a> 

Main Navigation Menu :

<ul id='nav'>
<li class='level0 first homelink'><a href='#'><span>Home</span></a></li>
<li class='level0 first homelink'><a href='#'><span>Desktop</span></a></li>
<li class='level0 first homelink'><a href='#'><span>Laptops</span></a></li>
</ul>

From The Designer's Desk:

This Theme is indeed cute in terms of looking and has the sharp color scheme that attracts our attention. Hopefully this theme would help you to gaining some extra SEO exposure and more user engagement..

Read More