Smart Touch merupakan Blogger template hasil konversi dari CSS template ke
blogger dengan tampilan elegant dengan warna biru yang menawan, template ini
seperti biasa sudah tertanam fitur SEO Friendy, auto bookmark dan Ads
Ready, jadi rekan gak kesulitan lagi mengatur semuanya karena sudah All in one
:)
Demo:
http://smarttouch-zoomtemplate.blogspot.com
Download:
http://www.zoomtemplate.com/2010/05/smart-touch.html
Web form Name : Nama yang kamu inginkan, atau biarkan saja (contoh : Kontak Kami, Contact Us, etc).
Recipients Emails : Alamat email yang akan menerima pesan.
Thank you page : Alamat halaman web/blog yang berisi ucapan terima kasih. Kalau kamu membuat seperti pada point pertama, maka kamu bisa memasukkan alamat postingannya disini.
Berisi form yang akan diisi oleh pengunjung blog untuk mengontak kita via email, terdiri dari : Your Name, Your Email Address, Subject, dan Message. Bisa kamu rubah atau biarkan sesuai dengan yang ada.
Selamat memasang "Kontak Kami" dengan widget EmailMeForm...
Dating theme atau love leter template terbaru hasil konversi om, dengan warna
ping dan love-love berhamburan, cocok buat yang lagi sedang jatuh cinta atau
blog yang menulis tentang kata-kata mutiara, so jadilah yang pertama mencobanya
hehehhehe
<div style="text-align: center;"><div class="button-spoiler"><input value="Contoh Penggunaan Spoiler" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }" type="button"/></div><div class="spoiler"><div style="display: none;">
<div style="text-align: left; padding: 10px; border: 3px inset #333; font-size: small;">
Silakan disimak dan dicermati :
<ul><li>Di sini kamu bisa memasukkan teks, kode, atau script</li>
<li>Kamu juga bisa memasukkan image</li>
<center><img border="0" alt="U Comments I Follow" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/follow2.jpg"/></center>
<li>Klik button "Tutup" untuk menghilangkan area ini</li></ul>
</div></div></div></div>
<button type="button">Tulis teks kamu di sini</button>
<button type="button" style="background:#000000; color:#FFFFFF; font:bold 20px Verdana, Geneva, sans-serif; margin:5px 0 5px 0; padding: 0 10px 0 10px;">Click Me!</button>
#buttonku {background:#000000;
color:#FFFFFF;
font:bold 20px Verdana, Geneva, sans-serif;
margin:5px 0 5px 0;
padding: 0 10px 0 10px; }
<button id="buttonku" type="button">Click Me!</button>
<button id="buttonku" type="button">Click Me too!</button>
<button id="buttonku" type="button">Click Me too..too!</button>
... dst
<a href="...alamat yang dituju..." target="blank"><button type="button">Tulis teks kamu di sini</button></a>
<a href="http://optimasi-blog.blogspot.com/"><button type="button">Optimasi Blog</button></a>
<a href="http://www.w3schools.com/" target="blank"><button type="button">W3Schools</button></a>
Kamu pun bisa mencoba untuk mengobrak-abrik kode lainnya, sehingga tampilan "button" tersebut berkesesuaian dengan apa yang kamu inginkan. Akhirnya, Selamat ber-"button" ria...
Today's News Blogger Template
Today's News Blogger Template merupakan hasil konversi Wordpress ke Blogger
yang baru saja saya buat tadi malam, Hadir dengankonsep desain nan elegan
dan cool abis ini bisa membuat rekan sobat iri hehehehe. Template Ini sangat
cocok buat blog atau situs dengan konsep berita. Ok jadilah orang pertama
yang mencobanya :)
Features:
Diadema Blogger Template
Hampir Sama dengan Today's News, template Diadema hadir dengan konsep yang
sangat menawan dengan desain yang mengagumkan. kalau rekan pecinta Fashion
template ini jangan sampai dilewatkan :)
Features:
Bagi kamu yang perduli dengan validasi terhadap blog kamu, saya rasa cara ini pantas diterapkan di blog blogspot kamu, karena engine blogspot terlalu banyak kode-kode validasi yang error.<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>
atau Link Quick Edit gambar kunci pas link 
di blog Anda, walaupun Anda sedang dalam keadaan login.Merancang desain fresh dan terbaru pada template bisa om katakan sangat sulit,
ini bukan karena masalah pengkodean CSS dan XML yang ribet, tapi memang
merancang sesuatu yang baru dan segar dari segi desain dan pemilihan warna untuk
template blog itu sendiri yang bikin pusing. Dari pada pusing tujuh keliling
mendingan melakukan konversi dari template platform lain yang sudah jelas
desainnya, selain lebih mudah tentu resiko kejelekannya bisa diantisipasi hehehe
Oh iya, judul diatas bukan ngajarin caranya ya, disini om cuman nginformasiin
kalau dua hari ini om lagi senang-senangnya melakukan konversi wordpress ke
blogger template, dan ini ada 2 yang sudah om buat jadi silahkan di download :)
MysticGrunge Blogger template
Blogger template terbaru hasil konversi Wp ke blogger buatan om, theme dengan
nama "Mystic Grunge" ini Elegant banget dan cocok sekali buat
Blogger Misterius hehehe, jangan lupa di-Vote dan di-Comment ya.
Demo http://mysticgrunge-zoomtemplate.blogspot.com
Download
http://www.zoomtemplate.com/2010/05/mysticgrunge.html
KikiBerry Blogger template
"KikiBerry Blogger template" terbaru hasil konversi dari WP ke Blogger buatan
om, pokonya ini template elegant abis dan simple, cocok banget buat blogger
cewek :D silahkan di download ya, jangan lupa kasih Vote
Demo
http://kikiberry-zoomtemplate.blogspot.com
Download
http://www.zoomtemplate.com/2010/05/kikiberry.html
OK, ditunggu ya konversi lainnya :)
Mungkin sudah banyak oran-orang yang mengetahui trick ini, sampai-sampai orang
yang akan membacanya-pun enggan membaca Artikel tersebut, tapi, yang mereka
ajarkan adalah menggunakan
dnspark.net yang ada masa expired atau massa berlakunya, meskipun suangat
lama, tapi, sewaktu-waktu kita pastinya akan merasa tidak nyaman bukan?
Nah, disini saya ingin memperlihatkan kepada anda bagaimana caranya membuat
Sub-Domain langsung didalam Co.cc secara realive, gak percaya ? Simak Gan (
KasKus langue mode : On)
1. Masuk kedalam co.cc dengan Account anda masing-masing di
https://www.co.cc/log_in_out/login.php
2. Setelah itu, anda akan disuguhkan dengan sebuah Form yang berisikan 4
alamat domain yang sudah anda buat ( Apabila anda berhasil Login ).
3. Pilih domain yang akan anda jadikan Sub-Domain, disini dan didalam contoh
ini, saya akan memakai proxyesterday.co.cc
4. Klik Setup
5. Setelah itu, anda akan disuguhkan Form Setup
6. Klik zone record
7. Didalam Host, isikan apa yang ingin anda jadikan Sub domainnya, misalkan
oom
8. Dan otomatis, domain yang akan keluar adalah
oom.aktifiskaskus.co.cc
9. Didalam Value, isikan ghs.google.com
10. Klik Setup
11. Berhasil !!!!!
Lalu, apa yang harus kita lakukan selanjutnya?
Setup Sub-Domain didalam
Platform kita sendiri, disini saya menggunakan blogspot.com
1. Login kedalam Account Platform anda ( Didalam contoh ini saya menggunakan
Blogspot )
2. Setelah berhasil, masuk kedalam menu Pengaturan → Publikasikan dan
disana yang harus anda pilih adalah Domain Ubah Suaian
3. Kemudian pilih Beralih ke pengaturan lanjut
4. Masukkan Sub Domain yang sudah anda masukkan dan Setup tadi, yaitu
oom.aktifiskaskus.co.cc
5. Masukkan Capcay ( Verifikasi Kata )
6. Klik Simpan Setelan
7. Berhasil !!!!!!!
8. Kemudian klik Lihat Blog
Selamat, Sub-Domain
oom.aktifiskaskus.co.cc berhasil dibuat !
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://i49.tinypic.com/121abrq.jpg);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>
</div>
<data:post.body/><br /><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/small.js" language="JavaScript"></script>
<data:post.body/><br /><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/medium.js" language="JavaScript"></script>
<data:post.body/><br /><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/large.js" language="JavaScript"></script>
Tentu blog kita mempunyai postingan bukan? Apakah isi dari postingan itu?
Apakah hanya sekedar curhat dan cerita mengenai kehidupan kita, atau berupa ilmu
pengetahuan? Yang pasti banyak blogger yang mengisi blognya dengan artikel.
Artikel dapat berupa guide maupun penjelasan terhadap suatu hal. Artikel
merupakan hal yang sangat penting dalam blog karena artikel adalah salah satu
kunci keberhasilan blog kita. Kadangkala, kita dapat dibuat pusing dalam mencari
ide untuk membuat artikel. Dalam membuat artikel, kita harus mencari ide-ide
yang fresh agar pengunjung tidak bosan.
Banyak sekali sumber-sumber ide yang mungkin belum tereksplorasi. Dan beberapa
sumber ide itu kadangkala muncul di depan mata kita, tapi kita tidak
menyadarinya. Beberapa orang berpikir keras untuk mencari ide, padahal
sebenarnya apabila ia peka, maka ia bisa mendapatkan ide dengan mudah. Berikut
adalah contoh-contoh dari beberapa sumber ide untuk artikel blog kita:
1. Google Trends
Google Trends dapat digunakan untuk mencari topic-topik apa saja yang sedang
hangat dibicarakan, dan apabila kita cepat dalam mengambil topic tersebut, bukan
tidak mungkin kita bisa menjadi yang nomor satu di Google dalam waktu singkat.
2. Forum
Jadilah aktif di forum dan anda akan menemukan thread yang berisi pertanyaan,
kemudian anda bisa membantu mencari jawabannya dan mempostingnya di blog anda,
selanjutnya tinggal arahkan pengunjung forum ke blog anda.
3. Komentar pada blog anda sendiri
Saya pernah mengalami ini, suatu ketika ada pengunjung yang bertanya sesuatu
kepada saya, dan untuk menjawabnya, saya membuat artikel kemudian mempostingnya
dan memberitahu si pemberi komentar bahwa saya telah menjawab pertanyaannya.
4. Situs berita
Anda bisa mencari berita yang tengah hangat kemudian menulis ulang dan
mempublikasikannya kepada para pembaca anda. Sebaiknya cari topic yang sesuai
dengan niche blog anda.
5. Direktori artikel
Di sinilah gudangnya informasi dan pengetahuan. Cobalah iseng-iseng untuk
membuka salah satu situs ini dan mencari artikel yang sedang dipajang di halaman
utama, atau anda bisa mencari artikel yang anda gemari, contoh : Hobi Memancing.
Dari situ anda bisa tahu topic apa yang sedang hangat dibicarakan atau apa yang
sedang menjadi diskusi para pemancing.
Anda juga bisa mendaftar di
ReadBud untuk
mendapatkan artikel-artikel berkualitas yang bisa anda jadikan sumber ide
sekaligus menghasilkan dollar. Setiap anda membaca artikel dan member rating
yang JUJUR, anda akan mendapatkan beberapa sen yang setiap harinya anda bisa
menghasilkan lebih dari $1.
Nah, sekian beberapa contoh sumber ide dari saya, apabila anda tertarik dengan
artikel-artikel saya, silakan tunggu guest post selanjutnya di
blog ini.
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2Foptimasi-blog.blogspot.com&num=5" type="text/javascript"></script>
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http://optimasi-blog.blogspot.com&num=5" type="text/javascript"></script>
Sekarang coba lihat tampilan blog kamu udah nongol atau belum top postingnya dan selanjutnya selamat utak-atik top posting dech.
<script src='http://komenbalas.googlecode.com/files/commentreply%282%29.js' type='text/javascript'/>
.comment-segment {margin-top: 10px;margin-right: 10px;}
.comment-level-0 {margin-left: 10px;}
.comment-level-1 {margin-left: 25px;}
.comment-level-2 {margin-left: 40px;}
.comment-level-3 {margin-left: 55px;}
.comment-level-gt3 {margin-left: 70px;}
.blog-author-comment {background-color: #DFE6EF;border: 1px solid #7296E2;}
.blog-nonauthor-comment {background-color: #ffffff;border: 1px solid #000000;}
.deleted-comment {color: gray; font-STYLE: italic}
.delete-comment-icon {background: url("http://www.blogblog.com/rounders3/icon_delete13.gif") no-repeat;}
.comment-time {font-size: 80%;margin: inherit;padding-left: 10px;padding-bottom:10px;}
.reply-guide {background-color: #FFFFFF;border: #076a93 1px dotted;display: none;
padding-right: 10px;padding-left: 10px;padding-bottom: 0.75em;padding-top: 5px;margin-right: 10px;margin-bottom: 10px;}
.reply-guide-header {color: #076a93;padding-top: 10px;}
.reply-guide-list {list-style: none;padding-left: 2px;margin-left: 2px;}
.reply-guide-example {font-size: 85%;margin-right: 5px;margin-bottom: 10px;float: right;border: 1px dotted #076a93;padding: 5 5 5 5;}
.trackback { padding:9px 0 0 26px; margin:10px 0 0 0; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJwPqRrmGdfNa05zIU9sKQGtjhoFXJd7BFa6dfCSTZ4JhR17jrQ0_wskWZVbq94GgXO_jetx8tMoIgrJIWYiffgEz6MPND8aae-nQIUxaVEw8AnpfLkmP-Rt6FnfGP-iouMzQltlNeuDk/?imgmax=800) no-repeat left; color:#000;}
<b:includable id='comments' var='post'><div class='comments' id='comments'>
...
</div>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>:
<b:else/><data:post.numComments/><data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.numComments > 0'>
<!-- Include a post comment link before rendering the comments -->
</b:if>
<!-- Loop through the comments adding the comment bodies in a hidden div -->
<b:loop values='data:post.comments' var='comment'>
<div expr:id='"comment-body-" + data:comment.id' style='display: none;'>
<data:comment.body/>
</div>
</b:loop>
<!-- Now create the comment using our javascript -->
<script type='text/javascript'>
// Use this if you have just one author like this blog :)
var BLOG_AUTHOR = 'http://www.blogger.com/profile/YOURBLOGID';
var BLOG_POST_COMMENT_LINK = '<data:post.addCommentUrl/>';
var eCommentDelete = false;
var eAuthorUrl = '';
<b:loop values='data:post.comments' var='comment'>
eCommentDelete = false;
eAuthorUrl = '';
<b:if cond='data:comment.authorUrl'>
eAuthorUrl = "<data:comment.authorUrl/>";
</b:if>
<b:if cond='data:comment.isDeleted'>
eCommentDelete = true;
</b:if>
buildComment("<data:comment.author/>", eAuthorUrl,
"<data:comment.id/>", "<data:comment.timestamp/>", eCommentDelete,
"<data:comment.deleteUrl/>", "<data:top.deleteCommentMsg/>",
document.getElementById('comment-body-<data:comment.id/>').innerHTML);
</b:loop>
// <![CDATA[
var eCommentTemplate = '' +
'<div class="comment-segment comment-level-${COMMENT.LEVEL} ${BLOG.AUTHOR} ${COMMENT.DELETED.STYLE}" >' + 'n' +
' <a name="comment-${COMMENT.ID}"></a>' + 'n' +
' <span style="float: right; margin-right: 5px; " >' + 'n' +
' <a href="#" ' + 'n' +
' onclick="toggleElementDisplays(this, ' +
'['comment-${COMMENT.ID}-body', 'comment-${COMMENT.ID}-footer', 'reply-guide-${COMMENT.ID}'], ' +
'['both', 'both', 'hide']); return false;" >[hide]</a>' + 'n' +
' </span>' + 'n' +
' <span class="comment-author" >' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'<a href="${COMMENT.AUTHOR.URL}" rel="nofollow">' +
'${COMMENT.AUTHOR.URL.EXISTS.END}' +
'${COMMENT.AUTHOR.NAME}' +
'${COMMENT.AUTHOR.URL.EXISTS.START}' +
'</a>' +
'${COMMENT.AUTHOR.URL.EXISTS.END}</span>' + 'n' +
' mengatakan... ' + 'n' +
' <span class="comment-time">on ${COMMENT.TIMESTAMP}</span>' + 'n' +
' <div id="comment-${COMMENT.ID}-body" class="comment-body" ><p>${COMMENT.BODY}</p></div>' + 'n' +
' <div id="reply-guide-${COMMENT.ID}" class="reply-guide comment-level-0 " >' + 'n' +
' <span style="float: right;" ><a href="#" onclick="hideElement('reply-guide-${COMMENT.ID}'); return false;" >[hide]</a></span>' + 'n' +
' <p class="reply-guide-header">Id Komentar ini : ${COMMENT.ID}</p>' + 'n' +
' </div>' + 'n' +
' <div id="comment-${COMMENT.ID}-footer" class="comment-footer">' + 'n' +
' <span><a ' +
'href="#" onclick="showElement('reply-guide-${COMMENT.ID}'); return false;" >Lihat Id Komentar</a></span> ' + 'n' +
' <span><a href="${COMMENT.DELETE.URL}" title="${COMMENT.DELETE.TEXT}" style="text-decoration: none;" >Hapus</span></a></span>' + 'n' +
' </div>' + 'n' +
'</div>' + 'n';
applyCommentTemplate(eCommentTemplate);
// ]]>
</script>
<p class='comment-footer'>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</p>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
<data:commentPostedByMsg/>
<span class="comment-reply"><a expr:href=""https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"" href="" onclick="javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;">[Reply to comment]</a></span>
Kotak komentar adalah sarana diskusi yang paling efektif. Atau paling tidak,
kotak komentar adalah salah satu tempat untuk sekedar saling sapa dan
berinteraksi. Karena pada engine blogger tidak terdapat fasilitas untuk reply
comment, kegiatan bertegur-sapa biasanya dilakukan dengan meniru Facebook atau
Twitter. Yaitu dengan menambahkan simbol “At”(@) pada awal nama. Misalnya saya
ingin membalas komentar o-om, maka saya menambahkan @oomdotcom
pada awal kalimat. Sebagai tanda bahwa tanggapan tersebut saya tujukan untuk o-om.
Kita dapat menambahkan interaktivitas kotak komentar dengan menggunakan plugn
Twitter @Anywhere. Dimana setiap kata yang diawali dengan simbol “At”(@) dapat
diconvert secara otomatis menjadi link yang menuju akun twitter yang dituju.
Sangat menarik bukan, karena dapat menambah suasana kotak komentar menjadi lebih
hidup dan interaktif.
Untuk lebih jelas, dapat dilihat pada demo page
disini.
Berikut ini adalah langkah-langkah installasi Twitter @Anywhere:
1. Masuk di @Anywhere
2. Daftarkan Aplikasi
Isikan segala informasi yang dibutuhkan. (Hal ini sangat mudah dan tidak
perlu penjelasan lebih)
3. Dapatkan API key.
4. Installasi
Setelah mengetahui API key, hal yang perlu dilakukan adalah dengan menambahkan
JavaScript berikut ini sebelum </head>
<script src="http://platform.twitter.com/anywhere.js?id=APIKey"
type="text/javascript"></script>
Gantilah APIKey dengan API
Key anda.
Beberapa fitur yang dapat digunakan adalah:
a. LinkifyUser
Script akan mengubah semua konten yang diawali dengan “at” simbol menjadi
link akun twitter.
b. Hovercards
Membuat link memunculkan tooltip yang berisi informasi tentang akun twitter.
Untuk melakukannya letakkan javascript berikut ini:
<script>
twttr.anywhere(function(twitter) {
twitter(".comment-body").linkifyUsers();
twitter.hovercards();
});
</script>
Ganti huruf yang berwarna merah dengan class yang sesuai. Jika anda menggunakan
Basic Minima, maka kotak komentar memiliki class .comment-body. Jika tidak yakin
dan anda menginginkan semua konten dalam body diconvert menjadi link maka
gantilah dengan body.
5. Kesimpulan
Cara ini sangat mudah dilakukan dan cukup efektif untk menambah
interaktivitas pada kotak komentar. Tetapi yang perlu diperhatikan adalah, jika
kita menuliskan username yang salah maka link yang dihasilkan menjadi tidak
relevan. Misalnya saya menuliskan @oomdotcom yang
menghasilkan link menuju http://twitter.com/oomdotcom.
Tetapi jika saya menuliskan @o-om, maka link yang dihasilkan adalah
http://twitter.com/o-om yang berarti salah sasaran.
Selain kedua fitur di atas, terdapat jga fitur-fitur seperti
Untuk lebih jelasnya tentang cara penggunaannya dapat mengunjungi:
http://net.tutsplus.com
Profile Penulis:
ArdianZzZ adalah Seorang blogger biasa tetapi bukan blogger yang biasa-biasa saja. Sangat antusias dengan webdesain terutama pada Typography, CSS dan JavaScript.
