belajar komputer
Tampilkan postingan dengan label Tips n Trick. Tampilkan semua postingan
Tampilkan postingan dengan label Tips n Trick. Tampilkan semua postingan

Pandangan Saya Tentang Blogwalking

Anda para blogger pastinya sering blogwalking kan?Nah sekarang saatnya saya menjabarkan pandangan saya tentang blogwalking.Menurut saya blogwalking itu memiliki dampak-dampak,entah itu dari sisi positiv or dari sisi negatifnya.Ok akan saya jabarkan satu persatu...........
Yups,kata siapa blogwalking itu gak menyita waktu?Blogwalking itu sangat menyita waktu.Mungkin kita sering tidak menyadari bahwa hal ini sering terjadi,apa lagi ada beberapa blogger yang mengatakan sekali blogwalking rasanya tidak cukup.Kita juga sering tidak menyadari berapa banyak waktu berharga kita yang telah terlewat karena blogwalking.
Blogwalking Itu Menyita Waktu







Blogwalking Itu Menghabiskan Pulsa Modem






Gak percaya?coba aja kalian pikir berapa banyak blog lain yang telah kalian buka demi blogwalking.Nah secara tidak sadar bahwa pulsa modem kalian bakal sedikit demi sedikit berkurang.Tapi semua itu kembali kepada diri anda sendiri dalam memilih operator yang tepat.Yaitu yang sering memberikan layanan gratis internetan atau paket yang murah meriah.
Yang ini juga perlu diperhatikan.Kita mungkin sering tidak menyadari yang ini,coba aja pikirkan berapa uang yang harus dikeluarkan untuk bayar internet atau ke warnet?belum lagi ada biaya dari listrik yang terpakai saat kita menghidupkan PC/Laptop untuk blogwalking.
Blogwalking Itu Bisa Menghabiskan Uang



Blogwalking Bisa Menyiksa Tubuh






Ini yang paling tidak saya inginkan,karena pada dasarnya blogwalking bisa menyiksa tubuh,kenapa?Ya dengan blogwalking mungkin bisa menghabiskan waktu berjam-jam didepan monitor.Mungkin akan membuat mata kita menjadi minus.Dampak lain yang berkaitan juga banyak.
Tapi Diantara Sekian Banyak Dari Dampak Negatif Itu Juga Ada Dampak Positifnya
Ya,dengan blogwalking blog akan terlihat lebih terurus,karena kita sering melakukan blogwaling,secara tidak langsung akan banyak dampak positif yang didapat untuk blog,salah satunya blog lebih terurus.

Blogwalking Membuat Blog Lebih Terurus



Blogwalking Membuat Blog Kita Kebanjiran Visitor



Mungkin inilah hasil yang paling diinginkan para blogger,yaitu kebanjiran visior.Tentunya jika blog kebanjiran visitor menandakan bahwa blog kita telah menjadi hidup dan disukai/digemari oleh banyak orang.Selain itu juga itu menandakan bahwa blogwalking yang kita lakukan berhasil.
$$$.Itulah kebanyakan yang blogger lakukan ketika visitor udah banyak.Yaitu dengan memonitize blog mereka.Dengan cara tersebut mereka dapat mendapatkan uang dari blog mereka sendiri.Entah itu melalui cara pembuatan jasa pasang iklan,Iklan PPC seperti Google Adsense,Sitti,IdBlogNetwork,atau cara yang lainnya.


Blogwalking Bisa Mendatangkan Rupiah







Bagaimana?Sudah sekian banyak yang saya jabarkan tentang pandangan saya mengenai blogwalking.Pesan dari saya adalah Belajarlah Menjadi Blogger Yang Bijaksana.Sekian dari saya.Terima Kasih!

Efek Text Shadow Dengan CSS3

Halo sobat semua.Sudah lama saya gak update postingan nih dikarenakan penuhnya aktivitas-aktivitas lain diluar ngeblog.Sekarang saya akan posting tentang Efek Text Shadow Dengan CSS3.

Efek Ekstra Glow
.extraGlow {
 color:white;
 text-shadow:0 0 30px yellow ,
0 0 70px yellow ;
}




Efek Ekstra Glow


