Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer

Hay sobat blogger kali ini saya akan menuliskan Tutorial cara membuat Template blogger sendiri, hmm sebelumnya kalian pasti mendapatkan template blogger dari situs situs tertentu seperti

http://zoomtemplate.com
http://templateblogger4u.com
http://btemplates.com

Oke namun apakah pernah terpikir oleh kita untuk membuat Template blog sendiri? yap jawabannya jarang, kebanyakan orang lebih memilih untuk menggunakan template blog yang sudah tersedia di internet dan enggan mempelajari cara membuat template blogger yang bagus, namun disini saya akan membahas cara untuk membuat template blogger dengan menggunakan ARTISTEER 3.0

1. Pertama tama download ARTISTEER dari SINI
2. Okey jika sudah Instal ARTISTEERnya dan gunakan keygen yang tersedia,
3. Langkah awal adalah Memilih Proyek yang akan dikerjakan, Pilihlah blogger

4. Jika sudah dipilih maka akan ada template random yang muncul pertama kali ditampilan, Awal awal kita pilih dulu Template secara RANDOM atau ACAK dengan cara menekan tombol "Suggest design" yang ada di tab "Ideas".


5. Jika sudah menentukan Perkiraan Template yang ingin dibuat kita akan lanjut ke pengeditan lainnya, sekarang saya akan membahas Fungsi toolbar yang penting di setiap TAB

FUNGSI FUNGSI TOOLBAR PENTING                                                                                                                
IDEAS : 

1. Suggest Colors : Jika anda kebingungan menentukan Tema Warna pada design anda, gunakan ini. Hasilnya tema template akan menjadi lebih berwarna. :D

2. Styles : Toolbar ini digunakan untuk memberikan arahan Suggest pada setiap toolbar Suggest, ada pilihan pilihannya disini

3. Tool Bar Suggest Lainnya




1.  Design Layout :  Toolbar ini sangat penting digunakan untuk menentukan Struktur Template yang akan dibuat, apakah Polos, Dengan Menubar, atau dengan Header dan menu bar

2. Sheet Width :  Dengan toolbar ini anda akan dapat mengatur lebar dari Struktur halam yang dibuat, jika anda menginkan FULL MONITOR pilihlah 100%

3. Columns :  Toolbar ini digunakan untuk mengatur Sidebar atau Column dari template blogger yang ingin anda buat misalkan ingin Template dengan 3 Column maka pilih 3 Columns. Dan hasilnya akan seperti ini






1. Background : terdiri dari Fill Color dan Gradient, untuk memasang simple Background pada template

2. Texture Image :  Memasang background yang terdapat pada Halaman yang tersedia atau bahkan dari File kita sendiri dengan mengklik "FROM FILE"

3.  Light Effect : Toolbar yang membuat sebuah background menjadi lebih gelap atau gabungan 1 background dengan background lainnya


1. Design Sheet : Pilihlah bentuk halaman yang ingin digunakan, apakah Kotak, atau Oval pada setiap sudutnya

2. Margin :  Jika anda ingin membuat space antara Sheet dengan Menubar atau Header seperti ini :



3. Fill : Toolbar ini digunakan


sumber : http://yasiranak252.blogspot.com/2011/06/cara-membuat-template-blogger-sendiri.html

Blogger adalah salah satu perusahaan miliknya Google yang menyediakan fasilitas untuk blogging secara gratis untuk siapa saja, dan jumlah blog yang ingin dibuat pun juga tidak dibatasi. Blogger juga menyediakan beberapa template bawaan yang siap untuk dipakai, namun karena tampilannya yang “terlalu” sederhana membuat orang-orang yang membuat blog di blogger mencari template dari pihak ketiga untuk kemudian mereka pasang diblog mereka. Template blog yang tersedia dari pihak ketiga juga banyak, dan beraneka ragam. Beberapa template mungkin bisa cocok dengan kita, namun kadang kita juga memerlukan edit-edit template (costumize template) terhadap template tersebut. Meskipun bukan seorang master yang pakar dalam html, css, maupun coding-coding dalam template, pada postingan kali ini, bloggerafif ingin berbagi tips trik edit template blogspot.

Tips Trik Edit Template Blogspot

1. Backup Template
Setiap kali ingin melakukan edit template blogger, usahakan untuk melakukan backup template. Backup ini penting sebagai antisipasi jika ketika melakukan edit template ternyata terjadi error dan anda kebingungan untuk memperbaiki template tersebut. Solusi yang tercepat adalah dengan mengembalikan template hasil editan tersebut ke template sebelumnya.

2. Gunakan Tools Bantuan
Notepad++
Tools ini sangat bermanfaat sekali bagi anda yang ingin mengedit atau bahkan ingin membuat template blogger sendiri. Bloggerafif sangat senang dan nyaman menggunakan ini. Mengapa? Karena tools ini akan memberitahukan kepada kita untuk setiap tag kode html yang kita buat sudah benar atau belum. Biasanya akan terlihat sekali ketika kita hendak membuat tag pembuka kode html. Kode yang benar akan terblock dengan warna ungu. Jika kode tag yang anda buat belum terblock warna ungu, berarti anda perlu menambahkan tag penutup. Seperti ini



