Memberi Background Pada Title Judul Posting Blog

Title pada link blog sangatlah penting untuk optimasi SEO, apalagi sebagai blogger pemula seperti Infonetcmu ini memerlukan penerapan tehnik-tehnik SEO,banyak cara juga agar blog kamu lebih ramah search engin,misalnya membuat meta tag title blog yang SEO Friedly maupun memasang meta tag otomatis pada blog kamu.

Berkaitan juga dengan Title atau judul pada blog,kamu bisa membuat agar judul blog kamu lebih SEO friendly yaitu dengan cara memberi title otomatis pada setiap link judul postingan kamu,Untuk lebih jelasnya silahkan kamu lihat gambar dibawah ini:

Faham kan maksud saya? Untuk membuat title otomatis pada judul blog postingan kamu ikuti tutorial dibawah ini!

1. Login ke akun Blogger anda
2. klik Rancangan Template kamu
3. Klik edit HTML
4. Expand Template Widget Dan download atau Restore template kamu untuk berjaga-jaga apabila ada kesalahan dalam mengedit template
5. Cari kode di bawah ini :
   

   <a expr:href='data:post.link'><data:post.title/></a>

6. Hapus kode tadi lalu ganti dengan kode berikut :
   

   <a expr:href='data:post.link'><span class='posts-title'><data:post.title/></span><data:post.title/></a>

7. Lalu cari kembali kode seperti ini :
   

   <a expr:href='data:post.url'><data:post.title/></a>

8. Hapus kode tadi lalu ganti dengan kode berikut :
   

   <a expr:href='data:post.url'><span class='posts-title'><data:post.title/></span><data:post.title/></a>

9. Kemudian cari lagi kode ]]></b:skin> dan simpan kode dibawah ini diatas kode ]]></b:skin>



/* POST TITLE*/
div > .posts-title, li > .posts-title, a > .posts-title, span >
.posts-title {
opacity: 0;
margin-top: 50px;
visibility: hidden;
margin-left: 230px;
-webkit-transition-property:opacity, margin-top, visibility, margin-left;
-webkit-transition-duration:0.5s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-property:opacity, margin-top, visibility, margin-left;
-moz-transition-duration:0.5s;
-moz-transition-timing-function: ease-in-out;
-o-transition-property:opacity, margin-top, visibility, margin-left;
-o-transition-duration:0.5s;
-o-transition-timing-function: ease-in-out;
transition-property:opacity, margin-top, visibility, margin-left;
transition-duration:0.5s;
transition-timing-function: ease-in-out;
}
div:hover > .posts-title, li:hover > .posts-title, a:hover > .posts-title, span:hover > .posts-title, a .posts-title:hover, span .posts-title:hover, li .posts-title:hover, div .posts-title:hover {
opacity: 1;
visibility: visible;
overflow: visible;
margin-top: -25px;
display: inline;
margin-left: 100px;
-webkit-transition-property:opacity, margin-top, visibility, margin-left;
-webkit-transition-duration:0.5s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-property:opacity, margin-top, visibility, margin-left;
-moz-transition-duration:0.5s;
-moz-transition-timing-function: ease-in-out;
-o-transition-property:opacity, margin-top, margin-left;
-o-transition-duration:0.5s;
-o-transition-timing-function: ease-in-out;
transition-property:opacity, margin-top, visibility, margin-left;
transition-duration:0.5s;
transition-timing-function: ease-in-out;
}
.posts-title {
border: 1px solid #EFF0F1;
-moz-border-radius:5px;
background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638));
-webkit-transition: 0.1s linear;
-moz-transition: 0.1s linear;
-ms-transition: 0.1s linear;
-o-transition: 0.1s linear;
transition: 0.1s linear;
vertical-align: top;
border-radius: 4px;
border: none;
background: rgb(130,207,241);
background: -moz-linear-gradient(top, rgba(130,207,241,1) 0%, rgba(56,174,234,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,207,241,1)), color-stop(100%,rgba(56,174,234,1))); background: -webkit-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: -o-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%); background: -ms-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: linear-gradient(to bottom, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cff1', endColorstr='#38aeea',GradientType=0 ); border: 1px solid #3cafcf;
box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
text-align:center;
width: auto;
padding: 2px 5px 0px 5px;
margin: 5px;
position: absolute;
font: normal 13px Arial;
text-decoration: none;
color: #ff0000;
z-index: 10;
}
.posts-title span { /* Triangle */
background: #000;
border: #ffff01 solid 2px;
width: 10px;
height: 10px;
margin-left: 47px;
margin-top: -12px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
display /*\**/: none\9;
*display: none !important;
*display: none;
}
/* END POST TITLE*/

10. Simpan Template kamu.
    

Lihatlah hasilnya,sekarang arahkan mouse atau pointer kamu pada link judul blogmu,maka akan tampil title secara otomatis.