Jumat, 31 Oktober 2014

 10/31/2014 11:28:00 PM         28 comments
Seperti yang kita sudah selalu berbicara tentang Blogger dan blogging, hari ini kita akan membuat diskusi panjang pada salah satu pertanyaan yang paling populer ditanyakan blogger.com pengguna yang cara membuat template blogger . Banyak blogger telah meminta saya pertanyaan ini di Facebook dan melalui layanan kontak lainnya jadi saya pikir kenapa tidak saya harus membuat posting yang panjang khusus untuk mereka. Pada dasarnya, hal ini datang dalam Web Desain dan Pengembangan sehingga seseorang harus memiliki keterampilan ini dalam rangka untuk membuat template blogger dinyatakan membaca dan memahami artikel panjang ini akan sia-sia. Hari ini, saya tidak akan mengambil terlalu banyak waktu Anda dalam jenis diskusi jadi mari kita mulai membahas tentang topik utama.

Persyaratan Untuk Membuat Template Blogger

Pertama-tama, saya ingin menyebutkan persyaratan yang setiap orang harus memiliki untuk merancang atau membuat template blogger karena setiap orang biasa tidak bisa dengan mudah membuat blogger template dibutuhkan beberapa keterampilan. Hal pertama adalah bahwa, Anda harus tahu Blogger.com sempurna. Cara membuat blog, membuat tulisan dan halaman, melakukan sedikit penyesuaian, bermain dengan gadget dan juga bagaimana platform ini benar-benar bekerja. Setelah ini, Pengetahuan dasar desain web yang diperlukan di mana HTML dan CSS yang paling penting. Dalam blogger, Kita dapat menggunakan HTML, CSS, XML dan JavaScript. Jika Anda tahu semua bahasa ini maka Anda tidak akan menghadapi masalah dalam merancang template blogger profesional .

Langkah 1 Mempersiapkan Pengujian / Demo Blog Untuk Membuat Template

Ini adalah hal yang umum bahwa sebelum membuat setiap template blogger Anda akan membuat blog demo untuk template itu. Jadi, membuat blog dan mempublikasikan lebih dari 10 + tulisan di atasnya. Harus ada satu gambar, semua pos, 4-5 paragraf teks, daftar bernomor, daftar peluru dan kutipan dalam setiap pos. Kami akan merancang ini masing-masing dan setiap hal sehingga membuat 10 + posting dengan ini segala sesuatu dan juga mengintegrasikan beberapa widget penting dalam footer atau sidebar. Setelah itu, Anda dapat menggunakan default template di atasnya tapi segera kami akan menghapusnya dan desain template lain di atasnya. 

Langkah 2 Memahami Dasar Struktur Template Blogger

Sebelum memulai template kita harus memahami struktur dasar dari template blogger. Kita juga dapat mengatakan bahwa kita akan membuat halaman kosong sederhana template blogger. Jadi, saya sudah mempersiapkan coding dasar yang akan membantu Anda untuk memahami struktur dasar.
 
<? Xml version = "1.0" encoding = "UTF-8"?> 

<DOCTYPE html!> 

<html xmlns = 'http: //www.w3.org/1999/xhtml' xmlns: b = 'http: // 
www.google.com/2005/gml/b 'xmlns: data =' http: 
//www.google.com/2005/gml/data 'xmlns: expr =' http: 
//www.google.com/2005/ gml / expr '> 

  <head> 
    <b: include data = 'blog' name = 'all-head-content' /> 
<title> 
      <b: if cond = 'data: blog.pageType == & quot; index & quot;' > 
        <data: blog.pageTitle /> 
        <b: else /> 
        <b: if 'data: blog.pageType = & quot; error_page & quot;!' = cond> 
          <data: blog.pageName /> | <data: blog.title /> 
          <b: else /> 
          Halaman Tidak Ditemukan | <data: blog.title /> 
        </ b: if> 
      </ b: if> 
    </ title> 
    <b: skin> <[CDATA [ 
body { 
background: putih, 
warna: hitam; 
} 
# {Navbar1 dispaly: none penting;}! 
]]> </ b: skin> 
</ head> 
<body> 
  <b: section class = maxwidgets 'navbar' id = 'navbar' = ' 1 'showaddelement =' no '> 
<b: widget id = 'Navbar1' locked = '' title = 'true Navbar' type = 'Navbar' /> 
</ b: section> 
</ body> 
</ html>

