cara membuat widget box rivai style

Cara membuat widget box rivai style - cara membuat widget box rivai style sangat simpel, cara membuat widget box rivai style tidak memakai jquery sehingga codenya sangat ringan. Tutorial widget box rivai style ini terinspirasi oleh seorang sahabat saya yang sudah menginginkan code ini hampir 6 bln lalu, maklum karena kesibukan :) dan bila anda ingin berdiskusi silahkan gabung di link ini : http://diskusi.rivai.org/ . cara membuat widget box rivai style berfungsi sebagai widget untuk keterangan code atau text, untuk melihat langsung tampilan cara membuat widget box rivai style silahkan klik link demo dibawah ini, bila anda tertarik untuk memasangnya di halaman blog kesayangan anda silahkan simak tutorial cara membuat widget box rivai style dibawah ini.

Demo

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

/*****************************************
Name : widget box rivai style
By : Rivai Silaban | Blog Design
Update :Senin 13 January 2014
site : www.rivai.org
******************************************/
.widget-box-rivai-style {
border: 2px dashed rgb(51, 51, 51);
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYb5y9AEg9gGGn7jmfwTc5BuG8_FgQfUlqJ0eTPzZgXP91U_8q9E7OZlsBgC0YmyaU4wVa8q3ynZKy0GwW1wmAWLXU3HziajaSDVAg2BbeCP0dNLyByKfQbIJl3UlNRYxV4XJGZjMR2kDL/s1600/1bg.gif") repeat scroll 0% 0% transparent;
width: 100%;
font-family: "Courier New",Courier,monospace;
font-size: 14px;
word-wrap: break-word;
text-align: left;}
.widget-box-rivai-style .merah {font-weight: bold;color: #FF0000;}
.widget-box-rivai-style .biru {font-weight: bold;color: #0000FF;}
.widget-box-rivai-style .hijau {font-weight: bold;color: #00CC00;}
.widget-box-rivai-style a {color: #AA00AA;text-decoration: underline;}
.widget-box-rivai-style a:hover {color: #FF0000;text-decoration: none;}
.widget-box-rivai-style ul li {list-style-type: decimal;}
.widget-box-rivai-style-title {
position: relative;
padding: 5px;
margin: 20px 0px;
color: #FFFFFF;
width: 150px;
text-align: center;
text-shadow: 1px 1px 1px #000;
color:#FFFFFF;
font-weight:bold;
background-color: #FF0000;
font-family: Verdana;
font-size: 12px;
}.widget-box-rivai-style-title:before {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:40px;
width:0;
height:0;
border:0;
border-right-width:30px;
border-bottom-width:20px;
border-style:solid;
border-color:transparent #FF0000;}
/*** www.rivai.org CSS widget box rivai style and ***/

Pasang code html dibawah ini di dalam postingan atau halaman anda.

Code HTML here..

<!-- www.rivai.org code widget box rivai style start-->
<div class="widget-box-rivai-style-title">Keterangan Code </div>
<div class='widget-box-rivai-style' style="line-height: 21px;" >
<!-- silahkan masukkan code anda dibawah ini-->

<ul>
<li>Contoh link : <a href="www.rivai.org" target="_blank" title="www.rivai.org">ini adalah sebuah link</a> <br />
</li>
<li>Contoh coding :<br/> <b>&lt;div class=&quot;coding&quot;&gt; saya adalah code html&lt;/div&gt; </b> </li>
<li>Contoh warna pada coding : <br/> &lt;<span class="merah">div</span> <span class="hijau">class=&quot;coding&quot;</span>&gt; <span class="biru">saya adalah code html</span>&lt;<span class="merah">/div</span>&gt;</li>
<li>Contoh text tulisan devault. </li>
<li>contoh<br />
contoh &lt;br/&gt; 1<br />
contoh &lt;br/&gt; 2</li>
</ul>

<!-- silahkan masukkan code anda diatas ini-->
</div>
<!-- www.rivai.org code widget box rivai style end-->

Bila anda masih belum memahami tata cara membuat widget box rivai style ini silahkan kunjungi halaman sumbernya, dan lihat fungsi dari beberapa fitur codenya, semoga bermanfaat..
Sumber : http://www.rivai.org/2014/01/widget-box-rivai-style.html

css

• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• css widget label blogspot accordion
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• help tooltip style blogspot
• cara membuat space iklan blogspot dengan CSS3

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

trik pendukung

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• widget social media scale di blogspot
• fungsi style clear both
• Tutorial menampilkan post date diwaktu yang sama
• feed validator tool
• cara membuat Image pseudo style
• cara membuat Google Plus buttons style
• cara mebuat fasilitas chat di blog
• cara membuat Blockquote di blogspot

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 : 4:45 PM