Stroke Text
.Stroke{
color:red;
font-weight: bold;
text-shadow: 1px 1px 0px #000,  -1px -1px 0px #000;



Stroke Text





Teks 3D Efek
.effect3D {
color:rgba(255,255,0,.7) ;
font-weight: bold;
text-shadow: 1px 1px rgba(255,128,0,.7),
2px 2px rgba(255,128,0,.7),
3px 3px rgba(255,128,0,.7),
4px 4px rgba(255,128,0,.7),
5px 5px rgba(255,128,0,.7);




Teks 3D Efek






Artikel ini saya baca dari blog Rudy Azhar

Blogazine & Responsive Template Downloads

Blogazine & Responsive Template Downloads - Ya,sesuai namanya kali ini saya akan share tentang Blogazine & Responsive Template.Nah tidak ada template khusus untuk membuat Blogazine dan Responsive.Tapi tentu saja ada template yang sudah didesain langsung hingga memudahkan anda untuk memiliki blog bergaya blogazine.Cekidott!!





Nah sekian postingan singkat saya ini,Semoga bermanfaat :)

Riset Keyword Menggunakan Google Insight

Riset Keyword Menggunakan Google Insight-Pernahkah anda mendengar Google Insight ?Ya, Google Insight adalah situs layanan google yang dapat membantu seseorang mencari sebuat kata kunci pencarian dari semua hasil pencarian di seluruh dunia yang telah masuk ke mesin pencarian google (web, gambar, berita, produk). Seseorang dapat mengetahui kata kunci berdasarkan daerah, rentang waktu dan juga kategori. Hasil pencarian yang terlihat akan menunjukkan tingkat grafik dari kata kunci yang dicari ataupun yang sedang populer di mesin pencari google. Hasil riset apa saja yang bisa kita dapatkan dari Google Insight ? Bagaimana cara riset yang baik dan benar dengan Google Insight ?


Bagaimanakah Cara Menggunakan Google Insight ?
1. Silahkan Menuju Google Insights : http://www.google.com/insights/search/  
2. Kedua :  Pada sebelah kanan anda Ada menu Filter,yang berisi :
  • Jenis Penelusuran  : Penelusuran Web, Gambar, Berita dan Produk
  • Negara : Pilih saja Indonesia Jika ingin mencari apa yang paling Trend di Indonesia
  • Waktu : Pilih lah Rentang waktu yg ingin kita Cari misalnya 12 bulan Terakhir
  • Kategori : Disana ada banyak pilihan, jika kita seorang Blogger Tentu kita akan pilih Semua Kategori
  • Kawasan : Pilihan Kawasan untuk semua wilayah di Indonesia

3. Setelah itu klik tombol Penelusuran.Nanti akan keluar Keyword yang menjadi penelusuran teratas Google dan Keyword yang lagi melejit.Nah silahkan anda buat artikel yang berhubungan dengan Keyword tersebut.


Berikut Screenshot Google Insight :


Nah sekian dari saya dan jika ada salah mohon dikoreksi ya :)
Semoga bermanfaat

Seo Off Page

Seo Off Page - Nah setelah saya post tentang Seo On Page,Saatnya saya posting tentang Seo Off Page.

SEO Off Page adalah segala bentuk teknik optimasi search engine yang dilakukan di luar blog atau website yang dimaksud.
Beberapa contoh SEO Off Page

1. Backlink

Backlink adalah tautan dari blog atau website lain ke blog atau website anda. Sebuah backlink diibaratkan adalah sebuah rekomendasi, semakin banyak yang merekomendasikan, maka blog anda akan lebih mendapatkan perhatian dari search engine. 

2. Submit Site Map ke Webmaster Tools

Sitemap adalah sebuah cara sederhana bagi para webmaster untuk menginformasikan kepada search engine ( Google misalnya ) tentang halaman-halaman pada situs mereka yang bisa di-crawl. Bentuk paling sederhana Sitemap adalah berupa file XML yang berisi daftar URL sebuah situs beserta metadata-nya masing-masing. Metadata misalnya : kapan terakhir di-update, seberapa sering URL biasanya berubah, dan tingkat relatif keutamaannya terhadap URL lainnya. Metadata ini akan membantu search engine sehingga lebih mudah membaca dan menge-crawl situs.Nah maka dari itu sangat penting agar anda mensubmit SiteMap ke Webmaster Tools.

