Cara Membuat Daftar Isi Sesuai Label dan Tanggal di blogger

Selasa, 17 Juli 2012

Cara Membuat Daftar Isi Sesuai Label dan Tanggal di blogger - TOKONews. Tutorial blog kali ini kita akan belajar mengenai cara memasang Daftar Isi Otomatis pada Blog. Memasang Daftar Isi sangatlah penting, Mengapa? Anda dapat melihat artikel sebelumnya melalui daftar isi otomatis ini sesuai dengan tanggal, label yang tersusun rapi. Baca juga tutorial seo terbaru.


Script daftar isi otomatis ini akan menampilkan artikel terbaru dan terlama secara detail. Cara memasang Daftar Isi Otomatis ini sangatlah simple dan sederhana. Anda dapat meletakan daftar isi ini pada postingan baru atau pada sidebar blog. 

Langkah-langkah membuat Daftar Isi Otomatis:

• Mulalah membuat artikel baru/post editor, 
• Pilih menu HTML pada post editor, 
• Masukan scipt JS di bawah ini kedalam post editor dengan format HTML, 

<script src="http://koisine-bloggers.googlecode.com/files/daftarisi.js">
</script>
<script src="http://4downloadtube.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Catatan : Ganti tulisan berwarna merah dengan alamat blog Anda.

• Kemudian Publikasikan. 

Agar tidak bingung memasang Daftar Isi Otomatis dengan format HTML, lihat gambar di bawah ini,

Selain meletakan Daftar Isi Otomatis pada postingan Anda juga dapat meletakannya pada sidebar blog, tetapi alangkah baiknya jika meletakan pada postingan.

Sekian artikel mengenai Cara Membuat Daftar Isi Sesuai Label dan Tanggal di blogger ini, semoga tutorial ini bermanfaat dan berguna. Sumber Cara Membuat Daftar Isi Sesuai Label dan Tanggal di blogger disini.

Read Post | komentar

Cara Membuat Link Bergoyang atau Nudging Otomatis

Cara Membuat Link Bergoyang atau Nudging Otomatis - Dalam panduan blogger kali ini kita akan mencoba tips/trik agar semua link pada blog bergoyang dengan otomatis. Link tersebut akan bergoyang jika terlintas cursor mouse. Trik ini menggunakan script via jQuery yang nantinya semua link akan bergoyang / bergerak secara otomatis. Dengan trik ini akan semakin mempercantik tampilan blog sobat. Baca cara pasang related post.

Cara Membuat Link Bergoyang atau Nudging Otomatis

Cara Membuat Link Bergoyang / Nudging Otomatis

• Login ke Blogger Dashboard -- Tata Letak -- Tambah Widget
• Pilih Javascript/HTML, kemudian copy paste script jQuery di bawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });
</script>

• Tahap akhir, Simpan

Demikianlah panduan blogger tentang Cara Membuat Link Bergoyang / Nudging Otomatis ini. Semoga artikel cara membuat link bergoyang ini bermanfaat dan berguna bagi pembacanya.

Read Post | komentar

Cara Pasang Related Post dengan Efek Hover Judul + Komentar

Cara Pasang Related Post dengan Efek Hover Judul + Komentar - TOP News hari ini. Dalam panduan kali ini kita akan mencoba cara menambahkan widget related post bergambar di bawah postingan Anda. Tampilan related post bergambar ini berbeda dengan yang lainnya, karena tampil dengan gambar seorang diri serta akan muncul judul artikel + jumlah komentar ketika pucuk mouse mendekati related post tersebut. Related Post dengan efek hover ini memberikan kesan yang indah dan dewasa serta related post ini akan muncul di bawah postingan Anda.

Cara Pasang Related Post dengan Efek Hover Judul + Komentar

Bagaimana Cara Memasang Related Post dengan Efek Hover 

Judul + Komentar

• Login ke Blogger Dashboard Anda -- Template -- Edit HTML
• Centang Expand Template Widget
• Gunakan ctrl-f dan cari kode ]]><b:skin>
• Kemudian letakan css berikut sebelum kode di atas

/* Related Post Widget */

#related-posts{
float:left;
height:160px;
margin-bottom:10px; 
outline: 1px solid #fff;
border: 1px solid #ddd;
background: #f9fafb;
}

#related-posts h3{
    font-family: Francois One;
    font-size:20px;
    font-weight:400;
    color: #222222;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    margin-left: 0.5em;;
    padding-top: 0em;
}

#related-posts ul{
margin:5px;
width:613px;
padding-left:17px;
list-style:none;
display:block;
}
#related-posts ul li{
list-style:none;
position:relative;
float:left;
border:0 none;
margin-right:11px;
padding:2px;
width:86px;
}


