Mengedit , Mengatur dan Menambah Label

Tutorial Blogger Bab1 bag 4

Pada tulisan sebelumnya kita sudah tahu bagaimana memasukan label dalam artikel . Sekarang bagaimana jika kita ingin mengedit menambah atau mengatur label pada beberapa artikel sekaligus.

Untuk melakukannya klik tab Posting -> Edit Posts.

/ Atau jika kita dalam halaman kontrol panel tekan tulisan Post /

Maka akan terbuka halaman Edit Post atau kita namakan saja halaman label.

Di samping kiri merupakan nama-nama label, sedangkan di samping kanan merupakan tulisan yang di beri label. ditandai dengan tulisan berwarna hijau.

Untuk menambah label. pertama kita cek atau tandai dulu kotak kecil di samping, kemudian buka ComboBox yang ada tulisan Aksi Label . dan jika ingin menambah label baru klik saja tulisan Label Baru.

Sedangkan untuk menganti, menghilangkan atau mengedit label caranya sama, tandai dulu judul tulisan yang akan kita edit kemudian dalam ComboBox klik nama label yang akan kita hapus di bawah tulisan Hapus Label.

Kegunaan Label.

Label sendiri berfungsi untuk mengelompokan tulisan kita ke dalam tema atau bidang tertentu.

label akan terlihat biasanya di bawah artikel. atau bisa juga kita melihatnya di samping kolom sisi halaman blog atau yang di kenal dengan Sidebar elemen label.

Bagaimana cara memasangnya ke dalam halaman blog, bisa kita baca dalam tulisan Mengenal Halaman elemen.

Artikel selanjutnya : Mengenal dan Menambah Halaman Elemen

Technorati tags: Blogger Tutorial, New Blogger

Mengatur Font dan Warna

Tutorial Blogger  Bab 1 bag 7

Selain menambah beberapa asesories elemen halaman ke dalam blog. Kemudahan yang lain dalam new blogger adalah mengatur atau menganti warna halaman blog, judul  blog , warna text , jenis text dan ukurannya.

Untuk itu dalam halaman Template  buka tab Font dan Warna.

  

Kemudian akan terbuka jendela font dan warna. enaknya , setiap kita merubah warna maka akan terlihat langsung perubahannya.

pilih salah satu elemen yang akan kita ganti warnanya .

Kemudian di samping kanan klik dan pilih warna yang kita suka. baik itu langsung memilih warnanya atau bisa juga mengeditnya dengan secara kode hexa warna.

Kembali ke default template : klik tulisan ini, jika ingin kembali pada pengaturan templates aslinya.

Kocok warna blog : jika susah untuk mencari padanan warna yang pas antar elemen, klik saja tulisan ini untuk dicarikan dan di pilih warnanya otomatis  secara acak.

Memilih font text dan Mengatur ukurannya.

geser jendelanya ke bawah, pilih salah satu font  yang akan kita ganti atau rubah. misalkan font text atau Font Judul Blog.

Di samping kanan di bawah tulisan pilih sebuah font untuk Font Teks.Pilihlah jenis font yang kita inginkan dengan cara menandai atau mengisi bulatan kecil.
pilih Tebal dan Miring untuk mempertebal font atau miring .
klik tulisan lebih kecil,  untuk mengecilkan ukuran font atau sebaliknya klik lebih besar.

Simpan Perubahan : Jika ingin merubahnya.

Bersihkan Edit :  Jika tidak ingin merubahnya.

 

Artikel selanjutnya : Menyimpan gambar di photobucket.

 

Technorati tags: Blogger Tutorial, New Blogger

Memajang Gambar dari Image Hosting ke blog

Tutorial Blogger Bab 1 bag 10

Tutorial ini lanjutan dari artikel yang berjudul Menyimpan Gambar Ke photobucket atau googlepages.

Setelah kita menyimpan gambarnya ke photobucket atau googlepages, sekarang kita akan membahas cara memajang gambar ke halaman blog .

terutama menyisipkan gambar untuk sebuah artikel atau menambahkan gambar ke halaman sidebar.
Sedangkan untuk menyisipkan untuk Judul Blog ( Header ) atau Latar Blog ( Body Background ) kita akan bahas pada blogger bab selanjutnya.

Menyisipkan Gambar ke dalam Artikel.

untuk menyisipkan gambar ke dalam sebuah artikel, cara yang mudah dalam Editor blogger ( tentang editor blogger penjelasannya di sini ).

klik tombol Tambahkan Gambar.

setelah terbuka jendela Upload gambar, pada kotak input di samping tulisan Url : masukan - alamat url gambar yang di berikan oleh photobucket .

Kemudian Klik Upload Gambar