3. Ping


Ping adalah cara yang dilakukan oleh blogger untuk memberitahukan update konten kepada search engine.Beberapa contoh tempat Ping
  • Ping-o-Matic!
  • http://mypagerank.net/service_pingservice_index
  • Pingoat
  • Autopinger
Layanan tersebut kebanyakan gratis atau free, dan kadang tidak kita pun tidak perlu mendaftar  terlebih dahulu.

Nah sekian penjelasan dari saya mengenai Seo Off Page.Kurang dan lebihnya saya mohon maaf.Semoga bermanfaat ^_^



Optimasi SEO On Page

Optimasi SEO On Page - Halo Semua ! Nah sudah lama saya tidak update potingan blog karena adanya kesibukan tersendiri di luar dunia maya.Nah dikesempatan ini saya akan posting tentang Optimisasi SEO On Page.Nah Teknik ini sangat penting untuk anda gunakan pada blog anda.Teknik Optimasi SEO On Page pada blog memang sangat dibutuhkan sekali untuk meningkatkan SERP di search engine.Nah sekarang saya akan bahas satu-persatu.


1. Title Tag, Meta Description, dan Meta Keyword
Didalam penulisan Title Tag, Meta Description, dan Meta Keyword Anda juga harus memasukkan keyword di dalamnya agar lebih kuat dalam search engine. namun jangan berlebihan dalam memasukkan keywordnya karena akan dianggap spam.


2. Penggunaan Tag H1, H2, H3
Dalam menulis artikel sebaiknya anda menggunakan tag H1, H2, H3 agar search engine lebih jelas dalam menulusurinya, atau setidak-tidaknya dalam artikel harus mengandung tag H1 karena itu sangat penting.


3. Penggunaan Image Alt Text
Robot google tidak bisa menulusuri dan mengenali gambar, cara agar gambar bisa terindex oleh google kita gunakan tag Image Alt Text dengan kata keyword yang kita bidik.Berikut adalah contoh dari Image Alt Text :
<IMG SRC="Image URL" ALT="Keyword">


4. Bold, Italicize dan Underline
Kata kunci utama harus anda beri bold, italicize dan underline untuk memperkuat nilai dari kata kunci utama tersebut. Jadi minimal harus ada tiga kata kunci utama pada artikel anda.


Nah Mungkin Itulah Beberapa Teknik Optimasi SEO On Page.Kurang dan lebihnya saya mohon maaf dan Semoga Bermanfaat ^_^

Buat 3 Kolom di Postingan

Halo Semua ! Nah akhirnya saya bisa posting juga.Dikesempatan kali ini saya akan posting tentang Buat 3 Kolom di Postingan .Silahkan liat dibawah ini :


Buat 3 Kolom di Postingan adalah salah satu dari teknik cara membuat Blogazine .Nah sebelumnya saya sudah posting bagaimana cara membuat blogazine (Baca Disini).Nah Kolum ini bisa anda tambah atau anda kurangi jumlah kolumnya sesuai yang anda inginkan. Silahkan anda liat kode disamping ini .


Ini adalah codenya :
<table cellpadding="30" cellspacing="10"><tbody>
<tr> 
<td align="justify" valign="top" width="300"> isi postingan pertama </td>

<td align="justify" valign="top" width="300"> isi postingan kedua </td>

<td align="justify" valign="top" width="300"> isi postingan ketiga </td>
</tr>
</tbody></table>

Code tersebut harus anda masukkan pada Edit HTML dibagian postingan. Caranya buka Blogger.com > Entri Baru (New Entry) > Edit HTML. Dan anda tinggal gunakan kreasi anda sendiri untuk membuatnya lebih menarik.
Lihatlah gambar berikut :

eNBe :

  • Kode berwarna hijau adalah lebar dari kolum
  • Kode berwarna merah adalah tempat anda menuliskan postingan
  • Jika anda sudah meletakkan code tersebut di mode Edit HTML.Silahkan anda ketik postingan anda di dalam mode Compose
