Z-PLATE.NET : CSS

Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Cara Membuat Handscroll Image Di Blog

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillahirrahmnirrahim... sesuai dengan judul diatas yaitu Cara Membuat Handscroll Image Di Blog, sebelum ke tutorial sebaiknya sobat mengetahui apa itu Handscroll, Handscroll kalo di terjemahkan ke dalam bahasa kita (Bahasa Tercinta Indonesia) hand = Tangan sedangkan Scrool = Gulir atau Geser,, kalo inging melihat contohnya coba sobat klik link di di bawah ini.

Contoh HandScroll klik disini

Hand Scrol Image

Untuk membuatnya sangat gampang sekali, sobat tinggal copy vaste kode di bawah ini.

Langkah pertama sobat login ke blogger terus masuk ke area Template terus klik edit HTML

Setelah itu sobat cari kode </head> terus copy kode di bawah ini dan vaste kode tersebut diatas kode </head>

<script src="https://handjava.googlecode.com/svn/tangan.js"></script>
<style>
#scroller1, #scroller2, #scroller3 {
height: 200px;
border: 4px solid white;
padding: 10px;
margin: 0;
float: left;
overflow: auto;
}
#scroller1, #scroller3 {
width: auto;
float: none;
}
#handle {
height: 172px;
width: 50px;
float: left;
}
.box, .box2, #box {
margin: 10px;
float: left;
display: inline;
width: 300px;
height: 150px;
overflow: hidden;
border: 3px solid white;
}
#box {
float: right;
}
.nojs {
color: black;
font-weight: 700;
padding: 20px;
border: 3px solid red;
margin: 10px;
background: white;
text-align: center;
font-size: 1.4em;
}
body.js .nojs { display: none; }
</style>

Langkah selanjutnya sobat cari kode </body> terus copy kode di bawah ini dan vastekan diatas kode </body>

<script>
handScroller({className:'box'});handScroller({className:'box2'},{controls:{className:'box2'}});handScroller(document.getElementById('scroller1'),{styles:{overflow:'hidden'}});var handle=document.createElement('div'),scroller=document.getElementById('scroller2');handle.id='handle';scroller.style.overflow='hidden';scroller.parentNode.insertBefore(handle,scroller.nextSibling);scroller.style.overflow='hidden';scroller.style.width='828px';handScroller(handle,{controls:scroller,mousewheel:'y'});handScroller(document.getElementById('box'));handScroller(document.getElementById('scroller3'),{styles:{overflow:'hidden'}});
</script>

Terus save template sobat, langkah terakhir upload photo sobat terus masukan dalam postingan supaya poto tersebut bisa bergulir dengan mouse, sobat modif sedikit script image nya dengan kode di bawah ini.
<div class="box">
<img alt="An image" src=url-gambar-sobat.jpg" />
</div>

Oke deh... saya rasa postingan pada kesempatan ini di cukupkan sampai disni semoga berhasil, Good Luck Happy Blogging

CSS Design Internet TAG Tutorial

Beberapa Situs Penyedia CSS3 Generator

Z-PLATE at 10.37.00 1

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillahirrahmanirrahim...di hari minggu yang cerah ini mari kita ng-blog yuk..daripada tidak ada kegiatan atau malah main-main yang tidak berguna mendingan kita buat postingan saja, oke deh sesuai dengan judul di atas yaitu Beberapa CSS3 Generator Online, bagi sobat-sobat yang masih kurang paham dan kurang dalam tentang ilmu CSS nya (seperti saya..hehe) jika ingin membuat tampilan web/blog yang bagus, saya ajak untuk menggunakan CSS Generator Online, karna dengan adanya fasilitas ini kita akan mudah membuat dan mendesain sebuah tampilan web/blog dengan CSS.

Biasanya untuk membuat tampilan website/blog yang bagus diperlukan kemahiran atau pemahaman kode-kode CSS, misalkan kita akan membuat rouded couner, CSS Animasi, atau yang lainnya, setidaknya kita mengusai bahasa CSS (Cascading Style Sheets) tapi untuk sekarang tidak perlu repot-repot karna sudah banyak sekali penyedia CSS Generator, oke sekarang kita langsung saja yuk.

CSS Portal, CSS Portal adalah sebuah situs yang menyediakan CSS Generator Online dari mulai Button Maker, Layout Generator, CSS Menu Generator,CSS Sprite Generator,Rounded Corners,CSS Bok Shadow dan yang lainnya untuk screen shotnya seperti di bawah ini jika ingin menggunakannya silahkan sobat kunjungi situsnya di alamat http://www.cssportal.com/

CSS Portal Generator