Dalam coding dasar di atas, Anda akan melihat bahwa ada XML dan HTML tag di awal yang berarti bahwa ini dibangun dengan XML dan HTML. Perpanjangan utama untuk coding ini akan .XML. Jika Anda menyalin coding di atas dan paste dengan seluruh coding dari template maka akan disimpan dan akan menunjukkan apa-apa di blog karena ini adalah sederhana halaman HTML kosong. Mari kita memahami struktur dasar. 1. XML dan HTML tags : Seperti yang saya sudah bilang bahwa XML dan HTML tag adalah tag utama di mana seluruh template akan disimpan. Jika kita ingin menyimpan template ini di komputer maka kita akan memilih kstensi .XML sambil menyimpan karena blogger hanya mendukung file yang .XML template. 2. Panjang <title> Coding: Jika Anda melihat dalam kode judul di bawah <head> Anda akan melihat coding panjang antara <title> tag. Pada dasarnya, itu disesuaikan title coding yang memiliki banyak manfaat. Kami telah menggunakan tag kondisional untuk menyesuaikan judul coding ini. Kondisipertama mengatakan bahwa jika seseorang membuka situs atau indeks halaman utama maka akan menulis judul blog sebagai judul halaman web. Kondisi kedua adalah untuk menunjukkan posting atau halaman judul pertama dan menunjukkan judul blog setelah posting atau judul halaman. Dalam yang terakhir, ada 404 error page title coding. 3. <B: skin> Tag Untuk Menyimpan Stylesheet: Ada tambahan dibangun pada tag untuk blogger template untuk menggunakan <b: skin>  tag dengan CDATA untuk menyimpan seluruh CSS atau stylesheet dari blog. Dalam tag ini, Anda hanya akan melihat CSS yang digunakan dalam seluruh blog. Jadi, setiap CSS yang akan Anda tulis harus ditempatkan dalam tag tersebut. 4. <B: section> Tags Untuk Widget: Dalam blogger, kita menggunakan tag ini untuk membuat widget. Hal yang paling penting seperti Judul Blog dan Konten dilakukan dengan menerapkan widget di template. Singkatnya, ada widget default yang untuk Header dan Blog Content yang kita gunakan saat membuat template. Untuk membuat widget, kita harus menutupi mereka dengan <b: section> tag yang akan membantu kita untuk mempersiapkan tata letak halaman.

Langkah 3 Membuat header 

Setelah mengetahui struktur dasar, mari kita mulai dengan membuat header blog. Pada dasarnya, ada dua hal yang penting untuk membuat template blogger. Pertama adalah Header dan kedua adalah Blog Content. Hal-hal lain yang juga penting tetapi ini adalah yang paling yang. Kami akan menggunakan widget kustom Header dan akan menyesuaikan sesuai dengan kebutuhan kita. Pada dasarnya, Header widget dan Anda tahu untuk membuat widget, kita harus membuat bagian untuk widget satu atau beberapa. Salin kode di bawah dan paste di mana saja di <body> template di mana Anda ingin menampilkan widget Header.

<B: section class = 'header' id = 'header' maxwidgets = '1' showaddelement = 'no'> 
        <b: widget id = 'Header1' locked = title = '' type = '' true 'header'> < / b: widget> 
</ b: section>
Pengkodean di atas tidak coding lengkap Header tetapi ketika Anda akan mengintegrasikan coding di atas dalam template maka secara otomatis akan menjadi lebih lama. Simpan template ini, reload halaman Edit HTML dan Anda akan melihat memperluas panah di sisi kiri <b: widget> tag. Blogger secara otomatis akan menulis coding standar di atasnya. Jadi, mari kita memahami header ini coding. 1. <B: section> memiliki class = 'header' dan id = 'header': Pertama-tama, di tag bagian, Anda akan melihat class = 'header' dan id = 'header' yang CSS umum kelas dan id tag . Jadi, dengan bantuan tag ini, Anda dapat melakukan kustomisasi header seperti memberikan lebar tertentu, tinggi, margin, padding, ukuran font, warna dll untuk bagian header saja. 2. <B: section> memiliki maxwidgets = '1': Saya tidak perlu menjelaskan hal-hal sederhana, tetapi untuk benar-benar pemula saya akan menjelaskannya. Ada tag XML lain blogger yang maxwidgets = '1'  dengan ini, kita hanya dapat mengatur jumlah widget maksimum di bagian tersebut hanya mengganti nomor 1. 3. <B: section> memiliki showaddelement = 'no' : Ini hanyalah tag sederhana yang kita dapat menonaktifkan atau mengaktifkan Tambahkan pilihan Gadget. 4. <B: widget> memiliki id = 'Header1': Dalam widget header, ada tag CSS id yang kita menyesuaikan widget header dengan CSS. 5. <B: widget> setelah terkunci = 'true': Tag ini memungkinkan Anda untuk mengunci dan membuka widget dengan mudah dengan memilih benar atau salah. Ketika widget terkunci, seseorang tidak dapat dengan mudah mengedit bahwa melalui tata letak halaman. Pengaturan saat ini widget header dan bagian baik-baik saja sehingga kita tidak akan mengeditnya. Di bawah ini, saya akan memberikan kelas dan ID CSS tag yang akan membantu Anda untuk menyesuaikan widget sundulan. Cukup, menambahkan ini di bawah CSS antara <b: skin> tag dan mengisinya dengan sifat Anda sendiri.

