Tampilkan postingan dengan label Daftar blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Daftar blogspot. Tampilkan semua postingan

Cara mengedit template mentah 5

Posted by GAPTEK on Senin, 30 Agustus 2010 , under , , , , , | komentar (0)





BISMILLAAHIRROHMAANIRROHIIM

Kini kita sampai pada sesen akhir pengeditan template mentah. Walaupun akhir, masih banyak hal yang bisa kita lakukan. Tapi, kalau sahabat merasa lelah, sahabat cukup sampai pada tahapan ini Insya Allah sedikit banyak sahabat mendapatkan pengalaman dan inspirasi pengolahan template mentah.

Pada kali ini kita mencoba untuk mengedit tampilan template yang terletak pada bagian bawah blog seperti gambar di bawah ini

klik gambar untuk memperbesar

Untuk melakukan pengeditan, silahkan sahabat cari kode seperti di bawah ini. Biasanya terletak di bagian bawah Edit HTML

<center><div style='height:20px;margin-top:9px;margin-bottom:5px;'>
Powered by <a href='http://www.blogger.com' style='color:#ff86a5'>Blogger</a> <span style='color:#999999'>|</span> <a href='http://zenverse.net/lunated-theme/' title='Lunated - Free Wordpress Theme with Premium Features'><span style='border-bottom:1px solid #616161;'>Lunated</span></a> designed by <a href='http://zenverse.net/' style='color:#ff86a5' title='ZenVerse - Web Design and Development'>ZenVerse</a> | Converted to <a href='http://www.wordpresstoblogger.com' style='color:#ff86a5'>Blogger Templates</a> and <a href='http://www.wp2b.com' style='color:#ff86a5'>Blogger Themes</a> for <a href='http://www.cinta.net/' style='color:#ff86a5'>Cinta</a> | <a href='http://www.jewelrymall.com/watches/' style='color:#ff86a5'>Discount Watch</a></div></center>

Jangan merubah susunan yang ada, apalagi menghilangkan. Kita harus menghormati karya orang lain dan harus kita akui bahwa itu adalah karya orang lain. Jika sahabat ingin menambahkan barisannya, itu tidak masalah.

Cara untuk menambahkannnya cukup mudah. Misalnya ingin menambahkan link dengan nama GAPTEK maka langkahnya kita tambahkan kode seperti di bawah ini

<a href='http://kumpulgaptek.blogspot.com/watches/' style='color:#ff86a5'>GAPTEK</a>

Kode di atas kita pasang setelah "Discount Watch" seperti ini

<center><div style='height:20px;margin-top:9px;margin-bottom:5px;'>
Powered by <a href='http://www.blogger.com' style='color:#ff86a5'>Blogger</a> <span style='color:#999999'>|</span> <a href='http://zenverse.net/lunated-theme/' title='Lunated - Free Wordpress Theme with Premium Features'><span style='border-bottom:1px solid #616161;'>Lunated</span></a> designed by <a href='http://zenverse.net/' style='color:#ff86a5' title='ZenVerse - Web Design and Development'>ZenVerse</a> | Converted to <a href='http://www.wordpresstoblogger.com' style='color:#ff86a5'>Blogger Templates</a> and <a href='http://www.wp2b.com' style='color:#ff86a5'>Blogger Themes</a> for <a href='http://www.cinta.net/' style='color:#ff86a5'>Cinta</a> | <a href='http://www.jewelrymall.com/watches/' style='color:#ff86a5'>Discount Watch</a> | <a href='http://kumpulgaptek.blogspot.com/watches/' style='color:#ff86a5'>GAPTEK</a> </div></center>

Bagi sahabat Gaptek yang mau menerjuni dunia ngeblog, Insya Allah dengan mengikuti langkah pengolahan template mentah dari tahap 1 s/d 5 ini, sahabat bisa mengaplikasikannya untuk jenis-jenis template lainnya. Memang, setiap template itu berbeda kode HTML-nya, tapi memiliki kemiripan letak dan mode pengeditan.

Bagi yang mau mengembangkan pembahasan pengeditan kode template yang kita bahas, ada bebera hal yang mungkin bias membantu

seluruh kode gambar yang bisa kita akses bias kita ganti. Buatlah renovasi gambarnya dengan menggunakan photoshop dan upload gambarnya di photobucket. Setelah itu ambil kode link gambarnya dan letakkan pada link gambar yang mau di ubah.

Mengubah background atas tampilan blog

Kode yang harus sahabat cari

/* header */
#header {
width:1000px;
background-image:url(http://www.opendrive.com/files/6869275_ADSCD/pagebg.gif);
background-repeat:no-repeat;
height:200px;
position:relative;
}

Link gambar yang berwarna kuning sahabat ganti dengan gambar pilihan sahabat atau mau di tambah gambar dan tulisan. Edit di photoshop dan upload di photobucket. Ukuran gambar jangan berubah yaitu 1000 x 249 px dengan jenis gambar gif. Kalau mau mengedit dengan gambar yang sama, ubah gambarnya jadi jpg dulu dengan menggunakan Paint yang sudah tersedia di windows. Setelah di edit, biar sama save as dalam bentuk gif.

Untuk mengubah tampilan search atau kotak pencarian pada tampilan blog silahkan cari kode seperti ini

.topsearchbg {
position:absolute;
top:0px;
left:0;
width:306px;
height:37px;
background-image:url(http://www.opendrive.com/files/6869296_wnzc8/searchbg.gif);
}

Silahkan copy link dan paste pada jendela browser amak sahabat akan melihat tampilan gambarnya. Lakukan langkah yang sama dengan yang sebelumnya.

Untuk melakukan perubahan-perubahan lain pada template, silahkan cari kode-kode seperti di atas dan lakukanlah pengeditan dengan langkah yang sama.


Cara mengedit template mentah 4

Posted by GAPTEK on , under , , , , , | komentar (0)





BISMILLAAHIRROHMAANIRROHIIM

Baiklah sahabat Gaptek, langkah kita dalam mengedit template mentah hanya tinggal beberapa dekade :). Puf.....lumayan lelah. Tapi....terus tancap!!!