Semoga Bermanfaat ^_^

Efek Shadow Pada Blog

Halo semua,setelah posting tentang Resolusi Juara 2012,saya akan posting tentang Efek Shadow Pada Blog.Nah efek ini dapat digunakan untuk memperindah blog anda dengan beberapa efek bayangan yang muncul.Efek ini dapat digunakan pada page blog,kotak,gambar,atau widget.Nah tertarik?Silahkan ikuti tutorial berikut ini.




1. Pertama, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, tanpa memberi efek blur,berikut scriptnya :
<style type="text/css">
.box-shadow1{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: 7px 7px #818181;
-webkit-box-shadow: 7px 7px #818181;
-moz-box-shadow: 7px 7px #818181;
}
</style>
<div class="box-shadow1">TEKS DISINI</div>
 Nah ini hasilnya :




TEKS DISINI


2. Kedua, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah kotak, dengan memberi efek blur:
<style type="text/css">
.box-shadow2{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
}
</style>
<div class="box-shadow2">TEKS DISINI</div>
Nah berikut hasilnya :


TEKS DISINI

3.  Ketiga, menambahkan bayangan kekiri dan bayangan keatas pada sebuah kotak, dengan memberi efek blur:
<style type="text/css">
.box-shadow3{
width:330px;
height:50px;
padding:5px;
margin:0 auto;
color:#fff;
background:#00378A;
border: 1px solid black;
box-shadow: -7px -7px 8px #818181;

-webkit-box-shadow: -7px -7px 8px #818181;

-moz-box-shadow: -7px -7px 8px #818181;
}
</style>
<div class="box-shadow3">TEKS DISINI</div>
Nah berikut hasilnya :


TEKS DISINI

4. keempat, menambahkan bayangan kekanan dan bayangan kebawah pada sebuah gambar, dengan memberi efek blur :
<style type="text/css">
.box-shadow4{
width:300px;
height:300px;
padding:5px;
margin:0 auto;
color:#ooo;
background:#00378A;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR65aNDpqVeoxP251gF8lNssK1N1yuwX5LiCIAP6ya_Df3dzfcERuAIv9AVV0FV2Edm2L_-ecWWpTejgVVlaoTkEBhIi_46qCw0rcd_EksG1xF7YR3ZdHZrAFujgJXBMOkszVEhYpxz51N/s300/Gardu.jpg) no-repeat 0px 0px;
opacity:0.7;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
}
</style>
<br />
<div class="box-shadow4">TEKS DISINI</div>
Berikut adalah hasilnya :

TEKS DISINI

Nah sekarang bagaimana cara menggunakannya pada page blog atau widget ?
Silahkan anda copas code yang berwarna merah untuk menambahkan pada widget atau page blog.

Selesai deh tutorial saya kali ini.Semoga Bermanfaat ^_^

eNBe : Untuk kode yang berwarna hijau adalah kode warna bayangan,dapat diubah sesuai yang anda inginkan

Scroll Pada Widget

Nah setelah saya posting tentang Cara Buat Scroll Pada Kotak Komentar (Baca Disini) ,Sekarang saya akan posting Membuat Scroll Pada Widget yang dapat anda gunakan pada widget sobat.Untuk Demonya silahkan lihat di Home Page blog saya pada widget Site Info (Lihat Disini).Nah silahkan ikuti tutorial singkat berikut ini :

1. Login ke akun Blogger.com sobat.
2. Buka bagian Rancangan (Design) > Tambah Gadget >  HTML/Javascript
3. Masukkan kode berikut ini pada bagian HTML/Javascript

<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 200px; height: 80px; text-align: left;">Gadget Disini </div>

4. Simpan dan selesai deh!!!
eNBe : Pada bagian yang berwarna merah silahkan anda isi dengan script widget sobat.


Selesai juga tutorial pendek saya.Semoga Bermanfaat ^_^

Macam-Macam Border

Akhirnya saya bisa posting lagi setelah melewati serangkaian soal-soal Ulangan Semester.Nah dikesempatan ini saya akan posting tentang Macam-Macam Border . Nah sobat pernahkan liat blog yang menyertakan border di potingan/widget ? Nah jika anda ingin mencobanya silahkan ikuti tutorial berikut :