Namun Jika kita menulis artikel dengan memilih cara Edit Html di Editor blogger , maka untuk menyisipkan gambarnya kita perlu mengunakan sebuah code html. kodenya seperti ini :

< IMG SRC=" Alamat url gambar yang kita dapat dari photobucket ">

alamat url-nya di apit oleh tanda kutip " ".

misalkan alamat gambar saya yang di berikan oleh photobucket seperti ini.

<IMG SRC=" http://1120.photobucket.com/album/1090/jaloewig/my_diary.jpg">

Jika ingin menambahkan ukuran gambar, atau mengedit ukuran gambar pada tampilan browser .
kode htmlnya seperti ini. :

< IMG SRC = " alamat Url gambar " WIDTH= "60" HEIGHT="45">

WIDTH : ukuran lebar

Height : ukuran tinggi

JIka ingin menambahkan border di sekeliling gambar kodenya seperti ini :

Border="Nilai"

< IMG SRC = " Alamat Url Gambar " BORDER="3">

Jika kita ingin membuat link gambar, yakni menjadikan gambar ketika di klik membuka halaman blog atau alamat url lain. kodenya seperti ini.

< a href= " halaman blog atau alamat url lain yang di tuju "> < IMG SRC = " alamat url gambar"> </a>

misalkan alamat yang dituju ketika seseorang menekan gambarnya adalah blog ini, http://catalog-tutorial.blogspot.com/

jadi :
< a href= "http://catalog-tutorial.blogspot.com/">< Img Src =" alamat url gambar"></a>

Artikel selanjutnya : Sekilas Anatomi Template New Blogger.

Technorati tags: Blogger Tutorial, New Blogger

Sekilas Penjelasan Anatomi Template New Blogger

Tutorial Blogger Bab 1 bag 11

Di bandinghkan dengan Blogger Clasic ( old Blogger ). New blogger yang kita pelajari ini, lebih mudah dan gampang. Tampa perlu mempelajari kode-kode html sekalipun.

Namun ngga ada salahnya kita sedikit mempelajari anatomi kode-kode atau serangkain script yang ada di new blogger ini. terutama gunannya untuk mengkostumisasi biar New Blogger yang kita pake keliatan lebih dinamis dan sedikit cangih.

Untuk itu, buka Template klik -> tab Edit Html .

setelah terbuka di bawah tulisan Edit Template. keliatan serangkain kode-kode Html.

Secara garis besar yang perlu kita ketahui hanya dua bagian script yang perlu kita ketahui. pertama kode atau script Css dan kedua kode atau script Html.

Cara mengenali atau mengetahui ke dua bagian di atas cukup mudah.

Pertama : Kode atau Script Css. di awali dengan selector body dan di akhiri dengan script ]]></b:skin> ( atau kita anggap saja itu sebagai tag penutup css ).

Yang setiap bagiannya di beri kata keterangan atau komentar seperti kode ini.

/* Header
-----------------------------------------------
*/

artinya ini bagian kode css untuk header ( judul blog ).

Kode Css Bermula:

body {
margin:0px;
padding:0px;
background:$bgcolor;
color:$textcolor;
font-size: small;
}
#outer-wrapper {
font:$bodyfont;
}
a {
color:$linkcolor;
}

... Sampai dengan ...

/** Tweaks for layout editor preview */
body#layout #outer-wrapper {
margin-top: 0;
}
body#layout #main,
body#layout #sidebar {
margin-top: 10px;
padding-top: 0;
}

Biasanya untuk meletakan javascript tambahan dari para blogger hack di simpan diantara kode di bawa ini.

]]></b:skin>

Javascript atau kode hack
</head>

Kedua : code html. yang di awali dengan tag <body> dan tag penutupnya </body></html>. baris paling akhir.

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Milek Mile (Header)' type='Header'/>
</b:section>
</div>

.... sampai dengan ....

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->
</body>
</html>

kode-kode html di atas, saya tulis secara garis besar . dan Jika kita tandai kotak kecil di samping tulisan Expand Template Widget

maka akan terlihat serangkai kode-kode html yang lebih rinci lagi.

Jika kita tertarik ingin lebih memperdalam lagi tentang penjelasan setiap bagian kode-kode template new blogger , kita bisa klik di alamat ini :

http://www.wilkinsons.com/Bananna/BetaCodeLargeType.htm

Artikel Selanjutnya : Menganti Template atau Layout Blog

Technorati tags: Blogger Tutorial, New Blogger

Menganti Template atau Layout Blog bag 1

Tutorial Blogger Bab 1 bag 12

Menganti layout atau template karena sudah bosan, kurang keren atau apapun itu alasannya, merupakan hal yang lumrah dari dunia sekitar ngeblog dan blogging.

