Make Full Stylish Box, Download Your RSS, JavaScript News Ticker

Melengkapi artikel sebelumnya yaitu membuat kotak penuh gaya dengan CSS3, sekarang akan ditambahkan variasi baru. Tulisan miring di pojok atas varian tambahannya! Follow box di bangun dengan bahasa CSS level 3. Pasti akan bagus kotak yg sekarang :d

.wrapperBox {
padding: 10px;
margin: 5px auto;
width: 276px;
height: 355px;
position: relative;
z-index: 90;
background: #eee;
border: 1px solid #ddd;
border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 0 #9a9a9a;
box-shadow: 0 1px 0 #9a9a9a;
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient( top, #fff, #eee);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(top, #fff, #eee);
}
.innerBox {
padding: 0.5em;
border: 1px dashed #ccc;
box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
}
.ribbon-wrapper-blue {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-blue {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #306EFF;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF));
background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -moz-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -ms-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -o-linear-gradient(top, #306EFF, #3BB9FF);
color: #fff;
}
.ribbon-blue:before,
.ribbon-blue:after {
content: "";
bottom: -3px;
position: absolute;
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.ribbon-blue:before {
left: 0;
}
.ribbon-blue:after {
right: 0;
}

Planing HTML

<div class="wrapperBox">

<div class="innerBox">

<div class="ribbon-wrapper-blue">

<div class="ribbon-blue">YOUR TITLE</div>

</div>

<center>

<iframe allowtransparency="false" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=LINK-FACEBOOK-PAGE&amp;width=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23eeeeee&amp;stream=false&amp;header=false&amp;height=335" style="background: trasparent; border: 0px solid #222; height: 335px; overflow: hidden; width: 240px;"></iframe>

</center>

</div>

</div>

Ganti dan isikan tulisan YOUR TITLE & LINK-FACEBOOK-PAGE
Resource & demo www.cssdeck.com/labs/full/yhipdwkd

Informasi dari google tentang download arsip lama website dari google reader sebelum terlambat! Masalahnya kalau format RSS bacanya gimana yak? Ada yg tahu bro, share and care ah ;)

Masukan link RSS/Feedburner kalian pada kotak sampai muncul tulisan Download Google Feed. Buat bonusnya Koben kasih JavaScript news ticker :d

<form name="news">
<textarea name="news2" wrap="virtual" style="width:100%;height:75px;border:0;"></textarea>
</form>
<script language=javascript>
//<![CDATA[
//Visit http://beben-koben.blogspot.com

var newsText = new Array();
newsText[0] = "Blah bleh bloh 1";
newsText[1] = "Blah bleh bloh 2";
newsText[2] = "Blah bleh bloh 3";
newsText[3] = "Blah bleh bloh 4";
newsText[4] = "Blah bleh bloh 5";
newsText[5] = "Blah bleh bloh 6";
var ttloop = 1;    // Repeat forever? (1 = True; 0 = False)
var tspeed = 50;   // Typing speed in milliseconds (larger number = slower)
var tdelay = 5000; // Time delay between newsTexts in milliseconds

//------------- NO EDITING AFTER THIS LINE -------------\\
var dwAText,cnews=0,eline=0,cchar=0,mxText;function doNews(){mxText=newsText.length-1;dwAText=newsText[cnews];setTimeout("addChar()",1000)}function addNews(){cnews+=1;if(cnews<=mxText){dwAText=newsText[cnews];if(dwAText.length!=0){document.news.news2.value="";eline=0;setTimeout("addChar()",tspeed)}}}function addChar(){if(eline!=1){if(cchar!=dwAText.length){nmttxt="";for(var k=0;k<=cchar;k++)nmttxt+=dwAText.charAt(k);document.news.news2.value=nmttxt;cchar+=1;if(cchar!=dwAText.length)document.news.news2.value+="_";}else{cchar=0;eline=1;}if(mxText==cnews&&eline!=0&&ttloop!=0){cnews=0;setTimeout("addNews()",tdelay);}else setTimeout("addChar()",tspeed);}else{setTimeout("addNews()",tdelay)}}doNews()
//]]></script>

Add a gadget ► HTML/JavaScript, beres deh ;)
Happy blogging \m/