DEMO :

Solid

Dashed

Dotted

Inset

Outset

Nah sekarang bagaimana cara menggunakannya??
Cara menggunakannya dibagi jadi dua,yaitu untuk widget dan untuk postingan

1. Yang untuk widget silahkan tambahkan code berikut :
border : 2px solid #000000
2.  Nah kalau untuk di postingan silahkan tambahkan kode berikut :
<div style="-moz-background-inline-policy: -moz-initial; background: transparent; border: 2px Dotted #000000; padding: 4px; text-align: center;">
Teks ketik disini !!!!</div>
 Bagaimana cara penggunaannya ?
Silahkan buka bagian Edit HTML dan pastekan kode diatas di bagian Edit HTML.Untuk lebih jelasnya liat gambar berikut :

Selesai deh.
Semoga Bermanfaat ^_^
NB : Untuk yang berwarna merah dapat diganti dengan kode yang ada di bagian demo ya!!

Tips Edit Kotak Komentar

Nah sekarang saatnya saya share tentang Tips Edit Kotak Komentar .Saya akan share 2 cara untuk edit kotak komentar anda.Nah silahkan simak penjelasan berikut ini.

1. Cara Membagi Kotak Komentar
Apa itu membagi kotak komentar?Membagi kotak komentar adalah menambahkan widget/teks/adsense disamping kotak komentar sobat.Nah silahkan ikuti cara-cara dibawah ini.

1. Login dulu ke Blogger.com
2. Setelah itu pilih Rancangan (Design) > Edit HTML
3. Centang tulisan "Expand Template Widget"
4. Cari tulisan blogger-iframe-colorize
5. Nanti anda akan menemukan kode seperti ini (Setiap template berbeda-beda)
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='240' id='comment-editor' name='comment-editor' src='' width='510'/>
 6. Ubahlah kode tersebut menjadi seperti di bawah ini
<table border='0' cellpadding='0' cellspacing='0' width='480px'>
<tbody>
<tr>
<td valign='top' width='425'>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='240' id='comment-editor' name='comment-editor' src='' width='510'/>
<td style='padding-left: 5px; text-align: left; padding-top: 5px;' valign='top'> <table cellpadding='0' cellspacing='0'>
<tbody>
<tr>
<td align='left' valign='top' width='300'>

<div style='-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background: white none repeat scroll 0% 0%; border: 1px solid #3B5998; padding: 2px 5px;'>

Isi dengan yang sobat mau (Widget/Teks)</div>

</td></tr> </tbody></table> </td> </tr> </tbody></table>
 7. Simpan template anda.Selesai deh.

2. Cara Buat Scroll Pada Kotak Komentar
Tips ini sangat berguna bagi sobat untuk menghemat tempat diblog dari banyaknya komentar pengunjung.Nah jika
tertarik ikuti cara-cara berikut ini

1. Masih pada bagian Edit HTML ,Silahkan sobat centang "Expand Template Widget".
2. Setelah itu cari kode <dl id='comments-block'>
3. Jika sudah ketemu silahkan copy code ini dan paste diatas code <dl id='comments-block'>

<div style='overflow:auto; width:ancho; height:250px;'>
 Belum selesai sampai disini.Karena kita menggunakan perintah <div> maka kita harus menutup perintah tersebut.Nah silahkan cari kode </dl>.Setelah itu tambahkan code </div> dibawahnya.Untuk lebih jelasnya silahkan lihat kode berikut

<div style='overflow:auto; width:ancho; height:250px;'>    
<dl class='comments-block' id='comments-block'>
            <b:loop values='data:post.comments' var='comment'>
              <dt class='comment-author' id='comment-author'>
                <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>
              <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>
              <dd class='comment-footer'>
                <span class='comment-timestamp'>
                    <i><data:comment.timestamp/></i>
                  <b:include data='comment' name='commentDeleteIcon'/>
                </span>
              </dd>
            </b:loop>
          </dl>
        </div>
 4. Simpan template dan selesai deh

Selesai deh Tips singkat dari saya.Semoga Bermanfaat ^_^

