Kejutan Internet: Agustus 2008

Menghilangkan Judul Blog Di Header

Judul blog berguna untuk memberi informasi tentang blog kita dan sangat penting dalam search engine.. tapi jika di blogger judul blog tampak di header dan jika kita membuat background header yang kita buat sedemikian unik, bagus dan keren menurut kita akan mengganggu pemandangan background header kita...

Nah pada pembicaraan kali ini Anas akan membuat suatu tuorial sederhana untuk menghilangkan judul blog di header namun tidak hilang judul blog kita sebenarnya hanya saja tidak tampak pada header. Yupzz kemaren Anas udah pernah buat tutorial sederhana mengenai cara menghilangkan Tanggal posting tapi sekarang Anas akan membuat tutorial cara menghilangkan Judul Blog di header... oke langsung saja

Masuk menu Layout kemudian masuk Edit HTML kemudian cari Code di blog Anda yang mirip seperti dibawah

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

nahh seperti halnya menghilangkan tanggal posting kita tambahkan Code Css visibility:hidden; Kedalam Css Diatas Sehingga kurang lebih menjadi seperti dibawah

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

Jika Sudah Simpan pengaturanya....

sekian semoga bermanfaat.. jangan lupa isi komentar key

Menghilangkan Tanggal Posting

Blogger Hack

Tanggal posting berguna untuk memeri informasi kapan postingan Anda terPublish sehingga pengunjung dapat melihatnya...Tapi jika Anda kurang menyukai tanggal posting tampak pada Blog Anda saya akan kasih tau cara untuk menyembunyikanya.. oke langsung saja yaa

Masuk menu Layout kemudian masuk Edit HTML dan cari code yang mirip seperti ini di Blog Anda

h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
}

nah jika sudah ketemu tambahkan code Css visibility:hidden; kedalam Css diatas sehingga menjadi seperti

h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
visibility:hidden;
}

kemudian Simpan pengaturanya..

Sekian Dulu semoga bermanfaat

Membuat Link Read More Beserta Judul Postingya

Tutorial Blog

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

Mengubah Comment Nofollow Jadi Follow

Blogger Hack

Seperti yang udah dibahas mas hakimtea dan mas hilman yaitu menbubah commnents di blogger yang mulanya Nofollow menjadi Follow. Sekarang Anas juga akan menjelaskan sedikit mengenai Comments Follow atau Yang sering dipakai sebagai SEO Friendly ini.. Jadi jika yang ada mengisi komentar di blog Anda, sang komentator itu akan mendapatkan Backlink dari anda seperti halnya tukeran link.. Dan keuntungan bagi Anda adalah jika Anda mengubah Comments Follow akan sering diberi komentar oleh pengunjung Blog Anda karena Anda merubah comments Anda menjadi Follow yang akan di data oleh Robot google. nahh itu sedikit pengertian kalau Anda ingin yang lebih detail baca artikel mas Hakimtea yang ini...

Jika Anda ingin mengubah Comments Anda di blogspot yang standartnya Nofollow menjadi Follow ikuti langkah berikut

Masuk Ke Blogger kemudian masuk ke menu Layout kemudian masuk Edit HTML

Centang "Expand Widget templates" dan Cari Code seperti dibawah

Nah Hapus tulisan yang tercetak tebal dan merah diatas sehingga Codenya menjadi..

Nah kemudian kamu harus juga mengubah Backlinknya Menjadi Follow Dengan Langkah sebagai berikut

Masih dalam Edit HTML dan "Expand Widgets Templates" masih tercentang

Cari Code HTML seperti Dibawah

hapus tulisan yang tercetak tebal dan merah diatas sehingga Codenya seperti dibawah

Jika sudah selesai semua kemudian Save

Nahh artikel diatas aku rangkum dari blog mas Hakimtea yang ini..
sekian semoga bermanfaat

Jangan Lupa taruh Gambar dari mas hakimtea di sidebar kamu untuk menandakan Comments kamu Follow

Widget Dari Feedjit

Widget - Gadget Blog

Bagi Anda para Blogger dan Webmaster tiada salahnya jika menggunakan Widget yang satu ini.. yaitu widget dari feedjit yang mempunyai banyak fitur menarik... Nah disini anda bisa memlilih widget yang anda sukai.. ada 4 widget yang bisa anda pilih yaitu :

LIVE TRAFFIC FEED

Nah dengan menggunakan Widget ini Anda bisa mengetahui pengunjung terakhir Blog Anda dan dari Negara Mana mereka Berasal juga Anda dapat melihat dari mana mereka semulanya sehingga bisa menuju ke blog anda misalnya dari google atau dari blog orang lain yang memasang Link anda..lihat contoh dibawah...

Jika Anda Ingin Pasang taruh Code Dibawah

LIVE TRAFFIC MAP

Widget ini membuat Anda bisa melihat Peta dari Vistitor blog Anda...

Jika Anda Ingin Pasang Taruh Code Dibawahh

LIVE RECOMMENDED READING

Dengan Widget ini Anda bisa mengetahui Artikel mana yang sering dibaca oleh pengunjung

Jika Anda ingin pasang taruh code dibawah ke dalam blog Anda..

