Tampilkan postingan dengan label tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial. Tampilkan semua postingan

Rabu, 07 Desember 2011

Membuat Menu Melayang

Halluw semua... piye punya kabar... Pada baik semua kan???

Langsung aja yach ke pembahasan, hmmm kali ini Kun akan kasih tuto tentang cara membuat menu yang melayang di samping (halaman)



Ini menu kalo kursor kita pindah ke bawah pun, menu bakalan tetep mejeng disitu alias gak pindah2.
Bisa langsung praktek dach, ben pada tau, itu ntar menu wujudnya kek gimana, Oke...

Cekidot ....

Kamis, 01 Desember 2011

Membuat Auto Readmore

gbr. gak ada kaitannya



Selamat sore sobat... gimana punya kabar???
kali ini aku kan membahas tentan Readmore egend, yang kemarinkan aku sudah ajari cara memindah readmore ke kanan, nah kalo sekarang aku kan ajari buat auto readmmore.

Auto readmore disini maksudnya?
Kan kita biasanya kadang memposting dengan isi yang buanyak, nah daripada pusing pengen potongnya dimana, ya mending pake ini aja.
Kalo pengen liat hasilnya, ntar kek gini

Gimana??? jadi rapi kan blog kita...

Okey, langsung aja yach kalo gitu, cekidot n langsung praktek yuks...

Kamis, 03 November 2011

Cara Mengganti Tulisan Home, Newer Dan Older Post Menjadi Icon

✿ Newer Post
Newer post ini kalo pake icon panah, itu menunjuk ke arah kiri  , disini aku pake icon hasil karya ku sendiri *photoshop*
Cara menggantinnya :
1. Dashboard / Design >> Rancangan >> Edit HTML >> centang Expand Template Widget
2. Tekan ctrl+f dan cari kode <data:newerPageTitle/>
3. Ganti kode yang kita cari tadi dengan kode di bawah ini :
<img src='url icon / gambar kalian' />
Ganti tulisan yang berwarna oranye, sesuai keinginan. Or paling mudah Copas aja yang dibawah ini. ^^


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4zEfhkB5F0uIMePan2EOIxOvULwhfebI8XVHpGxr8q50ZoNOBI-LvxNyC3O12VQRy7-CriWqbbjuW91BCuZfKk1Pr2U6wxS78hCt-6dz4og26kHcnqO3567TTfk7_H-TzuiLcO9Pi66s/s1600/back.gif


✿ Home

Home, biasanya icon ini disymbolkan dengan gambar rumah  
Cara menggantinya :
1. Dashboard / Design >> Rancangan >> Edit HTML >> centang Expand Template Widget
2. Tekan ctrl+f dan cari kode <data:homemsg/>
3. Ganti kode yang kita cari tadi dengan kode di bawah ini :
 <img src='url icon / gambar kalian' />


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ujQYtFGpeVI5KajWmb8eZ1_u_twXvAktlJ38ggaa0MuKiLDCwAz4KE2OCj2N7A9-0um4EWFNiKRSVLO2S3yZjiOlWlpbI9-h97jEOegoBHvpYIckJtF-wIBdN3bgbBj1vthGDi2anQw/s1600/home.gif

Sabtu, 29 Oktober 2011

Memindah tulisan read more dari kiri ke kanan



Kali ini aku akan berbagi cara tentang readmore, bagi yang tidak suka posisi readmore berada di seblah kiri, nach ini aku ada cara untuk memindah readmore agar posisi berada di tepi kanan.

Ikuti langkah2 berikut ini:

1. Cari kode 
<div class='jump-link'>
2. Setelah ketemu, pastekan kode dibawah ini tepat dibawah kode yang sudah kita cari tadi; 
<div style='float:right;padding:10px 0px 5px 0px'>
3. Dan jangan lupa sebelum di save tambahkan ini kode </div> sebelum kode </b:if>

nanti hasilnya jadi kek gini urutannya :
<b:if cond='data:post.hasJumpLink'><div class='Jump-Link'><div style='float:right;padding:10px 0px 5px 0px'><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></div></div></b:if>


Gimana??? gampangkan???
Kalo berhasil tinggalin Comment yach... Good Luck PLend...

Cara membagi isi posting menjadi 2 kolom (Bag. 2)


 


Sebelumnya aku kan sudah kasih tutorial cara membagi isi posting jadi dua kolom ya... ini sekarang aku dapat lagi tuto yang lebih mudah penggunaannya. Contoh e ya kek Postingan ku sekarang ini. *tuh balance kan antara yang kanan n kiri...

Yang dulukan kita perlu isi bagian 1 n bagian yang 1e, yang ini kita tinggal ketik biasa, nanti secara otomatis bila ketikan kita udah puanjang??? Bakalan kepotong sendiri.

