skin 320x240
Sjboy yang sering kita gunakan untuk online mig33 sudah banyak tersedia plugin skin
berbagai macam ukuran.
Jika kita ingin mengubah ukuran skin plugin sjboy sesuai keinginan, simak berikut caranya:
1. Buka folder sjboy>plugin>skin
2. Buka dengan notepad file berekstensi .skin dan di dalamnya:
DISPLAY_WIDTH = 320
DISPLAY_HEIGHT = 240
X_SCREEN_OFFSET= 0
Y_SCREEN_OFFSET= 0
KEY_POWER -1 -1 -1 -1 POWER
KEY_SOFT1 0 290 50 30 SOFT1
KEY_SOFT2 190 290 50 30 SOFT2
KEY_UP -1 -1 -1 -1 UP
KEY_DOWN -1 -1 -1 -1 DOWN
KEY_LEFT -1 -1 -1 -1 LEFT
KEY_RIGHT -1 -1 -1 -1 RIGHT
KEY_SELECT -1 -1 -1 -1 SELECT
KEY_SEND -1 -1 -1 -1 SEND
KEY_END -1 -1 -1 -1 END
KEY_CLEAR -1 -1 -1 -1 CLEAR
KEY_1 -1 -1 -1 -1 1
KEY_2 -1 -1 -1 -1 2
KEY_3 -1 -1 -1 -1 3
KEY_4 -1 -1 -1 -1 4
KEY_5 -1 -1 -1 -1 5
KEY_6 -1 -1 -1 -1 6
KEY_7 -1 -1 -1 -1 7
KEY_8 -1 -1 -1 -1 8
KEY_9 -1 -1 -1 -1 9
KEY_ASTERISK -1 -1 -1 -1 *
KEY_0 -1 -1 -1 -1 0
KEY_POUND -1 -1 -1 -1 #
40 320 240 1 24 0 230400 0 0 0 0
width = lebar skin
height = tinggi skin
3. Yang kita ubah adalah width, height, baris terakhir dan kode berwarna biru
Jika kita ingin mengubah ukuran skin 320x240 berikut hasilnya:
DISPLAY_WIDTH = 320
DISPLAY_HEIGHT = 240
X_SCREEN_OFFSET= 0
Y_SCREEN_OFFSET= 0
KEY_POWER -1 -1 -1 -1 POWER
KEY_SOFT1 0 290 50 30 SOFT1 >> 290 dari 320-30
KEY_SOFT2 190 290 50 30 SOFT2 >> 190 dari 240-50
KEY_UP -1 -1 -1 -1 UP
KEY_DOWN -1 -1 -1 -1 DOWN
KEY_LEFT -1 -1 -1 -1 LEFT
KEY_RIGHT -1 -1 -1 -1 RIGHT
KEY_SELECT -1 -1 -1 -1 SELECT
KEY_SEND -1 -1 -1 -1 SEND
KEY_END -1 -1 -1 -1 END
KEY_CLEAR -1 -1 -1 -1 CLEAR
KEY_1 -1 -1 -1 -1 1
KEY_2 -1 -1 -1 -1 2
KEY_3 -1 -1 -1 -1 3
KEY_4 -1 -1 -1 -1 4
KEY_5 -1 -1 -1 -1 5
KEY_6 -1 -1 -1 -1 6
KEY_7 -1 -1 -1 -1 7
KEY_8 -1 -1 -1 -1 8
KEY_9 -1 -1 -1 -1 9
KEY_ASTERISK -1 -1 -1 -1 *
KEY_0 -1 -1 -1 -1 0
KEY_POUND -1 -1 -1 -1 #
40 320 240 1 24 0 230400 0 0 0 0
* KEY_SOFT1 0 290 50 30 SOFT1 >> 290 dari 320-30 = width-30
*KEY_SOFT2 190 290 50 30 SOFT2 >> 190 dari 240-50 = height-50
This fun CSS code adds an animated underline to links on the page
when the mouse rolls over them to grab visitors' attention!
kode css:
a:hover {
text-decoration: none;
background-image: url(http://freecodesource.com/myspace-graphics/images_db/686/prod_604_16155.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
color: #CC9900;
}
Background image dapat di ganti sesuai keinginan.
CSS can be used to really jazz up a plain looking link and create an awesome "call to action" button, as in the case of our 3D depressible button here. It uses CSS2 pseudo element to add a lower 3D side to the link, and CSS3 shadows and transition to complete the look. To overcome a severe limitation of Google Chrome and Safari at the time of writing not supporting CSS3 transitions on pseudo elements, we use the "inherit" technique as described here, so the 3D side of the button is animated when the user presses down on the button.
Note that the default "depth" of the 3D effect is 12px. If you need to increase or decrease this value, change the "12px" value that occurs 3 times in the CSS.
Directions:
Login blog
Template dan Edit Html
Letakkan kode di atas </head> dan simpan template
<style>
a.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}
a.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */
}
a.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
</style>
Selanjutnya dalam menempatkan button link di editor blog "new post" dan pada editor html berikut
kode htmlnya
<a class="css3dbutton" href="http://www.mig33eagle.com/">DOWNLOAD</a>
Flipboard menciptakan serangkaian CSS tombol yang membalik horizontal
Directions:
- Login blog
- Template dan edit html
- Letakkan kode css di atas</head> dan save template
<style>
ul.flipboard{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard li{
display: inline-block;
width: 80px; /* dimensions of buttons. Do not add padding/margins inside this rule */
height: 80px;
margin-right: 10px; /* spacing between buttons */
background: white;
font: bold 36px Arial; /* font size */
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 15px; /* Add top padding to "center" content */
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard li a img{
border-width: 0;
}
ul.flipboard li:hover a{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; /* background color of button onmouseover */
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard li:hover a span{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
Selanjutnya dalam penempatan html, berikut kode html nya.
<ul class="flipboard">
<li><a href="http://www.mig33eagle.com"><span>E</span></a></li>
<li><a href="http://www.mig33eagle.com"><span>A</span></a></li>
<li><a href="http://www.mig33eagle.com"><span>G</span></a></li>
<li><a href="http://www.mig33eagle.com"><span>L</span></a></li>
<li><a href="http://www.mig33eagle.com"><span>E</span></a></li>
</ul>
Atau jika anda ingin memberikan efek flipboard pada bookmark button
<ul class="flipboard">
<li><a href="http://www.mig33eagle.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/rss-heart.png" /></span></a></li>
<li><a href="http://www.mig33eagle.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/twitter-heart.png" /></span></a></li>
<li><a href="http://www.mig33eagle.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/facebook-heart.png" /></span></a></li>
<li><a href="http://www.mig33eagle.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/google-heart.png" /></span></a></li>
<li><a href="http://www.mig33eagle.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/stumble-heart.png" /></span></a></li>
<li><a href="http://www.mig33eagle.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/yahoo-heart.png" /></span></a></li>
</ul>