Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan

Cara Mudah Membuat Banner

Untuk membuat banner (Link Baner) tentunya merupakan hal yang mudah bagi yang mengerti software2 desain seperti Adobe Photoshop, Image Ready, Corel Draw dll. Tapi bagi yang tidak tahu dengan software2 tersebut pastilah merasa sulit. Tapi jangan kawatir dan jangan berkecil hati, berikut ini akan aku tunjukkan cara yang mudah untuk membuat link banner tanpa harus mengerti software2 desain. Hanya dengan memilih dan sedikit otak-atik maka kamu nantinya bisa memiliki link banner yang cukup menarik. Mau tahu caranya?

Cara membuatnya sangat mudah, yaitu:
1. Buka situs http://cooltext.com
2. Disana nanti akan langsung terpampang macam-macam banner yang disediakan. Kamu tinggal pilih baner yang kamu suka.
3. Setelah itu akan muncul fomr untuk menstting banner yang telah km pilih tadi. Kamu bisa mensetting textnya, warna text, warna background, ukuran, effect, dll.
4. Kalo sudah merasa cocok lalu klik tombol "Rander Logo"
5. Tunggu sebentar sampai proses rendering selesai.
6. Maka bannermu akan langsung jadi, km bisa mengambilnya dengan mengklik link "Download Image". dan simpan banner kamu.
7. Biasanya file bannernya akan berupa file gif.

Setelah km mendapatkan bannernya maka langkah selanjutnya supaya bannernya bisa kamu pasang yaitu dengan menguyplaod file tadi ke webhosting. Kamu bisa menguplaodnya di photobucket.com. disanan nanti kamu akan mendapat link untuk banner kamu.

Trus untuk memasang supaya bisa menjadi seperti yang ada dibawah ini, maka ikutilah langkah TUTORIAL INI


Membuat Kotak Komentar Blogger di Bawah Postingan

Akhirnya datang juga....
Setelah lama ditunggu-tunggu oleh para penggemar setianya, akhir blogger/blogspot menerbitkan juga comment box atau kotak komentar yang langsung muncul berada dibawah postingan. Kalau dulu hanya berupa link "Post a Comment", maka yang sekarang lain, yg sekarang kotak komentarnya langsung muncul persis dibawah postingan (seperti kotak komentar dibawah ini). Dengan adanya kotak komentar yang seperti ini, akupun rela mengganti kotak komentarku yang dulu (haloscan) dengan comentbox yang ini. Walaupun kotak komentar ini masih dalam draft tapi sudah bisa dinikmati.

Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.

1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post" (lihat gambar dibawah)



3. Kemudian klik "Save Setting"

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>


7. Kemudian ganti kode tersebut dengan kode 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> </b:if>


8. Lalu simpan template kamu.

Lihat deh hasilnya, coba kamu klik salah satu postingan kamu, maka dibawahnya akan muncul kotak komentar seperti punyaku ini (Bagi yang berhasil).

Membuat Artikel yg Berhubungan (Related Post)

Keuntungan menampilkan "Artikel yang berhubungan" atau "Related Post", "Related Article" adalah para pembaca blog bisa dengan mudah menemukan informasi lain yang masih ada hubungannya dengan artikel yg sedang mereka baca. Contohnya seperti yang ada dibagian akhir dari artikel ini, disitu ada link-link dari artikel yang berhubungan yang berdasarkan pada kategori ato label yang sama. Nha mau tahu cara membuatnya?


Caranya cukup mudah, ikuti langkah2 berikut ini:
1. Login ke blogger Blogger
2. Pilih menu "Layout-->Edit HTML"
3. Beri tanda centang pada kotak "Expand Widgets Template".
4. Kemudian download "SCRIPT INI"
5. Buka file tersebut kemudian copy semua script yang ada didalamnya.
6. Setelah itu cari kode ini <data:post.body/> dan letakkan script tadi dibawahnya. Untuk blog yang ada "readmore"nya biasanya akan terdapat 2 kode. Nha km taruhnya dabawah kode yang pertama.
7. Kalo sudah simpan template km dan lihat hasilnya.