Nach enakkan ini, gak ribet???

Langsung aja yach...

1. Klik posting
2. Klik Edit HTML
3. Letakkan kode ini :
<style type="text/css">#twocolom{-moz-column-count:2;-moz-column-gap: 2em;-webkit-column-count: 2;-webkit-column-gap: 2em;}</style><div id="twocolom"> LETAKKAN POSTINGAN DISINI</div>
4. Terus.... ya tinggal ketikkan aja isi postingan kalian di yang berwarna oranye itu.
 Liat hasilnya... Gimana? Jadi rapi kan ketikan kita.

God Luck Plend...

Cara membagi isi posting menjadi 2 kolom



dari pada pening mikirin ini itu... mending buat es teh ae... seger  kayak e,,, ma posting cara buat es teh , upst salah,,, hehehehe. just kidding, maksud ane cara buat ini posting yang bisa jadi 2 kolom :


Nich carae :

1. copy kode dibawah ini di posting temen2 :

<table Cellpadding="10" Cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" Width="300"> Artikel di bagian kiri</td><td align="justify" valign="top" Width="300"> Artikel di bagian kanan</td> </tr>
</tbody></table>



2. keterangan :

* cellpadding="10" : adalah jarak antara tepi kolom dengan tulisan;
* cellspacing="10" : adalah jarak antara dua kolom;
* width="300" : adalah lebar masing-masing kolom;
* align="justify" : adalah perataan teks;
** justify : rata kanan kiri
** left : rata kiri
** right : rata kanan
** center : rata tengah;
* valign="top" : adalah perataan vertikal;
** top : rata atas
** bottom : rata bawah
** middle : rata tengah;

3. Temen2 bisa merubah sesuai keinginan...
4. Selamat mencoba... Gud Luck...




Kamis, 06 Oktober 2011

About Read more / Baca Selengkapnya

Nach kali ini aku kan membahas tentang "READ MORE"

** cara memindah ReadMore ke tepi kanan

  1. Login ke Blog
  2. Design > Rancangan > Edit HTML > centang Expand Widget
  3. Cari kode <div class='jump link'>
  4. Lalu tambahkan kode dibawah ini tepat di bawah kode yang kita cari tadi,
    <div style='float:right;padding:10px 0px 5px 0px>
  5. Lalu tambahkan juga kode </div> sebelum kode </b:if>
  6. Lalu Save.
Jadi hasilnya ntar kek gini urutannya :

<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div></div>
    </b:if>

Rabu, 05 Oktober 2011

URL Burung Twitter




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyiswLHtZOkvSYoh_HCObjiFM6NVrkhGmSZHntjtrmoJ5z55-FnKge7BjBenB1Ds1ztUHkygQXKDLRUYdfr8JmsNKooPEfY68UlCgV6EIiMSeUls1cxX2k8jBWo4vNkSzRK2YRHTRd4cTG/s1600/original.png






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1mP3WswdwOwPxz6S1YgniuMWgCz46WXLkenywWITQSWwclMlads9OaUOM-8EBlOkvhiGAFv3b6RFDO1rqrDjcB_HemgMbPLD9pe0UrYdWwY7pyFUpxFRJNoBfArCxdxdlS4Mn2mlQxqtQ/s1600/green.png


Cara Pasang Burung Twitter Berterbangan di Blog

 


1. Masuk ke Blog kalian
2. Klik Design > Rancangan > Element laman
3. Lalu klik tambah Gadget
4. Pilih HTML/JavaScript
5. Lalu copy & paste kan code di bawah ini:

Energy Save Widget

Cara membuat energy save widget mudah banget kok, ikuti saja langkah2 berikut ini :

1. Klik Design >  Edit html
2. Centang template widget (oea untuk berjaga2 takutnya ada yang error nanti setelah di save, lebih baik sebelum di edit kalian "backup template" aja dulu. Ok)
3. Lalu cari kode </head> , agar lebih mudah mencarinya gunakan fungsi Find (ctrl + f).
Gimana sudah ketemukan??? Kalo sudah lanjut ke langkah berikutnya
4. Copy kode di bawah ini dan pastekan sebelum kode &lt;/head&gt; tadi,

<script language='javascript' src='https://sites.google.com/site/unwanted86/javascript/savetheenvironment.js' type='text/javascript'/>

5. Kalo sudah, jangan lupa di save ya...

Mudahkan pasang Energy Save Widgetnya...  Good Luck teman... ^_^

Sabtu, 19 Februari 2011

Cara Membuat Menu Tab View yang Cakep (2)

Halluw sobat sua lagi ma Kunit hehehe , kali ini aku mau bagi-bagi ilmu lagi yaitu Cara membuat menu
Tab View yang cakep kayak punyaku itu tuch ,,, ^^

