Membuat header blog gambar memiliki link

 Membuat Link Di Gambar Header Blog. Inilah judul postingan Tutorial Blog kali ini, beberapa waktu yang lalu ada salah seorang teman spesial yang pengen banget menaruh Link Di Gambar Header Blog pribadinya, awalnya saya berpikir mungkin susah dan sangat ribet, butuh satu hari full untuk Membuat Link Di Gambar Header Blog dan berbagai cara sudah saya gunakan mulai menggunakan Script tapi tidak ada satupun yang berhasil dan akhirnya saya kepikiran dengan Adobe Dreamweaver yang sempat saya gunakan dalam metode pembelajaran beberapa semester lalu. Dan akhirnya hanya dengan beberapa menit Link Di Gambar Header Blog sudah selesai. Setelah itu saya berpikir mungkin ada baiknya jika saya sedikit berbagi Cara Membuat Link Di Gambar Header Blog bagi sobat-sobat yang belum mengetahui cara membuatnya.

Apabila anda tertarik untuk membuatnya, ada baiknya anda melihat dulu contoh Link Di
Gambar Header Blog yang saya buat di http://vytha.com/. Perhatikan gambar di header ada tiga link yang saya buat di antaranya twitter, facebook dan rss atau lihat gambar di bawah ini;

Untuk Membuat Link Di Gambar Header Blog anda harus memiliki Software Adobe Photoshop dan Adobe Dreamweaver dan yang paling penting adalah imajinasi untuk menggambar header. Baiklah sekarang kita langsung saja ke TKP.

01. Buka Adobe Photoshop anda. Bualah Gambar Header yang anda inginkan dan yang perlu di perhatikan adalah ukuran Width dan Height gambar header yang anda buat, jika anda tidak tahu ukuran header blog anda silahkan copy gambar di header blog anda yang sekarang dan lihat berapa dimension-nya atau anda juga dapat mengedit gambar header blog yang ada sekarang.

klik gambar untuk memperjelas

02. Setelah anda membuat gambar baru, isi gambar dengan gambar yang anda inginkan, anda bisa mencari gambar di Google ataupun anda bisa membuatnya sendiri.

klik gambar untuk memperjelas

03. Masukkan gambar lebih banyak atau buatlah gambar yang sesuai untuk header blog anda agar tampak lebih menarik.

klik gambar untuk memperjelas

04. Setelah gambar header blog yang anda buat telah selesai, selanjutnya masukkan gambar yang ingin anda berikan Link dan masukkan tulisan sesuai dengan menu link yang ingin anda buat.

klik gambar untuk memperjelas

05. Jika gambar header blog yang ingin anda berikan link telah selesai, silahkan save dengan format .png. Untuk contoh diatas hanya ada tiga menu di gambar header yang saya buat untuk di berikan link, anda juga bisa menggunakan satu menu atau lebih tergantung dari kebutuhan anda.

06. Buka Adobe Dreamweaver. Setelah Dreamweaver terbuka silahkan anda pilih HTML.

klik gambar untuk memperjelas

07. Selanjunya tampilan Dreamweaver anda seperti dibawah ini;

klik gambar untuk memperjelas

08. Pada menu bar, klik Insert > Image atau anda juga bisa menekan Ctrl+Alt+I. Setelah itu masukkan gambar header yang tadi anda buat.

Cat: jika anda menemukan pop up seperti dibawah ini, klik saja OK dan klik lagi OK.

klik gambar untuk memperjelas

09. Setelah anda selesai memasukkan gambar maka tampilannya akan seperti dibawah ini;

klik gambar untuk memperjelas

10. Perhatikan bagian bawah pada Menu Properties. Ada kotak, bulat dan poligonal silahkan gunakan salah satu tools tersebut untuk menentukan bagian gambar header yang ingin anda berikan Link.

klik gambar untuk memperjelas

