Contoh Template Pilihan

Selasa, 8 Oktober 2013

Picture Window Template

Hasil Copy & Paste untuk melihat hasil maksimalnya seperti di bawah ini:

Cara mengganti template blogger :

1. Login di blogger.com
2. Pilih blog yang akan diganti templatenya
3. pilih menu Template, pada halaman tersebut anda sudah bisa memilih model template yang anda suka
4. Setelah memilih, jangan lupa Apply to blog

Cara merancang template menggunakan fasilitas template editor (designer)

1. Login di Blogger.com
2. Pada Dashboard, pilih blog yang akan diganti templatenya
3. pilih menu Template
4. Pilih customize
>> menu-menu yang ada di halaman Customize
5. Templates : di bagian ini, anda bisa memilih model template yang anda suka (sementara ini, yang bisa dimodifikasi hanya model template Simple, picture windows,, hingga Travel. Sedang template Dynamic Views serta template luar mungkin tidak akan bisa diedit keseluruhan)
6. Background : di bagian ini anda bisa memilih warna latar belakang ataupun mengunggah gambar background kesukaan anda
7. Adjust widths : di bagian Adjust widths, anda bisa mengatur lebar template
8. Layout : di bagian ini anda bisa memilih model layout, kolom serta sidebar sesuai selera
9. Advanced : di bagian ini anda bisa merubah warna tulisan, model tulisan maupun warna link sesuka hati
10. Setelah selesai, jangan lupa Apply to Blog di pojok kanan atas.

Cara mengganti template dengan template external (download di situs template gratis)