Profesional CSS Menu, yaitu situs specialis CSS Menu, jika sobat ingin mempercantik tampilan menu di blog,sobat tinggal kunjungi saja websitenya, disana di sediakan beberapa menu CSS, Diantarnya CSS Menu Drop Down, CSS Menu Horizontal, CSS Menu Vertikal, CSS Tab Menu,CSS Flay Out Menu, langsung saja untuk mengunjungi alamatnya tinggal copy alamat ini (http://cssmenumaker.com/) dan masukan di Addres bar dan membuat menu untuk blog/website

Profesional CSS Menu

CSS Frame Generator, yang ini yaitu untuk membuat Frame di website screen shotny seperti di bawah ini, alamatnya di http://lab.xms.pl/css-generator/

CSS Frame Generator

CSS Little Box, yiatu situs Generator CSS Box, alamatnya di http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html, sobat tinggal pilih jenis box yang akan kan di buat , disana ada beberapa pilihan One Box,Touching,Theere Box dan yang lainnya. tampilan websitenya seperti di bawah ini

CSS Little Box

CSS3 Generator, yang ini untuk CSS3 Generator dari mulai Font,Border Radiusm Rounded Corners,Box Resize,Text Shadow,CSS Gradien, CSS Transition dan yang lainnya. Untuk alamatnya http://css3generator.com/, tampilannya seperti di bawah ini.

CSS3 Generator

Ultimate CSS Gradient Generator, yaitu Generator untuk gradien, warna warnya juga cukup bagus dan warnanya hampir mirip dengan warna yang terdapat dalam Adobe Photoshop, untuk alamatnya di http://www.colorzilla.com/gradient-editor/

Ultimate CSS Gradient Generator

CSS Ribbon Generator, yaitu generator untuk membuat ribbon, ribbon itu gambar nya seperti pita lah..hehe, lihat aja screen shotnya alamatnya di http://www.css3d.net/ribbon-generator/, Tampilannya websitenya seperti dibawah ini.

CSS Ribbon Generator

3D Text CSS Generator, yaitu untuk membuat bentuk text yang berbentuk 3D, alamatnya http://www.3dcsstext.com/.

3D Text CSS Generator

Sebenarnya masih banyak lagi situs situs yang menyediakan CSS Generator Online, silahkan sobat cari sendiri di Search Engine, oke deh saya cukupkan postingan tetang CSS3 nya semoga bermanfaat, Akhir kata dari saya Good Luck Happy Blogging.

CSS TAG Tutorial

Membuat Diamond Dengan CSS3

Z-PLATE at 15.42.00 0

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillahirrahmanirrahim...semakin hari perkembangan CSS kini semakin bagus dan mantap,pada kesempatan ini saya akan share cara membuat diamond dengan CSS3.

Diamond Dengan CSS3

Untuk membuat bentuk diamond dengan CSS3 sangatlah mudah karna sudah banyak sekali contoh contohnya di internet, tapi jika sobat tidak suka googling dan mencari di dunia maya mending tinggal copy paste saja codenya di bawah ini.

Jika blog sobat ingin kelihatan keren dan bagus solahkan sobat kembangkan oleh sobat disini saya cuma akan memberikan sedikit gambaran membuat bentuk Diamond dengan CSS3.

Oke deh daripada basa basi kesana kemari mending langsung saja Copy Vaste kode CSS nya di bawah ini.

KODE CSS3 Untuk bentuk Diamond

#diamond {
   width: 80px;
   height: 80px;
   background: red;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

Kode CSS3 diatas akan menghasilkan bentuk diamond seperti di bawah ini, untuk merubah warnanya, silahkan sobat ganti kode background: red; dengan selera sobat.

Untuk penerapannya sobat tinggal pakai di tag div atau span untuk contoh diatas saya menggunakan tag div

Kode Diamond CSS3

<div class="diamond" id="diamond"></div>

Oke deh sampai disini dulu postingan tentang CSS3 Diamond Semoga bermanfaat, Good Luck happy Blogging

CSS TAG Tutorial Tutorial Blog

Tri Angle Label Cloud Blogspot

Z-PLATE at 21.51.00 3

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillah... pada kesempatan ini saya akan sedikit share tentang cara membuat label cloud dengan CSS Tri Angle.

Untuk membuat label cloud dengan sedikit gaya triangle ini pun cukup mudah dan gampang, sobat tinggal ikuti saja caranya di bawah ini..

Langkah pertama untuk membuat label cloud triangle yaitu :

Login Ke Blogger
Terus Soabat masuk ke Template Blogger
Teus klik Edit HTML
Setelah itu sobat cari kode ]]></b:skin>
Jika sudah ketemu terus sobat copi kode di bawah ini dan letakan di atas kode ]]></b:skin>.

Kode CSS Label Cloud Triangle

.label-size{
   display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
}