# header {} 
#header h1 {} 
#header h1 a {} 
# header .description {}

Langkah 4 Membuat Halaman menu Widget

Aku lupa menyebutkan widget menu halaman yang juga penting untuk menciptakan menu. Semacam itu menu hanya menampilkan link tersebut yang sebenarnya halaman yang dibuat di blog blogger. Dalam standar blogger template, itu sebagian besar digunakan jadi di sini saya akan mengajarkan Anda bagaimana kita dapat menerapkannya dalam blog kita. Aku hanya akan memberikan Anda default XML dan HTML coding dan akan menunjukkan jalan Anda untuk merancang bahwa dengan CSS. Jika Anda dikenal dengan HTML dan CSS maka Anda dapat dengan mudah membuat menu kustom ada di mana saja di template. Tapi untuk menu halaman ini, Anda mungkin menghadapi masalah. Mari kita mulai.
Menu widget halaman ini juga dilakukan dengan membuat widget bagian dan widget. Jadi, di bawah ini saya akan memberikan kode lain yang akan memiliki bagian tag dan akan ada halaman daftar widget yang merupakan hal utama. Hanya menempatkan di bawah coding mana saja di mana Anda ingin muncul bahwa widget menu halaman. 

<B: section class = 'tab' id = 'crosscol' maxwidgets = '1' showaddelement = 'yes'> 
        <b: widget id = 'PageList1' = terkunci 'false' title = 'Halaman' type = 'PageList'> 
       </ b: widget> 
</ b: section>
Seperti yang kita lakukan di widget Header, ini juga hanya sepotong kecil tags yang secara otomatis akan menyelesaikan sendiri dengan coding default. Untuk kustomisasi, itu sederhana Anda hanya dapat mengambil ID dan tag Kelas dari kode di atas dan mulai menulis CSS Anda sendiri untuk mereka. Tapi, kali ini saya juga akan memberikan CSS tag kosong di mana Anda sudah mengisi properti sesuai dengan kebutuhan Anda dan desain yang lebih baik.

.tabs {} 
{} #corsscol 
PageList1 # {} 
{} # PageList1 ul 
ul li {} # PageList1 
# PageList1 ul li a {}

Langkah 5. Menciptakan Blog atau Konten Widget

Ini adalah hal utama harus penting sebagian besar dari semua. Dalam blogger, kita membuat widget standar yang posting sebenarnya widget. Di halaman tata letak, Anda mungkin telah melihat widget bernama besar Blog Posts. Kita dapat dengan mudah membuat standar posting blog widget dengan sedikit coding tapi menyesuaikan bahwa sesuai dengan kebutuhan kita dapat sedikit sulit. Pertama-tama, membuka editor html di blogger dan paste berikut posting blog kode widget di sana.

<B: section class = 'main' id = 'main' = pilihan 'yes' showaddelement = 'no'> 
 <b: widget id = 'Blog1' locked = title 'benar' = 'Posting Blog' type = 'Blog' > 
 </ b: widget> 
