Showing posts with label Tutorial Blog. Show all posts

Browse » Home » Tutorial Blog

Membuat Tepi Gambar Bershadow Dengan CSS 3

Posted By

Anasku On Aug 29, 2010 at 3:57 PM

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :

Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.

Mengatasi Judul Widget / Gadget Yang Tidak Boleh Kosong

Posted By

Anasku On Jun 30, 2010 at 6:38 PM

Pada zaman dahulu kala blogger mengijinkan widget dengan tanpa judul (title) namun sekarang kebebasan itu dikekang oleh blogger, jadi setiap widget/gadget harus ada title atau judulnya. Namun sering kali kita tidak menginginkan gadget/widget tanpa judul, dan jika dipaksa akan muncul pesan perintah error "Required field must not be blank" atau intinya judulnya harus ada dan tidak bisa dilanjutkan bila tanpa judul.

Nah bagaimana mengatasinya?

Caranya cukup mudah kita tinggal mengisi title atau judul gadget dengan code

<!--->

lihat contoh dibawah ini

Dan hanya cukup code diatas tidak perlu tambahan apa-apa lagi.

Sekian deh cukup semoga bermanfaat bagi Anda

Panduan Awal Membuat Blog

Posted By

Anasku On Apr 9, 2009 at 11:54 AM

Blog sebuah gaya hidup baru era digital yang sudah meluas di berbagai kalangan, dengan tujuan masing-masing orang membuat blog untuk kepentingan personal, komersial maupun organisasi. Untuk saling bertukar pikiran, opini maupun saran itulah salah satu tujuan orang membuat blog. Tapi sebagian orang masih belum bisa tentang cara membuat blog. bagaimanakah membuat blog secara gratis itu?

langkah pertama yang harus Anda punya adalah alamat email. Jika belum mempunyai alamat email silahkan ikuti panduan dibawah ini.

Penulis meyarankan membuat email di gmail (google mail) karena satu layanan dengan blogger yang menyediakan layanan blog secara gratis.

Panduan Membuat Email Gmail

Masuk alamat www.gmail.com
Lalu klik tombol "Buat akun"
Lalu setelah itu akan muncul form-form yang harus Anda isi dengan benar dan sesuai data diri Anda.
Setelah semuanya terisi dan vertifikasi kata sudah diisi dengan benar klik tombol "Saya Menerima. Buat Akunku."
kalau semua form diisi dengan benar alamat dan mengklik tombol "Saya menerima. Buat.." alamat emailpun sudah jadi.

Nah setelah kita punya alamat email kita bisa membuat blog dengan cara sebagai berikut :

Selain email dari Gmail kita pun bisa mendaftar blog dengan alamat email yang lainya misalnya Yahoo Mail, Plasa dan yang lainya

Oke kita bahas cara membuat blog dari awal.

Cara Membuat Blog di Blogger

Masuk alamat www.blogger.com
Lalu klik tombol navigasi "Ciptakan Blog Anda"
Lalu isi form yang mucul dengan benar sesuai data diri Anda

Setelah diisi dengan benar contreng kotak "Saya Menerima..." Lalu klik tombol "Lanjutkan"
Lalu akan muncul konfigurasi nama blog Anda seperti dibawah ini, isi judul blog dan alamat blog Anda

Setelah diisi klik tombol "Lanjutkan"
Setelah langkah ke empat selesai sekarang pilih sebuah template Anda. Pilih template yang Anda sukai kemudian klik tombol "Lanjutkan"
Dan blog Anda sudah jadi apabila ingin memposting silahkan klik tombol "Mulai Blogging"

Mudah kan membuat blog itu? dengan blog Anda bisa lebih keren lho . Happy blogging!!

Mengganti Background Blog Dengan CSS

Posted By

Anasku On Dec 23, 2008 at 7:29 PM

Background atau latar belakang pada blog adalah bagian yang paling dasar pada blog, banyak template blog yang sama yang banyak dipakai, maka untuk memberi ciri khas pada blog Anda hal yang paling dasar dan yang paling mudah adalah mengganti warna background pada blog Anda atau dengan tambahan gambar pada background blog Anda.
Kali ini Saya akan menulis tutorial singkat blogspot tentang mengganti background dengan CSS, Mau tau caranya?
perhatikan dibawah ini.

Langkah pertama adalah masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Lalu cari CSS dari body seperti dibawah ini

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kalau mau mencari CSS diatas perhatikan code yang berwarna hijau saja.

perhatikan Code CSS background diatas
$bgcolor adalah variabel definisi, jika Anda ingin menggantinya bisa dengan code warna misalnya ganti dengan warna putih code warnanya adalah : #FFFFFF atau warna hitam #000000. Atau warna yang lain bisa dilihat disini.

Mengganti background blog dengan gambar :

untuk membuat background gambar kita perlu sebuah gambar yang sudah diupload di hosting. Atau Anda bisa mencari di google image search dan copy URL gambarnya.
Kalu sudah tersedia gambar yang mau dijadikan background perhatikan dibawah ini.

background:#FFFFFF url(URL_GAMBAR) ;