Percepat Loading Blog

Jika anda mempunyai blog yang loadingnya lumayan lama saya akan berikan sedikit tentang cara Percepat Loading Blog .Cara-cara ini adalah cara-cara yang saya gunakan dalam blog saya ini.Ada beberapa cara yang dapat digunakan untuk Percepat Loading Blog ,berikut adalah cara-caranya :






1. Post (Bagian Posting)

Pada bagian utama blog (Homepage),jumlah posting atau artikel dapat mempengaruhi cepat lambatnya loading blog anda.Semakin banyak posting atau artikel yang ditampilkan maka akan semakin lama pula loading akan berlangsung.Jika anda ingin mengubahnya silahkan buka blogger dan login dengan akun anda > Dashboard > Design/Rancangan > Dan klik "Edit" pada badan blog post anda.

2. Menggunakan Lazy Loader

Lazy loader adalah plugin jQuery di mana efek lazy load akan menangguhkan proses loading bagi image yang terdapat pada blog.Efek ini dapat meringankan blog anda dengan cara membuat gambar/image yang terdapat pada blog akan loading ketika mouse scroll diarahkan kebawah.Nah berikut ini adalah scriptnya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4QSygs6dNVFBccwsCEwMO5gNGx4159mRcZ9-EbAo_5rRivwLHAkee8v4gnY8Tq_Fh6EfwreULXOi8iQ_WpGnGFz_zhhU_vfaPs5_bBCLUsgD4v_8rQ3pKvDS6fMrC1YHHP6zfkFLo2cM/s1600/grey.gif"
});
});
</script>
 Script ini dapat anda tambahkan pada bagian bawah postingan anda atau menambahkannya pada widget paling bawah blog.

3. Banyaknya Widget yang Terdapat Pada Blog

Hal ini juga dapat mempengaruhi kecepatan loading blog.Semakin banyak widget semakin lama pula proses loading blog berlangsung.

Mungkin ini adalah beberapa cara yang dapat mempercepat loading blog anda yang saya ketahui.Tetapi ini adalah sedikit cara dari banyak cara yang dapat anda gunakan untuk mempercepat loading blog anda.

Semoga Bermanfaat ^_^

Cara Buat Blogazine

Nah siapa yang belum tau apa itu blogazine? Blogazine adalah postingan blog yang bergaya seperti magazine.Nah terkait dengan hal itu saya akan berikan beberapa tips Cara Buat Blogazine .Blogazine menggunakan sistem custom post,jadi blogazine akan muncul di page postingan bukan di Home Page blog sobat.Bagi yang mau coba Cara Buat Blogazine silahkan ikuti cara-cara berikut ini :

1. Buka dan login dulu ke Blogger.com
2. Setelah itu Buka bagian posting > Entri Baru
3. Lalu di bagian Entri Baru silahkan buka bagian Edit HTML.Setelah itu copy code berikut ini :

<style type="text/css">
body {
background:#999;
}
#header-wrapper,#header-inner,#sidebar-wrapper { display:none !important; }
#main-wrapper {
  width:72.5555555%;
  word-wrap: break-word;
  overflow: hidden;
  background:rgb(121,121,121);
  padding:10px;
  }
#outer-wrapper {
  background:rgba(121,121,121,.6);
  padding:5px;
  }
</style>

4. Letakkan code diatas di bawah postingan anda.Untuk lebih jelasnya silahkan liat gambar berikut ini :


Semoga Bermanfaat ^_^
NB : Code diatas masih bisa dikembangkan lagi,jadi silahkan anda kembangkan ya!

Cara Buat Tooltips

Tooltips adalah sebuah object yang menandai object lain dengan cara mengeluarkan sebuah tulisan lain yang bisa diartikan deskripsi dari sebuah object.Nah Tooltip yang saya sertakan ini adalah tooltip yang mengikuti arah gerak mouse.Nah bagi yang ingin coba silahkan ikuti cara-cara berikut ini.

1. Buka Akun blogger.com
2. klik Layout/Design  Edit HTML  Cari kode <head>.Letakan kode berikut tepat di bawah kode <head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/farixsantips/scripts/vtip.js"></script>

