Membuat Headline News pada Blog

Blog Trik dan Tips akan membahas salah satu trik yaitu bagaimana cara membuat headline news. Pasti yang udah sering dengarin berita di televisi udah tau apa itu headline news. Tapi headline news di tv beda dong ama yang dibuat di blog. Sesuai dengan namanya headline news ini memuat judul2 postingan anda. Anda dapat memasangnya diatas atau dibawah blog. Headline news akan berhenti menampilkan judul post ketika cursor maouse anda berada diatas judul postingan.

Oke langsung aja kita buatnya
1. Login ke blogger
2. Klik Tata Letak
3. Tambahkan gadjet anda dan pilih HTML javascript
4. Kopi kode berikut ini dan paste anda gadjet anda

<script type="text/javascript">
var hn_url_blog = 'http://BLOGKAMU.blogspot.com';
var hn_jumlah_post = 5;
var hn_warna_latar = '#EEEEEE';
var hn_warna_garis = '#000000';
var hn_posisi = 'top';
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://copycat91.googlecode.com/svn/trunk/headlinenews.js">
</script>

Keterangan:
var hn_url_blog = URL blog
var hn_jumlah_post = jumlah judul artikel posting yang ditampilkan
var hn_warna_latar = warna latar belakang headline news
var hn_warna_garis = garis border headline news
var hn_posisi = posisi headline news
var hn_backlink = bila ingin backlink ditampilkan

5. Simpan widget anda!!

"

Ingin mendulang dolar dengan cara yang mudah melalui Blog Anda?
Klik di sini!

sumber:
http://blogtrikdantips.blogspot.com

[ Read More.. ]

Membuat Efek List Menjorok di Blog

Membuat Efek List Menjorok di Blog:
"Apakah anda sudah pernah melihat sebuah list yang menjorok. List ini akan menjorok ke dalam apabila cursor mouse berada disekitar posisi list tersebut. Oke mungkin kalian penasaran apa itu list yang menjorok. Blog Trik dan Tips akan memberikan trik bagaimana membuat list yang menjorok.

Berikut ini adalah langkah untuk membuatnya:
1. Login ke blogger
2. Klik Tata Letak dan Klik Edit HTML
3. Cari kode ini: </b:skin>
4. Paste kode dibawah ini setelah kode pada langkah 3

<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + 5).toString() + 'px';
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + 'px';
}
</script>

Keterangan: Anda dapat mengatur seberapa jauh list tersebut menjorok ke dalam dengan mengubah angka kode berwarna merah

5. Untuk membuat list dalam postingan maka jangan lupa untuk memasang atribut ini:

<li onmouseover='lm_toRight(this)' onmouseout='lm_restore(this)'>

6. Jika anda ingin membuat semua list menjorok maka sisipkan kode berwarna biru pada kode di langkah 4

<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + <span style="color: rgb(255, 0, 0);">5</span>).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + 'px';
}
</script>

function lm_loadBehavior() {
var lis = document.getElementsByTagName('li');
for(var i=0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function(){lm_toRight(this);}
li.onmouseout = function(){lm_restore(this);}
}
}
var lm_window_onload = window.onload;
window.onload = function() {
if(lm_window_onload) {lm_window_onload();}
lm_loadBehavior();
}

Selamat mencoba semoga berhasil!!!

Ingin mendulang dolar dengan cara yang mudah melalui Blog Anda?

Klik di sini!

Sumber :
http://blogtrikdantips.blogspot.com

[ Read More.. ]

Cara Membuat Meta Otomatis di Setiap Postingan / Posting Blog

Cara Membuat Meta Otomatis di Setiap Postingan / Posting Blog: "

Memasang Meta Tag Secara Otomatis di Setiap Posting Blog

Ada solusi menarik untuk membuat meta tag di setiap posting secara otomatis tanpa kita merubah meta tag untuk halaman utama.

Ilustrasi:

Saya memiliki blog dari blogger dengan:

Nama :rssmu.blogspot.com
Keyword:Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.
Description:Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.

Seperti pada posting membuat meta y_key,saya sudah menerapkan meta tag ini saya menggunakan meta tersebut,yakni akan menjadi:

<meta content='Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.' name='description'/>
<meta content='Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.' name='keywords'/>

Dan hasil dalam serp,saat saya mengetik nama rssmu.blogspot.com nantinya akan tampil seperti ini:

Namun,dari teknik membuat meta tag secara manual diatas,kurang efektif karena saat serp membaca judul posting yang tampil tetap memiliki deskripsi yang sama.
Nah,untuk membuat meta agar setiap posting memiliki deskripsi / description yang berbeda-beda alias setiap posting memiliki deskripsi sendiri,sobat bisa ikuti langkah berikut ini:

Pilih Dashboard sobat,lalu pilih Tata Letak kemudian cari kode:
<title><data:blog.pageTitle/></title> yang biasanya letaknya diatas kode <b:skin><![CDATA[/*,agar sobat tidak bingung karena template yang telah diubah-ubah,posisi kode <title><data:blog.pageTitle/></title> sobat bisa lihat gambar dibawah ini:

Rubahlah kode <title><data:blog.pageTitle/></title> tersebut dengan meta berikut:


<b:if cond='data:blog.pageType == &quot;index&quot;'>

<title><data:blog.pageTitle/></title>
<meta content='TULIS DESKRIPSI BLOG SOBAT.' name='description'/>
<meta content='TULIS KATA KUNCI BLOG SOBAT,PISAHKAN DENGAN TANDA KOMA' name='keywords'/>

<b:else/>

<title><data:blog.pageName/> | JUDUL UTAMA BLOG SOBAT</title>
<meta expr:content='data:blog.pageName + &quot;,TULIS DESKRIPSI BLOG SOBAT&quot;' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;,TULIS KALIMAT APA SAJA YANG NANTINYA AKAN MENJADI DESKRIPSI SETIAP POSTING&quot;' name='Keywords'/>

</b:if>


Untuk prakteknya / contohnya ,hasil dari membuat meta tag otomatis setiap posting ini untuk blog rssmu.blogspot.com akan menjadi seperti ini:


<b:if cond='data:blog.pageType == &quot;index&quot;'>

<title><data:blog.pageTitle/></title>
<meta content='Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.' name='description'/>
<meta content='Kumpulan dari rss blog kamu ada di - RssMU - It is your RSS. ' name='keywords'/>

<b:else/>

<title><data:blog.pageName/> | RssMu</title>
<meta expr:content='data:blog.pageName + &quot;,adalah salah satu kumpulan dari rss blog kamu ada yang ada di RssMU - rssmu.blogspot.com.&quot;' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;,adalah salah satu kumpulan dari rss blog kamu ada yang ada di RssMU - rssmu.blogspot.com.&quot;' name='Keywords'/>

</b:if>


Dan hasil dari serp untuk setiap posting nantinya akan terlihat seperti gambar berikut ini:






Gimana gan,mau mencobanya meta tag otomatis seperti ini?



Sumber:
http://pelajaran-blog.blogspot.com

[ Read More.. ]

Panduan membuat Blog di Blogspot

1. Apa itu Blog ?

Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama.
Awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari sebuah blog sangat bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan lain sebagainya. Secara umum, blog tidak ada bedanya dengan situs yang ada di internet.
Flatform blog atau seringkali disebut juga dengan mesin blog dibuat sedemikian rupa oleh para designer blog agar mudah untuk digunakan. Dulu, untuk membuat aplikasi web diperlukan pengetahuan tentang pemrograman HTML, PHP, CSS dan lain sebagainya, dengan blog semuanya menjadi mudah semudah menyebut angka 1 2 3.

2. Cara membuat blog di blogspot

Salah satu penyedia blog gratis yang cukup populer saat ini adalah  blogspot atau blogger, dimana ketika mendaptar adalah melalui situs blogger.com namun nama domain yang akan anda dapatkan adalah sub domain dari blogspot, contoh : contohsaja.blogspot.com
Kenapa harus membuat blog di blogger.com bukan pada situs penyedia blog lainnya? Sebenarnya tidak ada keharusan untuk membuat blog di blogger, namun ada banyak kelebihan yang dimiliki blogger di banding dengan penyedia blog lain. Beberapa contoh kelebihan blogspot di banding yang lain yaitu mudah dalam pengoperasian sehingga cocok untuk pemula, lebih leluasa dalam mengganti serta mengedit template sehingga tampilan blog anda akan lebih fresh karena hasil kreasi sendiri, custom domain atau anda dapat mengubah nama blog anda dengan nama domain sendiri misalkan contohsaja.blogspot.com di ubah menjadi contohsaja.com,sedangkan hosting tetap menggunakan blogspot dan masih tetap gratis.
Perlu ditekankan dari awal bahwa internet itu sifatnya sangat dinamis, sehingga mungkin saja dalam beberapa waktu kedepan panduan membuat blog di blogspot ini akan sedikit berbeda dengan apa yang anda lihat di blogger.com
Untuk mengurangi hal yang tidak perlu di tulis, berikut cara membuat blogger di blogger.com

Membuat Email

Salah satu syarat yang harus dipenuhi dalam membuat blog adalah anda memiliki alamat email yang masih aktif atau di gunakan. Jika anda belum mempunyai alamat email, silahkan daftar terlebih dahulu di gmail karena blogger adalah salah satu layanan dari Google maka ketika mendaftar ke blogger sebaiknya gunakan email gmail. Jika anda belum paham bagaimana cara membuat email, silahkan gunakan mesin pencari google untuk mencari panduannya.

Daftar Blog di blogger

1. Silahkan kunjungi situs http://www.blogger.com
2. Setelah halaman pendaftaran terbuka, alihkan perhatian ke sebelah kanan atas, ubah bahasa ke Indonesia agar lebih mudah difahami. Silahkan langsung login dengan menggunakan username serta password gmail anda ( akun email anda bisa untuk login ke blogger).
3. Klik tombol bertuliskan CIPTAKAN BLOG ANDA.
4. Isilah nama judul blog serta alamat blog yang di inginkan. Ingat! dalam membuat alamat blog harus benar-benar serius karena itu permanen tidak dapat digantikan lagi (kecuali nanti ganti dengan custom domain). Jika alamat yang diinginkan ternyata tidak bisa digunakan, masukkan kembali alamat lain yang masih tersedia. Jika alamat blog yang diinginkan masih tersedia, silahkan klik anak panah bertuliskan LANJUTKAN.
5. Silahkan pilih template yang anda sukai ( template ini nanti bisa diubah lagi kapan saja anda mau), kemudian klik LANJUTKAN.
6. Akan ada tulisan “Blog Anda Sudah Jadi!”. Silahkan lanjutkan dengan klik tombol MULAI BLOGGING.
7. Setelah masuk post editor, silahkan isi apa saja ( disarankan untuk langsung mengisi posting, biasanya jika tidak langsung posting akan terjaring robot anti spam milik blogger, dan blog anda akan di lock). Contoh : hello world. Klik Tombol PRATINJAU untuk melihat tampilan yang nanti akan muncul di blog, klik tombol TERBITKAN ENTRI jika posting anda mau dipublikasikan ke publik.
8. Klik “Lihat Entri” untuk melihat blog anda. Berikut contoh tampilan blog yang tadi di buat.
9. Selesai. 

Sumber:
http://kolom-tutorial.blogspot.com

[ Read More.. ]

Membuat Slide Show dan Caption - JQuery

Membuat Slide Show dan Caption - JQuery: "Penerapan JQuery pada blog kini semakin populer, salah satunya yaitu membuat slide show caption. Trik berikut ini dikembangkan oleh http://www.serie3.info/s3slider/ dengan menamakannya 's3Slider jQuery plugin'. Slide show ini akan menampilkan gambar dan sebuah caption diatas gambar. Gambar dan caption akan ditampilkan bergantian. Trik ini mudah diterapkan pada blog anda dan biasanya digunakan untuk menampilkan foto-foto dokumentasi serta gambar template blog. Untuk demo klik disini - DEMO.

Untuk membuatnya pertama yaitu
1. Log in ke blogger
2. Klik Tata Letak dan klik pada edit HTML
3. Expand template
4. Masukan script berikut sebelum </head>:

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

5. Masukan script jquery ini dibawah script tadi:

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

6. Masukan kode berikut ini pada template, atau menaruhnya pada gadjet anda:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://jquerybloggertemplate.blogspot.com/"><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoKzm2f0hbI/AAAAAAAABwk/JMGaOAIMv2c/template-jQ1.jpg"/></a>
<span>Free Blogger Template, jQuery I</span>
</li>
<li class="s3sliderImage">
<a href="http://typo-cufon.blogspot.com/"><img src="http://lh3.ggpht.com/_dfnTVAxeWMI/SoK0ZiKiiJI/AAAAAAAABwo/5ac17qT9_pM/template-cufon.jpg"/></a>
<span>Free Blogger Template with Cufón to Replace Heading Title</span>
</li>
<li class="s3sliderImage">
<a href="'http://bukantemplatecoklat.blogspot.com/"/><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoK1ueDCUrI/AAAAAAAABws/q6aFadO-7QU/template-coklat.jpg"/></a>
<span>Free Blogger Template "Bukan Template Coklat"</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Keterangan: Ubahlah alamat gambar dan keterangannya sesuai kebutuhan anda.
7. Masukan kode berikut sesudah kode <b:skin><![CDATA[ atau sebelum kode ]]></b:skin>

/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Keterangan: width:250px dan height:190px dapat anda rubah sesuai dengan ukuran image yang anda ingin tampilkan, dan jangan lupa disesuaikan juga width:225px; pada .s3sliderImage span.

"

Sumber dari:
http://blogtrikdantips.blogspot.com

[ Read More.. ]

Membuat Read More Otomatis / Auto ReadMore di Blogger

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

(1)





(2)





(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat dibawahnya letakkan kode javascript berikut:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>

Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>[ Read More.. ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>

Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya

(Sumber dari : http//pelajaran-blog.blogspot.com)

[ Read More.. ]