Bagi anda yang sudah terbiasa chatting di blog yang ramai dan banyak pengunjungnya, kadang mereka mengungkapkan perasaan atau emotion dengan gambar-gambar tertentu. Yang pasti bukan untuk saling ejek atau yang lain, biasanya yang punya blog menyediakan fasilitas tersebut hanya sekedar memberikan imajinasi bagaimana mengungkapkan perasaan atau emotion kita secara singkat dan jelas.
Untuk menggunakan kode emotion yang baru ini, terlebih dahulu anda harus mempunyai account di www.shoutmix.com. Apabila anda masih kurang jelas mengenai proses pendaftaran di shoutmix, anda bisa buka blognya Kang Rohman Disini, yang membahas proses pendaftarannya. Setelah anda terdaftar sebagai member disana, barulah anda bisa memasukan kode-kode yang saya berikan berikut ini.
Berikut langkah-langkahnya :
1. Login ke dalam account shoutmix anda
2. Pilih menu Display dan submenu Smiley
3. Pilih custom smiley
4. Masukkan kode-kode dibawah sesuai kotak yang ada, misalnya kotak code image URL, anda masukan alamat URL nya. Untuk kotak code, masukkan kode emotion yang ada dibawah.
5. Pilih menu Add, untuk memunculkan kotak-kotak baru
6. Setelah selesai pilih Save Setting.
Yang ini alamat URL dan kode yang harus anda masukan :
1. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif
Kode : +()+
2. http://www.zexo.co.cc/emo/StandartPW/011.gif
Kode : |0|
3. http://www.zexo.co.cc/emo/bigemo/003.gif
Kode : ^||
4. http://www.zexo.co.cc/emo/bigemo/004.gif
Kode : ":":
5. http://www.zexo.co.cc/emo/bigemo/007.gif
Kode : <><>
6. http://www.zexo.co.cc/emo/StandartPW/042.gif
Kode : :)
7. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyk7N0dLyd6uZvRPV49GvcddYUXDqSD6d-fDyAVYRvw_7_twI0Xt_mhCXVr3ZNTSdJ2sFYU9wcxgd-iBO870Np56wSSII6LOkOTB7YMh0LbS7pmJIZlD9pmjjm1n_U1Yip0ggtp1Un1oIG/?imgmax=800
Kode : :((
8. http://www.zexo.co.cc/emo/bigemo/010.gif
Kode : :D
9. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2BE2t-09fWnMxRdNgrV478BcU9D24pmSyOJ6GW0pDRem2VSPh83DI4Hnf_1uzPOkqC_nznIZ9Jkk0E4mhUAsvXl-UHWnLNsM0LgR2lLhdktSPhltU-1s555Ew3jDkJEUA__kUV_dA-jy/?imgmax=800
Kode : =;
10. http://www.zexo.co.cc/emo/bigemo/013.gif
Kode : ::)
11. http://www.zexo.co.cc/emo/bigemo/014.gif
Kode : =((
12. http://www.zexo.co.cc/emo/bigemo/015.gif
kode : ;;)
13. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxmWezz3D4-vVe8nqA2T_-Il94Ghod2hMEE-MOfltJhosyXQRNJ0Y60Ad8yDfuj0JRRUte2pUSO2CYmOssBSmWq-6bPDUVbiKGqrcyb2jzsxS3IWABvJeVZRlmbLhgd8HpqzmP_SyGXvwc/?imgmax=800
kode : =;
14. http://www.zexo.co.cc/emo/bigemo/018.gif
kode : ?"?"
15. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5X1vdLt_H_PkaGZ1vMTYcxBM0UdIpmFnmGrYSHKp8FskjhqkiWVEVMMxDuAkk9S3k65cEks8Ox3FONTq0mDBxM5VJr7eLtYPIhOTLcKxh4UD-anp5TuN8r2GgMVDPP8r4PKlzHMLMACca/?imgmax=800
kode : ":{"
16. http://www.zexo.co.cc/emo/bigemo/022.gif
Kode : }"{:
17. http://www.zexo.co.cc/emo/bigemo/023.gif
kode : ":"{
18. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC6VXlhUhzRelESJbdcDbBrX_6eqprtZX14-TPoDLgnDR1tdSnXSizTtHoLIbELhoeoZF8ZdmOh1G4nX3ze-eeiskLHZKfHhVYfsbtt9hm13ViSynz3xy0Ubavu_2Co4Waj7B2AkUUUaWj/?imgmax=800
Kode : :"?>
19. http://www.zexo.co.cc/emo/bigemo/025.gif
kode : +|+}
20. http://www.zexo.co.cc/emo/bigemo/026.gif
Kode : _=+-
Selamat Belajar dan Berkreasi
|
|
3 Mei 2009
TUTORIAL 12 ( Menambah Jumlah Kolom Template)
Tutorial berikut ini merupakan sambungan dari Tutorial 11 (mengubah lebar template), karena sesuai janji saya untuk tidak membuat anda penasaran, jadi saya usahakan secepatnya untuk membuat postingan ini. Mudah-mudahan bisa bermanfaat bagi kita semua.
Langkah awal, anda harus mempersiapkan dan memperhitungkan jumlah lebar keseluruhan dari template yang anda gunakan, karena kita akan mengubah jumlah kolom yang ada yaitu 1 kolom posting dan 1 kolom sidebar menjadi 1 kolom posting dan 2 kolom sidebar. Tambahan 1 kolom sidebar ini dimaksudkan untuk mengisi ruang kosong seperti yang dijelaskan pada postingan Tutorial 11 (mengubah lebar template).
Satu hal yang perlu saya beritahukan juga, bahwa untuk keseragaman, contoh template yang kita gunakan dan kita edit merupakan template minima, template yang disediakan oleh blogger.com ini merupakan template yang paling mudah untuk kita jadikan bahan percobaan baik dalam mengubah lebar kolom maupun menambah jumlah sidebar.
Apabila kita perhatikan, template minima memiliki lebar kolom asli 660px, baik pada header wrapper, outer wrapper, maupun pada footer. Lebar 660px apabila kita bagi tiga kolom (220px), tentunya akan terlalu sempit dan malah membuat template tampak tidak menarik, karena lebar kolom posting sama dengan lebar kolom sidebar.
Pada postingan terdahulu, kita telah mengubah lebar kolom header wrapper, outer wrapper, maupun pada footer dari 660px menjadi 1100px, dengan main wrapper 640px. Main wrapper merupakan lebar kolom posting, sedangkan lebar kolom sidebar disebut sidebar wrapper telah kita buat menjadi 220px. Artinya 640px + 220px = 860px, masih ada tersisa 1100px – 860px = 240px. Dari sisa tersebut kita gunakan untuk padding (jarak antar kolom) sebesar 10px, dimana terdapat 2 padding (jarak antar kolom), artinya jumlah total padding adalah 20px, sehingga tersisa 220px. Sisa 220px inilah yang akan kita gunakan untuk membuat atau menambah kolom sidebar yang baru.
Setelah anda mengerti dengan penjelasan tersebut, maka kita akan mulai melakukan langkah-langkah sebagai berikut :
1. Login untuk masuk ke dalam blog anda, pilih menu Tata Letak, selanjutnya pilih menu Edit HTML.
2. Untuk memudahkan pencarian kode HTML, gunakan tombol Ctrl F atau Shift F3 guna memunculkan status bar Find yang biasanya muncul dibagian bawah. Jadi, bila nanti anda bingung mencari kode-kode HTML yang ingin diganti, anda tinggal mengetikkan kode tersebut pada kolom Find, selanjutnya tekan Enter, maka kode yang anda cari akan di Highlight atau di blok sehingga memudahkan mata anda melihatnya.
3. Cari Kode berikut :
]]></b:skin> :
4. Tambahkan kode berikut ini diatas kode ]]></b:skin>:
/* bottom
---------------------------- */
#bottom {
width: 1100px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}
#left-bottom { /* yang ini nih kode kolom kiri */
width: 640px;
float: left;
padding-left:10px;
}
#center-bottom { /* kalo yg ini kode kolom tengah */
width: 220px;
float: left;
padding-left:10px;
}
#right-bottom { /* kalo yg ini kode kolom kanan */
width: 220px;
float: left;
padding: 0 5px 0 10px;
}
5. Selanjutnya anda cari kode berikut ini :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
6. Tambahkan kode berikut ini di atas kode yang tadi :
<div id='bottom'>
<b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
7. Simpan Template anda.
8. Selesai .
Setelah anda selesai dengan edit HTML tadi, anda bisa melihat perubahannya dengan memilih menu Elemen Halaman, tampak ada tiga kolom pada template anda. Tambahkan gadget apa saja yang anda sukai pada kolom sidebar yang baru. Selanjutnya pilih lihat blog.
Jika terjadi kesalahan, ulangi langkah-langkahnya dari awal, karena saya berharap kesalahan bukan pada tutorial yang saya berikan. Semoga bermanfaat.
Selamat Belajar,
Langkah awal, anda harus mempersiapkan dan memperhitungkan jumlah lebar keseluruhan dari template yang anda gunakan, karena kita akan mengubah jumlah kolom yang ada yaitu 1 kolom posting dan 1 kolom sidebar menjadi 1 kolom posting dan 2 kolom sidebar. Tambahan 1 kolom sidebar ini dimaksudkan untuk mengisi ruang kosong seperti yang dijelaskan pada postingan Tutorial 11 (mengubah lebar template).
Satu hal yang perlu saya beritahukan juga, bahwa untuk keseragaman, contoh template yang kita gunakan dan kita edit merupakan template minima, template yang disediakan oleh blogger.com ini merupakan template yang paling mudah untuk kita jadikan bahan percobaan baik dalam mengubah lebar kolom maupun menambah jumlah sidebar.
Apabila kita perhatikan, template minima memiliki lebar kolom asli 660px, baik pada header wrapper, outer wrapper, maupun pada footer. Lebar 660px apabila kita bagi tiga kolom (220px), tentunya akan terlalu sempit dan malah membuat template tampak tidak menarik, karena lebar kolom posting sama dengan lebar kolom sidebar.
Pada postingan terdahulu, kita telah mengubah lebar kolom header wrapper, outer wrapper, maupun pada footer dari 660px menjadi 1100px, dengan main wrapper 640px. Main wrapper merupakan lebar kolom posting, sedangkan lebar kolom sidebar disebut sidebar wrapper telah kita buat menjadi 220px. Artinya 640px + 220px = 860px, masih ada tersisa 1100px – 860px = 240px. Dari sisa tersebut kita gunakan untuk padding (jarak antar kolom) sebesar 10px, dimana terdapat 2 padding (jarak antar kolom), artinya jumlah total padding adalah 20px, sehingga tersisa 220px. Sisa 220px inilah yang akan kita gunakan untuk membuat atau menambah kolom sidebar yang baru.
Setelah anda mengerti dengan penjelasan tersebut, maka kita akan mulai melakukan langkah-langkah sebagai berikut :
1. Login untuk masuk ke dalam blog anda, pilih menu Tata Letak, selanjutnya pilih menu Edit HTML.
2. Untuk memudahkan pencarian kode HTML, gunakan tombol Ctrl F atau Shift F3 guna memunculkan status bar Find yang biasanya muncul dibagian bawah. Jadi, bila nanti anda bingung mencari kode-kode HTML yang ingin diganti, anda tinggal mengetikkan kode tersebut pada kolom Find, selanjutnya tekan Enter, maka kode yang anda cari akan di Highlight atau di blok sehingga memudahkan mata anda melihatnya.
3. Cari Kode berikut :
]]></b:skin> :
4. Tambahkan kode berikut ini diatas kode ]]></b:skin>:
/* bottom
---------------------------- */
#bottom {
width: 1100px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}
#left-bottom { /* yang ini nih kode kolom kiri */
width: 640px;
float: left;
padding-left:10px;
}
#center-bottom { /* kalo yg ini kode kolom tengah */
width: 220px;
float: left;
padding-left:10px;
}
#right-bottom { /* kalo yg ini kode kolom kanan */
width: 220px;
float: left;
padding: 0 5px 0 10px;
}
5. Selanjutnya anda cari kode berikut ini :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
6. Tambahkan kode berikut ini di atas kode yang tadi :
<div id='bottom'>
<b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
7. Simpan Template anda.
8. Selesai .
Setelah anda selesai dengan edit HTML tadi, anda bisa melihat perubahannya dengan memilih menu Elemen Halaman, tampak ada tiga kolom pada template anda. Tambahkan gadget apa saja yang anda sukai pada kolom sidebar yang baru. Selanjutnya pilih lihat blog.
Jika terjadi kesalahan, ulangi langkah-langkahnya dari awal, karena saya berharap kesalahan bukan pada tutorial yang saya berikan. Semoga bermanfaat.
Selamat Belajar,
TUTORIAL 11 ( Mengubah Lebar Template)
Anda mungkin kurang puas dengan lebar template anda, karena anda ingin menambah jumlah sidebar, atau anda hanya sekedar ingin blognya menjadi lebih luas dibanding dengan template yang merupakan bawaan dari blogger.com. Kali ini saya ingin berbagi dengan anda semua, terutama blogger pemula tentang bagaimana mengubah lebar template yang ada, agar nantinya anda bisa menambah fitur-fitur yang anda inginkan.
Hal pertama yang mesti anda lakukan, seperti biasa anda harus Login terlebih dahulu ke dalam blog anda, selanjutnya masuk menu Tata Letak, kemudian menu Edit HTML. Jangan lupa berikan tanda centang (checklist) pada tulisan Expand Widget Template anda.
Untuk memudahkan pencarian kode HTML, gunakan tombol Ctrl F atau Shift F3 guna memunculkan status bar Find yang biasanya muncul dibagian bawah. Jadi, bila nanti anda bingung mencari kode-kode HTML yang ingin diganti, anda tinggal mengetikkan kode tersebut pada kolom Find, selanjutnya tekan Enter, maka kode yang anda cari akan di Highlight atau di blok sehingga memudahkan mata anda melihatnya.
Cari kode berikut ini :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ubahlah width:660px menjadi width:1100px, sebagai contoh :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:1100px;
margin:0 auto 10px;
border:1px solid $bordercolor;
Cari kode berikut ini :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Ubahlah width:660px menjadi width:1100px, sebagai contoh :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1100px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Berikutnya cari kode ini :
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Ubahlah width:410px menjadi width:640px, sebagai contoh :
#main-wrapper {
width: 640px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Yang terakhir cari kode berikut ini :
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
ubahlah width:660px menjadi width:1100px, sebagai contoh :
/* Footer
----------------------------------------------- */
#footer {
width:1100px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
Pratinjau template anda, maka anda dapat melihat perubahan lebar template dari yang ada sebelumnya. Simpan template anda.
Angka-angka tersebut tidaklah mutlak, anda bisa mengubah lebar template sesuai keinginan anda. Namun satu hal yang harus anda perhatikan, user internet tidak semuanya menggunakan layar monitor yang beresolusi tinggi. Kalau yang menggunakan notebook atau komputer dengan LCD monitor, mungkin resolusi layarnya (screen resolution) bisa lebih dari 1280x800 pixel, tapi kalau yang menggunakan layar monitor tabung resolusi layarnya mungkin paling tinggi 1024x768 pixel.
Nah, perubahan yang dilakukan pada template anda akan mempengaruhi kenyamanan user internet terhadap tampilan blog anda. Jadi anda harus mempertimbangkan perubahan yang akan anda lakukan.
Sebenarnya topik ini belum selesai dan masih menyisakan permasalahan. Permasalahan tersebut adalah masih ada jarak tersisa antara kolom posting dan kolom sidebar. Jarak tersebut sebenarnya saya maksudkan apabila anda ingin menambah jumlah kolom sidebar nantinya, anda bisa meletakkannya disitu. Namun karena postingan saya ini sepertinya sudah terlalu panjang, untuk permasalahan tersebut akan kita bahas pada postingan berikutnya, tanpa mengurangi makna dan tidak ada maksud untuk membuat anda penasaran.
Selamat Belajar,
Hal pertama yang mesti anda lakukan, seperti biasa anda harus Login terlebih dahulu ke dalam blog anda, selanjutnya masuk menu Tata Letak, kemudian menu Edit HTML. Jangan lupa berikan tanda centang (checklist) pada tulisan Expand Widget Template anda.
Untuk memudahkan pencarian kode HTML, gunakan tombol Ctrl F atau Shift F3 guna memunculkan status bar Find yang biasanya muncul dibagian bawah. Jadi, bila nanti anda bingung mencari kode-kode HTML yang ingin diganti, anda tinggal mengetikkan kode tersebut pada kolom Find, selanjutnya tekan Enter, maka kode yang anda cari akan di Highlight atau di blok sehingga memudahkan mata anda melihatnya.
Cari kode berikut ini :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ubahlah width:660px menjadi width:1100px, sebagai contoh :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:1100px;
margin:0 auto 10px;
border:1px solid $bordercolor;
Cari kode berikut ini :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Ubahlah width:660px menjadi width:1100px, sebagai contoh :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1100px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Berikutnya cari kode ini :
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Ubahlah width:410px menjadi width:640px, sebagai contoh :
#main-wrapper {
width: 640px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Yang terakhir cari kode berikut ini :
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
ubahlah width:660px menjadi width:1100px, sebagai contoh :
/* Footer
----------------------------------------------- */
#footer {
width:1100px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
Pratinjau template anda, maka anda dapat melihat perubahan lebar template dari yang ada sebelumnya. Simpan template anda.
Angka-angka tersebut tidaklah mutlak, anda bisa mengubah lebar template sesuai keinginan anda. Namun satu hal yang harus anda perhatikan, user internet tidak semuanya menggunakan layar monitor yang beresolusi tinggi. Kalau yang menggunakan notebook atau komputer dengan LCD monitor, mungkin resolusi layarnya (screen resolution) bisa lebih dari 1280x800 pixel, tapi kalau yang menggunakan layar monitor tabung resolusi layarnya mungkin paling tinggi 1024x768 pixel.
Nah, perubahan yang dilakukan pada template anda akan mempengaruhi kenyamanan user internet terhadap tampilan blog anda. Jadi anda harus mempertimbangkan perubahan yang akan anda lakukan.
Sebenarnya topik ini belum selesai dan masih menyisakan permasalahan. Permasalahan tersebut adalah masih ada jarak tersisa antara kolom posting dan kolom sidebar. Jarak tersebut sebenarnya saya maksudkan apabila anda ingin menambah jumlah kolom sidebar nantinya, anda bisa meletakkannya disitu. Namun karena postingan saya ini sepertinya sudah terlalu panjang, untuk permasalahan tersebut akan kita bahas pada postingan berikutnya, tanpa mengurangi makna dan tidak ada maksud untuk membuat anda penasaran.
Selamat Belajar,
Langganan:
Postingan (Atom)