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!

Posting Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top