tag:blogger.com,1999:blog-30366160296748355932024-03-05T00:35:12.945-08:00This Is My ArtArga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.comBlogger99125tag:blogger.com,1999:blog-3036616029674835593.post-46964276565765400202011-03-19T01:09:00.000-07:002011-03-19T01:10:26.168-07:00Cara Memindahkan Gambar Dengan jQuery<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJAN_ZqQn8oyBBCASayuGjvpHlQU-IDjG2tcezxZcBg4LLT-h6ZciyRlqll_ZQJQub8nb2HkI27F_hG3WWjXiKew7K4ne-QWW8XVjfwUJ_rA2tS81-1Xj273NdtMS8CzRKbHRCIKVrxW0/s1600/jquery-logo.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJAN_ZqQn8oyBBCASayuGjvpHlQU-IDjG2tcezxZcBg4LLT-h6ZciyRlqll_ZQJQub8nb2HkI27F_hG3WWjXiKew7K4ne-QWW8XVjfwUJ_rA2tS81-1Xj273NdtMS8CzRKbHRCIKVrxW0/s1600/jquery-logo.jpg" /></a></div>Sesuai dengan judul diatas kali ini kita belajar mengenai beragam effect <a href="http://nobinoku.blogspot.com/search/label/jQuery">jQuery</a> salah satunya ialah <a href="http://nobinoku.blogspot.com/2011/03/cara-memindahkan-gambar-dengan-jquery.html">memindahkan gambar dengan jQuery</a> atau yang lebih populer disebut <a href="http://nobinoku.blogspot.com/2011/03/cara-memindahkan-gambar-dengan-jquery.html">Draggable Image With jQuery</a> yang saya peroleh dari blog <a href="http://www.z33s.co.cc/">z33s</a>. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar sesuai dengan keinginan kita pada gambar posting kita atau gambar di blog kita. Untuk lebih jelasnya klik tombol demo dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://demoblogqu.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"><img src="http://i1199.photobucket.com/albums/aa462/nibinoku/Nobinoku%20album%20menu/th_demonobi.png" /></a></div><div style="color: #b45f06;"><b><br />
</b></div><div style="color: #b45f06;"><b>Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini:</b></div><br />
1.log in dulu ke account blog sobat.<br />
2.Pada dasbor pilih rancangan kemudian Edit HTML<br />
3.Sekarang pasang Css kode dibawah ini diatas kode <span style="color: #0b5394;">]]></b:skin></span><br />
<blockquote>.drag_gambar img { cursor: move;}</blockquote>4. selanjutnya simpan script berikut diatas kode <span style="color: #0b5394;"></head></span><br />
<blockquote><div style="color: #bf9000;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/></div><div style="color: #bf9000;"><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/></div><div style="color: #cc0000;"><script type='text/javascript'></div><div style="color: #cc0000;">$(document).ready(function() {</div><div style="color: #cc0000;">$(&quot;div.drag_gambar img&quot;).draggable();</div><div style="color: #cc0000;">});</div><div style="color: #cc0000;"></script></div></blockquote><div class="hint"><b>Keterangan</b> : Perhatikan kode script berwarna <span style="color: #bf9000;">Kuning</span> diatas, jikan pada template kalian sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna <span style="color: #cc0000;">merah</span> nya.</div><br />
5.Klik Simpan Template<br />
6.Untuk penggunaannya pada gambar, kalian bisa menggunakan kode berikut :<br />
<blockquote><div class='drag_gambar'><img alt='<span style="color: #b45f06;">KETERANGAN GAMBAR</span>' src=<span style="color: #0b5394;">'URL GAMBAR</span>'/></div></blockquote><div style="color: #351c75; text-align: center;"><br />
</div><div style="color: #351c75; text-align: center;"><span style="font-size: large;">Semoga bermanfaat dan selamat mencoba...</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com17tag:blogger.com,1999:blog-3036616029674835593.post-47612426633349361102011-02-27T22:52:00.000-08:002011-02-27T22:52:13.476-08:00Membuat Kotak Berlangganan Email Feed Burner Untuk BloggerCara membuat kotak berlangganan email Feed Burner untuk blogger itulah topik yang kita bahas kali ini. Salah satu kegunaan atau fungsi dari Kotak Berlanggan Email ini adalah agar dapat memudahkan pengunjung untuk mendapat update terbaru dari blog yang kita miliki yang dikirimkan langsung lewat email sobat, tentunya dengan kita berlangganan terlebih dahulu pada feedburner blog atau situs. Untuk contoh dari kotak berlangganan Email ini silahkan lihat pada gambar dibawah ini. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXKCKTivVJhQ2I3ki4NBp3jTdZB1S62NcuEcIL0EgH7Xnweltt8s8-sVDybjzTsJYi_SkRIYt9nnkXSxGOpeKq2LflRXnDnDaVt_UbDnizI7dvNtjpC0NxTD6bG2xJtJLS-lJPqZziILUs/s1600/feedburner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXKCKTivVJhQ2I3ki4NBp3jTdZB1S62NcuEcIL0EgH7Xnweltt8s8-sVDybjzTsJYi_SkRIYt9nnkXSxGOpeKq2LflRXnDnDaVt_UbDnizI7dvNtjpC0NxTD6bG2xJtJLS-lJPqZziILUs/s320/feedburner.png" width="320" /></a></div><br />
Selain itu dengan semakin banyaknya orang yang telah berlangganan email feed burner kita tentunya akan semakin banyak pengunjung tetap pada blog yang kita miliki. Adapun <b>Membuat Kotak Berlangganan Email Feed Burner Untuk Blogger</b> adalah sebagai berikut:<br />
<br />
1.Seperti biasa log in dulu ke account blog sobat<br />
2.Pada dasbor klik Rancangan kemudian pilih <b>Edit HTML.</b><br />
3. Cari kode berikut ini </head> <br />
4. Letakkan kode di bawah ini sebelum kode tersebut :<br />
<blockquote><style type='text/css'><br />
#hsection{border:1px solid #D3D3D3;background-color:#FFFFFF;}<br />
#hsection:hover{border:1px solid #BABABA;background-color:#F8E0E0;}<br />
#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;<br />
font-weight:bold; }<br />
#sectionmy .sectionmy2 h2.rss { background:url(http://i1183.photobucket.com/albums/x475/nobinoku/Upload%20Blog/RSS-1.png) no-repeat top left; }<br />
#sectionmy .sectionmy2 h2.email { background:url(http://i1183.photobucket.com/albums/x475/nobinoku/Upload%20Blog/th_Mail_Read.png) no-repeat top left; }<br />
#sectionmy .sectionmy2 h2.twitter { background:url(http://i1183.photobucket.com/albums/x475/nobinoku/Upload%20Blog/Twitter-1.png) no-repeat top left; }<br />
#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }<br />
</style></blockquote>5.Simpan Template.<br />
6.Selanjutnya pada Rancangan pilih Elemen Laman Kemudian pilih <b>Add gadget</b> pilih <b>HTML/Javascript.</b><br />
7.Copy kode dibawah ini kemudian masukkan paste kedalamnya.<br />
<blockquote><div id="hsection"><br />
<div id="sectionmy"><br />
<div class="sectionmy2"><br />
<br />
<h2 class="subscription rss"><a href="<span style="color: #b45f06;">YOUR-RSS-FEED-URL</span>">SUBSCRIBE VIA RSS</a></h2><br />
<br />
<h2 class="subscription email"><a href="<span style="color: #990000;">YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL</span>">SUBSCRIBE VIA EMAIL</a></h2><br />
<br />
<h2 class="subscription twitter"><a href="<span style="color: #351c75;">YOUR-TWITTER-URL</span>">FOLLOW ON TWITTER</a></h2><br />
<br />
</div></div><br />
</div></blockquote>8.Langkah terakhir Simpan Template<br />
<br />
<div class="hint"><b>Keterangan</b> : Ganti tulisan yang berwarna <b><span style="color: #b45f06;">Orange</span></b> dengan <b><span style="color: #b45f06;">Url Feed Anda</span></b>,yang warna <b><span style="color: #990000;">Merah</span></b> ganti dengan <b style="color: #990000;">Url Feedburner Email Subscription anda</b>,lalu yang berwarna <b><span style="color: #351c75;">Ungu</span></b> dengan <b><span style="color: #351c75;">URL Twitter anda</span></b>,,selamat mencoba semoga berhasil Jangan lupa cantumkan comment anda.</div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com27tag:blogger.com,1999:blog-3036616029674835593.post-86604068704195219602011-02-27T04:52:00.000-08:002011-03-02T04:29:21.194-08:00Membuat Related Post Bergambar Dan Bergerak.Bagi sobat yang sudah mencoba <a href="http://nobinoku.blogspot.com/2011/02/membuat-related-post-bergambar-atau.html">related post bergambar Atau Thumbnail</a> tentu akan lebih tertarik lagi menggunakannya, karena tampilannya yang cukup menarik dengan adanya gambar (thumbnail) Sebagai Backroundnya. Kekurangan dari related post bergambar ini adalah related post ini terlalu memakan tempat pada halaman blog sobat. Sehingga kita tidak dapat menampilkan jumlah artikel secara maksimal. Nah ada salah satu cara untuk memaksimalkan related post ini ialah dengan alternatif marquee atau berjalan <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjcfh5OMetEjGUmnEGY33bfjb4UNEEZ6hoTBKYM0jS4Jqaecv780AyUAFKoX9nmEde6Cn_aAo_sEaKEASwA2ynXZgqyQetbnvUtsdNjy9H0KZa8dG8p5V9ZdiGmkptnykPWAz16Oc9XUi/s1600/related-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjcfh5OMetEjGUmnEGY33bfjb4UNEEZ6hoTBKYM0jS4Jqaecv780AyUAFKoX9nmEde6Cn_aAo_sEaKEASwA2ynXZgqyQetbnvUtsdNjy9H0KZa8dG8p5V9ZdiGmkptnykPWAz16Oc9XUi/s1600/related-posts.png" /></a></div><br />
<br />
Keuntungan dari trik ini adalah sobat dapat menampilkan artikel blog sobat dengan jumlah banyak tanpa memakan tempat pada halaman blog yaitu dengan marquee atau berjalan.untuk demonya klik tombol demo dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://demoblogqu99.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"><img src="http://i1199.photobucket.com/albums/aa462/nibinoku/Nobinoku%20album%20menu/th_demonobi.png" /></a></div><br />
<div style="color: #b45f06;"><b>Untuk membuatnya ikuti saja langkah-langkah berikut ini.</b></div><br />
1.Silakan lihat cara membuat Thumbnail related posts <b style="color: red;"><a href="http://nobinoku.blogspot.com/2011/02/membuat-related-post-bergambar-atau.html">disini</a></b> <span style="color: #0b5394;">(Cukup terapkan code </span><span style="color: #0b5394;">CSS</span><span style="color: #0b5394;">nya saja/ code yang pertama)</span><br />
2.Setelah sobat menerapkan kode CSS yang pertama,silahkan cari kode berikut ini:<br />
<blockquote><div class='post-footer-line post-footer-line-1'></blockquote>Atau<br />
<blockquote><p class='post-footer-line post-footer-line-1'></blockquote>3. Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah salah satu code diatas.<br />
<blockquote><!-- Marquee Nobi Related Posts with Thumbnails Code Start--><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div id='related-posts'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast != &quot;true&quot;'><br />
</b:if><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop><br />
<h3><b><span style="color: #990000;">Related Posts</span></b></h3><br />
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'><br />
<script type='text/javascript'><br />
var currentposturl=&quot;<data:post.url/>&quot;;<br />
var maxresults=<span style="color: #990000;">10</span>;<br />
var relatedpoststitle=&quot;&quot;;<br />
removeRelatedDuplicates_thumbs();<br />
printRelatedLabels_thumbs();<br />
</script></marquee><br />
</div><div style='clear:both'/><br />
</b:if><br />
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br />
</b:if><br />
</b:if><br />
<!-- Marquee Nobi Related Posts with Thumbnails Code End--></blockquote>4. Langkah terakhir Simpan Template kemudian lihat hasilnya.<br />
<br />
<div class="hint"><b>Keterangan</b> : kode yang berwarna <span style="color: #990000;">merah</span> dapat diganti sesuai dengan yang sobat inginkan, Angka <span style="color: #990000;">10 </span>menunjukkan jumlah artikel yang tampil pada related post, <span style="color: #990000;">Related Posts</span> (Silahkan ganti judul yang sobat inginkan).</div><br />
Semoga artikel kali ini bermanfaat bagi sobat jangan lupa baca juga artikel-artikel menarik lainnyaArga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com26tag:blogger.com,1999:blog-3036616029674835593.post-30258017198856592732011-02-27T04:42:00.000-08:002011-03-02T04:28:58.282-08:00Membuat Related Post Bergambar Atau ThumbnailBanyak sekali model-model related post,seperti model <a href="http://nobinoku.blogspot.com/2010/10/membuat-related-post-blogger.html">related post standart</a>,model <a href="http://nobinoku.blogspot.com/2010/10/membuat-related-posts-fungsi-scrolling.html">related post fungsi scroll </a>dll. Begitupula dengan related post yang satu ini yakni related post bergambar atau dalam bahasa inggris thumbnail related post, dinamakan related post bergambar atau thumbnail related post karena tampilannya cukup menarik dengan adanya gambar atau thumbnail. Sehingga akan tampak lebih menarik dan merupakan salah satu cara untuk mempercantik blog yang kita miliki. Sebagai contohnya lihatlah gambar dibawah ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrB7TPukdKMIJEtfC5T8eacU0AgcvxEpMcD2ECSJuvIRQl5gpOfoIEkBPnhQZDDy6vykssW1z58KnSNlrqVExV7IdUCjk3DgEbwRE6pFHReMa3ViHt5XwQDI5E_pxU9V4d0u3p3S_vU1Yz/s1600/relatedposts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrB7TPukdKMIJEtfC5T8eacU0AgcvxEpMcD2ECSJuvIRQl5gpOfoIEkBPnhQZDDy6vykssW1z58KnSNlrqVExV7IdUCjk3DgEbwRE6pFHReMa3ViHt5XwQDI5E_pxU9V4d0u3p3S_vU1Yz/s1600/relatedposts.png" /></a></div><br />
Bagaimana setelah anda melihat contoh diatas apakah sobat tertarik untuk membuatnya. Jika tertarik untuk membuat related post bergambar, langkah-langkahnya sebagai berikut :<br />
<br />
1.Log in ke blogger.com dengan ID yang dimiliki<br />
2.Klik <b>Rancangan</b> pada dashboard menu<br />
3.Klik <b>Edit HTML</b>, jangan lupa memberi tanda centang pada "<b>Expand Widget Templates</b>" <br />
4.Selanjutnya cari kode berikut </head><br />
5.Letakkan kode di bawah ini sebelum kode tersebut :<br />
<blockquote><!--Related Posts with thumbnails Scripts and Styles Start--><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<style type="text/css"><br />
#related-posts {<br />
float:center;<br />
text-transform:none;<br />
height:100%;<br />
min-height:100%;<br />
padding-top:5px;<br />
padding-left:5px;<br />
}<br />
<br />
#related-posts h2{<br />
font-size: 1.6em;<br />
font-weight: bold;<br />
color:<span style="color: #990000;"> </span><span style="color: #444444;">#585858</span>;<br />
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br />
margin-bottom: 0.75em;<br />
margin-top: 0em;<br />
padding-top: 0em;<br />
}<br />
#related-posts a{<br />
color:#FFFFCC;<br />
}<br />
#related-posts a:hover{<br />
color:#000000;<br />
}<br />
<br />
#related-posts a:hover {<br />
background-color:#d4eaf2;<br />
}<br />
</style><br />
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/><br />
</b:if><br />
<!--Related Posts with thumbnails Scripts and Styles End--></blockquote>6. Sekarang cari lagi kode dibawah<br />
<blockquote><div class='post-footer-line post-footer-line-1'> </blockquote>Jika tidak menemukan kode diatas, coba cari kode seperti ini <br />
<blockquote><p class='post-footer-line post-footer-line-1'> </blockquote>Kalo sudah ketemu, sobat tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang sobat temukan.<br />
<blockquote><!-- Related Posts with Thumbnails Code Start--><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div id='related-posts'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast != &quot;true&quot;'><br />
</b:if><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><br />
<script type='text/javascript'><br />
var currentposturl=&quot;<data:post.url/>&quot;;<br />
var maxresults=<span style="color: #cc0000;">5</span>;<br />
var relatedpoststitle="<span style="color: #990000;">Related Posts</span>";<br />
removeRelatedDuplicates_thumbs();<br />
printRelatedLabels_thumbs();<br />
</script><br />
</div><div style='clear:both'/><br />
</b:if><br />
<!-- Related Posts with Thumbnails Code End--> </blockquote>7. Langkah terakhir Simpan Template kemudian lihat hasilnya.<br />
<br />
<div class="hint"><b>Keterangan</b> : kode yang berwarna <span style="color: #990000;">merah</span> dapat diganti sesuai dengan yang sobat inginkan, <span style="color: #990000;">#585858</span> (kode <span style="color: #444444;">background</span>), Angka <span style="color: #990000;">5</span> menunjukkan jumlah artikel yang tampil pada related post, Related Posts (Judul yang diinginkan).</div><br />
Selamat mencoba dan Semoga bermanfaat,silahkan tulis komentar dibawah ini jika ada pertanyaan. Silahkan baca juga artikel selanjutnya tentang <a href="http://nobinoku.blogspot.com/2011/02/membuat-relatedpost-bergambar-dan.html">membuat relatedpost bergambar dan bergerak.</a>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com15tag:blogger.com,1999:blog-3036616029674835593.post-15388513203057055322011-02-19T06:11:00.000-08:002011-03-06T20:45:19.211-08:00Memasang Icon Twitter Burung Terbang Di Blog<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizcVfeKib3D4t_AleHhIdWoGymKt8UaOl0CxLK3ZhUjOLKxeQkr2bkGmvtgLs0G6tGTUHvt3ZtLgfjDWE1hylTRz3pjyeZhq4vABweLSpBLTGiYC49DHMlhnnurFUi98TyTG3WN1GcIL_V/s1600/birdsprite2-150x150.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizcVfeKib3D4t_AleHhIdWoGymKt8UaOl0CxLK3ZhUjOLKxeQkr2bkGmvtgLs0G6tGTUHvt3ZtLgfjDWE1hylTRz3pjyeZhq4vABweLSpBLTGiYC49DHMlhnnurFUi98TyTG3WN1GcIL_V/s1600/birdsprite2-150x150.jpg" /></a></div>Salah satu jejaring sosial yang trend selain facebook adalah twitter. Memang sih banyak sekali cara berinovasi supaya akun mereka yang tampil di blog lebih menarik supaya para pengunjung blog akan tertarik untuk add di akun mereka sehingga menambah jaring pertemanan menjadi semakin luas. Tetapi jangan sampai sobat ketinggalan juga dengan trik yang satu ini, sesuai dengan judul diatas kali ini saya akan menjelaskan kepada sobat cara membuat atau memasang icon twitter burung tebang di blog. Dinamakan icon twitter burung terbang karena icon twitter tersebut akan bisa terbang mengikuti arah gerakan seperti terbang naik-turun dan bisa bertengger pada setiap kotak blog atau situs.<br />
<br />
<br />
<br />
<div style="color: #b45f06;"><b>Berikut ini adalah langkah-langkah untuk membuatnya:</b></div>1. Masuk (Login) ke Dashboard Blogger anda.<br />
2. Pilih Rancangan, lalu <b>Page Elelement</b>.<br />
3. Kemudian Tambahkan Gadged/Widget, pilih <b>HTML/JavaScript</b>.<br />
4. Langkah selanjunya copy script “JavaScript” dibawah: (<b>tanpa title/judul/tanpa memasukkan nama untuk gadged/widgetnya</b>) letakkan di HTML/JavaSript Anda.<br />
<blockquote><script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script><br />
<script type="text/javascript"><br />
var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";<br />
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");<br />
var twitterAccount = "http://twitter.com/techgyo";var tweetThisText = "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();<br />
</script><br />
<a id="theBird" href="<span style="color: #b45f06;">http://twitter.com/akuntwittersobat</span>" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; z-index: 947; left: 0px; top: 587px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; "></a><br />
<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px; background-repeat: no-repeat no-repeat; "></a><br />
<a id="theBirdLfollow" href="http://twitter.com/techgyo" target="_blank" title="follow me" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px; background-repeat: no-repeat no-repeat; "></a></blockquote><div class="hint">Ganti tulisan berwarna <span style="color: #b45f06;">orange</span> dengan akun twitter sobat dan url situs sobat</div><br />
5. Klik simpan <br />
<br />
Cukup disini dulu postingan Saya. Semoga bermanfaat dan silahkan menuliskan komentar dibawah ini untuk tanggapan dan pertanyaan.Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com35tag:blogger.com,1999:blog-3036616029674835593.post-66970367549352980532011-02-07T00:55:00.000-08:002011-03-02T04:32:40.957-08:00Memasang Status Yahoo Messengger Pada Blog<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-e9jK5DmrD5p_8t3oxpNgtCEOVtPi_t1ilaiprfwaOA9zVRb6lhsYGoK2Q8i7YhpY8e-vvPOUlItuLUUUiW9Y_7f6DWScEXFHZpIiIwfNeM2lFzKgUrWrRa2ys1QTYL9dE441YoWsMugR/s1600/images.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-e9jK5DmrD5p_8t3oxpNgtCEOVtPi_t1ilaiprfwaOA9zVRb6lhsYGoK2Q8i7YhpY8e-vvPOUlItuLUUUiW9Y_7f6DWScEXFHZpIiIwfNeM2lFzKgUrWrRa2ys1QTYL9dE441YoWsMugR/s200/images.jpeg" width="183" /></a></div>Yahoo messenger atau lebih populer disebut YM mungkin sudah tak asing lagi bagi sobat yang gemar berchat. Nah pada tutorial kali ini saya akan share tentang memasang status YM di blog anda. Fungsi dari kita memasang YM adalah sebagai sarana untuk saling berkomunikasi atau saling tanya jawab seputar Blog atau yang lainya antar pengguna YM,dan masih banyak lagi fungsi lainnya dari kita memasang status YM di blog. Selain itu status yahoo messenger ini tidak hanya bisa dipasang di blog, di Friendster pun juga bisa . Tapi kali yang akan dibahas hanya cara memasang di blog saja.<br />
<br />
<br />
<br />
<br />
<br />
<div style="color: #b45f06;">Bagi sobat yang ingin mencoba ikuti saja langkah-langkah dibawah ini</div><br />
1. Log in dulu ke account blog anda<br />
2. Pada dasbor pilih <b>tata letak</b> lalu pilih <b>Element laman</b><br />
3. Langkah selanjutnya klik <b>add gadget</b> lalu pilih <b>HTML/Javascript.</b><br />
4. Lalu Masukkan kode dibawah ini pada kotak HTML/Javascipt tadi.<br />
<blockquote><a href="ymsgr:sendIM?<span style="color: #990000;">ID_YM</span>"> <img src="http://opi.yahoo.com/online?u=<span style="color: #990000;">ID_YM</span>&amp;m=g&amp;<b><span style="color: #0b5394;">t=1</span></b>&amp;l=us"/><br />
</a></blockquote><div style="color: #b45f06;"><b>Berikut contohnya</b></div><blockquote><a href="ymsgr:sendIM?<span style="color: #990000;">welleh_welleeh</span>"> <img src="http://opi.yahoo.com/online?u=<span style="color: #990000;">welleh_welleeh</span>&amp;m=g&amp;<b><span style="color: #351c75;">t=1</span></b>&amp;l=us"/><br />
</a></blockquote><br />
<div class="hint">Ganti tulisan warna <span style="color: #990000;">merah</span> dengan <span style="color: #990000;">ID YM</span> sobat. Dan angka warna <b><span style="color: #0b5394;">ungu</span></b> adalah style dari status YM. Silahkan ganti sesuai dengan template blog sobat. Berikut ini beberapa style ym yang ada di bawah ini.</div><br />
<div style="color: #38761d; text-align: center;"><b>Kode gambar status online dari widget Yahoo Messenger</b></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs265.snc6/179393_199494596734114_172029746147266_916514_7353001_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs265.snc6/179393_199494596734114_172029746147266_916514_7353001_n.jpg" /></a></div><br />
<div style="color: #38761d; text-align: center;"><b>Kode gambar status onffline dari widget Yahoo Messenger</b></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs265.snc6/179393_199494603400780_172029746147266_916515_5279772_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs265.snc6/179393_199494603400780_172029746147266_916515_5279772_n.jpg" /></a></div><br />
5. Langkah selanjutnya klik Simpan<br />
<div style="text-align: center;"><br />
</div><div style="color: #38761d; text-align: center;">Silahkan Mencoba dan Semoga Bermanfaat.....</div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com4tag:blogger.com,1999:blog-3036616029674835593.post-16308843096491365592011-02-03T00:46:00.000-08:002011-03-02T04:32:10.867-08:00Membuat Daftar Isi Blog<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztPNV7K9eulxdsJCKbXtCJRXDNNnnlqUfSmdgIXX4UWrCzlru16wzTETk-o41al9wJ-UZVkg-XiWsnbcRAl6uALyVXs_JLXL4feGMZqeuqNsDhn5Xu32NiIaijJdhQkKz_UAkD3FrqM7Y/s1600/daftar-isi.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztPNV7K9eulxdsJCKbXtCJRXDNNnnlqUfSmdgIXX4UWrCzlru16wzTETk-o41al9wJ-UZVkg-XiWsnbcRAl6uALyVXs_JLXL4feGMZqeuqNsDhn5Xu32NiIaijJdhQkKz_UAkD3FrqM7Y/s200/daftar-isi.jpg" width="200" /></a></div>Membuat daftar isi blog itulah topik yang akan kita bahas kali ini, berbicara tentang daftar isi blog sebelumnya aku telah share ilmu kepada sobat mengenai <a href="http://nobinoku.blogspot.com/2010/12/membuat-daftar-isi-dengan-efek-jquery.html">Membuat Daftar Isi Blog Dengan Efek jQuery Accordion</a>. Nah pada kesempatan kali ini aku akan share lagi kepada sobat mengenai membuat daftar isi blog tentunya ini sedikit berbeda dengan versi sebelumnya. Fungsi dari daftar isi blog ini sama dari versi sebelumnya yakni memudahkan pengunjung untuk melihat daftar isi dari blog kita,selain itu setiap sobat memosting sebuah artikel maka akan langsung masuk kedalam daftar isi blog sobat. Untuk membuatnya pun cukup mudah sobat tinggal memasukkan <a href="http://nobinoku.blogspot.com/search/label/Java%20Script">Javascript</a> berikut ini kedalam posting anda. Untuk demonya silahkan lihat daftar isi blog ini. Bagaimana sobat tertarik untuk membuatnya??<br />
<div style="color: #b45f06;"><br />
</div><div style="color: #b45f06;">Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini.</div><br />
1.Log in dulu ke account blogger sobat<br />
2.Setelah itu Masuk ke Posting atau <b>Entri Baru </b><br />
3.Kemudian Pilih <b>Edit HTML</b><br />
4.Langkah selanjutnya copas kode dibawah ini dan masukkan kedalamnya<br />
<blockquote><link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" /><br />
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script><br />
<script src="<span style="color: #990000;">http://blogsobat.blogspot.com/</span>feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script></blockquote>5.Langkah terakhir Terbitkan Entri<br />
<br />
<div class="hint">Ganti <span style="color: #990000;">http://blogsobat.blogspot.com</span> dengan Url Blog Anda</div><br />
<div style="text-align: right;"><span style="color: #38761d; font-size: large;">Selamat Mencoba.......</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com17tag:blogger.com,1999:blog-3036616029674835593.post-67132688662123347162011-02-03T00:10:00.000-08:002011-03-02T04:43:18.310-08:00Chatbox Bergaya Panel Slide Vertikal dengan jQuery<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha8jiEUJBqVWf1oP65JVh0wN_7AIHBXsgkKcWj897sTDHLvxKhbIRaYGxLht4CiZIkdQaRv6hTAUaWeVLIkfXqXNGvvYUAIQfpAM289uyStSd_VjYA9fdwqqL4IUsw3BWVOQoir27iTMo2/s1600/Cbox.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha8jiEUJBqVWf1oP65JVh0wN_7AIHBXsgkKcWj897sTDHLvxKhbIRaYGxLht4CiZIkdQaRv6hTAUaWeVLIkfXqXNGvvYUAIQfpAM289uyStSd_VjYA9fdwqqL4IUsw3BWVOQoir27iTMo2/s320/Cbox.png" width="235" /></a></div>Menyambung tutorialku sebelumnya tentang membuat <a href="http://nobinoku.blogspot.com/2010/12/membuat-info-panel-slide-vertikal.html">Info Panel Slide Vertikal dengan jQuery</a>. Kali ini kita akan sedikit mengotak-atik panel slide vertikal tersebut dan akan kita isi dengan <a href="http://nobinoku.blogspot.com/search/label/Cbox">Chatbox</a> sehingga akan lebih manarik tuk dilihat. Untuk lebih lengkapnya langsung menuju Tkp aja ya.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://demoblogqu99.blogspot.com/" style="margin-left: 1em; margin-right: 1em;"><img src="http://i1199.photobucket.com/albums/aa462/nibinoku/Nobinoku%20album%20menu/th_demonobi.png" /></a></div><br />
<br />
Untuk membuatnya ikuti langkah-langkah dibawah ini.<br />
<br />
1.Login ke Blogger<br />
2.Masuk ke "Rancangan - Edit HTML"<br />
3.Seperti biasa klik <b>Download Template Lengkap</b> biar aman<br />
4.Jangan lupa centang Expand Template Widget<br />
5.Selanjutnya cari kode <span style="color: #0b5394;">]]></b:skin></span>, Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode <span style="color: #0b5394;">]]></b:skin></span> tersebut:<br />
<blockquote>.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}<br />
.panel p{color:#ccc;margin:0 0 15px;padding:0}<br />
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}<br />
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}<br />
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}<br />
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}<br />
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}<br />
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}<br />
.colleft{float:left;width:130px;line-height:22px}<br />
.colright{float:right;width:130px;line-height:22px}<br />
a:focus{outline:none}<br />
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}<br />
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}<br />
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}</blockquote>6.Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.<br />
<blockquote style="color: #990000;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/></blockquote><div class="hint">Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas </div><br />
7.Masukan kode Javascript berikut dibawah script jQuery tadi:<br />
<blockquote style="color: #351c75;"><script type="text/javascript"><br />
$(document).ready(function(){<br />
$(".trigger").click(function(){<br />
$(".panel").toggle("fast");<br />
$(this).toggleClass("active");<br />
return false;<br />
});<br />
});<br />
</script></blockquote>8.Kemudian cari lagi kode berikut ini <span style="color: #0b5394;"><body></span><br />
Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya<br />
<blockquote><div class="panel"><br />
<br />
<div style="color: #990000;"><blink>Script ChatBox Anda/ Bisa Diganti Dengan Tulisan Dan Widget Lain</blink></div><br />
</div><br />
<a class="trigger" href="">ChatBox</a></blockquote>9.Langkah terakhir Simpan template<br />
<br />
<div style="color: #38761d; text-align: center;"><span style="font-size: large;">Semoga tutorial kali ini bermanfaat....</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com11tag:blogger.com,1999:blog-3036616029674835593.post-23230288976468819652011-01-23T05:06:00.000-08:002011-03-03T04:22:37.766-08:00Membuat Text Resizer Blog Dengan CSS<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH39IhiGy6wump3MsfwUGsoGypuU2P8tb14FZ34cGX22EKzD16ogT_C7mg37cB_3c5rpsckM6XfCCtDJShz3MkaWX8KL4LxDwYz38ugIQINX49bPoDuegevVDATLqf43KAZj8ziaUI7L2U/s1600/cats.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH39IhiGy6wump3MsfwUGsoGypuU2P8tb14FZ34cGX22EKzD16ogT_C7mg37cB_3c5rpsckM6XfCCtDJShz3MkaWX8KL4LxDwYz38ugIQINX49bPoDuegevVDATLqf43KAZj8ziaUI7L2U/s400/cats.jpg" width="400" /></a></div><br />
Melihat dari gambar diatas pasti sobat mengerti apa yang akan kita bahas kali ini,,,yups benar kali ini kita akan belajar bagaimana membuat Text Resizer. Fungsi dari Teks Reziser sendiri ialah untuk merubah ukuran text postingan anda menjadi lebih besar atau lebih kecil dengan meng-klik button atau text dipostingan tersebut. Dan untuk membuatnya kali ini kita tidak akan membutuhkan Javascipt atau jQuery hanya menggunakan CSS saja,jadi insyaallah tidak akan mempengaruhi kecepatan blog anda. Untuk demonya silahkan lihat pada posting blog ini kemudian klik tombol Teks Resizer untuk mencobanya<br />
<br />
<div style="color: #b45f06;">Untuk membuatnya ikuti langkah-langkah dibawah ini</div><br />
1.Log ini dulu ke acoount blog anda.<br />
2.Selanjutnya klik <b>Rancangan</b>, kemudian pilih Edit html. Jangan lupa centang <b style="color: #38761d;">Expand Template Widget</b><br />
3.Saya sarankan untuk membackup template anda dengan cara klik <b>download template lengkap</b><br />
4.Langkah selanjutnya copy CSS di bawah ini, lalu paste persis di atas kode <span style="color: #0b5394;">]]></b:skin></span><br />
<blockquote>.textsizernorm, .textsizerbig, .textsizerbigger, .textsizersmall {<br />
padding-top: 20px;<br />
-o-transition: font 2s ease-in;<br />
-moz-transition: font 2s ease-in;<br />
-webkit-transition: font 2s ease-in;<br />
}<br />
.textsizersmall{font-size:<span style="color: #990000;">12</span>px}<br />
.textsizernorm{font-size:<span style="color: #990000;">13</span>px}<br />
.textsizerbig{font-size:<span style="color: #990000;">14</span>px}<br />
.textsizerbigger{font-size:<span style="color: #990000;">15</span>px; font-weight:bold}<br />
span.sizer {<br />
float: right;<br />
text-align: center;<br />
height: 20px;<br />
width: 250px;<br />
margin: 0 10px 10px 0;<br />
background: #333366;<br />
display: block;<br />
font-size: 18px;<br />
padding: 2px 10px;<br />
color: #00CCFF;<br />
text-shadow: 1px 1px 1px blue;<br />
cursor: pointer;<br />
border: 1px solid #eee;<br />
font-family: Times New Roman;<br />
border-radius: 5px;<br />
-moz-border-radius: 5px;<br />
-webkit-border-radius: 5px;<br />
box-shadow: 1px 1px 6px #000;<br />
-moz-box-shadow: 1px 1px 6px #000;<br />
-webkit-box-shadow: 1px 1px 6px #000;display: block;<br />
}<br />
span.sizer:active {<br />
border: 1px solid #555;<br />
border-radius: 8px;<br />
-moz-border-radius: 8px;<br />
-webkit-border-radius: 8px;<br />
background: #003399;<br />
box-shadow:0px 0px 12px #000;<br />
-moz-box-shadow:0px 0px 12px #000;<br />
-webkit-box-shadow:0px 0px 12px #000;<br />
margin-top: -1px;<br />
}<br />
.clr20 {clear: both; height: 20px;}</blockquote>5.Selanjutnya cari kode <data:post.body/> lalu letakkan kode dibawah ini <b>diatasnya</b><br />
<blockquote><div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span><br />
<div class="clr20"/></blockquote>6.Kemudian letakkan Kode <span style="color: #0b5394;"></div></span> setelah kode <data:post.body/> tersebut untuk lebih lengkapnya silahkan sobat lihat <b>contoh</b> dibawah ini.<br />
<blockquote><div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span><br />
<div class="clr20"/><br />
<br />
<div style="color: #990000;"><data:post.body/></div><br />
<div style="color: #0b5394;"></div></div></blockquote>7.Langkah terakhir <b>Simpan Template</b> dan preview<br />
<br />
<div class="hint">Untuk Ukuran perbesaran anda dapat menggantinya sesuai dengan selera anda dengan cara mengganti <span style="color: #990000;">font-size</span> Diatas</div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com13tag:blogger.com,1999:blog-3036616029674835593.post-36565848597854254382011-01-21T00:15:00.000-08:002011-01-21T00:21:11.726-08:00Cara Membuat Tab View BlogSalah satu cara untuk menghemat tempat ialah dengan kita memasang tab view. Ukuranya yang kecil sangat efisien untuk memuat banyak tempat. Selain itu tab view juga dapat diisi dengan konten blog yang berupa link, gambar, teks, dan lain-lain. dan juga bisa memberikan sesuatu yang rapi. Sebagai contohnya lihatlah pada gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqG9ZKkAIq0-WRWSDETbeIvZNE9xWfxeG0CMv2gkpjaUT8dZGelcCLnr9P1oJkTRn45AdvSeTS-IUONVAhzaPBunC2JuAVhANdaTPqGA0CTw7EwMON4r5vrnphUoFK9e7Yja0fCzNastv/s1600/Image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqG9ZKkAIq0-WRWSDETbeIvZNE9xWfxeG0CMv2gkpjaUT8dZGelcCLnr9P1oJkTRn45AdvSeTS-IUONVAhzaPBunC2JuAVhANdaTPqGA0CTw7EwMON4r5vrnphUoFK9e7Yja0fCzNastv/s1600/Image.png" /></a></div><br />
<br />
Jadi, dengan tabview ini kita bisa mengirit tempat yang ada di blog kita, seperti diblog ini saya menggunakan 3 widget sekaligus ditabview. Ngirit tempat bukan,untuk membuat tab view ini,ikuti saja langkah-langkah dibawah ini.<br />
<br />
<ul><li>Login ke Blogger dengan ID kalian</li>
</ul><ul><li>Pada dasbor pilh rancangan kemudian pilih Edit HTML</li>
</ul><ul><li>Jangan lupa back up template anda supaya aman dengan cara klik <b>download template langkap</b></li>
</ul><ul><li>Langkah selanjutnya copy kode di bawah ini, lalu paste persis di atas kode ]]></b:skin></li>
</ul><br />
<blockquote>/* tab model 2 ateonsoft.com */<br />
div.Tabateonsoft div.TFs<br />
{height: 30px; overflow: hidden;}<br />
div.Tabateonsoft div.TFs a<br />
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;<br />
background:#f0f0f0;<br />
color: #333;<br />
border-top:1px solid #CCCCCC;<br />
border-right:1px solid #999999;<br />
border-bottom:1px solid #999999;<br />
border-left:1px solid #cccccc;<br />
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;<br />
}<br />
div.Tabateonsoft div.TFs a:hover<br />
{ background: #E8E8E8;<br />
border-top:1px solid #999999;<br />
border-right:1px solid #cccccc;<br />
border-bottom:1px solid #cccccc;<br />
border-left:1px solid #999999;}<br />
div.Tabateonsoft div.TFs a.Active<br />
{ background: #E8E8E8;<br />
color: #000000;<br />
border-top:1px solid #999999;<br />
border-right:1px solid #cccccc;<br />
border-bottom:1px solid #cccccc;<br />
border-left:1px solid #999999; font-weight:bold;}<br />
div.Tabateonsoft div.Pages<br />
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}<br />
div.Tabateonsoft div.Pages div.Page<br />
{height: 100%;padding: 0px; overflow: hidden; }<br />
div.Tabateonsoft div.Pages div.Page div.floor<br />
{ font-size:11px;padding: 3px 5px; text-align:left;} </blockquote><br />
<ul><li>Lalu letakkan script dibawah ini tepat dibawah kode </head></li>
</ul><br />
<blockquote><script src='http://nobinoku.googlecode.com/files/tabview2atensoft.js' type='text/javascript'/> </blockquote><br />
<ul><li>Kemudian Simpan Template dan Sekarang menuju ke Elemen halaman</li>
</ul><ul><li>Pilih Klik Tombol Add gadget pilih HTML/Javascript</li>
</ul><ul><li>Letakkan kode berikut dalamnya</li>
</ul><blockquote><form action="tabateonsoft.html" method="get"><br />
<div class="Tabateonsoft" id="Tabateonsoft"><br />
<div class="TFs"><br />
<a><span style="color: #bf9000;">tab1</span></a><br />
<a><span style="color: #bf9000;">tab2</span></a><br />
<a><span style="color: #bf9000;">tab3</span></a><br />
<a><span style="color: #bf9000;">tab4</span></a><br />
</div><br />
<div class="Pages"><br />
<div class="Page"><!-- Tab --><br />
<div class="floor"><br />
<div style="color: #990000;">Disini letakkan kode untuk tab 1 anda</div></div><br />
</div><!-- end Tab --><br />
<div class="Page"><!-- Tab --><br />
<div style="color: #990000;">Disini letakkan kode untuk tab 2 anda</div></div><!-- end Tab --><br />
<div class="Page"><!-- Tab --><br />
<div class="floor"><br />
<div style="color: #990000;">Disini letakkan kode untuk tab 3 anda</div></div><br />
</div><!-- end Tab --><br />
<div class="Page"><!-- Tab --><br />
<div class="floor"><br />
<div style="color: #990000;">Disini letakkan kode untuk tab 4 anda</div></div><br />
</div><!-- end Tab --><br />
</div><br />
</div><br />
</form><br />
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script> </blockquote><br />
<div class="hint">Perhatikan tulisan yg berwarna:<br />
<span style="color: #bf9000;">Kuning</span> : Judul Tab<br />
<span style="color: #990000;">Merah</span> : Isi untuk masing-masing tab</div><br />
<ul><li>Klik Simpan Selesai dech Buatnya</li>
</ul><br />
<div style="text-align: right;"><span style="color: #38761d; font-size: large;">Selamat mecoba dan semoga berhasil.....</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com9tag:blogger.com,1999:blog-3036616029674835593.post-66090177369946694632011-01-11T00:08:00.000-08:002011-01-11T00:09:28.821-08:00Membuat Menu Navigasi TerapungBismillah membuat navigasi terapung halo sobat semua insyaallah saya akan share ilmu kepada sobat tentang membuat Menu navigasi terapung. Disebut menu navigasi terapung karena navigasi yang akan kita buat ini tidak akan terpengaruh oleh gerakan scrollbar baik keatas maupun kebawah, menu ini tetap diam pada tempatnya. Hasilnya seperti gambar dibawah ini. Atau jika kurang puas lihat pada demo <a href="http://demoblogqu99.blogspot.com/">blog ini</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_KQQStVdM1IcaiuGlPNcwyKJXMrQaTx2kmXBphFkBg5360r05Ap5nTvAkKNQUNJQsXh9HVOtWOVZ5bN5-eFGkcE8CwZyGUCJqZiZaebWjPwoDNiprtjJakTX1gqb1RetuHvAl0JRHDgzy/s1600/Image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_KQQStVdM1IcaiuGlPNcwyKJXMrQaTx2kmXBphFkBg5360r05Ap5nTvAkKNQUNJQsXh9HVOtWOVZ5bN5-eFGkcE8CwZyGUCJqZiZaebWjPwoDNiprtjJakTX1gqb1RetuHvAl0JRHDgzy/s1600/Image.png" /></a></div><br />
Selain itu menu navigasi ini terapung ini sangat cocok untuk menempatkan menu-menu yang sering kita gunakan atau menempatkan suatu informasi menarik untuk para pengunjung. Bagaimana tertarik untuk membuatnya???<br />
<br />
<div style="color: #b45f06;">Berikut ini langkah-langkahnya.</div><br />
<ul><li>Seperti biasa log in dulu ke account blogger sobat.</li>
</ul><ul><li>Setelah itu pada dasbor pilih rancangan kemudian Edit HTML.</li>
</ul><ul><li>Kemudian cari kode berikut ini <span style="color: #0b5394;">]]></b:skin></span> kemudian masukkan kode dibawah ini diatasnya</li>
</ul><br />
<blockquote>/********************************<br />
* Navigasi Apung *<br />
*********************************/<br />
#navigasi-apung<br />
{<br />
align: center;<br />
position: fixed;<br />
border-top: 1px solid #fff;<br />
border-bottom: 1px solid #000;<br />
background-color: #c0c0c0;<br />
width: 100%;<br />
left: 0px;<br />
color: #000;<br />
z-index:10000;<br />
opacity: 0.8;<br />
filter: alphaundefinedopacity: 80);<br />
bottom:0;<br />
}<br />
#navigasi-apung:hover<br />
{<br />
opacity: 1;<br />
filter: alphaundefinedopacity: 100);<br />
}<br />
#navigasi-apung a<br />
{<br />
color: #000;<br />
font-weight:bold;<br />
}<br />
/********************************<br />
* Navigasi Apung Kiri *<br />
*********************************/<br />
.kiri_apungmnu<br />
{<br />
float:left;<br />
list-style-type:none;<br />
padding:0;<br />
margin:3px 0px 3px 5px;}<br />
.kiri_apungmnu li<br />
{<br />
padding: 0px 0px 0px 3px;<br />
margin-left:2px;<br />
float:left;<br />
color:#000;<br />
font:normal 11px arial;<br />
}<br />
.kiri_apungmnu li a<br />
{<br />
display:block;<br />
font:normal 11px arial;<br />
width:auto;<br />
float:left;<br />
text-decoration:none;<br />
}<br />
.kiri_apungmnu li a:hover<br />
{<br />
text-decoration:none;<br />
}<br />
/********************************<br />
* Navigasi Apung Kanan *<br />
*********************************/<br />
.kanan_apungmnu<br />
{<br />
float:right;<br />
list-style-type:none;<br />
padding:0;<br />
margin:3px 5px 3px 0;<br />
}<br />
.kanan_apungmnu li<br />
{<br />
padding: 0 0 0 3px;<br />
margin-left:2px;<br />
float:left;<br />
color:#000;<br />
font:normal 11px arial;<br />
}<br />
.kanan_apungmnu li a<br />
{<br />
display:block;<br />
font:normal 11px arial;<br />
width:auto;<br />
float:left;<br />
text-decoration:none;<br />
}<br />
.kanan_apungmnu li a:hover<br />
{<br />
text-decoration:none;<br />
}</blockquote><br />
<ul><li>Kemudian cari lagi kode berikut ini <span style="color: #0b5394;"><body></span>.</li>
</ul><ul><li>Setelah itu masukkan copas kode dibawah ini kemudian taruh diatasnya</li>
</ul><blockquote><br />
<div id='navigasi-apung'><br />
<ul class="kiri_apungmnu"> <br />
<li><a href="/" title="Halaman Utama">Beranda</a></li><br />
<li>|</li><br />
<li><a href="/search?max-results=50" title="Daftar Isi">Daftar Isi</a></li><br />
<li>|</li><br />
<li><a href="/feeds/posts/default" title="Baca via Feed" target="_blank">Feed</a></li><br />
<li>|</li><br />
<li><a href="<span style="color: #38761d;">http://feeds.feedburner.com/sobat</span>" title="Berlangganan Artikel">Langgan</a></li><br />
<li>|</li><br />
<li><a href="mailto:<span style="color: #38761d;">E-mailsobat@gmail.com</span>" title="Email Nobinoku">Email</a></li><br />
<li>|</li><br />
<li><a href="<span style="color: #38761d;">http://blogsobat.blogspot.com/</span>" title="Tentang Nobinoku" target="_blank">Tentang</a></li><br />
</ul><br />
<ul class="kanan_apungmnu"><br />
<li><a href="http://www.blogger.com/" title="Blogger Login" target="_blank">Login</a></li><br />
<li>|</li><br />
<li><a href="http://www.blogger.com/post-create.g?blogID=<span style="color: #990000;">XXXXXX</span>" title="Entri Baru">Entri Baru</a></li><br />
<li>|</li><br />
<li><a href="http://www.blogger.com/posts.g?blogID=<span style="color: #990000;">XXXXXX</span>" title="Edit Entri">Edit Entri</a></li><br />
<li>|</li><br />
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=<span style="color: #990000;">XXXXXX</span>" title="Pengaturan">Pengaturan</a></li><br />
<li>|</li><br />
<li><a href="http://www.blogger.com/rearrange?blogID=<span style="color: #990000;">XXXXXX</span>" title="Tata Letak">Tata Letak</a><br />
</li><br />
</ul><br />
</div></blockquote><br />
<ul><li>Langkah terakhir Simpan template kemudian preview hasilnya</li>
</ul><br />
<div class="hint">Ganti <span style="color: #38761d;">http://feeds.feedburner.com/sobat</span> dengan Feed Burner kalian<br />
Ganti <span style="color: #38761d;">http://blogsobat.blogspot.com/</span> dengan Url blog sobat.<br />
Ganti <span style="color: #38761d;">E-mailsobat@gmail.com</span> dengan alamat E-mail Sobat<br />
Ganti <span style="color: #990000;">XXXXXX</span> dengan ID blog sobat.</div><br />
Semoga berhasil......Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com11tag:blogger.com,1999:blog-3036616029674835593.post-28369868585071777122011-01-09T06:26:00.000-08:002011-02-26T21:09:48.110-08:00Cara Membuat Form Kontak Saya (Contact Me Form)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCyrQwWHcb3BJDp9M-CRUyAocT5ZDrAvHTPQArWhpGn1qeZozIyXPAeuPXi72InEF23sDs4IjZFC8mpVT_F__zrOLoOWvNyYPygSdZT5-k26XsiiLUBbhJXibq4bg84EWPfK65dwD8MBj/s1600/ContactUs-1_1.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCyrQwWHcb3BJDp9M-CRUyAocT5ZDrAvHTPQArWhpGn1qeZozIyXPAeuPXi72InEF23sDs4IjZFC8mpVT_F__zrOLoOWvNyYPygSdZT5-k26XsiiLUBbhJXibq4bg84EWPfK65dwD8MBj/s200/ContactUs-1_1.jpg" width="200" /></a></div>Form Kontak Saya atau biasa disebut Contact Me Form merupakan sebuah sarana untuk berkomunikasi antara sobat dengan admin blog. Dengan adanya form kontak saya (Contact Me Form) menunjukan bahwa pemilik blog sangat terbuka menerima masukan dari pengunjungnya sekaligus dapat menjalin komunikasi serta persahabatan. Contoh dari form contact me silahkan lihat pada <a href="http://nobinoku.blogspot.com/2001/12/kotak-pertannyaankritik-serta-saran.html">contact me</a> blog saya.<br />
<br />
<div style="color: #b45f06;"><br />
<br />
<br />
Untuk membuatnya ikuti saja langkah-langkah dibawah ini.</div>1. Seperti biasa log in dulu ke account blogger sobat <br />
<ul></ul>2. Setelah itu Masuk ke Posting<br />
<ul></ul>3. Pilih Edit Laman, Laman Baru<br />
<ul></ul>4. Kemudian Pilih Edit HTML<br />
<ul></ul>5. Langkah selanjutnya copas kode dibawah ini dan masukkan kedalamnya<br />
<ul></ul><br />
<blockquote><FORM action="mailto:<span style="color: #990000;">ALAMAT-EMAIL-ANDA</span>" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" size="20"></TD></TR><TR><TD><DIV align="right"><B>Email:</B></DIV></TD><TD><INPUT type="text" name="email" size="20"></TD></TR><TR><TD><DIV align="right"><B>Comment:</B></DIV></TD><TD><TEXTAREA name="comment" cols="35" wrap="virtual" rows="5"></TEXTAREA></TD></TR><TR><TD>&nbsp;</TD><TD><INPUT type="submit" name="submit" value="Submit"><INPUT type="reset" name="reset" value="Reset"></TD></TR></TABLE></FORM></blockquote><br />
<div style="color: #38761d; text-align: center;"><b>Seperti pada gambar dibawah ini.</b></div><ul></ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeOmKq1aSHd6fIR6fwBYXnOFKzIOEkhJUZh46tNrtDCdttsihpAq1fJ6XpmmCiMlAS68rjMQpWhrWJtHDv8IYCwtyGn2GnAO35q2wS3fnRJXsm85V0kFutMcgA1Dz4dF2w4Ad2I2-nQc_/s1600/nobi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeOmKq1aSHd6fIR6fwBYXnOFKzIOEkhJUZh46tNrtDCdttsihpAq1fJ6XpmmCiMlAS68rjMQpWhrWJtHDv8IYCwtyGn2GnAO35q2wS3fnRJXsm85V0kFutMcgA1Dz4dF2w4Ad2I2-nQc_/s320/nobi.png" width="320" /></a></div><br />
<br />
<div class="hint">Silahkan isi alamat Email anda</div><br />
6. Langkah terakhir Terbitkan Entri,selesai. <br />
<br />
<div style="color: #b45f06; text-align: center;"><span style="font-size: large;">Selamat Mencoba Semoga Berhasil.....</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com14tag:blogger.com,1999:blog-3036616029674835593.post-34941470651448224652011-01-08T04:17:00.000-08:002011-01-08T04:18:26.826-08:00Membuat Page Navigation BerbedaAlhamdulillah... Akhirnya Selsai juga tugas-tugasku.. Setelah beberapa hari ini capek banget mengerjakan tugas.. hehehe.. Cape n jadi lupa posting dech sama jalan-jalan keblog sobat... Yufs.. Mulai blogging lagi, oh ya kali ini aku akan share ilmu kepada sobat tentang membuat page navigation berbeda setelah sebelumnya membahas tentang <a href="http://nobinoku.blogspot.com/2010/11/cara-membuat-page-number-navigasi.html">Membuat Page Number Navigasi Halaman</a>. Kali ini kita membahas page navigation lagi. Tapi untuk page navigation yang kita bahas ini sedikit berbeda dengan page navigation sebelumnya. untuk contohnya bisa sobat lihat pada gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs073.snc6/168357_191044604245780_172029746147266_846494_1672927_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="28" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs073.snc6/168357_191044604245780_172029746147266_846494_1672927_n.jpg" width="320" /></a></div><br />
Bagaimana sobat tertarik??? Untuk membuatnya caranya cukup simple koq,hanya saja sobat mengikuti langkah-langkah dibawah ini dengan teliti. insya allah tutorial ini akan berhasil.<br />
<br />
<div style="color: #b45f06;">Untuk membuatnya ikuti langkah-langkah dibawah ini.</div><br />
<ul><li>Seperti biasa. Login dahulu ke akun blogger sobat.</li>
</ul><ul><li>Setelah itu klik Tata Letak - Edit HTML dan centang kotak Expand Template Widget.</li>
</ul><ul><li>Jangan lupa untuk klik <b>Download Template Lengkap</b> untuk jaga-jaga.</li>
</ul><ul><li>Kalau sudah, cari kode <span style="color: #0b5394;"><b:include name='nextprev'/></span> lalu ganti dengan kode berikut:</li>
</ul><br />
<blockquote><b:if cond='data:blog.pageType == "index"'><br />
<style type="text/css"><br />
.blogpager {<br />
font-size:<span style="color: #0b5394;">16px;</span><br />
color: <span style="color: #38761d;">#060;</span><br />
font-weight:bold;<br />
padding:0px 4px;<br />
}<br />
</style><br />
<br />
<div align="center" style="margin:5px;"><br />
<form action="#" name="pager20"><br />
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span><br />
</form><br />
</div><br />
<script type="text/javascript"><br />
<br />
var blogID = "<b><span style="color: #990000;"><span class="string">IDblogsobat</span></span></b>";<br />
var home_page = "<b><span style="color: #990000;">http://namablogsobat.blogspot.com/</span></b>";<br />
var pager_max_main = <span style="color: #b45f06;">1</span>;<br />
<br />
var pager_first_text = "First";<br />
var pager_last_text = "Last";<br />
var pager_prev_text = "Prev";<br />
var pager_next_text = "Next";<br />
<br />
<br />
</script><br />
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js"<br />
type="text/javascript"></script><br />
</b:if></blockquote><br />
<div class="hint"><ul><li>Selanjunya ganti kode yang berwarna <b><span style="color: #990000;">merah</span></b> dengan id blog sobat. Untuk melihat id blog sobat silahkan lihat pada adress pada browser seperti pada gambar dibawah.</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_5D4Wsb3wFclgQyXbuwxizQ4Svznw_VInM6nBZPiNlQ3OHA1qsw4SMBbWpjzffOuuaInpzBko-MKtr4SPQ4hYg2zmgjOAkholass98JCuV8R1fUS1NKanlFk9JyL4vdQDVQdjSKcBalK/s1600/image_thumb%255B5%255D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="36" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_5D4Wsb3wFclgQyXbuwxizQ4Svznw_VInM6nBZPiNlQ3OHA1qsw4SMBbWpjzffOuuaInpzBko-MKtr4SPQ4hYg2zmgjOAkholass98JCuV8R1fUS1NKanlFk9JyL4vdQDVQdjSKcBalK/s320/image_thumb%255B5%255D.png" width="320" /></a></div><br />
<ul><li>Ganti <span style="color: #990000;">http://namablogsobat.blogspot.com/</span> Dengan URL Blog Sobat</li>
</ul><ul><li>Ganti <span style="color: #0b5394;">ukuran huruf</span> dan <span style="color: #38761d;">backround</span> sesuaikan dengan template anda. Untuk kode warna bisa dilihat <a href="http://nobinoku.blogspot.com/2010/11/mesin-warna.html">disini </a></li>
</ul></div><br />
<ul><li>Langkah terakhir Simpan Template</li>
</ul><br />
<div style="color: #0b5394; text-align: right;"><span style="font-size: large;">Semoga berhasil......</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com5tag:blogger.com,1999:blog-3036616029674835593.post-85187064959757361512011-01-03T02:21:00.000-08:002011-01-03T02:25:01.130-08:00Cara Mengetahui Blog Do follow atau Nofollow<div class="separator" style="clear: both; text-align: center;"><a href="http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs035.snc6/166592_1362774329239_1828021425_702182_5135719_n.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="153" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc6/hs035.snc6/166592_1362774329239_1828021425_702182_5135719_n.jpg" width="200" /></a></div>Dalam postinganku sebelumnya yang berjudul <a href="http://nobinoku.blogspot.com/2010/12/cara-merubah-blog-nofollow-menjadi-do.html">Cara Merubah Blog Nofollow Menjadi Do Follow</a> aku telah menjelaskan kepada sobat tentang bagaimana <a href="http://nobinoku.blogspot.com/2010/12/cara-merubah-blog-nofollow-menjadi-do.html">membuat blog kita menjadi blog Do follow</a>. Memang sih Salah satu cara untuk mendongkrak pagerank blog kita adalah memanfaatkan blog <b>Do follow</b>. Cukup berkomentar di blog yang dofollow saja kita udah mendapatkan backlink secara mudah. Nah permasalahannya bagaimana cara kita mengetahui blog itu blog dofollow atau bukan.<br />
<br />
<br />
<br />
Sebenarnya cara untuk mengetahuinya cukup mudah kok kita hanya perlu menambahkan add ons <b>Mozilla NoDoFollow</b> pada Mozilla Firefox kita. Berikut ini merupakan tips dari saya untuk mengetahui blog itu dofollow atau no follow.<br />
<br />
<ul><li>Pertama-tama instal add ons <b style="color: #b45f06;"><a href="https://addons.mozilla.org/en-US/firefox/addon/5687/"><blink>NoDoFollow</blink></a></b> pada firefox anda.</li>
</ul><ul><li>Jika sudah terinstall langakah selanjutnya ialah <b>restart Firefox Anda</b></li>
</ul><ul><li>Nah sekarang di submenubar Tool firefox sobat akan ada tool baru bertuliskan <b>NoDoFollow </b>seperti pada gambar:</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1354.snc4/162598_1362775489268_1828021425_702183_4138861_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1354.snc4/162598_1362775489268_1828021425_702183_4138861_n.jpg" /></a></div><br />
<ul><li>Nah jika ingin mengetahui suatu link nofollow/dofollow tinggal aktifkan Addons dengan cara klik menu NoDoFollow sampai bertanda centang.</li>
</ul><br />
<div class="hint">Apabila link berwarna <b><span style="color: #351c75;">ungu</span></b>, maka Dofollow. Apabila berwarna <b><span style="color: #990000;">merah</span></b> maka Nofollow.</div><br />
<div style="color: #0b5394; text-align: right;"><span style="font-size: large;">Semoga Bermanfaat.....^_^</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com15tag:blogger.com,1999:blog-3036616029674835593.post-42153679232603297242010-12-29T00:34:00.000-08:002010-12-29T00:37:12.948-08:00Cara Merubah Blog Nofollow Menjadi Do Follow<div class="separator" style="clear: both; text-align: center;"><a href="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1362.snc4/163425_1357469316617_1828021425_690492_2363367_n.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="132" src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs1362.snc4/163425_1357469316617_1828021425_690492_2363367_n.jpg" width="150" /></a></div>Hohoho Apa kabar sobat..Sudah lama nih ane tidak posting tutorial blog. Pada kali ini aku akan sedikit memberikan info nich buat sobat tentang merubah blog yang sebelumnya nofollow menjadi do follow. Sebenarnya apa sih kegunaan dari kita untuk merubah blog nofollow menjadi do follow itu??Kegunaan dari kita merubah blog menjadi dofollow adalah sobat bisa dapat backlink oneway...saat para temen-temen blogger comentar di postingan kalian. <br />
<br />
<br />
<br />
<br />
Maksud dari backlink one way adalah jika kita berkomentar pada blog yang dofollow, secara otomatis blog kita akan mendapat link balik dari empunya blog secara cuma-cuma dan juga akan membuat blog kita cepat terindeks oleh mesin pencari. Selain itu dengan kita meninggalkan komentar di blog yang dofollow berarti sama saja kita mempromosikan blog kita. Bagaimana sobat tertarik mencobanya???<br />
<br />
<br />
<div style="color: #b45f06;">Untuk merubah blog nofollow menjadi do follow ikuti saja langkah-langkah dibawah ini :</div><br />
<ul><li>Masuk ke account blogger sobat</li>
</ul><ul><li>Setelah itu pada dasbor pilih rancangan kemudian Edit HTML</li>
</ul><ul><li>Jangan lupa untuk mencentang <b>Expand Template Widget</b> yang berada di sebelah kanan atas.</li>
</ul><ul><li>Selanjutnya cari kode berikut ini.</li>
</ul><br />
<blockquote><a expr:href='data:comment.authorUrl'<b style="color: #990000;">rel='nofollow'</b>><data:comment.author/></a></blockquote><br />
<ul><li>Setelah ketemu hapus kode yang bercetak tebal den berwarna merah,sehingga menjadi seperti berikut ini.</li>
</ul><ul></ul><br />
<div class="note"><a expr:href='data:comment.authorUrl'><data:comment.author/></a></div><br />
<ul><li>Didalam Edit HTML dan "Expand Widgets Templates" yang masih tercentang. Cari lagi Code HTML seperti Dibawah</li>
</ul><br />
<blockquote><a expr:href='data:backlink.url'<b><span style="color: #990000;">rel='nofollow'</span></b>><data:backlink.title/></a></blockquote><br />
<ul><li>Seperti pada langkah diatas hapus kode yang bercetak tebal dan berwarna merah,sehingga akan seperti berikut ini.</li>
</ul><br />
<div class="note"><a expr:href='data:backlink.url'><data:backlink.title/></a></div><br />
<ul><li>Langkah terakhir <b>Save Template.</b></li>
</ul><br />
<div style="text-align: right;"><span style="font-size: large;"><br />
</span></div><div style="color: #38761d; text-align: right;"><span style="font-size: large;">Semoga Tutorial Ini Bermanfaat......</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com16tag:blogger.com,1999:blog-3036616029674835593.post-19636091231492854092010-12-23T06:13:00.000-08:002011-03-06T21:54:03.350-08:00Membuat File Java Script BlogMungkin teman-teman sudah tak asing lagi mendengar kata java script. Tapi apa sih sebenarnya java script itu?? Pada Tutorial kali ini ditujukan bagi teman-teman yang baru mengenal JavaScript. Sederhananya, JavaScript adalah bahasa pemrograman yang dapat dibaca oleh browser yang digunakan untuk membuat suatu interaksi pada sebuah halaman website. Jika berbentuk sebuah file biasanya akan berekstensi <b>*.js</b>. Tetapi Menurut informasi yang saya baca JavaScript tidaklah SEO-friendly. Selain itu jika kita menggunakan <a href="http://nobinoku.blogspot.com/search/label/Java%20Script">JavaScript</a> terlalu banyak kemungkinan posisi di search engine akan menurun juga. Nah Untuk mengurangi dampak masalah ini adalah dengan kita "Memasukkan javaScript itu kedalam notepad".<br />
<br />
<div style="color: #b45f06;"><b>Untuk membuatnya ikuti langkah-langkah dibawah ini :</b></div><br />
1.Buka Notepad terleih dahulu. Bagi yag kurang tahu terletak pada <b><span style="color: #38761d;">Start Menu</span></b> » <b><span style="color: #38761d;">All Program</span></b> » <b><span style="color: #38761d;">Accessories</span></b> » <b><span style="color: #38761d;">Notepad </span></b><br />
2.Setelah itu Tentukan kode JavaScript yang akan dibuat menjadi File. Sebagai contoh jika sebelumnya kodenya seperti ini:<br />
<blockquote><div style="color: #b45f06;"><script type="text/javascript"></div><br />
<div style="color: #cc0000;">Isi dari javascript...</div><br />
<div style="color: #b45f06;"></script></div></blockquote>3.Maka <b>hapus</b> kode warna <span style="color: #990000;">merah</span> dan copy isi dari code <b>JavaScript</b> dan pastekan ke notepad seperti gambar dibawah<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXHz_cXhimONnHHtewXGBZRmq1Gv1CSWQ2jzPZUib66jx-0LmYD_ze52j1834kqx65e_DDTn2UYdl4BbilAYz10prlGd80WTWLlGzAVnFiJaAA8eyxzhaT2lMEEavj-ZxUrf6pJgcuvjSb/s1600/Javasript+code.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXHz_cXhimONnHHtewXGBZRmq1Gv1CSWQ2jzPZUib66jx-0LmYD_ze52j1834kqx65e_DDTn2UYdl4BbilAYz10prlGd80WTWLlGzAVnFiJaAA8eyxzhaT2lMEEavj-ZxUrf6pJgcuvjSb/s320/Javasript+code.png" width="320" /></a></div><br />
Lalu <b>save</b> dengan membuat Filename : <b><span style="color: #38761d;">Javasript.js</span></b> dan <b><span style="color: #38761d;">Save as</span></b> type: <b><span style="color: #38761d;">All files</span></b> lalu pada Econding : <b style="color: #38761d;">ANSI </b>seperti gambar dibawah ini. Sesuaikan dengan nama <b><span style="color: #990000;">javaSript</span></b> anda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yk6feH51Z9S2DR3k4f_f3Py4jcH_l5c8FIpEuJ0Q-_avnkeLN1LFMoCZzlLjr8b22LTJV0S-fDfGUY3u0Sq9kK95kDlcPBgRWYsEUP5V3hkioeQXZDogLxmZP1Ih2nZWNx4SImbVe_6b/s1600/jsnobi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yk6feH51Z9S2DR3k4f_f3Py4jcH_l5c8FIpEuJ0Q-_avnkeLN1LFMoCZzlLjr8b22LTJV0S-fDfGUY3u0Sq9kK95kDlcPBgRWYsEUP5V3hkioeQXZDogLxmZP1Ih2nZWNx4SImbVe_6b/s320/jsnobi.png" width="320" /></a></div><br />
<br />
<br />
4.Kemudian klik <b>Save</b><br />
<br />
<div class="hint"><div style="color: #b45f06;">Langkah selanjutnya upload Javasript tersebut Untuk tutorialnya silahkan baca <b><a href="http://nobinoku.blogspot.com/2010/10/cara-menyimpan-file-java-script-di.html">Cara Menyimpan File Java Script di Google Code</a></b></div></div><br />
Untuk menggunakannya di halaman website, Ubah kode HTML JavaScriptnya menjadi:<br />
<br />
<div class="hint"><span style="color: #38761d;"><script src="</span><blink style="color: #0b5394;"><b>URL Alamat file_saya.js</b></blink><span style="color: #38761d;">" type="text/javascript"></script></span></div><br />
5.Selesai...<br />
<br />
<div style="color: #0b5394; text-align: right;"><span style="font-size: large;">Semoga Tutorial Kali Ini Bermanfaat........</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com14tag:blogger.com,1999:blog-3036616029674835593.post-318100290334469032010-12-22T21:12:00.000-08:002010-12-24T00:26:42.982-08:00Mengelola Blog Lebih Dari Satu Akun<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UVIpsBwpa86aGcGPOwc2XTdQVyQgnGsQcXuekmOAG9ibwFAdUaYiq7W6vO6sH0E3k8ciMGfPASrIRK7KLqttvWpLQKMaiUTg6B6EvvFCWpw4p4O3fVTk-uXEdcEfPKoTmXit5S7dwzjO/s1600/seoCols.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UVIpsBwpa86aGcGPOwc2XTdQVyQgnGsQcXuekmOAG9ibwFAdUaYiq7W6vO6sH0E3k8ciMGfPASrIRK7KLqttvWpLQKMaiUTg6B6EvvFCWpw4p4O3fVTk-uXEdcEfPKoTmXit5S7dwzjO/s200/seoCols.jpg" width="150" /></a></div>Maksud dari mengelola blog lebih dari satu akun adalah kita dapat saling membagi tugas dengan siapapun yang kita percaya guna untuk mengelola suatu blog kita selain itu cara ini juga dapat digunakan bagi anda yang sering kehabisan ide atau mengajak teman-teman untuk menulis di blog kita dengan syarat teman anda harus mempunyai account bloger dan mendapat ijin dari blog kita. Bagaimana Sobat tertarik mencobanya???<br />
<br />
<br />
<br />
<div style="color: #b45f06;"><b><span style="font-size: small;">Untuk memberikan ijin untuk mengelola blog kita ikuti saja langkah-langkah dibawah ini.</span></b></div><br />
<ul><li>Pada Dasbor account blog anda Pilih<b> Setting/Pengaturan</b> selanjutnya pilih<b> izin</b></li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg89UfhXOHVA2WsSbb1QCZm7SW1i7OAH8_ivsLpGJJNtDXb3EJU6n4rmmBAQp8OB32yfg5-pb3CmO1CDOtkmKZR4KmLmlUmrkwbvgWZ1bSFsRsVc9ctuAqbxWX5esSwgsU6cRAdS8_2WB2/s1600/Backgrounds.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg89UfhXOHVA2WsSbb1QCZm7SW1i7OAH8_ivsLpGJJNtDXb3EJU6n4rmmBAQp8OB32yfg5-pb3CmO1CDOtkmKZR4KmLmlUmrkwbvgWZ1bSFsRsVc9ctuAqbxWX5esSwgsU6cRAdS8_2WB2/s320/Backgrounds.jpg" width="320" /></a></div><br />
<br />
<ul><li>Klik Menambah Penulis</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiq_gXQJqzglstoLROzygt9QgVdPU1d0EsXFtxoLJfNr1OK_Y12xQdr-7hYJra2G42RKhiVOEVKZPIbV0QkI8KHE_gFYk6oG5-h9GmwhCiWXX_6hpMofmC417jYSgcLM0vW6xGZSkUIsVS/s1600/Nobi+Backround.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiq_gXQJqzglstoLROzygt9QgVdPU1d0EsXFtxoLJfNr1OK_Y12xQdr-7hYJra2G42RKhiVOEVKZPIbV0QkI8KHE_gFYk6oG5-h9GmwhCiWXX_6hpMofmC417jYSgcLM0vW6xGZSkUIsVS/s320/Nobi+Backround.jpg" width="320" /></a></div><br />
<span id="goog_1056105846"></span><span id="goog_1056105847"></span><br />
<ul><li>Kemudian isi Email Yang ingin anda taruh untuk mengelola blog anda</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjnWWxJOCAuFclyJEd6C1nUM2HDQP1Or8IvlKkQw7ezkeRs5mG5-cGdPEAbtRuhRMeGAHo5GBsH4gn73-CQXUbZEP2ul9Xqiob_0NgTw_koX01VlX57qsrMi-xDbTUNRHN2My0z4gu4Aaq/s1600/Nobi+Email.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjnWWxJOCAuFclyJEd6C1nUM2HDQP1Or8IvlKkQw7ezkeRs5mG5-cGdPEAbtRuhRMeGAHo5GBsH4gn73-CQXUbZEP2ul9Xqiob_0NgTw_koX01VlX57qsrMi-xDbTUNRHN2My0z4gu4Aaq/s320/Nobi+Email.jpg" width="320" /></a></div><br />
<ul><li>Selanjutnya Klik <b>Undang</b></li>
</ul><ul><li>Tunggu Konfirmasinya</li>
</ul><ul><li>Jika sudah dikonfirmasi maka orang yang anda undang resmi menjadi penulis diblog anda</li>
</ul><br />
<br />
Sayangnya, orang yang kita undang tidak sepenuhnya dapat mengelola blog yang kita izinkan untuk dikelola bersama, orang tersebut hanya bisa melakukan posting dan menghapus hak-nya sebagai administrator. Untuk sepenuhnya menjadi administrator, kita ikuti langkah berikut:<br />
<br />
<ul><li><span id="fullpost">Login pada Dasbor, kemudian pilih </span><b>Setting/Pengaturan</b><span id="fullpost"> dan <b>Izin</b></span></li>
</ul><ul><li>Sobat hanya perlu mengklik beri <b>Privilese Admin</b> sebagai contoh:</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMFjpU6elyKexKtJYpe9NR3JFqGI2au2wKoTSvkqXoRCEYZRsIrj8sOfYhxeESegJYyg5p_hzBUtctP36XJZpvMzVc6mcpYvpC6yadE6YtKEefCICHNqtrv2xQKNjQKMpz_nBBVejrVpE/s1600/Admin+Nobi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMFjpU6elyKexKtJYpe9NR3JFqGI2au2wKoTSvkqXoRCEYZRsIrj8sOfYhxeESegJYyg5p_hzBUtctP36XJZpvMzVc6mcpYvpC6yadE6YtKEefCICHNqtrv2xQKNjQKMpz_nBBVejrVpE/s320/Admin+Nobi.jpg" width="320" /></a></div><br />
<div style="text-align: right;"><span style="color: #0b5394; font-size: large;">Semoga tutorial kali ini Bermanfaat.....</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com2tag:blogger.com,1999:blog-3036616029674835593.post-30711503207115498182010-12-18T21:57:00.000-08:002010-12-25T00:17:42.913-08:00Memasang Reply Atau Balas Pada Kotak Komentar BlogAssalamualaikum sahabat blogger tak henti-hentinya saya membuat posting tentang tips blogger untuk blog sobat nah posting kali ini kita akan membahas tentang memasang reply atau balas komentar di kotak komentar blog. Memang sih salah satu opsi cara membalas komentar dengan cepat dan praktis adalah dengan memasang widget replay pada kotak komentar blog. Pada dasarnya sama saja dengan membalas komentar pada umumnya, namun cara ini lebih praktis sekaligus cepat. untuk hasilnya silahkan lihat pada gambar dibawah.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRldzqXN-24klPA_-Hj4mFwya5Eq1fkYBi2gu7Vr2QAtKfxMvhcUuR4ZEtwmtKHuUjHs8m5vZ2qWfn4k6N-h9C9XrLkcEsL4uJ393JEBOwnkvHpjXkeaQVSkbfKmS5TImpViP6UNofCWYh/s1600/reply.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRldzqXN-24klPA_-Hj4mFwya5Eq1fkYBi2gu7Vr2QAtKfxMvhcUuR4ZEtwmtKHuUjHs8m5vZ2qWfn4k6N-h9C9XrLkcEsL4uJ393JEBOwnkvHpjXkeaQVSkbfKmS5TImpViP6UNofCWYh/s1600/reply.png" /></a></div><br />
<br />
Nah bagi sobat yang belum memasangnya, berikut ini ada sedikit langkah mudah untuk memasangnya di blog sobat. Check This Out.<br />
<br />
<div style="color: #b45f06;"><b>Untuk memasang reply atau balas komentar pada komentar blog ikuti saja langkah langkah dibawah ini :</b></div><br />
<ul><li>Pada dasbor pilih rancangan kemudian Edit HTML</li>
</ul><ul><li>Jangan lupa <b>download template lengkap</b> biar aman.</li>
</ul><ul><li>Lalu centang Expand Template Widget</li>
</ul><ul><li>Kemudian cari kode dibawah ini pada template blog anda:</li>
</ul><br />
<blockquote><data:commentPostedByMsg/></blockquote><br />
<ul><li>Apabila sudah ketemu, Copy kode dibawah ini dan pastekan diatas kode <data:commentPostedByMsg/>.</li>
</ul><br />
<blockquote><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=<span style="color: #990000;">YOUR-BLOG-ID</span>&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><span style="color: #990000;">Reply Comment</span></a></span></blockquote><br />
<ul><li>Selanjunya ganti kode yang berwarna merah dengan id blog sobat. Untuk emlihat id blog sobat silahkan lihat pada adress pada browser seperti pada gambar dibawah.</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_5D4Wsb3wFclgQyXbuwxizQ4Svznw_VInM6nBZPiNlQ3OHA1qsw4SMBbWpjzffOuuaInpzBko-MKtr4SPQ4hYg2zmgjOAkholass98JCuV8R1fUS1NKanlFk9JyL4vdQDVQdjSKcBalK/s1600/image_thumb%255B5%255D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="36" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_5D4Wsb3wFclgQyXbuwxizQ4Svznw_VInM6nBZPiNlQ3OHA1qsw4SMBbWpjzffOuuaInpzBko-MKtr4SPQ4hYg2zmgjOAkholass98JCuV8R1fUS1NKanlFk9JyL4vdQDVQdjSKcBalK/s320/image_thumb%255B5%255D.png" width="320" /></a></div><br />
<ul><li>Selanjutnya Klik Simpan Template Selesai</li>
</ul><br />
<div class="note">Anda dapat mengganti tulisan Reply Comment sesuai dengan selera anda</div><br />
<div style="color: #0b5394; text-align: right;"><span style="font-size: large;">Selamat mencoba, semoga anda berhasil !</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com10tag:blogger.com,1999:blog-3036616029674835593.post-28619957325049038132010-12-18T20:43:00.000-08:002010-12-25T00:13:12.161-08:00Memodifikasi Tampilan Kotak Komentar BlogMungkin diantara para sahabat blogger,sudah bosan dengan model kotak komentar pada blog sobat atau berniat untuk memodifikasi kotak komentar blog anda. Nah pada tutorial kali ini kita akan belajar bagaimana <a href="http://nobinoku.blogspot.com/2010/12/memodifikasi-tampilan-kotak-komentar.html">memodifikasi tampilan kotak komentar blog</a> sobat supaya lebih menarik dan pastinya lebih keren dukz hehehehe. Untuk demonya sobat silahkan sobat lihat pada gambar dibawah ini:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://img694.imageshack.us/img694/8052/gam02thumb3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://img694.imageshack.us/img694/8052/gam02thumb3.png" /></a></div><br />
Bagaimana setelah sobat melihat gambar diatas apakah sobat tertarik tuk membuatnya??? Oh ya sampaek lupa sebenarnya tutorial kali ini saya peroleh juga dari hasil blogwalking saya dari sahabat blogger ( Eitss,,bukan copas aja lo) hehehehe. Check This Out.<br />
<br />
<div style="color: #b45f06;"><b>Untuk memodifikasi tampilan kotak komentar blog ikuti saja langkah langkah dibawah ini :</b></div><br />
<ul><li>Pada dasbor pilih rancangan kemudian Edit HTML</li>
</ul><ul><li>Lalu centang Expand Template Widget</li>
</ul><ul><li>Jangan lupa <b>Download Template Lengkap</b> biar aman</li>
</ul><ul><li>Setelah itu cari kode berikut ini : </li>
</ul><blockquote><br />
/* Comments<br />
----------------------------------------------- */<br />
<div style="color: #990000;">#comments h4 {</div>margin:1em 0;<br />
font-weight: bold;<br />
line-height: 1.4em;<br />
text-transform:uppercase;<br />
letter-spacing:.2em;<br />
color: $sidebarcolor;<br />
}<br />
#comments-block {<br />
margin:1em 0 1.5em;<br />
line-height:1.6em;<br />
}<br />
#comments-block .comment-author {<br />
margin:.5em 0;<br />
}<br />
#comments-block .comment-body {<br />
margin:.25em 0 0;<br />
}<br />
#comments-block .comment-footer {<br />
margin:-.25em 0 2em;<br />
line-height: 1.4em;<br />
text-transform:uppercase;<br />
letter-spacing:.1em;<br />
}<br />
<div style="color: #990000;">#comments-block .comment-body p {</div><div style="color: #990000;">margin:0 0 .75em; }</div></blockquote><br />
<div class="hint"><span style="color: #38761d; font-size: large;">Nb</span> : Mungkin setiap bagian code css komentar berbeda-beda pada setiap template.</div><br />
<ul><li>Setelah itu ganti css komentar diatas dengan css komentar dibawah ini :</li>
</ul><br />
<blockquote>/* Comments<br />
----------------------------------------------- */<br />
.commentlistdiv {<br />
margin-top: 10px;padding:10px;<br />
background: #FFF;border:<br />
1px dotted #ddd;font-size: 0.75em;color: #666;}<br />
<br />
.commentlistdiv h1 {font-size: 1.3em;<br />
color: #366799;border-bottom: 1px solid #eee;<br />
line-height: 1.5em;}<br />
.commentlist li {background: #fff;<br />
border-bottom: 1px dotted #ddd;padding: 20px;}<br />
.commentlist li.alt {background: #fff;}<br />
<br />
.pane_l {float: left;display: inline;<br />
width: 160px;min-width: 160px;max-width: 160px;<br />
border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;}<br />
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}<br />
<br />
.c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;}<br />
.c_avatar {display: block;margin: 0px 0px 7px 0px;}<br />
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;}<br />
.c_approved {color: #aaa;font-size: 0.9em;}<br />
.comment-form { background:#EFEFEF; border:5px solid #cccccc;<br />
margin:0 10px 20px 10px; padding:10px 0 0 15px; }<br />
.owner-Body {display: block;line-height: 1.5em;margin-left: 201px;}<br />
.owner-Body p {<br />
font-size:100%;<br />
margin:0 0 .2em 0;<br />
color:#FF0000;<br />
text-decoration:bold;<br />
}</blockquote><br />
<ul><li>Setelah itu cari lagi kode dibawah ini :</li>
</ul><br />
<blockquote><div style="color: #990000;"><dl id='comments-block'></div><div style="color: #990000;"><b:loop values='data:post.comments' var='comment'></div><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'><br />
<a expr:name='data:comment.anchorName'/><br />
<b:if cond='data:comment.authorUrl'><br />
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br />
<b:else/><br />
<data:comment.author/><br />
</b:if><br />
<data:commentPostedByMsg/><br />
</dt><br />
<dd class='comment-body'><br />
<b:if cond='data:comment.isDeleted'><br />
<span class='deleted-comment'><data:comment.body/></span><br />
<b:else/><br />
<p><data:comment.body/></p><br />
</b:if><br />
</dd><br />
<dd class='comment-footer'><br />
<span class='comment-timestamp'><br />
<a expr:href='data:comment.url' title='comment permalink'><br />
<data:comment.timestamp/><br />
</a><br />
<b:include data='comment' name='commentDeleteIcon'/><br />
</span><br />
</dd><br />
</b:loop><br />
<div style="color: #990000;"></dl></div></blockquote><br />
<ul><li>Setelah ketemu kemudian ganti semua kode diatas dengan kode dibawah ini :</li>
</ul><br />
<blockquote><div style="color: #990000;"><ul class='commentlist'></div><b:loop values='data:post.comments' var='comment'><li><br />
<div class='pane_l'><br />
<div class='c_author'><br />
<b:if cond='data:comment.authorUrl'><br />
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><br />
<b:else/><br />
<data:comment.author/><br />
</b:if><br />
<data:commentPostedByMsg/><br />
</div><br />
<div class='c_avatar'/><br />
<div class='c_date'><data:comment.timestamp/></div><br />
<div class='c_approved'/><br />
</div><br />
<b:if cond='data:comment.author == data:post.author'><br />
<div class='owner-Body'><br />
<p><data:comment.body/></p><br />
</div><br />
<b:else/><br />
<div class='pane_r'><br />
<data:comment.body/><br />
</div><br />
</b:if><br />
<div class=' clear'/></li><br />
</b:loop><br />
<div style="color: #990000;"></ul></div></blockquote><br />
<ul><li>Langkah terakhir Simpan Template...</li>
</ul><br />
<div style="color: #0b5394; text-align: right;"><span style="font-size: large;">Seperti biasa semoga tutorial kali ini bermanfaat untuk sobat.....</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com3tag:blogger.com,1999:blog-3036616029674835593.post-79010308088185720882010-12-14T07:59:00.000-08:002011-03-03T03:59:10.301-08:00Cara Membuat Effect Page Peel Dengan jQueryAssalamualaikum sobat blogger. Pada tutorial kali ini saya share ilmu lagi kepada sobat tentang <a href="http://nobinoku.blogspot.com/2010/12/membuat-effect-page-peel-dengan-jquery.html">Cara Membuat Effect Page Peel Dengan jQuery</a>. Sebenarnya apa sih page peel itu??? Page Pell adalah efek untuk membuat bagian pojok atas blog seakan-akan merupakan sebuah kertas yang dapat tertekuk, dan akan terbuka jika di disorot oleh mouse. Untuk Contohnya dapat sobat arahkan mouse pada pojok kanan atas blog saya. Atau dapat sobat lihat pada gambar dibawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl1W6E1k7BhaM6aKj-kL2UpCtan19JqtSdNzlwb2Mi1Jtf6FHJLfrX2n8nTunbstBVbzZvFbbvHLzriVjUgfOKrGP-614HuHzAiqc5lMqtXR4AHicKamwPcyQ1etlxXhuv9C_ESew_taXV/s1600/page+peel+effect+nobi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl1W6E1k7BhaM6aKj-kL2UpCtan19JqtSdNzlwb2Mi1Jtf6FHJLfrX2n8nTunbstBVbzZvFbbvHLzriVjUgfOKrGP-614HuHzAiqc5lMqtXR4AHicKamwPcyQ1etlxXhuv9C_ESew_taXV/s320/page+peel+effect+nobi.png" width="320" /></a></div><br />
Terlihat bukan effect page peelnya. Tertarik untuk membuatnya???? Untuk membuat effect page peel ini mudah kok sobat ikuti saja langkah-langakah dibawah ini.<br />
<br />
1. Log in dulu ke blogger<br />
2. Pilih Rancangan kemudian Edit HTML<br />
3. Jangan lupa <b>download template lengkap</b> untuk jaga-jaga<br />
4. Selanjutnya cari kode <span style="color: #134f5c;">]]></b:skin></span> dan simpan script berikut diatasnya<br />
<blockquote>#pageflip {<br />
position: relative;<br />
right: 0; top: 0;<br />
float: right; <br />
}<br />
#pageflip img {<br />
width: 50px; height: 52px;<br />
z-index: 99;<br />
position: absolute;<br />
right: 0; top: 0;<br />
-ms-interpolation-mode: bicubic;<br />
}<br />
#pageflip .msg_block {<br />
width: 50px; height: 50px;<br />
overflow: hidden;<br />
position: absolute;<br />
right: 0; top: 0;<br />
background: url(<span style="color: #38761d;">http://i1199.photobucket.com/albums/aa462/nibinoku/Nobinoku%20album%20menu/subscribet.png</span>) no-repeat right top;<br />
}</blockquote>5. Selanjutnya cari kode <span style="color: #0b5394;"></head></span> dan simpan script berikut diatasnya.<br />
<blockquote><script type='text/javascript'> <br />
$(document).ready(function(){<br />
//Page Flip on hover<br />
$(&quot;#pageflip&quot;).hover(function() {<br />
$(&quot;#pageflip img , .msg_block&quot;).stop()<br />
.animate({<br />
width: &#39;307px&#39;, <br />
height: &#39;319px&#39;<br />
}, 500); <br />
} , function() {<br />
$(&quot;#pageflip img&quot;).stop() <br />
.animate({<br />
width: &#39;50px&#39;, <br />
height: &#39;52px&#39;<br />
}, 220);<br />
$(&quot;.msg_block&quot;).stop() <br />
.animate({<br />
width: &#39;50px&#39;, <br />
height: &#39;50px&#39;<br />
}, 200);<br />
});<br />
});<br />
</script> <br />
<script type='text/javascript'><br />
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);<br />
</script></blockquote>6. Langkah terakhir cari lagi kode <span style="color: #134f5c;"><body></span> kemudian copas kode dibawah ini dan taruh di dibawahnya.<br />
<blockquote><div id='pageflip'><br />
<a href='<span style="color: #990000;">http://feeds.feedburner.com/nobinoku</span>'><img alt='' src='<span style="color: #38761d;">http://i1199.photobucket.com/albums/aa462/nibinoku/Nobinoku%20album%20menu/pageflip.png</span>'/></a><br />
<div class='msg_block'/><br />
</div></blockquote>7. Selanjutnya klik <b>Simpan template</b><br />
8. Selesai effect page peel sudah terpasang di blog anda<br />
<br />
<div class="hint"><b>Keterangan</b> : Sobat dapat mengganti alamat <span style="color: #990000;">http://feeds.feedburner.com/nobinoku</span> dengan alamat feed burner anda. Selain itu sobat dapat mengganti backround page peelnya sesuai dengan template anda.</div><br />
<div style="text-align: right;"><span style="color: #351c75; font-size: large;">Akhir kata semoga tutorial kali ini bermanfaat.....</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com5tag:blogger.com,1999:blog-3036616029674835593.post-75718428358662063602010-12-12T01:13:00.000-08:002011-03-03T04:02:56.594-08:00Membuat Slider Zinmag PrimusBismillah membuat slider zinmag primus setelah sebelumnya aku telah share ilmu kepada sobat tentang <a href="http://nobinoku.blogspot.com/2010/10/membuat-slider-content-dengan-animasi-j.html">Membuat Slider Content Dengan Animasi jQuery</a> pada tutorial kali ini saya akan menjelaskan kepada sobat tentang Membuat Slider Zinmag Primus. Mungkin dari para sobat blogger ada yang pernah berkunjung ke suatu blog yang menggunakan template Zigmag Primuz. Sebagai contoh seperti blognya <a href="http://bangdel.blogspot.com/">Bangdel</a> atau <a href="http://www.i-om.co.cc/">i-om</a> yang memakai slider zigmag primus. Oh ya kalo kurang jelas sobat bisa melihat pada gambar berikut.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpsxjMEe-v31X9TOeRHoHJUueM-TZ3PnakGpopuy2lfk1r39QyxhcVmG-SKHc80Pqhjy8xERW1PbLYORZpC5vcva01HEdceMjE95_zYYMgmnOQ8FPnu0GytykeBd_gMjmsXXwInZtKdWYW/s1600/zinmagprimus.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpsxjMEe-v31X9TOeRHoHJUueM-TZ3PnakGpopuy2lfk1r39QyxhcVmG-SKHc80Pqhjy8xERW1PbLYORZpC5vcva01HEdceMjE95_zYYMgmnOQ8FPnu0GytykeBd_gMjmsXXwInZtKdWYW/s320/zinmagprimus.jpg" width="320" /></a></div><br />
Jadi nanti pada halaman muka/sekitar header, nanti ada slide yang bisa diisi dengan berbagai macam kreasi sobat seperti headline,iklan dsb. Biasanya untuk penempatan slider zinmag primus terletak dibawah header. Tetapi sobat dapat menyesuaikan pada template masing-masing. Oh ya sampek lupa untuk refrensinya sobat dapat melihatnya di template buatan <a href="http://bloggerstyles.com/">bloggerstyles.com</a> atau <a href="http://btemplates.com/">http://btemplates.com/</a> Bagaimana tertarik????<br />
<br />
<div style="color: #b45f06;"><b>Untuk membuatnya ikuti saja langkah-langkah berikut ini:</b></div><br />
1.Log in dulu ke account blog anda<br />
2.Masuk Ke Rancangan --> Edit HTML --> Centang Expand Template Widget<br />
3.Jangan lupa <b>download template lengkap</b> untuk jaga-jaga<br />
4.Selanjutnya cari kode <span style="color: #0b5394;">]]></b:skin></span> dan simpan script berikut diatasnya<br />
<blockquote>/* Slider Code<br />
-------------------- */<br />
#slider {<br />
background:url(<span style="color: #38761d;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsjJWkDpzZTKVcsHBrRYdx0Tm1AaJy0ij47uRcbfsn3gj2eku8ZxwSHVyE2ozNXxWgLv34B2HF5FBue4lJWbaf2n_Bsj2XQbBbiDS9x7qucue96IDBxt0GRF6dVqjUUQm2tPyNxzPY4rI/s1600/slide.png</span>);<br />
height: 229px;<br />
overflow: hidden;<br />
position: relative;<br />
margin: 5px 0;<br />
}<br />
#mover {<br />
width: auto;<br />
position:absolute;<br />
overflow:hidden;<br />
}<br />
.slide {<br />
padding: 20px 0px;<br />
width: 900px;<br />
float: left;<br />
position: relative;<br />
height:200px;<br />
}<br />
.slide h2 {<br />
font-family:georgia, Helvetica, Sans-Serif;<br />
font-size: 18px;<br />
color: #ac0000;<br />
padding:0px 0px 0px 30px;<br />
margin:0px 0px;<br />
width:500px;<br />
overflow:hidden;<br />
}<br />
.slide h2 a:link, .slide h2 a:visited {<br />
color:#fff;<br />
background-color: transparent;<br />
}<br />
.slide h2 a:hover {<br />
color: #ddd;<br />
background-color: transparent;<br />
}<br />
span.slmet {<br />
color: #DF0101;<br />
font-size: 10px;<br />
font-family:Tahoma, georgia, Helvetica, Sans-Serif;<br />
line-height: 20px;<br />
width: 500px;<br />
padding:0px 0px 0px 30px;<br />
margin:0px 0px;<br />
text-transform:uppercase;<br />
}<br />
.slide p {<br />
color: #fff;<br />
font-size: 12px;<br />
font-family:georgia, Helvetica, Sans-Serif;<br />
text-align: justify;<br />
line-height: 20px;<br />
width: 500px;<br />
padding:0px 0px 0px 30px;<br />
margin:0px 0px;<br />
}<br />
.slide img {<br />
position: absolute;<br />
top: 20px;<br />
left: 600px;<br />
background:#fff;<br />
padding:10px 10px;<br />
}<br />
#slider-stopper {<br />
position: absolute;<br />
font-family: trebuchet;<br />
top: 100px;<br />
right: 50px;<br />
color: #0B610B;<br />
padding: 3px 12px;<br />
font-size: 14px;<br />
font-weight:bold;<br />
text-transform: uppercase;<br />
z-index: 1000;<br />
}</blockquote><br />
<div class="hint"><ul><li>Ganti Url gambar dengan Url gambar kalian (Sesuaikan dengan template sobat)</li>
</ul><ul><li>Kemudian Atur posisi gambar, tulisan dengan cara mengedit css diatas.</li>
</ul></div><br />
5.Langkah selanjutnya cari kode </head> dan simpan script berikut diatasnya<br />
<blockquote><script src='<span style="color: #990000;">http://myscriptforme.googlecode.com/files/jquery-1.2.6.min.js</span>' type='text/javascript'/><br />
<script src='<span style="color: #990000;">http://myscriptforme.googlecode.com/files/slider.js</span>' type='text/javascript'/><br />
<script type="text/javascript"><!--//--><![CDATA[//><!--<br />
sfHover = function() {<br />
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");<br />
for (var i=0; i<sfEls.length; i++) {<br />
sfEls[i].onmouseover=function() {<br />
this.className+=" sfhover";<br />
}<br />
sfEls[i].onmouseout=function() {<br />
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");<br />
}<br />
}<br />
}<br />
if (window.attachEvent) window.attachEvent("onload", sfHover);<br />
//--><!]]></script></blockquote>6.Sekarang cari kode berikut ini untuk penempatan silder zinmag primusnya.<br />
<blockquote><div style="color: #b45f06;"><div id='header-wrapper'></div>..........<br />
.........<br />
<div style="color: #b45f06;"></b:section></div></blockquote>7.Langkah terakhir simpan script berikut dibawahnya<br />
<blockquote><!-- Casing --><br />
<div id='casing'><br />
<!-- Slider --><br />
<div id='slider'><br />
<div id='mover'><br />
<div class='slide'><br />
<span class='slmet'> <span style="color: #38761d;">DIPOSKAN OLEH : SAYA</span> </span><br />
<h2><a href='<span style="color: #b45f06;">URL TUJUAN</span>'><span style="color: #38761d;">JUDUL POSTINGAN KALIAN</span></a></h2><br />
<p><span style="color: #990000;">TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</span></p><br />
<img alt='<span style="color: #b45f06;">keterangan GAMBAR</span>' src='<span style="color: #38761d;">URL GAMBAR KALIAN</span>'/><br />
</div><br />
<div class='slide'><br />
<span class='slmet'><span style="color: #38761d;"> DIPOSKAN OLEH : SAYA</span> </span><br />
<h2><a href='<span style="color: #b45f06;">URL TUJUAN</span>'><span style="color: #38761d;">JUDUL POSTINGAN KALIAN</span></a></h2><br />
<p><span style="color: #990000;">TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</span></p><br />
<img alt='<span style="color: #b45f06;">keterangan GAMBAR</span>' src='<span style="color: #38761d;">URL GAMBAR KALIAN</span>'/><br />
</div><br />
<div class='slide'><br />
<span class='slmet'> <span style="color: #38761d;">DiPOSKAN OLEH : SAYA</span> </span><br />
<h2><a href='<span style="color: #b45f06;">URL TUJUAN</span>'><span style="color: #38761d;">JUDUL POSTINGAN KALIAN</span></a></h2><br />
<p><span style="color: #990000;">TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</span></p><br />
<img alt='<span style="color: #b45f06;">keterangan GAMBAR</span>' src='<span style="color: #38761d;">URL GAMBAR KALIAN</span>'/><br />
</div><br />
</div><br />
<!-- /Mover --><br />
</div><br />
<!-- /Slider --><br />
</div><br />
<div class='clear'/></blockquote>8.Simpan template kemudian preview hasilnya<br />
<br />
<div class="hint"><ul><li>Ganti <span style="color: #38761d;">DIPOSKAN OLEH : SAYA</span> dengan <b><span style="color: #38761d;">Penulis / Nama Kalian</span></b></li>
</ul><ul><li>Ganti <span style="color: #b45f06;">URL TUJUAN</span> dengan <b><span style="color: #b45f06;">Link yang akan kalian tuju</span></b></li>
</ul><ul><li>Ganti <span style="color: #38761d;">JUDUL POSTINGAN KALIAN</span> dengan <b><span style="color: #38761d;">judul postingan yang ditampilkan</span></b></li>
</ul><ul><li>Ganti <span style="color: #990000;">TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</span> dengan <b><span style="color: #990000;">postongan artikel kalian yang ditampilkan</span></b></li>
</ul><ul><li>Ganti <span style="color: #b45f06;">keterangan GAMBAR</span> dengan <b style="color: #b45f06;">keterangan gambar kalian</b></li>
</ul><ul><li>Ganti <span style="color: #38761d;">URL GAMBAR KALIAN</span> dengan <b><span style="color: #38761d;">URL gambar yang akan kalian pakai</span></b></li>
</ul></div><br />
<div style="text-align: right;"><span style="color: #0b5394; font-size: large;">Semoga Berhasil Sobat...... </span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com24tag:blogger.com,1999:blog-3036616029674835593.post-43138819327542650662010-12-10T23:03:00.000-08:002010-12-23T23:24:40.336-08:00Memperpanjang Domain .CO.CC Dengan Gratis<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBH5ofQNp8lLyf0-LT3ITOg8ZaWJcZ9B5OZapqo7Lq_bAuo1_UwMxkV6wZIwApIeFuLxnT9VD_hht5Cra5I2gu1rYQDaxGSP3lqGev3lspbA589W1t_iZXf8Y2_AZZl3c6OP5a1F9FaDI/s1600/Logo+Domain+Co-Cc.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBH5ofQNp8lLyf0-LT3ITOg8ZaWJcZ9B5OZapqo7Lq_bAuo1_UwMxkV6wZIwApIeFuLxnT9VD_hht5Cra5I2gu1rYQDaxGSP3lqGev3lspbA589W1t_iZXf8Y2_AZZl3c6OP5a1F9FaDI/s1600/Logo+Domain+Co-Cc.jpg" /></a></div>Setelah sebelumnya aku telah share ilmu kepada sobat tentang <a href="http://nobinoku.blogspot.com/2010/12/mengubah-domain-blogspot-menjadi-cocc.html">mengubah domain blogspot menjadi .co.cc</a>, Pada tutorial kali ini saya akan share ilmu kepada sobat tentang memperpanjang domain .co.cc dengan gratis alias tanpa memungut biaya. Seperti domain lainnya, <a href="http://co.cc/">co.cc</a> juga harus diperpanjang. Banyak anggapan bahwa memperpanjang domain .co.cc membutuhkan uang. Tetapi anggapan itu salah untuk memperpanjang domain .co.cc benar-benar gratis kok. Hanya saja ada satu syarat yang harus dipenuhi oleh sobat yakni domain anda punya harus digunakan secara pribadi tidak untuk kepentingan komersial.<br />
<br />
<br />
Tetapi mengenai panjelasan apakah blog domain blog itu digunakan untuk komersial atau non komersial saya tidak tahu secara pasti. Untuk yang ingin <a href="http://nobinoku.blogspot.com/2010/12/memperpanjang-domain-cocc-dengan-gratis.html">memperpanjang domain co.cc dengan gratis</a>,<br />
<br />
<div style="color: #b45f06;"><b>Ikuti saja langkah - langkah berikut :</b></div><br />
<ul><li>Pertama-tama log in dulu ke <a href="http://co.cc/">co.cc</a> (Dengan cara mengklik <b>Returning User, Sign in Here</b> seperti gambar dibawah)</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsCXdBVdXEINGmuVHQ7KNqMfzkvcIz1xvCSzVN9k8M0pA7ohyNAHOMHrZE6E_R1ZiwATP6l6nmzPos5jiIh3AlWkP-mFiHTKuiCJZX0O1EuiIYC4sE6G-jmSlblf5ravRIp-onw8hdITSv/s1600/1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsCXdBVdXEINGmuVHQ7KNqMfzkvcIz1xvCSzVN9k8M0pA7ohyNAHOMHrZE6E_R1ZiwATP6l6nmzPos5jiIh3AlWkP-mFiHTKuiCJZX0O1EuiIYC4sE6G-jmSlblf5ravRIp-onw8hdITSv/s1600/1.jpg" /></a></div><br />
<br />
<ul><li>Setelah itu masukkan email dan password sobat untuk login. Ketikkan kode konfirmasi lalu klik tombol Sign In.</li>
</ul><ul><li>Langakah selanjutnya klik <b>Domain Setting.</b></li>
</ul><ul><li>Selanjutnya Pilih <b>Renew/Memperbarui</b>, pada domain yang expired seperti pada gambar dibawah.</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDC-9-V1hWn3-OR1JtneHTZQSwq39KnzKB9Fq4dM4LXRpDqhv_ZQKSrFmUcjvDEIHyl4ccrkl1EmUDeyPFjEEV_TudEQOcesKmvE7VJl4J1Cz9KAq6qbcg5Kk8zqYGZV9UQflRP1AJLiM/s1600/perpanjang+domain+co.cc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDC-9-V1hWn3-OR1JtneHTZQSwq39KnzKB9Fq4dM4LXRpDqhv_ZQKSrFmUcjvDEIHyl4ccrkl1EmUDeyPFjEEV_TudEQOcesKmvE7VJl4J1Cz9KAq6qbcg5Kk8zqYGZV9UQflRP1AJLiM/s1600/perpanjang+domain+co.cc.png" /></a></div><br />
<ul><li>Agar sobat dapat memeperpanjang secara gratis pilih <b>Personal</b> lalu centang tulisan <span style="color: #38761d;">If the purpose is not personal....</span> Seperti gambar dibawah</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj9Ff8AHpoMWhNeikXA-WZ6c_YaN_uWMXQh7VayGxbVHBihLXEPInJExdocf6vVgpC1HGrndoZshq3ezFPFq99XOWnnHOg1dehclh8t-ZQz_HunKnnxTDNs46lEvYKItFyk1t-K-qqHoBO/s1600/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj9Ff8AHpoMWhNeikXA-WZ6c_YaN_uWMXQh7VayGxbVHBihLXEPInJExdocf6vVgpC1HGrndoZshq3ezFPFq99XOWnnHOg1dehclh8t-ZQz_HunKnnxTDNs46lEvYKItFyk1t-K-qqHoBO/s1600/3.jpg" /></a></div><br />
<br />
<ul><li>Langkah terakhir klik tombol <b>Continue.</b></li>
</ul><br />
Jadi, bagi sobat yang ingin membuat domain gratis, gunakan saja .<a href="http://co.cc/">co.cc</a> dan jangan takut untuk memakainya karena ternyata domain .co.cc benar-benar gratis. Akhir kata Semoga tutorial kali ini bermanfaatArga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com8tag:blogger.com,1999:blog-3036616029674835593.post-13998599026255785912010-12-09T23:27:00.000-08:002010-12-23T23:33:55.709-08:00Mengubah Domain Blogspot menjadi .CO.CCBismilah Merubah domain blogspot menjadi <a href="http://.co.cc/">.co.cc</a>. Biasanya pada awal kita membuat blog kita akan mendapat domain seperti berikut ini <span style="color: #38761d;">http://namablog.blogspot.com/</span>, selain domain blogspot kita bisa merubahnya juga menjadi domain co.cc. Salah satu penyedia layanan domain gratis yakni <a href="http://co.cc/">co.cc</a>. jadi nantinya menjadi <span style="color: #38761d;">www.namablog.co.cc</span> bagaimana keren sekaligus simple bukan.<br />
<br />
<center><iframe frameborder="0" framespacing="0" height="60" noresize="" scrolling="no" src="http://www.co.cc/get_banner/get_banner_link.php?id=000000&s=46860a&w=468&h=60" width="468"></iframe></center><br />
<br />
<div style="color: #b45f06;"><b>Ok, marilah kita mulai saja, caranya adalah sebagai berikut :</b></div><br />
<ul><li>Langkah pertama yang perlu dilakukan adalah mendaftar dahulu pada layanan <b><a href="http://co.cc/">co.cc</a>.</b></li>
</ul><ul><li>Setelah itu dapatkan nama domain terlebih dahulu dengan cara mengisi pada kotak yang tersedia, dan lalu klik <b>Check Availability</b>. Atau lebih simplenya gunakan kotak yang ada dibawah ini (Isikan domain yang ingin kamu daftarkan!) :</li>
</ul><br />
<center><iframe frameborder="0" framespacing="0" height="50" noresize="" scrolling="no" src="http://www.co.cc/outside_search/os.php?id=000000&target=_top&bgc=e5e3e3&tc=000000&sw=Check%20availability" width="550"></iframe></center><br />
<br />
<ul><li>Setelah mendapatkan nama domain yang sesuai,setelah itu masuk pada menu <b>Domain setting & Manage Domain</b> kemudian klik <b>Setup</b></li>
</ul><ul><li>Abaikan Menu 1 ->> manage DNS / kosongkan name servernya anda langsung klik menu 2 ->> Zona Record</li>
</ul><ul><li><span style="color: #b45f06;">Lalu isi record dengan isian berikut ini</span> : </li>
</ul><br />
<span style="color: #38761d;">Host</span> : isi dengan nama domain yang sudah anda daftarkan misal : <span style="color: #bf9000;">www.namablog.co.cc</span><br />
<span style="color: #38761d;">TTL</span> : 1 D (tidak perlu dirubah)<br />
<span style="color: #38761d;">Type</span> : cname<br />
<span style="color: #38761d;">Value</span> : ghs.google.com<br />
<br />
<div style="color: #b45f06;">Untuk contoh menunya seperti gambar dibawah ini</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBGqfu-vjLchtKgSHrn9ToZ0dLayU0TR-Rxyupw7Vq5G8bOUc_qdqtEWt3op7N2hSkELln2z3pxC5BgX51Z5i4kHaQArN5VIyO5rzxYD_oVFZxA8Wzb0kCjtrnPwsWUwXqLJIxrwAJyJap/s1600/nobi+menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBGqfu-vjLchtKgSHrn9ToZ0dLayU0TR-Rxyupw7Vq5G8bOUc_qdqtEWt3op7N2hSkELln2z3pxC5BgX51Z5i4kHaQArN5VIyO5rzxYD_oVFZxA8Wzb0kCjtrnPwsWUwXqLJIxrwAJyJap/s1600/nobi+menu.jpg" /></a></div><br />
<br />
<ul><li>Langkah selanjutnya klik <b>Setup</b></li>
</ul><br />
<div style="color: #b45f06;"><b><span style="font-size: small;">Alhamdulillah</span> kita selesai setting pada co.cc langkah selanjutnya ialah kita setting juga settingan blogger kita. Untuk mengsetting blogger ikuti langkah dibawah ini.</b></div><br />
<ul><li>Seperti biasa log in dulu ke account blogger sobat</li>
</ul><ul><li>Masuk pada menu <b>setting >>> Publishing </b>atau<b> (Pengaturan >> Publikasikan)</b></li>
</ul><ul><li>Langkah selanjutnya pilih “<b>Switch to: • Custom Domain</b>” atau <b>(Berpindah ke : Domain Ubahsuaian)</b></li>
</ul><ul><li><span class="fullpost">Klik <span style="font-weight: bold;">“Already own a domain? Switch to advanced settings” </span>atau<span style="font-weight: bold;"> (Beralihlah ke pengaturan lanjut)</span></span> </li>
</ul><ul><li>Kemudian Isi pada kolom “Your Domain” dengan domain co.cc yang anda daftarkan tadi.</li>
</ul><ul><li>Use a missing files host? pilih <b>No</b>.</li>
</ul><ul><li>Masukan Verivikasi kata yang ditampilkan Seperti pada gambar dibawah dan klik <b>Save setting.</b></li>
</ul><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-OF_fjrh2WC-yGGHKIJ8xoNxTMDSR9j8fjA7D04NqA8_8D16WUcUnqKWhFII1EAYJmKNft1xwT1dedVddcKSTP1Sv82MGPzbwv4eNBW9vTptcSEPRTgnwQPert2zqvPyQ6MzNfCRK0Nqz/s1600/nobi+verivication.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-OF_fjrh2WC-yGGHKIJ8xoNxTMDSR9j8fjA7D04NqA8_8D16WUcUnqKWhFII1EAYJmKNft1xwT1dedVddcKSTP1Sv82MGPzbwv4eNBW9vTptcSEPRTgnwQPert2zqvPyQ6MzNfCRK0Nqz/s1600/nobi+verivication.jpg" /></a></div><br />
<br />
<span style="color: #38761d; font-size: large;">Alhamdulillah</span>, kita sudah selesai, mudah bukan sobat. Domain blog kita sekarang sudah berganti nama domain menjadi co.cc, tinggal menunggu proses sinchronisasinya dari co.cc ke Blogspot. maksimal membutuhkan waktu 24 jam setelah itu kita sudah bisa mengakses url blogspot.com anda dengan nama domain co.cc yang telah kita buat tadi.Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com4tag:blogger.com,1999:blog-3036616029674835593.post-27838829510608150182010-12-08T08:16:00.000-08:002011-03-03T04:14:02.489-08:00Membuat Daftar Isi Blog Dengan Efek jQuery AccordionDaftar isi sangat dibutuhkan karena dengan daftar isi dapat membuat pencarian lebih mudah dan efisien selain itu dengan adanya daftar isi juga dapat membuat blog kita semakin profesional. Selain itu Dipilihnya efek animasi accordion pada daftar isi dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang di susun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Ok untuk Membuat Daftar Isi Blog Dengan Efek jQuery Accordion ikuti saja langkah-langkah berikut ini...<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDf0Y3HEllHtIdTGycRQVYfDZ2oxyvbHFNtx7I1OkxgtBq5QXA8KTmKjM-BNuFfKl_lWMnzC2Ewr-vHgIiU5Dxh8HOVvVTFCeUoozRw3FmV4huoWHYuhMbnTIJ2atrWekrLkBjx0EFdQa/s1600/daftar_isi_accordion.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDf0Y3HEllHtIdTGycRQVYfDZ2oxyvbHFNtx7I1OkxgtBq5QXA8KTmKjM-BNuFfKl_lWMnzC2Ewr-vHgIiU5Dxh8HOVvVTFCeUoozRw3FmV4huoWHYuhMbnTIJ2atrWekrLkBjx0EFdQa/s320/daftar_isi_accordion.png" width="320" /></a></div><br />
<br />
1.Log in dulu ke account blog anda<br />
2.Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.<br />
3.Setelah itu cari kode berikut ini<span style="color: #0b5394;"> </span><b style="color: #0b5394;">]]></b:skin></b><br />
4.Kemudian copas kode dibawah ini dan taruh diatasnya.<br />
<blockquote>#dafis-acc{<br />
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;<br />
font-size:12px;<br />
color:#333;<br />
background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;<br />
padding:2px 0;<br />
border:1px solid #339DC6;<br />
}<br />
.dafis-label{<br />
background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;<br />
font-weight:bold;<br />
line-height:1.4em;<br />
overflow:hidden;<br />
white-space:nowrap;<br />
vertical-align: baseline;<br />
margin: 1px 3px;<br />
outline: none;<br />
cursor: pointer;<br />
text-decoration: none;<br />
padding: 2px 10px;<br />
color: #fff;<br />
text-shadow: 0 1px 1px rgba(0,0,0,.3);<br />
border:1px solid #2F94BA;<br />
}<br />
.dafis-label:hover{<br />
background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;<br />
color:#003366;<br />
}<br />
.dafis-daf ol{<br />
margin:0 0 0 30px !important;<br />
padding:0 !important;<br />
}<br />
.dafis-daf ol li{<br />
background-color:#C9E9F4;<br />
line-height:1.5em;<br />
margin:1px 3px !important;<br />
white-space:nowrap;<br />
text-align:left;<br />
border:1px solid #339DC6;<br />
}<br />
.dafis-daf ol li a{<br />
text-decoration: none !important;<br />
color:#333 !important;<br />
display:block;<br />
padding-left:10px;<br />
}<br />
.dafis-daf ol li a:hover{<br />
background: #7BC4DF;<br />
border-left: 5px #333 solid;<br />
padding-left: 5px;<br />
text-shadow: 0 1px 1px rgba(0,0,0,.3);<br />
}</blockquote>5.Selenjutnya cari kode <b style="color: #0b5394;"></head></b>, lalu letakkan kode dibawah ini diatas kode <b><span style="color: #0b5394;"></head</span>></b>.<br />
<blockquote><div style="color: #b45f06;"><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/></div></blockquote><div class="hint"><b style="color: #990000;">Keterangan</b> : Jika sebelumnya sobat telah memasang scipt <a href="http://nobinoku.blogspot.com/search/label/jQuery"><b>jQuery</b></a> maka cara ini lewati saja langkah diatas</div><br />
6.Kemudian Klik Simpan Template.<br />
<br />
<div style="color: #b45f06;"><b>Langkah Selanjutnya</b></div>1.Buatlah sebuah posting blog dengan judul terserah Misal : Daftar Isi Blog Lengkap Atau Table Of Content.<br />
2.Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode <b>Edit HTML</b>.<br />
<blockquote><script type="text/javascript" src="http://nobinoku.googlecode.com/files/dafis_acc.js"></script><br />
<script src="<span style="color: #990000;">http://namablogsobat.blogspot.com/</span>feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script></blockquote><div class="hint">Ubah <span style="color: #990000;">namablogsobat</span> dengan nama blog anda</div><br />
3.Selanjutnya <b>Klik Terbitkan.</b><br />
<br />
<span style="color: #38761d; font-size: large;">Alhamdullilah</span> Selesai juga ...... Dengan ini blog anda mempunyai daftar isi atau table of content, semoga dengan adanya daftar isi atau table of content dapat membuat pengunjung blog betah berkunjung ke blog sobat.Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com13tag:blogger.com,1999:blog-3036616029674835593.post-90326371742750702602010-12-06T22:18:00.000-08:002010-12-06T22:18:00.223-08:00Submit Blog ke Yahoo Search<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKC4vkWK_o6WnWpXjiQdS-qgWPM7lYPQYeaQJYLpIcOOy9UBUADFiEWfl6n15RSRbyrbHNGGR2atDfHO7KNDjms7wcj2vwLDHgaK5aEAjsUJsiC8QhY5gAJza1XD4fLoICdw-0U-WYyFQJ/s1600/yahoo_messsenger.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKC4vkWK_o6WnWpXjiQdS-qgWPM7lYPQYeaQJYLpIcOOy9UBUADFiEWfl6n15RSRbyrbHNGGR2atDfHO7KNDjms7wcj2vwLDHgaK5aEAjsUJsiC8QhY5gAJza1XD4fLoICdw-0U-WYyFQJ/s200/yahoo_messsenger.png" width="200" /></a></div>Setelah sebelumnya aku telah share ilmu tentang <a href="http://nobinoku.blogspot.com/2010/12/submit-blog-ke-google-search.html">Submit blog ke google search</a>. pada tutorial kali ini aku akan share ilmu kepada sobat tentang mengsubmit blog ke yahoo. Oh ya siapa sih yang tak tahu yahoo situs mesin pencari no2 didunia selain google sekaligus penyedia jasa E-mail gratis. lanjut ke pembahasan kitapun dapat mengsubmit blog kita ke yahoo agar yahoo dapat mengindeks blog kita jika blog sobat sudah tersubmit di Yahoo, kemungkinan besar trafik blog anda pun juga akan meningkat. Bagaimana cara mensubmit Blog di Yahoo?<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="color: #b45f06;"><b>Ikuti langkah-langkah berikut ini.</b></div><br />
<ul><li>Masuk ke alamat berikut ini <a href="https://siteexplorer.search.yahoo.com/submit">Site Explorer - Submit</a></li>
</ul><br />
<ul><li>Setelah itu masuk dengan ID Yahoo anda, jika belum punya buatlah terlebih dahulu.</li>
</ul><br />
<ul><li>Pilih <b>Submit a Website or Webpage. </b></li>
</ul><br />
<ul><li>Masukkan URL Blog anda secara lengkap dan benar. contoh : http://nobinoku.blogspot.com/</li>
</ul><br />
<ul><li>Kemudian klik <b>Submit Url</b></li>
</ul><br />
<div style="color: #b45f06;"><b>Kemudian langkah selanjutnya</b></div><br />
<ul><li>Pilih My Sites yang ada pada sidebar kiri</li>
</ul><br />
<ul><li>Masukkan URL Blog anda secara lengkap</li>
</ul><br />
<ul><li>Klik <b>Add My Site</b></li>
</ul><br />
<ul><li>Setelah itu Akan Muncul Perintah Verifikasi</li>
</ul><br />
<ul><li>Pilih <b>By adding META tag to my home page</b></li>
</ul><br />
<ul><li>Setelah itu akan muncul kode Meta Tag dari yahoo seperti gambar </li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJzrDxZzcobPB9lBorTlvuXd2NIFuMheN-a5CcNUSaWxPkxeGblEG9vS2sqmyxE8C9xcVuxLL87mQliKh9WxdbHV5Z1XLGMsDv-jb99aUF0trDO9MLHNhctxDYtWKRoIQT7CcNJq08pco/s1600/meta+yahoo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJzrDxZzcobPB9lBorTlvuXd2NIFuMheN-a5CcNUSaWxPkxeGblEG9vS2sqmyxE8C9xcVuxLL87mQliKh9WxdbHV5Z1XLGMsDv-jb99aUF0trDO9MLHNhctxDYtWKRoIQT7CcNJq08pco/s1600/meta+yahoo.jpg" /></a></div><br />
<ul><li>Copy seluruh kode lalu biarkan halaman Otentikasi Yahoo</li>
</ul><br />
<ul><li>Masuk ke Blogger Dasbor, Pilih Perancang - Edit HTML</li>
</ul><br />
<ul><li>Letakkan code yang dicopy tadi sesudah code <span style="color: #0b5394;"><head></span> seperti pada gambar</li>
</ul><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkUqi4mPkyevPNYavDA-0PZLoPSVJxNO0mYW9snGpFnQptS_XLKSOgO7O0tGpFVNucSLgPsuJeokbExa5G9LhyphenhyphenVFwsaorgLRo0FSICMfU_dS_8AUYU4CigCvc-Fd3vehHUBsAL1-cnrzZ/s1600/Paste+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkUqi4mPkyevPNYavDA-0PZLoPSVJxNO0mYW9snGpFnQptS_XLKSOgO7O0tGpFVNucSLgPsuJeokbExa5G9LhyphenhyphenVFwsaorgLRo0FSICMfU_dS_8AUYU4CigCvc-Fd3vehHUBsAL1-cnrzZ/s1600/Paste+2.jpg" /></a></div><br />
<br />
<ul><li>Kemudian Simpan Template</li>
</ul><br />
<ul><li>Kembali Ke Yahoo Site Explorer lalu Klik <b>Ready to Authenticate.</b></li>
</ul><br />
<ul><li>Selesai </li>
</ul><div style="color: #38761d; text-align: right;"><span style="font-size: large;"><br />
</span></div><div style="color: #38761d; text-align: right;"><span style="font-size: large;">Semoga tutorial kali ini bermanfaat......</span></div>Arga Anggriawanhttp://www.blogger.com/profile/00631051388707687274noreply@blogger.com6