<style type="text/css">
p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.8em; background-color: white; border: 1px solid #a6c9e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999 }
p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }
</style>
4. Berikutnya tinggal dimana sobat meletakan Object apapun dengan di tambah Class="vtip". 

Sebagai Contoh :
Link →
<a href="http://it-softcenter.blogspot.com" class="vtip" title="Berikut adalah Blog tutorial">IT-Soft Center</a>
Tulisan Merah adalah Url Link, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Kuning adalah Deskripsi dari sebuah Object itu.

Gambar →
<img src="URL_GAMBAR" class="vtip" title="Deskripsi dari sebuah gambar"/>
Tulisan Merah adalah Url Gambar, Tulisan Biru adalah Class yang harus vtip, sedangkan Tulisan Kuning adalah Deskripsi dari sebuah Object itu.



Sekian Tutorial Cara Buat Tooltips dari saya.Semoga Bermanfaat ^_^

[SEO] Cara Membuat Breadcrumbs

Memanfaatkan koneksi internet sekolah saya sempat-sempatkan untuk ngeposting.Kali ini saya mau posting tentang trik seo, Cara Membuat Breadcrumbs . Nah jika tertarik,silahkan ikuti cara-cara berikut ini.

Pertama,pastikan anda sudah membuat label pada blog.
Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):
<b:includable id='main' var='top'>
Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.
<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack -->
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>

          Browse:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
&gt;  <b><data:post.title/></b>
          </b:if>

        </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

Semoga Bermanfaat ^_^

Tulisan Bergaya Koran

Pernahkah anda melihat blog yang mempunyai huruf postingan pertamanya lebih besar daripada huruf lainnya? Nah itulah yang disebut Tulisan Bergaya Koran .Jika anda ingin membuatnya silahkan ikuti langkah-langkah berikut ini.


1. Pertama sign in dulu ke blogger
2. Setelah itu klik menu layout
3. Setelah itu klik menu Edit HTML
4. Klik tulisan Download Full Template untuk berjaga-jaga jika terjadi kesalahan
5. Cari kode ]]></b:skin> setelah itu copas script berikut diatas kode ]]></b:skin>

/* kode untuk hurup awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

6. Simpan template

Tetapi langkah-langkah di atas merupakan langkah pertama, langkah selanjutnya yang harus sobat lakukan adalah ketika melakukan posting harus pada posisi Edit HTML bukan pada Compose, nah simpanlah huruf awal artikel pada kode berikut <span class="awal">hurup awal </span>. Setelah itu terserah sobat, mau tetap pada posisi Edit HTML atau berpindah ke mode Compose


Semoga Bermanfaat ^_^

Buat Burung Twitter Berterbangan di Blog

Mungkin anda mempunyai akun twitter? Nah mungkin anda memerlukan tips ini agar akun twitter anda dapat terlihat di blog anda yaitu dengan cara menambahkan Widget Burung Twitter Berterbangan di Blog.Nah langsung saja ayo ikuti cara-cara dibawah ini

1. Yang pertama login dulu ke akun blogger sobat
2. Buka bagian Rancangan > Elemen Laman
3. Lalu tambahkan widgetnya dengan cara klik tambah gadget lalu pilih tambah HTML/JavaScript
4. Bagian Judul dikosongkan saja lalu silahkan copas script berikut

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://mangde.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU8gYtv_F4t5MXyUa_kPVZRLO9nT9pqlcwSxkbpPcYDY4squ6qzj6lqz-C4KK21VcL-jrJ45z592m5U3jM2VGKVWyS274Dzm9cLJdQ4PjixywaegQ-iLufJ55KATg3x11TrMrKyxZ_eCs/s1600/cyan+bird.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/#!/Username";
var tweetThisText = "Twitter - UserID http://www.it-softcenter.blogspot.com";
tripleflapInit();
</script>

5. Silahkan edit yang berwarna merah
6. Simpan

Selesai deh
Semoga Bermanfaat ^_^

Buat Kotak Pencarian Melayang

Tentu anda sudah liatkan kotak pencarian yang ada di blog ini melayang ? Nah yang mau coba silahkan ikuti langkah-langkah berikut ini.

Untuk membuatnya masuk ke Edit HTML
Copy kode di bawah ini dan paste di atas ]]></b:skin>


 /* Search
-----------------------------------------------
 */
