Kami segenap kru (padahal cm sendiri :D ) blog trik-tips.blogsdpot.com mengucapkan "Minal Aidzin Walfaizin, Mohon Maaf Lahir dan Batin". Dihari yang penuh maaf ini saya ingin meminta maaf kepada para pembaca, pemirsa, pendengar, rekan2 dan sodara semuanya, bilamana saya telah berbuat silaf dan hilaf mohon dimaafkan. Walaupun cm sekedar blog namun bisa membuat orang jadi senewen, mumet, pusing, pingin marah, geram, gregeten dan LL. Saya juga memohon maaf apabila dalam penyampaian saya dirasa kurang jelas atau malah bisa membikin pusing karena saya juga masih dalam tahap belajar. Saya juga memohon maaf apabila tidak bisa menjawab semua komentar maupun pertanyaan rekan2 semua baik melalui Comment Box, Shoutbox, Email maupun YM. Saya juga memohon maaf atas semua tindakan, ucapan, maupun perbuatan saya baik yang disengaja maupun tidak. Saya juga memohon maaf untuk DLL. Pokoknya intinya maafin saya deh ya.....ya...ya...
Broadband Speed Test
If you already have an Internet connection, you probably connect to the Internet with a modem that plugs into your telephone line (often referred to as a "dial-up connection"). If you're setting up an Internet connection for the first time, it really makes sense to go for Broadband right from the start, as the entry-level packages are generally much better value than the dial-up alternative. Once you've looked into the options and know which types of broadband Internet are available in your area, the next step is to choose the best deal. The biggest factor to consider when you choose a deal is speed. How fast is the connection? And is it fast enough to do all the things you would like to be able to do?Broadband speed is measured by the amount of data your connection can send and receive in Kilobytes per second (Kbps) or Megabytes per second (Mbps). You can check it with broadband speed test. You will know how fast is your internet connecttion. The speed check will work for any type of connection including ADSL, cable/fibre optic and by the 3G mobile network (mobile broadband). Make sure that you have closed any other applications using the internet (for example email, instant messenger, and so on). Your broadband speed can vary wildly at different times of the day depending on external factors, such as the number of users online in your building, your street and even your country
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
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...
Labels:
Widget - Gadget Blog
Merubah Tampilan Gadget Link List
Satu lagi alternatif blogroll (tempat link teman di blog kita) setelah kemaren membahas tentang cara membuat blogroll dengan manual HTML sekarang saya akan mencoba membuat blogroll dengan gadget Blogger default yaitu link list.
Pada standartnya gadget ini tidak begitu sering digunakan oleh para peblogger karena jika Linknya banyak akan memenuhi halaman Blog kita dan jika linkya di klik tidak membuka jendela baru tapi malah akan membuka di jendela lama yang kita gunakan.
tapi saya ada suatu trik untu membuat gadget Link List ini menjadi sederhana dengan efek scroll dan efek pembukaan link di jendela baru.. Lihat contoh di blog saya (disini)
Masih banyak peblogger yang tidak ingin repot membuat tempat link teman dengan gadget bawaan dari blogger yaitu "link list" secara penggunaanya mudah gitu... Oke kita langsung saja ke cara pembuatanya
Lanhkah pertama yaitu sudah Log In ke blogger dan pasti sudah memasang Gadget "Link List"
Setelah langkah pertama terlaksanakan lalu masuk menu Layout kemudian masuk menu Edit HTML dan centang "expand widget templates"
Lalu Cari Code HTML seperti dibawah ini
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
Kemudian Ganti code diatas dengan Code dibawah ini..
<div style='width:100%; height:100px; overflow:auto;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
Perhatikan code height:100px; itu adalah tinggi dari link list bisa kamu ubah-ubah sesuai selera kamu.. jadi jika linkya melebihi batas tinggi maka akan ada efek scrollnya
Kemudian Simpan dehh.. dan lihat hasilnya..
Gimana gampang kan silahkan berexperimen. yahh
Pada standartnya gadget ini tidak begitu sering digunakan oleh para peblogger karena jika Linknya banyak akan memenuhi halaman Blog kita dan jika linkya di klik tidak membuka jendela baru tapi malah akan membuka di jendela lama yang kita gunakan.
tapi saya ada suatu trik untu membuat gadget Link List ini menjadi sederhana dengan efek scroll dan efek pembukaan link di jendela baru.. Lihat contoh di blog saya (disini)
Masih banyak peblogger yang tidak ingin repot membuat tempat link teman dengan gadget bawaan dari blogger yaitu "link list" secara penggunaanya mudah gitu... Oke kita langsung saja ke cara pembuatanya
Lanhkah pertama yaitu sudah Log In ke blogger dan pasti sudah memasang Gadget "Link List"
Setelah langkah pertama terlaksanakan lalu masuk menu Layout kemudian masuk menu Edit HTML dan centang "expand widget templates"
Lalu Cari Code HTML seperti dibawah ini
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
Kemudian Ganti code diatas dengan Code dibawah ini..
<div style='width:100%; height:100px; overflow:auto;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='new'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
Perhatikan code height:100px; itu adalah tinggi dari link list bisa kamu ubah-ubah sesuai selera kamu.. jadi jika linkya melebihi batas tinggi maka akan ada efek scrollnya
Kemudian Simpan dehh.. dan lihat hasilnya..
Gimana gampang kan silahkan berexperimen. yahh
Labels:
Blogger Hack
Tampilan Komentar Owner Blog Berbeda
Kali ini Saya ingin membahas lagi tentang cara mengotak-atik comments setelah kemaren membahas soal cara memindah tanggal komentar di sebelah author tapi sekarang Saya akan membahas cara bagaimana memodifikasi tampilan komentar pemilik blog yang berbeda dengan pengunjung blog.
Dari keterangan gambar diatas menunjukkan tampilan Comments Owner blog berbeda dengan pengunjung blog.
Bagaimana menurut Anda.. apakah Anda ingin mencobanya. ikuti langkah-langkah dibawah
Langkah pertama yang harus Anda lakukan adalah Log in ke blogger dan masuk menu Layout kemudian masuk menu Edit HTML
Jangan Lupa centang "expand widget templates"
Lalu taruh Code dibawah ini diatas code ]]></b:skin>
.comment-body-author {
background: #FFFF29; /* Warna Background */
border:1px dotted #FF2929; /*Border*/
margin:0;
padding:0 0 0 20px;
}
Silahkan Edit Code CSS diatas sesuai kreasi Anda sehingga tampilan comments owner Anda menarik (Baca yang ini untuk mempelajari border, padding dan margin)
Langkah selanjutnya masih di menu Edit HTML dan tanda "Expand Widget Templates" masih tercentang
Kemudian Cari Code dibawah ini
<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>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<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>
</b:if>
<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>
Perhatikan Code yang berwarna merah itu adalah code yang harus kamu tambahkan diantara code yang berwarna hitam diatas
Ingat penempatan code yang berwarna merah harus benar maka perhatikan code yang berwarna biru itu adalah Tagsnya
Kalau sudah kemudian Simpan dan lihat hasilnya
Sekian semoga bermanfaat
Dirangkum dari berbagai sumber dan disederhanakan
Dari keterangan gambar diatas menunjukkan tampilan Comments Owner blog berbeda dengan pengunjung blog.
Bagaimana menurut Anda.. apakah Anda ingin mencobanya. ikuti langkah-langkah dibawah
Langkah pertama yang harus Anda lakukan adalah Log in ke blogger dan masuk menu Layout kemudian masuk menu Edit HTML
Jangan Lupa centang "expand widget templates"
Lalu taruh Code dibawah ini diatas code ]]></b:skin>
.comment-body-author {
background: #FFFF29; /* Warna Background */
border:1px dotted #FF2929; /*Border*/
margin:0;
padding:0 0 0 20px;
}
Silahkan Edit Code CSS diatas sesuai kreasi Anda sehingga tampilan comments owner Anda menarik (Baca yang ini untuk mempelajari border, padding dan margin)
Langkah selanjutnya masih di menu Edit HTML dan tanda "Expand Widget Templates" masih tercentang
Kemudian Cari Code dibawah ini
<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>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<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>
</b:if>
<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>
Perhatikan Code yang berwarna merah itu adalah code yang harus kamu tambahkan diantara code yang berwarna hitam diatas
Ingat penempatan code yang berwarna merah harus benar maka perhatikan code yang berwarna biru itu adalah Tagsnya
Kalau sudah kemudian Simpan dan lihat hasilnya
Sekian semoga bermanfaat
Dirangkum dari berbagai sumber dan disederhanakan
Labels:
Blogger Hack
Memindah Tanggal Komentar Di Sebelah Author
Pada kesempatan kali ini Kita akan membahas mengenai komentar di blogspot, Nah jika Komentar box anda belum embeded comments blogger atau belum berada dibawah postingan silahkan baca yang ini dulu.
Tapi jika Commnets box anda sudah embeded mari kita otak-atik sehingga menjadi menarik, pada perjumpaan kali ini kita membahas mengenai tanggal komentar yang biasanya berada dibawah bagian pesan komentar, nah pada perjumpaan kali ini kita akan mengubahnya di sebelah Author commnets. Jika Anda belum Paham perhatikan gambar dibawah ini
Sebelum
Sesudah
Nah dari keterangam gambar diatas apakah anda sudah faham dan ingin membuatnya..?
kalau Anda ingin membuatnya silahkan ikuti cara dibawah ini
Pertama-tama seperti biasa harus Log in ke blogger terlebih dahulu, Kemudian masuk Menu Layout kemudian masuk menu Edit HTML
Jangan Lupa centang "expand widget templates"
Lalu cari code seperti dibawah ini
<data:commentPostedByMsg/> dan tambah tulisan "pada atau pada tanggal"
Kemudian Scroll agak kebawah sedikit dan temukan code seperti ini
<dd class='comment-footer'>
Dan dibawa code diatas ada code seperti dibawah
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
perhatikan code yang berwarna merah..
Lalu pindah Code diatas kesamping code <data:commentPostedByMsg/> tadi
sehingga kurang lebih Codenya menjadi seperti dibawah ini
<data:commentPostedByMsg/>pada tanggal<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
Lalu Simpan dan lihat hasilnya deh...
Gimana gampang kan.. Artikel tentang mengotak-atik Kotak Komentar akan menyusul
Sekian semoga bermanfaat
Tapi jika Commnets box anda sudah embeded mari kita otak-atik sehingga menjadi menarik, pada perjumpaan kali ini kita membahas mengenai tanggal komentar yang biasanya berada dibawah bagian pesan komentar, nah pada perjumpaan kali ini kita akan mengubahnya di sebelah Author commnets. Jika Anda belum Paham perhatikan gambar dibawah ini
Sebelum
Sesudah
Nah dari keterangam gambar diatas apakah anda sudah faham dan ingin membuatnya..?
kalau Anda ingin membuatnya silahkan ikuti cara dibawah ini
Pertama-tama seperti biasa harus Log in ke blogger terlebih dahulu, Kemudian masuk Menu Layout kemudian masuk menu Edit HTML
Jangan Lupa centang "expand widget templates"
Lalu cari code seperti dibawah ini
<data:commentPostedByMsg/> dan tambah tulisan "pada atau pada tanggal"
Kemudian Scroll agak kebawah sedikit dan temukan code seperti ini
<dd class='comment-footer'>
Dan dibawa code diatas ada code seperti dibawah
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
perhatikan code yang berwarna merah..
Lalu pindah Code diatas kesamping code <data:commentPostedByMsg/> tadi
sehingga kurang lebih Codenya menjadi seperti dibawah ini
<data:commentPostedByMsg/>pada tanggal<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
Lalu Simpan dan lihat hasilnya deh...
Gimana gampang kan.. Artikel tentang mengotak-atik Kotak Komentar akan menyusul
Sekian semoga bermanfaat
Labels:
Blogger Hack
Cara Edit / Mengganti Template Wordpress
Mungkin para pengguna wordpress pernah merasa kesal ketika akan mengganti atau mencoba merubah template wordpress tetapi diharuskan membayar dulu kira2 sebesar $15. Tapi ternyata ada cara supaya kita bisa mengedit atau mengotak-atik template wordpress dengan tanpa mengeluarkan dana sepeserpun alias gratis. Mau tahu caranya? ...
Syaratnya yaitu kamu harus memiliki domain dan hosting terlebih dulu. Untuk domain kamu bisa memakai domain gratis dari co.cc atau jika pingin domain .com/.net/.org km bisa membeli domain di dodoldomain.com. Selain domain kamu juga harus memmiliki hosting. Kamo bisa memakai hosting gratis di 000webhost atau bisa juga beli hosting murah di superinhost.com
Langkah awalnya yaitu kita harus mensetting domain dan hosting kita. Bagi yang belum tahu caranya silahkan BACA TUTORIAL INI. Langkah berikutnya yaitu kita cari atau download template wordpress yang ada dipasaran, dan tentunya cari yang gratisan dong. Coba cari lewat google dengan memakai kata kunci misal "Free Template wordpress" atau "Free Wordpress Themes" dll. Biasanya hasil downloadnya akan berupa file "zip" atau "rar". Extract dulu file tersebut sehingga menjadi folder yang didalamnya terdapat beberapa file.
Langkah berikutnya yaitu login ke cpanel hosting kamu. kemudian pilih "File Manager". Kemudian masuk ke folder "Public_html --> ...wp-content\themes\". Upload file-file yang sudah di ekstract tadi ke folder tersebut. Kemudian buka alamat "http://namadomainmu.com/wp-admin" untuk login ke wordpress administrator (Jangan lupa ganti namadomainmu.com dengan nama domainmu ya). Lalu pergi ke menu "Design --> Themes". Nha maka disitu kamu akan menjumpai template yg telah kamu upload tadi. Untuk mengaktifkannya tinggal diklik aja template yg km suka kemudian "Activate". Trus coba deh buka blog wordpress kamu. Gimana berhasil gak? .... Gampang kan.... :D
Labels:
Wordpress
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>
<script src='http://sites.google.com/site/anasku2000/lovingheart.js'>
</script>
Nah jika Sudah Simpan dan lihat hasilnya
Sekian semoga bermanfaat bagi Anda dan selamat bercinta-cintaan dengan blog Anda
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>
<script src='http://sites.google.com/site/anasku2000/lovingheart.js'>
</script>
Nah jika Sudah Simpan dan lihat hasilnya
Sekian semoga bermanfaat bagi Anda dan selamat bercinta-cintaan dengan blog Anda
Labels:
Blogger Hack
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
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
Labels:
Catatanku
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
Dotted
dashed
solid
double
groove
ridge
inset
outset
Sekian Dulu dasar CSS yang lainya akan menyusul
Sekian semoga bermanfaat
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
- * in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
- * % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)
Dotted
dashed
solid
double
groove
ridge
inset
outset
Sekian Dulu dasar CSS yang lainya akan menyusul
Sekian semoga bermanfaat
Labels:
CSS
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..
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..
Labels:
Blogger Hack
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>
<div id="melayang">
<a href="ymsgr:sendIM?IdYmKamu"> <img src="http://opi.yahoo.com/online?u=IdYmKamu&m=g&t=1&l=us"/>
</a>
</div>
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
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); }
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>
<div id="melayang">
<a href="ymsgr:sendIM?IdYmKamu"> <img src="http://opi.yahoo.com/online?u=IdYmKamu&m=g&t=1&l=us"/>
</a>
</div>
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
Labels:
Widget - Gadget Blog
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
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>
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
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>
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
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
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>
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
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>
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
Labels:
Menu-Menu
