Mengganti Background Blog Dengan CSS

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 :



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)

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

Menampilkan Next Page Hanya Judul Postingnya

Bukan apa-apa tapi hanya iseng-iseng ingin menulis di blog ini saja (ehh tapi sebenernya emang Saya bercita-cita sebagai penulis lho ). Dengan maksud ingin membagi-bagikan sedikit pengetahuan Saya mengenai mengotak-atik blog di blogspot Saya akhirnya menulis artikel ini dengan diawalai doa Saya mantap menulis artikel ini untuk Sobat-sobat sekalian semoga bermanfaat.

Oke langsung aja ke topik pembicaraan yaitu menampilkan next page dengan judul postinganya saja di main blog. Gimana maksudnya next page sih?
Maksud Saya "next page" itu adalah halaman dari blog selain halaman depan itu loh! apabila Anda mengklik link "Older post" atau "Posting lama" di main page hanya muncul judul postingnya saja.

Seperti Anda jika mengklik link "older post" di blog kang rohman



Hanya akan tampak judul postingnya saja seperti dibawah ini



Iya tha.. Kalau g percaya buktikan saja

Mau tau caranya?

Nah caranya cukup mudah kok gini lo

Masuk menu Layout kemudian masuk menu Edit HTML dan centang tanda "Expand widget templates"

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

#titleonly {
padding:6px 0 6px 5px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-bottom:2px;
background:#EAE9E9;
color:#B8002E;
}

Kalau Sudah cari code dibawah ini

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

Ganti Code diatas dengan code dibawah ini.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div id='titleonly'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Kalau Sudah tinggal SAVE dehh!!

Gimana gampang kan?

Tampilanya bisa kamu ubah sesuai dengan selera kamu tinggal mengedit CSSnya.

Nah jika ingin menampilkan semua judul post pasang URL link dibawah ini

http://AlamatBlogAnda.blogspot.com/search?max-results=200

Ganti tulisan yang tercetak merah diatas dengan alamat blog Anda

Gimana gampang kan?
Silahkan dicoba semoga berhasil jika Ada pertanyaan lontarkan saja di koementar

Menonjolkan Teks Tertentu Pada Postingan

Seringkali jika kita baca buku tutorial seperti misalnya tutorial HTML, tutorial Bahasa Pemrograman dan buku-buku tutorial yang lainya kita menjumpai seperti kode-kode atau script yang ditonjolkan dengan memberi background dan pembatas yang beda dengan teks-teks yang lainya yang ada di buku yang berguna untuk mempermudah para pembaca buku membedakan script-script dengan tulisan yang lainya. Begitu juga di blog jika Anda menulis tentang tutorial yang memungkinkan untuk menulis kode-kode HTML dan script-script yang lainya agar pembaca lebih mudah untuk membedakan.

Contoh seperti dibawah ini

HANYA CONTOH

POSTINGAN YANG DITONJOLKAN DISINI

HANYA CONTOH

Dan seperti ini

Kesepian hati…

Adakah benar adalah lorong waktu kebahagiaan ?

Kesunyian hati…

Adakah sungguh adalah suara merdu saat usia senja ?

Aku takut, aku salah kira

Meski kusadari kini ku di tengah itu semua

Aku hanya dapat bertanya

Tanpa sedikitpun kepastian akan jawabnya

(http://www.anggrekbiru.com/)

Terlihat perbedaan dengan contoh pertama dan kedua : contoh pertama dengan background warna dan contoh kedua dengan background gambar.

Untuk membuatnya silahkan perhatikan cara berikut

cara pertama yaitu cukup mudah kita tinggal masuk ke posting editor dan tulis code seperti dibawah ini di posting editor bagian "Edit Html"

untuk background warna kita gunakan code seperti dibawah ini

<div style="background:#FFFFCC; border:1px dotted #F5003D; padding:5px;">
DISINI POSTINGAN YANG MAU DITONJOLKAN
</div>

background:#FFFFCC;
adalah warna background, codenya bisa Anda ganti menurut warna yang Anda sukai. (lihat code warna disini)

border:1px dotted #F5003D;
adalah garis tepinya 1px adalah ketebalan dari garis tepinya, bisa kamu ganti ketebalanya sesuai selera Anda, dotted adalah jenis bordernya bisa kamu ganti sesuai selera kamu (baca disini jenis border). #F5003D adalah kode warna dari border silahkan Anda ganti dengan selera Anda.

padding:5px;
Untuk memberi batas garis tepi dengan tulisan, memungkinkan agar ada jaraknya dari garis tepi. (baca disini untuk lebih jelasnya)

tambahkan overflow:auto; jika ingin menambahkan fungsi scroll

untuk background gambar seperti dibawah ini

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr90ViBQivcSfG0FcJBDZAIx1aUhq9_E-Gw7YeM3EQnkrM8R_0MFb3HZlxx1OIb0hydtr4aNeY0eHJgKDi8SjPPkdDZzHFheOHRLCHJY2VxZ-qRE55Y_5kCm7x_juQoXY_Wx63zq57RfY/); width:508px; height:362px; padding:5px;">