#related-posts ul li:hover{z-index:100}
#related-posts ul li:hover img{border:3px solid #BBB}


#related-posts ul li:hover div{
font-size:7px;
text-transform:capitalize;
position:absolute;
top:20px;
left:-15px;
margin-left:0;
width:130px
}
#related-posts ul li img{
border:3px solid #DDD;
width:80px;
height:80px;
background:#FFF;
display:block;
}
#related-posts ul li div{
position:absolute;
z-index:99;
margin-left:-999em
}
#related-posts ul li .title{
text-align:center;
border:1px dotted #CCC;
background:#fff;
padding:5px 10px
}

• Kemudian cari kode <data:post.body/> dan letakan kode berikut sebelum kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Other Tutorials For You To See:</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear both'/>
</b:if>

• Tahap akhir, Simpan Template.

Cukup mudah bukan cara memasangnya, dan jika Anda tertarik langsung saja memasangnya dan lihat sendiri hasilnya.

Demikianlah panduan blogger tentang Cara Pasang Related Post dengan Efek Hover Judul + Komentar ini. Semoga panduan ini bermanfaat dan berguna bagi pembacanya. Sumber.

Read Post | komentar

Cara Membuat Blog Gratis Blogspot

Rabu, 04 Juli 2012

Cara Membuat Blog Gratis Blogspot - TOKONews kesempatan ini coba menulis tutorial bagaimana cara membuat blog gratisan. Dengan memanfaatkan blog gratis kita pun bisa mendulang dolar dari internet salah satunya dengan berbisnis hosting. Anda bisa coba membuat blog gratis dari blogger.com yang kita ketahui blogger.com atau blogspot adalah kepunyaan google.


Berikut beberapa langkah dan tutorial mendaftar blogger.com dan beberapa Cara Membuat Blog Gratis Blogspot terbaru. Simak Cara Membuat Blog Gratis dari blogger.com dan baca juga buku panduan cepat hamil dan nonton rcti tv online gratis.


A. Cara membuat Gmail

1. Kunjungi situs www.gmail.com

2. Dengan mengunjungi alamat situs diatas, maka teman-teman akan melihat tampilan situs seperti yang tampak pada gambar berikut ini:

- Kliklah tombol "CREATE AN ACCOUNT" untuk memulai membuat Gmail.

3. Setelah melalui proses nomor 2, maka akan terlihat tampilan situs seperti berikut ini:


Pada bagian ini, maka isilah hal-hal yang diminta pada form pengisian data, seperti:

- Pada bagian kolom "Name" isikanlah dengan nama awal dan nama akhir kamu.

- pada bagian "Choose your username" isikan dengan username yang kamu inginkan, misalnya belajarblog@gmail.com

- Pada bagian "Create a password" isikan dengan password yang kamu inginkan.

- pada bagian "Confrim your password" isikan sama dengan kolom create a password diatasnya.

- pada bagian "Birthday" isikan sesuai dengan tangga lahir kamu.

- Pada bagian "Gender" isikan dengan jenis kelamin kamu.

- Pada bagian "Mobile phone" isikan dengan nomor ponsel kamu.

- Pada bagian "Current email address" dapat tidak diisi bila sebelumnya kamu belum memiliki email

- Pada bagian "Prove you're not a robot" isikan sesuai dengan gambar tulisan yang muncul diatasnya.

- Pada bagian "Location" pilih negara asal kita sesuai dengan yang sudah tercantum, misalnya "Indonesia"

- Centang pada tanda "I agree to the Google Terms of Services anda Privacy Policy" - Cara Membuat Blog Gratis Blogspot.

- Kemudian klik tombol "Next step"

Tunggu beberapa saat, maka seketika akan datang sebuah SMS dari Google ke nomor HP yang sudah kamu isikan sebelumnya untuk me-aktivasi akun Gmail yang baru saja kamu buat.

Bila langkah-langkah diatas sudah dilakukan dengan benar, maka tentu sebuah akun Gmail akan selesai dibuat. Selanjutnya adalah langkah kita membuat blog baru di Blogger.

2. Cara Membuat Blog - Cara Membuat Blog Gratis di Blogspot

1. Kunjungi situs www.blogger.com

2. Setelah teman-teman kunjungi halaman diatas, maka akan terlihat tampilan situs seperti tampak pada gambar berikut ini:

Pada bagian ini, maka isilah hal-hal yang diminta pada form pengisian data, seperti:

- Pada bagian "Judul Blog" isi dengan judul blog sesuai dengan keinginan kamu, misalnya "Belajar Ngeblog"

- Pada bagian "Alamat blog (URL)" silahkan isikan dengan nama blog yang kamu inginkan, misalnya "belajar-blog-aja"

- Pada bagian "Buktikan bahwa Anda bukan robot" isikan dengan tulisan yang tampak pada gambar.

- Klik tombol "Lanjutkan" - Cara Membuat Blog Gratis di blogger.com.

3. Akan terlihat tampilan situs seperti tampak pada gambar berikut ini:


Pada bagian ini pilihlah salah satu template yang tersedia sesuai yang kamu inginkan. Setelah memilih salah satu template,

maka langkah selanjutnya adalah meng-klik tombol "Lanjutkan"

4. Akan terlihat tampilan seperti pada gambar berikut ini:


Dengan tampilan situs seperti demikian diatas, maka cara membuat blog sudah selesai, dan kini saatnya untuk memulai menulis di blog kamu dengan cara mengklik tombol "Mulai Blogging"



Sekian tutorial Cara Membuat Blog Gratis blogspot di blogger.com. Semoga setelah anda berhasil membuat blog baru bisa langsung mendapatkan penghasilan dari online seperti saya saat menjual mebel jati murah dan jual windows 7.

Read Post | komentar

Tutorial Cara Membuat Blog Gratis

Rabu, 23 Mei 2012

TOKONews - Berita Terbaru Tutorial Cara Membuat Blog Gratis. Untuk membuat blog atau website gratis silahkan ikuti Tutorial Cara Membuat Blog Gratis dari Top News. Sebelum praktek Cara membuat blog gratis dari blogger.com, silahkan lakukan Cara membuat akun Google Sebelum belajar cara membuat blog, buatlah akun Google terlebih dahulu!

Kok akun Google? Google dan Blogger adalah milik perusahaan yang sama. Akun Google bisa anda gunakan untuk masuk ke fasilitas Blogger atau fasilitas Google lainnya, termasuk ke Blogger atau Blogspot.

Ayo, kita buat aja dulu akun Google. Caranya adalah sebagai berikut:

• 1Klik di sini untuk masuk. Tampilan seperti di bawah ini (tampilannya terpotong) akan muncul
  
  
• 2Isi data yang diminta sesuai permintaan. Data tersebut adalah Nama Depan, Nama Belakang, Nama Login yang Diinginkan, Buat Sandi, Masukkan Kembali Sandi, Pertanyaan Rahasia, Jawaban (pertanyaan rahasia anda), Email Pemulihan (boleh kosong), Lokasi, dan Verifikasi Kata.
  
  Pelan-pelan aja mengisinya supaya tidak ada kesalahan!
• 3Tekan Saya Menerima. Buat Akun Saya

Mari mulai belajar cara membuat blog

Sekarang masuk ke Blogger

Setelah membuat akun Gmail seperti di atas, anda sudah bisa masuk ke Blogger.

• 1Klik di sini untuk masuk ke Blogger.
  
  
• 2Isi Nama Pengguna (Email) dan Kata Sandi anda.
• 3Tekan Masuk
• 4Anda akan dibawa ke Dasbor Blogger dengan tampilan sebagai berikut:
  
  
• 5Tekan Buat Blog (di sudut kanan atas, di bawah Bahasa) untuk membuat blog anda
• 6Beri nama blog anda, berisi Judul Blog, Alamat Blog (url) dan Verifikasi Kata
  
  

Mengganti Template?
Blogger sudah memasang Template Designer New yang berbeda dengan sebelumnya. Lihat cara menggunakannya di sini

Cara membuat entri atau postingan

Sekarang kita buat entri atau posting anda di blog.

• 1Dari dasbor anda, akan tampak semua blog yang sudah anda buat. Lalu di bawah judul masing-masing blog akan ada pilihan-pilhan, termasuk di dalamnya untuk membuat entri baru, seperti di bawah ini
  . Klik buat entri baru
  
  
• 2Maka kemudian muncul window tempat anda membuat entri atau postingan. Di situ ada Judul, kemudian Isi entri, lalu Label atau Ketegori.
  
  
• 3Setelah selesai menuliskan entri anda, tinggal klik Terbitkan untuk menerbitkan entri tersebut. Atau bisa juga Draft (entrinya tetap ada cuma tidak terbit), kemudian Pratinjau untuk melihat entri itu sebelum diterbitkan.
• 4Untuk melihat bagaimana tampilan entri tadi dalam blog anda, klik kanan Lihat Blog
  
  

Read Post | komentar (1)