Tampilkan postingan dengan label komputer. Tampilkan semua postingan
Tampilkan postingan dengan label komputer. Tampilkan semua postingan

Hari gini belum punya google adsense, kemana aja kawan..hehehe. Google adsense merupakan situs PPC yang sangat menggiurkan dan patut untuk dicoba. Ini merupakan salah satu layanan atau produk dari situs google yang bisa kita nikmati secara gratis tapi bisa menghasilkan uang. PPC ini bisa dibilang merupakan PPC terbaik di dunia saat ini, karena selain sudah benar-benar terbukti membayar anggotanya ppc ini juga memiliki iklan yang sangat banyak dan format iklan yang lengkap sehingga kemungkinan utk mendapatkan klik iklannya besar.

Banyak para master blogger yang mendapatkan ratusan bahkan ribuan dolar dari situs ini per bulannya. Contohnya master blogger yang dah g asing lagi “bang cosa”, denger denger katanya sih beliau bisa menghasilkan ribuan dolar per bulannya dari situs ini..dahsyat abis, Cuma dari internet bro.

Cara kerja google adsense sama seperti misalnya ppcindo, kumpulblogger dll. yaitu kita menyediakan space atau ruang kosong di blog kita lalu memasukkan iklan google adsense di dalamnya. Dan nantinya kita akan dibayar setiap ada orang yang mengklik iklan google adsense itu(dilarang klik sendiri, karna nantinya akun kita akan di banned).

Komisi yang akan kita dapet dari google adsense ini sangat menggiurkan, sy pernah dapet 1 dolar hanya dari 2 klik iklan, bayangkan..kalo sehari ada 20 klik aja, 10 dolar deh dapet(Rp. 100rb coy, hehe)..dibandingkan dengan PPC lokal sangat jauh komisinya y.

Tertarik juga pengen memanfaatkan situs ini, oke deh..langsung aja menuju TKP..

1. Sebelum mendaftar, ada baiknya utk membaca dulu “Trik Membuat Akun Google Adsense Ini” sebagai referensi agar lancar..

2. Klo dah siap, langsung masuk ke www.google.com/adsense

3. Lalu pilih “SIGN UP”

4. Isi form pendaftarannya dengan benar dan harus valid

5. Mission Complete
Klo udah, km tinggal tunggu aja 2-3 hari ke depan..nanti klo akunnya di approve bakalan ada pemberitahuan via email. Dan jangan lupa selama 2-3 hari itu kalian harus banyak berdoa, karna agar akun kita diterima sekarang prosesnya lama dan susah banget…hehe..oke bro..

semoga berhasil !!
Bagi Anda yang mempunyai artikel panjang dan selalu memenuhi halaman depan blog, mungkin sudah saatnya sekarang Anda menambahkan kodeCSS di blog. Kode ini berfungsi Hanya  Menampilkan Judul Postingan Di Halaman Depan Blog, sehingga akan menambah efisiensi dalam menggunakan halaman depan blog Anda. Sebagai contoh ketika pengunjung meng-klik menu HOME blog apakah semua artikel dapat termuat dalam satu layar penuh? pasti tidak bukan walaupun sudah menambahkan Read More. Bagi yang berminat yuk baca lebih lanjut.



Kode CSS yang dipakai adalah sebagai berikut :


<style type='text/css'>


<b:if cond='data:blog.url == data:blog.homepageUrl'>


.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}


.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}


.post h3 strong, .post h3 a:hover {color:#333333;}


.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}


</b:if>
//edit by http://autoblogsite.blogspot.com
</style>

Note : Pada teks yang berwarna silahkan sesuaikan dengan selera Anda

Cara Pemasangannya  
1. Login ke blogger -> Rancangan -> Edit HTML 
2. Silahkan Copy kode diatas dan Paste tepat diatas kode </head> kemudian simpan atau pratinjau apa sudah benar apa belum. Selesai

Gimana, lebih efisien bukan pemakaian halaman depan blog Anda, semoga bermanfaat. Salam....
Pada posting kali ini, autoblogsite posting satu jQuery navigasi menu yang di panggil Lava lamp.  dari demo asal yang dapat Anda lihat di sini (silakan klik). Tutorial yang aku coba dari net.tutsplus.com ini nampaknya sangat menarik dari segi effect dan mudah untuk di pasang di template blogspot. saya mencoba implement di blogspot dan berhasil. Namun, sedikit modifikasi telah dilakukan bertujuan agar navigasi menu ini sesuai pada berbagai jenis theme dan dapat di pasang terus di HTML / Javascript. Background asal di ubah oleh warna background pada template. Warna button, warna teks dan ukuran juga di ubah karena ukuran asli yang terlalu besar.


