Diah Andani Blog: 2014

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

Buang border image

Before:

After:

Buat temen temen kan yang pake template template tertentu, seperti simple template atau tempate sederhana, tiap temen temen nyisispin gambar pasti ada putih putihnya kan di samping gambarnya, apalagi warna latar temen temen hitam gituh contohnya, terus di tumpang warna putih kan jadi kurang cuco, naaah temen temen mau tau kan cara nya supaya hal yang seperti itu hilang, come on cekidot ikuti tutorial di bawah. Pertama Log in blogger temen temen Kedua Dasbor > design > edit HTML > centang "expand widget templates" Ketiga dengan serentak pada keyboard tekan Ctrl + F

.post-body img, .post-body .tr-caption-container,

Keempat
Setelah menjumpai kode .post-body img, .post-body .tr-caption-container, temen temen pasti juga nemuin kode kaya di bawah ini

.BlogList .item-thumbnail img {

padding: $(image.border.small.size);

background: $(image.background.color);

border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

Note : Pada nilai yang ditandakan biru, temen temen ganti semua kepada 0
jadi nanti hasilnya bakal kaya gini
Contoh:

.BlogList .item-thumbnail img {

padding: $(image.border.small.size);

background: $(image.background.color);

border: 0px solid $(image.border.color);

-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);

-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);

box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);

Kelima
Setelah selesai diganti simpan dan lihat hasilnya.. syayaalaa

Selasa, 10 Juni 2014

Blockquote

Apakah "Blockquote"? "Blockquote" digunakan untuk menunjukkan petikan teks/perenggan daripada sumber yang lain atau dari entri post-post anda yang lama."Blockquote" juga digunakan untuk menunjukkan satu petikan atau kata-kata yang hendak di'tekan'kan kepada pengunjung sesebuah blog. Contoh:

Cara bikin blockquote ? mau tau? cekidooott

Pertama

Buka new post atau entri baru

Kedua

Buat entri post seperti biasa, kemudian bila ada petikan atau perenggan yang akan dihighlightkan sebagai blockquote, klik ikon quote, seperti gambar di bawa

Ketiga

Klik dan save.. lihat hasilnya

selamat mencoba.. syalalala

Border dan bayang-bayang pada sidebar title

Example

Mau tau tutorialnya ? cekidoooooott

Pertama

Kedua

Dashboard > Design > Edit HTML

Ketiga

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

h2 {

Keempat
Kemudian copy dan paste kod di bawah SELEPAS / DI BAWAH kod h2 { tadi
* kode ini adalah untuk border bentuk segiempat. Kalau temen temen mau bentuk border yang lain, pilih disini

background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

note: FFECF5 - kode warna untuk warna background title sidebar temen temen
000000 - kode warna untuk warna border title
C0C0C0 - kode warna untuk warna bayang-bayang border

UNTUK KODE WARNA KALIAN BISA LIHAT DISINI

Kelima
klik, save dan lihat hasilnya, selmat mencoba syalalalaa

Border Dan Bayang-Bayang Pada Tajuk Post

Example

Temen temen mau tau kan tutorialnya ? okey.. cekidot

Pertama

Loggin blogger temen temen

Kedua

Dashboard > Design > Edit HTML

Ketiga

Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod untuk title post seperti berikut

untuk pengguna template watermark, Picture Window dan Travel, cari kode

h3.post-title {

untuk pengguna template Ethereal dan Awesome Inc, cari kode di bawah ini

h3.post-title, h4 {

Keempat
Kemudian copy paste kod di bawah SELEPAS kode yang temen temen cari tadi

* kod ini adalah untuk border bentuk segiempat. Kalau temen temen mau bentuk border yang lain, pilih disini

background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

contoh kode temen temen

h3.post-title, .comments h4 {
background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

note: FFECF5 - kod warna untuk warna background title post temen temen
        000000 - kod warna untuk warna border title
        C0C0C0 - kod warna untuk warna bayang-bayang border

UNTUK KODE WARNA KALIAN BISA LIHAT DISINI

Kelima
klik, save dan lihat hasilnya, selmat mencoba syalalalaa

Bentuk - Bentuk Border

Border ini bisa temen temen pake buat title post/tajuk post dan bisa juga di title sidebar, dan bisa lainnya juga. Di bawah disediakan bentuk border beserta dengan kodenya. temen temen bisa coppy kode border di bawah untuk something yang temen temen butuhkan.

-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

-moz-border-radius: 35px;
border-radius: 35px;

Backround Cute Untuk Blog

Kalian bisa dapetin backround backround lucu di sini mycutegrafik.com. banyak pilihat grafik disitu, teman teman bisa pilih disitu yaaah pilih sendiri, lalu temen temen coppy paste kode yang temen temen mau (backround).

Contohnya kaya gini :

lalu temen temen mau pasang juga di blog temen temen ? gampang.. cekidot ikuti tutorialnya syalalaa

Pertama

Biasalaah temen temen log in ke blogg temen temen

Kedua

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

Ketiga
Pate kode backround yang temen pilih dari mycutegrafik.com tadi pada ruang html/javasript

Keempat
Simpan dan lihat hasilnya

Note : buat temen temen yang mengalami masalah backround bertindih (di atas warna lain, dan di bawah ada warna backround) setelah di masukan mycutegrafik.com.
Silahkan cek disini

Simple Template - Buang background bertindan

Bagi pengguna template simple, kebiasaannya bila teman masukkan kode bakground dalam blog, pada bahagian atas blog akan ada satu background berwarna yang bertindan dengan background yang teman masukkan tu. Contoh macam dalam gambar diatas.

Sebenarnya background bertindan tu boleh dibuang. cekidot ikuti tutorial di bawah :

Pertama

Biasa sig in blog teman

Kedua

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

Ketiga

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

position: absolute;

Keempat
di dekat kode position: absolute; yang temen temen temui, tremen temen akan nemuin kode seperti di bawah ini

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 100px;
width: 100%;
background: $(body.background);
$(body.background.override)
}

Kelima
naah nilai 100 itu temen temen ganti dengan 0

contohnya kaya gini

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 100px;
width: 0%;
background: $(body.background);
$(body.background.override)
}

Setelah selesai, temen temen klik preview, jika tidak error temen temen bisa simpen
selamat mencoba .. syalalala

Back To Top Button

Blogger biasanya menggunakan button "back to top" untuk memudahkan pelawat jumppengunjung melompat pada blog yang biasanya mempunyai entry yang panjang ditambah pula dengan komen yang banyak.

Berikut adalah tutorial untuk meletakkan button "Back To Top" dalam blog.

Pertama

Kedua

Dashboard > Design > Add A Gadget > Html / Javascript

Ketiga

Copy paste kod di bawah pada ruang Html / Javascript tadi

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar button"></a>

Note: pada url gambar button dalam kode di atas, gantikan dengan url button pilihan teman. Di bawah ada disediakan pelbagai jenis button "back to top" untuk teman pilih. Just copy url dan letakkan pada url gambar button.
Contoh:

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="http://img205.imageshack.us/img205/7824/74211510.gif"></a>

Url button selain disini, kalian bisa cari di google atau di glitter