Tutorial dan Free Download

Efek Heart (hati) Bertaburan

Pada perjumpaan kali ini Anas ingin membicarakan tentang hati dan cinta. cie,. cie,. Eh tapi jangan salah bukanya Anas lagi jatuh cinta ama seseorang tapi saking jatuh cintanya ama ngeblog anas buat efek Hati bertaburan yang kaya gini.. he.. hee.

Efek Heart(Hati) bertaburan ini cocok Buat Anda yang mempunyai blog bernuansa cinta, terlebih jika Anda membuat blog dengan content puisi cinta, novel cinta bahkan nasehat-nasehat tentang cinta.
Tapi jika Anda Belum Faham lihat contoh disini..

Bicara soal cara pembuatanya trik yang kali ini cukup mudah dan tidak rumit... nah jika Ada ingin membuat efek cinta ini silahkan ikuti cara yang dibawah ini

Langkah pertama yang harus kamu lakukan adalah Log In ke Blogger lalu masuk menu Design kemudian masuk menu Edit HTML

Lalu taruh Code dibawah ini diatas code </body> atau kedalam tag <body>

Nah jika Sudah Simpan dan lihat hasilnya

Sekian semoga bermanfaat bagi Anda dan selamat bercinta-cintaan dengan blog Anda

Umur Blog Lebih Panjang Dari Umur Kita

Assalamualaikum sebelumnya Anas mengucapkan sebagai pembukaan artikel ini, terkadang kita membuat Blog dengan tujuan kita masing-masing, ada yang membuat tutorial, cerita, pengalaman pribadi, berbagi file kepada orang lain dan bahkan ada juga yang ingin meraup keuntungan dari Blog yang telah kita Buat. Tapi sebenarnya Umur blog lebih panjang dari Umur kita didunia yang teramat singkat ini. Maka dari itu kita gunakan Blog ini sebagai bahan pembelajaran bagi orang lain yang bermanfaat, karena Orang meninggalkan dunia bukan membawa harta atau barang-barang yang mewah, ada tiga hal yang dibawa orang mati yaitu salah satunya adalah Ilmu yang bermanfaat, Nah dari situlah Anas berfikir ingin membuat blog yang bermanfaat bagi orang lain karena Ilmu yang bermanfaat adalah salah satu Bekal yang dibawa Orang mati kelak.

Banyak Orang bikin Blog yang tidak bermanfaat misalnya membuat blog yang berisi Porno, Nah jika orang membuat Blog yang isinya porno maka orang itu secara tidak langsung mengajak Orang lain untuk berbuat jahat, maka dosa Orang yang membuat Blog yang berisi Porno setiap hari dosanya akan menumpuk-numpuk dan kelak jika sudah meninggal Dosanya akan dibawa, Bahkan jika kita sudah meninggal dan Blog porno itu masih ada hanya akan menambah beban dan dosa di Akhirat nanti.

Pesan saya adalah Buatlah Blog yang bersih dan tidak ada unsur-unsur kotor di blog kita, jika Anda Blogger sejati yang tidak bisa lepas dari blog maka gunakanlah Blog untuk sarana yang bermanfaat yang bisa kita bawa di Akhirat nanti.. bukan hanya didunia saja.. Amin..
Sekian dulu catatan ringan dari Anas.. semoga Anda menjadi salah satu peblogger yang yang bermanfaat bagi orang lain. Amin

STOP! PORNO DAN PEMBAJAKAN DI INTERNET

Padding, Margin Dan Border Pada CSS

Sering kali kita mendengar kata-kata Padding, Margin Dan Border pada CSS yang digunakan sebagai pengukuran dasar pada CSS.. Nah pada pertemuan ini Anas akan memberikan sedikit pengertian dari ketiga Hal tersebut dan juga gunanya..

Padding, Margin dan Border, sebelum saya menerangkan lebih jauh silahkan lihat skema gambar dibawah ini dulu

Nah dari keterangan diatas kita dapat menyimpulkan seperti dibawah

Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border

Cara Penggunaan

Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas, kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px; ini adalah untuk pengaturan padding kanan
padding-top:5px; untuk bagian atas dan
padding-bottom:5px; untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti sesuai satuan yang lain yang sesuai

Border
Ditulis dengan CSS border:1px dotted #000000; urutan penggunaanya adalah ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px; ini adalah ketebalan border
border-style:dotted; ini adalah jenis bordernya bisa kamu ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF; ini adalah warna dari border.. kamu bisa menggantin code warnanya (www.colorschemer.com/online)

Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; urutanya atas, kanan, bawah dan kiri, atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas

Satuan Dalam CSS

1. Statik

2. Relatif

Style Border

Dotted

dashed

solid

double

groove

ridge

inset

outset

Sekian Dulu dasar CSS yang lainya akan menyusul
Sekian semoga bermanfaat

Menambah Gambar Sebelum Judul Posting

Halo Sobat dimanapun Anda berada

Sebelumnya Anas akan menanyakan kabar kalian semua.. apakah kalian baik-baik saja..?

oke semoga baik-baik saja yah hari ini

. Oke kita langsung saja ke topik pembicaraan kali ini yaitu Anas akan membahas tentang cara menambah gambar sebelum judul posting di blog Anda.
Lalu apa gunanya..

Gunanya Cuma untuk memperindah judul posting kita biar terkesan bagus dilihat oleh pengunjung blog Anda dan membuat blog Anda lebih Expresif