</ b: section>
Sama seperti widget lainnya, kami juga menciptakan bagian untuk itu widget posting blog. Setelah menyimpan widget ini dalam template, reload html editor akan mendapatkan coding default posting blog widget secara otomatis. Di sini, memulai dalam menyesuaikan tulisan bagian sesuai dengan kebutuhan Anda. Lihatlah kelas dan id tag dan menulis CSS untuk tag tersebut untuk mempercantik area posting. Ketika Anda akan memperluas posting blog widget, Anda akan mendapatkan banyak <b: includable> tag yang sebenarnya dalam posting daerah. Akan ada spesifik tag memiliki includable id = 'post' dan var = 'post' . Jika Anda memperluas bahwa tag includable maka akan muncul pengkodean posting daerah di mana Anda hanya bisa melakukan menyesuaikan dengan mudah.

Langkah 6 Membuat Gadget Kustom Area Anda suka Sidebar dan Footer

Di atas lima langkah akan mendapatkan template sederhana namun membuat daerah gadget kustom dapat berguna seperti membuat sidebar, footer dan area gadget yang diperlukan gadget lainnya. Jadi, pada langkah ini kita akan belajar bahwa bagaimana kita bisa dengan mudah membuat bagian gadget kustom dalam tata letak blogger. Kami hanya akan menulis <b: section> tag di mana kita dapat menambahkan widget sebagai lebih seperti yang kita inginkan. Pergi ke html editor dan paste kode berikut di mana saja Anda ingin membuat area gadget atau bagian.

<B: section class = '' id = '' maxwidgets = '' showaddelement = 'yes'> 
</ b: section>
Tidak ada yang khusus maka <b: section> tag di coding di atas. Kelas dan ID tag kosong di mana Anda dapat menambahkan nama kustom Anda sendiri untuk memanggil CSS untuk bagian tersebut. Anda dapat menggunakan kelas dan ID untuk memanggil CSS dan keindahan yang gadget bagian dengan menambahkan setiap lebar, tinggi, padding, margin yang dll tag lain, maxwidgets = '' juga di mana Anda menulis jumlah maksimum seperti 10 sehingga bagian tersebut tidak akan berisi lebih dari 10 widget. Jika Anda ingin menunjukkan Tambahkan pilihan Gadget dalam tata letak kemudian tetap ya di tag showaddelement dinyatakan menimpanya dengan no.

Langkah 7 Menyiapkan Page Layout

Sementara membuat template, juga mengurus tata letak halaman di blog blogger karena halaman yang tergantung pada template blog. Jika Anda melakukan hal-hal dengan benar maka tidak akan mendapatkan kacau tetapi jika Anda menghadapi masalah maka kita sudah solusi untuk ini. Kita dapat mengatur ulang widget dan bagian gadget sana melalui menggunakan CSS sederhana. Dan untuk apa, saya sudah menulis posting besar pada memperbaiki tata letak halaman blogger kacau . Untuk menata ulang widget pada halaman tata letak, kita akan menggunakan CSS dan akan menjadi seperti ini. 

tubuh # tata letak #widgetID {Properties Untuk Widget Di Page Layout Goes Here} 
body # tata letak widgetID2 # {Properties Untuk Widget Di Page Layout Goes Here} 
body # tata letak widgetID3 # {Properties Untuk Widget Di Page Layout Goes Here} 
body # tata letak # widgetID3 {Properties Untuk Widget Di Page Layout Goes Here} 

 Petunjuk Lanjut

Siapapun yang memiliki pengetahuan dasar tentang mendesain web dapat mengembangkan template blogger hanya dengan menggunakan HTML sederhana dan CSS. Pemula mungkin menghadapi masalah dalam memahami struktur template blogger tetapi jika Anda terus melakukan latihan maka Anda dalam beberapa hari, Anda bisa menjadi ahli dalam hal itu. Mereka web desainer yang dapat membuat HTML Template atau tema lainnya platform blogging maka saya tidak berpikir mereka akan menghadapi masalah apapun. Bahkan merancang template blogger adalah salah satu yang paling platform termudah daripada yang lain. 
Di atas kita hanya menciptakan sederhana template blogger yang berisi tulisan header, menu halaman dan blog. Tidak ada sidebar dan footer dalam template di atas. Anda dapat membuat sidebar dengan memberikan lebar khusus untuk posting widget, mengambang posting blog widget ke kiri dan membuat bagian lain yang akan sidebar. Anda akan perlu untuk mengapung sidebar di kanan dan juga memberikan lebar tersebut kepada orang-orang posting blog dan bagian sidebar yang kedua ini harus sesuai di daerah. Anda dapat melakukan lebih banyak percobaan dengan blogger template desain dan juga Anda dapat menutupi setiap bagian widget dengan tag HTML div tertentu. 
Sewaktu membuat blogger template, kadang-kadang saya menggunakan Inspect Element di Google Chrome yang umum alat coding dan membantu untuk mengedit halaman Web manapun. Ini juga akan membantu Anda menemukan Class dan ID tag spesifik apa pun dan Anda dapat menyesuaikan mereka melalui CSS.

