Widget Berita Sesuai Label, Ala Dream.co.id pada Blogspot

Kakbudi.com,- untuk sahabat blogger yang suka baca berita, pasti pernah mengunjungi situs dream.co.id. situs tersebut sangat powerfull karena di kelola oleh sebuah perusahaan, dan tenaga ahli di bidangnya. sobat pasti sangat senang seandainya punya blog yang tampilannya seperti situs tersebut, benar bukan? jika ada yang memberi template blogspot seperti layaknya dream.co.id siapa sih yang gak mau? okey. sebenarnya blogspot adalah platform yang sangat keren (menurut saya). dari sisi kocek kita tidak perlu merogoh banyak untuk memiliki blog dengan domain TLD, namun di balik itu kita bisa mendesain tampilan sesuka kita. bahkan bisa seperti situs dream.co.id.

Kali ini saya akan membagikan Widget Berita Sesuai Label, Ala Dream.co.id pada Blogspot. widget ini bisa sobat setting sendiri di blog kesayangan. tidak hanya untuk situs berita, widget ini juga cocok untuk semua jenis blog. sobat bisa setting URL blog sobat, kemudian di atur pula Labelnya.  berikut listingnya :

  <style>

#wrap-dream {
max-width: 300px;
width: 100%;
padding: 0;
background: #ff602d !important;
border: 8px solid #ff602d !important;
}
.ul-dream {
background: #fff !important;
padding: 0px !Important;
margin: 0 !Important; 
margin-bottom: -4px !important;
}
.judul-dream {
text-align: center;
padding: 10px;
}
li.dream {
border-top: 1px solid #EEE !important;
margin: 0px 0px !important;
padding: 15px 15px !important;
margin-bottom: 0px !important;
}
img.gambar-dream{
border-radius: 50% !important;
width: 88px !important;
height: 88px !important;
float: left !important;
margin: 5px !important;
}
.dream h5 {
font-size: 12px;
color: #BEBEBE;
display: block;
padding: 0px!important;
margin: 0px !important;
padding-left: 100px !important;
font-weight: normal;
}

a.judul-li-dream {
vertical-align: middle; 
display: block;
padding-left: 100px !important; 
font-size: 17px !important;
color: #ff602d !important;
} 
li.dream:hover {
background: rgba(255, 96, 45, 0.14);
}
span.kakbudi-dream {
font-size: 12px;
text-align: right;
width: 95%;
display: block;
margin: 5px;
}

span.kakbudi-dream img { 
opacity: 0.3;
}
</style>


<script src='http://yourjavascript.com/315558831/label-dream-kakbudi-dot-com.js'></script>
 


<div id="wrap-dream">
    <div class="judul-dream">
        <a href="#" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6QguTP28MBmCzsfhymp26_PWfhC6kT-k9o3T5KaXUsFUfhu9QnFoXWifRdKxK3Lk52E2HgXO4Wdx0Yp-tuPDEX5jFljFMa5U4V3903tjwj_F1fkofpZGdpFjyEMfQgxWyRgw09-fisg/s1600/community.png" />
        </a>
    </div>
    <script src="http://www.kakbudi.com//feeds/posts/default/-/Blog?max-results=4&orderby=published&alt=json-in-script&callback=kakbudidotcom_labeldream"></script>

<!-- link dibawah ini sengaja saya tambahkan. link ini aman, jika sobat baik hati pasti tidak akan menghapusnya. -->
   <span class="kakbudi-dream"><a href="http://kakbudi.com" title="kakbudi" rel="nofollow"><img style="-webkit-user-select: none" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCL2R-Bqa-qsugn2f1utuQt3lf-IwHX_jUAgehp3QHbJDz-T1Wkr2t5r7SstCb2VBi7qiJ7L5p31jkm9rUvX_SD3FnaWHwtQ2viIFOut6T5OmkjeLLK-tdH5_lEXwWSJ3imHjrzLs4Sw/s70/logo_finish.png" /></a></span>
</div>

Penting..!!! ganti warna tulisan berwarna merah dengan URL blog sobat. dan warna orange ganti dengan Label yang ingin di tampilkan. jika sudah maka akan tampil widget seperti di bawah.

Demikian tutorial  Widget Berita Sesuai Label, Ala Dream.co.id pada Blogspot semoga bermanfaat. jik ada pertanyaan silahkan komentar di bawah.

Salam Blogger




Kak Budi