Untuk memasang jQuery lava-lamp navigasi menu , ikut beberapa langkah di bawah ini.
  • Salin dan paste kode di bawah pada HTML / Javascript


<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}

ul, li {
margin: 0; padding: 0;
}

#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}

#lava-lamp li a {
color: #DDDCD8;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>

<div id="container">

<ul id="lava-lamp">
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>
<li><a href="http://link-di-sini.blogspot.com">About</a></li>
<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>
<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>
<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>
</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>

<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>

1.Untuk mengubah warna button, edit kode yang di bold berikut.
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0)); 
2.Untuk mengubah warna background, edit kode yang di bold berikut.

background: #32312E; 

3.Untuk mengubah URL dan Title, edit kode yang di bold berikut.
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>

<li><a href="http://link-di-sini.blogspot.com">About</a></li>

<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>

<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>

<li><a href="http://link-di-sini.blogspot.com">Contact</a></li> 
4.Untuk mengubah jarak background ( lihat gambar di bawah), edit kode yang di bold berikut.

   padding: 8px 430px 10px 0px;


   
Semoga Bermanfaat!!!.Semoga Sukses.!

Ini sama halnya cara membuat menu tab view tapi mungkin Anda tidak tahu, itu bagi para pemula termasuk saya :) . Gambar disamping adalah contoh dari menu tab view sama halnya dengan daftar isi bentuknya tapi ini disertai dengan atau terbagi menjadi tiga kolom supaya memudahkan Anda untuk menaruh setiap judul posting yang baru Anda posting. Selain untuk daftar isi, ini juga bisa digunakan untuk menaruh link banner teman2 blogger Anda, data statistik dari traffic Anda jika Anda membuat histats, visitor, pagerank dll. Membuat tab viem menu ini juga bisa meminimalisasi blog Anda biar tidak terlalu berantakan dimana fitur blog Anda yang sebagian besar menggunakan HTML atau Javascript. Kalau begitu mari kita coba buat dengan tips membuat view tab menu berikut ini:



1. Login ke blogger, Dasbor pergi ke>> Rancangan>>Edit HMTL.

2. Centang Expand Template Widget.


3. Anda perlu untuk membackup template asli anda terlebih dahulu dengan Download Template     Lengkap dan memilih simpan/save dan menyimpannya pada hard disk. Cadangan ini akan bermanfaat jika ada yang tidak beres dengan langkah2 yang anda kerjakan.

4. Cari kode ]]></b:skin>
Kalau sulit bisa dengan cara cepat saat pencarian yaitu dengan tekan CTRL F/F3.

5. Letakkan kode dibawah ini diatas kode tersebut.



/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 89px; /* ukuran lebar menu */
text-align: center; /* rata tengah */
height: 30px; /* ukuran tinggi menu */
padding-top: 10px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:verdana,Helvetica,sans-serif; /* font */
font-size:12px; /* ukuran font */
font-weight:bold; /* besar hurup menu */
background-color: #D8D8D8; /* warna latar menu */
color: #424242; /* warna huruf menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: gray; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #D8D8D8; /* warna background menu hover */
color: #424242;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#D8D8D8; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}

/* tabview css end */
Jangan lupa edit yang ditunjukkan kode yang berwarna merah sepaya sesuai dengan blog Anda Ok.

6. Kemudian Anda cari kode </head> dan letak kode dibawah ini diatas kode tersebut.


<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type='text/javascript'/>
7. Jangan lupa Simpan Template.

8. Kemudian Anda masuk ke menu Rancangan.

9. Klik Elemen Laman.

10. Klik Tambah Gedget.

11. Pilih HTML/JavaScript dan masukkan kode dibawah ini ke dalam content HTML tersebut.


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 273px;">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div class="Pages" style="width: 271px; height: 275px;">

<div class="Page">
<div class="Pad">
<li><a href="Link artikel 1 dalam judul 1">Sub menu 1 judul 1</a></li>
<li><a href="Link artikel 2 dalam judul 1">Sub menu 2 judul 2</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href='Link artikel 1 dalam judul 2'>Sub menu 1 judul 2</a></li>
<li><a href='Link artikel 2 dalam judul 2'>Sub menu 2 judul 2</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Link artikel 1 dalam judul 3">Sub menu 1 judul 3</a></li>
<li><a href="Link artikel 2 dalam judul 3">Sub menu 2 judul 3</a></li>
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initializeundefined'TabView');
</script><noscript><a href="http://www.centro.web.id" title="Centro Indonesia"><strong>software, tips blog, ebook, bisnis online
</strong></a></noscript>
Anda bisa ganti :