Nah, sekarang kita mencoba untuk mengedit link Feed RSS blog kita. Sebelum ke sana, sahabat harus sudah mendaftarkan blog sahabat ke Feed Burner. Kalau bingung, ikuti langkah-langkah di bawah ini ya......

Sebelum ke sana, dimana letak pengeditan RSS yang dimaksud pada kesempatan kali ini? sahabat perhatikan bagian atas blog sahabat pada pembahasan template kali ini

Agar mudah memahami mari kita mulai dari titik pemasangan. Silahkan sahaabt pilih "PENGATURAN" dan pilih "Feed Situs" kemudian klik "Feedburner". Biar gak bingung, lihat view gambarnya di sini.

Ketika sahabat mengklik FeedBurner maka sahabat akan langsung di bawa ke laman feedBurner dengan catatan sahabat mengaktifkan email Gmailnya. Atau, biasanya akan menemukan laman konfirmasi, sahabat tinggal mengisi password dan klik sig in. Untuk lihat previewnya klik di sini.

Setelah itu, sahabat akan di bawa ke laman FeedBurner. Pada laman ini silahkan sahabat tuliskan alamat blog sahabat (contoh: http://alifbelajaronline.blogspot.com) pada form yang di sediakan dan jangan lupa ceklis I am podcaster kemudian klik Next. Biar gak bingung lihat gambar di sini.

Ketika sahabat mengklik Next, sahabat akan di bawa ke laman pilihan. Memilih Atom atau Rss, pastikan pilih Rss dan klik next. Lihat gambar di sini.

Setelah memilih Rss, sahabat akan dihadapkan dengan banyaknya form dan pilihan. Abaikan saja, terus klik next sampai sahabat bertemu dengan laman seperti gambar di sini.

Kalau sahabat sudah sampai pada laman seperti gambar di atas, sahabat harus segera mengirimkan alaman Rss sahabat. Caranya silahkan sahabat klik Transfer feed seperti gambar di sini

Setelah sahabat klik transfer feed maka sahabat akan di bawa ke laman lain seperti gambar di sini. Isi form yang ada dengan alamat email Gmail sahabat kemudian klik Send Transfer Acceptance Request

Setelah sahabap mengirimkan kode feed ke Gmail sahabat, silahkan sahabat buka email di Inbox dan klik link untuk feed sahabat seperti gambar di sini.

Ketika link di klik, sahabat akan berpindah laman dan melihat laman seperti gambar di sini. Pada gambar itu sahabat melihat link Feedburner sahabat. Pada gambar sahabat lihat alamat Feed http://feeds.feedburner.com/AlifBelajarOnline. Jangan lupa klik Accept Feed Transfer.

Setelah sahabat mengetahui alamat feednya, silahkan kembali menuju "PENGATURAN" dan pilih "Feed Situs" seperti gambar di sini. Pada form Posting Pengubahan Arahan Feed sahabat isi dengan alamat feed sahabat. Setelah itu silahkan klik Simpan Setelan.

Kalau sudah di simpan silahkan sahabat pilih "RANCANGAN" dan pilih "Edit Html" dan jangan lupa ceklis Expand templatenya. Setelah itu, cari kode seperti di bawah ini

<div id='rsstop'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='' src='http://www.opendrive.com/files/6869283_2g9FH/rsstop.gif'/></a>
</div>

Cara ngeditnya

<div id='rsstop'>
<a href='isi dengan alamat feed sahabat'><img alt='' src='http://www.opendrive.com/files/6869283_2g9FH/rsstop.gif'/></a>
</div>

Contoh pengeditannya

<div id='rsstop'>
<a href='http://feeds.feedburner.com/AlifBelajarOnline'><img alt='' src='http://www.opendrive.com/files/6869283_2g9FH/rsstop.gif'/></a>
</div>

Pada alamat url berwarna kuning sahabat ganti dengan alamat url Rss sahabat. Kalau sudah tepat caranya seperti keterangan di atas, ketika sahabat mengklik icon Rss pada blog sahabat, sahabat akan langsung melihat tampilan blog sahabat dalambentuk Rss

Cara mengedit template mentah 3

Posted by GAPTEK on Minggu, 29 Agustus 2010 , under , , , , , | komentar (1)





BISMILLAAHIRROHMAANIRROHIIM

Bagaimana dengan perubahan yang sahabat lakukan pada postingan sebelumnya? Mudah bukan!! kalau sahabat sudah mampu mengubah tampilan slide gambar dan keterangan gambr pada template yang kita bahas ini, sahabat akan lebih mudah lagi untuk melakukan perubahan-perubahan lainnya.

Sekarang kita mencoba untuk menambah widged content pada template mentah blog yang baru kita buat. Pada template yang kita bahas ini, hanya ada satu kontent yaitu "BERANDA" terlihat seperti gambar di bawah ini

Masih banyak ruang yang dapat kita gunakan. Selain menambah cantik tampilan blog, juga memudahkan pengunjung untuk dapat menikmati fitur-fitur yang tersedia di dalam blog kita.

Untuk menambah atau mengedit widged content pada pembahasan template kali ini, silahkan sahabat pilih EDIT HTML dan jangan lupa ceklis Expand Template Widged dan temukan kode HTML seperti di bawah ini

<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='current_page_item'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
<b:else/>


Kalau sudah ketemu, sahabat perhatikan kode-kode yang berwarna, itu adalah kode yang akan kita jadikan sebagai widged konten.

Sebelum ke sana, perlu sahabat ingat, inti dari tutorial ini adalah membuat sahabat bisa dengan cepat membuat blog. Jadi, ikuti saja setiap sesi postingan yang ada. Tahan diri untuk berlaku lebih, kecuali sahabat sudah menguasai trik ngeblok sebelum tutorial ini ada. Kenapa begitu, karena pada widged content ini kita juga memerlukan link yang menjadi tautan contentnya. Karena dalam langkah sangat dasar, mohon sahabat bersabar. Yang penting bisa menambah dan mengurangi atau mengedit widged content.

Langkah-langkah

Asli kode
<a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/>
Pengeditan yang harus dilakukan
<a href='isi dengan link blog sahabat' title='Judul Konten'&gt;Nama Content
Contoh Pengeditan widged content
<a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek

Agar lebih jelas, mari kita bahas langsung pada pemasangan contentnya

<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='current_page_item'><a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek</a></li>
<b:else/>
Kalau yang sahabat lakukan seperti keterangan di atas, sahabat hanya memiliki dua content, yang pertama adalah "Home" dan yang kedua adalah "Link Sahabat". Bagaimana kalau ingin menambahkan lebih dari satu? untuk menambahkan, sahabap hanya perlu copy paste kode di bawah ini dan sedikit mengubah beberapa bagian

<li><a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek</a></li>

Biar lebih jelas, sahabat bisa melakukan langkah yang sama seperti di bawah ini

<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li><a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/08/widget-by-forantum.html' title='TV Online'>TV Online</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/07/link-terkait.html' title='Link Terkait'>Link Terkait</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/05/sahabat-blogger.html' title='Tukar Link'>Tukar Link</a></li>
<li><a href='http://suksesonline2010.blogspot.com' title='Best PTC'>Best PTC</a></li>
<li><a href='http://fotogaptek.blogspot.com' title='Foto'>Galery Foto</a></li>
<b:else/>
Biar lebih mudah lagi, silahkan sahabat copy paste kode-kode widged content nya dan linknya sahabat ganti dengan link sahabat sendiri.

Copy paste kode di bawah ini diantara <b:if cond='data:link.isCurrentPage'> dan <b:else/> atau lebih jelasnya seperti pemasangan di atas

<li><a href='http://kumpulgaptek.blogspot.com' title='GAPTEK'>Gaptek</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/08/widget-by-forantum.html' title='TV Online'>TV Online</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/07/link-terkait.html' title='Link Terkait'>Link Terkait</a></li>
<li><a href='http://kumpulgaptek.blogspot.com/2010/05/sahabat-blogger.html' title='Tukar Link'>Tukar Link</a></li>
<li><a href='http://suksesonline2010.blogspot.com' title='Best PTC'>Best PTC</a></li>
<li><a href='http://fotogaptek.blogspot.com' title='Foto'>Galery Foto</a></li>

Kalau sudah copy paste, jangan lupa klik simpan template. Setelah itu, silahkan sahabat lihat perubahan yang terjadi.

Cara Mengedit Template Mentah 2

Posted by GAPTEK on , under , , , , , | komentar (0)





BISMILLAAHIRROHMAANIRROHIIM

Baiklah, pada kelanjutan kali ini kita akan membahas proses pengeditan template mentah menjadi template pilihan kita. Pastikan sahabat telah benar-benar memahami langkah sebelumnya.

Untuk melakukan pengeditan, sahabat harus sudah menyiapkan gambar pengganti dan kata-kata penggantinya. Jangan lupa, gambar pengganti harus terlebih dahulu di Upload di Photobucet.com

Kami akan berikan satu contoh detail pengeditan pada kasus template yang kita bahas ini. Untuk yang lain, sahabat bisa mencobanya sendiri karena langkahnya sama.

Kode template yang akan kita edit

<!-- begin featured content #1 -->
<div class='featuredpic' id='zv_img1' style='display:block;'>
<a href='#'><img alt='' src='http://www.opendrive.com/files/6873760_kB2HN/1.jpg'/></a>
</div><!--/featuredpic-->
<div class='featuredtext_holder'>
<div class='featuredtext' id='zv_text1' style='display:block;'>
<div class='featured_fixed_height'>
<h1 class='featuredposttitle'>Pureness – Free Contact Form Design/Interface (PSD)</h1>
<span class='featuredpostcommentcount'>8 comments</span>
<div class='featuredpostcontent'><p>Pureness is my second set of contact form interface. It is white in colour and saved as PSD format so that you can change its colour to suit your design. Feel free to use it for any purpose, even commercial projects. Change the main colour using &#8220;Hue &amp; Saturation&#8221; to your desired colour.</p>
</div>
</div>
<span class='featuredseemore'><img alt='' src='http://www.opendrive.com/files/6869298_ZE92w/seemore.gif' style='vertical-align:middle'/> Filed under Contact Form Design, Freebies, Resources</span>
</div><!--/featuredtext--></div>
<!-- end featured content #1 -->

Mengubah gambar

Gambar yang akan diubah
http://www.opendrive.com/files/6873760_kB2HN/1.jpg
Diganti dengan gambar
http://i864.photobucket.com/albums/ab207/fotomember/3.jpg

Mengubah Kata atau kalimat

Kata atau kalimat yang akan di ubah
1] Pureness – Free Contact Form Design/Interface (PSD)
2] 8 comments
3] Pureness is my second set of contact form interface. It is white in colour and saved as PSD format so that you can change its colour to suit your design. Feel free to use it for any purpose, even commercial projects. Change the main colour using &#8220;Hue &amp; Saturation&#8221; to your desired colour.
4] Filed under Contact Form Design, Freebies, Resources
Diganti dengan
1] Keluarga Besar GAPTEK
2] We Are One
3] Kami terdiri dari Mahasiswa, Santri Pondo Pesantren, Pelaja SMA/MA, Pelajar SMP/MTs, Guru, Petani dan wiraswastawan. Tampak pada gambar di samping, musyawarah antar seluruh kalangan dengan diwakili oleh para tokoh-tokoh penting. Kami adalah paguyuban masyarakat Ketapang.
4] GABUNGAN PECINTA TEKNOLOGI

