Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS
Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.
Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.
Your ads here!!!
Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

RESOURCE

1 2 3 4 5 6 7 8
26 Januari 2013

GRAPHICS STATUS

27 Juli 2011

5 Komentar X
Meneruskan artikel blogger contact form gadget, bagaimana cara meng-snippet tampilan kontak blogger dengan menanamkan CSS secara sederhana namun tetap gaya. Ada beberapa teknik yang dapat dilakukan dalam hal ini. Pertama dengan merombak syntax dalam ContactForm1 bawaan blogger. Kedua dgn cara langsung menambahkan kode CSS dengan class & ID yg sudah ada! Bila sobat tertarik dengan cara ke satu maka bacalah di
www.oloblogger.com/2013/05/contacto-blogger-pagina-estatica.html
Di sana sudah dijelaskan syntax apa saja yg mesti digantikan agar selaras dengan style sheet yg sudah di buat. Versi Koben sekarang, tanpa mesti ganti syntax bawaan dari blogger, cukup tanamkan ramuan CSS, jebret jadi. Nggak ribet, tinggal urusan skill CSS kalian saja jika memang mau lebih keren. Gue buat standaran saja ;) Hias-menghiasi terserah anda.

Cari kode </b:skin> letakkan tepat diatas/sebelum.

#ContactForm1 {
width: 260px; 
height: 450px; 
margin: 10px auto; 
padding: 10px 20px;
background: #c9d0de; 
border: 1px solid #e1e1e1;
}
#ContactForm1 h2 {
margin: 0; 
color: #445668; 
font-size: 25px; 
text-shadow: 0px 1px 0px #f2f2f2;
}
.contact-form-name,.contact-form-email {
width: 260px; 
height: 35px; 
color: #FFF;
padding: 0 5px; 
background: #5E768D;
}
.contact-form-email-message {
width: 260px; 
height: 170px; 
padding: 0 5px; 
color: #FFF;
background: #5E768D;
}
.contact-form-button,.contact-form-button-submit {
width: 101px; 
height: 35px; 
float: right; 
color: #FFF;
font-weight: bold;
padding: 0; 
margin: 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
}
SAVE.
Itulah unik ID CSS secara global yg bisa kalian pakai untuk memberikan sentuhan berbeda pada "Contact Form" widget blogger. Bila mau melihat unik-ID lainnya, maka sobat harus bisa membaca kode dalam mode Ctrl + U alias source web :d Aturlah height, width, padding, margin and color sesuai kebutuhan. Bila sukses maka hasil jadi akan terlihat seperti berikut...

Nama

Email*

Pesan*

Berikut links resource untuk membuat form contact full stylish
  • www.doublemesh.com/coding/free-premium-css3-forms/
  • www.djdesignerlab.com/2011/08/08/10-useful-html5-and-css3-forms-tutorial-with-source-file/
  • www.pehaa.com/2011/07/create-a-unique-contact-form-with-css3-transitions/
  • www.cssglobe.com/collections/forms/
  • www.webexpedition18.com/articles/top-15-html5-and-css3-forms-tutorials/
  • www.acrisdesign.com/2011/07/16-best-css3-forms-tutorials/
  • www.splashnology.com/article/creating-html5css3-forms-30-helpful-tutorials/1275/
Happy coding \m/
, , , , ✐

9 Komentar X
Informasi terupdate dari pihak blogger and google. Sudah melihat tampilan baru dari halaman google plus Sekarang memakai UI terbaru, yang mana perombakan terjadi pada area menu dan embed chattingan! Menu disembunyikan dan akan terlihat dengan gaya hover. Bagian embed chattingan (di gabung dengan fitur hangout) metode yg dipakai dengan click untuk memunculkan.
Screenshot
New Google+ PageHangouts DisplayHangouts Shortcut
post-imgpost-imgpost-img
Yang kemarin saja belum apal, eh sudah diganti lagi layoutnya ;)) Informasi ke dua datang dari dunia gadget blog, pihak blogger menambahkan widget baru yaitu "Contact Form" In google+ page blogger introduced a new "Contact Form" widget Koben juga sudah tambahin contact form widget dr blogger, sebelah kanan bawah :d

