Foto Sampul Anime

Akhirnya bisa berbagi lagi dengan Anda semua, setelah kemarin-kemarin sibuk. Maksudnya sibuk mengganti dan mengedit-edit template :). Adapun yang akan Bangiz bagikan kali ini adalah foto sampul facebook anime yang mana tersedia untuk cowo maupun cewe. Disini Anda hanya perlu mendownload gratis lalu upload ke foto sampul facebook karena ukurannya sudah siap pakai. Langsung lihat saja foto sampulnya berikut ini:

Blockquote Hover Background

Halo semua... Setelah lama tidak update, kali ini Bangiz mau berbagi tips dan trik blogging. Yang akan kita bahas kali ini adalah tentang blockquote. Blockquote ini biasanya digunakan untuk memblok kata-kata atau kalimat yang dianggap penting yang mana akan terpisah dari kata lain yang tidak menggunakan blockquote. Untuk contohnya bisa dilihat di bawah ini:

Cara Membuat Blockquote Scroll di Blogger

Jika dulu saya membuat tutorial dengan judul diatas, untuk kali ini adalah cara membuat blockquote dengan hover background. Caranya mudah saja, tinggal ikuti cara berikut ini:

1. Masuk Dasbor Blogger > Template > Edit HTML

2. Cari kode ]]></b:skin> (gunakan Ctrl+F) kalau belum tahu letaknya

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

.post blockquote{max-height:350px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjesS_jsyXz6_WqivY6oW60S5OJ_b6K__das-CSX6tG2JRi_WwrEshyphenhyphenr8zzDLf7YLUoG7xjOeGBQqi5X7mz5TDduvZHfJVrol1vxA4FFFyg5xdzG98sYbK07IH-SjIUwQqidFj3gpvz3mc/s1600/1.jpg);

border-top: 2px solid #000000;

border-left: 2px solid #000000;

border-right: 2px solid #000000;

border-bottom: 2px solid #000000;

border-radius: 5px;

margin:1em 20px;

padding: 5px;

}

.post blockquote:hover {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjleEYOVrtdBBSxweW7H5ZMiD2BQr4m5MYTz7oJjANGmEfrYqVINigc1dl-sNtzRDrJnL6W6YM13GPQ6d0sXYiDnQSvyGDnzIB8hrpwzRHSIWfmbsFPY-VFMmJKYdNca0KwuC5iYeuxhQ0/s1600/4.jpg);

background-position:center;

background-repeat:repeat;

-moz-box-shadow: 0 0 10px #ff55cc;

-webkit-box-shadow: 0 0 18px #ff55cc;

}

Keterangan:
-> Warna merah adalah URL gambar silahkan ganti dengan URL gambar yang Anda inginkan
-> Warna biru adalah kode warna, untuk kode yang lain bisa lihat disini atau disini

4. Simpan Template dan lihat hasilnya

Selesai, happy blogging.

Foto Sampul Selamat Idul Fitri 2013

Berikut ini Bangiz akan berbagi foto sampul yang bertema idul fitri. Jika Anda tertarik, Anda bisa menggunakannya. Silahkan download secara gratis. Lumayan kan bisa mewakili apabila kita tidak bisa mengucapkan secara langsung kepada teman, kerabat atau orang lain yang sesama muslim. Semoga bermanfaat.

 

 

Cara Membuat Random Post Blogger

Dari judulnya saja sudah kelihatan. Random post, pasti yang ada dalam benak Anda akan menggambarkan adanya perputaran yang mana secara acak. Setelah sebelumnya Bangiz posting tentang foto sampul facebook serta cara mengatasi H1 yang tidak terdeteksi ketika Anda mengecek SEO. Berikut ini Bangiz akan kembali berbagi tentang blogging yaitu cara membuat random post untuk blogger. Gak pakai lama, langsung saja ikuti caranya berikut ini:

 

1. Masuk dasbor Blogger > Tata Letak > Tambahkan Gadget

2. Copy-Paste kode berikut pada tempat yang tersedia

<!-- Begin: bangiz.blogspot.com -->

<center><style type="text/css">

#rp_plus_img{height:560px;overflow:hidden;border:solid 0px #fff;padding:0px 0px 0px 0px;background-color:#transparant;}

#rp_plus_img ul{list-style-type:none;margin:0;padding:0}

#rp_plus_img li{border:5px; margin:0; padding:1; list-style:none;}

#rp_plus_img li{height:75px;padding:3px;list-style:none;}

#rp_plus_img a{color:#000000;}

#rp_plus_img .news-title{display:ok;font-size:11px;font-weight:bold !important;color:#000000;text-align:left;}

#rp_plus_img .news-text{display:block;font-family:Arial, Verdana, Trebuchet;font-size:10px;font-weight:normal !important;color:#000000;text-align:left;}

#rp_plus_img img{float:left;margin-right:3px;padding:2px;border:solid 0px #fff;width:75px;height:75px;}

</style>

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

</script>

<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">

</script>

<script type="text/javascript">

var speed = 120;

var pause = 2500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img"><script>

var numposts = 20;

var numchars = 0;

</script> <script src="http://bangiz.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">

</script> </ul>

</center>

<br/><div style="clear: both;font-size: 9px;text-align:right;"><a href="http://downloadwallpaperanimasi.blogspot.com//2013/08/Random-Post.html" target="blank"><font color="gray">[Get This]<font></font></font></a></div></div>

<!-- End: bangiz.blogspot.com -->

3. Simpan dan lihat hasilnya

Keterangan:

• 560px --> tinggi dari widget tersebut
• 120 --> kecepatan bergerak
• bangiz.blogspot.com : ganti dengan nama blog Anda

Cara di atas menurut saya cukup simple dan saya coba berhasil, apabila ada keluhan atau pertanyaan seputar topik di atas silahkan tinggalkan komentar. 

Mengatasi H1 Zero That Is Really Bad

Jika Anda seorang blogger, tentunya banyak sekali hal yang kita inginkan. Mulai dari tampilan blog yang sesuai dengan keinginan kita, terindek nomor satu di search engine dan lain sebagainya. Berikut ini yang akan saya bahas berhubungan dengan SEO, dahulu saya pernah membahas cara mengatur h1 h2 dan h3 supaya SEO friendly untuk membacanya bisa lihat disini.

Untuk yang sudah jago dalam ngeblog tentunya tahu cara mengecek nilai SEO blog, untuk yang belum tahu silahkan cek chkme.com. Disana tinggal masukin saja alamat blog Anda lalu tekan check/enter.

Kembali ke pembahasan yaitu cara mengatasi h1 yang tidak ada ketika mengecek di chkme.com. H1 yang tidak terbaca terjadi kalau Anda menggunakan gambar untuk judul blog. Dibawah ini hasil skor SEO blog Bangiz sebelum diubah. H1: Zero, that is Really Bad dengan nilai skor 80 % lumayan siiihhh..

Untuk mengatasinya berikut ini:

1. Masuk dasbor Blogger > Template > Edit HTML

2. Temukan kode berikut (gunakan Ctrl+F)

<div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>

3. Anda hanya perlu menambahkan kode <h1> di awal dan </h1> di akhir, sehingga hasilnya seperti berikut ini:

<div id='header-inner'>
        <h1><a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a></h1>

 4. Simpan template dan cek lagi nilainya.

Setelah diubah atau ditambahkan kode tadi, hasilnya di bawah ini:

 

 

Semoga bermanfaat!!!