Tertarik menggunakan tools ini, silahkan download di mediafire.

Pixie
Ini tools portable yang juga sangat membantu kita dalam edit template blogger, terutama jika ingin mengganti warna-warna pada blogger. Cara penggunaannya juga simple dan sederhana. Cukup anda geser cursor mouse pada lokasi yang diinginkan, maka secara otomatis tools ini akan memberikan kode html warna sesuai dengan lokasi yang sudah ditentukan. Download tools pixie



Web Developer Addons
Selain tools tadi juga ada addons firefox yang bisa membantu kita dalam edit template bloggger. Bloggerafif sering menggunakan tools web developer ini untuk mengetahui letak posisi kode html atau css yang mau kita edit. Caranya juga cukup mudah. Anda tinggal tekan Ctr+Shift+Y kemudian posisikan cursor mouse pada bagian template yang akan kita edit, maka web developer akan memberikan rincian kode css yang dari template yang anda klik tadi. Seperti ini.

Setelah itu anda tinggal cari kode tersebut, di bagian edit template blogger. Lebih mudah, dan cepat.

3. Pahami kode CSS dan tag HTML blogger
Banyak buku ataupun guide tentang CSS dan HTML. Anda tinggal mencarinya dan pelajari. Namun untuk tag html, blogger menggunakan format xml. Kenali tag-tag tersebut. Yang biasa terjadi adalah blogger tidak menyadari adanya tag-tag khusus yang dimiliki blogger ini. Tag khusus ini diantaranya seperti :

<b:section> .... </b:section>
<b:widget>....</b:widget>
<b:includable>....<b:includable>

Pastikan jika anda melakukan edit tag-tag tersebut, untuk selalu gunakan juga tag penutupnya. Bisanya jika anda lupa memberi tag penutup atau tagnya kurang lengkap, maka akan muncul pesan error di blogger.

4. Kenali Setiap Error Yang Muncul
Error yang muncul ketika melakukan edit template biasanya hanya seputar kesalahan atau lupa memberikan dengan benar tag-tag penutup (terdapat karakter slash (/) di dalam tag penutup). Berikut ini contoh rincian yang bisa dijadikan acuan

<div> ... </div>
<h2> ... </h2>
<b:loop> ... </b:loop>
<b:if> ... </b:if>
<span> ... </span>
<img src.... />
<a>.... </a>
<p> .... </p>

Selain itu jika muncul pesan error Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. Bla...bla..bla...
Biasanya karena ada element yang tidak bisa diparse oleh blogger. Element ini seperti karakater “&”. Untuk itu anda harus mengganti “&” dengan “&”. Jika kode terlalu banyak untuk diganti, bisa juga anda gunakan tools parse html blogger.


5. Jangan takut mencoba
Belajar edit template adalah penting, untuk membuat template seperti yang kita inginkan. Belajar dimulai dengan proses uji coba dan trial error adalah hal yang biasa terjadi. Seiring dengan semakin sering anda melakukan edit template blogger, anda akan secara otomatis semakin mahir dalam memahami kode-kode html atau css blogger. Jadi jangan pernah takut untuk mencoba.

6. Edit Secara Online atau Offline
Pilihan untuk edit template bisa anda lakukan dengan online ataupu offline. Jika ingin online konsekuensinya anda harus terkoneksi dengan jaringan internet secara terus menerus. Untuk beberapa orang mungkin tidak cocok dengan cara edit template dengan cara online sehingga mereka mencari solusi untuk edit template secara offline (tanpa koneksi internet). Sebenarnya ini juga tergantung dari kebutuhan saja, jika anda editnya tidak besar-besaran, saya rasa cukup edit dengan online tanpa harus offline akan lebih cepat. Di lain waktu bloggerafif akan posting trik edit template blogger secara offline.






sumber:   http://www.bloggerafif.com/2012/02/tips-trik-edit-template-blogspot.html

Terkadang para blogger melakukan edit template di bagian css ini, baik itu menghapus template ataupun menambah dan juga memodifikasi kode css yang ada. Proses edit dan modifikasi css ini sangat sering meninggalkan kode css yang sebenarnya tidak terpakai di dalam template. Padahal ketika proses rendering sebuah halaman blog, browser akan membaca page yang ada tersebut berdasarkan kode css yang tersedia. Jika kode css yang tersedia ternyata terdapat css yang tidak terpakai (baca: css sampah) yang terlalu banyak, maka bisa mengakibatkan proses loading blog menjadi lambat. Salah satu solusinya adalah dengan menghilangkan kode css yang tidak terpakai ini.

Untuk menghapus dan menghilangkan kode css yang tidak terpakai ini, kita tak perlu satu persatu mengamati dan mencocokkan setiap kode css yang tersedia, ini sangat membutuhkan waktu dan membosankan sekali. Tak perlu kita lakukan itu. Ada sebuah tools yang bisa kita pakai untuk membantu mengatasi permasalahan kita ini untuk mempercepat loading blog dengan cara menghapus css yang terpakai, yaitu dengan menggunakan Google Chrome.