Maka pada tutorial ini kita akan membahas bagaimana cara menganti template. baik itu template yang sudah di sediakan oleh pihak blogger, atau template yang kita donlot dari para pembuat free New Blogger template .

Menganti Template Dari Blogger

Menganti template dari pihak blogger, caranya gampang sekali.

1. buka Template -> tab Pilih Template Baru.

2. Kemudian pilih template dengan mengeser tab scroll

3. Setelah merasa ada yang cocok klik tombol Simpan Template

Menganti Template Dari Free Blogger Template

Sedangkan untuk menganti template dari para pembuat free blogger template. Sebaiknya kita harus membackup dulu template blog yang kita pakai. terutama membackup elemen ( widget ) Daftar Link dan elemen Html/Javascript seperti shoutbox dll.

cara membackupnya.

1. Buka Template -> tab Elemen Halaman

2. Buka tulisan Edit Elemen yang akan kita backup misalkan code Shoutbox.

3. Pilih semua Kode Javascriptnya. Kemudian klik kanan mouse dan Copy

4. Kemudian simpan atau copy pastekan kode tersebut di program notepad yang ada di windows komputer.

yakni :
klik Star -> All Program -> Accessories -> Notepad

5. Backup juga template yang aktif ( yg kita pakai ).

caranya pada Template -> tab Edit Html klik tulisan Donwload Template Lengkap

Installing Template Baru

Setelah beres membackup elemen widget yang kita anggap penting, selanjutnya baru kita install Template baru.

1. Donlot Free Templates untuk blogger ( jika bloem mendonlotnya ). klik kanan pada file donlot template.

klik Save Link As kemudian simpan ke dalam Hardisk.

2. Buka Template ->tab Edit Html.

3. Klik tombol Browser masukan file Template yang tadi kita donlot, kemudian klik tombol Upload.

5. Klik Simpan Template , jika kita merasa yakin untuk mengantinya.

6. Setelah sukses menganti templatenya, masukan lagi file elemen widget yang tadi kita backup.

Problem :Terkadang dalam menganti template dari free blogger, ada yang susah untuk di eksekusi atau istilahnya tidak bisa di parse. untuk pembahasan ini bisa kita baca pada tutorial selanjutnya.

Artikel selanjutnya : Menganti Template bag ke 2.

lihat juga : Kumpulan Free New Blogger Template di sini.

Technorati tags: Blogger Tutorial, New Blogger

Mengenal Margin dan Padding

Setiap kali mengedit halaman css blog kita , sering kita menjumpai tulisan margin dan padding. apa sih arti margin dan padding, dan apa kegunaan dan perbedaan antara margin dan padding untuk halaman blog kita.

Postingan ini atau pertanyaan ini, sebenarmya terlalu berat buat saya, karena telah memasuki wilayah teori, sedangkan saya tahu ngeblog dan ngedit-edit ala kadarnya, itupun template orang lain bukan buatan sendiri, dan seratus persen hasil dari otodidak.
Do you know otodidac ? seseorang yang mengandalkan insting ke timbang ilmu yang pasti, seorang yang bersandar dan berlindung di bawah KUHP trial dan error.

Akan tetapi saya akan coba tulis ini, dengan meng-gadaikan kemaluan saya,... eh rasa malu saya.

Untuk memudahkan pemahaman saya telah membuat ilustrasi berupa gambar seperti di bawah. ( jika ada yang tidak setuju harap acungkan tangan ).

Dalam hikayat lain :

Margin : Digunakan untuk mengatur batas atas (top), Kanan ( right ), bawah ( bottom ) dan kiri ( left ) antar elemen/kolom halaman web. atau The CSS margin properties define the space around elements.

Sintaks :

selector { property : value }
atau
Body {
margin-top : value;
margin-right: value;
margin-bottom: value;
margin-left: value;
}

bisa juga di singkat seperti ini.
contoh:

Body {
margin:10px 5px 10px 5px;
}

/* menurut yang saya ketahui dari w3school.com urutannya searah jarum jam. jadi Top-Right-Bottom-Left. ( kalau ada yg tidak setuju silahkan ngacung ) */

Untuk nilai yang di atur, kita bisa mengunakan satuan pixel, centimeter, em, dan %

Browser dan W3c Support untuk margin.

Lihat juga di www.w3schools.com

PADDING : Padding mengatur batas antara garis border dan content ( isi ). atau padding hanya untuk mengatur batas atas, kanan, bawah dan kiri pada properti border saja.
The CSS padding properties define the space between the element border and the element content.

Sintaks :

selector {properti: value}
atau
.Class {
padding-top:value;
padding-right: value;
padding-bottom:value;
padding-left:value;
}

