Tutorial Gratis

Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Selasa, 12 Maret 2013

Beautifful Vertikal Sossial Share

Selamat Sore sobat Blogger.
Kemaren ana Blogging ke blognya sahabat ane Miz Tia dalam Blognya MizTia Respect, dan melihat widget sosial share yang mungil dan cantik, ane pun merasa terpikat dengan widget tersebut, ahirnya malam tadi ane coba utak atik CSS dan HTML Alhasil jadilah artikel ini hehhehhe....
Widget tersebut kurang lebih seperti ini :

VIEW A DEMO-1

VIEW A DEMO-2

Baiklah sobat blogger untuk tutorialnya sebagai berikut :

1. Seperti biasa Login ke Akun Blogger sobat

2. Klik Template Klik Edit HTML

3. Jangan Lupa Centang Expand Widget Template

4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode ]]></b:skin>

#KTalex {
  list-style:none;
  text-decoration:none;
  font-size:.9em;
  font-family:trebuchet ms,sans-serif;
}

#KTalex a {
  text-decoration:none;
  font-family:trebuchet ms,sans-serif;
}

#KTalex li {
  position:relative;
  height:38px;
  cursor:pointer;
  padding:0 !important;
}

#KTalex .facebook,
.googleplus,
.pinterest,
.rss,
.twitter {
  position:relative;
  z-index:5;
  display:block;
  float:none;
  margin:7px 0 0;
  width:90px;
  height:38px;
  border-radius:5px;
  background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7gGucuqkCe3XVLA_w8Fi9eUHs9t4ahm5NcTST4Pl0hmnxKFXOj3GHT9kWqXhq5MRicC94HzXdlJVk-nwpnDcQrkcQ8T8Lg1NhaYPqi-xYx217L7cDbEua7OMC3qO1jyK-ysTFNZEX89Pk/s320/alexjoen-Vertikal+Sosial+Share+With+Animation.png) no-repeat;
  background-color:rgba(217,30,118,.42);
  -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  box-shadow:rgba(0,0,0,.28) 0 2px 3px;
  color:#141414;
  text-align:left;
  text-indent:35px;
  text-shadow:#333 0 1px 0;
  white-space:nowrap;
  line-height:32px;
  -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
  transition:width .25s ease-in-out,background-color .25s ease-in-out;
  -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}

#KTalex li:after {
  position:absolute;
  top:0;
  left:50px;
  z-index:2;
  display:block;
  height:38px;
  color:#141414;
  content:attr(data-alt);
  line-height:32px;
}

#KTalex .icon {
  overflow:hidden;
  color:#fafafa;
}

#KTalex .facebook {
  width:32px;
  height:32px;
  background-color:rgba(59,89,152,0.42);
  background-position:0 0;
}

#KTalex .twitter {
  width:32px;
  height:32px;
  background-color:rgba(64,153,255,0.42);
  background-position:0 -33px;
}

#KTalex .googleplus {
  width:32px;
  height:32px;
  background-color:rgba(228,69,36,0.42);
  background-position:-3px -66px;
}

#KTalex .pinterest {
  width:32px;
  height:32px;
  background-color:rgba(174,45,39,0.42);
  background-position:0 -95px;
}

#KTalex .rss {
  width:32px;
  height:32px;
  background-color:rgba(255,102,0,0.42);
  background-position:-3px -126px;
}

#KTalex li:hover .icon,
.touch #KTalex li .icon {
  width:90px;
}

.touch #KTalex li .facebook,
#KTalex li:hover .facebook {
  background-color:rgba(59,89,152,1);
}

.touch #KTalex li .twitter,
#KTalex li:hover .twitter {
  background-color:rgba(64,153,255,1);
}

.touch #KTalex li .googleplus,
#KTalex li:hover .googleplus {
  background-color:rgba(228,69,36,1);
}

.touch #KTalex li .pinterest,
#KTalex li:hover .pinterest {
  background-color:rgba(174,45,39,1);
}

.touch #KTalex li .rss,
#KTalex li:hover .rss {
  background-color:rgba(255,102,0,1);
}

5. Klik Save

6. Kemudian Klik Tata Letak >>>> Klik Add Widget Klik >>> HTML/Javascript

7. Kopi Paste Kode HTML Dibawah ini :