DISINI TEXT

DISINI TEXT

</div>

Text yang tercetak merah diatas adalah url gambarnya. width:508px; adalah lebar area dan height:362px; adalah tinggi area.

Gimana gampang kan?

ini adalah sebagian cara untuk menonjolkan text tertentu, trik-trik berikutnya akan menyusul.
Sekian semoga sedikit membantu Anda dan bermanfaat bagi Anda.

Bagian-bagian Pada Template Minima

Taukah Anda tentang bagian-bagian dasar pada layout atau template blogger? terutama pada template default blogger yaitu minima template. Terutama bagi Anda para blogger pemula pasti kebingungan untuk mengetahui nama bagian dan kegunaanya pada layout blogger (ya maklum dong mas namanya baru pemula), nah maka dari itu Saya kan membagi sedikit pengetahuan Saya kepada Anda bagi yang belum tau dasar-dasar layout.

Lihat gambar dibawah ini yang merupakan capture dari layout minima untuk memperjelasnya




Nah terlihat pada gambar diatas adalah capture dari template dasar blogger yang belum termodifikasi, terlihat pada gambar diatas terdapat bagian bagianya yaitu header, main wrapper sidebar dan footer.

Untuk lebih jelasnya mengenai bagian-bagian layout template baca dibawah ini.




Nah dari gambar diatas keteranganya dibawah ini :

Susunan bagian template blogger seperti dibawah ini

BODY→ OUTER WRAPPER → (HEADER + MAIN WRAPPER + SIDEBAR + FOOTER)

BODY : Adalah bagian paling dasar dari bagian-bagian lainya, body pada blog biasanya memenuhi halaman dari browser Anda baru setelah itu tersusun bagian-bagian lainya.

OUTER WRAPPER : Bagian ini adalah tempat dimana bagian-bagian dasar seperti header,main wrapper, sidebar dan footer tersusun diatas bagian ini

HEADER : Header ini tempatnya pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog.

MAIN WRAPPER : Sering disebut juga Posting area karena pada main wrapper adalah area postingan pada suatu Blog.

SIDEBAR : Sidebar ini berfungsi sebagai tempat penyimpanan gadget/widget misalnya gadget yang telah disediakan oleh pihak blogger maupun luar blogger yang tempatnya disamping posting area/main wrapper.

FOOTER : Footer ini sama halnya seperti sidebar yaitu tempat penyimpanan gadget/widget pada blog kita namun footer tempatnya dibagian layout paling bawah yaitu dibawah main wrapper dan sidebar.

Nah sedikit pengetahuan Saya mengenai Layout semoga bermanfaat bagi Anda pembaca blog ini dan untuk blogger pemula yang belum tau bagian-bagian layout.

Sekian semoga artikel ini sedikit membantu Anda.

Emoticon Smiley Untuk komentar Blogspot

Semenjak Blogger membuat sistem kotak komentarnya "Embedded Comments form" Atau kotak komentar langsung dibawah komentar populasi para komentator semakin meningkat, tidak seperti dulu jika ingin menulis komentar harus mengklik link post comments yang akan membuka jendela baru atau jendela pop-up. Dulu jika ingin membuat kotak komentar dibawah postingan harus pakai jasa pihak ke-3 misalnya haloscan, tetapi yang menggunakan jasa haloscan berbondong-bondong memindah kotak komentarnya menjadi default blogger lagi karena blogger sudah membuka sistem "embedded comments form".