warna merah dengan link Anda.
warna ungu dengan judul sub menu.
warna biru dengan judul tab view.

12. Lalu Save dan selesai semoga berhasil.
Membuat Daftar Isi Dengan Jquery Diblogspot
Membuat Daftar Isi Dengan Jquery Diblogspot - Seperti yang anda ketahui, Daftar Isi sangat berperan penting dalam blog. Daftar isi bisa memudahkan pengunjung untuk menemukan artikel yang dicarinya pada suatu blog. Ok deh gan, Kali ini saya mau share lagi Tentang Daftar Isi Otomatis Dengan Efek Jquery. Daftar isi ini sangat menawan dan cantik sekali, mampu memikat hati para blogger. liat gan screenshootnya. Lumayan cantik bukan ? itulah efek efek yang mampu diciptakan Jquery,. jangan bengong aja gan, langsung aja dipraktekin mantranya berikut :




Login ke BloggerKemudian
Cari Rancangan - Edit Html - expand widget template.Kemudian letakkan kode berikut diatas kode ]]></b:skin>
#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6snICsfxM3cPWVES_jKKvNQuCkTwtZfnuGIvMeFK5Nruj_SCIsIjfeQ-5Lor96jg57KBcEDSkig_rCXY_Cjuglg50a91L5KBikEl9-LjEMHWUWR8J7I6yGJ6GnMYCO5zHj8Cpojv777U/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnwD8htav0OKq_zKhzi7p_w40K2ziCBZ2XQYl_zPbqi1G-Xv83Chx71p9rlrCYDMgP6wxBQLcevIwlhW-4Ij0KsvrcZ86KdajCjGdMZ694pUoY_nlFJ7MFPGuR_4D7AXdZzbq7f3gWZ8/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwAeBFSwWRyxGFzgWUh6djQ_DUseJtnecX11Fdq16RXJzPcbZ3GtdiYAux3iRwjQmDAbXMwo0aGO3lluHaVQwO2udUiAzu8opsLQHDE33O-9SVnCLHY0ZYT8cbMMGaUDyyNBL45J1ahdI/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

Jika sudah , tahap berikutnya adalah Meletakkan kode berikut diatas kode</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Kemudian Save Template.

Selanjutnya meletakkan Widgetnya di Sidebar :
Langsung klik Tata Letak - Add Widget - Html/Javascript
Kemudian Copy paste kode berikut :

<script type="text/javascript" src="http://cayun-code.googlecode.com/files/Acc1.js"></script>
<script src="http://tanpa-isi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Nb :
Ganti tulisan yang berwarna biru dengan alamat blog sobat.
Kemudian Save.
Memasang meta tag pada blog merupakan salah satu cara agar blog lebih mudah diindeks oleh mesin pencari seperti Google. Penyampaian informasi penting ke mesin pencari atau search engine mengenai halaman suatu blog dilakukan dengan cara memasang meta tag ini pada blog.

Pada kesempatan kali ini saya akan membagikan cara memasang meta tag deskripsi dan keyword setiap posting secara otomatis. Maksudnya, setiap posting kita akan memiliki meta deskripsi yang berbeda antara posting yang satu dengan posting yang lainnya tanpa perlu menambahkan meta tag pada setiap posting secara manual. Hal ini dilakukan agar kita tidak mengalami duplikasi meta deskripsi.


1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk berjaga-jaga jika nanti ada kesalahan dalam pengeditan kita sudah mempunyai backup-nya sehingga mudah untuk mengembalikan template seperti semula.

4. Cari kode <title><data:blog.pageTitle/></title>. Gunakan Ctrl + F untuk memudahkan pencarian.

5. Hapus kode tersebut dan ganti dengan kode di bawah ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content='Isi dengan deskripsi blog Anda' name='DESCRIPTION'/>
<meta content='kata kunci 1, kata kunci 2, kata kunci 3, kata kunci dst' name='KEYWORDS'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> : <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/></b:if>


  • Ganti tulisan yang berwarna merah dengan deskripsi dan kata kunci yang berhubungan dengan blog Anda.


6. Klik tombol SIMPAN TEMPLATE.