<ul id='KTalex'>
<li data-alt=''><a class='icon facebook' href='https://www.facebook.com/joens.tutorial'><small>Facebook</a></li>
<li data-alt=''><a class='icon twitter' href='https://twitter.com/alexjoen'>Twitter</a></li>
<li data-alt=''><a class='icon googleplus' href='https://plus.google.com/108597184913188482016'>Google +</a></li>
<li data-alt=''><a class='icon pinterest' href='http://pinterest.com/alexjoen'>Pinterest</a></li>
<li data-alt=''><a class='icon rss' href='http://feeds.feedburner.com/blogspot/kolomtutorial'>Feeds</a></li>
</ul>

8. Klik Save, and Enjoy

Note :
Silakan Ganti Tulisan yang berwarna merah dengan akun terkait milik sobat, Sekali lagi thank ti MizTia udah menjadi inspirasi hingga tercipta artikel ini .

Add Comment

Unknown CSS, Tutorial Blog

Senin, 11 Maret 2013

Membuat Kotak Gelap Terang Dengan CSS

Selamat sore sobat, Waduh berhubung ada request terpaksa deh ane share lagi sebuah tutorial hehehhe, Request ini berasal dari mas RB dalam Blognya http://xramabanten.blogspot.com beliau request dalam sebuah artikel tentang Animation Sociall Share With CSS3 ini dia freviewnya :

Wah disebut bapak lagi, ehhehheh....
Untuk Demonya Agan Bisa lihat Kotak Widget yang ada di blog ini.

Baiklah guna menjawab requesnya ini dia tutornya:

1. Seperti biasa Login ke Akun Blogger sobat

2. Klik Template Klik Edit HTML

3. Jangan Lupa Centang Expand Widget Template

4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode ]]></b:skin>

.joensbox {
position:relative;
display:block;
width:220px;
max-height:500px;
background:#000000;
color:#93F655;
overflow:auto;
padding:0 0;
margin:3px 3px;
border:2px solid #777;
border-radius:6px;
opacity:0.2;
filter:alpha(opacity=20);
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

.joensbox:hover {
opacity:1.0;
filter:alpha(opacity=100);
}

5. Kemudain Klik Save
6. Untuk Pemasangan pada sidebar silakan gunakan kode :

<div class="joensbox">

Isi Dengan Konten Agan Disini/Kode Widgetnya

</div>

7. Klik Save Lagi gan.

Note :

width:220px;                     Untuk merubah Lebar Box
max-height:500px;           Untuk merubah Tinggi Box
background:#000000;      Untuk merubah Warna Background
color:#93F655;                 Untuk merubah Warna Efeknya

Untuk Kode warna Silakan Klik : DISINI

Ok Sekian Artikel sore ini semoga jawaban Reques ini dapat memuaskan Mas RB.

Add Comment

Unknown CSS, Tutorial Blog

Jumat, 08 Maret 2013

Animation Sociall Share With CSS3

Selamat siang sobat blogger, bagaimana kabar hari ini,......???

Salah satu media agar blog atau web dapat lebih mendatang kan pengunjung diantaranya dengan sistem "SHARE" ke sosial bookmark trik ini mungkin hanya salah salah satunya saja.

Pada kesempatan ini Kolom Tutorial™ akan mencoba membuat sebuah Tutorial yang berhubungan dengan hal tersebut di atas, Tutorial kali ini kita berinama "Animation Sociall Share With CSS3" Untuk Freview gambarnya seperti ini :

VIEW A DEMO

Untuk Tutorialnya sebagai Berikut :

1. Seperti biasa Login ke Akun Blogger sobat

2. Klik Template Klik Edit HTML

3. Jangan Lupa Centang Expand Widget Template

4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode ]]></b:skin>