11. Untuk contoh saya menggunakan tool kotak, silahkan gunakan tools untuk menentukan bagian gambar mana yang ingin anda berikan Link, bagusnya jika anda sesuaikan dengan menu yang anda buat. Tools ini nanti berfungsi untuk memberikan Link pada menu di gambar header blog yang anda buat tadi. Perhatikan gambar dibawah ini;

klik gambar untuk memperjelas

Ket:

A = Adalah gambar yang sudah saya tandai menggunakan tools untuk diberikan Link

B = Masukkan Link yang ingin anda tuju

C = Pilih target Link, "_blank" jika anda ingin Link yang dituju saat di klik terbuka di tab baru dan "_self" jika anda ingin Link yang dituju saat di klik terbuka di tab yang sama

Cat: Sampai disini hanya satu menu di bagian gambar yang sudah saya berikan Link, jika di Gambar Header anda lebih dari satu menu silahkan ulangi langkah di atas mulai dari anda menentukan bagian gambar yang ingin anda berikan Link untuk menu selanjutnya.

12. Setelah semua menu yang anda buat di gambar header telah anda berikan Link atau telah selesai, selanjutnya Save header dengan format .html.

klik gambar untuk memperjelas

13. Klik 2x file header.html yang tadi anda save dan lihat hasilnya. Seperti itulah nanti yang akan tampil di Header Blog anda, periksa bagian menu di gambar yang anda berikan Link. Apakah sudah sesuai dengan yang anda inginkan atau belum.

14. Selanjutnya klik kanan file header.html dan Open with > Notepad. Perhatikan gambar dibawah ini.

klik gambar untuk memperjelas

Ket: Dalam lingkaran merah adalah alamat Gambar Header anda yang ada di PC/Laptop anda, tapi gambar itu belum ada di internet, jadi yang harus anda lakukan adalah meng-upload gambar tersebut ke internet. Anda bisa meng-uploadnya di Photobucket, Picasa Google dll.

15. Setelah anda selesai upload gambar header, ganti alamat gambar yang tadi dengan alamat gambar yang anda telah upload ke internet.

klik gambar untuk memperjelas

16. Copy kode mulai dari "<img src= sampai </map>". panjang atau pendeknya kode yang akan anda Copy tergantung dari banyaknya Menu di gambar yang anda buat.

klik gambar untuk memperjelas

17. Setelah itu Log in ke Blogger anda dan klik "Layout" > "Add a Gadget" dan pilih "HTML/JavaScript" (kosongkan "Title") dan paste kode yang tadi anda copy dan klik "Save".

klik gambar untuk memperjelas

18. Selanjutnya Drag "HTML/JavaScript" tersebut tepat di Bawah Header Blog anda. Lihat Gambar dibawah ini;

klik gambar untuk memperjelas

Ket: 

Dalam lingkaran merah itulah HTML/JavaScript yang tadi anda buat, dan sudah di Drag tepat di bawah Header. BUKAN TEPAT DI ATAS POSTINGAN BLOG ANDA.

19. Selanjutnya "Save Arrangement" dan lihat hasilnya.

Waktu pertama kali saya Membuat Link Di Gambar Header Blog, posisi gambar header yang saya buat tidak berada pada posisi semestinya, ini dikarenakan saat menyimpan HTML/JavaScript tidak tepat dibawah Header melainkan di atas Postingan Blog. Perlu diingat tidak semua Theme Blog yang anda download menyediakan tempat widget dibawah Header dan kebanyakan berada diatas Postingan Blog terkecuali anda menggunakan theme bawaan Blogspot (Blogger Template Designer).

Jika anda menemui masalah seperti itu, mungkin solusi dibawah ini dapat membantu anda.

- Masuk di "Edit HTML" dan Ceklist "Expand Template Widget"

- Cari <div id='header'>

- Tekan Ctrl+F untuk mempermudah anda menemukan kode diatas

- Setelah anda mendapatkan kode tersebut, Copy kode yang tadi di Notepad dan Paste tepat dibawah <div id='header'> (Kode yang anda Copy tetap sama dengan kode yang anda Copy ke HTML/JavaScript). 

- Save Template anda dan lihat hasilnya.