.label-size{
border: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #6ea23b;
color: #fff;
background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:hover{
background-color: #b7fa66;
background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}

.label-size:active{
background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size{
display:inline-block;
border-radius: 5px 0 0 5px;
border-right-width:0;
position:relative;
z-index:5;
margin-right: 20px;
margin-bottom: 10px;
}

.label-size:after{
content: " ";
width: 22px;
height: 22px;
line-height: 18px;
font-size:25px;
border-top: 1px solid #769e42;
border-right: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #7eac46;
border-radius: 3px 7px 3px 0;
color: #fff;
background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
position:absolute;
top: 3px;
right: -12px;
z-index:-3;
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
       -moz-transform: rotate(45deg); /* FF3.5+ */
        -ms-transform: rotate(45deg); /* IE9 */
         -o-transform: rotate(45deg); /* Opera 10.5 */
            transform: rotate(45deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                       M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
                 zoom: 1;
}

.label-size:hover:after{
background-color: #b7fa66;
background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}

.label-size:active:after{
background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:before{
content: " ";
height:5px;
width:5px;
display:block;
position:absolute;
right:-3px;
top:11px;
background-color: #fcfdf5;
border: 1px solid #83ab52;
border-radius:5px;
box-shadow: 0 1px 0 #b2ddd83;
}

.label-size span{
padding:2px 5px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
background-color: #ed943f;
text-shadow: 0px 1px 1px #000;
margin-left: 10px;
background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}

Setelah itu Save template sobat, langkah selanjutnya sobat tambahkan gadget label dengan type cloud

Label Cloud

Oke setelah itu klik simpan dan lihat hasilnya...

Jika sobat ingin merubah warnanya silahkan sobat ganti warna backgrundnya atau sobat bisa menggunakan kode kode warna di bawah ini.

Red Triangle


Red Triangle Label Cloud

background: #e25b53;
background: -moz-linear-gradient(top, #e25b53 0%, #dd2011 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e25b53), color-stop(100%,#dd2011));
background: -webkit-linear-gradient(top, #e25b53 0%,#dd2011 100%);
background: -o-linear-gradient(top, #e25b53 0%,#dd2011 100%);
background: -ms-linear-gradient(top, #e25b53 0%,#dd2011 100%);
background: linear-gradient(to bottom, #e25b53 0%,#dd2011 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e25b53', endColorstr='#dd2011',GradientType=0 );

Black Label Triangle

Black Triangle Label Cloud

background: #444444;
background: -moz-linear-gradient(top, #444444 0%, #1c1c1c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#1c1c1c));
background: -webkit-linear-gradient(top, #444444 0%,#1c1c1c 100%);
background: -o-linear-gradient(top, #444444 0%,#1c1c1c 100%);
background: -ms-linear-gradient(top, #444444 0%,#1c1c1c 100%);
background: linear-gradient(to bottom, #444444 0%,#1c1c1c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#1c1c1c',GradientType=0 );

Cyan Label Triangle

Cyan Label Triangle Cloud

background: rgb(130,207,241);
background: -moz-linear-gradient(top, rgba(130,207,241,1) 0%, rgba(56,174,234,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,207,241,1)), color-stop(100%,rgba(56,174,234,1)));
background: -webkit-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: -o-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: -ms-linear-gradient(top, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
background: linear-gradient(to bottom, rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cff1', endColorstr='#38aeea',GradientType=0 );

Oke Sobat... Sampai di sini dulu postingan pada kesempatan ini semoga berhasil Good Luck Happy Blogging

CSS Design TAG Tutorial

CSS3 Gradient Generator Online

Z-PLATE at 17.12.00 1

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillah...jika sobat ingin membuat warna yang saling berpaduan atau istilahnya Gradient dalam background web/blog, sobat tinggal mengunakan CSS3 Gradient Generator, warna warnya cukup bagus dan hampir sama dengan warna yang terdapat pada Adobe Photoshop.

Oke deh untuk caranya mudah sobat tinggal kunjugi situs Ultimate CSS Gradient Generator sobat bisa cari melalui situs seacrh engine atau sobat juga bisa langsung mengunjungi alamatnya di http://www.colorzilla.com/gradient-editor/, disana banyak beragam warna gradien yang bagus, silahkan sobat tinggal memilih warna yang cocok dengan tampilan web/blog sobat.

Tampilan CSS3 Gradien Generator nya seperti di bawah ini

Ultimate CSS Gradient Generator

Selamat mencoba semoga web/blog sobat menjadi lebih bagus dan lebih menarik para pengunjung.. Good Luck Happy Blogging

CSS Design TAG Tutorial

Cara Membuat Rounded Corner Dan Background Gradien

Z-PLATE at 16.49.00

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillah... pada kesempatan ini saya akan tulis sedikit, Cara Membuat Rounded Corner Dan Background Gradien, dulu saya pernah posting cara membuat rounded corner, nah daripada pusing pusing memikirkan kode apalagi kalo masih pemula dan masih asing dengan yang namanya CSS (Cascading Style) seperti saya.

Oke untuk membuatnya sangatlah mudah kita cukup menggunakan CSS3 Generator By Peter, sobat tinggal kunjungi saja alamat websitenya di http://www.css3.me/, cara menggunakannya pun sangatlah mudah dan simple, sobat tinggal klik klik dan klik saja.

Screen CSS3 Generator nya seperti gambar di bawah ini.

Sobat tinggal atur atur atur saja terus setelah selesai sobat tinggal klik tombol Get Code yang berwarna biru terus copy kode CSS.

CSS3 Generator

Disana sobat bisa membuat :

Border Radius
Box-Shadow
Background Gradient
Ofacity

Oke sobat sampai disini dulu postingan pada kesempatan ini semoga bermanfaat. Good Luck Happy Design

Alexa CSS Gadget Internet TAG Tutorial Blog

Download Buku Panduaan Membuat Blog Gratis

Z-PLATE at 20.04.00 16

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillah.... pada kesempatan ini saya mencoba untuk berbagi atau sharing tentang cara membuat blog bagi mereka yang masih awan dengan blog.

Buku ini saya beri judul dengan "Cara Mudah Membuat Blog di Blogspot".

Tutorial Cara Mudah Membuat Blog

Jika sobat berminat ingin download silahkan sobat dapat memiliki Buku Panduan Blog ini dengan Gratis.

Format Filenya yaitu File PDF, Sobat bisa download Via Scribd atatu 4shared. Jika sobat belum tau cara donwload dari scribd silahkan sobat baca lagi artikelnya disini (Cara Download File PDF dari Scribd).

Download Via Scribd
Download Via 4shared
Download Via Google Doc
Good Luck Semoga Sukses,Happy Blogging

CSS Design TAG

Cara Mudah Membuat CSS Dengan CSS3 Maker

Z-PLATE at 07.24.00 4

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillah... untuk membuat web yang bagus dan enak dipandang mata bagi para programer web pemula memang sangatlah susah, apalagi jika belum mengenal yang namanya script CSS3, karena dengan menggunakan script CSS3 ini suatu web akan lebih bagus dan enak dipandang mata dan lebih fleksibel, jika sobat ingin membuat suatu web dengan tampilan yang lebih menarik dan enak di lihat oleh para pengunjung sekarang ada cara yang mudah, sobat tinggal menggunakan CSS3 maker.

CSS3 Maker

Dengan CSS3 maker ini sobat bisa membuat :

Border Radius
Gradient
CSS Transform
CSS Animation
CSS Transition
Warna RGBA
Text Shadow
Box Shadow
Tetx Rotation
Front Face

Cara menggunakan CSS3 Maker ini cukup mudah sekali, sobat tinggal setting di panel sebelah kiri setelah selesai di setting, sobat tinggal tinggal download atau copy script CSS nya, dan terapakan di web/blog sobat. jika sobat berminat silahkan sobat kunjungi URL nya di alamat www.css3maker.com, Good Luck Happy Blogging.

CSS Design Internet TAG

Logo Facebook Dengan CSS3

Z-PLATE at 06.42.00 0

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillah.. pada kesempatan ini saya akan share cara membuat logo Facebook dengan menggunakan CSS3, semakin berkembangnya dunia CSS dan Web Browser maka sekarang untuk menempelkan sebuah logo social networking atau logo apa saja di dalam suatu web tidak perlu lagi menggunakan media gambar, sekarang sobat tinggal berkreasi dan membuat logo sendiri dengan menggunakan CSS3.

Seperti cotoh di bawah ini logo Facebook yang tidak menggunakan media gambar, tapi dengan menggunakan Script CSS3, untuk membuat logo Facebook dengan memanfaatkan script CSS, script ini hasil kreasi Nicolas Gallagher jika sobat ingin mengetahui lebih lanjut tentang script Icon Social Media silahkan sobat kunjungi situsnya di alamat http://nicolasgallagher.com/, sebagai contoh saya ambil tampilan icon facebook secriptnya seperti di bwah ini.

<style>
.facebook a {
    position:relative;
    border-color:#3c5a98;
    text-transform:lowercase;
    text-indent:34px;
    letter-spacing:10px;
    font-weight:bold;
    font-size:64px;
    line-height:66px;
    color:#fff;
    background:#3c5a98;
    /* css3 */
    /* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);
    box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last */
}
ul li a:hover,
ul li a:focus,
ul li a:active {
    opacity:0.8;
    border-color:#000;
    }
ul {
    list-style:none;
    padding:0;
    margin:0;
    overflow:hidden;
    font:0.875em/1 Arial, sans-serif;
}
ul li {
    float:left;
    width:66px;
    height:66px;
    margin:20px 20px 0 0;
}
ul li a {
    display:block;
    width:64px;
    height:64px;
    overflow:hidden;
    border:1px solid transparent;
    line-height:64px;
    text-decoration:none;
    /* css3 */
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px; /* standards version last */
}
</style>

Terus di dalam tag body sobat masukan tag di bawah ini

<div class="content">
<ul>
<li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
</ul>
</div>

Terus sobat lihat hasilnya, insya allah jika web browser sobat sudah support dengan CSS3 hasilnya akan seperti di bawah ini.

Sampai disini dulu info tentang Logo Facebook menggunakan script CSS, semoga bermanfaat, Good Luck Happy Blogging .

CSS Design TAG Tutorial Blog

Style CSS3 Seach Form (Kotak Pencarian)

Z-PLATE at 06.07.00 1

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Serch Form Stlye

Bismillah... Setelah sekian lama tidak posting, Insya Allah pada kesmpatan ini saya akan tulis tentang tutorial cara membuat Search Form atau istilahnya Kotak Pencarian, apakah penting sebuah kotak pencarian dalam suatu web/blog? dan apa fungsi kotak pencarian tersebut? mungkin itu beberapa pertanyaan yang keluar dalam benak saya, setelah di pikir ulang ternyata kotak pencarian ini sangat bermanfaat dan penting sekali, khususnya bagi para visitor. kemarin lutfie tutorial blog baru saja memasang kotak pencarian yang berada dilsebelah kanan atas sidebar.

Untuk membuat kotak pencarian (serch form) seperti itu sangatlah mudah dan gampang, langkah pertama untuk membuat kotak pencarian dalam blogspot yaitu :

Sobat login ke Blogger,
Setelah itu sobat mauk ke area Design/Tata Letak Blog
Selanjutnya sobat masuk ke area Edit HTML dan jangan lupa sobat Centang Expand Widget Templates,
Setelah itu sobat cari kode </head>,
Setelah ketemu tag </head>, sobat masukan kode CSS di bawah ini tepat di atas tag </head>.

<style type='text/css'>
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}
</style>

Atau sobat bisa meletakannya diatas tag ]]></b:skin>, jika sobat meletakan diatas tag ]]></b:skin> sobat buang tag pembuka style dan penutupnya (tag </style> dan tag <style> ), jika sobat meletakan di atas tag ]]></b:skin> maka kode CSS nya sebagai berikut :

.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

Setelah selesai terus simpan / Save template blog sobat
Keterangan Code CSS

searchform : Kode CSS untuk memberi style kotak pencarian
searchform input : Kode CSS untuk memberi style kotak input
searchbutton : Kode CSS untuk memberi style pada tombol

Silahkan sobat ganti warna serta beckgrounnya supaya selaras dengan blog sobat. setelah itu sobat masuk ke area Design/Tata Letak Blog dan tambahkan gadget HTML/JavaScript lalu sobat masukan kode di bawah ini

<form class="searchform" method="get" action="http://lutfietutor.blogspot.com/search" >
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" name="q" />
<input class="searchbutton" type="button" value="Search" />
</form>

Sebelum di save sobat ganti tulisan yang berwana merah (http://lutfietutor.blogspot.com/) dengan alamat blog sobat.

Disini saya mempunyai beberapa Style Search Form dengan Menggunaka CSS3.
CSS Search Form Warna Merah

Search Form Merah

<style type='text/css'>
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
</style>

CSS Search Form Warna Hitam

Search Form Hitam

<style type='text/css'>
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}
</style>

CSS Search Form Warna Biru

Search Form Biru

<style type='text/css'>
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');}</style>

CSS Search Form Warna Hijau

Search form Hijau

<style type='text/css'>
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');}
</style>

CSS Search Form Warna Orange

Search form Orenge

<style type='text/css'>
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');}
</style>

CSS Search Form Warna Putih Abu Abu

Search form Abu Abu

<style type='text/css'>
.searchform{background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-webkit-box-shadow:0px 1px 0px #000;
border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)}
.searchform input{font:normal 12px Arial,Helvetica,sans-serif}
.searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:200px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222}
.searchbutton{color:#000; cursor: pointer; border:solid 1px #000; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');}
</style>

Oke sobat, sampai disini dulu postingan tentang Style CSS3 Seach Form, semoga bermanfaat, Good Luck Happy Blogging

CSS TAG Tutorial Blog

Cara Mengganti Cursors Mouse di Blogspot

Z-PLATE at 05.50.00 0

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Coursosr Mouse

Bismillah.. pada kesempatan ini saya akan sedikit share cara mengganti Coursors Mouse di blogspot. saya rasa sobat blogger sudah tau apa itu Coursors Mouse? jika belum faham yang dimaksud tutorial blog kesempatan ini, silahkan sobat kunjungi disini dan lihat kursor mousenya sudah diganti, oke! sarang kita langsung saja ke tutorialnya.

Untuk mengganti coursors mouse pada halaman blogspot cukup mudah dan gampang, langkah pertama untuk mengganti tampilan cursor ini adalah :

Sobat Login ke Blogger
Selanjutnya sobat masuk ke area Design/Rancangan Blog
Terus Sobat masuk ke Edit HTML
Jangan lupa sobat centang Expand Widget Template
Setelah itu sobat cari kode ]]></b:skin>
Setelah ketemu, sobat tambahkan kode di bawah ini dibawah kode ]]></b:skin>

KODE COURSERS MOUSE

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBARo9dAllTiZHU4olbR8P2DrYeMDi1pg9rixZG2gyPHoUk9_QvV02Cwjxt41a8GMXlos1_bHztILlFU8uzg3AF5tW_C5OqiWZaGowu-eiGM4NawiwjeDQu_ZunaF_DpKOVmRiWXDWpWg/s300/contoh-cursor.png), progress;

Sebelum di save sebaiknya sobat ganti dulu gambar yang akan dijadikan kursor, yaitu dengan cara mengganti kode gambar (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBARo9dAllTiZHU4olbR8P2DrYeMDi1pg9rixZG2gyPHoUk9_QvV02Cwjxt41a8GMXlos1_bHztILlFU8uzg3AF5tW_C5OqiWZaGowu-eiGM4NawiwjeDQu_ZunaF_DpKOVmRiWXDWpWg/s300/contoh-cursor.png) .

Langkah terakhir Save Template Blog sobat.

Cara lain untuk mengganti coursor mouse yaitu dengan

Cari Tag </head>

Setelah ketumu sobat tamabahkan kode di bawah ini diatas kode </head>

<style>
body, a, a:hover {cursor: url(url-gambar-coursors-mouse,png), progress;
</style>

Kedua cara ini sama saja hasilnya. oke sobat! mungkin itu sedikit tutorial cara mengganti coursor mouse di blogspot semoga berhasil, Good Luck Happy Blogging

CSS TAG Tutorial Blog

Cara Pasang Animasi Gambar Pada Postingan

Z-PLATE at 20.21.00 0

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

CSS Animasi

Bismillah... pada malam minggu ini saya akan sedikit share tentang cara membuat animasi gambar pada postingan menggunakan CSS Keyframe, sobat pernah lihat pada blog tetangga, ketika halaman blog load gambar dalam postingan muncul dari berbagai arah, kadang dari bawah kadang dari atas dari pinggir juga bisa, oke untuk membuat animasi seperti itu bisanya menggunakan CSS yang di sebut dengan CSS Keyframe.

Dalam postingan ini saya tidak akan membahas jauh tentang CSS keyframes jika sobat mau mendalaminya silahkan sobat bisa kunjungi beberapa situs di bawah ini. Contoh Animasi menggunkan CSS Keyframe Klik Disini

Oke sekarang kita langsung ke tutorial cara menysipkan CSS Keyframe dalam blogspot, untuk menambahkan CSS Animasi gambar dalam postingan yang harus sobat lakukan adalah :

Pertama sobat login ke Blogger
Terus Masuk ke area Design/Rancangan Blog
Langkah selanjutnya sobat masuk ke Area Edit HTML terus centang tanda Expand Widget Template
Setelah itu sobat cari kode kode ]]></b:skin>
Terus masukan kode di bawah ini diatas kode ]]></b:skin>

