Diah Andani Blog

Rabu, 11 Juni 2014

Cara Backup Template Blog

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

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