Sumber

Read More

Cara Membuat Komentar Facebook di Blog terbaru paling baru dijamin work 100%

Sebelum melanjutkan pembahasan mengenai cara membuat kolom komentar Facebook di blog ini, sedikit perlu saya jelaskan manfaat adanya kolom komentar Facebook di blog yaitu akan meningkatkan jumlah pengunjung blog anda melalui Facebook. Kok bisa? Karena setiap anda berkomentar maka komentar anda akan tampil di halaman beranda (biasanya ada di sidebar sebelah kanan Facebook) facebookers yang lain dan jika facebookers tersebut membaca update-an komentar anda dan mengkilk tautan komentar tersebut maka secara langsung facebookers tersebut akan diarahkan ke blog anda. Tapi ingat! kolom komentar Facebook di blog ini akan berfungsi maksimal jika yang berkomentar sedang dalam keadaan aktif dengan akun facebooknya atau tidak mencentang Post to Facebook yang ada didalam kolom komentar.

Okey, dan berikut cara membuat kolom komentar Facebook di blog

1. Buatlah sebuah aplikasi yang akan mengintegrasikan blog anda dengan Facebook. Untuk membuatnya, silahkan baca Cara membuat aplikasi Facebook
2. Jika sudah selesai membuat aplikasi facebooknya, buka akun blogger anda
3. Pilih menu Template >> Edit Html >> centang Expand Template Widget >> tekan tombol Ctrl+F di keyboard
4. Cari kode <b:skin><![CDATA[ dan tambahkan kode berikut sebelum atau diatas <b:skin><![CDATA[

   <meta content='profil.sriwahyuni' property='fb:admins'/>
   <meta content='259054834227698' property='fb:app_id'/>
   <script src='http://code.jquery.com/jquery-latest.js'/>
   <script src='http://panduan-template-blog-id.googlecode.com/files/CommentPages.js'/>
   <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>Kode HTML

   
   Keterangan
   • Ganti profil.sriwahyuni dengan nama akun Facebook anda
   • Ganti 259054834227698 dengan ID Aplikasi Facebook anda yang telah anda buat
5. Cari kode <div class='post-footer-line post-footer-line-3'/> dan tambahkan kode berikut tepat dibawah <div class='post-footer-line post-footer-line-3'/>

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='fb-comments' data-num-posts='10' data-width='550' expr:data-href='data:post.url'/>
   </b:if>Kode HTML

   
   Keterangan
   • data-num-posts='10' merupakan jumlah komentar yang tampil. Silahkan anda ganti jika ingin menampilkannya lebih banyak
   • data-width='550' merupakan lebar kolom komentar. Silahkan diganti dengan menyesuaikan lebar area postingan blog. Bukan lebar blog
6. Selesai dan simpan Template blog anda. Lihat hasilnya di bagian bawah artikel atau diatas kolom komentar Blogspot

Itulah cara termudah dalam menampilkan atau membuat kolom komentar Facebook di blog. Jika ada yang pertanyaan, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Cara Membuat Kolom Komentar Facebook di Blog

*SUMBER

Read More

Menambahkan Lagu pada Blog tersembunyi , auto play dan Format SWF

1. Pilih lagu kesukaan anda (MP3) dan konvert menjadi format swf.

>> link download aplikasi pengubah mp3 to swf portable dibawah ini :

DOWNLOAD

Karena Ripway sudah tidak bisa sekarang kita pakai http://www.4shared.com/

1. Daftar di situs ini : http://www.4shared.com/

2. Pilih lagu mp3 yang anda suka dan upload ke situs http://www.4shared.com/ yang telah anda daftar

>> di http://www.4shared.com/

1. Upload atau Unggah lagu format .SWF yang ada mau.

2. Setelah upload akan muncul notifikasi dan kamu tinggal copas aja link alamat lagu yang diupload tadi

3. Edit kode tersebut. Misalnya kode yang kamu dapat yaitu :

    http://www.4shared.com/document/3Q-wROI-/fuwa_fuwa+time.html

 Ganti "document" dengan "embed". Dan "html" dengan "swf". Sehingga hasilnya :

    http://www.4shared.com/embed/3Q-wROI-/fuwa_fuwa+time.swf

4. Setelah mendapat URL yang diedit diatas, copy aja kedalam kode bawah ini menggantikan kode yang berwarna merah.

    <embed src="http://www.4shared.com/embed/fxgUFosz/judul lagu.swf"

    autostart="true" loop="true" width="0" height="0"/><embed>

>> di blog kita

1. Masuk rancangan baru dan pilih HTML/JavaScript

2. Paste kan link Direct link anda yg di 4share ke notepad (jika tab tertutup) utk penampungan sementara.

2a. Paste di box rancangan HTML/JAvaScript tadi yang dari 4share tadi

<embed src="http://www.4shared.com/embed/fxgUFosz/judul lagu.swf"

    autostart="true" loop="true" width="0" height="0"/><embed>

ganti yang merah dengan link lagu kita , misal :

http://www.4shared.com/embed/3Q-wROI-/fuwa_fuwa+time.swf

sehingga jadi

<embed src="http://www.4shared.com/embed/3Q-wROI-/fuwa_fuwa+time.swf"

    autostart="true" loop="true" width="0" height="0"/><embed>

5. Looping boleh di true untuk ulang lagu saat selesai dan harap autostart di true saja, agar lgsg lagunya play mode.

6. Save dan simpan lalu lakukan Peninjauan.

bila lagu tidak muncul, mungkin flash anda bermasalah. atau coba main-mainkan width dan height , maksudnya dirubah angkanya jadi 4. bila masih tidak bisa mungkin bisa restart browser atau restart komputer anda.

Sumber

Read More

Membuat efek salju berjatuhan pada blog keren

Gampang kok caranya :

1. Buka Blogger.com
2. Tata Letak - Tambah Widget
3. Pilih HTML java Script
4. lalu paste kode di bawah ini
   
   
   <script src="http://masterendi.googlecode.com/files/salju.js"></script>
   
5. lalu simpan - Selesai
   
   
   gampang kan ?
   
   Comment aja kalau masih bingung :)
   

Read More

Tante Alexa naik turun

Hadeh

Pusing gue di tipu ma Tante Alexa

mentang mentang puasa ni

page rank nya naik turun mulu 

kalau waktu puasa turun

kalau udah buka puasa naik lagi

gila men

padahal gue nunggu berbulan bulan tuh buat naikin

eh malah sekarang naik turun gitu

hadeh

ada yang bisa bantu??
share kawan

Read More

Pengunjung Blog 1300 orang per hari

Gilak :D
hhahahha

baru kali ini blog gue traficnya sampek segini

seribu dua ratus orang men :D

wkokwokwok

Mungkin juga gara gara gue posting album NOAh band :D
hahaha

NOAH band emang sih band fenomenal

Cus deh kalau kalian mau download juga

langsung aja cek di sini

kalau hari kemarin cuma 8oo an pengunjung

hari ini gue cek ternyata sampek 1200 orang

hahahaha

mungkin kalau mau kayak gue bisa kok :D
heheh

mau gak :D
kwokwok

daftarin aja langsung ke google

supaya bisa terindeks

nah ini buktinya :D

Read More

Membuat Tombol Maksimize dan Minimize pada blog

 

Mau kayak gitu?

nah gampang kok

1. masuk ke Blogspot.com
2. klik rancangan
3. edit html
4. Expand ( centang )
5. Yang pertama cari aja widget yang mau di kasih max dan min
6. klik Ctrl + F biar cepet
7. misalnya gue kan mau kasih MY VIDEO
   langsung aja search pakek Ctrl + F dan ketik My Video
8. kalau udah ketemu cari kode di bawah ini setelah My Video
   
   <h2 class='title'><data:title/></h2>
   
   
9. Ganti kode di atas dengan kode di bawah ini
   
       <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd;
       document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;inline&quot;" src="http://i28.tinypic.com/8xq3jb.png" style="float:right;margin-right:0px;cursor:hand;"/>');
       document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;none&quot;" src="http://i26.tinypic.com/300bfis.png" style="float:right;margin-right:2px;cursor:hand;"/>');
       /* ]]> */ </script><data:title/></h2>
       <script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:inline;">'); /* ]]> */ </script>
   
   
10. kalau sudah cari kode </b:includable>  dan letakkan kode di bawah ini di atas kode tersebut
    
    
    
    <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
    
    
    Save dan Lihat hasilnya
    
    
    Comment ya guys :)
    
    
    
    Like FanPage Juga Ya
    dududth.blogspot.com

Read More

Membuat Scroll pada Widget dan Script Blog

Kata scroll saya kira sudah tidak asing lagi ditelinga kita, scroll adalah sesuatu yang dapat ditarik ke atas dan ke bawah, atau ke samping kanan dan kekiri, maka dari itu ada istilah scroll vertical dan scroll horizontal.

Jika anda ingin membuat scroll di widget blog anda, silahkan ikuti tutorial berikut:

Cara Pertama:
Jika menggunakan widget HTML/JavaScript anda bisa gunakan script dibawah ini :

<div style="overflow:auto;width:100%;height:200px;padding:0px;border:0px solid #eee">
teks atau daftar link bisa dibuat disini.
</div>

Untuk membuat daftar link supaya tampilanya rapi, gunakan kode seperti dibawah ini:

 <ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

Cara Kedua:
Jika anda menggunakan widget seperti label, archive, atau lainya, caranya adalah sebagai berikut:

Bellow basic wdiget ID in your css template:

1. Widget Label = Label1; Label2; Label3, and so on
2. Widget Blog Archive = BlogArchive1; BlogArchive2; BlogArchive3, and so on

Sebagai contoh, jika anda ingin membuat scroll untuk widget label/ kategori:
cari kode  ]]>  didalam template blog anda, copy paste kode dibawah ini:

#Label1 .widget-content{   /* anda bisa edit, seperti  BlogArchive1, atau lainya */
height:200px;               /* anda bisa edit angka ini, untuk mengatur ketinggian */
width:auto;
overflow:auto;
}

Demikian, semoga bermanfaat.

Sumber 

Like FanPage Juga Ya

dududth.blogspot.com

Read More

Like Box Fan facebook terbaru Juni 2012

Sebenernya gue udah lama sih bisa

cuma dari pada gue bingung nie mau posting apaan

mending gue bagi bagi aja

mungkin aja ada manfaatnya

aminn

Nah pengen gak kayak punya gue gini

 

Nah pertama lu kunjungi situsnya di Sini

Setelah itu akan muncul kayak di bawah ini

nah loe isi aja itu dengan URL Fanpage km

trs atur aja sendiri

 

 Setelah loe atur semua Klik GET CODE

terus pilih kayak yang di bawah ini dan Copy ya

setelah loe copy langsung aja kayak byasanya

masuk ke blog km

klik rancangan terus tambah gadget

dan klik HTML/Script java

copy di situ

dan selesai deh

gampang kan

ghehehh

Minta comment nya ya kawan :)

Read More

Postingan Blog gue Terindeks GOOGLE Sangat cepat

MANTAP

kata itu yangada di benak gue

