Kejutan Internet: Oktober 2008

Memodifikasi Selection Teks

Mungkin Blog Anda mengandung sumber informasi bagi orang dan memungkinkan orang itu harus mencetaknya (print) misalnya Anda menulis artikel tentang Sumber bahan pembelajaran yang dibutuhkan oleh para pelajar dan pelajar itu membutuhkan untuk dicetak. Kadang orang lain menseleksi text yang dibutuhkan saja, nah maka dari itu supaya lebih menarik kita memodifikasi selektion text supaya terkesan lebih indah jika Ada orang lain yang menseleksi atau memblock text yang dibutuhkan pada blog Anda.

Mau ?
Baca dibawah ini...

Pertama yang harus kita lakukan adalah baca doa supaya berjalan dengan lancar, setelah itu minum obat anti mabok biar gak mabok ntar diperjalanan (kaya mau naik pesawat aja)

Kalau langkah diatas sudah Anda lakukan, pastikan sudah Log In ke blogger dan masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Taruh code dibawah ini diatas code ]]></b:skin>

::-moz-selection {
background: none;
color: #90EE90;
}

Perhatikan

background:none; itu adalah backround text yang di block dan none adalah kosong apabila ingin membuat warna background ganti saja dengan code warna misalnya #FFFFCC adalah warna kuning, cari code warna Disini

Color:#90EE90; adalah warna text yang di block atau seleksi Anda bisa menggantinya dengan code warna, lihat code warna disini

kalau sudah silahkan SAVE dan lihat hasilnya

Nah cara ini hanya bisa digunakan di browser mozilla firefox, jangan berkecil hati karena browser mozilla lebih banyak digunakan

Nah sekian dulu artikel kali ini, Saya harap dapat membantu Anda.

Tambahan Icon Pada Label Atau Category

Blogger Hack

Berkaitan dengan artikel yang kemaren yaitu tambahan Icon pada post footer dan artikel kali ini hampir serupa mengenai tambahan icon, seperti yang kita tau Label/category adalah pengelompokan beberapa artikel yang terkait, dan sebagai icon yang cocok adalah Folder karena folder adalah tempat untuk mengelompokkan file-file terkait atau kelompok file tertentu. Sekarang saya akan membuat artikel yang cukup ringan tapi semoga bermanfaat bagi para blogger untuk membuat blognya lebih hidup dan menarik! Istilah dalam iklan di TV adalah lebih punya taste gitu loh!. Maka dari itu ijinkanlah saya membuat artikel untuk menambah Icon pada Label/category.

Sebenarnya dalam label/category icon standarnya yaitu list style yang berbentuk bulat tapi kali ini Saya mencoba untuk menggantinya jika ada list stylenya dan menambah jika belum ada list stylenya, moga-moga nggak bingung dengan penjelasanku...

Nah sekarang langsung ke TKP (tempat kejadian project) yaitu ke blogspot!
silahkan Baca, Pahami dan Praktikan!

pertama harus log in ke blogger, kedua masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Taruh Code dibawah ini diatas Code ]]></b:skin>