Tambahan:
Setelah jadi, jika kamu ingin merubah tulisan "Related Posts by Categories" maka cari kode tersebut di HTML, trus ganti dengan text/tulisan yg kamu suka.

Cara Membuat Website di 000webhost

Seperti yang sudah dijelaskan pada artikel sebelumnya (baca disini), 000webhost merupakan layanan webhosting gratis yang top abis. Dengan memakai layanan webhosting ini kamu bisa membuat web yang support database. Sedangkan untuk keperluan blog km bisa mengupload file2 kamu seperti gambar, animasi, suara dll untuk digunakan di dalam blogmu. Tapi dalam ketentuan mereka, kita tidak boleh hanya menaruh file-file kita di hosting tersebut tanpa membuat webnya, jika tidak maka account kita akan dihapus. Nha pada tutorial kali ini, akan aku coba jelaskan sedikit tentang bagaimana cara membuat web di 000webhost. Mungkin tutorial kali ini akan menjadi pengalaman baru bagi yang belum pernah membuat website, karena website itu sedikit beda dibanding dengan blog.
OK kita mulai aja tutorialnya.

1. Bagi yang belum punya account di 000webhost silahkan daftar DISINI. Bagi yang sudah punya, silahkan login di account webhost kamu.
. Bagi yang baru mendaftar maka akan langsung disuguhi form pendaftaran yang salah satu isinya adalah kita disuruh untuk memasukkan domain yang kita inginkan. Ada 2 pilihan domain yang akan kita pakai, yg pertama yaitu dengan menggunakan domain yang sudah kita beli (biasanya nama domainnya "www.domain.com" / "www.domain.net" dll) , yang kedua yaitu dengan menggunakan sub domain gratisan yang dari webhosting tsb (biasanya nama domainnya "www.domain.net78.net" ato "www.domain.890m.com" dll). Pilihan tersebut ada pada kolom "I want to host my own domain" dan "or, I will choose your free subdomain"

Iklan: Bagi yang ingin beli domain silahkan beli di dodoldomain.com, murah lho.

3. Kemudian isikan data2 yang diminta di kolom2 yang lain, trus klik tombol "Create My Account"
4. Kemudian masuk ke "Enter Control Pannel".
5. Pada dasarnya ada dua pilihan dalam pembuatan website ini, yaitu dengan membuat sendiri webnya kemudian kita upload atau dengan menggunakan fasilitas "Website Builder" yang ada. Jika kamu sudah mahir dan pintar bikin web maka "Upload" file adalah pilihan yang tepat. Tapi jika kamu belum bisa membuat web sendiri, maka pilihlah "Website Builder", karena dengan fasilitas ini kita bisa membuat web tanpa harus mendesain terlebih dahulu, kita tinggal memilih template yang disediakan kemudian isi dengan menu2 dan konten yang kita inginkan.



6. Untuk "website builder" disana nanti sudah ada petunjuknya, silahkan diikuti.
7. Kalo sudah jadi jadi webnya silahkan dicek dengan mengetikkan alamat domain / URL kamu di browser. Nha seperti itu lah tampilan webmu.

"CARA UPLOAD FILE DI 000WEBHOST"

Berikut ini akan dijelaskan cara menguplaod file di 000webhost.

1. Login di 000webhost.
2. Kemudian klik link "Go to CPanel"



3. Kemudian pilih "File Manager" (lihat gambar no.5 diatas).
4. setelah itu klik link "Public Html"



5. Untuk upload file klik pada tombol "Upload"
6. Kemudian nanti akan muncul tombol2 seperti "Browse", Klik tombol tersebut kemudian cari file yg ingin diupload. Jika sudah lalu klik tombol/icon "Centang/Cek".
7. Klik tombol "Back" (gambar panah ke kiri) untuk kembali ke menu sebelumnya dan melihat apakah file yang km upload tadi sudah ada atau belum.
8. Kamu bisa mengupload file2 gambar, suara, video, html, php, javascript dll.
9. Untuk mendapatkan link gambar atau file yg lain, misal untuk keperluan membuat float image (gambar sonic yg dipojok), banner, atau yg lain caranya yaitu km klik kanan pada link "open" (di deretan file gambar tersebut) kemudian pilih "copy link location" (bagi yg menggunakan Mozilla). Nha link yg km copy itulah URL atau alamat gambar yg bisa kamu gunakan untuk mengganti misal gambar sonic yang ada di "float image".