URL_GAMBAR ini bisa Anda ganti dengan URL gambar yang Anda pilih misalnya gambar :

back

URLnya : http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg

Mengantur Background Gambar

background:#FFFFFF url(URL_GAMBAR) no-repeat top left;

no-repeat : berarti gambar didak akan mengulang, Bisa Anda ganti dengan

repeat : Mengulang-ulang gambar
repeat-x : mengulang secara horizontal
repeat-y : Mengulang secara vertikal

top left : Adalah posisi background bisa anda ganti misalnya bottom right

sedikit tambahan jika Anda mau mencari koleksi background

http://www.patterncooler.com/
http://www.bgpatterns.com/
http://patterns.ava7.com/

Nah sekian tutorial mengganti background blog, sedikit semoga membantu Anda.

Cara Pasang Iklan Di Blog (KumpulBlogger)

Posted By

Anasku On Dec 20, 2008 at 8:15 PM

Anda sudah merasa lama didunia perbloggeran?, Anda merasa tidak mendapatkan apa-apa dari blog selain kepuasan hati?. Jangan salah blogger juga bisa dijadikan sumber penghasilan lho, Antara lain dengan cara memasang iklan di blog Anda dengan jasa periklanan Indonesia kumpulblogger.com, Anda tidak perlu bersusah-susah mencari iklan sendiri tinggal daftar terus pasang scriptnya di blog Anda karena kumpulblogger.com sudah mencarikan iklan untuk Anda jadi Anda tinggal terima beresnya saja.
Apalagi kalau blog Anda pengunjungnya sudah banyak pasti uang akan mengalir dengan sendirinya. Kumpulblogger.com menghitung setiap text link atau banner yang disediakan dengan cara PPC (pay per clik) atau setiap ada pengunjung yang mengklik zona iklan Anda.

Gimana enak gak? mau? ikuti caranya dibawah ini

Langkah pertama yang harus Anda lakukan adalah mendaftar kumpulblogger.com disini dengan cara mengklik link "register now" pada pojok kanan atas di situs kumpulblogger.com

Lalu masukkan alamat email Anda lalu klik tombol "Register" otomatis password untuk Log In sudah ada di email Anda. Anda bisa mengubah passwordnya setelah Anda Log In

Lalu setelah Anda Log In sebelum pasang scriptnya klik link "Tambah Blog" Pada menu Blogger

Isi form sesuai perintahnya lalu klik tombol "Submit"

Kalau sudah klik link "Script Text Advertising untuk Blog anda" dan pilih style iklan yang Anda sukai lalu copy scriptnya dan tempatkan di blog Anda dengan cara masuk menu Layout (tata letak) pada dashboard blogger lalu pada menu Page element (elemen halaman) pilih tempat yang Anda sukai dan klik "add a gadget" lalu pilih "HTML/JavaScript" dan Paste Script tadi yang Anda copy di kumpulblogger.com

Nah selesai

Selamat datang didunia Blogger dan selamat datang didunia periklanan.

Ehhh sampai lupa mengucapkan terima kasih pada yang sudah daftar kumpulblogger.com melalui Refferal saya. makasih ya

Cara Mudah Posting Code HTML

Posted By

Anasku On Nov 3, 2008 at 5:52 PM

Pasti Anda bingung pada waktu posting Code HTML di blog Anda, pasti yang muncul bukan codenya melainkan hasil dari code HTML-nya, nah untuk yang ingin menulis tentang tutorial blog pasti code HTML banyak diposting, Nah untuk para penulis yang belum tau caranya posting code HTML nih saya kasih caranya.

Caranya cukup mudah, Encode saja code HTML di situs dibawah ini

Nah caranya cukup mudah tinggal taruh code HTML yang ingin di posting lalu klik tombol "Encode", Nah hasil dari Encode itu yang Anda posting di Blog Anda.

Sekian Artikel yang cukup pendek ini semoga dapat membantu Anda!

Membuat Link Read More Beserta Judul Postingya

Posted By

Anasku On Aug 25, 2008 at 4:28 PM

Terinspirasi oleh blognya kang rohman yang link read morenya seperti dibawah ini

>> Lanjut membaca “Alternatif Warna Kotak Komentar”

Nah pada link read more yang seperti diatas tersisip judul postingnya sesuai dengan postingan yang diberi read more.

Nah Sebelum Anas membahas untuk lebih mendalamnya bagi yang belum tau buat Read More Silahkan Baca (membuat Read More versi pertama dan membuat read more versi kedua)

Tapi yang kita bahas kali ini adalah cara membuat link Read More beserta Judul postingnya di Read More versi pertama

Oke kita langsung aja ke cara pembuatanya dehh

1. Log In ke Blogger Dan masuk ke menu Layout lalu masuk Edit HTML

2. Jangan Lupa centang kotak "Expand Widget Templates"

3. Kemudian Cari Link Raed More Anda misalnya Punya aku seperti ini

<p><data:post.body/>

<a expr:href='data:post.url'>...Baca Selengkapnya </a></p>

Kamu Lihat tulisan yang tercetak tebal diatas itu adalah Link Read More punya aku

4. Kamu tambahkan Code <data:post.title/> dan Kamu tempatkan di sebelah Link read More, Lihat Contoh Dibawah