CSS Keyframe

.post-body img {
animation: animasigambar 6s;
-moz-animation: animasigambar 6s; /* Firefox */
-webkit-animation: animasigambar 6s; /* Safari and Chrome */
-ms-animation: animasigambar 6s; /* IE 9 */
@keyframes animasigambar
{0%{transform:translate(0px, -9000px)}
25% {transform:rotate(-100deg)}
50% {transform:rotate(90deg)}
100%{transform:translate(0px, 0px)}}
@-moz-keyframes animasigambar
{0%{-moz-transform:translate(0px, -9000px);}
25% {-moz-transform:rotate(-100deg);}
50% {-moz-transform:rotate(90deg);}
100%{-moz-transform:translate(0px, 0px)}}
@-webkit-keyframes animasigambar
{0%{-webkit-transform:translate(0px, -9000px);}
25% {-webkit-transform:rotate(-100deg);}
50% {-webkit-transform:rotate(90deg);}
100%{-webkit-transform:translate(0px, 0px)}}
@-ms-keyframes animasigambar
{0%{-ms-transform:translate(0px, -9000px);}
25% {-ms-transform:rotate(-100deg);}
50% {-ms-transform:rotate(90deg);}
100%{-ms-transform:translate(0px, 0px)}}
}

Setelah itu save template blog sobat dan lihat hasilnya.. mungkin itu saja tutorial pada kesempatan ini semoga berhasil. Good Luck Happy Blogging