Lho...tutorialnya kok jadi begini ya :t
Apa gak nyimpang dari judulnya tuh? :D
Ah gak papa deh....

Forum Bloger Indonesia

Ayo..ayo..ayooo.......
siapa yang mo gabung di forum bloger indonesia. Di forum tersebut kita bisa saling bertukar pikiran dan berbagi informasi seputar dunia blog. Ada juga trik-trik blognya, bukan cm blogger/blogspot tapi Wordpress juga ada lho. Trus kita juga bisa tanya2 disana, dan yang akan menjawab bisa siapa aja. Disana km juga bisa promosi blogmu ato mengiklankan apa aja, Gratis lho.. Ayo buruan gabung, mumpung masih anget..
Oh ya disini alamatnya : http://blogoholic.info

Contest on Jackbook.com

This contest will not be determined by a draw like most contests. Luck will absolutely play no role here whatsoever as the top thee (3) contestants with the most number of points on July 10 (12:00am Jack's Time) will automatically go home with the price. Basically, what you have to do is collect all the points that you can get.

Prizes up for Grabs
  • 1st Place : $50 hard cash + 10,000 EntreCard Credits
  • 2nd Place : 1 month 125×125 Banner ad on Jackbook.com (On the sidebar) value $50 + 5,000 EntreCard Credits
  • 3rd Place : 5,000 EntreCard Credits


How to Earn Points

2 Points x The Blog's Pagerank ? Placing a blogroll link from your blog to www.JackBook.com. 1 Point for a Zero pagerank Blog

2 Points x The Blog's Pagerank ? Placing a blogroll link from your blog to RomeUy.com. 1 Point for Zero pagerank Blog

5 Points x The Blog's Pagerank ? 5 points for every blog post. Jackbook will not set a requirement for how many words your blog post should contain for as long as three (3) links be present on it and the links will be on a paragraph. (2 Points for Zero pagerank Blog)

Again, that is 5 points for every blog post. The more blogs you make with three links on it, the more points you get.

Jackbook will not count links from newly created blogs to avoid the creation of new blogs for the sole purpose of gaming this contest. Also reserve the right not to count links from blogs that do not qualify for the contest. Don't worry, if this will ever happen, jackbook will make sure to inform the contestant including the reason why they were not able to accept the entry so that he/she could take the links down ASAP.

Copied from Jackbook.com Contest

Mengganti Kotak Komentar Haloscan menjadi Commentbox Blogspot

Dulu sebelum kotak komentar blogger/blogspot bisa muncul dibawah postingan, banyak yang menganti kotak komentarnya dengan commentbox dari pihak ketiga, misalnya dari haloscan. Namun setelah blogger merilis kotak komentar yg dibawah postingan maka kini banyak yg berbondong beralih ke kotak komentar original dari blogspot ini. Tapi bagi yg sudah terlanjur memakai haloscan dan sudah terlanjur mengobrak-abrik templatenya tentu akan sayang jika harus mengganti templatenya demi mendapatkan kotak original blogspot ini. Nha berikut ini akan aku ulas bagaimana cara mengembalikan kotak komentar haloscan menjadi kotak komentar original dari blogger.
Ikuti tutorial berikut:

1. Login ke blogger, kemudian pilih menu"Layout--> Edit HTML"
2. Beri tanda centang pada kotak "Expand widget template"
3. Kemudian cari kode berikut :

<!-- start haloscan (part 1) -->
<script src='http://www.haloscan.com/load/kendhin' type='text/javascript'> </script>
<span class='post-comment-link'>
<a class='comment-link' expr:href='&quot;http://www.haloscan.com/comments/kendhin/&quot; + data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScan(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCount(&#39;<data:post.id/>&#39;);</script>
</a> |
<a class='comment-link' expr:href='&quot;http://www.haloscan.com/tb/kendhin/&quot; + data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScanTB(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCountTB(&#39;<data:post.id/>&#39;);</script>
</a>
</span>
<!-- end haloscan -->


4. Kalo sudah ketemu maka gantilah dengan kode dibawah ini :

<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>


5. Kemudian cari kode berikut ini :

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


6. Kalo sudah ketemu trus ganti dengan kode dibawah ini:

<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 expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<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='data:comment.url' 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>


7. Trus simpan template kamu.
8. Jika inging menampilkan kotak komentar blogger/blogspot dibawah postingan maka ikutilah LANGKAH DISINI

Semoga beruntung....

Membuat Menu Vertikal (Vertical)

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }


Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');