1.    Carilah atau siapkan template yang telah anda download di situs template gratis untuk blog blogspot (anda bisa mencari di http://www.zoomtemplate.com/)
2. Buka file template yang telah didownload menggunakan text editor (saya sarankan anda membuka file xml menggunakan wordpad)
3. Login di blogger.com
4. Pada Dashboard, pilih blog yang akan diganti templatenya
5. pilih menu Template
6. pilih edit html
7. pilih proceed
8. sebelum mengganti template lama dengan kode html template baru, saya sarankan template lama dibackup dulu, caranya : klik expand widget template, copy semua isi yang ada dalam kolom html template, simpan ke dalam file wordpad baru, save.
9. Setelah kode html template lama disimpan, ganti semua kode html template lama dengan kode html template baru (copy-lah mulai dari kode tag ?xml ... hingga tag /html )
10. Save template

How to Change an Image Header in a Picture Window Template on Blogger

Blogger is a free blogging platform provided by Google that allows you to design and post to your own online blog. You can change the way your blog looks by using built-in templates, such as the Picture Window template. If you are using the Picture Window template, your blog does not automatically display an image header, even if you upload one to the Header section. You must edit the blog HTML to add your own header image instead.

Step 1

Log in to your Blogger account and click the name of the blog you would like to edit.

Step 2

Click “Template” from the left menu, then click the “Edit HTML” button under the thumbnail of your template. A new window appears.

Step 3

Find the header code block in the text window. This code block begins with “/* Header” at the start of this section.

Step 4

Highlight the header code below, right-click and then select “Copy.”
#header { width:500px; height:100px; margin:0 auto 10px; background: #fff url(URL) no-repeat top right; }

Step 5

Right-click inside of the code text box, right under the “------- */” line, and click “Paste.”

Step 6

Replace the “URL” in the code by typing the URL address of your header image.

Step 7

Edit the numbers next to “Width” and “Height” to fit the size of your header image.

Step 8

Click the “Preview” button to see the changes to your blog. This allows you to make any additional edits.

Step 9

Click “Save Template” to save your changes and add an image header to your Blogger blog.

Cara: Siapkan dan Sesuaikan Picture Window Template

Tutorial ini akan mencakup cara menginstal dan memodifikasi Template Blogger sebagai platform untuk menggunakan salah satu dari saya Tema Blog dan Backgrounds. Langkah-langkah ini mencakup kombinasi bekerja dalam Blogger "Template Designer" area dan kode area Html. Jangan Rush ~ Dianjurkan agar Anda mengambil waktu Anda dan membaca melalui langkah-langkah hati-hati ~ ini adalah sesuatu yang Anda akan ingin menyisihkan beberapa waktu sebelum awal. Bekerja dengan kode Html bisa sangat rumit jadi pastikan untuk mengambil lambat dan membaca dengan seksama. Sementara tutorial ini tidak mencakup cara menginstal latar belakang Designer itu ide yang baik untuk mempertimbangkan apa latar belakang Anda akan ingin menggunakan. Anda dapat membaca dengan teliti pilihan saya latar belakang gratis melalui Tema & Backgrounds area blog saya. Berikut ini link langsung untuk itu: http://plumroselane-bckgrnds.blogspot.com/p/backgroundsthemes.html Instal latar belakang tercakup dalam tutorial yang berbeda sehingga setelah Anda menyelesaikan tutorial ini dan memiliki template yang membuat Anda dapat bergerak ke: Cara: Memasang Background Blog Dekorasi dan inilah link langsung untukdapat memberitahu Anda bahwa dari semua tutorial saya ini adalah yang terpanjang dan mungkin yang paling memakan waktu tapi hasilnya besar. Anda hanya perlu menyelesaikan proses ini satu kali dan setelah selesai Anda akan memiliki kesenangan mudah mengubah keluar latar belakang Anda setiap kali mood menyerang Anda. Mengubah out gambar latar belakang adalah yang sederhana dan menyalin dan menyisipkan sedikit kode. Jadi luangkan waktu Anda, bisa melewati ini dan Anda akan menikmati manfaat dari membuat blog Anda benar-benar milikmu . Jika Anda menemukan Anda lebih suka tidak repot dengan semua perubahan ini, maka saya melakukan menawarkan layanan ini dan Anda mungkin menghubungi sayauntuk info lebih lanjut pada harga.

Sekarang dengan menyiapkan template ... Memilih Template Picture Window 1. Kita akan mulai dengan menginstal Template Picture jadi mari kita mengakses blog Anda dengan mengeklik tautan "Desain" ...

2. Klik jeruk "Customize" tombol untuk mengakses area Designer Template ...

3. Kita akan mulai dengan memilih template ~ untuk melakukan ini cukup klik pada gambar sedikit dari Template Picture, tidak perlu untuk mengklik pada salah satu pilihan lain di bawah itu ...

Dengan terpilih kita sekarang akan membuat beberapa modifikasi pada pengaturan template default.  

Memodifikasi Template di Designer Template
Perubahan ini akan menghapus beberapa preset yang tidak akan mengganggu keindahan tema desainer dan latar belakang, jadi mari kita lanjutkan. .

4. Klik pada "Background" link, pilihan kedua dari atas di sisi kiri link list ...

5. Dalam pandangan ini Anda akan menghapus gambar latar belakang bawaan ~ untuk melakukan hal ini, cukup klik link "Hapus foto" acara di bawah gambar kecil ...

6. Sebuah jendela pop-up akan muncul, klik "OK" ...

7. Pandangan Anda sekarang harus terlihat seperti ini dengan blank spot yang gambar itu ...

Di daerah ini Anda juga dapat memilih skema warna untuk mencocokkan background blog masa depan Anda. Anda dapat membuat pilihan sekarang atau kembali setiap saat untuk memilih skema baru atau mengubah pilihan Anda. Anda juga akan memiliki pilihan untuk memilih warna pilihan Anda sendiri di luar yang menunjukkan di sini di daerah lain Template Designer tangan. 

Backgrounds, Layouts dan Sizing
Sementara kita berada di daerah ini Template Designer, mari kita bahas ukuran dan layout sejak ini juga aspek penting untuk dipertimbangkan saat memilih latar belakang blog. Semua latar belakang saya datang dalam tiga ukuran dan Anda memiliki banyak pilihan untuk bagaimana Anda ingin menggunakan mereka ukuran. Ukuran yang tercantum untuk latar belakang saya adalah 800, 940, dan 1050 piksel lebar. Ketika kami menyebutkan ukuran ini kita mengacu ke daerah pusat blog Anda yang meliputi area posting serta setiap wilayah sidebar Anda telah mengatur.

Keseluruhan luas daerah ini dikendalikan dalam " Mengatur lebar "wilayah Template Designer dan di sini adalah pandangan dari halaman tersebut ...

Tata letak blog Anda yang mencakup jumlah daerah sidebar Anda miliki dan di mana mereka duduk di samping daerah posting Anda dikendalikan dalam " Tata Letak "daerah dan di sini adalah pandangan dari halaman tersebut ...

Jika ini adalah pertama kalinya Anda menyiapkan salah satu template baru maka Anda mungkin ingin membuat beberapa penyesuaian tambahan dalam "lebar Adjust" dan "Layout" daerah. Beberapa penyesuaian lebar standar adalah:

2 Kolom Blog

Seluruh blog 800 - 860px

Sidebar 200 - 260px

3 Kolom Blog

Seluruh blog 940 - 1050px
200px Sidebar masing
atau 450px jika kedua sidebar berada di satu sisi

Anda mungkin perlu untuk bermain-main dengan pengaturan ini sedikit sampai Anda menemukan kombinasi yang Anda sukai dan saya sarankan datang kembali nanti setelah Anda selesai dengan tutorial ini. 

Akhir Template Modifikasi Designer
8. Pindah ke penyesuaian akhir kita, mari kita klik "Advanced" di bagian bawah daftar ...

9. Hal ini membuka subkategori besar dengan banyak pilihan pengaturan tambahan ...

10. Sekarang klik pada "Backgrounds" untuk menyesuaikan beberapa preset ...

10 - a. Sekarang, dalam "Background Banks" bagian klik pada tanda panah kecil kebawah selanjutnya klik persegi panjang berwarna hitam ...

10 - b. dan jendela pop-up akan muncul ...

10 - c. Klik di alun-alun kotak di samping kata "Transparan" ...

10 - d. Lalu klik di luar kotak untuk menjaga seleksi dan tutup jendela pop-up. Saya biasanya klik pada daerah abu-abu di sebelah kanan pilihan warna ...

10 - e. Sekarang bergerak sepanjang dengan cara yang sama, kita akan mengubah "Pos Background" warna transparan juga, sampai hasil akhir terlihat seperti ini ...

11. Selanjutnya, dengan menggunakan scroll bar, gulir ke bawah dan klik "Post" ...

11 - a. Pada bagian ini, klik pada tanda panah kecil untuk mengubah "Border Color" untuk transparan seperti yang Anda lakukan di langkah di atas ...

Pastikan untuk hanya mengubah Warna Perbatasan dan tidak menyentuh "Footer Warna Teks" ~ karena Anda tidak ingin teks footer Anda menghilang atau tidak terlihat.

12. Sekarang klik "Apply to Blog" tombol untuk menyimpan semua perubahan yang telah dilakukan ...

13. Anda sekarang telah menyelesaikan perubahan di daerah Designer Template. Jika Anda adalah untuk melihat di blog Anda, satu-satunya preset masih tersisa wilayah yang digariskan daerah pusat putih dan bawah abu-abu atau "footer" daerah.Kita sekarang dapat melanjutkan ke membuat modifikasi terakhir di daerah Html blog Anda. Untuk melanjutkan ke daerah itu, klik "Kembali ke Blogger" link di atas ...

Menyimpan Backup
Sebelum kita mulai bekerja di di daerah Html blog Anda, penting untuk membuat salinan cadangan dari blog Anda. Bekerja di Html bisa rumit dan satu kesalahan kecil atau salah ketik bisa mendatangkan malapetaka. Sejak bekerja dengan Html seperti berbicara bahasa lain (dapat terlihat seperti omong kosong jika kita tidak itu), mengingat perubahan apa yang kita dibuat dapat hampir mustahil sehingga selalu disarankan agar Anda membuat cadangan dari template blog Anda. Ini akan memastikan bahwa jika ada sesuatu yang salah Anda dapat kembali dan memulai dari awal.

Jadi, mari kita simpan salinan cadangan dari template blog Anda ... 14. Pada "Template" halaman klik pada abu-abu "Backup / Restore" tombol arah pojok kanan atas.

15. Klik jeruk "Download full template" tombol untuk menyimpan salinan ke komputer Anda ...

Pastikan Anda tahu di mana Anda menyimpan salinan sehingga Anda dapat dengan mudah menemukan itu harus Anda perlu menggunakannya di masa depan. Setelah selesai klik tombol Close ...

Dengan melakukan itu kita sekarang dapat dengan aman beralih ke membuat perubahan dalam bagian kode Html Anda.

Jadi mari kita mulai dengan penyesuaian akhir kami ...Penyesuaian Html Kode 16. Dalam "Template" area blog Anda, klik "Edit HTML" tombol ...

17. Ini adalah pandangan dari daerah Html blog Anda ...

18. Untuk membuat perubahan di daerah ini pertama-tama kita harus klik "Format Template" tombol untuk memperluas tampilan kode. Kemudian kita akan perlu menggunakan built-in "Cari" fitur untuk menemukan kode yang ada dan menggantinya dengan potongan dimodifikasi kode. Untuk memulai "Cari" fitur klik di mana saja dalam wilayah kode dengan mouse Anda, lalu klik dan tahan tombol "Ctrl" pada keypad, kemudian klik "F" kunci - "F" adalah untuk "Cari". Ini akan membuka "Search" ...

19. Dengan itu kita akan memulai untuk pertama menghapus pusat latar belakang putih otomatis yang telah ditetapkan dalam template. Jadi baik mengetik kata-kata di bawah ini, atau copy dan paste mereka, ke dalam area pencarian ...

main.background

sehingga terlihat seperti jadi ...

Sekarang klik "Enter" pada keypad Anda untuk menemukan entri yang dalam kode.

21. Anda akan melihat kode segera mengubah dengan potongan kode disorot ...

22. Berikut adalah tampilan dari bagian kode Anda akan mengganti ...

23. Sekarang salin kode di bawah ini dan paste di atas seluruh kode yang ditunjukkan di atas ~ pastikan untuk menutupi panah awal sebelum pertama "Variabel" dan panah berakhir yang mengikuti kedua "20px" ...

24. Sangat penting untuk melihat perubahan Anda untuk memastikan tidak ada kesalahan sehingga untuk melakukan ini, klik tombol "Preview Template" tombol di bagian atas ...

25. Sebuah preview blog Anda sekarang akan muncul di mana kode Html terlihat dan Anda dapat menggunakan scroll bar gulir ke bawah dan periksa untuk memastikan perubahan Anda telah diambil dan daerah pusat putih tidak lagi muncul ...

26. Dengan perubahan yang benar membuat Anda sekarang dapat klik "Edit Template" tombol untuk kembali ke tampilan Html ...

27. Dan klik "Simpan template" untuk menyimpan perubahan Anda ...

Dengan itu Anda baru saja menyelesaikan yang pertama dari tiga langkah. Hanya dua lagi untuk pergi dan Anda sudah selesai, jadi mari kita lanjutkan pada ... 28. Sekarang kita akan menghapus abu-abu garis bayangan dari pos pusat daerah. Mari kita pertama ulang pencarian sehingga kita dapat menemukan potongan benar kode. Untuk melakukan hal ini, menggunakan bar gulir untuk menggulir kembali ke atas area kode ...

dan kemudian klik di dalam area kode Html untuk mereset area pencarian ke bagian atas halaman. 29. Sekarang untuk menemukan potongan kode yang berikutnya, baik mengetik kata-kata di bawah ini, atau copy dan paste mereka, ke dalam area pencarian ...

region.shadow.spread

sehingga terlihat seperti jadi ...

Sekarang klik "Enter" pada tombol untuk menemukan bahwa entri dalam kode.

30. Anda akan melihat kode segera mengubah dengan potongan kode disorot ...

31. Berikut adalah tampilan dari bagian kode Anda akan mengganti ...

32. Sekarang salin kode di bawah ini dan paste di atas seluruh kode yang ditunjukkan di atas ~ pastikan untuk menutupi panah awal sebelum pertama "Variabel" dan panah berakhir yang mengikuti kedua "1px" ...

Catatan: Dari waktu ke waktu saya telah menemukan bahwa menggunakan fitur Cari untuk langkah ini tidak menemukan bagian yang tepat dari kode pertama kalinya. Jika Anda mengalami ini juga dan kode tidak terlihat persis seperti contoh di atas, maka cukup gulir kembali ke atas area kode Html dan klik di mana saja dalam kode ~ ini akan mengatur ulang fungsi Pencarian kembali ke atas Html kode dan Anda dapat mencari lagi untuk bagian kode.


33. Sekali lagi kita akan melihat perubahan untuk memastikan mereka mengambil mempengaruhi jadi klik pada "Preview Template" tombol ...

34. Gulir ke bawah untuk memeriksa bahwa bayangan telah dihapus dari tepi luar posting blog Anda (ini mungkin agak sulit untuk melihat apakah Anda sudah memiliki latar belakang blog diinstal) ...

35. Dengan perubahan yang benar membuat Anda sekarang dapat klik "Edit Template" tombol untuk kembali ke tampilan Html ...

36. Dan klik "Simpan template" untuk menyimpan perubahan Anda ...

Dengan itu kita sekarang dapat melanjutkan ke membuat perubahan akhir ke kode Html. 37. Dalam modifikasi terakhir ini kita akan menghapus latar belakang footer abu-abu gelap. Sekali lagi mari kita ulang pencarian kembali ke atas dengan menggunakan scroll bar dan bergulir ke atas area kode ...

kemudian klik di dalam area kode Html di bagian atas halaman.38. Sekarang untuk menemukan potongan kode yang berikutnya, baik mengetik kata-kata di bawah ini, atau copy dan paste mereka, ke dalam area pencarian ...

footer.background

sehingga terlihat seperti jadi ...

Sekarang klik "Enter" pada tombol untuk menemukan bahwa entri dalam kode.

39. Anda akan melihat kode segera mengubah dengan potongan kode disorot ...

40. Berikut adalah tampilan dari bagian kode Anda akan mengganti ...

41. Sekarang salin kode di bawah ini dan paste di atas seluruh kode digambarkan di atas ~ pastikan untuk menutupi panah awal yang mendahului "Variabel" dan panah berakhir yang berikut "kiri" ...

42. Sekali lagi kita akan melihat perubahan untuk memastikan mereka mengambil mempengaruhi jadi klik pada "Preview Template" tombol ...

43. Gulir ke bawah untuk memeriksa dua kali lipat warna abu-abu telah dihapus dari area footer blog Anda ...

44. Dengan perubahan yang benar membuat Anda sekarang dapat klik "Edit Template" tombol untuk kembali ke tampilan Html ...

45. Dan klik "Simpan template" untuk menyimpan perubahan Anda ...

Itu saja! Template blog Anda sekarang sudah siap dan siap untuk Anda untuk menginstal Template Designer atau Background.Jika Anda menemukan bahwa salah satu perubahan tidak mengambil mempengaruhi maka Anda dapat mengembalikan template Anda sebelumnya dan memulai kembali dengan perubahan Html. Hanya perubahan Html akan perlu direnovasi.Jika Anda menerima pesan kesalahan untuk setiap perubahan di atas maka cukup kembali keluar dari bagian Html tanpa menyimpan perubahan dan kembali lagi untuk memulai kembali. Saya harap Anda menikmati versi modifikasi dari Template Picture dan semua opsi yang menawarkan untuk dekorasi blog Anda! 

Perbarui:  Karena perubahan terbaru di bagian Html blog Blogger kita tidak lagi mampu menawarkan dukungan untuk tutorial ini. Meskipun tutorial telah diuji dan digunakan secara teratur oleh desainer kami, langkah-langkah sering terlalu kompleks untuk blogger pemula untuk berhasil menyelesaikan. Jika Anda mengalami kesulitan, seperti menerima pesan kesalahan Html, maka kami merekomendasikan langkah-langkah berikut: 1. Jika bahasa Inggris bukan bahasa utama Anda maka sebaiknya Anda mencari tutorial dalam bahasa Anda sendiri. Bekerja dengan kode Html terlalu kompleks untuk digunakan dalam bahasa asing dan menggunakan penerjemah tidak akan memberikan hasil yang akurat.  2. Jika Anda menerima kesalahan kode Html maka kami sarankan mencari Google untuk tutorial alternatif karena ada beberapa orang lain yang tersedia di dunia maya. Kami menawarkan pemasangan Template dan modifikasi bersama dengan instalasi tema blog desainer kami. Jika daerah Anda tertarik pada layanan ini silahkan hubungi kami langsung.Terbaik ~ 

How To Setup Picture Window Template