Maka cara penulisannya dalam bentuk kode adalah

<!-- begin featured content #1 -->
<div class='featuredpic' id='zv_img1' style='display:block;'>
<a href='#'><img alt='' src='http://i864.photobucket.com/albums/ab207/fotomember/3.jpg'/></a>
</div><!--/featuredpic-->
<div class='featuredtext_holder'>
<div class='featuredtext' id='zv_text1' style='display:block;'>
<div class='featured_fixed_height'>
<h1 class='featuredposttitle'>Keluarga Besar GAPTEK</h1>
<span class='featuredpostcommentcount'>We Are One</span>
<div class='featuredpostcontent'><p>Kami terdiri dari Mahasiswa, Santri Pondo Pesantren, Pelaja SMA/MA, Pelajar SMP/MTs, Guru, Petani dan wiraswastawan. Tampak pada gambar di samping, musyawarah antar seluruh kalangan dengan diwakili oleh para tokoh-tokoh penting. Kami adalah paguyuban masyarakat Ketapang.</p>
</div>
</div>
<span class='featuredseemore'><img alt='' src='http://www.opendrive.com/files/6869298_ZE92w/seemore.gif' style='vertical-align:middle'/> GABUNGAN PECINTA TEKNOLOGI</span>
</div><!--/featuredtext--></div>
<!-- end featured content #1 -->

