Cara membuat recent post keren yang seo friendly ala histutor

Halo sobat His Tutor, pada postingan saya sebelumnya saya pernah membahas tentang Cara Verifikasi Blogspot di Technorati dan postingan yang berhubungan dengan Widget Blog maka pada hari ini saya akan membagikan sebuah tutorial tentang membuat atau memasang Recent Post yang keren dan seo friendly di blog anda. Widget ini berfungsi untuk menampilkan postingan terbaru dari Blog anda dengan tampilan yang cool alias keren serta loading yang cepat, sehingga tidak membuat Blog anda menjadi lambat. 

Bagaimana? apakah anda berminat, jika jawabannya iya, silahkan lanjutkan membaca proses langkah-langkahnya yang saya buat dibawah lengkap dengan screenshotnya. dan jika jawabanya tidak! silhakan baca artikel lain yang ada di Blog ini :D.

Recent Post Keren Ala His Tutor

Cara membuat recent post keren seo friendly ala HisTutor

1. Login ke akun blogger anda

2. Click On Template » Edit HTML

3. Gunakan Ctrl+F  untuk menemukan kode ]]></b:skin> atau </style>

4. Setelah ketemu letakan kode CSS script diatas kode ]]></b:skin> atau </style>
 

.tooltipesdia { width:260px; position:absolute; bottom:100%; margin:0 0 7px 0; padding:5px; font-family:Verdana,sans-serif; font-size:13px; font-weight:normal; font-style:normal; text-align:left; text-decoration:none; text-shadow:0 1px 0 rgba(0,0,0,30); line-height:1.5; border:solid 1px; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; -moz-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,30) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,30),0 1px 2px rgba(0,0,0,30) inset; box-shadow:0 1px 2px rgba(0,0,0,30),0 1px 2px rgba(0,0,0,30) inset; cursor:default; display:block; visibility:hidden; opacity:0; z-index:999; -moz-transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -o-transition:all 0.4s linear; transition:all 0.4s linear; color:#fff; background:#000; background:-moz-linear-gradient(top,rgba(0,0,0,30),rgba(0,0,0,30)); background:#000; border-color:#000; }
.tooltipesdia:before,.tooltipesdia:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; }
.tooltipesdia:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; }
a:hover .tooltipesdia { text-decoration:none; visibility:visible; opacity:1; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; }
.tooltipesdia,.tooltipesdia.left { left:0; right:0; }
.tooltipesdia:before,.tooltipesdia:after,.tooltipesdia.left:before,.tooltipesdia.left:after {left:40px; right:auto;}
.tooltipesdia:before { border-top-color:#000; }
.tooltipesdia:after { border-top-color:#000; }
.recent-post-title { background:#fff; margin:0 0 15px; padding:0; position:relative; }
.recent-post-title h2 { font:normal bold 14px Arial,sans-serif; height:26px; line-height:26px; margin:0 0; padding:0 10px; background:#0b5394; color:#ffffff; display:inline-block; }
.recent-post-title h6 { float:right; font:normal bold 10px Arial,sans-serif; height:26px; line-height:26px; margin:0 0; padding:0 10px; background:url(#); color:#ffffff; display:inline-block; border-bottom:5px solid #906090; }
.recent-post-title h2 a { color:#ffffff; }
.recent-post-title h2 a:after { content:"\f18e"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-left:6px; }
.recent-post-one-thumb { float:left; width:50%; margin:0 0; }
.recent-post-one-thumb .widget { padding:0 10px 10px 0; }
.recent-post-one-thumb .widget-content { background:#ffffff; border:1px solid #e5e5e5; padding:15px; }
.recent-post-one-thumb ul { list-style-type:none; margin:0 0 0 0; padding:0 0 0 0; }
ul.rp_thumbs { margin:0 0 0 0; }
ul.rp_thumbs li { font-size:12px; min-height:68px; margin:0 0 8px; padding:0 0 8px; border-bottom:1px dotted #e5e5e5; }
ul.rp_thumbs .rp_thumb { position:relative; background:#fbfbfb; margin:3px 0 10px 0; width:100%; height:0; padding-bottom:46%; overflow:hidden; }
ul.rp_thumbs .rp_thumb img { height:auto; width:100%; }
ul.rp_thumbs2 { font-size:13px; }
ul.rp_thumbs2 li { padding:0 0; min-height:66px; font-size:11px; margin:0 0 8px; padding:0 0 8px; border-bottom:1px dotted #e5e5e5; }
ul.rp_thumbs2 .rp_thumb2 { background:#fbfbfb; float:left; margin:3px 8px 0 0; height:60px; width:60px; }
ul.rp_thumbs2 .rp_thumb2 img { height:60px; width:60px; }
span.rp_title { font:normal normal 16px Fjalla One,Helvetica,Arial,sans-serif; display:block; margin:0 0 5px; line-height:1.4em; }
span.rp_title2 { font-size:14px; }
span.rp_summary { display:block; margin:6px 0 0; color:#666666; }
span.rp_meta { background:transparent; display:block; font-size:11px; color:#666666; }
span.rp_meta a { color:#666666 !important; display:inline-block; }
span.rp_meta_date,span.rp_meta_comment,span.rp_meta_more { display:inline-block; margin-right:8px;}
span.rp_meta_date:before { content:"\f073"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-right:4px; }
span.rp_meta_comment:before { content:"\f086"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-right:4px; }
span.rp_meta_more:before { content:"\f0a9"; font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; padding-right:4px; }
ul.rp_thumbs2 li a:hover,ul.rp_thumbs li a:hover { color:#0072C6; }

5. Tambahkan HTML/Javascript dibawah kode </head>  lihat screenshot dibawah.

Screenshot

<script src='//histutor.googlecode.com/svn/js/histutor%20-recent.js' type='text/javascript'/>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 4;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = true;
var displaymore2 = false;
var showcommentnum = true;
var showcommentnum2 = true;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 100;
var thumb_width = 300;
var thumb_height = 140;
var thumb_width2 = 60;
var thumb_height2 = 60;
var no_thumb = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1JumoXsELb2BswdZaMfH99e7aghccMyQGWV_JW7seqfJOJM8jldBgLis67HW3unJjvIrEZ7xa6sukhsuJhtxWtAFYgsDRhLGjR7-rzvBH0bc4QjSMq77sWTLZQyGBFcDmGxwUhLffJPzx/s1600/histutor-noimage.png&#39;
var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD9ZKjq8L3JF50xrVfq1QsehrRQZajf1XuBEfSN2l35Vbf80t4Zk_gavnA-WU-fgVZl6uQx6fE2Mdy3v7jAOFLSpK-Qv22VlAN_SL43JfOXY9LFAZrD8rrBneRuAbj6XMOnwCUQ2-eUOGH/s1600/histutor-60x60.png&#39;
</script>

6. Letakan kode HTML/Javascript >> Add Gadget, di area yang anda inginkan.

<script>
document.write("<script src=\"/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
document.write('<div class="recent-post-title"><h5><a href="http://histutor.blogspot.com/2015/02/cara-membuat-recent-post-keren-yang-seo-friendly-ala-histutor.html">Get This<span class="tooltipesdia">Get This Widget</span> </a></h5></div>');
</script>

Anda bisa lihat Contoh disidebar Blog ini !
"WIDGET POSTINGAN TERBARU"
Terimakasih

Silahkan tinggalkan komentar jika anda menemui kedala dalam pemasangan recent post ini, mari kita bahas bersama! 

Demikian sedikit penjelasan tentang Cara membuat recent Post yang keren ala Histutor , jika ada kesalahan dalam penulisan saya mohon maaf dan semoga bermanfaat. Saya akan sangat senang dan berterimakasih jika sobat berkenan untuk berkomentar di blog ini.