.scial a
{
text-decoration:none;
color:rgba(0,0,0,.5);
}
.scial
{
display:inline-block;
transition:.3s;
-webkit-transition:.3s;
-o-transition:.3s;
-moz-transition:.3s;
-ms-transition:.3s;
cursor:pointer;
margin:10px 0px;
width:50px;
padding:0px;
height:50px;
font-size:22px;
color:rgba(0,0,0,.5);
text-shadow: 1px 0 0 rgba(0,0,0,.2);
}
.scial:hover
{
padding-right:160px;
}
.scial > span
{
font-weight:900;
display:inline-block;
text-decoration:none;
color:rgba(0,0,0,.5);
margin:5px 7px;
transform:scale(0);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
}
.scial:hover > span
{
transform:scale(1);
transition:0.5s linear;
-webkit-transform:scale(1);
-webkit-transition:0.5s linear;
-moz-transform:scale(1);
-moz-transition:0.5s linear;
-o-transform:scale(1);
-o-transition:0.5s linear;
-ms-transform:scale(1);
-ms-transition:0.5s linear;
}
.fbs
{
background:#5A5AFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkQTd8HNU6G3RzC9Kk2YGQ0ZBDLWHEUc1YHk-5uC9uL1axVl79Pcc98zqL2sEBnEiipOEWQiLCEyZ9S7hhvU1KtANiiJy4sKRAfIOykWEZlcdkHpi-VcJm2GL9hMqYIlOAceM37ftLlyQ/s1600/facebook.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.fbs:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #5A5Aff;
border:1px dashed rgba(0,0,0,1);
}
.gp
{
background:#FF4949 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBdk9pugnH4JBCURRhtRtK3D4__vR7gIAcbS_AXkmIu7YCc8qMDmnzWXrdQcmqWwQ9QaVWUc5XyyP-ltbWueOEHKmesu0zhDJ1uBdwMLuWwoQYkVwfWtYTrhslyVrvtldllInKDfWp75g/s1600/gplus.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.gp:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FF4949;
border:1px dashed rgba(0,0,0,1);
}
.tw
{
background:#00EBFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLpuqhrbRzYGjh14WnlnkdGejp9WF0TlmfavGhjeKUqOL780edCdS9JqUHcMA9JrMvEpehi5NPdmQSCtjEFJVxW43Jfs5Hu9q6AANtv-C2O2dELewmwhHz5qtcvvybF0OyEcljyRosqKE/s1600/twitter.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.tw:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #00EBFF;
border:1px dashed rgba(0,0,0,1);
}
.st
{
background:#FFB6B3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4p32MwvRLNTscF9NMr4B3ZjaVcegtXe1C2swOvNVS5049HkyjIGkI0SQ4BQrDStMfpn-C34JYGbJAIo6yyw6JYtFM7wayyGwN4PrSsNcJWYhFFYI-xk-QEjoSCS0w-eR3DodAn6GH7Ho/s1600/stumbleupon.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.st:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FFB6B3;
border:1px dashed rgba(0,0,0,1);
}

5. Klik Save

6. Kemudian Klik Tata Letak >>>> Klik Add Widget Klik >>> HTML/Javascript

7. Kopi Paste Kode HTML Dibawah ini :

<div class="scial fbs"><span><a href="http://www.facebook.com/sharer.php?u=http://joens-tutorial.blogspot.com/&t=6 Animation Sociall Share With CSS3" rel="external nofollow" target="_blank">Facebook</a></span></div>
<div class="scial tw"><span><a href="http://twitter.com/home/?status=Check this out: Animation Sociall Share With CSS3 http://joens-tutorial.blogspot.com/" target="_blank">Twitter</a></span></div>
<div class="scial gp"><span><a href="https://plus.google.com/share?url=en&url=http://joens-tutorial.blogspot.com/" target="_blank" title="Share On Google Plus !">Google+</a></span></div>
<div class="scial st"><span><a href="http://www.stumbleupon.com/submit?url=http://joens-tutorial.blogspot.com/&title=Animation Sociall Share With CSS3" rel="external nofollow" target="_blank">Stumbleupon</a>
</span></div>

8. Klik Save, dan lihat hasilnya.

Note :

Ganti Tulisan "http://joens-tutorial.blogspot.com/" Dengan alamat blog sobat.

Happy Blogging sobat, semoga artikel ini bisa bermanfaat, teimakasih atas kunjungannya.

Add Comment

Unknown CSS, Tutorial Blog

Tutorial Gratis

Iklan

Labels

Beautifful Vertikal Sossial Share

Membuat Kotak Gelap Terang Dengan CSS

Animation Sociall Share With CSS3

Popular Posts

Mengenai Saya

Label

Pengikut

Arsip Blog