Catatan di blog: Cara membuat Template

Showing posts with label Cara membuat Template. Show all posts

Membedakan elemen template di blog

Cara membuat Template tidaklah mudah bagi seseorang yang baru mengelutinya yang dimana di dalam template mempunya kode HTML dan CSS terkecuali yang mereka sudah di bidangnya dalam program ini mereka akan mudah mengerjakannya. Ada beberapa cara membuat template yang tidak mesti di acak-acak seperti pada blog saya ini. mungkin next time akan ada artikel yang berhubungan denga cara membuat template dengan cara yang berbeda, saya mau fokus di acak-acak template terlebih dahulu.

Bagimana sobat apakah masih menyimak cara membuat template,saat ini saya sudah menyelesaikan membuat sidebar kanan-kiri perhatikan gambar di bawah ini :

GAMBAR 1 (cara membuat template)

jika anda saat ini masih bingung membuat ukuran elemen silahkan ikuti ukuran di bawah ini :

1. outer-wrapper : width: 1200px

2. header : width:1100px

3. main-wrapper : width: 525px

4. kiri-sidebar-wrapper : width:250px

5. kanan-sidebar-wrapper : width:250px

6. footer saya belum menambahkanya

Ukuran ini akan ada penyesuai hanya saja bisa jadikan anda menjadi patokan, pada post sebelumnya bahwa kode ukuran sangat bermanfaat untuk mengatur posisi yang kita inginkan.

semoga bermanfaat....

kode css di template

Jika anda blogger pemula silahkan ikuti saya terus, belajar secara step by step di sini, mengerjakan ini tidak cukup 1 jam, untuk yang propesional blogger mohon pencerahannya bila ada yang salah :D (saya hanya belajar), saya ingin membuat sidebar kiri dan kanan tetapi saya sangat kesulitan, setelah saya amati ternyata ada bagian yang hilang pada kode CSSnya, saya ingin sekali membuat template dari awal hingga saya bisa menyelesaikannya seperti menambahkan warna gambar dll, yu ah lanjutkan perjalan masih panjang

Membuat ukuran

1. outer-wrapper

2. header-wrapper

3. main-wrapper

4. sidebar-wrapper

5. Footer-wrapper

kemudian silahkan pasang kode ini di bawah ]]></b:skin>

1. outer-wrapper

#outer-wrapper { background:#ff3366; width: 1010px; margin:1 center; padding:10px;

text-align:left; font: $bodyfont;border: 1px solid #00ff00;padding:10px; }

Taruh di atas </style>

2. header-wrapper

#header{width:920px;overflow:hidden;float:left;border: 1px solid #000000;padding:10px; }

#header-wrapper{width:900px; margin: 0 auto 10px; border: 1px solid red padding:10px;}

Taruh di atas </style>

3. main-wrapper

#main-wrapper { width: 600px;float: right; word-wrap: break-word; overflow: hidden;border: 1px solid #0000ff; padding:10px; }

Taruh di atas </style>

4. sidebar-wrapper

#sidebar-wrapper{width:500px dotted #22222;float:left;overflow:hidden border: 1px solid #ff00ff;padding:10px; margin:5px,10px,20px,10px;}

Taruh di atas </style>

5. Footer-wrapper

#footer {width:660px;clear:both;margin:0 auto;padding-top:15px;line-height: 1.6em;

text-transform:uppercase;letter-spacing:.1em;text-align: center;}

Dalam gambar ini posisi tata letaknya :

ukuran yang saya terapkan di atas yang saya warnai tanda merah px , bukan menjadi suatu patokan, silahkan anda ubah sesuai dengan keinginan. part 5 ini pentingnya ketika kita mengetahui suatu ukuran yang pada template anda. jika anda sudah mempunyai blog yang ingin anda ubah silahkan simak pada part ini. karena mencakup dengan warna dll.

jika anda mengunakan template download anda bisa mengatur warna,gambar dan lain-lain. dan merubah bentuk template anda.

pengetahuan anda akan semakin dalam jika anda mengikuti cara dari 1 sampai dengan 5, mengetahui peletakn kode-kode html dan css.

Biasakan dalam berkunjung untuk komentar, saya masih dalam tahap belajar jika di postingan saya ada yang salah. sobat blog bisa acak template anda sambil belajar

Semoga bermanfaat sobat..... Lanjutkan acak-acak template

kode warna template