/*Label
----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(http://i296.photobucket.com/albums/mm169/anasku/folder-explorer-16x16.png) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #063E3F;
line-height: 1.2em;
}

Nah tulisan yang tercetak merah diatas adalah URL gambar icon bisa kamu ganti punya kamu sendiri atau bisa menggunakan icon folder yang saya sediakan dibawah ini

http://i296.photobucket.com/albums/mm169/anasku/folder-16x16.png

http://i296.photobucket.com/albums/mm169/anasku/folder-open-16x16.png

http://i296.photobucket.com/albums/mm169/anasku/folder-explorer-16x16.png

http://i296.photobucket.com/albums/mm169/anasku/forder-biru.png

Nah kalau sudah silahkan SAVE untuk melihat hasilnya silahkan buka blog Anda.

Nah setelah Anda menggunakan trik kali ini pasti blog Anda akan kelihatan Cool kaya yang punya mungkin :D

nah sekian dulu! artikel yang ringan ini semoga sedikit membantu Anda untuk mempercantik Blog Anda,

Semoga bermanfaat

Tambahan Icon Pada Post Footer

Blogger Hack

Terinspirasi dari blognya pencuri code yang bernuansa Seo Contest sapa lagi kalau bukan blognya kang noval, dalam blog kang noval tersebut post-footernya menarik karena ada tambahan Iconya, jadi post footer akan kelihatan sedikit lebih expressif.
Jika belum tau apa itu post footer area lihat aja gambar diatas, Nah post footer adalah informasi dari postingan yang kita tulis di blogger yang tempatnya dibawah postingan kita, dalam post footer area terdapat infromasi-informasi tentang postingan yang ada diatasnya, misalnya siapa penulisnya, jam berapa dipublikasikan, sudah ada berapa komentar, artikel tersebut masuk dalam kategori apa dan juga yang lainya.

Gimana apakah Anda ingin membuat post footer area Anda lebih expressif dengan tambahan Icon?
Ikuti petualangan saya dibawah ini.

Seperti biasa yaitu masuk menu Layout (tata letak) lalu masuk meni Edit HTML.

taruh code CSS dibawah ini diatas code ]]></b:skin>

/* post fotter
---------------------------*/
.post-author {
background: url(http://i296.photobucket.com/albums/mm169/anasku/profile.gif) no-repeat;
padding-left: 20px;
color: #c70823;}
.post-timestamp {
background: url(http://i296.photobucket.com/albums/mm169/anasku/jam.gif) no-repeat;
padding-left: 15px; margin-left: 10px;
}
.post-labels {
background: url(http://i296.photobucket.com/albums/mm169/anasku/forder-biru.png) no-repeat;
padding-left: 25px; margin-left: 10px;
}
.comment-link {
background: url(http://i296.photobucket.com/albums/mm169/anasku/comment-icon.gif) no-repeat;
padding-left: 15px; margin-left: 10px;
}
.post-backlinks {
background: url(http://i296.photobucket.com/albums/mm169/anasku/favorit.gif) no-repeat;
padding-left: 15px;
}

Kalau sudah tinggal Save dan jadi deh...

Nah code yang berwarna merah diatas adalah URL gambar... bisa kamu ganti dengan gambar sendiri, ingat sesuaikan ukuranya..

Nah gimana caranya gampang kan??

jika ada pertanyaan silahkan tanya aja gak usah malu-malu okey.

Vertikal Navigator Menu

Menu-menu

Masih ingatkah sama Horisontal Navigator menu yang Saya posting sebelumnya?. Diantara Navigator menu dan Vertical menu mempunyai perbedaan bentuk, yaitu jika navigator menu horisontal menunya memanjang kesamping (horizontal) dan jika vertikal menu memanjang kebawah (vertikal), menu ini cocok jika dipasang di sidebar karena bentuk menunya memanjang kebawah, lain halnya dengan horisontal menu yang bentuknya menyamping cocok jika dipasang di header.

Disini saya akan coba membuat menu vertikal simple namun stylish dan tidak memakan waktu yang lama untuk loadingnya karena tidak disertai gambar untuk backgroundnya.

tidak perlu memakan waktu yang lama untuk membuatnya dan tidak perlu ketrampilan yang cukup untuk membuatnya, hanya tinggal copy-paste code yang saya berikan ini.
Apakah Anda tertarik untuk memasang widget menu vertikal ini kedalam blog Anda?
Silahkan ikuti langkah-langkah dibawah ini.

Pastikan sudah Log In ke blogger.

Masuk menu Layout kemudian masuk menu Edit HTML.

Kemudian masukkan Code CSS dibawah ini diatas code ]]></b:skin>

/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}

Perhatikan code yang berwarna merah dan kegunaanya.. atur menurut selera kamu.
untuk mencari code warna buka situs www.colorschemer.com/online

Kalau sudah kemudian SAVE

Nah langkah berikutnya yaitu kita harus beranjak dari area Edit HTML ke area Page Elements (tata letak)

Lalu pilih Area sidebar dan klik Add a Gadget (Saya harap mudeng maksud saya)

Lalu pilih HTML/JavaScript dan taruh Code HTML dibawah ini kedalamnya

<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://tutorial-jitu.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://bankloe.blogspot.com">» Bisnis Online</a></li>
<li><a href="http://by-template.blogspot.com">» Free Template</a></li>
<li><a href="http://zonahandphone.blogspot.com">» Handphone</a></li>
<li><a href="http://praktis-triktips.blogspot.com">» Komputer</a></li>
</ul>

Ganti teks yang berwarna merah dengan URL link yang ingin kamu pasang, dan yang berwarna hijau adalah text display linknya.

Kalau sudah beres semua tinggal SAVE deh..

Nah gimana gampang kan gak perlu mengeluarkan keringat untuk membuatnya.
kalau sudah berhasil jangan lupa bersorak hore.. hore... tapi kalau ada masalah silahkan tanyakan saja di kotak komentar...

Sekian semoga bermanfaat bagi Anda para blogger.

Memodifikasi Pesan Perintah Pada Widget Followers

Blogger Hack

Widget Followers adalah widget baru dari blogger blogspot yang mempunyai fitur memberikan informasi postingan (updatetan) terbaru pada blog yang diikuti pada dashboard para blogger yang mengikuti blog tersebut, Sebagaimana langganan Feed via Email jika ada postingan terbaru dari blog yang sudah di subscribe maka akan ada informasi di Email orang yang mensubscribe blog tersebut.

Widget ini mempunyai tampilan standart seperti ini, jika dalam keadaan Log In

Dan jika tidak keadaan Log In tampilanya akan seperti

Ada perbedaan Antara kedua gambar pada waktu Log In dan tidak, diantaranya adalah jika keadaan Log In Pesanya "STOP FOLLOWING" dan jika keadaan tidak log in pesanya "FOLLOW THIS BLOG" dan juga dibagian bawah jika log in pesanya "MANAGE" dan jika tidak log in pesanya tertulis "VIEW ALL".

Nah pada pertemuan kali ini kita akan membahas tentang cara bagaimana memodifikasi pesan yang terinfeksi link perintah oleh Widget Followers ini.

Untuk mengedit Link perintah kamu harus masuk menu Layout kemudian masuk menu Edit HTML

Jangan lupa centang "expand widget templates"

1. menghapus count (jumlah) Followers pada judul sidebar

<data:totalFollowerCount/>

Jika ingin menghilangkan jumlah follower tinggal hapus saja code diatas

2. Mengganti perintah "Follow this Blog"

<data:followThisMessage/>

3. Mengganti perintah "Stop Following"

<data:stopFollowingMessage/>

4. Mengganti Teks jumlah follower pada bagian bawah.

<data:followersFooterMessage/>

5. Mengganti perintah dan teks jika belum ada follower (kosong)

<data:emptyFollowersMessage/>

6. Mengganti Perintah "Manage" (dalam keadaan Log In di blogger)

<data:manageFollowersMessage/>

7. Mengganti perintah "View All" (keadaan tidak Log in)

<data:viewAllMessage/>

ganti code-code link perintah diatas sesuai dengan kreasi kamu sendiri!

Nah code-code diatas bisa kamu cari (untuk mempermudah tekan ctrl+F pada browser kamu dan masukkan code yang kamu cari) pada menu Edit HTML dan keadaan "Expand widget templates" tercentang

kalau sudah tinggal SAVE

Semoga artikel ini bisa sedikit membantu Anda!
sekian semoga bermanfaat bagi Anda, jika ada pertanyaan silahkan isi komentar!
selamat berkreasi dan berexperimen! semoga berhasil

Menambah Dua Kolom Diatas/bawah Post Body

Customize Template

Mengotak-atik template blogspot adalah hal yang paling menyenangkan apalagi kalau kita berhasil mengotak-atik template blogspot sehingga menjadi bagus dan menarik, pasti lebih senang lagi. Nah kembali ke topik yaitu "Menambah dua kolom dibawah/diatas post body", pengertian post body sendiri yaitu area di blog Anda untuk postingan Anda.

Coba perhatikan gambar dibawah ini muncul dua kolom baru dibawah post blog.

Sehingga jika Anda menambahkan dua kolom dibawah postingan, Anda dapat menyimpan gadget/widget di atas/bawah postingan misalkan adsense, iklan, atau widget yang lainya (baca disni untuk gadget/widget blog).

Apakah Anda ingin menambahkan dua kolom diatas/bawah post body blog Anda?
coba ikuti langkah dibawah ini..

Pastikan Anda sudah Log In ke blogspot lalu pilih menu Layout kemudian masuk menu Edit HTML

Taruh Code CSS dibawah ini diatas Code ]]></b:skin>

/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:530px;
}
#underleft{
width:257px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#underright{
width:250px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