<p><data:post.body/>

<a expr:href='data:post.url'>...Baca Selengkapnya dari.."<data:post.title/>" </a></p>

Nah diatas Adalah Contoh dari Link read More Punya ku.. kamu bisa merubah sesuai keinginan kamu

5. Save..

Sekian deh semoga bermanfaat bagi Anda...

Ucapan terimakasihku pada Kang rohman sukses buat Anda

Mengatur Link DI Blog

Posted By

Anasku On Aug 13, 2008 at 6:17 PM

Nahhh jika dulu Anas udah membuat tutorial tentang cara membuat warna link warna-warni tapi sekarang Anas akan membagi sedikit ilmu saya kepada saudara-saudaraku sekalian yang ingin mengubah link pada blog kalian... dalam perbincangan kali ini Anas akan membahas tentang warna font link, warna link jika pointer diarahkan, warna link yang sudah dikunjungi dan lain-lain
langsung saja tanpa basa-basi lagi karena sudah cape' basa-basinya :D

Masuk menu Layout kemudian masuk ke Edit HTML kemudian cari Code CSS seperti dibawah ini

a:link {
color:#346ba4;
text-decoration:underline;
}
a:visited {
color:#800000;
text-decoration:underline;
}
a:hover {
color:#56b9ff;
text-decoration:underline;
}

Nah jik anda ingin mengotak-atik akan saya terangkan dibawah ini..

a:link { <<<-- Link aktif
color:#346ba4; <<<---- Ini adalah warna Link aktif yang belum tersentuh apapun text-decoration:underline;
}
a:visited { <<-- Link jika sudah dibuka/diklik
color:#800000; <<<--- Ini adalah warna Link jika URLnya sudah pernah dikunjungi text-decoration:underline;
}
a:hover { <<--Link jika pointer berada pada Link
color:#56b9ff; <<<--- Ini adalah ini adalah warna jika Pointer diarahkan pada Link text-decoration:underline;
}

Ganti tulisan yang berwarna merah dengan code warna yang anda sukai, Untuk code warna anda bisa cari di DISINI.
Tulisan yang tercetak biru diatas menandakan Link bergaris bawah anda bisa merubah menjadi tidak bergaris bawah dengan mengganti tulian underline menjadi none

Jika anda ingin mengatur Link Postingan anda berbeda dengan yang lain tambahkan Code CSS dibawah ini

#main .post-body a:link{
color:#346ba4;
text-decoration:underline;
}
#main .post-body a:visited{
color:#800000;
text-decoration:underline;
}
#main .post-body a:hover{
color:#56b9ff;
text-decoration:none;
}

Rubahlah sesuai keinginan kamu seperti cara diatas tadi

Jika gambar anda juga terinfeksi link dan anda juga ingin merubah tampilan jika pointer diarahkan pada gambar tambahkan Code Css dibawah ini

a img{ border-width:0}
.post-body img{ margin:5px; border:1px solid #444}

Jika Anda Ingin mengatur Link main wrapper/Link dibawah postingan dan juga diatas yang biasanya memberikan informasi Label, Komentar, Author dan lain-lain tambahkan Code Css Dibawah ini

#main-wrapper a:link{
color:#c13a10;
text-decoration:none;
}
#main-wrapper a:visited{
color:#800000;
text-decoration:none;
}
#main-wrapper a:hover{
color:#800000;
text-decoration:underline;
}

Jadi Tampilan Css Jika Lengkap seperti Dibawah ini

a:link {
color:#346ba4;
text-decoration:none;
}
a:visited {
color:#800000;
text-decoration:none;
}
a:hover {
color:#56b9ff;
text-decoration:underline;
}
#main .post-body a:link{
color:#346ba4;
text-decoration:underline;
}
#main .post-body a:visited{
color:#800000;
text-decoration:underline;
}
#main .post-body a:hover{
color:#56b9ff;
text-decoration:none;
}
a img{ border-width:0}
.post-body img{ margin:5px; border:1px solid #444
}
#main-wrapper a:link{
color:#c13a10;
text-decoration:none;
}
#main-wrapper a:visited{
color:#800000;
text-decoration:none;
}
#main-wrapper a:hover{
color:#800000;
text-decoration:underline;
}

Dahhh Silahkan Atur sendiri sesuai keinginan dan imajinasi anda

Berapa Page Rank Blog Kamu

Posted By

Anasku On Jul 31, 2008 at 6:54 PM

Halo semua apa kabar jumpa lagi nih dengan Anas, Dalam perbincangan kali ini Anas akan Bahas tentang Page Rank...? Apa itu Page Rank?
Aku copy paste dari om wiki nih silahkan baca aja sendiri okey

PageRank adalah sebuah algoritma yang telah dipatenkan yang berfungsi menentukan situs web mana yang lebih penting/populer. PageRank merupakan salah satu fitur utama mesin pencari Google dan diciptakan oleh pendirinya, Larry Page dan Sergey Brin yang merupakan mahasiswa Ph.D. Universitas Stanford.
Trus bagaimana cara kerja Page Rank?

