Cara Buat Menu Bawah Header

Cara buat Menu Bar di bawah Header

Kali ni, saya nak kongsikan cara hendak buat menu bar kat bawah header plak..

Cara nak buat dia senang sikit. Tak perlu nak edit HTML. Saya guna yang ni sebab saya tak reti nak edit-edit HTML ni. So, Kat bawah ni, akan saya terangkan bagaimana nak buat. Yang dah pandai tu, bagi la pendapat ye..

Langkah 1

Login ke blogger > Layout/Tata Letak > Edit Html .

Langkah 2

Klik CTRL+F Untuk pencarian kod seperti dibawah ini.
baca lanjut...

Favicon

Favicons adalah image berukuran mini (16 x 16 pixels) yang dapat di tampilkan pada URL bar browser dan bookmark. Favicons mampu menaikkan citra tersendiri bagi website Anda, sehingga pengunjung website mampu mengenali website tersebut.
Untuk membuat favicon, Anda bisa buat melalui photoshop atau pergunakan jasa website lain. Untuk buat sendiri, baca cara buat favicon dengan photoshop. Untuk menciptakan icon favicon melalui website lain, contoh menggunakan website : http://www.favicon.cc
Setelah icon favicon tercipta. Upload file icon tersebut ke folder Anda dibawah public_html.
Kemudian pada halaman/file website, masukkan tag HTML ini diantara dan

Contohnya seperti dibawah ini :

http://www.baliorange.web.id/cara-pasang-favicon-untuk-website-anda/

Header Wordpress

Cara Ubah Header WordPress

Posted on 20 Februari 2009 by wong ndeso

Buat teman-teman yang masih bingung Cara Mengubah Header WordPress (kalo di terjemahin wordpressnya = kepala halaman) nih ada cara paling guampang, misal mo ganti keq punya saya sekarang nih… buat yang udah jago plis deh biar adik-adik kita ni belajar dulu yah ixixi  


Caranya : Setelah Login cari “Tampilan” -> “Gambar Tajuk Tersesuai” keq gambar atas noh… terus… “Pilih Berkas” (file gambar/foto yang mau di tampilkan) -> “Unggah” gambarnya ntar yang mo nampang ukuran 904 x 160 piksel so dipernah-pernahin dulu yah/di crop habis itu selesai deh… guampang toh…


http://solocybercity.wordpress.com/2009/02/20/ubah-header-wordpress/

buat tempales asas

Yak akhirnya jadi juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template Blogger". Mulai dari mana ya? nnnngg.. :t ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.

Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:



Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

background
header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }
4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......

http://trik-tips.blogspot.com/2008/02/cara-membuat-template-di-blogger.html

Using Image as sidebar

OK. We have an image or two ready to go. My title image is for links, so I will show you how to do a widget for links. Open your Dashboard | Layout | Page Elements | Add a page element | HTML/Javascript. Add the following code to the window:

LINK TITLE

LINK TITLE

You can add as many links as you want by opening (edit) the widget and adding this code:

LINK TITLE

for each new link. It certainly is a fun way to dress up your sidebar and coordinate it with other design elements in your blog.

http://bloggeruniversity.blogspot.com/2008/07/using-image-as-sidebar-title.html

Templare green peace

Templates green peace


http://btemplates.com/2010/blogger-template-green-peace/

http://mgpeace.blogspot.com/

http://www.noyod.com/2010/04/green-peace-2.html#more

cara buat readmore

cara buat readmore

logger Help - Add Read More link to your posts

Although this tutorial is the easiest way to truncate posts on Blogger blog, but being a javascript based hack, this method is not SEO friendly. If you want to use a SEO friendly post-truncating method on your blog, then kindly read this post.
Most of the bloggers, want to show more than one post in their blog's home page, but displaying all the content on the home page of each and every post makes the home page very lengthy, and visitors may miss out any article while scrolling down the entire length of the page.
So here's a method for bloggers to display only a part of the posts, and not the entire posts. If a visitor wants to read the complete article then he/she will click on the "Read More" link at the bottom of the post, which will be redirected to the particular post.

Steps to follow:
1. Log into the Blogger.com account
2. Go to "Layout" section
3. Back up your current template, by downloading it.
4. Now click on "Expand Widget Templates"
5. Now find this code - ]]>
6. Just AFTER that code add these lines