Kalau sudah melakuan pengeditan seperti gambar di atas, sahabat tinggal menyimpan perubahan templatenya dengan mengklik "SIMPAN TEMPLATE" dan silahkan lihat perubahannya.

Cara mengedit template mentah 1

Posted by GAPTEK on , under , , , , , | komentar (0)







BISMILLAAHIRROHMAANIRROHIIM

Baiklah sahabat, kini kita memulai untuk melakukan pengeditan template mentah yang telah kita pilih pada sesen sebelumnya. Ingat, pastikan template yang kita edit sama dengan template yang direkomendasikan pada tutorial "Cara buat blog di blogspot.com bagian 1, 2, dan 3".

Ketika sahabat melihat elemen laman, sahabat akan melihat tampilan seperti gambar di bawah ini

Jika sahabat membiarkan laman blog sahabat tetap seperti di atas, tentunya tampilan blog sahabat kurang menarik karena tidak sesuai dengan keinginan. Untuk melakukan perubahannya, sahabat bisa memilih EDIT HTML dan jangan lupa ceklis "Expand template widged" untuk lebih jelasnya perhatikan gambar di bawah ini

Kenapa kita pilih Expand? Yah...menurut sahabat GAPTEK, tampilan itu berada dalam tubuh blog, bukan bajunya. Tampilan di atas itu tidak bisa kita edit dengan menambahkan dan mengurangi widged. Jadi, untuk melakukan perubahannya kita harus bermain-main dengan kode HTMLnya.

Setelah sahabat melakukan langkah seperti gambar di atas, sahabat tinggal cari di badan HTML kode seperti di bawah ini

<!-- begin featured content #1 -->
<div class='featuredpic' id='zv_img1' style='display:block;'>
<a href='#'><img alt='' src='http://www.opendrive.com/files/6873760_kB2HN/1.jpg'/></a>
</div><!--/featuredpic-->
<div class='featuredtext_holder'>
<div class='featuredtext' id='zv_text1' style='display:block;'>
<div class='featured_fixed_height'>
<h1 class='featuredposttitle'>Pureness – Free Contact Form Design/Interface (PSD)</h1>
<span class='featuredpostcommentcount'>8 comments</span>
<div class='featuredpostcontent'><p>Pureness is my second set of contact form interface. It is white in colour and saved as PSD format so that you can change its colour to suit your design. Feel free to use it for any purpose, even commercial projects. Change the main colour using &#8220;Hue &amp; Saturation&#8221; to your desired colour.</p>
</div>
</div>
<span class='featuredseemore'><img alt='' src='http://www.opendrive.com/files/6869298_ZE92w/seemore.gif' style='vertical-align:middle'/> Filed under Contact Form Design, Freebies, Resources</span>
</div><!--/featuredtext--></div>
<!-- end featured content #1 -->
<!-- begin featured content #2 -->
<div class='featuredpic' id='zv_img2' style='visibility:hidden;'>
<a href='#'><img alt='' src='http://www.opendrive.com/files/6873762_due33/2.jpg'/></a>
</div><!--/featuredpic-->
<div class='featuredtext_holder'>
<div class='featuredtext' id='zv_text2' style='visibility:hidden;'>
<div class='featured_fixed_height'>
<h1 class='featuredposttitle'>Free Metallic Social Bookmark Buttons</h1>
<span class='featuredpostcommentcount'>3 comments</span>
<div class='featuredpostcontent'><p>This is a set of free social bookmark icons with metallic border. They are ready to be downloaded right away. Change the colour of the icons using the &#8220;Hue/Saturation&#8221; layer to match your design. You can invert the colours for a new style.</p>
</div>
</div>
<span class='featuredseemore'><img alt='' src='http://www.opendrive.com/files/6869298_ZE92w/seemore.gif' style='vertical-align:middle'/> Filed under Freebies, Icons Pack, Resources</span>
</div><!--/featuredtext--></div>
<!-- end featured content #2 -->
<!-- begin featured content #3-->
<div class='featuredpic' id='zv_img3' style='visibility:hidden;'>
<a href='#'><img alt='' src='http://www.opendrive.com/files/6873759_HT6ZO/3.jpg'/></a>
</div><!--/featuredpic-->
<div class='featuredtext_holder'>
<div class='featuredtext' id='zv_text3' style='visibility:hidden;'>
<div class='featured_fixed_height'>
<h1 class='featuredposttitle'>Indent &#8211; Free Social Bookmark Icons</h1>
<span class='featuredpostcommentcount'>2 comments</span>
<div class='featuredpostcontent'><p>This is a set of free social bookmark icons with indented effect. They are ready to be downloaded right away. Change the colour of the icons using the &#8220;Hue/Saturation&#8221; layer to match your design.</p>
</div>
</div>
<span class='featuredseemore'><img alt='' src='http://www.opendrive.com/files/6869298_ZE92w/seemore.gif' style='vertical-align:middle'/> Filed under Freebies, Icons Pack, Resources</span>
</div><!--/featuredtext--></div>
<!-- end featured content #3 -->