LIVE PAGE POPULARITY

Widget Ini memberi Informasi Artikel mana Yang paling populer di blog Anda

Pasang Code Dibawah

Nah dari keempat wodget diatas pilih yang Anda sukai dang sesuai kebutuhan Anda.. Jika anda ingin baca lebih selengkapnya kunjungi saja www. feedjit.com

Jika Anda belum tau cara memasang Widget Ini kedalam Blog Anda: Masuk menu Layout Kemudian Page Elements kemudian pilih tempat yang Anda sukai lalu klik Add A Gadget lalu pilih HTML/JavaScript dan taruh codenya....

Sekian Semoga Bermanfaat... MERDEKA... MERDEKA....

Mengatur Link DI Blog

Tutorial Blog

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

Menampilkan Status Camfrog

Widget - Gadget Blog

Sebelum saya berbicara dengan cara pembuatanya saya kasih tau dulu apa itu camfrog..? Camforg adalah layanan Chatting yang hampir mirip dengan Yahoo messenger, kamu bisa dapatkan softwarenya di camfrog.com atau saya juga sahre softwarenya yang lebih lengkap dan gratis disini.. nah jika anda para camfroger tidak ada salahnya mencoba trik ini karena pengunjung blog/website kamu bisa mengetahui kamu lagi Online gak di camfrog... Seperti halnya dulu Anas juga udah pernah posting tentang cara menampilkan status yahoo messenger dan kali ini pun Anas juga akan kasih tau cara menampilkan satus Camfrog.. karena saya juga camfroger maka tidak ada salahnya jika saya share pengetahuan saya tentang camfrog salah satunya yaitu trik ini hehee..

Nahh dibawah ini adalah contoh dari tampilan satus camfrog
ONLINE

OFFLINE

Nah jika kamu pengen menbuat ikuti cara dibawah ini

Log In Ke blogger lalu Masuk Menu Layout--->Page Elements
Lalu pilih tempatnya Dan Add a Gadget
Dan pilih HTML/JavaScript Kemudian Masuukan Code dibawah Kedalamnya

<a href='camfrog:im:Mbah_Metal_'> <img src='http://camfrog.com/getstatus.php?nick=Mbah_Metal_'/>
</a>

Tulisan yang berwarna merah ganti dengan Id/Nickname Camfrog kamu Dan tulisan yang berwarna biru bisa kamu ganti dengan tulisan "Add" jika anda ingin link gambar itu me-add Id camfrog anda
Kode diatas juga bisa kamu sisipkan di Edit HTML juga..
Simpan dan lihat hasilnya...

Atau cara yang yang lain kamu bisa generate di http://www.camfrog.com/add.phtml

Selesai dehhhh gampang kann...

Membuat Label/Tag Clouds

Widget - Gadget Blog

Nahhh pada kali ini saya yang bernama Anas akan menulis artikel yang biasanya digunakan di wordpress dan technorati yaitu Tag Clouds.. jika anda belum mengerti tentang Tag Clouds saya akan menerangkan sedikit pengertianya..
Tags Clouds adalah sebuah Label yang hurufnya tidak rata maka dari itu dinamakn Tags Clouds yang artinya Tag adalah Label dan Clouds adalah awan jadi rengkumanya adalah Label yang seperti awan atau tidak rata.. Nah jika Tags yang hurufnya berbentuk rata biasanya itu adalah tags yang populer di blog anda jika kecil itu kurang populer... jadi pengertianya adalah semakin besar hurufnya maka menandakan kepopuleran dari Tags tersebut... makanya anda membuat tags dengan kata-kata yang sering digunakan dan tepat dengan isi tagsnya tul gakk

Nah jika Anda belum tau Tags Clouds Saya akan memberikan contohnya niii dibawahhh

komputer, Blogging, Bisnis Online
laptop, Widget Blog, Yahoo, Google,
blogeer, wordpress, SEO
trik-tips Blog
Pernak-pernik Blog,
other

Nah contoh diatas adalah tampilan Label yang telah dimodifikasi menjadi Tags Clouds... Semakin besar hurufnya maka semakin populer categorinya

Gimanna anda pengen buat gakk kalau pengen nihh dibawah aku ajari caranya..

Log in Ke Blogger Lalu masuk Menu Layout kemudian Edit HTML
Kemudian Taruh Code dibawah diatas Code ]]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Lalu juga taruh Code Dibawah tepat dibawah Code <head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Lalu Scroll Kebawah coba cari Code seperti ini <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Lalu Ganti code diatas dengan Code dibawah Ini

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>
Selesai Deh kemudian Save

Jika kamu Faham tentang CSS kamu bisa mengotak-atik tampilanya sendiri...

Nahh gimana gampang thoo dengan Tags Clouds kan kita bisa mengetahui Tags mana yang paling populer iya kannn..... kalau begitu sekian dulu yahhh Anas udah gak tahan lagi nih mau belajar hal-hal yang belum aku mengertii.... Jangan lupa isi komentar yahhh.... biar aku bisa membenahi artikel ini jika ada kesalahan .... thanks

CSS3		Javascript
HTML5		Photoshop
PHP		CorelDraw