Hai sobat, pada kesempatan ini saya bahas kembali part 1 s/d 5 sudah beberapa hari ini saya mencari kesempatan agar dapat mengubah, memperbaiki ukuran elemen, margin dan sidebar, karena judul blog ini dengan cara step by step. blog ini juga akan menjadi catatan saya agar saya bisa melakukan bagaimana cara membuat tempalate sendiri, karena saya masih newbie makanya aga lama dan belum secara propesional

1. outer-wrapper

2. header-wrapper
3. main-wrapper
4. sidebar-wrapper
5. footer
Gambar ini menjelaskan kode css

jika anda sudah sampai pada part 5 silahkan anda save dan lihat blog beserta tata letaknya, saat ini saya ingin membuat sidebar kanan dan kiri, anda rubah status pada border anda dan warna agar kita sama-sama mengetahui dimana letaknya, saya sduah menjelaskan untuk mempelajari ukuran elemen di sini,

ketika anda sudah menganti warna di dalam border, maka anda akan semakin mengetahui mana saja yang termasuk dalam kategori kode-kode elemen. contoh halnya seperti ini

Jika anda belum sampai saat ini, coba di pelajari tata letak pada kode css nya dan warna pada setiap kode css nya di bedakan ( masih belum saya selesaikan secara sempurna ), blog di atas adalah contoh ketika saya memulai usaha online strawberry :D

warna di dalam css adalah

1. outer-wrapper: border #00ff00 hijau stabilo, background: #cc6611 coklat

2. header-wrapper : border: 1px solid red

3. main-wrapper : border: 1px solid #0000ff biru

4. sidebar-wrapper : border: 1px solid #6aa84f hijau gelap

5. footer

body saya warnai siver background:#eeeeee

untuk ukuran saya mash mencari yang tepat, silahkan anda ubah sesuai dengan keinginan anda, ubah masing di dalam border,pading,px,warna dll. agar mengetahui posisi-posisi header,outer,main,sidebar dan lain-lain.

pada gambar 1 adalah contoh posisi tata letaknya dan pada gambar 2 adalah contoh yang saya ubah hanya saja belum sesuai dengan keinginan saya sendiri.

Dengan cara membedakan warna maka kita akan mengetahui letak-letaknya. dari setiap ukuran masing-masing elemen.

Semoga bermanfaat sobat blogger....

Membuat template sendiri

Hai sobat ketika anda memulai blog di blogger mungkin anda akan merasakan dengan template anda sendiri antara memuasakan atau tidak memuaskan. itu ada pada diri anda sendiri, ada beberapa yang harus kita mengetahui dari template yaitu kode atau bahasa pemograman css, html javascript dll

Jika anda penguna blogger yang ingin belajar atau mengetahui tata letak bahasa pemograman di template anda maka anda bisa ikuti saya di sini, belajar dengan perlahan dan sedikit ilmu buat anda dan saya pribadi. saya mengerjakannya dengan cara mengenal html,css dan java script, tidak dengan program yang lainnya

beberapa cara anda bisa merubah template

1. Belajar dengan bahasa pemograman
2. Mengunakan Adobe Dreamwever CS3
3. Mengunakan Artisteer 4
4. photoshop
5. dan lain-lain

Pada artikel ini saya ingin belajar dari bahasa pemograman terlebih dahulu, karena blog ini saya akan memberikan secara step by step dan langsung bisa di lihat di gambar. jika anda memang dalam posisi di blog saya,
Bahasa pemograman yang saya sedang pelajari entah yang mana karena pada dasarnya bahasa pemograman hanya kode memerintahkan bahasa agar dapat tercetak menjadi yang kita inginkan, mungkin jika saya paham dengan bahasa pemograman saya akan lebih detail untuk menjelaskan kembali.

Silahkan anda bisa ikuti saya untuk memulai pada tahap 1 di sini

Cara membuat sidebar dan header

Pada posting (Cara membuat Template Part 2) sebelumnya, saya membahas bagaimana kita membangun sebuah template dan sudah di coba melalui Template dan berhasil dalam keadaan kosong, jika anda masih jenuh karena kapan membuatnya dan bosan dengan artikel maka saatnya ikuti Langkah-langkahnya Berikut :

< Buatlah 2 blog >

< 1 blog anda isi dengan artikel >

</ 1 blog berikutnya Anda poloskan atau tidak ada posting di dalamnya >

untuk mendukung pembuatan template karena sangat di perlukan untuk memasang posting blog dan sidebarnya

GAMBAR 1 (membuat header)

ini adalah gambar yang dimana pada sebelumnya kita telah mencopykan di dalamnya kode HTML, untuk melihat tata letaknya seperti ini