Sebuah situs akan semakin populer jika semakin banyak situs lain yang meletakan link yang mengarah ke situsnya, dengan asumsi isi/content situs tersebut lebih berguna dari isi/content situs lain. PageRank dihitung dengan skala 1-10.
Contoh: Sebuah situs yang mempunyai Pagerank 9 akan di urutkan lebih dahulu dalam list pencarian Google daripada situs yang mempunyai Pagerank 8 dan kemudian seterusnya yang lebih kecil.

Banyak cara digunakan search engine dalam menentukan kualitas/rangking sebuah halaman web, mulai dari penggunan META Tags, isi dokumen, penekanan pada content dan masih banyak teknik lain atau gabungan teknik yang mungkin digunakan. Link popularity, sebuah teknologi yang dikembangkan untuk memperbaiki kekurangan dari teknologi lain (Meta Keywords, Meta Description) yang bisa dicurangi dengan halaman yang khusus di desain untuk search engine atau biasa disebut doorway pages. Dengan algoritma ‘PageRank’ ini, dalam setiap halaman akan diperhitungkan inbound link (link masuk) dan outbound link (link keuar) dari setiap halaman web.

PageRank, memiliki konsep dasar yang sama dengan link popularity, tetapi tidak hanya memperhitungkan “jumlah” inbound dan outbound link. Pendekatan yang digunakan adalah sebuah halaman akan diangap penting jika halaman lain memiliki link ke halaman tersebut. Sebuah halaman juga akan menjadi semakin penting jika halaman lain yang memiliki rangking (pagerank) tinggi mengacu ke halaman tersebut.

Dengan pendekatan yang digunakan PageRank, proses terjadi secara rekursif dimana sebuah rangking akan ditentukan oleh rangking dari halaman web yang rangkingnya ditentukan oleh rangking halaman web lain yang memiliki link ke halaman tersebut. Proses ini berarti suatu proses yang berulang (rekursif). Di dunia maya, ada jutaan bahkan milyaran halaman web. Oleh karena itu sebuah rangking halaman web ditentukan dari struktur link dari keseluruhan halaman web yang ada di dunia maya. Sebuah proses yang sangat besar dan komplek.

Mau tahu algoritma page rank?
Dari pendekatan yang sudah dijelaskan pada artikel konsep pagerank, Lawrence Page and Sergey Brin membuat algoritma pagerank seperti di bawah :

Algoritma awal PR(A) = (1-d) + d ( ( PR(T1) / C(T1) ) + … + ( PR(Tn) / C(Tn) ) )

Salah satu alogtima lain yang dipublikasikan PR(A) = (1-d) / N + d ( ( PR(T1) / C(T1) ) + … + ( PR(Tn) / C(Tn) ) )

* PR(A) adalah Pagerank halaman A
* PR(T1) adalah Pagerank halaman T1 yang mengacu ke halaman A
* C(T1) adalah jumlah link keluar (outbound link) pada halaman T1
* d adalah damping factor yang bisa diberi antara 0 dan 1.
* N adalah jumlah keseluruhan halaman web (yang terindex oleh google)

Random surfer model merupakan pendekatan yang menggambarkan bagaimana sesungguhnya yang dilakukan seorang pengunjung di depan sebuah halaman web. Ini berarti peluang atau probabilitas seorang user mengklik sebuah link sebanding dengan jumlah link yang ada pada halaman tersebut. Pendekatan ini yang digunakan pagerank sehingga pagerank dari link masuk (inbound link) tidak langsung didistribusikan ke halaman yang dituju, melainkan dibagi dengan jumlah link keluar (outbound link) yang ada pada halaman tersebut. Rasanya semua juga menganggap ini adil. Karena bisa anda bayangkan apa jadinya jika sebuah halaman dengan rangking tinggi mengacu ke banyak halaman, mungkin teknologi pagerank tidak akan relevan digunakan.

Metode ini juga memiliki pendekatan bahwa seorang user tidak akan mengklik semua link yang ada pada sebuah halaman web. Oleh karena itu pagerank menggunakan damping factor untuk mereduksi nilai pagerank yang didistribusikan sebuah halaman ke halaman lain. Probabilitas seorang user terus mengkilk semua link yang ada pada sebuah halaman ditentukan oleh nilai damping factor (d) yang bernilai antara 0 sampai 1. Nilai damping factor yang tinggi berarti seorang user akan lebih banyak mengklik sebuah halaman sampai dia berpindah ke halaman lain. Setelah user berpindah halaman maka probabilitas diimplemntasikan ke dalam algoritma pagerank sebagai konstanta (1-d) . Dengan mengeluarkan variable inbound link (link masuk), maka kemungkinan seorang user untuk berpindah ke halaman lain adalah (1-d), hal ini akan membuat pagerank selalu berada pada nilai minimum.

Dalam algoritma pagerank yang lain, terdapat nilai N yang merupkan jumlah keseluruhan halaman web, jadi seorang user memiliki probabilitas mengunjungi sebuah halaman dibagi dengan total jumlah halaman yang ada. Sebaagai contoh, jika sebuah halaman memiliki pagerank 2 dan total halaman web 100 maka dalam seratus kali kunjungan dia mengunjungi halaman itu sebanyak 2 kali (catatan, ini adalah probabilitas).