7. Now again find this code :
8. And just after this, add these code lines:


Read More!



If you want to shift the "Read More!" text to the extreme-right side, use this code:

Read More !

9. Now save the template.

IMPORTANT :Now these adjustments will NOT show your previous posts with "Read More" tag, but you can display them with Read More tags, by editing them with instructions as below:
From now on, whenever making a new post, the part of the post you want to HIDE on your main homepage, write those lines in between these code lines:

WRITE THE PART OF THE POST YOU WANT TO HIDE HERE


See the screen shot below for details:


NOTE 1: After writing new posts, always proof-read your edit HTML section, to avoid mistakes, one such mistake is discussed below:

Make sure, that "Edit HTML", while writing posts looks exactly like this:

Post in brief, may include pictures too
Hidden part

In the above example notice that I have closed span, before div, that placement is very necessary, if you put like this

Cara Buat templates sendiri

Cara buat tempales gamabr sendiri

http://bloggerstop.net/2010/04/design-your-own-blogger-templates.html

April 4, 2010
Design Your Own Blogger Templates!

This post will help you to design your own templates by using the newly launched feature by the Blogger Team - Template Designer.

Image © Terence J Sullivan
There are several hundred, in fact thousands of Blogger templates available for free to download and use. But most of the bloggers usually do not find everything they want in these templates and to avoid the hectic tweaks and coding stuff, they finally settle for a template that covers the maximum number of their requirements and compromising on some other features.
But now you can yourself design a complete template for your blog;
To design a unique template for your blog, you have to focus mainly on four aspects of the template:

1. Overall template-layout structure :- This is the most important and the basic structure of your template. You can select the one of your choice, from 8 different available options - no sidebar, 1 sidebar (either to left/right), 2 sidebars, a large sidebar - followed by two small sidebars etc. (see below)
Blogger Templates Official Layouts

You can also adjust the widths of different sections viz. sidebars and the post-area, with a simple drag-tool.
2. Footer Layout :- Select 1 or 2 or 3 column layout.
Blogger Official Footer Layouts
3. An attractive Background :- You may use a single large image or a small repeating image as a background-pattern for your blog, or you may simply use a background color instead of images.
4. Finally, Styling everything from Header to Footer: Font styles, size and colors for header-text, body-text, widgets-text, footer-text etc.
And it also includes coloring different areas/parts of the blog-template, like central post-body background, header background and outer-wrapper background.


Now the procedure to follow; Make your first self-designed template...

Blogger Template Designer
STEP #1
Log in to Blogger In Draft and create a NEW test-blog, we'll use this blog to create the template and then the template will be transferred to the original/main blog. Write at least two test-posts with a few test comments.
NOTE: At the time of creating this new test-blog, initially select any blogger template (Minima etc.) randomly.

STEP #2
Go to Layout -> Template Designer.
Now select the template that best matches your taste; with/without header, transparent background etc.
Click on Apply To Blog.

STEP #3
Now again in the Template Designer, go to Layout.
Select the Body Layout, Footer Layout and adjust the widths of different sections (optional).
Click on Apply To Blog.

STEP #4
Now go to the Background tab and select either an image or a color as your blog's background. [Read Step #4 cont. to add a background image of your choice].
Click on Apply To Blog.

STEP #5
Finally adjust the background colors for different areas of the blog, font styles, size and colors etc. from the Advanced section of the Template Designer.
Click on Apply To Blog.


STEP #4 cont...
To manually change the background, go to Dashborad -> Layout -> Edit HTML
and find a code SIMILAR (and NOT exactly the same) to this, in the template:




Change the code highlighted in RED, with the DIRECT LINK to the image you want to use as the background image. The code highlighted in BLUE will adjust the position and the characteristicsof the image.

Check out the Template designed by me, while writing this tutorial: Sample - New Blogger Template Designer Blog.

That's it...Now you have a new template, entirely customized by you...ready for your actual blog. Download the template from your test-blog and upload it to the main blog. But before you add this template to your main blog, download the template you are currently using in your main blog as a back-up and also read this post to know the correct way of changing templates in Blogger without losing any of your content/widgets.

Examples...
Impress me with your work and get your blogs displayed here...