GAMBAR 2 (membuat header)

Selanjut pada langkah ini silahkan anda copykan kode ini

1. outer-wrapper
2. header-wrapper
3. main-wrapper
4. sidebar-wrapper
5. footer

Selanjut pada langkah ini silahkan anda copykan kode ini

1. outer-wrapper
<div id='outer-wrapper'> atas <b:section class='navbar' atau di bawah <body>

2. header-wrapper

<b:section class='header' id='header' maxwidgets='1'>

<b:widget id='Header1' locked='true' title='Nama judul blog (Header)' type='Header'></b:widget>

</b:section>

<b:section class='header' id='header-ads' maxwidgets='0'/>

</header>

Tepat di bawah <body>
langkah berikutnya untuk mengunci silahkan copy kode ini </div> </div> di letakan di atas </body>

3. main-wrapper

<div id = 'content-wrapper'>
<div id = 'main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
  </div>
di atas </div>

4. sidebar –wrapper

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='nurhajid' type='HTML'/>
<b:widget id='HTML5' locked='false' title='y renza' type='HTML'/>
</b:section>
  </div>
<div class='clear'> </div>
</div>

pasang kode tersebut di bawah ''main-wrapper''

5. Footer-wrapper

<footer id='footer-wrapper'>
<b:section class='footer' id='footer-1' showaddelement='no'/>
<b:section class='footer' id='footer-2' showaddelement='no'/>
</footer>

lalu save template, maka hasilnya akan seperti ini (lihat tata letak anda)

tata letaknya seperti di atas maka silahkan anda save jika ada penempatan yang salah, anda bisa meng cut nya dan silahkan anda sesuaikan dengan keinginan anda. pada bagian ini sangat penting untuk posisi dan tata letaknya, jika penempatan salah maka apa yang kita inginkan, tidak akan dapat merubah apa-apa

silahkan komentar anda setelah anda mengetahui

Tata letak header

setelah kita mengetahui isi dan tata letak pada sebuah template maka selanjutnya kita mengunakan Notepad Start > All program > Accessories > Notepad > ok
lalu pastekan kedalam notepad, ikuti langkah berikut file > Save as > file name (......xml ) > save as type (All file) > encoding (UTF-8) > ok

GAMBAR 1 (membuat template)

setelah anda save notepad tersebut lalu cari dimana letak anda menyimpan buka maka hasilnya akan seperti ini :

GAMBAR 2 (membuat template)

itu adalah bagian dari Template yang kosong, jika di edit template pada blogger maka akan terjadi eror karena itu hanya baru bagian yang kosong saja belum ada perintah atau memanggil, bagaimana caranya agar kita membuat template yang sedang kita mau ubah adalah bagaimana kita membangun sebuah template sesuai dengan keinginan kita. seperti Gambar di bawah ini adalah

GAMBAR 3 (Cara membuat template)

Template yang ingin kita gunakan. pada dasarnya template memilki lima bagian, yang bagian tersebut membentuk blog anda dengan berbagai gaya bagian kelima tersebut adalah

1. Header
2. Sidebar
3. Mainbar
4. Footbar
5. Footer

1. Header adalah bagian pertama dari website Anda yang pengunjung lihat. Maka dari itu header website
1. Dapat memperkenalkan personality unik dari bisnis Anda. Tambahkan logo dan nama dari bisnis Anda.
2. Tambahkan juga tagline atau slogan dan beberapa summary yang menjelaskan apa yang bisnis Anda tawarkan. Sehingga dengan melihat headernya saja pengunjung menjadi tahu.
3. Informasikan mengenai alamat atau nomor handphone bisnis Anda
Informasi di header, dapat diulang pada bagian footer dan dapat ditambahkan dengan bagian lain seperti link menuju social media.
Di bawah ini adalah contoh header.

GAMBAR 4 (Cara membuat Tempalte)

Di dalam Header terdapat

1. Judul Blog
2. Deskripsi Blog
3. Menambahkan Gambar pada komputer anda dan dapat menyeting langsung di dalamnya

TATA LETAK HEADER DI BLOG

Di dalam sebuah blog terdapat kode HTML dan CSS, di bawah ini adalah Kode HTML Header :

<header> sebagai awalan tag dan di akhiri dengan </header>, ,

pada sebuah Tag <header> s/d </header> adalah TATA LETAK HEADER, Saat ni saya akan menghapusnya Agar bisa membedakan posisi tata letak, berikut gambar yang saya mau hapus:

GAMBAR 5 (cara membuat template)