Wahhh Panjang amattt diatass aku juga lum sempet baca semuanya aku copas aja dari om wikipedia.org heheheeee yawdah deh tapi sebelum kamu dapet pagerank kamu harus baca cara daftar di searach engine... kalau sudah mari silahkan cek page rank kamu dibawah

Check Page Rank of any web site pages instantly:

This free page rank checking tool is powered by Page Rank Checker service

Wahh tools diatas juga saya ambil dari prchecker.info jadi selengkapnya kamu bisa kunjungi website tersebut okey...

Udah ya Anas udah Capekkkk Tapi tips SEO selanjutnya akan menyusul okey..

Mengganti Haloscan Ke Comment Blogger

Posted By

Anasku On Jul 16, 2008 at 5:51 PM

Oughhh sekarang para blogger menggunakan commentsbox dari blogger yaitu "embedded comments" ini salah satu dari fitur blogger in draft. Tapi dulu sebelum "embedded comments" muncul banyak para blogger menggunakan Commentsbox dari haloscan yang fasilitasnya sama seperti Comments box dari blogspot yang sekarang. Tapi para blogger berbondong-bondong mengganti dengan comments box dari blogspot sendiri dengan alasan sering mendapat masalah dari haloscan dan haloscan adalah pihak luar dari blogspot. jadi kalau ada yang asli ngapain gak pakai yang asli/orisinil iya gak.
Tapi buat yang terlanjur menggunakan haloscan dan pengen kembali ke jalan yang benar, maksud aku kembali ke Comments asli blogspot yang bisa muncul di bawah postingan langsung ini dibawah ada caranya:

pertama-tama ke menu Layout--->Edit HTML
"Download Full Tempaltes" Untuk membackup Template
Centang Checkbox "Expand widgets Tempaltes"
Kemudian Cari Code dibawah

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>


<script src='http://www.haloscan.com/load/lovemanisa' type='text/javascript'> </script>
<span class='post-comment-link'>
<a class='comment-link' expr:href='"http://www.haloscan.com/comments/lovemanisa/" + data:post.id + "/"' expr:onclick='"HaloScan(" + "\""+ data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCount('<data:post.id/>');</script>
</a> |
<a class='comment-link' expr:href='"http://www.haloscan.com/tb/lovemanisa/" + data:post.id + "/"' expr:onclick='"HaloScanTB(" + "\""+ data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCountTB('<data:post.id/>');</script>
</a>
</span>


</b:if>
</b:if>

</span>

Kemudian ganti Code diatas Dengan Code dibawah ini

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<b:if cond='data:post.numComments == 1'>1

<data:top.commentLabel/>

<b:else/>

<data:post.numComments/>

<data:top.commentLabelPlural/>

</b:if></a>

</b:if>

</b:if>

</span>
Kemudian ke langkah selanjutnya, cari Code dibawah

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>


<script src='http://www.haloscan.com/load/lovemanisa' type='text/javascript'> </script>
<span class='post-comment-link'>
<p><a class='comment-link' expr:href='"http://www.haloscan.com/comments/lovemanisa/" + data:post.id + "/"' expr:onclick='"HaloScan(" + "\""+ data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCount('<data:post.id/>');</script>
</a> |
<a class='comment-link' expr:href='"http://www.haloscan.com/tb/lovemanisa/" + data:post.id + "/"' expr:onclick='"HaloScanTB(" + "\""+ data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCountTB('<data:post.id/>');</script>
</a></p>
<script expr:src='"http://www.haloscan.com/comments/lovemanisa/" + data:post.id + "/?m=1"' type='text/javascript'/>
<noscript><a expr:href='"http://www.haloscan.com/comments/lovemanisa/" + data:post.id + "/"'>Comments</a> | <a expr:href='"http://www.haloscan.com/tb/lovemanisa/" + data:post.id + "/"'>Trackback</a></noscript><br/>
</span>


</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
kemudian langkah selanjtnya adalah gantilah Code Diatas dengan Code dibawah ini

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>

<a name='comments'/>

<b:if cond='data:post.allowComments'>

<h4><b:if cond='data:post.numComments == 1'>1

<data:commentLabel/>:<b:else/><data:post.numComments/>

<data:commentLabelPlural/>:

</b:if>

</h4>

<dl id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/>

</a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/>

</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'>

<data:comment.body/>

</span><b:else/>

<p><data:comment.body/></p>

</b:if></dd><dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

<p class='comment-footer'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p>

</b:if>

<div id='backlinks-container'>

<div expr:id='data:widget.instanceId + "_backlinks-container"'>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

</div>

</div>

</b:includable>
Setelah langkah diatas selesai mari kita lanjut ke langkah selanjutnya
Cari Code dibawah Ini

<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</p>
Kemudian ganti Dengan Code dibawah ini

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
selesai kemudian Save Template dehhh

Jika anda ingin membuat Commentsbox Blogger (baca artikel sebelumnya)

Sekian deh semoga bermanfaat yaaaaaa jangan lupa is komentar yahhhh

Buat Read More Versi Pertama