.
Oke buat Anda yang pengen membuatnya silahkan ikuti cara dibawah ini..

Pertama-tama kita pastikan sudah log in ke blogger, setelah log in kita masuk menu Layout kemudian masuk menu Edit HTML

Lalu Cari Code CSS seperti dibawah ini yang mirip di blog Anda

.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;

Nah telah ketemu tambahkan Code semacam background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center; dan juda code height:48px; biar IE (internet Explore) bisa mengadaptasi jika di Mozilla Firefox tidak masalah tanpa code height, sehingga kurang lebih code CSSnya menjadi

.post h3 {
margin:.5em 0;
padding:48px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center;

Setelah Anda tambah jangan lupa Atur paddingya agar gambarnya terlihat dengan ukuran yang sempurna... tapi jika Anda menggunakan Background yang saya kasih diatas paddingnya seperti ini padding:48px 0px 0px 45px;
Nah Code yang tercetak tebal dan merah diats adalah lokasi URL gambar, jika Anda ingin mencari koleksi gambar yang lainya Anda Bisa Cari di www.iconarchive.com.
Dan code height sesuaikan dengan tinggi background kamu.

Jika kamu belum mengerti padding silahkan baca Artikel yang ini dulu biar nanti posisinya terlihat sempurna.

Setelah Semua selesai dan beres tidak ada kesalahan lalu Simpan pengaturan Anda.. dan lihat hasilnya

Nah jika Gambarnya kurang terlihat utak atik saja paddingnya...

Oke saya kira cukup sekian jika ada pertanyaan silahkan lontarkan saja di kotak komentar..

Membuat Widget Melayang

Weh Emangnya Layang-layang pa melayang segala, Wah si Anas ngawur neh..! :D Wah apa sih yang dimaksud widget melayang di area blog? Baca dibawah ini untuk penjelasanya

Oke saya jelasin dikit yah mengenai trik kali ini yaitu widget melayang.. Jika anda menyimpan widget dan jika Anda menggeser scroll bar browser Anda widget ini akan berada ditempatnya tidak mengikuti scroll bar.
Sebagai Contoh kamu lihat Status YM aku yang aku buat melayang

Nah dari keterangan diatas apakah Anda minat untuk membuatnya..?
Silahkan ikuti trik dibawah ini untuk membuatnya :)

Langkah pertama yang harus kamu lakukan adalah Log In ke Blogger lalu masuk menu Layout kemudian masuk Edit HTML

Lalu taruh Code dibawah ini diatas Code ]]></b:skin>

#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Tulisan yang berwarna merah dan tebal diatas itu adalah posisi widgetnya
bottom adalah bawah jika ingin mnaruh diatas bisa kamu ganti dengan top, Left adalah kiri jika ingin mengganti di kanan bisa kamu ganting dengan right

Langkah selanjutnya taruh code dibawah ini yang merupakan widget sebelum Code </body>

Nah Code yang berwarna merah diatas itu adalah staus YM yang merupakan widgetnya bisa kamu ganti.. Silahkan Baca Artikel saya di category Widget atau kamu punya widget sendiri yang ingin kamu pasang..

Kemudian SAVE

Sekian semoga bermanfaat bagi pembaca blog ini

Navigator Menu Horizontal

Navigator Menu Horisontal adalah sederatan menu yang memanjang kesamping yang berguna untuk menunjukkan ke suatu halaman lainya di blog Anda. Misalnya Anda mempunyai Blog lain dan juga bertemakan berbeda dari blog Anda maka untuk menunjukkan pengunjung Blog Anda kita pasang menu horisontal ini, atau Anda mempunyai content yang lain di Blog anda dengan tema berbeda Anda perlu suatu navigator untuk menujukkanya.
Selain link dan banner yang menarik menu horisontal ini tidak kalah menarik untuk menjadi navigator di blog Anda karena saya kira bentuknya Menarik dan elegan.
Nah jika Anda juga belum faham mengenai menu horisontal Anas akan kasih capturenya lihat dibawah

Nah dari keterangan diatas apakah Anda berminat Untuk membuatnya di Blog Anda..? kalau Anda berminat silahkan ikuti Cara dibawah

Langkah pertama yaitu log in ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML

Lalu taruh code dibawah diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog Anda

.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}

.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}

.menuhorisontal li{
display: inline;
margin: 0;
}

.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}

.menuhorisontal li a:visited{
color: white;
}

.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

Kalau Sudah Cari Code dibawah Ini

Code diatas Di Blog kamu berdeda-beda pokoknya kamu perhatikan Code yang berwarna merah saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu

Kemudian Simpan

Langkah kita belum selesai mari kita beranjak ke menu Layout
Nah dibawah Header pasti sudah ada tempat widget/gadget,

kemudian klik Add A Gadget kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini

<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://tutorial-jitu.blogspot.com'>Tutorial Blog</a></li>
<li><a href='http://www.anasku.co.cc'>Ceritaku</a></li>
<li><a href='http://www.maynas.site40.net'>Sahabatku</a></li>
</ul>
</div>

Nah jika anda ingin mengubah tinggal edit code linknya dan jika ingin menambah tinggal tambah code yg berwarna biru dibawahnya

Gimana gampang kan.. silahkan bereksperimen jika ada pertanyaan silahkan isi komentar
sekian semoga bermanfaat

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