Pilihan Warna menu vertikal :

blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif


3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.

Dah gitu aja. Gampang kan???? :D

Menampilkan Recent Comments (Komentar Terbaru)

Menampilkan recent comments atau komentar terbaru fungsinya adalah supaya kita bisa dengan mudah mengetahui siapa yang baru saja memberikan komentar pada blog kita dan di postingan mana mereka berkomentar. Recent Comments ini bisa kita pasang di halaman utama blog kita.
Beginilah cara membuat Recent Comments (Komentar Terbaru):

1. Login ke blogger lalu pilih menu "Layout"
2. Kemudian copy script berikut ini :
<script style="text/javascript" src="http://kendhin.890m.com/comments.js"></script><script style="text/javascript">var a_rc=8;var m_rc=false;var n_rc=true;var o_rc=40;</script><script src="http://bintangelectronik.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script>

- Angka 8 merupakan jumlah komentar yang mau ditampilkan.
- Ganti http://bintangelectronik.blogspot.com dengan nama blogmu.

3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript" Lalu masukkan script diatas kedalam kotak yg disediakan.

Coba dilihat blogmu, langsung jadi deh. Oh ya recent comments ini bisa juga dipasang didalam "Tab View"

Setting Domain dan Hosting Untuk Wordpress

Sekali-kali buat tutorial untuk wordpress ah, :D
Edisi perdana tutorial wordpress kali ini akan aku coba jelaskan tentang bagaimana cara setting domain dan hosting untuk wordpress. Untuk domain bisa menggunakan sub domain atau bisa menggunakan domain gratis dari co.cc atau bisa juga beli domain murah di www.dodoldomain.com. Sedangkan untuk hostingnya bisa menggunakan hosting gratisan dari 000webhost atau bisa juga membeli hosting murah dari superinhost.com
Ok mari kita mulai saja tutorialnya.

* SETTING DOMAIN
Kita harus memiliki domain terlebih dahulu. Kemudian mengarahkan domain kita ke hosting yg kita pilih. Caranya yaitu dengan mengganti name server domain kita. Bagi yang memakai hosting dari 000webhost biasanya name servernya adalah ns01.000webhost.com dan ns02.000webhost.com sedangkan bagi yang menggunakan hosting dari superinhost.com maka name servernya adalah ns1.superinhost.com dan ns2.superinhost.com

* SETTING HOSTING DAN INSTALL WORDPRESS
1. Masuk ke cpanel Hostingmu lalu cari dan pilih icon fantastico

kalo di 000webhost iconnya ini
2. Setelah itu pilih "wordpress" dan lalu "new installation"

3. Kemudian isikan data-data pada form yg muncul. Kosongkan kolom "Install in directory" jika pingin install wordpress di domain pokok.

4. Kemudian klik tombol "Install Wordpress". Tunggu sebentar kemudian klik tombol "Finish Installation".
5. Untuk untuk masuk ke administrator wordpressnya biasanya melalui URL http://namadomainmu.com/wp-admin. DIsitu km bisa posting2 dan macem.

OK jadi deh wordpressnya. Oh ya, kalo pake hosting sendiri kita bisa ngedit2 template wordpressnya lho.
Selamat Mencoba....