bisa juga di singkat seperti ini.
contoh:

.Class {
padding:10px 5px 10px 5px;
}

/* sekali lagi urutannya searah jarum jam. jadi Top-Right-Bottom-Left. ( kalau ada yg tidak setuju silahkan ngacung atau protes, demi kebaikan bersama ) */

Note :
biasanya kalau saya bingung mengatur nilai margin atau padding, saya langsung saja menyebutkanya. misal Margin-top: value; atau mengatur jarak sebelah kiri Padding-left:value;

sama seperti margin, untuk nilai yang di atur, kita bisa mengunakan satuan pixel, centimeter, em, dan %

Browser dan W3c Support untuk padding.

Technorati Profile

Lihat juga di www.w3schools.com

SUMBER

1. Kupas Tuntas Css oleh Dominikus Juju

2. www.w3schools.com

Technorati tags: Belajar Css/Html

Free Blogger Template

MY DIARY

View : Demo

View : Donlot

Catatan :

Apabila header-nya pake gambar, saya mengunakan ukuran 387 X 92 . png transparent.

 

NEO MY DIARY

View : Demo

View : Donlot

Catatan :

Skin ini merupakan template yang saya installing JSON dari Ramani, atau yang lebih di kenal dengan sebutan  Neo hackosphere. perpindahan atau membuka halamannya sangat cepat banguet, super kilat bro. kita cuman klik atau tekan Recent Postnya dah langsung terbuka. seperti pada blog ini. atau kalau you pingin tahu lebih jauh coba dech main ke blog na ramani di sini.

Perlu di ingat pengaturan format jumlah postingan yang akan di tampilkan mesti di atur ke angka satu. seperti gambar di bawah ini.

Jika ingin pake Image header, ukuran yang saya gunakan sama dengan di atas . 387 X 92 px

del.icio.us tags: New Blogger, Free Blogger Templates

Memasang tab menu di new blogger

Banyak cara yang di lakukan orang untuk menampilkan blog biar lebih menarik lagi, salah satunnya yaitu memasang tab menu baik di atas judul blog ( top bar ) atau di bawah judul blog.

Dan untuk memasang tab menu ini pun banyak sekali cara yang bisa kita pakai, salah satu-nya bisa saudara baca dalam tulisan ini.
dan hasilnya bisa di lihat pada blog DEMO ini.

INSTALL TAB MENU

Pertama : Untuk latihan lebih baik kita pakai atau membuat sebuah blog baru di new blogger. dan pilih template yang standar template Minima .

Kedua : Setelah beres meng-installnya, buka Template-> Edit Html. kemudian tambahkan kode di bawah ini, di atas tag body.

lihat yg di pertebal sebagai kode tambahan.

#outer-wrapper{
}

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

/* Use this with templates/template-twocol.html */

body {
background:#000000 ;

* Keterangan *

- memindahkan Outer-wrapper ke atas biar lebarnya sama dengan Body halaman blog.

- Sedangkan Navbar-iframe untuk menghilangkan navbar blogger.

Ketiga :
Kemudian geser kebawah, dan cari kode ini.

/* Outer-Wrapper
----------------------------------------------- */
#Outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Setelah ketemu ganti dengan kode di bawah ini.

/* Content-Wrapper
----------------------------------------------- */
#content-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Keempat :
Geser lagi ke bawah cari kode ini.

]]></b:skin>