Nah semakin meningkatknya para komentator di blogger maka semakin meningkat pula keinginan para blogger untuk mengubah tampilan area komentar dan menambah pernak-pernik lainya, maka dari itu saya juga ingin membuat pernak-pernik komentar blogger dengan smiley yang memungkinkan sang komentator bisa mengexpresikan ucapanya dengan sebuah gambar emoticon atau smiley.

"Ilmu tak akan bermanfaat jika tidak dibagi-bagikan", Nah ucap-ucapan itulah yang membuat saya selalu ingin berbagi, sebelum saya membuat tutorialnya terlebih dahulu saya akan memberikan informasinya, ehh sampai lupa menawarkan tutorial yang satu lagi yaitu tampilan komentar pemilik blog berbeda (baca disini). Gambar emticonya cukup sederhana bisa dilihat dibawah ini

:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))
Gambarnya seperti diatas, teks atau tulisan yang disamping kanan gambar adalah symbol yang jika ditulis di kotak komentar akan berubah menjadi gambar yang ada disamping kirinya.

Nah jika Anda berminat membuatnya ikuti langkah-langkah dibawah ini

Pertama-tama masuk blogger dan masuk menu Layout kemudian masuk menu Edit HTML

Jangan lupa centang "Expand Widget Templates"

Taruh Script dibawah ini diatas code </body>

<script src='http://sites.google.com/site/anasceria/smiley.js' type='text/javascript'/>

Kalau sudah cari code HTML seperti 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>

Kemudian sisipkan code HTML dibawah ini diantara code yang berwarna biru dan hijau diatas tadi atau lebih tepatnya dibawah code <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>

Nah kalau sudah SAVE pengaturanya.

Coba kamu cek di kotak komentar kamu! kalau tidak bisa (baca disini) untuk panduan tampilan kotak komentar owner blog berbeda dengan pengunjung blog.

Sekian semoga bermanfaat!
tunggu trik-tips selanjutnya key..! happy blogging with me

Cara Mudah Posting Code HTML

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

• http://centricle.com/tools/html-entities/
  
  
• http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx

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!

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

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

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

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

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

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

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

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

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

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

<!-- skip links for text browsers -->
<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'>

<!-- skip links for text browsers -->
<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

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

Cara Menampilkan Satus G-Talk (Google Talk)

Satu lagi setelah kemaren membuat tutorial cara menampilkan status YM dan menampilkan Status Camfrog.. Kali ini akan membahas cara menampilkan status G-Talk atau Google Talk ini, Seperti Senior saya kang jaloee dia lebih suka berchatting atau ngobrol lewat G-Talk dari pada pkai YM (Yahoo Messenger).
Berhubung ada kaitanya dengan pemasangan di blog Saya coba Memberi informasi sedikit tentang cara menampilkan status G-Talk di Blog kita...

Mari ikuti langkah-langkah dibawah ini..

• Buka situsnya Google yang ini (disini)
  
  
• Kemudian Log In dengan Account Google kamu
  
  
• Setelah Log In ada Generate Code yang harus kamu pasang di blog kamu..
  
  
• Cara pasang di blog seperti biaya yaitu masuk menu Layout--> Page Elements lalu klik Add a Gadet Lalu pilih HTML/JavaScript dan taruh deh generate Codenya kedalamnya

Selain cara pemasangan saya akan menerangkan sedikit cara mengubah tampilanya...

untuk mengedit bentuk dari widgetnya klik Edit

Setelah klik Edit ada tampilan seperti dibawah ini


Title (optional) : untuk meberi judul Widget keseluruhan (dikosongi jika ingin menampilkan nickname)

Your nickname : Nickname yang kamu tampilkan di Widget

Style : Bentuk dari widget bisa kamu udah dg selera kamu sendiri

setelah semua udah di set klik tombol Update Badge

Lalu code dibawahnya kamu masukkan ke blog kamu
dan jika ingin mengubah panjang dan lebar tinggal cari code w=200 (untuk lebar) dan h=60 (untuk tinggi) silahkan ubah sesuai keinginan kamu

sekian semoga bermanfaat bagi anda sekalian...