How To Add It

1. Go to the Layout Tab.post-img2. Click button the Add a Gadget.post-img3. Click on More Gadgets.post-img4. Choose the Contact Form Gadget.post-img 5. Save it.

Feature contact form gadget blogger.

> Mengirim pesan teks secara sederhana.
> Belum tersedia dukungan untuk attachment file (kemungkinan di masa depan :p)
> Kustom CSS styles dapat ditambahkan (jika mau dan bisa :d)
> Markup/syntax yg dapat digunakan sama dengan yg ada pada komentar default blogger (<b>, <i>, <a>, or <u> - tidak bisa mengirim HTML file melalui pesan)

Gadget baru ini datang dengan update terbaru google mengumumkan Google I/O 2013 dan sepertinya Blogger masih merupakan bagian integral dari produk google.
Happy googler \m/

, , , ✐

4 Komentar X
Koben mau berbagi tutorial dengan memakai atribut CSS3 @keyframes Baca dulu dong artikel creativity using css keyframe animations. Sekarang mari membuat sebuah garis tipis, berkedudukan di bawah, bergerak dari arah kiri menuju ke kanan! Hasil karya ini bisa kita pakai untuk memberi sentuhan lebih, agar pengunjung ketika melihat garis yg bergerak akan melihat konten tersebut ;) Dari pada dijelaskan simpang siur jg arah dan tujuan, tengok demo berikut ini!

post-image

Bagaimana, sederhana tetapi ajib kan :-bd Sudah tentu dong yah ;))
.serrr{
 width: 55px;
 border-bottom: 5px solid #333;
 position: relative;
 animation: moveleft 5s infinite;
 -moz-animation: moveleft 5s infinite;
 -webkit-animation: moveleft 5s infinite;
 -o-animation: moveleft 5s infinite;
}
@keyframes moveleft{
 from {left:0px;} to {right:200px;}
}
@-moz-keyframes moveleft {
 from {left:0px;} to {left:200px;}
}
@-webkit-keyframes moveleft {
 from {left:0px;} to {left:200px;}
}
@-o-keyframes moveleft {
 from {left:0px;} to {left:200px;}
}
Planing syntax<div class="serrr"></div>Letakin deh apa-apa di atas planing syntax. Aturlah panjang sesuai kebutuhan, dan kode berikut juga from {left:0px;} to {right:200px;}
DONE.

Bonusnya silahkan lihat link berikut pelajari dan have fun, dan gue sudah bingkiskan buat kalian.
www.jsdo.it/haratatu8/jEfC, www.jsdo.it/haratatu8/jUge, www.jsdo.it/haratatu8/qFJS, www.jsdo.it/OpenFlex/jUME, www.jsdo.it/OpenFlex/td2V, www.jsdo.it/OpenFlex/ncrt, www.jsdo.it/OpenFlex/kVUp, www.jsdo.it/OpenFlex/3ImX, www.jsdo.it/OpenFlex/jSfh, www.jsdo.it/OpenFlex/raaB, www.jsdo.it/OpenFlex/xVY8, www.jsdo.it/OpenFlex/jyB0, www.jsdo.it/OpenFlex/rjGf, www.jsdo.it/OpenFlex/mf1Q, www.jsdo.it/OpenFlex/KnnB, www.jsdo.it/OpenFlex/tUzP, www.jsdo.it/OpenFlex/gG6q & www.jsdo.it/OpenFlex/dpDr

Happy blogging \m/

, , , ✐

4 Komentar X
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 ;)
Enter any RSS Feed -
Ex: http://feeds.feedburner.com/beben-koben

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/
, , , , ✐


Search by titles  Search by content

ARSIP

RECENTLY

Be Fan on Facebook

FACEBOOK PAGE