Diah Andani Blog

Rabu, 11 Juni 2014

Cara buat efek zoom pada image dalam post - Efek 1

http://diahandani.blogspot.com/p/diary.html

coba temen temen klik gambar di bawah ini deh

naah ketika di klik gambar ini bakal auto zoom in dan zoom out, mau tau caranya? okeeh ikuti tutorial di bawah

Pertama

Kedua

Dashboard >> Design >> Page Element >> Add a gedget / HTML / Javascript

Ketiga

Coppy paste kode di bawah di tempat tadi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script src="
https://sites.google.com/site/jombinabelogefekzoom/jombinabelog-efekzoom.js" type="text/javascript">

</script>

Keempat
Save

UNTUK LANGKAH SELANJUTNYA

Pertama
New post >> buka tab edit HTML sebelah composse

Kedua
Letakan kode di bawah bersama dengan url gambar yang temen temen hendak post nanti (pastikan temen temen letak kode ini pada ruang edit html, bukan compose):
<img src="url gambar di sini"

class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />

Note:

url gambar di sini - url gambar temen temen
200 dan 150 - ukuran lebar dan tinggi gambar

contoh

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSAztaohMQDJ76i4BVSqnldwEm372bMyEFhlB5Djs0wZI7cCmv0tzDJvt6OoTPGgd9ILWWReAP5V74PuEVkAkyRl1mJJO8JIuS7Bw-foQ3L9pm9qFeGLSU4LFPJ-iwC4sjGGxoi6hZjE/s400/040.gif" class="magnify" data-magnifyby="2" style="width:130px; height:130px cursor: url(magnify.cur), -moz-zoom-in; " />

klik save selesai dan lihat hasilnya

Cara Backup Template Blog

Template blog yang terletak di bahagian Edit HTML adalah merupakan script Html yang memberi tampilan kepada design blog teman teman teman. Sekedar penambahan gadget atau sekedar trick blog kebiasaannya dilakukan/ diubah sseuai di template (edit Html). Maka dari itu sebelum asal mengubah template teman teman, sangat penting untuk teman teman membackup template teman teman terlebih dahulu.. mau tau kah teman teman caranya? okeys cekidot..

Pertama

Sig in akun blogger temen temen, selanjutnya temen temen bisa ikuti gambar di bawah yaah

Kemudian yaah temen temen bakal muncul paparan kaya bawah

okeys klik oke daan selesai

selamat mencoba syalalaaa

Button Show & Hide Spoiler

Pertama
Sign in akun blogger

Kedua
Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

Ketiga
Copy dan paste kode di bawah pada ruang Html / Javascript tadi

<center><div id="spoiler"><div><input value="Nama button" style="width:88px ;font-size:12px;background-image: url(URL BACKGROUND UNTUK BUTTON);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
<center><center>Ayat/url/image/kod widget anda di sini</center></center></div></div></div></center>

Note:
Nama button - nama pada button teman

Merah - kalimat apapun yang ingin temen temen terapin
Biru - Masukkan url background untuk button. Search di mana-mana image hosting atau temen temen boleh pilih background yang disediakan di bawah.

http://img401.imageshack.us/img401/822/plaid30.jpg

http://img46.imageshack.us/img46/957/plaid24.jpg

http://img31.imageshack.us/img31/8480/pinkbackground8.gif

http://img194.imageshack.us/img194/5608/pinkbackground3.gif

http://img846.imageshack.us/img846/4885/plaidbackground9.gif

Keempat
Klik save dan lihat hasilnya

Button Like Facebook Pada Entri Post ( Kedudukan atas post )

Example

Selain meletakan button diatas sidebar, temen temen juga bisa meletakannya pada setiap atat entri post, atau diabawah entri post , caranya :

Pertama

Kedua

Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Template"

jangan lupa BACKUP TEMPLATE terlebih dahulu

Ketiga

Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode

<div class='post-header'>

Keempat
Simpan DI BAWAH <div class='post-header'> yang temen temen temuin tadi,

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

nanti hasilnya bakal jadi kaya gini

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

<div class='post-header'>

Kelima
Save dan lihat hasilnya .. syalalaa

Button Like Facebook Pada Entri Post

Example

Selain meletakan button ini di sidebar, temen temen juga bisa menyisipkannya pada setiap bawah entri post temen temen. caranya kaya gini, bisa juga di setiap atas post entri

Pertama

Kedua

Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Template"

jangan lupa BACKUP TEMPLATE terlebih dahulu

Ketiga

Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kode

<data:post.body/>

Keempat
Simpan DI BAWAH <data:post.body/> yang temen temen temuin tadi,

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

nanti hasilnya bakal jadi kaya gini

<data:post.body/>

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

Kelima
Save dan lihat hasilnya.. syalala

Button Like Facebook Pada Sidebar Blog

Preview

Button like ini boleh diletakkan untuk temen temen mengetahui berapa banyak like yang temen temen dapat untuk blog temen temen atau apa sahaja topik yang ingin ajukan pada button like tersebut . naah ikutin tutorialnya di bawah yaaaah

Pertama

Kedua

Dashboard > Design > Add A Gadget > Html / Javascript

Ketiga

coppy paste kode di bawah pada ruang HTML/Javascript temn temen tadi

<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://url-blogtemen.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>

Note : Ganti kalimat yang dihighligtkan merah di atas dengan url blog temen. simpan kalimat yang temen temen inginkan yaaah

Keempat
Save dan temen temen lihat hasilnya.. syalala

Button Dashboard dan Follow

Example

Naah tombol kaya gini itu kaya disamping atas kanan punya aku.. cuco kaan? lucu kaan? iyaaah dong, nah temen temen mau tau caranya , okeh cekidot again follow this tutorial..

Pertama

Sig in ke akun blog temen temen

Kedua

Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

Ketiga

Copy paste kode di bawah pada ruang Html / Javascript tadi

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG TEMEN TEMEN" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div>

Note : ID BLOG TEMEN TEMEN itu, masukin ID blog temen temen.. mau rau gimana cara dapetin ID blog temen temen ? kaya gini

temen temen lihat deeeh di atas paling atas pas halaman yang temen temen buka, adakan link blog temen temen, yang kaya ginisalah satu contohnya

https://www.blogger.com/blogger.g?blogID=9204210654036060857#editor/target=post;postID=8816970160667180400

atau kaya gini

https://www.blogger.com/blogger.g?blogID=9204210654036060857#pageelements/src=dashboard

dan sebagainya..
naah ada kan tulisan blogID=bla..blaa..blaa... naah itu bloh ID temen temen

Keempat

naah setelah temen temen masukin blog ID temen temen ke tempat tadi selesai dehh

Kelima

klik save dan temen temen lihat hasilnya yaaah