hue baru nulis postingan sebentar

terus gue check di Google langsung terindeks :D

mantap deh mantap :D

ada yang tahu gak cara terindeks Google lebih cepat?

nah gue lupa caranya

yang pasti punya gue sekarang bisa langsung terindeks

hahaha

nie buktinya kan tadi gue nulis GOODFATHER at SMA N 2 Tuban

terus gue check langsung terindeks 

alhamdulillah deh

 

 

ada yang mau??

hahaha

Read More

Buat Smile Cool Di Postingan Blog

Nie gue share hasil gue nyari di blog temen :g:

1. Log in ke akun blog sobat.

2. Klik Rancangan --> Edit HTML --> Letakkan kode berikut di atas kode </body>

<script src='http://tateluproject.googlecode.com/files/post_emoticon.js' type='text/javascript'></script>

 

3. Klik Simpan.

Untuk menerapkannya di postingan, sobat hanya perlu meletakkan kode - kode berikut dalam Compose atau bisa juga di Edit HTML di kolom entri sobat.

:a: untuk emoticon

:b: untuk emoticon

:c: untuk emoticon

:d: untuk emoticon

:e: untuk emoticon

:f: untuk emoticon

:g: untuk emoticon

:h: untuk emoticon

:i: untuk emoticon

:j: untuk emoticon

