contact-forms-for-blogger

1. Kontactr

2. Freecontactform

3. Allform

4. Wufoo

5. freecontactforms

6. Wrasap

7. Respon-o-matic

8. Odiowork

Totorial Fatih

fatih

Menambah Elemen di Template Blogger

Template standar Blogger hanya menyediakan 1 Header (kolom judul) dan 1 Main (kolom posting), karena kondisi tersebut telah diset default. Hal ini seringkali menjadi keluhan karena kita tidak bisa menempatkan beberapa komponen seperti Iklan, banner, script atau lain-lainnya. Untuk memodifikasi template Blogger bagi para ahli tentunya menjadi hal mudah, tetapi tidak bagi pemula seperti saya.

Setelah blogwalking, saya menemukan cara yang saya anggap simple dan sederhana serta mampu dipahami bagi pemula seperti saya.

Berikut langkah-langkahnya:

1. login ke Blogger.
2. Tata letak > Edit HTML.
3. Centang Expand Template Widget
4. Untuk menambah Elemen Header/kolom judul.

Cari kode di bawah ini atau yang mirip denganya:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='hanya catatan kecil (Header)' type='Header'>
<b:includable id='main'>

Ganti nilai :
maxwidgets='2'
showaddelement='yes'
locked='false'

5. Untuk menambah Elemen Main / posting.

Cari kode di bawah ini atau yang mirip denganya:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>

Ganti nilai :
showaddelement='yes'
locked='false'

6. Untuk menambah Elemen dibawah Navigasi.

Cari kode di bawah ini atau yang mirip denganya:
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Ganti nilai :
showaddelement='yes'

7. Klik pratinjau untuk memastikan tidak ada kesalahan dalam penulisan kode.
8. Jika sudah benar, simpan.
9. Sekarang klik Tab Elemen Halaman dan Elemen Template anda kira-kira akan seperti gambar diatas.
10. Rangkaian kegiatan diatas telah saya coba di template ini dan tidak ada kendala. Namun kalau ada yang keliru tolong dikritik ya.

B-gehe

Layout Blogger

Layout

Menyimpan File di Weebly

weebly.com

smashingmagazine

http://www.smashingmagazine.com

Ragam blockquote

he blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?

Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.

Color and Borders

Applying a color change to the text and adding a border (along with some additional margins and padding) can really make the blockquote stand out, yet is subtle enough to retain a hint of sophistication.

blockquote {
margin: 1em 3em;
color: #999;
border-left: 2px solid #999;
padding-left: 1em; }

Background Colors

If you’d like something a little more obvious than just a text color change, you might considering altering your background color instead. This causes the blockquote to “pop,” making it immediately more noticeable. When applying background colors, be sure to account for any tags inside that might alter your margins (such as paragraph tags).

Six Ways

pullquote

CSS :

.pullquote {
padding: 10px;
float: right;
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #694e1c;
border-bottom-color: #694e1c;
font-size: 16px;
text-align: center;
line-height: 36px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: normal;
}

HTML :

<h4 class="pullquote">put the text for the pullquote here</h4>



put the text for the pullquote here

Pullquote

Favicon

Di bawah kode <head>

http://lurl gambar kamu di sini' rel='shortcut icon' type='image/x-icon'/>

Membuat banner Tukar link

Bagi para blogger tukar link merupakan hal yang tidak asing lagi,apalagi bagi blogger yang profesional.Nah Tukar link bisa menggunakan banner.Cara membuat banner tukar link biasa di jumpai di blog lain.Tapi secara khusus saya mau posting lagi tentang cara membuat banner tukar link.Dalam pembuatan banner ini anda tidak perlu membuat nya sendiri karena kita akan membuat banner ini dengan online.


Untuk pembuatan banner tukar link silahkan ikuti petunjuk di bawah ini





Yang pertama anda lakukan dalam membuat banner ini,cukup dengan mengunjungi http://cooltext.com/.dan kemudian silahkan pilih banner yang telah tersedia.Yang biasa di gunakan oleh para blogger adalah banner yang kecil,dikarenakan penghematan ruang di blog.






Klik banner kecil tersebut lalu mulai kita setting baik teks dan background yang akan digunakan dalam banner tukar link









Setelah selesai setting teks dan warna yang akan digunakan,and bisa langsung mendapatkan banneranda dengan mengklik render button pada bagian paling bawah