Keterangan :

Kode awal dan akhir slide gambar
<!-- begin featured content #1 , 2 dan 3 -->
<!-- end featured content #1 , 2 dan 3 -->

Kode gambar slide yang harus diganti
http://www.opendrive.com/files/6873760_kB2HN/1.jpg
http://www.opendrive.com/files/6873762_due33/2.jpg
http://www.opendrive.com/files/6873759_HT6ZO/3.jpg

Kode tulisan yang harus diganti
Seluruh tulisan dengan warna ini harus sahabat ganti dengan tulisan yang sahabat inginkan.

Nah....kalau sahabat sudah mengerti langkah di atas, kita bisa dengan mudah mengubah tampilan template mentah menjadi template keinginan kita.



Cara Buat Blog Di Blogger.com 3

Posted by GAPTEK on , under , , , , , | komentar (0)






BISMILLAAHIRROHMAANIRROHIIM

Pada kesempatan kali ini, kita mencoba untuk mengubah template yang keren dan cukup mudah untuk kita melakukan pengeditan template.

Tujuannya, agar sahabat bisa lebih memahami langkah-langkah untuk merubah tampilan template sesuai dengan keinginan kita. Memang, tidak murni template itu hasil karya kita sendiri, paling tidak, kita bisa belajar lebih cepat untuk bisa memahami langkah-langkah pembuatan blogspot dengan baik.

Langkah 4

Pada langkah ini kita akan mencoba untuk merubah template hasil download-tan. Karena langkah ini adalah langkah paling mendasar, silahkan sahabat download template yang kami rekomendasikan. Gambaran template yang akan kita kaji kami ambil dari http://www.zoomtemplate.com/2010/08/lunated.html, untuk melihatnya silahkan klik di sini dan untuk mendownload silahkan klik di sini.

Langah 5

Setelah mendownload templatenya, silahkan di buka dan di extract karena bentuk file adalah zipp. Ketika di "extract to" silahkan sahabat tentukan letak penyimpanannya.

Langkah 6

Setelah file template di extract, sahabat cari file dengan nama "Lunated". File tersebut dalam bentuk XML document. Kalau sudah ketemu, mari kita ikuti langkah selanjutnya.

Langkah 7

Pastikan sahabat masih dalam blogger sahabat. Silahkan pilih "RANCANGAN" dan sahabat akan melihat deretan menu "Element halaman, Edit HTML dan Perancang Template". Silahkan sahabat pilih "EDIT HTML" dan sahabat akan di bawa ke laman seperti gambar di bawah ini
Pada gambar di atas sahabat akan melihat tulisan Upload sebuah template dari sebuah file pada hard drive Anda PILIH BERKAS tidak ada file yang di pilih UNGGUH. Silahkan pilih "PILIH BERKAS" dan sahabat akan dibawa ke jendela konfirmasi pemilihan berkas template yang sudah sahabat pilih. Lihat pada gambar di bawah ini
Masih ingat Langkah 6 bukan? Silahkan sahabat cari dan temukan seperti contoh gambar di atas. Klik nama File Lunated kemudian klik OPEN dan sahabat akan mendapati laman blog sahabat seperti gambar di bawah ini
Kalau sudah seperti gambar di atas, silahkan sahabat pilih "UNGGUH" untuk melakuan pengunduhan/perubahan template. Jika pengunduhan sukses, sahabat akan di bawa ke laman seperti gambar di bawah ini

Pada gambar di atas, sahabat akan melihat deretan menu "Pertahankan Widged, Hapus Widged, dan Batal". Pastikan sahabat memilih "HAPUS WIDGED".

Kenapa pilih HAPUS WIDGED? sahabat sabar dulu, ikuti saja langkah seperti di atas. Lebih jelaskan akan kita bahas pada postingan pengembangan. Kalau sudah sukses, maka sahabat akan mendapati laman seperti gambar di bawah ini

Pada tampilan seperti gambar di atas, sahabat akan melihat tulisan "Perubahan telah di simpan__Lihat Blog" silahkan klik lihat blog dan sahabat akan melihat tampilan blog sahabat dengan template baru.

Setelah template baru terpasang, hal paling rumit adalah melakukan pengeditan badan blogspot sahabat dengan template baru yang masih sangat polos. Untuk melihat garapan apa kaitannya dengan template baru sahabat silahkan klik Element Laman dan sahabat akan mengetahuinya seperti gambar di bawah ini
Untuk mengubah tampilan atau menambah tampilan, pertama yang kita lakukan adalah mengganti beberapa tampilan yang kita anggap tidak perlu. Untuk lebih jelasnya kita bahas pada postingan selanjutnya.

Jika sahabat telah sampai pada tahapan ini, kami sarankan untuk mengingat-ingat langkah-langkah yang sudah kita jelaskan sebelumnya. Karena, langkah-langkah di atas sangat penting berhubungan erat dengan pembuatan blogspot pada blogger.



Cara Buat Blog Di Blogger.com 2

Posted by GAPTEK on , under , , , , , | komentar (0)






BISMILLAAHIRROHMAANIRROHIIM

