Widget Profil Twitter Keren Part 2

Sebelumnya blog Oto Website pernah membahas tentang Widget Profil Twitter Keren Part 1, dan kali ini blog Oto Website akan share tentang widget yang sama dengan versi berbeda ya itu Widget Profil Twitter Keren Part 2. Fungsinya juga sama dengan part 1 ya itu untuk menampilkan tweet kita di widget tersebut. Untuk contohnya Widget Profil Twitter Keren Part 2 sobat bisa lihat gambar di bawah ini.

Contoh Widget Profil Twitter Keren Part 2

Okelah kalo begitu sekarang mari kita bahas cara memasangnya :

1. Login ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget (di bagian mana saja sobat ingin menampilkan widget ini)

3. Lalu sobat pilih HTML/Java Scrip ➨ Setelah itu copy kode berikut dan paste atau letakkan di dalamnya!

<div id="twitter-ticker"><div id="top-bar"><div id="twitIcon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXLPd1zjrVV6m2Z2sso6i65Y12x0Qv22JsW4AJPlkYyZW0LbcM449OCw6uoIgNFagB0QH-8j5ZEPM7OmCtn43bfQSw92yUTX2wWGrPgMrhzRFaQ32eTme7vjdDN0aZl7ExgecfjLd7uY/s1600/otowebsite.blogspot.com-twitter.png" width="64" height="64" alt="Twitter icon" /></div><h2 class="tut">My Tweets</h2></div><div id="tweet-container"><img id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh38eO_j0tzYE6wM7whJmrzw8GAyghyphenhyphenx1H9_HdBxSlSWcwwV0LzQTdKcCN4FmvmzNYnP7XZM0ggsKhtcVvlXU75xzueNzrBdAccPlTMG6yEvPqSUhRYrZUWqEOWJeDG9e0Q49bckw6YOkM/s1600/otowebsite.blogspot.com-loading.gif" width="16" height="11" alt="Loading.." /></div><div id="scroll"></div></div><style>/* CSS Document */h2.tut{/* This is the "MY TWEETS" title */    color: white;font-family: "Myriad Pro", Arial, Helvetica, sans-serif;font-size: 16px;padding: 12px 0 0 58px;text-transform: uppercase;/* The CSS3 text-shadow property */    text-shadow: 2px 1px 6px #333;}#twitter-ticker{/* Styling the ticker */    width: 300px;height: 300px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xM7ktwv0JGYRB9_ieqlMnF7w_nzmomnWgENtwPsCXX1pnI5UKr2eOUrRSPlIvCWCczsjBPsaJ7mmo1BdaWdWQqmFz7W5amXrUsqK1ZKXOjTDef9wUtzLYqQjVlQA2lRdHsyKmTAZZXo/s1600/otowebsite.blogspot.com-slickbg.png) no-repeat #f5f5f5;color: #666666;display: none;/* Rounded corners */    -moz-border-radius: 10px 10px 6px 6px;-khtml-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;text-align: left;}#tweet-container{/* This is where the tweets are inserted */    height: 230px;width: auto;overflow: hidden;}#twitIcon{/* Positioning the icon holder absolutely and moving it to the upper-left */    position: absolute;top: -25px;left: -10px;width: 64px;height: 64px;}#top-bar{height: 45px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhilTshK_sMy3brZsoMB03nHgDTy9jVNCemE0TNawP1VyQ1V_lCcQAUUlbHD5vS2R3fAodpc9XkRAznaCmK3zuS5oYKcjCa-xinqd-n979f-W51dhqGecx54QwD2MihQY_g2-enYo06UBQ/s1600/otowebsite.blogspot.com-top_bar.png) repeat-x;border-bottom: 1px solid white;position: relative;margin-bottom: 8px;/* Rounding the top part of the ticker, works only in Firefox unfortunately */    -moz-border-radius: 6px 6px 0 0;}.tweet{/* Affects the tweets */    padding: 5px;margin: 0 8px 8px;font-family: calibri;border: 1px solid #F0F0F0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKSzIxpZ5KKZ2AR7j3e8WHztsk-i5pJS0rMp5nFWAH8oYBurXvbsgUJ5rxGuHbH6d_n9LtbagVnjfP4ywlylUcfookYgHbzC4-TQOk_lU35Jd1Yex7YeyAgYhp6cQaPm48rYUfVWqipgs/s1600/otowebsite.blogspot.com-transparent.png);width: auto;overflow: hidden;}.tweet .avatar, .tweet .user, .tweet .time{float: left;}.tweet .time{text-transform: uppercase;font-size: 10px;color: #AAAAAA;white-space: nowrap;}.tweet .avatar img{width: 36px;height: 36px;border: 2px solid #eeeeee;margin: 0 5px 5px 0;}.tweet .txt{/* Using the text container to clear the floats */    clear: both;}.tweet .user{font-weight: bold;}a, a:visited{/* Styling the links */    color: #00BBFF;text-decoration: none;outline: none;}a:hover{text-decoration: underline;}#loading{/* The loading gif animation */    margin: 100px 95px;}.jScrollPaneContainer{position: relative;overflow: hidden;z-index: 1;}.jScrollPaneTrack{position: absolute;cursor: pointer;right: 4px;top: 0;height: 100%;background: #ddd;}.jScrollPaneDrag{position: absolute;background: #999;cursor: pointer;overflow: hidden;}.jScrollPaneDragTop{position: absolute;top: 0;left: 0;overflow: hidden;}.jScrollPaneDragBottom{position: absolute;bottom: 0;left: 0;overflow: hidden;}a.jScrollArrowUp{display: block;position: absolute;z-index: 1;top: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowUp:hover{/*background-color: #f60;*/}a.jScrollArrowDown{display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden;/*background-color: #666;*/    height: 9px;}a.jScrollArrowDown:hover{/*background-color: #f60;*/}a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{/*background-color: #f00;*/}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery.mousewheel.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/jScrollPane-1.2.3.min.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/ticker-script.js"></script><script type="text/javascript">var tweetUsers=['otowebsite'];</script>

4. Simpan.

Keterangan :
Ganti teks warna merah otowebsite dengan usernmae twitter sobat.

Selesai !

Nah sekian dulu untuk postingan/article Widget Profil Twitter Keren Part 2, semoga bisa bermanfaat untuk sobat semua.

Bagaiman apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan komentar/tanggapan sobat tentang postingan/articles di atas!