Setelah ketemu masukan kode di bawah,
setelah kode ]]></b:skin> tersebut.

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/
/*BELOW 4 LINES add rounded bottom corners to each menu item.
ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.invertedshiftdown a:hover{
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}
#myform .textinput{
width: 190px;
border: 1px solid gray;
}
#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}
</style>

Kelima :
Geser lagi ke bawah kemudian cari kode ini.

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

Setelah ketemu masukan kode di bawah ini. setelah kode di atas tersebut.

<div class="invertedshiftdown"> <ul> <li><a href="alamat url" title="Home">Home</a></li> <li><a href="alamat url" title="New">New</a></li> <li class="current"><a href="alamat url" title="Revised">Revised</a></li> <li><a href="alamat url" title="Tools">Tools</a></li> <li><a href="alamat url" title="CSS">CSS</a></li> <li><a href="alamat url" title="DHTML Forums">Forums</a></li> </ul> <form id="myform"> <input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" /> </form> </div> <br style="clear: both;" />

Keterangan :
Ganti tulisan " alamat url ", dengan alamat link Url yang kamu inginkan. Misalkan: " http://blogkamu.blogspot.com/ "

Keenam:
Geser lagi ke bawah kemudian cari kode ini.

<div id='content-wrapper'>

Setelah ketemu ganti dengan kode ini.

<div class='clearfix' id='content-wrapper'>

Ketujuh :
Geser lagi kebawah kemudian cari kode ini.

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

Setelah ketemu ganti dengan kode ini.

<!-- spacer for skins that want sidebar and main to be the same height-->
<div style='clear:both;'/></div> <!-- end content-wrapper -->

Setelah beres coba tekan tulisan PRATINJAU. kalau telah sukses kemudian klik SIMPAN TEMPLATE.

Pasang Tab Menu di bawah Judul Blog

Tulisan di atas saya menyimpan tab menunya di bagian atas judul blog. untuk memasangnya di bawah judul blog simpan code langkah yang kelima, di atas code ini.

<div class='clearfix' id='content-wrapper'>

Technorati tags: Ngeblog, New Blogger

Tip Tutorial Blogger Bab 1

Secara garis besar kita  telah memiliki sebuah blog dari new blogger.  Tinggal kita isi dengan apapun yang kita inginkan.

mau sekedar cuap-cuapan , cerita sehari-hari, politik, budaya satra, cari duit dll.

Namun yang pasti, sebagus apapun tampilan blog  kita. jika kita jarang bertamu, mengunjungi atau silaturahmi ( blogwaking ) dengan blog lain-nya, jangan harap blog kita pun akan di kunjungi ( ramai di kunjungi ). 

Dan sebagus apapun tulisan kita, jika kita tak pernah menghargai tulisan teman-teman yang lainnya ( menberi komentar ), jangan ngarep tulisan kita pun dapat komentar.

Intinya pandai-pandai berteman dan menghargai segala kelebihan dan kekurangan, jangan pasang muka atau ke geeran dengan kemampuan kita.

banyak-banyak-lah berkunjung ke blog lain, berilah mereka apresiasi komentar pada tulisannya. Dengan begitu kita akan cepat di kenal dan banyak teman.

Dan tutorial blogger bab1 ini, dengan segala kekuranganya,   kita sudahi dulu di sini. Untuk selanjutnya pada Blogger Tutorial Bab2 , kita akan membahas tentang :

CEO -  Search Engine Optimization. arti cepatnya:  mendaftarkan blog kita agar bisa di index oleh mesin pencari, seperti google, yahoo dll.

Hit Counter dan Statistic : Tool untuk mengetahui perkembangan blog, mencatat kemajuan  blog  dan tool untuk mengetahui siapa saja yang mengakses blog kita.

Feed : tool untuk mendistribusikan  dan berbagi artikel.

Dan tutorial-tutorila seputar mengembangkan blogger kita.

wassalam.

 

Technorati tags: Blogger Tutorial, New Blogger

Menambah Gambar Untuk Header ( Judul Blog )

Tutorial Blogger Bab 1 bag 14

Sebelum melangkah lebih jauh tentang cara memasang gambar untuk header ( judul Blog ).

ada beberapa hal yang mesti  di perhatikan.

1. Ketahui dulu berapa ukuran lebar Header blog kita.

caranya dalam halaman TEMPLATE buka Edit Html.

Kemudian  geser  tab scroll ke bawah pelan-pelan, dan  cari kode dalam tag Css Seperti di bawah ini.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Tulisan yang saya beri garis bawah di atas merupakan informasi ukuran lebar sebuah header. ( jika di #header-wrapper tidak menemukan ukurannya, bisa saja ukuran  Outer-wrapper atau Content-wrapper menjadi patokan ukuran header.)

2. Setelah mendapatkan ukuran lebar header , maka cari gambar atau buatlah gambar untuk header kita sesuai ukuran tersebut atau kurang dari ukuran tersebut.

3. Jika anda mempunyai sofware Photoshop itu lebih bagus untuk menyimpan gambar dengan resolusi kecil namun berkualitas bagus. ( tentang menyimpan gambar dgn bantuan photoshop selengkapnya baca di sini ).

Setelah gambar untuk header telah siap. tibalah saatnya memajang atau mengirim  gambar header ke dalam blog kita.

Cara Pertama

Dalam halamana TEMPLATE tekan tulisan Elemen Halaman.

Kemudian tekan tulisan Edit di pojok bawah widget header blog kita.

Setelah itu, maka akan tampil halaman seperti gambar di bawah.

Tekan link tulisan Browse. kemudian cari gambar  yang ada di komputer yang telah kita persiapkan untuk gambar header .

setelah memilih gambarnya maka kita melangkah pada halaman berikut ini.

Keterangan :

Dibalik judul dan keterangan : jika ini yang kita pilih, maka judul dan Deskripsi/keterangan blog berada bersama gambar .

Selain Judul dan Keterangan : jika ini yang kita pilih, maka judul dan Deskripsi/keterangan blog tidak akan di ikut sertakan ke dalam gambar alias tersembunyi.

Setelah kita menentukan pemilihan, kemudian kita tekan tombol Simpan Perubahan.

Cara Kedua ( advance ).

Sebelumnya simpan dulu gambar untuk header ke web tempat penyedia penyimpanan gambar misalkan di photobucket.com atau googlepages.com ( baca di sini )

 

Setelah itu dalam halaman TEMPLATE buka Edit Html

Kemudian dalam kode Css cari tag #header-wrapper seperti di bawah ini.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor; }

setelah ketemu tambahkan kode dan alamat url gambar diantara kode tersebut .  ( jangan di copy paste kode di bawah )

penambahan alamat Url gambar,  seperti yang saya pertebal dan  akan terlihat seperti ini.

#header-wrapper { background: url(http://i120.photobucket.com/albums/o190/jaloewig/gam-14.jpg)
no-repeat left top;
height:200px; width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

ganti  url ( http://i120.photobucket.com/....) dengan alamat url gambar kamu. misal url ( http://alamat gambar kamu ) . sedangkan properti dan nilai   height:..px - merupakan ukuran tinggi sebuah gambar lebih baik di definisikan saja.

Setelah itu langkah selanjutnya apakah judul dan deskripsi  ( judul dan keterangan ) blog ingin di ikut sertakan atau tidak ? jika tidak ingin di ikut sertakan atau ingin di sembunyikan tambahkan saja kode ini - 

Display: none ; 

ke dalam tag  #header h1.

hasil penambahan-nya akan terlihat seperti ini.

#header h1 {
display:none;
margin:5px 5px 0;
padding:15px 20px .25em;
bla..bla
}

Begitu juga tambahkan properti dan value -

 Display:none;

untuk tag #header .description -nya.

seperti terlihat di bawah ini.

#header .description { display:none;
margin:0 5px 5px;
padding:0 20px 15px;
bla..bla
}

WARNING :

Biasanya jika judul dan descripsi blog tidak di ikut sertakan, bagian Main-Wapper dan Sidebar akan ikut naik ke atas.

salah satu solusinya bisa saja kita naikan nilai

margin-top

dari  tag  #header-wrapper -nya.

#header-wrapper { background:$bgcolor; url(alamat url)no-repeat left top;
width:660px;
margin:50px auto 10px;
border:1px solid $bordercolor;
}

menambahkan (tambahkan) nilai yang lebih tinggi pada angka yang di pertebal.

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

Technorati tags: Blogger Tutorial, New Blogger

Menganti Template Bag 2

Tutorial Blogger Bab 1 bag 13

Seperti yang di jelaskan pada artikel Menganti Template Bag 1, bahwa  ketika kita menganti sebuah template dengan yang baru,  terkadang susah untuk di install atau istilah populernya diparse.

Dan biasanya  jika mengalami hal seperti kejadian di atas yang saya lakukan :

1. Backup dulu widget yang kita sangat butuhkan dan template yang kita pakai  ( seperti di jelaskan pd Menganti Template bag 1 )

2.  kemudian dalam komputer buka Free Template yang kita donlot dengan program Notepad. caranya klik kanan mouse  Edit atau bisa juga -> Open with -> Notepad.

3. Setelah Templatenya terbuka dalam Program Notepad,  klik menu Edit -> Select All.  Kemudian klik Copy.

 

4. Kembali ke blogger, buka Template -> tab Edit Html. kemudian klik kanan mouse -> Select All. ( memilih semua code template yang ada di blogger ).

   

5. Setelah itu Klik Kanan mouse lagi, kemudian klik Paste .

( mempastekan template yang tadi kita buka di program notepad).

 

Artikel Selanjutnya :  Menambah Gambar Untuk Header ( judul blog )

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

Technorati tags: Blogger Tutorial, New Blogger

googlepages

Tutorial Blogger Bab 1 bag 9

Selain menyimpan gambar pada server photobucket, sekarang kita akan membahas menyimpan gambar pada googlepages. terutama kegunaan menyimpan gambar di googlepages untuk tampilan layout template kita, seperti gambar untuk latar blog, icon bergambar untuk label dll.

Dan Layanan situs ini merupakan bagian dari produck google.  kelebihannya selain untuk menyimpan gambar,  di googlepages ini kita pun  bisa menyimpan file flash, html ,  txt, zip, javascrip (js) dll. untuk mendapatkan layanan di googlepages, kita harus memiliki mail di google sebagai akunnya.

Buka situsnya www.googlepages.com . kemudian isi user name dan passwordnya sesuai dengan user dan password email kita di google.
Setelah terbuka , untuk menyimpan atau mengupload gambar dan file lainnya ,  tekan link tulisan upload.

 
setelah itu tekan tombol browser

 
dari komputer cari gambar atau file untuk kita kirim dan simpan di googlepages ini.

untuk memajang gambar yang kita simpan di googlepages, bisa kita baca pada artikel selanjutnya.

 

Artikel selanjutnya :  Memajang Gambar dari Image Hosting ke Blog

 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

Technorati tags: Blogger Tutorial, New Blogger

Menyimpan Gambar di Photobucket.com

Tutorial Blogger Bab 1 bag 8

Selain menyisipkan atau memajang gambar ke blog dari gambar yang kita miliki di komputer , kita pun bisa memajang gambar dari situs web yang menyediakan tempat untuk menyimpan gambar-gambar kita. atau yang di kenal dengan istilah Image Hosting.

Terutama kegunaan menyimpan gambar di sebuah server lain, biasanya untuk keperluan sebuah Header ( judul blog ) yang bergambar, Body Background ( latar halaman blog ) yang di beri gambar, atau juga untuk keperluan sebuah artikel, photo-photo slide dll.

Di internet banyak layanan web yang menerima gambar-gambar untuk kita simpan di web tersebut. di antaranya : photobucket, Imageshack, flickr, googlepages. dll ( untuk googlepages, tidak perlu pendaftaran, cukup dengan user dan password Gmail yang kita miliki ).

Dalam tutorial ini kta akan membahas cara menyimpan gambar di situs Photobucket.com

PhotoBucket.com

Pertama kita buka dulu situsnya www.photobucket.com untuk daftar. setelah terbuka klik tulisan Join Now untuk registrasi. kemudian isi dan hapalkan user name dan password, dan isi semua prosedur form registrasi.

Setelah beres registrasi maka kita akan menuju pada halaman selanjutnya. halaman di mana kita memulai untuk mengupload atau mengirim gambar yang ada di komputer kita ke server.

Keterangan

image from my Pc : menyimpan gambar dari komputer kita

video : menyimpan file video dari komputer

web url : mennyimpan gambar yang di miliki oleh web atau blog lain ke image hosting kita di photobucket.

untuk menyimpan gambar dari komputer ke situs photobucket.com langkah-langkahnya seperti berikut ini

1. klik tombol jika belum terpilih.

2. klik tombol image from pc - jika belum terpilih

3. klik tombol untuk mencari dan memilih gambar yang ada di komputer kita.

4. klik tulisan jika kita ingin menyimpan lebih dari tiga gambar.

5. klik tombol untuk menyimpan gambarnya.

Setelah beres kita menyimpan atau mengupload gambar. maka di halaman bahwa akan terlihat seperti gambar ini.

Di samping kanan tulisan Direct Link merupakan alamat url gambar yang di berikan oleh photobucket. yang nantinya kita letakan pada sebuah template atau ke dalam artikel postingan kita. ( caranya akan kita bahas setelah artikel ini )

Gambar dari Web Lain.

Terkadang kita menyukai sebuah gambar yang di pajang oleh web atau blog lain, dan kita ingin menyisipkannya pada blog kita sendiri. Menurut aturan kita tidak boleh memajang langsung photo dari web atau blog lain mengunakan server alamat gambar mereka, tapi mesti di save / di simpan dulu ke server tempat kita biasa menyimpan gambar yakni seperti ke alamat server kita di photobucket .

Mengapa demikian ? pertama akan menyita waktu, dan kedua dapat memboroskan bandwidth orang lain apalagi jika mereka menyimpan gambarnya pada server mereka sendiri yang tidak gratis seperti photobucket.

Nah mumpung kita masih dalam tahap memahami, ada baiknya kita harus menjungjung sopan santun di internet.

karena itu untuk menyimpan gambar dari web atau blog lain ke dalam photobucket. pilih tab Web Url, setelah terbuka halaman untuk penyimpanan gambar dari web atau blog lain. masukan ke dalam kotak input ( yang bertuliskan paste web url here ) alamat Url gambarnya. setelah itu tekan tombol Upload.

Tip : cara yang mudah untuk mengetahui alamat url gambar orang lain Letakan saja mouse pada gambarnya, kemudian klik kanan pada tombol mouse untuk menampilkan menu scroll. kemudian klik pada tulisan Copy Image Location .
setelah itu Copy Paste pada kotak input di photobucket.

Gambar yang di dukung oleh server atau image hosting ( web penyimpan gambar ) di photobucket adalah Gif, Gif animasi, Jpg dan Png. Untuk ukuran batas gambar yang bisa di terima adalah 1024 x 768 px.

Artikel selanjutnya : Memajang gambar dari Image Hosting ke Blog

Technorati tags: Blogger Tutorial, New blogger

Pasang ShoutBox

Tutorial Blogger Bab 1 bag 6

Shoutbox merupakan sarana yang terbaik untuk berinteraksi dengan pengunjung blog. baik itu untuk berkirim pesan, persahabatan yang intens atau sekedar "say hello ".

Karena ke praktisannya berhubungan dan berkomunikasi, shoubox bahkan menjadi media yang ampuh untuk mengiklankan dan memajukan blog kita sendiri. karena satu hal, pesan yang di sampaikan melalui shoutbox, menyimpan link alamat blog kita yang bisa di klik oleh sembarang pemilik blog lainnya.

untuk memasang ShoutBox di blog kita, silahkan klik di sini untuk daftar.

Setelah terbuka web penyedia layanan shoutbox .

1. klik tulisan Create Your Shoutbox Now atau bisa juga klik tulisan Sing Up untuk pendaftaran.

2. Kemudian isi

User Name : nama user

Choose password : kata sandi minimal sebanyak 6 digit.

Retype password: Ulangi kata sandi di atas.

Name : nama kita atau nama samaran.

Email: alamat email yang kita miliki.

3. Kemudian Tandai kotak kecil di sampimg kiri I have read and agree.. untuk menyetujui perjanjian.

4. Setelah beres klik tombol Countinue.

Kemudian pada jendela baru yang terbuka , kita di suruh untuk memilih style atau desain shoutbox. pilih salah satunya .

pada kotak Verification, masukan verifikasi kata.

klik lagi tombol Countinue untuk melanjutkan pada halaman berikutnya.

Setelah pendaftaran di terima, pada jendela yang terbuka klik tulisan Go to My Control Panel Now.

pada halaman yang terbuka klik Style & Color di bawah label Display, untuk membuka halaman Style & Color.

pada halaman ini kita bisa merubah font, ukuran font, warna font, warna latar, warna border dll.

Untuk mengetahui setiap perubahan settingan yang kita lakukan klik tulisan Preview. klik tulisan Reset untuk kembali pada tampilan defaultnya, klik tulisan save settings untuk menerima perubahan.

Kemudian di kolom kiri di bawah label navigasi tekan tulisan Back to Settings.

jika kita ingin merubah format tanggal dan waktu kita tinggal mengklik Date & Time di bawah tulisan Display.

Setelah merasa cukup dengan settingan yang kita inginkan, sekarang kita mengambil code script untuk di pasangkan pada blog kita.

untuk itu kita klik tulisan Get Code di bawah label Quick Start.

pilih dan klik tulisan Place Shoubox On Webpage.

1. Shoutbox size

Untuk sementara kita terima saja ukuran shoutboxnya, yakni lebar 140 px dan panjangnya 400 px ( ukuran ini bisa kita rubah sesuai dengan ukuran kolom sidebar yang kita miliki ).

2. Shoutbox option

Untuk mengaktifkan atau meng-nonaktifkan border di sisi Shoutbox.

3. Generated codes

Script yang ada pada kotak Generated Code ini, merupakan javascript yang harus kita installkan atau simpan ke dalam blog kita.

untuk itu pilih semua tulisan yang ada pada kotak ini, kemudian klik kanan pilih Copy.

Install Shoutbox.

Langkah yang terakhir yaitu mengistall atau memasang Shoutbox di bagian sidebar blog. untuk itu Buka blog-nya.

1. Dalam halaman Template -> buka tab Elemen Halaman.

2. Kemudian di bagian sidebar klik Tambahkan Sebuah Halaman Elemen.

3. Pilih elemen HTML/JavaScript. kemudian klik Tambahkan Ke Blog.

4. Setelah terbuka jendela HTML/JavaScript, Copy paste-kan kode script shoutbox tadi.

klik kanan Copy paste.

sesudah di copy paste.

5. Jika ingin shoubox-nya di kasih judul, silahkan isi judul dengan nama yang kita mau.

6. Kemudian Simpan Perubahan.

Shoutbox sudah terpasang di dalam blog kita, jika kita inigin mengetahuinya silahkan saja klik tulisan Simpan di lanjutkan dengan menekan tulisan Lihat Blog. seperti gam di bawah ini.

Secara default posisi shoubox berada di bagian atas elemen sidebar. Jika kita ingin memindahkan posisi shoutbox , klik dan tahan elemen shoubox tersebut. kemudian drag atau geser ke posisi paling bawah. ( atau letakan di posisi yang kita inginkan. ) seperti ilutrasi gam bawah.

Dengan mouse klik dan tahan elemen shoutbox.

Drag atau geser ke posisi bawah.

Setelah itu Simpan.

Artikel selanjutnya : Mengatur Font dan Warna Blog

Technorati tags: Blogger Tutorial, New Blogger