Catatan di blog: July 2008

Membuat Scroll pada label

Membuat Sroll pada label di blogger, silahkan anda yang sedang membutuhkan agar di ikuti langkah-langkanya sesuai dengan step by step :

Tahap pertama :

pada bagian edit HTML silahkan anda gunakan ctrl-f, pastekan kode berikut di dalamnya :

seperti gambar di bawah ini:

copykan kode ini <div style='overflow:auto; width:ancho; height:200px;'> dan pastekan tepat di bawah kode di atas.

Tahap kedua:

Setelah anda selesaikan tahap pertama selanjutnya anda mencari kode </b:includable> dan tambahkan kode ini </div> di bawahnya. jika anda sudah meyelesaikan semua silahkan anda save pada template lihat hasilnya

semoga bermanfaat

Scroll di dalam posting

Penasaran pada Template yang ada di nurhajid.blogspot.com yah :D. seperti membuat scroll, jika anda membuat artikel terlalu panjang maka silahkan anda bisa mencobanya dengan cara copy kan kode ini :

masukan artikel anda di sini

</div>

Masukan kedalam HTML bukan COMPOSE seperti yang saya lingkari di bawah ini :

Silahkan anda rubah yang saya beri tanda merah sesuai dengan kebutuhan anda, agar blog anda semakin menarik yang saya warnai hijau anda hapus ketika di dalam html, dan kembali dengan compose maka hasil yang akan terlihat adalah kotak berwarna abu-abu, silahkan anda masukan artikel anda di dalamnya. setelah anda menyelesaikan pada bagian tersebut anda save, silahkan lihat hasilnya dengan cara pratinjau di entri anda. jika sudah berhasil silahkan share kepada teman dan kerabat anda

Semoga bermanfaat

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