Kata Akhir

Jadi teman-teman, itulah bagaimana kita dapat dengan mudah membuat template blogger dari awal. Ini adalah dasar-dasar membuat template blogger tapi saya sarankan Anda untuk terus melakukan praktik yang akan membantu Anda menjadi lebih nyaman dalam coding blogger template. Saya berharap sedikit panduan ini akan membantu Anda dalam memahami struktur blogger template dan merancang mereka. Jika Anda baik dalam desain web maka Anda bisa menjadi profesional blogger template desainer. Best of luck dalam mengembangkan blogger template. Have a nice day!

 Tags:  Template, Menciptakan blog atau konten widget.
Reaksi:

28 komentar:

  1. my blog: http://thisourthread.blogspot.com/

    BalasHapus
  2. http://claudino8890.blogspot.com/

    BalasHapus
  3. http://dietkeleus.blogspot.com/2014/08/how-fats-affect-your-body.html

    BalasHapus
  4. http://thisourthread.blogspot.com/

    BalasHapus
  5. http://rawrawrawrawfood.blogspot.com/

    BalasHapus
  6. nih pak ted http://bagasmahardion.blogspot.com/

    BalasHapus
  7. Blog saya http://haedar-curhat.blogspot.com/

    BalasHapus
  8. saya pak http://adistanrtk.blogspot.com/

    BalasHapus
  9. http://anissatuasamu.blogspot.com/

    BalasHapus
  10. http://maximumtune4indo.blogspot.com

    BalasHapus
  11. http://cameralightpainting.blogspot.com/

    BalasHapus
  12. http://devivarella.blogspot.com/

    BalasHapus
  13. http://soniacarls.blogspot.com/

    BalasHapus
  14. susah bener ya bos? Kribo otakku. Maklum pemula bener, bbrp kali nyoba, rusak kabehhhh

    BalasHapus
  15. Happiness is the consequence of personal effort. You fight for it, strive for it, insist upon it, and sometimes even travel around the world looking for it. You have to participate relentlessly in the manifestations of your own blessings. And once you have achieved a state of happiness, you must never become lax about maintaining it. You must make a mighty effort to keep swimming upward into that happiness forever, to stay afloat on top of it.
    - Abnamro Hypotheek Berekenen

    BalasHapus
  16. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  17. penempatan kodenya kacau!

    <B: section class = 'tab' id = 'crosscol' maxwidgets = '1' showaddelement = 'yes'>
    <b: widget id = 'PageList1' = terkunci 'false' title = 'Halaman' type = 'PageList'>
    </ b: widget>
    </ b: section>

    BalasHapus
  18. semoga berguna dan membagikan orang disekitarnya
    my www.sumberindonesia.com
    www.gula77.blogspot.co.id

    BalasHapus
  19. https://bermaincasino.wordpress.com
    https://gosipqq.wordpress.com/
    https://jagadpoker.wordpress.com/
    https://klikpokeronline.blogspot.com/
    https://presidenqq.blogspot.com/
    http://bermain-sicbo.blogspot.com/
    http://bermain-sicbo.blogspot.com/
    http://bermain-baccarat.blogspot.com/
    http://bermain-roulette.blogspot.com/
    https://gula77.wordpress.com/
    http://gula77.blogspot.com/
    https://pkr6.wordpress.com/
    http://sumberindonesia.xyz/
    http://sumberindonesia.com/
    http://1001agenbandar.blogspot.com/
    http://gosipqq.blogspot.com/
    https://medium.com/@pokerterbaik/bermain-gosipqq-agen-poker-dominqq-online-terbaik-dan-terpecaya-uang-asli-indonesia-f36105e72846#.kfr6le7d7
    http://pokervi.blogspot.com/2016/10/gosippokercom-situs-agen-poker-online.html
    http://presidenqq.blogspot.com/
    http://agenkasino.blogspot.com/
    https://manis77.wordpress.com/
    https://jagadmanis.wordpress.com/

    BalasHapus
  20. Thanks bro mampir yak http://www.carahackwifi.net/

    BalasHapus

Translate

Recent Posts

Popular Posts