Posted By

Anasku On Jul 15, 2008 at 11:15 AM

Yupz apa jadinya jika postingan yang amat banyak menutupi halaman utama kita... waduh-waduh kan jadi kurang menarik tuh apalagi jika ada Iklan di bawah postingan kita yang amat banyak pasti akan menambah ketidak nyamanan mata, weleh lihat deh website besar pasti ada "read more" nya.... hah apa kau gak iri tuh melihat yang kaya gitu..... yawdah deh biar anda tidak penasaran dan pengen buatnya ayo ikuti langkah saya disini key..... perhatikan dibawah

Beranjak ke menu Layout --> Edit HTML
Centang cexbox"Expand Widget tempalte"
Lalu carilah code dibawah (untuk mempermudah tekan ctrl+F untuk kotak pencarian browser)
<div class='post-header-line-1'/>
Nah dibawah Code diatas ada code yang mirip kaya dibawah, ingat code dibawah berbeda-beda di setiap template blogger

<div class='post-body entry-content'>

<p><data:post.body/></p>
Lalu ganti kode diatas dengan kode dibawah ini

<div class='post-body entry-content'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Selengkapnya....</a>
</b:if>

Nah kamu perhatikan saja Code yang berwarna biru karena code yang berwarna merah berbeda-beda di setiap template blogger

Perhatikan Code diatas Tulisan Selengkapnya.... adalah link untuk menuju ke postingan keseluruhan yang bisa kamu ganti dengan sesuka hati misalnya Read More.... atau Baca Selengkapnya...
Lalu simpan Template

Nah langkah pertama sudah selesai... lalu kita melangkah ke langkah selanjutnya

Lalu Ke menu Setting Lalu pilih menu Formatting
Lalu Cari Kotak Post Template Isikan kode dibawah

<span class="fullpost">

</span>
Kemudian Di save

Tips Posting:
Disini tulisan sebelum link Read more....<span class="fullpost">
Disini adalah postingan sisa dari diatas
</span>

Buat Komentar Dibawah Postingan

Posted By

Anasku On Jul 9, 2008 at 3:15 PM

Seperti yang sudah saya jelaskan dulu disini, itu adalah membuat layanan Kotak komentar dibawah postingan lewat haloscan, tapi kali ini saya akan kasih tau tentang caranya buat kotak komentar dari fitur blogger terbaru yaitu blogger in draft (sini).
Kata Mas Kendhin sih kaya begini jika kita belum membuat kotak komentar di haloscan sih bisa... tapi kalau kita sudah buat di haloscan kita harus membuangnya dulu (cara membuang komentar dari haloscan menyusul) yawdah aku akan kasih tau caranya tentang buat komentar ini buat yang belum daftar di haloscan... ayo ikuti petualngan gw di bawah ini.....

Masuk draft.blogger.com ingan draft.blogger.com bukan blogger.com
Terus ke menu Setting ---> Comments kemudian ganti "Comment Form Placement" menjadi "Embedded below post"
Kemudian tekan Save Setting
Lalu ke menu Layout ---> Edit HTML kemudian
Lalu centang "expand widget templates" lalu cari Code dibawah ini

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
Kemudian ganti dengan Code dibawah ini

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>
Lalu Simpan.... dan lihat hasilnya..

Coba kamu cek ada sebuah comments gak di bawah artikel yang kamu posting...

Membuat Kotak Komentar Dibawah Postingan (Haloscan)

Posted By

Anasku On Jul 4, 2008 at 6:01 PM

silahkan baca yang ini dulu, karena saya pikir lebih baik pakai embeded comments blogger

Kotak komentar adalah kotak untuk pengunjung penulis komentar terhadap postingan yang anda tulis, bisa kritikan, masukan bahkan pertanyaan-pertanyaan pembaca.
Nah jika di wordpress kotak layanan ini langsung ada dibawah postingan tanpa kita membuat dengan sendirinya, tapi jika di blogger kita harus mengklik link yang menunjukkan kita supaya dapat menuliskan komentar kita dan itu akan membuka satu jendela lagi untuk Comments Box di blogger, Masalahnya adalah pengunjung akan malas memberikan komentar-komentarnya terhadap postingan kita soalnya terlalu ribet.
Jangan khawatir bagi pengguna Blogger ni ada solusinya.
Nah ada suatu Situs yang menawarkan jasa Komentar gratis dan bisa dipasang di bawah postingan kita yaitu Haloscan
Tapi ingat jika kita menggunakan haloscan ini maka komentar kita yang terdahulu sebelum kita mendaftar haloscan akan hilang jadi anda harus merelakan jika mau menngunakan trik ini.
Langkah yang paling penting adalah membackup template anda dulu biar nanti jika ada kesalahan anda bisa mengembalikan template anda seperti semula okey.
langsung saja gw akan kasih tau caranya:

Buka website www.haloscan.com
Daftarkan diri anda kemudian Log In ke sana
Setelah login berhasil maka akan muncul beberapa menu. Pertama-tama pilih menu setting. Didalam menu Setting ada beberapa pengaturan yang harus disi silahkan atur sesuai dengan keinginanmu. Supaya kotak komentarnya muncul dibawah postingan, ganti status "open in popup window" menjadi "off". kamudian simpan.
Kemudian ke Menu Template, pilih template Comments Box yang kamu sukai, tapi sekedar tips supaya menarik dan serasi dengan blog kamu maka kamu pilih template yang sesuai dengan warna blog kamu
Kemudian beranjak kelangkah selanjutnya yaitu ke menu Instal
Kemudian Pilih Blogger Or Blogspot kemudian tekan tombol Next
Silahkan kamu Log In ke blogger dan kalau sudah kamu Backup Template kamu, Setelah sudah kamu backup kemudian duplicate template yang sudah kamu download, Yang satu buat jaga-jaga bila gagal, Buat yang belum tau caranya Backup template baca
Kemudian kamu Browse template yang kamu backup tadi kemudian klik tombol Upload Blogger Tempalte
Jika sudah berhasil klik Download New Template kemudian simpan
Jika sudah kembali lagi ke blogger dan pilih menu "Layout-->Edit HTML" kemudian Upload Template yang telah kamu Download dari Haloscan tadi

Jreng... jrengg.... jika sudah berhasil kamu save dan lihat apakah kamu berhasil atau nggak, kalau berhasil Comments Box berada dibawah posting kamu jika belum berhasil kamu usaha aja okey...

Nah Jika pengen menampilkan komentar terakhir di sidebar atau footer gini caranya:
pastikan kamu sudah Log in di haloscan kemudian ke menu Dashboard nha disitu kan ada recent comments trus dibawahnya ada link tulisannya gini "put this widget on your site" nha kamu klik link tersebut, setelah itu dibawahnya akan muncul kotak yang berisi kode. Copy kode tersebut dan pasang di blog kamu

MemBackup Dan MengUpload Template

Pada pertemuan kali ini kita akan membahas caranya Membackup dan mengupload Template Blogger kita.
Jika kalian Blogger pemula pasti belum tau cara dan fungsinya, cara yang ini lazim digunakan Untuk mengotak-atik template blogger kita.
Sedikit pengertian untuk sobat:

Membackup Template : Biasa gunakan sebelum kita mengotak-atik template kita, biar nanti jika ada kesalahan akibatnya tidak fatal dan kita bisa mengembalikan template kita seperti semula.
Caranya adalah Ke Menu Layout kemudian Edit HTML kemudian Download Full Template.

Mengupload Template: gunanya buat memasang template yang sudah ada dalam disk komputer biasanya tempalte befrormat *XML, jika anda download template anda pasti berformat XML dan untuk mengebalikan template yang tadi anda download anda bisa menguploadnya.
anda juga bisa download Template di Situs yang penawarkan template blogger da anda Upload.
Caranya di menu Layout kemudian Edit HTML dan disebelah tulisan Upload a template from a file on your hard drive : ada Form nah kamu Browse File XML kamu kemudian Upload.
gak jauh kox ama caranya mendownload template cuma dibawahnya doank

Membuat Multi Blog Blogger

Posted By

Anasku On Jul 2, 2008 at 3:47 PM

Apakah itu Multi blog di blogger?
Multi blog di blogger adalah anda bisa membuat lebih dari satu blog dengan hanya menggunakan satu acount saja.
Tapi jika ada salah satu blog anda yang melanggar TOS blogger atau peraturan yang ditetapkan oleh blogger maka semua blog anda akan ke Banned dan tidak bisa dibuka.
tapi jika anda Ngeblognya aman-aman saja gw kira gak papa n gak bakal ke banned.
oke langsung saja buat anda yang udah tau resikonya gw kasih tau tapi sebenarnya gampang kox tapi hasrat gw untuk menulis yang ini kuat banget jadi gw tulis aja :D

Langkah pertama adalah tentunya Log In ke blogger
setelah sudah Log ini Ke bagian Dashboard
kemudian Create a Blog di bagian atas
Langkah selanjutnya seperti membuat Blog baru okey

Sekian Moga aja Bermanfaat dan sampai jumpa

Dasar Text HTML

Posted By

Anasku On Jun 26, 2008 at 4:21 PM

Pada perjumpaan dengan saya yang ganteng ini :D wehh kita akan membahas tentang pemakaian dasar Teks HTML yang sering anda gunakan dalam berbagai hal dan berbagai kalangan dimanapun anda berada :D Diantaranya untuk menulis comments di Friendster , memanagement blog dan masih banyak yang lain langsung saja saya akan menerangkan satu per satu tentunya:

Jenis Font :
<font face="times new roman">Jenis FONT</font> =Jenis FONT
<font face="verdana">Tulisan Anda</font> =Tulisan Anda
<font face="Tahoma">Tulisan Anda</font> =Tulisan Anda
<font face="Arial">Tulisan Anda</font> =Tulisan Anda
catatan:
>> Text "Tulisan Anda" adalah teksnya gantilah dengan teks yang anda inginkan
>> Tulisan yang berwarna merah adalah jenis font, gantilah sesuai dengan keinginan anda
>> Jika font yang anda pakai tidak terdapat pada sistem pengunjung WFO anda. Jenis font akan menjadi font standar