Setelah saya menghapus TATA LETAK HEADER, maka hasilnya seperti di bawah ini :

GAMBAR 6 (cara membuat template)

Peletakan TATA LETAK HEADER ada di bawah </head>, jika anda terus mengamati maka anda akan sama dengan apa yang saya kerjakan di atas.

LETAK POSISI KODE HEADER

kode header di dalam Tag <header> s/d </header> adalah :

</div> <b:include name='description'/></div> </b:if><b:else/>  <div id='header-inner'><a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <b:if cond='data:imagePlacement == quot;BEFORE_DESCRIPTION"'> <b:include name='description'/> </b:if></div> </b:if> <b:else/> <!--No header image --! <div id='header-inner'> <div class='titlewrapper'><h1 class='title'><b:include name='title'/ </h1></div> <b:include name='description'/> </div></b:if> </b:includable> <b:includable id='description'><div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div></b:includable> <b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='ata:blog.homepageUrl'><data:title/></a> </b:if></b:includable> </b:widget> </b:section> </div> </div> <div class='header-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> </header>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul blog anda (Header)' type='Header'>
<b:includable id='main'>

GAMBAR 7 (cara membuat template)

Kode Html tersebut yang menunjukan Judul blog, diskripsi dll Letak di dalam header, jika saat ini anda masih mengamati dengan cara step bay step ini akan bisa memahami dimana tata letak ini, posting seblumnya pun saya sudah share mengenai tata letak Html yang dimana kita harus isi di dalmnya, tata letak yang salah akan terjadinya eror.

mengenal blog sangat lama tetapi saya baru memahami bahwa di dalam blog pun mendapatkan manfaatnya, bisa di isi dengan artikel atau catatan, pembuat blog bisnis dan lainnya. jika anda seorang pemula ikuti terus, part 3 ini saya menjelaskan suatu contoh pada note pad, anda pun bisa melihat elemen blog lain dengan cara buka blog yang anda simak lalu silahkan anda klik kanan pada mouse anda pilih view page source.
silahkan copy dan masukan kedalam note pad kosong, lalu ikuti caranya di atas, part ini kadang berguna untuk melihat isi dan cara penempatan dan lain-lainnya, saya menguji pada artikel acak-acak template dan ternyata berhasil.

Silahkan isi komentar anda setelah berkunjung

kode Html di Blog

Memahami Template kode Html di Blog: setelah anda sudah mengetahui dari ujung kepala sampai dengan ujung kaki maka, kita harus mengetahuinya bila kita menghapus pada bagian tersebut (masih pada posisi edit HTML) dengan mengunakan CTRL A, Lalu hapus semua seperti di bawah ini

Biarkan saja dalam keadaan seperti lalu anda copas yang ada di bawah ini :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.yrenza.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 == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>