Perhatikan code yang berwarna merah diatas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari code css dibawah ini

#main-wrapper {
width: 410px;

Nah ukuranya adalah yang tercetak tebal diatas.
Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 410px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan (baca disni untuk tutorial padding dan marginya).

Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah ini

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

Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas.

Dan jika ingin menambah dua kolom diatasnya maka taruh code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau

Sehingga kurang lebih codenya menjadi seperti

Dua kolom dibawah post body

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>
</div>

Dua kolom diatas post body

<div id='main-wrapper'>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Nah jika semuanya sudah beres tinggal SAVE.

Coba lihat di area page element muncul dua kolom dibawah/diatas post body.

Code-codenya sesuiakan saja dengan template Anda, karena semua template codenya agak berbeda-beda.

Nah jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar (width) kolom kiri dan kanan, juga atur padding dan marginya.

Sekian dulu jika ada pertanyaan silahkan isi dikomentar saja.
semoga bermanfaat bagi Anda semua.

Membuat Header Penuh Dengan Body

Customize Template

Satu lagi nih tutorial desain atau otak-atik template blogspot yaitu mengubah ukuran header yang biasanya penuh dengan outer wrapper kini saya coba akan buat tutorial sederhana biar header blog bisa penuh dengan body.

Nah coba lihat perbedaan header blog ini, atau bisa kamu lihat Capture dibawah ini..