#search {
width: 260px;
font-size: 11px;
margin: 0;
padding: 6px 0 0 10px;
}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}

#searchbox {
float: right;
background: #fefefe;
width: 180px;
color: #000;
margin-right: 15px;
margin-top: 0px;
padding: 4px 0 3px 5px;
border: 1px solid #ababab;
display: inline;
font: 12px normal 'verdana';
}

#searchbutton {
background: #000;
float: left;
width: 50px;
color: #fff;
margin: 0 0 6px 0;
padding: 3px 3px 2px;
border: none;
font: bold 16px arial;
}

#searchbutton a:hover {
background: #000;
}

#melayang {
background: #fcfcfc;
border: 1px solid #f0f0f0;
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); }


Selanjutnya copy kode di bawah ini dan paste di atas kode </body>

<div id='melayang'>
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari disini...&quot;;}' onfocus='if (this.value == &quot;Cari disini...&quot;) {this.value = &quot;&quot;}' type='text' value='Cari disini...'/>
<input cursor='hand' id='searchbutton' type='submit' value='go'/>
</form></div>
</div>

Semoga Bermanfaat ^_^

Menambah Icon di Samping Judul Artikel

Apakah anda pernah berpikir bagaimana jika di samping judul artikel terdapat icon ? Tentu akan lebih bagus kan ? Nah sekarang saya posting bagaimana cara menambahkannya.Silahkan ikuti cara-cara berikut ini.









1. Masuk Akun Blogger Anda dan klik Layout pilih Edit html.Tapi sebelumnya saya sarankan untuk mendownload template lengkapnya buat jaga-jaga.

2. Cari Kode Css Berikut :
   .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;

3. Cari Icon Yang ada suka misalnya icon buku dan pena yang punya gambarnya (http://tbn1.google.com    /images?q=tbn:nlmFs_SO55kJ_M:http://remas-alakbar.com/images/
buku.pngh) atau anda bisa mencarinya di Iconarchive.com, disana anda akan mendapatkan banyak contoh icon.

4. Ganti kode padding:30px 0px 0px 45px; Jadi padding:48px 0px 0px 45px; dan tambahkan height:48px; dan background:url nya dibawah color:#333;yang jadinya seperti ini:
.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;
background:url(http://tbn1.google.com/images?q=tbn:nlmFs_SO55kJ_M:
http://remas-alakbar.com/images/buku.png) no-repeat left center;

5. Save templatenya.
Nah silahkan mencoba apakah anda bisa.. saya yakin anda pasti bisa

Semoga Bermanfaat ^_^

Komentar Admin Berbeda Dengan Pengujung

Anda pasti pernah kan comment di blog ? Nah gimana caranya agar komentar admin blog itu sendiri dan komentar dari pengunjung berbeda agar bisa dikenali ? Berikut adalah tipsnya.
1. Login ke blogger, masuk ke dashboard> design>edit html. Lalu centang expand widget template. Jangan lupa anda backup terlebih dahulu template anda. 

2. Cara kode berikut ini  <data:comment.author/>
Lebih lengkapnya seperti ini, dan paste code yang berwarna merah di dalamnya 
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
            
<b:if cond='data:comment.author == data:post.author'> 
<dd class='author-comments'> 
<p><data:comment.body/></p> 
</dd> 
<b:else/>

            
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<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'>

3. Paste kode berikut sebelum ]]></b:skin>

.author-comments {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeTUZcSUVNwua2jSLSEt_TWoNT5ZD8eN4Odb2q8rFqsy0MzC03vZWC_nYtYEO-LC8iHe6pgBpIrlXAkpItwabghCrnaixA7j69ka1_AJNaPBY_Ny3rjr15O0bKvPaZ0VyhLLJoIy4tHeY/s288/logo_admin.gif") no-repeat scroll right top #F9F9FC;
padding: 5px 5px 10px 5px; 
}

Selesai, dan jangan lupa anda simpan. Lihat hasilnya. Semoga berhasil.

Semoga Bermanfaat ^_^