Langsung aja yak,,, ikuti langkah-langkahnya , yang teliti and telaten biar berhasil, Oke ^_~

Cara Membuat Daftar isi Berdasarkan Label

met pagi Sobat , kali ini saya akan membahas tentang cara membuat Daftar Isi Berdasarkan Label. Langsung aja ya...

Ada 2 script yang bisa sobat pergunakan , yang pertama tanpa scroll dan yang kedua menggunakan fasilitas scroll (biar ga kepanjangan gitu)

1. Tanpa ScroLL


2. Dengan Scroll


NB : Ganti kode URL dengan alamat URL Sobat.

3. Klik Save. Selesai dech ^^

Semoga berhasil...

Kamis, 17 Februari 2011

Cara Merubah Mouse/Kursor jadi Animasi

Nah ,,, untuk Sobat yang pingin buat kursor jadi animasi yang lucu2 kayak punya saya tuch , gini caranya :

  1. Login ke Blogger
  2. Pilih Rancangan
  3. Tambah Gadget
  4. Pilih HTML/JavaScript
  5. Lalu isi Kode ϑī bawah ini 
<style type="text/css">
body {
cursor.url("Link gbr kursor")
,default}
</style> 
  • Lalu Ganti tulisan wrna ijo itu dengan link gambar yang kamu ingin kan.
Biƨǎ copas ϑī bawah ini Jчğą : 
  
 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMYIaRPJUs6GKTPAMD5iHaClW9oSqST6dIiLPLcN2ujfNvYOvKjxE9k3OtVYsjHierlu6IzI_QAFFPbHCVotuoSi0ON4XDCHt8yXyXzMHSleTW9jRwf8nuL6k9cfQaQCPxLbFGTCD2RQ/s200/wulu.gif




http://i1184.photobucket.com/albums/z328/RanaMontana/cursorpitabiru.gif


Nach langkah terakhir jangan lupa untuk ϑī save...

Good Luck Plend....

Minggu, 06 Februari 2011

Cara Pasang Upin & Ipin

AssaLamu'alaikum Sobat Blogger...

Kali ini aku akan berbagi cara pasang Widget Upin dan Ipin kayak punya ku itu , Upin & Ipin ini akan mengucapkan "Assalamu'alaikum" secara Otomatis apabila arah panah mouse di dekatkan ke gambarnya...
Langsung aJjah ya..!!!

Caranya :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Edit/HTML
4. Cari kode seperti ini : < /body>
5. Kalau sudah ketemu, letakkan script di bawah ini tepat di atas < /body>

  
> Posisi melayang Upin & Ipin ada di sebelah "Kanan Atas"

<script language="JavaScript" src="http://adiwidget.com/js/adiWidget.js" type="text/javascript"></script><script language="JavaScript" type="text/javascript">eXl1lXc('http://adiwidget.com/flash/atuk.swf','top','0px','right','0px','100001','95','170','transparent','ffffff');</script>
> Posisi melayang Upin & Ipin ada di sebelah "Kanan Bawah"
<script language="JavaScript" src="http://adiwidget.com/js/adiWidget.js" type="text/javascript"></script><script language="JavaScript" type="text/javascript">eXl1lXc('http://adiwidget.com/flash/atuk.swf','bottom','0px','right','0px','100001','95','170','transparent','ffffff');</script>
> Posisi melayang Upin & Ipin ada di sebelah "Kiri Bawah" 
<script language="JavaScript" src="http://adiwidget.com/js/adiWidget.js" type="text/javascript"></script><script language="JavaScript" type="text/javascript">eXl1lXc('http://adiwidget.com/flash/atuk.swf','bottom','0px','left','0px','100001','95','170','transparent','ffffff');</script>
> Posisi melayang Upin & Ipin ada di sebelah "Kiri Atas" 

<script language="JavaScript" src="http://h1.ripway.com/ichal13/ichalWidget.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">eXl1lXc('http://adiwidget.com/flash/atuk.swf','top','0px','left','0px','100001','95','170','transparent','ffffff');</script> 

6. Save
7. Jadi dach ... :D





Semoga berhasil Sobat....




Sumber : adiwidget™

Kamis, 03 Februari 2011

Cara Mengganti Favicon Blogger

Favicon adalah icon/gambar yang terletak pada address bar dari suatu web browser.

Setiap situs atau blog biasanya memiliki favicon. Pada blogspot, favicon yang dibuat berupa logo blogger berwarna orange. Favicon ini tidak bisa diganti begitu saja melalui setting/pengaturannya. Lalu bagaimana jika anda ingin mengganti/ merubah favicon ini?
Sebenarnya cara mengganti favicon blogger ini cukup mudah. Anda bisa menggantinya melalui pengeditan layout.