Cara Membuat Speech Bubbles Di CSS3 Seperti Twitter Part-2

Pada sesi kali ini saya akan melanjutkan penjelasan tentang cara membuat speech bubbles di CSS3 seperti twitter part-2. Dan pada pejelasan di sini saya akan langsung lanjutkan dari sesi sebelumnya. Sampai di sini, teman-teman perlu untuk membuat panah kecil, dan dapat memodifikasi CSS tersebut untuk mengubah posisi / bentuk panah .

Berikut Kode nya :

.twitter:after {
	content:" ";
	position:absolute;
	top:180px;
	left:135px;
	border-top-color:#efefef;
	border:20px solid transparent;

}

.twtr-hd, .twtr-ft {display: none;}
.twtr-bd {font-family: arial;font-size:27px}
.twtr-tweet {width: 700px; padding: 10px 10px 0px}

Sekarang teman-teman sudah selesai dengan CSS nya ! sekarang teman-teman pindah ke bagian HTML yang agak pendek, berikut kode nya :

<div id="content">
<blockquote class="twitter">
 <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1, 
  interval: 30000, 
  width: 700,
  height: 100,
  theme: {
    shell: {
      background: 'none', 
      color: '#ffffff' 
    },
    tweets: {
      background: 'transparent',
      color: 'rgb(30,30,30)',
      links: 'rgb(140,140,140)'
    }
  },
  features: {
    scrollbar: false, 
    loop: false,
    live: false,
	avatars: false,
    behavior: 'all'
  }
}).render().setUser('User').start();
</script>
</blockquote>
</div>

Jadi untuk memodifikasi nya supaya ini bekerja, berikut beberapa hal yang perlu teman-teman diketahui:

– Teman-teman harus memperhatikan tinggi dan lebar di dekat bagian atas, dan akan lebih baik mengaturnya sesuai dengan ukuran yang akan di gunakan.

– Untuk mengubah warna tweets, teman-teman dapat memodifikasi (color: rgb (30,30,30); ), teman-teman tidak perlu menggunakan nilai rgb untuk ini, bisa menggunakan nilai hex seperti #00ee22 jika mau. Seperti contoh di bawah ini :

tweets: {
      background: 'transparent',
      color: '#00ee22',
      links: 'rgb(140,140,140)'
    }

}).render().setUser('Google').start();
}).render().setUser('Firefox').start();

Untuk kode akhirnya yang lengkap seperti kode di bawah ini :

<html>
<head>
<style type="text/css">
#content{
width: 700px;
height: 150px;
position:relative
}

.twitter {
	background:#efefef;
	padding:15px;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	width: 700px;
	height: 150px
}


.twitter:before {
	content:url(twitter.png);
	position:absolute;
	top:220px;
	left: 90px;
}

.twitter:after {
	content:"";
	position:absolute;
	top:180px;
	left:135px;
	border:20px solid transparent;
	border-top-color:#efefef;

}

.twtr-hd, .twtr-ft{display: none;}
.twtr-bd {font-family: arial;font-size:27px}
.twtr-tweet {width: 700px; padding: 10px 10px 0px}
</style>
</head>

<body>
<div id="content">
<blockquote class="twitter">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1,
  interval: 30000,
  width: 700,
  height: 100,
  theme: {
    shell: {
      background: 'none',
      color: 'transparent'
    },
    tweets: {
      background: 'transparent',
      color: 'rgb(30,30,30)',
      links: 'rgb(140,140,140)'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
	avatars: false,
    behavior: 'all'
  }
}).render().setUser('User').start();
</script>
</blockquote>
</div>
</body>
</html>

Sampai di sini penjelasan saya mengenai cara membuat speech bubbles di CSS3 seperti twitter, semoga bermanfaat.