:k: untuk emoticon

:l: untuk emoticon

:m: untuk emoticon

:n: untuk emoticon

:c:

Sumbernya ini

Read More

Page Rank Tertinggi Blog

Seneng gue :D
selai gue bisa kasih manfaat
gue juga bisa berbagi dan juga bisa naikin page rank blog gue di Google :D
tau gak postingan gue berjudul pengajian KH Anwar Zahid Terbaru

terindeks google di halaman pertama loh :D
hahahha
Coba aja lu cari di google dengan Keyword " Kh anwar zahid terbaru ''
pasti muncul :D
dan juga blog gue jadi rame gara gara tuh postingan :D
nie buktinya :D
paling banyak :D

 

Nah bener kan :D

tuh ada di halaman awal google :D
wkowkowk

Nah yang lebih parah lagi nie :D
gue baru aja ng.post tanggal 11 mei

nah baru 1 hari aja pengunjungnya udah 506 an orang :D

hahaha

gara-gara aku post tentang anwar zahid mungkin ya :D

heheh

thanks yai :D

hehh

Read More

Cara Post Blog ke Facebook Terbaru

Gue dah 3x share tentang ini
tapi selalu aja ada perubahan
ntah knapa tuh
nah langsung aja gue kashi tau caranya
ikuti ya langkah nya

1. kunjungi URL ini http://beta.rssgraffiti.com/#_=_
2. isi langsung sesuai punya lu
3. nanti pengaturannya seperti gambar di atas ini
4. nah klik save
5. finish !
   
   
   semoga berhasil kayak punya gue ye :)

Read More

Ada yang tahu cara Post Blog Di FB??

Shit :@
knapa nie blog :O
dulu bisa langsung postingan gue ada di wall FB gue tapi sekarang kok lelet gini ya :O
ahh
ada yang tahu gak solusinya??
help me guys???
Comment ya :)

Ada yang tahu cara Post Blog Di FB??

erroor again :O
udah gue utak atik juga :O
tp tetep aja :O
tolong bantuannya??

Read More

Cara buat Tukar Link dengan Gambar

Mau tahu gak caranya gimana??

nah ikuti ya langkah nya

langsung saja deh, nih langkahnya :

1. Log in dulu ke Blogspot.com
2. Pilih Rancangan
3. Add gadget
4. Pilih HTML/JavaScript
5. Nah paste kode berikut ini
   
   <div style="text-align: center;">
   <img alt="Dududth" border="0" src="http://i1245.photobucket.com/albums/gg584/Dududth/jj.png" />
   <textarea code="" rows="4" cols="29" name=""><center><a href="http://dududth.blogspot.com/" target="_blank" title="Dududth"><img src="http://i1245.photobucket.com/albums/gg584/Dududth/jj.png" alt="Dududth" /></a></center></textarea></div>
   
   
6. Nah nanti hasilnya seperti ini
   
   
   <center><a href="http://dududth.blogspot.com/" target="_blank" title="Dududth"><img src="http://i1245.photobucket.com/albums/gg584/Dududth/jj.png" alt="Dududth" /></a></center>

Catatan :

• Ganti kode kode berwarna biru dengan url blog sobat.
• Ganti kode berwarna merah dengan judul blog sobat.
• Ganti angka berwarna hijau dengan angka yang diinginkan ( mengatur lebar dan tinggi text area )
• Ganti kode berwarna ungu dengan Url gambar sobat.

Read More