Seperti yang telah saya jelaskan sebelumnya, sahabat cukup menggunakan template download-tan yang bisa sahabat peroleh dimana-mana. Pelajari tampilan template tersebut, sahabat akan memiliki keahlian sendiri seiring kesabaran sahabat mengubek-ngubek HTML template sahabat.

Baiklah, kita langsung saja meneruskan proses pembuatan blogspot dengan cara mudah dan cepat.

Langkah 3

Setelah sahabat mengikuti langkah pada Langkah 2, sahabat akan di bawa ke laman seperti gambar di bawah ini
Pada laman seperti gambar di atas adalah laman pemilihan template sementara dari blogger. Sahabat pilih saja yang sahabat suka. Ingat, ini hanya pemilihan template sementara karena tampilan template dari blogger sangat terbatas. Ingat!!! pilih saja mana yang sahabat suka, nanti akan kita rubah dengan template yang lebih keran. Setelah sahabat pilih, silahkan klik "LANJUTKAN" dan sahabat akan di bawa ke laman seperti di bawah ini
Kalau sahabat sampai pada laman pada gambar di atas, bergembiralah karena blog sahabat sudah jadi. Silahkan klik :MUALI BLOGGING" dan sahabat akan di bawa ke laman seperti gambar di bawah ini
Sahabat akan melihat laman mentah blog sahabat seperti gambar di atas. Itu adalah laman untuk membuat postingan. Sahabat sabar dulu, intinya kita ingin membuat blogspot dengan cepat.

Silahkan sahabat pilih "Rancangan" di deretan "Posting, Komentar, dan Pengaturan". Dan sahabat akan di bawa ke laman seperti gambar di bawah ini
Pada gambar di atas sahabat akan melihat deretan pilihan "Pratinjau, Bersihkan Edit dan Simpan" silahkan sahabat pilih "SIMPAN" dan akan melihat laman blog sahabat seperti gambar di bawah ini
Sahabat akan melihat tulisan dengan latar berwarna "Perubahan Anda Telah Di Simpan__Lihat Blog" klik pada "Lihat Blog" dan sahabat akan di bawa ke tab baru. Di situlah sahabat bisa melihat blog awal sahabat.

Nah, untuk melakukan perubahan template blog yang lebih keren, silahkan sahabat cari di Google dengan menuliskan keywoard "templateblogger" atau bisa juga "free template blogger" atau terserah sahabat. Silahkan di download.

Karena ini adalah langkah dasar dan sangat mendasar sekali bagi kita yang masih awam seputar dunia blogging, kami sarankan sebaiknya mendownload template yang kami rekomendasikan agar langkah pemahaman blogspot bisa searah dengan tutorial ini.



Cara Buat Blog Di Blogger.com 1

Posted by GAPTEK on , under , , , , , | komentar (0)





BISMILLAAHIRROHMAANIRROHIIM

Membuat blog dengan menggunakan Blogger.com tidaklah sesulit yang kita bayangan. Sesuai dengan kata "membuat", banyak panduan praktis yang kita temukan. Hampir sebagian besar Blogspot yang ada pasti menyinggung perihal proses pembuatan blogspot ini.

Yang tersulit, hubungannya dengan blogspot, adalah pengisian konten blog dan nilai akurasi kemanfaatannya bagi manusia. Selain itu, jiwa kejujuran serta kreativitas yang tertuang di dalamnya ikut menentukan kualitasnya. Tidak jarang kita temukan postingan dari satu blog ke blog lain memiliki nilai kemiripan 80%. Apakah itu dikarenakan kemalasan untuk mengakui kemampuannya dalam berkarya atau sebab lain, jawabannya ada di pihak kita masing-masing.

Untuk membuat sebuah blog tidak membutuhkan keahlian super (kalau cuma buat). Kita hanya perlu mempersiapkan Gmail sebagai email sekunder untuk dapat terhubung langsung dengan blogspot. Selain itu, sedikit jiwa seni perihal bentuk atau tampilannya. Untuk bentuk tampilan, kita juga gak perlu bersusah payah untuk melakukan renovasi sendiri. Sudah banyak template yang bisa kita dapatkan dengan desain yang sangat cantik dan menarik.

Langkah 1

Silahkan sahabat persiapkan email sekunder Gmail. Jika belum punya silahkan daftar. Kalo belum tahu caranya silahkan baca di sini.

Langkah 2

Silahkan kunjungi alamat http://blogspot.com dan ikuti perosedur seperti di bawah ini
Setelah sahabat mengunjungi blogspot.com maka sahabat akan dibawa ke laman seperti di atas. Silahkan klik "BUAT BLOG" dan sahabat akan di bawa ke laman seperti di bawah ini
Silahkan isi form pendaftaran seperti contoh di atas. Usahakan dalam mengisi form tidak ada kesalahan sehingga proses pembuatan lebih cepat. Setelah selesai mengisi form klik "LANJUTKAN" dan sahabat akan di bawa ke laman seperti di bawah ini

Jika sahabat sampai pada laman seperti gambar di atas, silahkan tulis judul blognya. Judul blog ini nantinya akan tampil di dasbor. Contohnya seperti blog Gaptek, pada judul blog di tulis Gabungan Pecinta Teknologi. Jika telah selesai menuliskan judul blog silahkan tentukan alamat blognya. Jangan lupa setelah menulis alamat blog klik "Cek Ketersediaan" dan jika tampilannya seperti gambar di atas berarti sudah ada judul blog yang sama maka sahabat diminta untuk memilih nama atau alamat alternatif dari blogger. Jika sahabat setuju pilih saja salah satunya dan jika tidak silahkan rubah seperti contoh pada gambar di bawah ini
Lakukanlah perubahan data seperti contoh pada gambar di atas sampai penulisan alamat blog sahabat di terima. Setelah itu klik "LANJUTKAN".