<b:skin><![CDATA[

body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></b:skin>

</head>
<body>

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

</body>
</html>

Silahkan Anda save Maka akan nampak seperti di bawah ini :

Struktur tata letak atau pengenalan HTML di dalam template

1. Xml dan Html adalah Tag utama yang di dalam template.
2. <body> sampai dengan </body> adalah Tubuh tag, semua kode anda harus berada di antara dua tag body.
3. <div id = 'outer-wrapper'> l <div id = 'wrap2'> (pembuka awalan tag) dan </ div> </ div> <! - End outer-wrapper -> (penutup tag) adalah div-tag untuk dua bungkus, bungkus disebut "outer-wrapper" dan pembungkus yang disebut "wrap2". Dalam CSS Anda dapat menentukan font, warna, dan styling lainnya untuk pembungkus tersebut. Kami akan melihat ke dalam CSS kemudian dalam tutorial ini.
4. <div id = 'header-wrapper'> seperti :
<b: section class = 'header' id = 'header' maxwidgets = '1' showaddelement = 'no'>
<b: widget id = 'Header1' locked = judul 'benar' = 'Second Sidebar (Header)' type = 'header' /> </ b: section>
yang akan di tutup dengan </ div> adalah kode tersebut adalah mengandung header
5. <div id = 'content-wrapper'>
<div id = 'main-wrapper'>
<b: section class = 'main' id = showaddelement 'main' = 'no'>
<b: widget id = 'Blog1' locked = judul 'benar' = 'Blog Posts' type = 'Blog' />
</ b: section></ div>

<div id = 'sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArsip1' locked='false' title='Blog arsip' type='Blogarsip'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section></div><div class='clear'> </div></div>

kode <div id = 'header-wrapper'> , kode tersebut juga ada 2 bungkus yaitu "main-wrapper" dan "sidebar-wrapper" Adalah isi yang di dalamnya terdapat posting blog dan sidebar

A. <b: section class = 'main' id = showaddelement 'main' = 'no'>
<b: widget id = 'Blog1' locked = judul 'benar' = 'Blog Posts' type = 'Blog' />
</ b: section>

Di dalam "main-wrapper" (pada nomor 5) kita menemukan main-section dengan Blog-widget . Widget ini berisi posting Anda.(pada nomor 5), kode ini (no 6) adalah isi dari posting anda di dalam widget.

B. Di dalam <div id = 'sidebar-wrapper'> kita menemukan <b:section class='sidebar' id='sidebar' preferred='yes'> dengan Arsip-widget <b:widget id='BlogArsip1' locked='false' title='Blog arsip' type='Blogarsip'/> dan Profil-widget<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>.

6. <b:section class='footer' id='footer'/>
</div></div></div>
</body>

kode tersebut adalah footer.

itu adalah tata letak yang ada di dalam sebuah template, saya pergunakan step by step agar saya juga bisa, karena saya ambil ini dari yang lain, saya gabungkan menjadi satu
Amati terus kepart berikutnya. struktuk pada blog aga rumit yang di dalamnya terdapat tulang bahan pengerak,daging sebagai pembungkus,otak sebagai menjalankanya. bagaimana pun bila kita berusaha untuk belajar pasti bisa, saat ini masih dalam penganguran yang belum ada juga pangilan saya sibukkan dengan membuat template. jika anda seorang blog pemula silahkan ikuti, jika anda seorang blog propesional silahkan anda share jika saya ada kesalahan.

Pada bagian part 2 ini untuk di perhatikan, agar part 2 ini akan ada di part-part selanjutnya, jika anda ingin bertanya silahkan di komentar

Cara Membuat Template

Selamat datang sobat bloging

pada kesempatan ini saya ingin membahas mengenai Blog Template untuk blogger, karena rasa penasaran saya ingin membuat sendiri dan rasa ingin tahu pun menjadi setelah saya lihat di blog lain, yah walaupun tidak ada demonya, saya membuat 2 blog untuk mempelajarinya, dimana pada satu blog sudah saya isi dengan artikel yang asal agar saya bisa membedakanya, ok saatnya kita belajar dan mempelajarinya, jika anda sudah mengetahui blog maka akan langsung ketempat, Masuk pada bagian Template dan Sesuaikan
jika Anda belum mengetahui cara membuat blog dan manfaatnya silahkan baca dan caranya di sini.Perhatikan pada gambar berikut :

GAMBAR 1 (Cara membuat template)

lalu coba kembali dengan menganti template yang lainnya, di dalam tersebut hanya sebagian dasarnya saja, jika anda ganti-ganti maka akan berbeda contoh seperti pada gambar 2 dan perhatikan juga gambar 1

GAMBAR 2 (Cara membuat template)

Lalu anda klik pada bagian garis bawah yang ada tanda panah untuk turun naik seperti gambar di bawah ini:

GAMBAR 3 (Cara membuat template)

Ok itu adalah template sederhana yang ada pada blogger, saat ini kita bahas jeroan template Masuk kedalam HTML anda copy berikut ini <?xml version=”1.0” encoding=”UTF-8” ?> dan cari dengan mengunakan CTRL F Paste kan pada kolomnya lalu enter, perhatikan yang sudah saya lingkari,Hasilnya akan seperti ini:

GAMBAR 4 (Cara membuat template)

perhatikan yang saya lingkari pada bagian tersebut.Lalu cari kembali kode berikut </HTML> pastekan pada CTRL F, Maka hasilnya Akan seperti di bawah ini :

GAMBAR 5 (Cara membuat template)

Template yang di maksud adalah bagian Template di bawah ini, Kode pada gambar 5 adalah kode HTML, CSS dan lain-lain

GAMBAR 6 (Cara membuat Template)

Bagaimana untuk merancang Template di blogger, dari sebagian orang pasti ingin mengetahuinya bagaimana caranya agar membuat template sendiri, contohnya saya sendiri yang ingin membuat template sendiri, dari sebuah template download saya terkadang tidak puas, dari sini saya ingin sekali membuat template sendiri sebelum anda melangkah lebih jauh alangkah lebih baik jika anda mempersiapkan 2 blog agar bisa membedakannya,

(tidak ada yang tidak bisa bila kita berusaha)

Subscribe to: Posts ( Atom )

Pages

Subscribe To