Setelah itu tinggal simpan banner kamu yang telah jadi,lalu hosting di root kamu atau hosting gratisan.

Hasil Try :

blockquote

HTML blockquote

apa saja

.post blockquote{ margin:1em 20px;
padding-left:30px;
padding-right:5px; background:url("http://i40.tinypic.com/2iaxx85.png") no-repeat 0 .0em;
color:#555;font-family:Georgia, “Times New Roman”, Times, serif;border-left:3px dotted #999}
.post blockquote p{ margin:.75em 0;
padding-right:5px; padding-left:5px;
border-left:2px dotted #000;
background:#F7F7F7}

Sumber lain : Catalog | Sitepoint | w3 | Microformat |

HTML tag

Meluncur

Cara Membuat Template Blogger

Gimana si Bong cara membuat template blogger / blogspot sendiri? Pertanyaan itu sering mampir. Cara membuat template blog, jujur, binun aku njawabnya kekekekeke soale bikinnya ga sistematis, ya pertama belajar tentunya edit template minima yang udah ada (anggep aja sebagai kerangka, toh itu ga ada designnya, cuman kerangka kode aja) . Tentu aja bikin template dengan sistem coba coba ngabisin waktu dan banyak errornya *ekting mewek* . Lalu lama lama menjadi terseteruktur. Langkah membuat design template blogger sendiri menurut diriku ya kek gini loh

Ngitung Ukuran
Seperti halnya mau merancang baju, kita pan musti tau ukurannya dulu. Tentukan dulu template nya mau dua kolom (main post dan satu sidebar) atau tiga kolom (main post dan dua sidebar). Seperti ini screenshootnya itung itunganku hehehehe



Nggambar Design
Bagian ini menurut diriku yang susah.Yaitu design. Silahkan dipikirkan masing masing pengen design kaya apa. Design meliputi, pemilihan warna (jangan sampe tabrakan tur ga metcing) , layout, gambar, element tambahan (menu, search, feed). Design kemudian di gambar sesuai dengan ukuran yang tadi uda ditentukan. Ini pas diriku nggambar designnya pake inkscape. Kalau buat template yang banyak menggunakan gambar dan tentunya pengen unik ya musti nggambar design dulu, kecuali buat cowok yang lebih banyak main garis ama warna aja. Hehe..


Partisi Design
Maksude apa Bong? Kok kaya harddisk aja dipartisi. Maksudnya memisah misah gambar sesuai ukuran masing masing elemen. Jadi gambar buat background header, dipisah, buat footer dipisah, buat sidebar juga. Kalo pake photoshop ada tools yaitu slice untuk mengiris ngiris gambar sesuai ukuran design. Kalo pake inkscape, ya tinggal di grouping aja di export jadi format png.

Upload Gambar
Setelah jadi gambar untuk backrgoundnya, silahkan diupload ke imagehosting masing masing. Misalnya Photobucker, Imageshack, Tinypic, dan lain lainnya. Yang diperlukan nantinya adalah URL gambar tersebut untuk dipasang di HTML nya.

Edit HTML
Silahkan create new blog dan pilih template minima. Kok ga pake software Bong? kaya dreamweaver gitu? Lah kita kan belajar praktis. Kalok pake Dreamweaver atau software webdesign lain lhak musti belajar tools toolsnya dulu, hehehe kalo ini kan kita udah disuguhi struktur kerangka layout yang siap diolah, tak iye. Hayoook jadi lanjut ga nih? Baiklah Bong. Lanjutkan, Lebih Cepat Lebih Baik Bong. (ngakak dot kom aku je)

Kenali Struktur HTML
Pada dasarnya template cukup dengan 4 elemen yaitu header, sidebar, post, dan footer. Untuk lebih lengkapnya silahkan kunjungi Catalog Kang Jaloee , baca dulu sebelum nanya ya. Curhat colongan, sebel juga kalau ada yang nanya sedangkan dia nya belum baca, padahal semua sudah ditulis lengkap. Pengen tak iris tipis tipis type orang kaya gini.
Sekarang silahkan di edit ukuran lebar masing masing elemen sesuai dengan itungan awal misal header 920px, sidebar 170px, main-wrapper 500px.

Menambah Background
Setelah semua ukuran sudah pas, silahkan di edit color, font, sesuai yang diinginkan. Lalu kita pasang background gambar yang sudah dibuat tadi.

body {
background:url(http://URL-gambar yang sudah diupload) ;
}


header-wrapper {
background:url(http://URL-gambar untuk header yang sudah diupload);
}

begitu seterusnya.


Ini hanya gambaran step step globalnya aja. Hehehe semakin banyak elemen, semakin banyak menu, semakin banyak detail, semakin njlimet lah pekerjaan itu. Selamat berkarya membuat template blog sendiri.

Sumber Artikel

Artikel Lain : Ateonsoft | Medscript | Free Islamic

Blog Tools

Blog Tools

Color Scheme

Blog Tutorial - Tips For Blog Templates & Blog Design In Photoshop

Photoshopsupport

Menampilkan Website Mati atau Halaman Web Kedaluarsa

Anda ingin bernostalgia dengan situs kesayangan yang sudah tidak eksis lagi di internet ? atau merasa pernah membaca sebuah informasi di situs tertentu, namun ketika mencoba mengaksesnya kembali halaman yang Anda maksud sudah tidak ditampilkan lagi karena kedaluarsa ? Coba gunakan layanan web archive.

1. Buka situs http://www.archive.org.
2. Pada kotak pencarian WayBackMachine, ketikkan alamat situs mati yang ingin Anda tampilkan. Sebagai contoh isikan URL situs mati yang pernah populer di awal 2000-an, yaitu Catcha.co.id. Klik Take Me Back.
3. Selanjutnya akan ditampilkan arsip situs yang Anda cari dalam kolom tahun dan baris bulan. Klik salah satu link arsip untuk melihat tampilan halaman webnya.
4. Melalui teknik yang sama, Anda tentu juga dapat mencari informasi di halaman web kedaluarsa milik sebuah situs yang masih aktif.

Sebagai catatan, ada kemungkinan Anda akan mengalami kesulitan mengakses arsip halaman web milik situs tertentu. Hal ini dikarenakan layanan web archive hanya mengarsip situs-situs yang terindeks / pernah terindeks oleh situs pemeringkat Alexa (www.alexa.com), penyandang dana proyek web archive ini.

Tip Membuat Sendiri Template Blogger (Blogspot)

Sudah bosan dengan template Blogger yang itu-itu saja? Ada dua pilihan buat Anda. Cara pertama cukup praktis, cari dan download template Blogger dari pihak ketiga, lalu salin dan pasang kode template blogger baru pilihan Anda. Cara kedua lebih kreatif, modifikasi sendiri template Anda!

Berikut beberapa tip dasar yang bisa Anda gunakan untuk mengedit atau membuat template Blogger Anda:

Backup Template dan Komponen

Hal pertama yang harus Anda lakukan sebelum mengganti template Blogger adalah membackup template lama dan elemen-elemen halaman yang telah Anda miliki. Komponen selain posting, arsip, dan komentar cukup rawan dengan resiko hilang saat template baru diterapkan (Blogger akan memberi peringatan berupa daftar widget yang akan terhapus jika template baru Anda terapkan).

1. Login ke halaman pengelolaan blog, klik Layout > Edit HTML.
2. Untuk membackup template awal, seleksi seluruh kode di kotak Edit Template (Ctrl+A), lalu copy (Ctrl+C).
3. Buka Notepad, lalu salin kode ke dalam lembar kerja Notepad (Ctrl+V).
4. Simpan backup template awal Anda.

Sebagai catatan, jika Anda telah menambahkan elemen / widget pada halaman blog Anda, maka sebelum melakukan langkah ke-2, aktifkan dulu kotak pilihan Expand Template Widget (di bagian atas kotak Edit Template). Baru setelah itu salin seluruh kode dan Anda simpan sesuai langkah berikutnya.

Kini Anda sudah siap mengutak-atik template Blogger Anda. Jika hasilnya kurang memuaskan, Anda tetap dapat memulihkan template awal dengan cara menyalin kode backup dari Notepad ke kotak Edit Template.

Menghilangkan NavBar

Merasa tidak nyaman dengan tampilan NavBar di bagian atas halaman blog Anda? Singkirkan NavBar dan perluas tampilan halaman blog Anda dengan cara berikut:

1. Buka template Blogger Anda di Layout > Edit HTML.
2. Temukan titik penyisipan, letakkan kursor persis di atas baris body {.
3. Sisipkan baris kode di bawah ini untuk menghilangkan tampilan NavBar di halaman blog Anda:
   
   #navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
   }
   
4. Simpan perubahan template, preview blog dan nikmati hasilnya.

Memodifikasi Lebar Halaman

Hal pertama yang perlu Anda pahami dalam memodifikasi halaman blog Anda adalah mengenai penetapan lebar komponen halaman (header, halaman posting, sidebar, dan footer).

Berikut adalah rumusan yang bisa Anda jadikan pedoman dalam mengutak-atik lebar halaman blog Anda :

#header-wrapper = #outer-wrapper = #footer = #main-wrapper + 30 + #sidebar-wrapper

Temukan dan ubah nilai width: di bagian tersebut sesuai kebutuhan :

• #header-wrapper, #outer-wrapper, dan #footer menjadi patokan lebar seluruh halaman blog.
• #main-wrapper adalah ukuran kolom posting Anda.
• #sidebar-wrapper adalah ukuran kolom sidebar Anda.
• Nilai 30 digunakan untuk memberi jarak antara antara kolom posting dan kolom sidebar.

Dengan berpatokan pada rumusan di atas, maka Anda dapat mengubah ukuran halaman Anda dengan mengedit HTML dengan nilai seperti berikut :

Nilai width awal:
660px = 660px = 660px = 410px + 30px + 220px

Nilai width untuk modifikasi:
750px = 750px = 750px = 470px + 30px + 250px

Penjelasan langkah pengeditan:

1. Timpa nilai width pada bagian #header-wrapper, #outer-wrapper, dan #footer menjadi 750px.
2. Timpa nilai width pada bagian #main-wrapper menjadi 470px.
3. Timpa nilai width pada bagian #sidebar-wrapper menjadi 250px.

Nilai width #main-wrapper = 470px cocok untuk beriklan (ukuran ini bisa mengakomodasi banner 468x60 px). Silakan ubah ukuran sesuai selera dengan berpatokan pada rumusan di atas.

Memodifikasi Jumlah Kolom

Pilihan template yang disediakan Blogger umumnya tersusun atas dua kolom (kolom posting dan kolom sidebar). Anda dapat membuat kolom tambahan dengan menyalin kode sidebar dan mengatur ulang ukurannya.

Sebagai contoh, berikut cara membuat halaman blog dengan tiga kolom.

1. Buka template Blogger Anda di Layout > Edit HTML.
2. Kita gandakan kode kolom sidebar yang sudah ada. Umumnya kode sidebar dinamai sidebar-wrapper, namun ada juga template yang menggunakan nama sidebar-wrap atau sejenisnya.
3. Temukan, seleksi, dan salin bagian ini:
   
   #sidebar-wrapper {
   width: 220px;
   float: $endSide;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }
   
4. Pindahkan kursor di bawah kode tersebut, lalu sisipkan kode yang telah Anda salin. Kini anda memiliki 2 kode di atas.
5. Bedakan nama kode, edit nama #sidebar-wrapper yang telah Anda sisipkan menjadi #sidebar-wrapper2.
6. Ubah nilai width di #sidebar-wrapper dan #sidebar-wrapper2, dengan cara membagi 2 nilai yang ada. Misalnya nilai awal 220px Anda bagi menjadi masing-masing 110px.
7. Selanjutnya temukan, seleksi, dan salin bagian ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
</b:section>
</div>
8. Pindahkan kursor di bawah kode tersebut, lalu kembali sisipkan kode yang telah Anda salin. Kini anda memiliki 2 kode di atas.
9. Edit nama <div id='sidebar-wrapper'> yang telah Anda sisipkan menjadi <div id='sidebar-wrapper2'>.
10. Simpan Template. Preview blog Anda untuk memastikan tampilan 3 kolom telah berhasil Anda buat.

Catatan, jika lebar sidebar pertama dan kedua menjadi sempit, maka gunakan rumusan Memodifikasi Lebar Halaman.

Selamat mencoba !

Recent Posts with Thumbnails Widget for Blogger

Lanjut

how-to-embed-YOUTUBE video,movie in your blog

This post explains, how to embed(insert) a youtube video in your blogger blog:
So,you want to embed a video(movie) onto your blog.The process is very simple,even a dummie can do it.If you want to embed your original video,then first sign up for an account in youtube and upload your video and get the embed code.
Otherwise,you can easily embed any public youtube video in your blog.Go to youtube.com and search for the video.For example,if you want to embed a britney spears video,search it and copy the embed code on to a windows notepad or anything else.
The following process is explained below with pictures for easy understanding.
1.Go to youtube.com and search for your required video

2.Copy the embeded code(ctrl+c) and paste(ctrl+v) it in windows notepad.

3.Sign in in to your blogger acoount and click the New Post button and next,select the option 'Edit html' as shown below and paste the html code as shown below.

4.Publish the post.That's it, as you can see now,the youtube video is embeded in your post properly.
NOTE:You can change the width and height of the video by replacing the values to your desirable ones.
If you have any doubts regarding to this post,feel free to ask it here via your comments.

Cara membuat eBook via PDF Printer Driver

Diantara pilihan format eBook tentu masing-masing memiliki kelebihan dan kekurangan, kadang pilihan ini membuat bingung calon penulis ebook. Contoh format eBook yang biasa digunakan diantaranya Adobe PDF, Executable (Exe), Plain Text (ASCII), Microsoft Word (doc) dan RTF, HTML dan XML , Help (Hlp). Dari beberapa pilihan format eBook diatas, format PDF lah yang paling banyak digunakan. Penasaran pengen belajar cara membuat eBook via PDF Printer Driver?

Cara Membuat Berkas PDF

Tidak ada teknik khusus dalam pembuatan berkas PDF, ini yang membuat saya berpikir ulang untuk membuat tutorialnya secara lengkap..tanpa saya ajaripun anda pasti bisa membuatnya. Untuk membuat Berkas PDF anda hanya perlu menggunakan software pengolah kata "word processor" yang sudah ada dalam kumputer anda (notepad, wordpad, MS word) dll. Membuat berkas PDF sama saja dengan anda membuat document di MS Word, anda tinggal menulis dan hasilnya tinggal dicetak ke format PDF. Prinsip kerja membuat berkas PDF terbilang sederhana, yang anda butuhkan hanya "Printer Driver" yang terinstall di kompuer anda. Untuk mengistall "Printer Driver" saya sarankan anda menggunakan PDF995 dan Tiny PDF.

Belum puas dengan "Printer Driver" diatas? Anda bisa menggunakan Software PDF Converter pilihan yang biasa saya gunakan:

Adobe Acrobat Professional

Sampai saat ini belum ada PDF compiller sebagus Adobe Acrobat Professional, sayang harganya terbilang mahal, saya sendiri sebenarnya menggunakan software ini. Kelengkapan dan kemudahan mengedit berkas PDF dengan Adobe Acrobat Professional belum pernah saya temukan pada software lainnya. Beberapa fasilitas penting dari software ini yaitu kemudahan membuat penandaan halaman (bookmark) dan kemudahan melakukan proteksi berkas PDF.

Tomahawk PDF+

Jika Adobe Acrobat Professional cukup menguras kantong anda, saya sarankan anda menggunakan software satu ini Tomahawk PDF+. Tools gratis yang tidak kalah fasilitasnya, bahkan saya katakan tools ini merupakan PDF Compiller gratis terbaik. Kelebihan Tomahawk PDF+ yang jelas memiliki text editor sendiri. anda bisa download disini

Free PDF Convert (PDF Converter)

Convert MS Office, Images, Web Pages, Vector Graphic Formats files to PDF.

Jika anda membutuhkan layanan Online untuk membuat eBook dengan format PDF anda bisa menggunakan Free PDF Convert. Cara mengunakannya cukup mudah, pertama anda buat dulu sebuah documen (misalkan MS WORD) kemudian tinggal di upload dan layanan ini akan melakukan proses konversi dokumen anda ke berkas PDF. Untuk aplikasi yang digunakan di desktop anda bisa download softwarenya disini . Layanan ini sebenarnya sudah di pernah diulas oleh rekan blogger Cosa Aranda bisa anda baca disini. (thanks untuk Mas Cosa)

Natata eBook Compiller

Selain format PDF, format yang banyak digunakan salah satunya Executbale (exe). Untuk membuat eBook dengan format (exe) sesuai saran suhu Iwan free-7.net yaitu menggunakan Natata eBook Compiller (thanks iwan). Namun format exe kadang memiliki kekurangan karena lebih rentang disusupi virus dan sejenisnya. Software-nya bisa anda download disini.

Sebenarnya masih banyak tools untuk PDF Converter, anda bisa mencari sendiri di Google :) Semoga tools diatas bisa memudahkan anda membuat eBook, salam