Kalau sahabat sudah sampai pada tahapan seperti gambar di atas, sahabat bisa merasa lega karena langah pembuatan blog sahabat tinggal sedikit lagi. Sebelum ke langkah selanjutnya, silahkan sahabat putuskan apakah sahabat akan mengola blog sahabat sesuai dengan template yang telah di sediakan oleh blogger atau ingin memilih template dengan mendownload template yang bisa kita dapatkan dimana-mana.

Usulan dari saya, sahabat gak usah membuang-buang waktu untuk menjadi mahir dalam mendesain blog. Kemahiran itu akan datang sendiri seiring keuletan sahabat dalam mempelajari blogspot. Oleh karena itu, dalam postingan ini, saya mengajak sahabat untuk memilih template yang sudah tersedia dan tampilannya lumayan bagus.



Memahami Menu Pengaturan Blogspot

Posted by GAPTEK on Rabu, 25 Agustus 2010 , under , , , , , | komentar (1)





BISMILLAAHIRROHMAANIRROHIIM

Untuk memahami menu Pengaturan pada blogspot, kita harus benar-benar paham karena semua pengaturan berakibat pada tampilan blog.

Dari banyaknya fitur yang ada, hanya beberapa fitur saja yang biasanya sering diedit karena peranan pentingnya pada tampilan blog kita


Untuk lebih memahami, kita coba untuk membahasnya satu persatu seusai dengan banyaknya penggunaan, artinya fitur yang banyak diedit.

Dasar

Beberapa fitur dasar yang sangat perlu kita edit

Judul
Pada judul ini menentukan judul blog kita. Seperti pada blog GAPTEK judul blognya adalah Gabungan Pecinta Teknologi

Uraian
Pada uraian ini bisa sahabat tulis apa saja sekiranya menambah tampilan judul lebih indah. Uraian ini akan tampil tepat di bawah judul Blog. Di kosongkan juga gak apa-apa

Tambahkan Blog Anda ke Daftar Kami
Pastikan sahabat pilih Ya

Biarkan Mesin Pencari Menemukan Blog Anda
Pastikan Pilih Ya karena itu penting untuk nasib blog

Tampilkan Link Posting Email
Pilih saja Tidak karena kebanyakan memang menonaktifkan

Konten Dewasa
Pastikan pilih Tidak

Pilih Editor Entri
Ceklis saja Editor yang diperbaharui

Aktifkan transliterasi
Pilih aja nonaktifkan karena fitur ini sering mengganggu tampilan. Jika perlu di tambahkan translit bisa kita gunakan widged

Kalau sudah mengadakan pengeditan pada Dasar jangan lupa klik SIMPAN PERUBAHAN agar pengeditan yang kita lakukan tersimpan.

Publikasi

Pada publikasi ini bisa kita gunakan untuk merubah alamat blog jika diperlukan. Setelah merubah alamat blog sahabat tulis kode verifikasinya dan klik SIMPAN SETELAN

Format

Pada format ini, hanya beberapa bagian yang biasanya sering di edit

Tampilkan Sebanyak Mungkin
Pada form angka tulis jumlahnya dan tentukan apakah hari atau posting. Pilih saja posting karena itu lebih fleksibel. Jumlah angka itu artinya jumlah postingan yang tampil dalam tampilan blog ketika kita pilih Home

Format Header Tanggal
Biar lebih simpel pilih saja format tanggal/bulan/tahun

Untuk pengaturan lainnya biarkan seperti sediakala, jangan dirubah. Jika sahabat ingin merubahnya tidak masalah, tapi itu jarang dilakukan.

Komentar

Tidak semua fitur komentar kita edit ulang, biasanya dibiarkan begitu saja sesuai dengan pengaturan aslinya. Adapun beberapa fitur yang biasanya di edit adalah

Komentar
Jika memilih tampilkan maka seluruh komentar tampil dan jika memilih sembunyikan maka seluruh komentar yang ada tidak terlihat

Siapa yang bisa berkomentar
Pilih saja siapa pun untuk memudahkan orang berkomentar

Penempatan formulir komentar
Pilih di semat di bawah entri

Tampilkan verifikasi kata untuk komentar
Jika sahabat ingin menampilkan pilih Ya jika tidak pilih Tidak

Untuk pengaturan yang lainnya biarkan saja seperti aslinya. Jika telah selesai mengedit jangan lupa klik SIMPAN SETELAN

Arsipkan

Pada arsipkan sahabat tentukan saja Frekuensi Arsip setiap bulan biar mengirit tempat.

Feed Situs

Untuk memasang feed sudah kita terangkan pada postingan mengedit template mentah

Untuk Email & Seluler, Open Id, dan Izin biarkan tetap pada aturan aslinya karena seperti itulah yang sering banyak dilakukan.


Memahami Menu Komentar blogspot

Posted by GAPTEK on , under , , , , , | komentar (0)






BISMILLAAHIRROHMAANIRROHIIM


Di dalam memahami menu Komentar pada blogspot tidak sesulit pemahaman lainnya. Kita hanya membahas bagaimana menampilkan komentar atau melihat daftar komentar spam.

Pada Komentar --- Diterbitkan, kita bisa melihat ada berapa komentar yang telah terbit pada kotak komentar. Untuk menghapusnya kita ceklis komentar yang akan di hapus kemudian klik Hapus.

Pada Komentar --- Spam, kita dapat melihat bebrapa pesan yang oleh Blogspot dianggap spam. Untuk menghapus sahabat ceklis dan klik Hapus, untuk mengalihkan komentar menjadi bukan spam, ceklis komentar yang sahabat anggap bukan spam kemudian klik Bukan Spam.


Gambar laman Komentar

Gambar laman Spam

Cukup mudah bukan untuk memahami menu KOMENTAR?


Memahami menu Posting pada blogspot 3