Dari capture diatas terlihat Header Blog memanjang memenuhi area body blog dan Header tidak satu area dengan post body dan sidebar.

Gimana dari keterangan diatas apakah Anda ingin mengubah header blog Anda menjadi penuh dengan body?

Oke langsung saja ke tutorial cara membuat header blog penuh dengan body blog

Pertama yaitu pastikan sudah log in ke blogger blogspot. Lalu masuk menu Layout/tata letak kemudian pilih Edit HTML

Lalu cari code dibawah ini

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>

Nah kalau sudah ketemu pindah code yang berwarna hijau dibawah code <body> dan diatas code yang berwarna merah. sehingga kurang lebih codenya menjadi seperti dibawah

<body>
<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

Kalau langkah pertama sudah selesai sekarang atur juga CSSnya

Cari code CSS dibawah ini

#header-wrapper {
width:880px;
height:100px;
margin-bottom:2px;
padding-bottom:15px;
background:#FFFFFF;
border:1px solid #E0E0E0;

Nah ganti tulisan 880px yang berwarna merah diatas dengan 100%. Dan silahkan otak-atik CSS diatas sesuai bentuk yang Anda inginkan.

Nah selesai deh kemudian save.

HTML diatas berdasarkan template minima default blogspot. berhubung semua template tidak sama HTML-Nya silahkan kamu sesuaikan menurut template kamu sendiri. Silahkan berexperimen sendiri sobat semoga berhasil.

dan jika anda ingin tampilan header seperti blog yang ini (klik disini untuk melihat). Gunakan Css seperti dibawah ini

#header-wrapper {
width:100%;
height:120px;
margin:0 auto 0;
border-top:2px solid #000000;
background:url(http://i296.photobucket.com/albums/mm169/anasku/header-back.jpg) repeat-x;
}

