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 ☺

Add Style Sheets for Contact Form Widget Blogger

Beben Koben 19.22 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...

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/

Blogger, Coded, CSS, Snippet, Tutorial

Blogger Contact Form Gadget Released & Update Google Plus Display

Beben Koben 15.05 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+ Page	Hangouts Display	Hangouts Shortcut

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.

2. Click button the Add a Gadget.

3. Click on More Gadgets.

4. Choose the Contact Form Gadget.

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/

Blogger, Google, Informasi, Widget

Make Lines Animation using CSS3 Keyframes

Beben Koben 16.40 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!

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/

Coded, CSS, CSS3, Tutorial

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

Beben Koben 16.18 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 ;)

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/

Coded, CSS, CSS3, Javascript, Tutorial

PicStrips jQuery Plugin Strips Effect to Image

Beben Koben 11.43 0 Komentar X

Benar-benar sepi nih resource dari developer. Jadi susah buat update artikel :-s Tema yang tidak akan habis dibahas salah satunya adalah tentang jQuery ;)) Kumpulan trik jquery plugin mungkin sesuatu yg bisa mempertahankan eksistensi dalam aktifitas blogging. Kendalanya ya cuma satu, yaitu susahnya menemukan plugin jQuery yg unik untuk ditemukan :p Koben mau berbagi tutorial plugin jQuery seputar menghias image menjadi putus-putus (PicStrips)
Original title is stylish image bars jquery plugin. Syarat utama agar trick berjalan mulus, di dalam template sudah tertanam script jQuery inti<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>Screenshot

Gambar akan terlihat terpotong-potong (strips) ujung-ujung image zig-zag dikarenakan penambahan bg color sesuai dengan bg yg ada, strips dapat di customize, tinggi strips ujung gambar dapat di customize dll.
Fancy it?

http://www.moreofless.co.uk/downloads/picstrips/picstrips-1.0.js
http://www.moreofless.co.uk/downloads/picstrips/picstrips-1.0-min.js

Itu bumbu stylish image bars jquery plugin. Rekomendasi diletakkan sebelum tagging </body> Script pemanggilnya begini

<script type='text/javascript'>//<![CDATA[
  $(document).ready( function() {
    $(".strips").picstrips( {splits: 17,hgutter: '5px',vgutter: '5px',bgcolor: 'rgba(0,0,0,.7)'} );
  });
//]]></script>

Keterangan:
.strips = Unique ID.
<-> splits: 17 = Jumlah strips.
<-> hgutter: '5px' = Jarak strips.
<-> vgutter: '5px' = Tinggi ujung strips (zig-zag effect) pada image.
<-> bgcolor: 'rgba(0,0,0,.7)' = Warna latar belakang vgutter
Sobat dapat menambahkan varian strips dengan memasukan ke dalam script pemanggilnya! Contoh:

<script type='text/javascript'>//<![CDATA[

  $(document).ready( function() {

    $(".strips").picstrips( {splits: 17,hgutter: '5px',vgutter: '5px',bgcolor: 'rgba(0,0,0,.7)'} );

    $("#strips2").picstrips( {splits: 3,hgutter: '10px',vgutter: '40px'} );

    $("#strips3").picstrips( {splits: 18,hgutter: '2px',vgutter: '10px', bgcolor: '#fff'} );

  });

//]]></script>

Demo & resource by: www.moreofless.co.uk/picstrips
Happy jQuery \m/

jQuery, Snippet, Tutorial

Tutorial Blog for Stylish Blogger

Tutorial blog for full stylish blogger + Full tutorial blogger blogspot come from selection site + Great hack and awesome resource in the world