widget random post style horizontal

Widget random post yang satu ini memiliki style yang menarik, widget random post style horizontal ini sangat cocok buat halaman blog yang selalu memakai gambar didalam postingan. Tampilan yang menarik serta kode valid html 5 dan CSS 3 begitu juga dengan sistem penulisan tag html dan script yang lebih SEO Friendly membuat widget random post style horizontal dapat anda andalkan untuk halaman blog kesayangan anda. Widget random post style horizontal ini memakai script yang ringan, Oke langsung saja menuju TKP dan simak tutorial dibawah ini dan lihat screen shotnya pada gambar dibawah, atau lihat saja cara pemasangannya pada halaman blog klik DEMO dibawah:

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
   

/*****************************************
Name : Widget Related Post Style Horizontal
By : Rivai Silaban | Blog Design
Update : Jumat, 27 September 2013
******************************************/
#Bdrsrelated-postbd {
float:left;
width:960px;/* LEBAR WIDGET */
text-align: center;
color: #990000;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5yHCLPxN5c7JDfyEL2KuPZrCGGY-kjQpXCmMA130WXAlAP4cfZTUsJgGV3btHdT5NYLAWIf8lFtu1H-Fc1E6Teup3v-Z_x5PSPrBS8IsYWZu_nT34dp4NEfvZzU24IqgaWrcQTow3kM/w140-h140-p/bg-new-footer.jpg') repeat;
background-color: #333333;
padding:10px 10px 10px 14px;
border-bottom:solid #0099FF 3px;
border-top:solid #0099FF 3px;
}
#Bdrsrelated-postbd .Bdrsrelated-text {
width:130px;
padding:4px 0px;
color:#ccc;
height:35px;
text-align:center;
margin: -3px 5px 2px 5px;
font:12px verdana;
line-height:16px;
cursor: default;
}

#Bdrsrelated-postbd .Bdrsrelated_img {
padding-bottom:7px;
width:130px;
height:90px;
border-radius:4px 4px 0 0;
margin: 0 11px;
color: #000000;
border-bottom:solid #666 2px;
}
#Bdrsrelated-postbd .Bdrsrelated_img:hover {
opacity:.5;
border-bottom:solid #0099FF 2px;
color: #0099FF;
}/* Widget Related post CSS End */

Install Script

1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
2. Pada Edit HTML template anda silahkan cari kode </head>
3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>

<!-- Rivai Silaban | BLOG DESIGN script Random post style start -->
<script type="text/javascript" src="http://yourjavascript.com/09293273101/random.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script Random post style End -->

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='footer-wrapper'>
  atau Kode yang sejenis dan yang bersangkutan dengan kode tersebut, sebab terkadang suatu template penulisan <div class='footer-wrapper'> tidak terlalu persis tapi yang penting di Footer blog.
• Copy kode dibawah ini pastekan tepat diatas kode <div class='footer-wrapper'>.
• Bila anda ingin menyematkan kode tersebut pada widget HTML/Javascript, silahkan kunjungi Cara membuat 1 kolom layout diatas footer blog , setelah anda memasang widgetnya silahkan masukkan kode dibawah ini kedalam widget tersebut.
• Save template anda dan lihat hasilnya, selamat mencoba.

<!-- BDRS SCRIPT RELATE POST start -->
<div id='Bdrsrelated-postbd'>
<script src='http://rivai-silaban.blogspot.com/feeds/posts/default?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6' type='text/javascript'></script>
<script type='text/javascript'>
var currentposturl="";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'></div>
<!-- BDRS SCRIPT RELATE POST End -->

Keterangan Code

• Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, Ukuran lebar, spasi, dll
  
• Untuk Tulisan warna MERAH silahkan ganti dengan URL Blog anda .

Kesimpulan

Buat para bloger mania yang mementingkan trafik begitu juga dengan design yang menarik hati para pengunjungnya, widget random post style horizontal ini cocok anda pasang di halaman blog kesayangan anda. Widget random post style horizontal ini Valid HTML 5 dan CSS 3 serta sistem script dan Tag yang SEO Friendly.

Silahkan simak tutorial diatas untuk lebih jelasnya tentang cara memasangnya pada halaman blog kesayangan anda, bila ada masalah yang tidak dimengerti silahkan hubungi saya atau share bersama saya pada form komentar dibawah.

Widget random post style horizontal
Jumat, 27 September 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 3:00 PM