Sekian dulu artikel mengenai desain template dan otak-atik blog, artikel lainya akan menyusul.. tunggu yah..

Merubah Tampilan Headings Blog

Blogger Hack

Heading yang mempunyai arti kepala, pasti kepala tempatnya diatas.. ya iyalah masa di bawah.. he.. he.. Seperti halnya juga headings di blog yang tempatnya diatas tapi jangan salah Saya kali ini tidak membahas tentang header blog tapi melainkan headings yang biasa ditulis dalam code HTML dan CSS adalah seperti h2, h3, h4 dan sebagainya, Contoh headings di blog adalah seperti judul posting, judul sidebar, tanggal posting dan judul blog.

Seperti biasa tutorial kali ini saya akan coba membahas tentang cara memodifikasi CSSnya, untuk merubah tampilan headings di blog kita hal yang harus kita lakukan adalah mengotak-atik CSS (cascading style sheets) dari yang standar ke bentuk yang kita inginkan.

Oke langsung saja Saya akan jelaskan satu persatu dan cara memodifikasinya...
Masuk menu Layout kemudian masuk Edit HTML untuk mengota-atik CSSnya

Merubah tampilan Judul Posting

Jika Anda ingin merubah tampilan judul posting Anda maka code CSS yang harus Anda cari adalah seperti dibawah ini

.post h3 {
------------
-------------
-------------
-------------
}

Merubah Tampilan Judul Sidebar

Cari code CSS dibawah ini

.sidebar h2{
------------
-------------
-------------
-------------
}

Merubah Tampilan Judul Blog di Header

Cari CSS dibawah ini

#header h1 {
------------
-------------
-------------
-------------
}

Merubah Tampilan Tanggal Posting

Cari CSS dibawah

h2.date-header {
------------
-------------
-------------
-------------
}

Perhatikan Code CSS yang berwarna merah saja karena yang lainya adalah definisinya.
Nah sekarang kita lanjut ke cara otal-atik CSSnya biar tampilanya oke punya.

Ganti garis putus-putus dari code CSS diatas dengan definisi dibawah ini

margin:5px;
padding:5px;
border:1px dotted #000000;
Khusus Margin, Padding dan Border baca artikel ini

font-size:140%;
untuk menentukan besarnya huruf , bisa kamu ubah sesuai selera kamu misalnya kamu ubah menjadi 100% atau 150% dan juga satuanya bisa kamu ganti dengan px (pixels) misalnya 14px.

font-weight:bold;
Untuk menentukan ketebalan huruf, Bold adalah jika kamu ingin hurufnya tebal apabila kamu ingin merubah hurufnya biasa ganti bold dengan normal, dan apabila kamu ingin mengganti hurufnya menjadi miring kamu ganti saja dengan code italic.

text-align:right;
Untuk menempatkan posisi text jika kamu isi dengan right maka text akan berada di kanan dan apabila kamu isikan left text akan berada di kiri dan juga center maka textnya akan berada di tengah.

color:#FFFFFF;
Untuk memberi warna huruf, #FFFFFF adalah code warna untuk warna putih carilah code warna yang sesuai dengan keinginan kamu di http://colorschemer.com/online.

Background:#000000;
untuk memberi warna background. silahkan ganti code warna sesuai keinginan kamu di http://colorschemer.com/online untuk mencari code warna.

text-transform:uppercase;
uppercase untuk menampilkan hurufnya dengan huruf besar semua meski dalam pengaturan anda menuliskan huruf kecil. jika Anda ingin mengubah dengan huruf kecil semua ganti dengan lowercase dan jika ingin huruf depanya saja yang besar maka ganti dengan capitalize.

Nah jika di blog Anda pasti CSSnya sudah ada definisinya tinggal mengedit dan menambahi yang kurang-kurang saja.

Sekian dulu artikel ini Saya rangkum dari berbagai sumber salah satunya dengan sistem browsing dan baca artikel dari kang rohman.
Semoga bermanfaat bagi Anda....

CSS3		Javascript
HTML5		Photoshop
PHP		CorelDraw