Cara Mempercepat Loading Blog Dengan Menghapus CSS yang tidak terpakai

Berikut ini tips trick blogger untuk mempercepat loading blog dengan menghapus css yang tidak terpakai.
1. Buka halaman blog anda dengan menggunakan Google Chrome.
2. Pada pojok kanan atas tekan simbol kunci, pilih Tools dan tekan Developer Tools. Atau jika ingin yang lebih praktis dan cepat, bisa juga dengan shortcut keyboard dengan menekan kombinasi tombol ctrl+shift+I.
3. Pada bagian select audit to run. Hilangkan centang pada Network Utilization. Dan pastikan centang juga pada bagian Web Page Performance dan pilih Audit Present State. Setelah selesai klik Run.
4. Hasilnya silahkan ditunggu. Anda akan diberikan list css yang tidak terpakai pada option Remove unused CSS rules.



5. Selesai, anda tinggal edit lagi css anda dan hapus css yang tidak terpakai berdasarkan suggest dari google chrome tersebut.

sumber:   http://www.bloggerafif.com/2012/04/cara-mempercepat-loading-blog.html

• Login ke Blog kamu (Blogger/Wordpress)
• Pilih Tata Letak (Blogger) & pilih Dasbor (WordPress)
  
• Klik Elemen Halaman (Blogger) & pilih Tampilan (Wp)
  
• Klik Tambah Gadget (Blogger) & pilih Widget (Wp)
  
• Pilih Menu HTML/JavaScript(Blogger) & pilih Teks (Wp)
  Copy script di bawah ini dan pastekan ke halaman conten HTML/JavaScript atau Teks pada wordpress anda:

<divstyle="overflow:scroll;width:150px;height:180px;">
<ul>
<li><ahref="http://ilmukamu.wordpress.com/"target="_blank">Ilmu Kamu</a></li>
<li><ahref="http://vibi.co.cc/"target="_blank">Visi Bunda</a></li>
</ul>
</div>

Oke deh sob, langsung saja ya biar tidak OOT, sesuai dengan judul diatas saya akan share bagaimana cara Membuat scroll pada widget blog (untuk gambaran sebuah scroll kira-kira seperti gambar disamping), fungsi scroll pada widget ini adalah untuk membuat tampilan widget anda menjadi lebih pendek, karena widget blog anda pendek maka halaman blog anda menjadi hemat tempat, rapi dan tidak membutuhkan space yang luas. Ada 3 cara dalam membuat scroll pada widget blog ini, yang intinya adalah menggunakan perintah kode overflow. Jika anda menambahkan kode overflow ini ke dalam widget anda, maka ini akan membentuk sebuah scroll. Oke sobat anda bisa coba dengan menggunakan notepad. Berikut langkah-langkah cara membuat scroll widget pada blog yang saya maksudkan.

Cara Pertama
1. Silahkan login ke dalam akun Blogger anda, masuk ke Design, Page Element. Kemudian tambahkan widget baru dengan klik add a gadget, lalu pilih add html/javascript

2. Silahkan beri judul (tidak diberi judul juga tidak masalah) dan pada pada bagian content letakkan kode seperti ini
3. Kemudian silahkan anda letakkan kode widget diantara kode div diatas (tanda titik titik panjang)

Cara Kedua
1. Silahkan login ke dalam akun Blogger anda, masuk ke Design, kemudia masuk ke Edit Html. Lalu cari nama widget atau nomor HTML yang hendak anda jadikan scroll. Dalam hal ini paling mudah anda memberikan Judul widget anda, tujuannya agar mudah dicari pada halaman Edit HTML di template anda. Saya contohkan di sini adalah widget default Archive blog.
2. Tambakahan kode CSS berikut ini diatas ]]></b:skin>

3. Kode yang berwarna merah harus sama dengan nama/judul widget yang hendak anda jadikan scroll.

Cara Ketiga
1. Silahkan masuk pada Edit html template seperti cara kedua, silahkan anda cari widget yang hendak anda berikan scroll. Lalu pada bagian bawah dari kode widget tersebut cari kode div class='widget-content'

2. Tambahkan kode style='overflow:auto; height:230px' disamping kode div class='widget-content' Sehingga menjadi
<div class='widget-content' style='overflow:auto; height:230px'>

Nah itulah 3 cara paling mudah dan sederhana bagaimana cara membuat scroll pada widget blog anda, silahkan anda pilih menurut anda cara yang paling mudah dan biasa anda lakukan. Selamat mencoba...keep blogging. &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;

Cara Membuat Link Bergoyang cukup sederhana, jangan ragu dan sedih ketika anda sebelumnya pusing tidak mengetahui triknya.

Langkah Buat Link Goyang :

1. Login ke Blog sobat
2. Pada Dasbor pilih >>Rancangan --> Kemudian EDIT HTML
3. Cari kode </head> dan Letakan Kode Script dibawah ini tepat Diatas Kode </head>

4. Simpan template dan lihat hasilnya.

Artikel Cinta fido tentang Cara Membuat Link Bergoyang