CSS Gadget TAG Tutorial Blog

Cara Membuat Menu Melayang Di Blogspot

Z-PLATE at 20.50.00 0

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Menu Melayang di Blogspot

Bismillah... pada kesempatan ini saya akan tulis tentang cara membuat menu melayang di blogspot. menu melayang ini bukanlah menu yang bisa terbang seperti burung twitter yang sering sobat saksikan di blog tetangga, tapi menu melayang disini diartikan menu yang tetap pada posisinya jika blog di geser ke bawah dan ke atas.

Sekarang kita langsung saja ke cara membuat menu melayang, langkah pertama seperti biasa yaitu :

Login Ke Blogger
Terus Sobat Masuk ke Area Rancangan/Design Blog
Setelah itu sobat masuk ke area Edit HTML
Terus Centang Expand Widget
Langkah Selanjutnya sobat cari tag </head>
Setelah ketemu, sobat copy kode CSS di bawah ini dan paste di atas tag </head>

KODE CSS MENU MELAYANG

<style>
div.menu-melayang {
position: fixed;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
background: -moz-linear-gradient(top, #000, #444);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
border: 1px solid #000;
width: 180px;
z-index: 500;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border:none;
padding:10px 10px 10px 10px;
}
div.menu-melayang a, div.menu-melayang h3 {
display: block;
margin: 0 0.5em;
color:#FFF; }
div.menu-melayang a:hover {
color:#FF0000;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
color:#FFF;
cursor: pointer;
text-decoration: none;
padding: 5px 5px 5px 5px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
</style>

Setelah Itu sobat cari tag <body> dan masukan kode di bawah ini di bawah tag <body>

<div class="menu-melayang">
<h3>Menu Melayang</h3>
<a href="http://alamat-url/">Anchor Link</a>
<a href="http://alamat-url/">Anchor Link</a>
<a href="http://alamat-url/">Anchor Link</a>
<a href="http://alamat-url/">Anchor Link</a>
</div>

Sebelum template blog sobat di save ganti url (http://alamat-url/) dengan url milik sobat. Setelah itu tekan tombol save dan lihat hasilnya, Good Luck Happy Blogging

CSS Design Gadget TAG Tutorial Blog

Cara Membuat CSS According Slide

Z-PLATE at 11.41.00 0

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Slide According

Bismillah.. Setelah saya posting tentang cara membuat menu according sekarang saya akan posting lagi tentang cara membuat slide according, according ini buatan Harry Robert dan saya sedikit rubah CSS nya, jika sobat tertarik dengan ini silahkan di coba coba.

Untuk membuat menu slide according ini sobat tidak memerlukan JavaScript yang diperlukan hanya CSS dan Tag HTML, dalam According ini yang dugakan adalah tag h2, tag div dan tag ul li, silahkan sobat bisa kembangkan lagi sesuai dengan kebutuhan sobat jika sobat mau lihat contohnya silahkan sobat kunjungi According Slide.

Pertama kita buat dulu Tag ul dalam editor HTML dan beri kelas (class="namakelas") sebagai contoh

<ul class="accordion"></ul>

Terus tambahkan tag li di dalam tag ul dan beri kelas <li class="namakelas"> jadi strukturnya seperti di bawah

<ul class="accordion">
<li class="slide-01"></li>
<li class="slide-02"></li>
<li class="slide-03"></li>
<li class="slide-04"></li>
<li class="slide-05"></li>
</ul>

Contoh di atas adalah dasar dari pembuatan menu dengan menggunakan tag ul dan li. sekarang kita langsung ke cara membuat According Slide dengan CSS. jika sobat ingin pasang slide according ini pada blogspot langkah pertama yang harus dilakukan adalah :

Login ke blogger
Terus masuk ke area Design/Rancangan
Langkah selanjutnya masuk ke area Edit HTML terus sobat centang Expand Widget
Setelah itu sobat masukan kode CSS di bawah ini di atas tag </head>, atau sobat bisa juga memasukannya dalam CSS sobat. itu terserah yang penting CSS nya bisa jalan.

CSS SLIDE ACCORDING

<style>
.accordion{
width:500px;
overflow:hidden;
list-style:none;
margin-bottom:10px;
text-shadow:1px 1px 1px rgba(0,0,0,0.25);
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
.accordion li{
float:left;
width:20%;
overflow:hidden;
height:250px;
-moz-transition:width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
-moz-transition-delay:0.15s;
-webkit-transition-delay:0.15s;
-o-transition-delay:0.15s;
transition-delay:0.15s;
}
.accordion li:first-of-type{
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
}
.accordion li:last-of-type{
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
.accordion div{ padding:10px;}
.accordion:hover li{ width:10%;}
.accordion li:hover{ width:60%;}
.slide-01 { background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
color:white;}
.slide-02 { background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
color:white; }
.slide-03 { background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
color:white;}
.slide-04 { background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
color:white; }
.slide-05 { background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color:white; }
</style>

Jika sudah sobat save template blog sobat.
Langkah selanjutnya sobat kembali masuk ke area design/rancangan blog
Terus sobat tambahkan Gadet HTM/JavaScript dan Copy Code di bawah dan masukan dalam gadget tersebut

CODE SLIDE ACCORDING

<ul class="accordion">
<li class="slide-01">
    <div>
      <h2>Slide 1</h2>
      <p>Test According1</p>
    </div>
</li>
<li class="slide-02">
    <div>
      <h2>Slide 2</h2>
     <p>Test According2</p>
    </div>
</li>
<li class="slide-03">
    <div>
      <h2>Slide 3</h2>
       <p>Test According3</p>
    </div>
</li>
<li class="slide-04">
    <div>
      <h2>Slide 4</a></h2>
      <p>Test According4</p>
    </div>
</li>
<li class="slide-05">
    <div>
      <h2>Slide 5</h2>
     <p>Test According5</p>
    </div>
</li>
</ul>

Silahkan sobat ganti Title atau kata Slide 1 ,2,3,4,5 dengan title blog sobat atau dengan judul postingan sobat jika sobat mau menambahkan link sobat tinggal tambahkan saja, jika belum tau cara membuat link silahkan sobat baca baca lagi, oke sobat semoga berhasil.. Good Luck, happy Blogging

CSS Design Java Script TAG

Cara Membuat According Dengan CSS dan JQuery

Z-PLATE at 08.32.00 2

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

According Menu

Bismillah.... di hari yang cerah ini semoga sobat masih semangat dalam dunia blog dan masih ingin berkreasi di dunia online via blog baik menggunakan CMS Blogger ataupun CMS WordPress atau CMS yang lainnya. pada postingan ini saya akan sedikit share cara membuat according dengan menggunakan CSS dan JavaScript JQuery.

Untuk membuat according sekarang ini tidak terlalu sulit karena sobat tinggal contek aja kode kodenya dari blog/web orang lain dan sobat tinggal terapkan di blog kita, bukan ngajarin yang tidak benar tapi daripada kita tidak berkreasi dan tidak bergerak sama sekali he he,mendingan kita ngembangin yang sudah ada, karena untuk berkreasi itu emang cukup sulit dan diperlukan skil yang tinggi.

Oke daripada bicara kesana kemari, mendingan kita langsung ke cara membuat Menu According, untuk membuat menu ini yang diperlukan adalah

JavaScript Jquery silahkan sobat kunjungi situs Jquery nya di alamat http://jquery.com/
CSS untuk mendesain tampilan Menu According
Terakhir adalah Script HTML

Terus seperti apa Menu According itu? saya kuang paham dan kurang tau definisi according itu seperti apa, jika sobat penasaran dengan arti dan makna According silahkan sobat cari di mesin pencari misalkan Google,Yahoo,Bing, dan lainnya.

Sekarang kita lanjut saja ke TKP jika sobat tertarik dengan menu according (klik untuk melihat contoh According) ini, silahkan sobat ikuti dan bisa di copy paste, he he.

Script CSS According

<style type='text/css'>
.container {
    width: 500px;
    margin: 0 auto;
}
h1 {
    font: 4em normal Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    padding: 20px 0;
    color: #aaa;
}
h1 small{
    font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 0.5em;
    display: block;}
h2.acc_trigger {
    padding: 0;    margin: 0 0 5px 0;
    height: 46px;    line-height: 46px;
    width: 500px;
    font-size: 2em;
    font-weight: normal;
    float: left;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
h2.acc_trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0 10px 0 10px;
}
h2.acc_trigger a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
h2.active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.acc_container .block {
    padding: 20px;
}
.acc_container .block p {
    padding: 5px 0;
    margin: 5px 0;
}
.acc_container h3 {
    font: 1.5em normal Georgia, "Times New Roman", Times, serif;
    margin: 0 0 10px;
    padding: 0 0 5px 0;
    border-bottom: 1px dashed #ccc;
}
</style>

JavaScript According

<script type='text/javascript'>
$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
});

});
</script>

Terus kita gunakan Script Jquery kita cukup panggil saja dengan secript seperti di bawah

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Jika sobat sudah punya hosting sendiri silahkan sobat donwload Script Jquery nya di disini dan masukan dalam server hosting sobat.

Langkah terakhir cara penerpan di tag HTML sebagai contoh saya menggunakan 5 tab According

<div class="container">
    <h2 class="acc_trigger"><a href="#">TAB 1</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 1</h3>
            <p>isi Tab 1 </p>
        </div>
    </div>
        <h2 class="acc_trigger"><a href="#">TAB 2</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 2</h3>
            <p>isi Tab 2 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 3</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 3</h3>
            <p>isi Tab 3 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 4</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB4</h3>
                <p>isi Tab 4 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 5</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB5</h3>
                <p>isi Tab 5 </p>
        </div>
    </div>
</div>

Nah munkin itu sedikit info tentang cara membuat menu according jika sobat mau menerapkan dalam blogger sobat tinggal copy Code JavaScriptnya dan Code CSS dan masukan di bawah tag <head> atau di atas tag </head>, terus sobat tinggal sisipkan Code HTML nya di dalam tag <body> atau sobat tinggal masukan di dalam Gadget HTML/JavaScript. Terakhir Good Luck Happy Blogging.

Pages

Axact Blogger Template

Cara Membuat Handscroll Image Di Blog

Beberapa Situs Penyedia CSS3 Generator

Membuat Diamond Dengan CSS3

Tri Angle Label Cloud Blogspot

CSS3 Gradient Generator Online

Cara Membuat Rounded Corner Dan Background Gradien

Download Buku Panduaan Membuat Blog Gratis

Cara Mudah Membuat CSS Dengan CSS3 Maker

Logo Facebook Dengan CSS3

Style CSS3 Seach Form (Kotak Pencarian)

Cara Mengganti Cursors Mouse di Blogspot

Cara Pasang Animasi Gambar Pada Postingan

Cara Membuat Menu Melayang Di Blogspot

Cara Membuat CSS According Slide

Cara Membuat According Dengan CSS dan JQuery

Recent Posts

Popular Posts

Random Post

Blog Archive

Labels

About

Pages