Posted by GAPTEK on , under , , , , , | komentar (0)








BISMILLAAHIRROHMAANIRROHIIM

Untuk menghilangkan format seperti pemasangan link, pewarnaan dan lainnya, sahabat blog yang ingin di format ke asal mula tanpa ada efek kemudian klik icon Remove formating seprti gambar di bawah ini.

Untuk cek susunan grammer jika menulis kalimat dalam bentuk english, klik aja iconnya seperti gambar di bawah ini. Tapi ini jarang sekali di gunakan.

Untuk menuliskan Labe sebuah pistingan, seperti "Daftar blogspot, cara buat blog, blogspot.com, cara merubah template blog, rubah template, upload template" sahabat tulis di form Label. Letak form Label seperti gambar di bawah ini.

Untuk melakukan pengeditan tanggal, jam, boleh tidaknya orang memberikan komentar sahabat klik pada "Post Options" dan akan melihat penambahan laman seperti di bawah ini.

Pada Komentar Pembaca ceklis ijinkan untuk mengijinkan orang memberikan komentar. Pada pos tanggal dan Waktu ceklis otomatis (artinya postingan secara otomatis mengikuti tanggal dimana sahabat memosting) dan untuk menentukan tanggal dan waktu sesuai keinginan ceklis Dijadwal Pada (sahabat tentukan sendiri waktu dan tanggalnya).

Untuk menyimpan perubahan peraturan sahabat klik "SAVED" dan untuk menampilkan postingan sahabat klik "TERBITKAN ENTRI"

Selanjutnya, sahabat melihat adanya EDIT HTML dan COMPOSE seperti gambar di bawah ini.

Kita bahas dulu COMPOSE. Compose ketika kita klik maka tampilan Entri baru dalam bentuk normal seperti halnya kita menulis di Word seperti gambar di bawah ini.


Kalau kita klik Edit HTML maka tampilannya adalah seluruh isi postingan dalam bentuk HTML. Misalnya

Tulisan dalam Garis penuh akan tampil kodenya seperti ini

<div style="text-align: justify;">
Tampilan Compose adalah menampilkan laman Entri posting dalam keadaan normal. Dan ini digunakan sewaku kita menulis postingan</div>

Jika dalam format penuh kiri seperti ini

<div style="text-align: left;">
penuh kiri</div&gt

Adapun fungsi dari Edit HTML ini memberikan informasi kita dalam bentuk-bentuk tulisan kode HTML yang membantu kita dalam memahami penulisan pada blogspot. Untuk pembahasan model-model penulisan yang lebih keren lagi akan kita bahas pada postingan lainnya.

Selain itu, untuk melakukan pengeditan ulang postingan, sahabat pilih Edit Entri dan akan menemukan laman seperti ini

Untuk mengedit postingan sahabat pilih Edit dan untuk melihat hasil editan klik Lihat. Untuk menghapus sahabat klik saja Hapus. Untuk menghapus lebih dari satu postingan ceklis postingannya kemudian klik Hapus Yang di pilih. Dan untuk menentukan jumlah postingan yangbisa kita lihat di laman Edit Entri sahabat tentukan jumlahnya di form Entri Per Halaman.


Memahami menu Posting pada blogspot 2

Posted by GAPTEK on , under , , , , , | komentar (0)





BISMILLAAHIRROHMAANIRROHIIM

Pada postingan sebelumnya sahabat sudah sedikit banyak memahami fungsi-fungsi postingan pada entri baru.

Sekarang kita akan melanjutkan untuk membahas secara detail satu persatu fung-fungsi dari Posting Entri Baru

Untuk memberikan warna latar tulisan agar lebih indah, sahabat blog kata atau kalimat yang ingin diberikan efek backgroun dan pilih warna bacgraoun seperti gambar di bawah ini. Cari warna yang di inginkan dan klik maka background kata atau tulisan sahabat akan berubah.

Untuk memasang link pada sebuah kata atau kalimat, blog kata atau kalimat yang akan diberikan link kemudian klik link seperti gambar di bawah ini

Ketika sahabat klik link maka akan timbul jendela konfirmasi seperti gambar di bawah ini. Pada text to display adalah kata atau kalimat yang akan diberikan link. Pada link to pilih web address dan isi form dengan link. Contoh http://kumpulgaptek.blogspot.com kemudian klik Ok.

Untuk memasukkan gambar pada blog silahkan klik icon gambar seperti gambar di bawah ini.

Ketika di klik sahabat akan di bawa ke jendela konfirmasi. Ceklis Upload Image dan untuk memilih image dari komputer klik "Pilih Berkas" kemudian klik Ok. Kalau dari web ceklis Web Address dan pada form tulis alamat gambarnya.

Untuk memasukkan video, klik icon insert video seperti gambar di bawah ini

Ketika di klik sahabat akan di bawa ke laman konfirmasi seperti gambar di bawah ini. Pilih Video Untuk Di Unggu kemudian cari tempat penyimpanan di komputer terus klik Ungguh.

Untuk memasukkan Jumper Break atau semacam garis pemisah di bawah sahabat klik saja iconnya seperti gambar di bawah ini

Untuk mengatur letak tulisan ke tengah, rata kanan, rata kiri, dan full laman sahabat klik pada paragraph kalimat dan klik pilih perataan seperti gambar di bawah ini. Pilih dan klik.

Untuk memasukkan nomor, sahabat blog kata atau kalimat yang akan diberikan penomoran dan klik icon nomor seperti gambar di bawah ini.

Untuk memberikan bullet pada kata atau kalimat, sahabat blog terlebih dahulu dan klik icon bullet seperti gambar di bawah ini.

Untuk memberikan Quote atau semacam kalimat yang berada dalam Tex Box, pilih kata atau kalimat yang akan diberikan Quote dan klik icon Quote seperti gambar di bawah ini.