Ukuran Huruf:
<font size="-2">Teks </font> =Teks
<font size="-1">Teks </font> =Teks
<font size="+1">Teks</font> =Teks
<font size="+2">Teks</font> =Teks
<font size="+3">Teks</font> =Teks

Warna Huruf:
<font color="#FF0000">Warna MERAH </font>
=Warna MERAH

Jika anda Mau Cari Code warna Html ni http://www.colorschemer.com/online.html

Catatan: Text yang berwarna merah adalah Code warna yang dapat kamu ganti dengan kode warna sesuai pilihan kamu

Header:
<H1>CONTOH</H1> =

CONTOH

<H2>CONTOH</H2> =

CONTOH

<H3>CONTOH</H3> =

CONTOH

<H4>CONTOH</H4> =

CONTOH

<H5>CONTOH</H5> =

CONTOH

<H6>CONTOH</H6> =

CONTOH

Variasi Teks:
Teks miring : <i>Teks Miring</i> =Teks Miring
Teks Tebal : <b>Teks Tebal</b> =Teks Tebal
Teks bergaris bawah : <u>Teks Bergaris Bawah</u> =Teks Bergaris Bawah
Text Bergaris : <strike>Teks Salah</strike> =~~Teks Salah~~

Efek Pada Teks :
Teks berkedip : <blink>Teks Berkedip</blink> =Teks Berkedip
Teks bergerak dari kanan ke kiri : <marquee>Teks Bergerak</marquee> =Teks Bergerak
Teks bergerak dari atas ke bawah : <marquee direction="down" width="300px" height="50px">Teks Bergerak <br> dari atas ke bawah</marquee> =Teks Bergerak
dari atas ke bawah

catatan :

Tanpa value "XXXpx" untuk nilai tinggi dan lebar, sering menyebabkan script tidak berfungsi pada browser Firefox dan Netscape
Ganti "down" dengan "up" untuk arah dari bawah keatas.
Ganti "down" dengan "right" untuk arah dari kiri ke kanan.
Tambahkan scrolldelay="XX" untuk mengatur kecepatan teks
pembatasan area teks bergerak dengan menggunakan width tidak berpengaruh pada browser Firefox dan Netscape

Teks Dengan Link :
Link untuk e-mail : <a href=mailto:mailku@mail.com> e-mailku </a>
Link untuk URL : <a href="URL_adress">situsku.com</a>
Tambahkan "target="_blank" jika anda ingin link tersebut terbuka dengan jendela sendiri.
contoh: <a href="http://tutorial-jitu.blogspot.com"target="_blank">tutorial blog</a>
Posisi Teks :
Teks di kiri: <p align=left>Posisi</p> =
Teks di tengah: <p align=center>Posisi</> =
Teks di kanan: <p align=right>Posisi</p> =

Membuat Screen Capture/Contoh Gambar

Posted By

Anasku On Jun 25, 2008 at 7:18 PM

Jumpa lagi dengan saya dalam acara yang sama dan ditempat yang sama juga yaitu di sini. :D.
kali ini kita akan membahas tentang Screen Capture...

Apa itu Screen Capture?
Screen Capture adalah gambar yang kita ambil dari layar monitor yang sedang kita gunakan yang berupa sebagian Jendela atau Layar penuh dan juga anda bisa menyeleksi sendiri bagian yang mau di capture/diambil

Apa kegunaanya?
Gunanya sebagai contoh gambar dari artikel yang kita tulis biar pengunjung blog anda mudah mengerti dan gampang pemahamanya.

Contoh saya akan Mengapture Sebagian Jendela dari aktifitas di monitor saya

Gimana? Sudah Faham belum? Kalau belum gw kasih tau caranya aja....
caranya adalah dengan software screen capture yang banyak jenis dan gayanya.. wah kaya anak muda aja banyak gayanya. Hehe maksud gw adalah dengan tampilan yang berbeda-beda

gw akan kasih kamu softwarenya yang gratis dan mudah untuk dipelajari gak besar kok cuma 1 Mb
mau?? silahkan klik text download dibawah ini

DOWNLOAD

Subscribe to:Rss Feed

Membuat Tepi Gambar Bershadow Dengan CSS 3

Mengatasi Judul Widget / Gadget Yang Tidak Boleh Kosong

Panduan Awal Membuat Blog

Mengganti Background Blog Dengan CSS

Cara Pasang Iklan Di Blog (KumpulBlogger)

Cara Mudah Posting Code HTML

Membuat Link Read More Beserta Judul Postingya

Mengatur Link DI Blog

Berapa Page Rank Blog Kamu

Read More Versi Kedua

Mengganti Haloscan Ke Comment Blogger

Buat Read More Versi Pertama

Buat Komentar Dibawah Postingan

Membuat Kotak Komentar Dibawah Postingan (Haloscan)

MemBackup Dan MengUpload Template

Membuat Multi Blog Blogger

Dasar Text HTML

CONTOH

CONTOH

CONTOH

CONTOH

CONTOH

CONTOH

Membuat Screen Capture/Contoh Gambar

Kategori Artikel

Info Terbaru

Site Info

Recent Comments