Blog Telah DI PINDAHKAN ke MotifWeb.blogspot.com
Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Saturday, August 11, 2012

Membuat Form Berlangganan Artikel Via Email Dibawah Postingan dengan Style Unik

Saturday, August 11, 2012

Membuat Form Berlangganan Via Email di Bawah Postingan dengan Style Unik
Hmm..  Sudah lama juga tidak update Blog ini, terakhir update 11 Juli lalu pada postingan Cara memasang widget alexa di blog dan memverifikasi id alexa. Berarti sudah 1 bulan tidak update :|. Bukan tanpa alasan saya tidak update blog ini karena memang sedang sibuk di dunia nyata, hehe. 2 Agustus yang lalu Google update pagerank ya? Alhamdulillah dapat hadiah dari Mas Google walaupun cuma PageRank 1. Saya rasa cukup basa basinya.. heheh, ya sudah langsung saja. Pada postingan kali ini saya akan membagikan sebuah widget yaitu Form berlangganan Via Email di bawah postingan blog dengan tombol Share: Feedburner, Twitter, Facebook dan Google+. Dulu saya pernah juga memposting Cara membuat form berlangganan via email di Feedburner, widget ini juga bisa di taruh di bawah postingan tapi menurut saya tampilan (interface) kurang menarik si pembaca agar bisa berlangganan artikel kita.
Membuat Form Berlangganan Via Email Dibawah Postingan dengan Style Unik


1. Pada Dashboard klik more options, pilih opsi Template > Edit HTML > Proceed
2. Beri checklist pada Expand Widget Templates
3. Cari kode <data:post.body/>
4. Copy kode di bawah ini dan paste-kan di bawah kode tag <data:post.body/>, jika sudah menggunakan Read More otomatis letakkan kodenya di bawah tag kedua atau tag terakhir.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.BDstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGhGRBXdePyrT85DHO42nNDtSEGFEPnM4tYulISIldSjH3DnDEx81RK_Tfdhl7PtPcVjCoEzQCa4A198quZFMUtqeC-sKIvU1AfY1y4nw5CjWVP_SN41ZEgobg42lM-AkEx7IqKf6huLf/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.BDsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BlogDollar98&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Blog Dollar'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='BDstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='BDsubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=BlogDollar98' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXntYaIVQimYnRn9dHZwsYZLgZ-uBl9lksINO8vxgNSu53jHhRpbyxJ3WGOTugjxH6Gau1Y7i2SRoVrhFgapX0BMHj6HXfbIPVmnH0olQQkpZ4Py6j1N4PczrS9b-ShtmvtG_sgxAitA/s1600/rss-30×43.png'/></a>
<a href='http://twitter.com/BlogDollar98' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjUXbakSv13Bod_cpw0sL-4-lQdKQXb-iShrxFj5cMV6FtsJL9hjLlDoNYmkO7Fta4LvePKlmnjpsdsaJ4rv3miD-i06QacxTP9-S86Jd944CjZ1kjNpVa70IHHKeiJZAi6Nx4LgtsxQ8/s1600/twitter-30×43.png'/></a>
<a href='https://www.facebook.com/pages/Blog-Bintaro/444970308870610' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Qo_2eObSHUYcrmCK-GI_4n5LE7y3xL2Ue-jc2T5w20X_W1f4B31XvkOfkIvoBQhEazfbnnp6wGSMrtA__pyb0QBlIhdfeSkkLkidlsm5s5-ZzW-ZQp5-RjEGGXv3rAFWTWhzDs4WONg/s1600/facebook-30×43.png'/></a>
<a href='https://plus.google.com/u/0/117430266445096279185' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWA2v-rVKM08m9Du1mKdmFIueTezOZtSqSS8KW9eqefT-t8KznP3j_Y9_qGQGcEBWdLh-t-LVKUFKYC9hdwjHgyeuDF-8Xj7GWn7ESOXL1yxxfhGiw60RWTMXWlf-_iD6QW_OeRkt-WaA/s1600/googleplus-30×43.png'/></a>
</td>
</tr>
</tbody></table>
</div></div>
</center>
</b:if>
Keterangan: 
  • Ubah  http://feedburner.google.com/fb/a/mailverify?uri=BlogDollar98 dengan url Feedburner anda.
  • Ubah http://twitter.com/BlogDollar98 dengan url Twitter anda.
  • Ubah https://www.facebook.com/pages/Blog-Bintaro/444970308870610 dengan url facebook anda.
  • Dan yang terakhir ubah https://plus.google.com/u/0/117430266445096279185 dengan url Google plus anda.
  • Save Template!
Thanks to Durodola Ridwan for this code
Rating: 5.0

Nur Wahid - Saturday, August 11, 2012

Wednesday, July 11, 2012

Cara Memasang Widget Alexa di Blog dan Memverifikasi ID Alexa

Wednesday, July 11, 2012

Setelah kurang lebih 1 bulan tidak update di Blog ini. Pada postingan kali ini saya akan sharing mengenai Cara Memasang Widget Alexa dan Memverifikasinya.
memasang widget alexa dan memverifikasinya
Tentang Alexa.com
Alexa merupakan sistem traffic terbesar di dunia yang berdiri sejak April 1996. Alexa berdiri di bawah naungan amazon.com. Alexa menyediakan informasi diantaranya tentang blog/website termasuk Top Sites, Statistic Traffic Internet dan Related Links. Alexa juga menyediakan banyak produk yaitu Alexa Traffic Widgets, Reviews Widgets dan Alexa Logos. Tak ketinggalan juga Alexa Toolbar yang menyediakan banyak fitur seperti Alexa Traffic Rank, Related Links, Wayback, Search Analytics dan Web Reviews.


Cara Memasang Widget Alexa di Blog

1. Register terlebih dahulu ke Alexa untuk mendapat akses penuh atau langsung Log In jika sudah memiliki account Alexa. Jika anda tidak ingin repot Daftar Alexa anda bisa memilih opsi Log In with Facebook di sebelah kanan form Log In with alexa account agar lebih cepat.
2. Pilih Products pada menu navigasi horizontal di atas.
3. Lalu pilih opsi Alexa Site Widgets untuk mendapatkan widget alexa.
widget alexa
4. Pilih bentuk widget yang anda inginkan lalu masukkan Url blog anda dan klik Build Widget.
pasang widget alexa
5. Pilih ukuran widget yang ingin anda pasang di  blog anda dan Copy kode Html widget yang di berikan.
widget alexa

Cara Memasukkan Kode Html Widget Alexa di Blog
1. Pada Dashboard pilih Layout > Add  a Gadget > HTML/JavaScript.
2. Pada kotak Content masukkan kode html widget alexa yang sudah anda copy tadi.
cara pasang widget alexa di blog
3. Save.

Cara Verifikasi ID Alexa Blog (Claim Your Site)
1. Log In alexa lalu pilih opsi Products
2. Pilih Claim Your Site untuk mengklaim blog anda.
mengklaim blog
3. Lalu masukkan Url Blog anda dan klik Claim your site.
claim blog anda
4. Free Sign Up untuk mendaftarkan blog anda dan mengklaim secara Gratis.
cara verifikasi id verifikasi alexa
5. Maka akan ada ada 2 opsi untuk mengklaim blog anda. Agar lebih mudah pilih opsi kedua yaitu dengan memasukkan ID verifikasi Alexa ke dalam template Html blog anda. Copy meta tag ID verifikasi alexa tersebut dan paste di bawah kode tag <head> atau di atas kode </head>. Jika sudah memasukkan Meta tag ID verifikasi alexa tersebut silahkan klik Save Template dan kembali kehalaman alexa (Claim your site) dan klik Verify my ID. Jika berhasil maka akan ada konfirmasi bahwa anda sukses mengklaim blog anda. Selesai!

Rating: 5.0

Nur Wahid - Wednesday, July 11, 2012

Sunday, June 10, 2012

Cara Membuat form berlangganan Postingan/Artikel via email di FeedBurner

Sunday, June 10, 2012

Cara Membuat Form Berlangganan Artikel Via FeedBurner - FeedBurner adalah Layanan manajemen web feed yang terdiri dari RSS Feed dan management tools untuk Blogger. Layanan ini gratis disediakan oleh Google, FeedBurner menyediakan banyak fitur seperti pengecekan statistik optimasi Feed, kostumisasi feed, analisis feed, dan lainnya..
1). Pastikan anda sudah login ke Blogger.
2). Kunjungi Feedburner.
3). Masukkan Url Feed Blog anda pada kotak Burn a feed right this instant.
Contoh: - http://blog-dollar98.blogspot.com/feeds/posts/default                                             ATAU - http://blog-dollar98.blogspot.com/feeds/posts/default?alt=rss
Setelah itu klik Next.
Cara membuat FeedBurner

4). Jika berhasil, maka url feed yang anda masukkan akan terverifikasi. Anda bisa mengedit/mengubah Feed tittle dan Feed Adress dengan yang anda inginkan. Kemudian klik Next.
Cara Membuat FeedBurner

5). Proses selesai, feed telah berhasil di buat dan siap untuk digunakan. Setelah itu klik Next.
Cara Membuat FeedBurner

6). Beri tanda checklist pada Clickthroughs, Item enclosure downloads (podcast downloads), dan I want more! Have FeedBurner Stats also track. Lalu klik Next.
cara membuat feed burner

7). Feed blog di feedburner telah berhasil dibuat dan ter-update. Untuk membuat form berlangganan feedburner (Subscribe by email), klik Publicize.
cara membuat feedburner

8). Pada services, pilih opsi Email Subcriptions.
cara membuat feedburner

9). Pilih Aktive pada Email Subcriptions, untuk menempatkan form berlangganan email di Blog Anda.
cara membuat feedburner

10). Kemudian untuk mendapatkan form berlangganan email. Pada Use as a widget in, Pilih opsi Blogger, lalu klik Go!. Maka akan beralih pada Elemen Laman (Page Elements) Blog anda, Lalu klik Add Widget.
cara membuat feedburner
11). Selesai!
Enter your email address:


Delivered by FeedBurner

Baca juga: Cara membuat Form berlangganan di bawah postingan dengan style unik dan menarik.

Happy Blogging!


Rating: 5.0

Nur Wahid - Sunday, June 10, 2012

Friday, June 8, 2012

Cara Membuat Kotak Permalink di Blogspot

Friday, June 8, 2012

Membuat Kotak Permalink di Blogspot

Seo Permalink merupakan salah satu optimasi onpage yang berguna untuk memasang permalink dengan tujuan untuk menambah Internal link pada Posting/Artikel Blog. Selain itu, Permalink juga memudahkan para Website/Blogger lain untuk membuat Link back (Taut Balik) ke salah satu Posting/Artikel blog yang di sukainya, yang secara otomatis juga bisa meningkatkan Popularitas dan Traffic Blog.. Untuk previewnya, anda bisa lihat pada bagian bawah postingan ini..

1. Pastikan anda sudah Login ke Blogger
2. Pada dashboard, pilih Design > Edit HTML
3. Beri Checklist pada "Expand Widget Templates"
4. Cari kode ]]></b:skin>
5. Lalu Copy kode CSS di bawah ini, dan Paste di atas kode ]]></b:skin>
.permalinkblogspot {border: 1px solid #000000; padding: 5px; background: #ffffff;-moz-border-radius:5px;} .permalinkblogspot a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}
Keterangan: 
- 1px adalah size/ukuran ketebalan Border/Garis Tepi pada permalink. Anda bisa mengubah ukuran ketebalan border tersebut sesuai keinginan anda.
- #000000 adalah kode warna Border/Garis tepi permalink. Ubah kode warna tersebut jika anda ingin mengganti warnanya dengan warna lain, dengan menggunakan Html Color Codes (Kode Warna HTML).
- #ffffff adalah adalah kode warna background ke 2, anda bisa menngantinya dengan menggunakan  Html Color Codes (Kode Warna HTML).


6. Cari kode tag <data:post.body/>, bagi yang sudah menggunakan Read More otomatis, akan ada lebih dari 1 tag tersebut.
7. Lalu copy kode di bawah ini dan paste di bawah kode tag <data:post.body/> (Jika pada template yang saya gunakan, saya meletakkan kode di  bawah ini pada tag kedua dan begitu juga pada kebanyakan template. Jika anda ragu coba letakkan di bawah tag pertama dahulu. Jika tidak muncul permalinknya, letakkan kodenya di bawah tag kedua ATAU tag terakhir)

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalinkblogspot'> <div style='line-height:1.4em;padding: 1px; margin: 2px;background-color: #ffffff;font-size: 11px ;text-align: justify'>
<span>Anda sedang membaca artikel tentang <strong><u><a expr:href='data:post.url'><data:blog.pageName/></a></u></strong>, Anda boleh menyebar luaskan atau mengcopy - paste artikel di atas jika memang sangat bermanfaat bagi anda.. Dengan syarat anda harus meletakkan link di bawah ini sebagai sumbernya..</span><br/>
<textarea cols='60' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea><br/>
</div></div><br/></b:if>
Keterangan:
- #ffffff adalah warna Background ke 1 pada permalink, anda bisa menggantinya dengan warna lain menggunakan Html Color Codes (Kode Warna HTML).
- 11px adalah ukuran font pada permalink. Ubah dengan nilai yang lebih kecil, untuk memperkecil ukuran tulisan, dan sebaliknya jika ingin memperbesar.
- Pada tulisan yang berwarna merah di atas, anda bisa mengganti tulisan tersebut dengan tulisan lain yang mengenai informasi permalink..


8. Save Template.
9. Selesai!


Happy Blogging!

Rating: 5.0

Nur Wahid - Friday, June 08, 2012

Thursday, May 31, 2012

Membuat Daftar isi (Sitemap) otomatis V.1 di Blogger

Thursday, May 31, 2012

Daftar Isi V.1

Daftar Isi Otomatis (Sitemap) V.1 sebenarnya sama dengan Daftar Isi Otomatis (Sitemap) V.2, yang membedakan hanya design dan tampilannya yang berbeda.. Daftar isi ini juga bekerja berdasarkan Label dan Feed Blog..

Berikut langkah-langkah Membuat Daftar Isi Sitemap Otomatis V.1 di Blogger/Blogspot:

1. Login ke Blogger..
2. Pada Dashboard pilih New post..
3. Kemudian pilih Edit Pages > New Page..
4. Beri judul "Daftar Isi", Klik Edit HTML, dan masukkan kode script di bawah ini..

<script src="http://blog-dollar.googlecode.com/files/Daftar%20Isi.js">
</script> 
<script src="http://blog-dollar98.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
Keterangan:
Ubah http://blog-dollar98.blogspot.com, dengan Url Blog anda..
5. Publish Page..
6. Selesai..

Rating: 5.0

Nur Wahid - Thursday, May 31, 2012

Sunday, May 27, 2012

Membuat daftar isi (Sitemap) otomatis V.2 di Blogger

Sunday, May 27, 2012

Daftar isi (Sitemap)

Artikel ini adalah versi ke 2 setelah sebelumnya saya memposting tentang Cara Membuat Daftar Isi (Sitemap) Otomatis V.1.

Membuat daftar isi (Sitemap) otomatis V.2 pada blogger, memang sangat efisien di bandingkan membuat daftar isi secara manual.. Daftar isi ini bekerja berdasarkan Label dan Feed Blog.. Untuk previewnya anda bisa lihat pada gambar di atas atau pada halaman Daftar isi blog ini..

Jika anda tertarik untuk membuat daftar isi sitemap otomatis V.2 pada blogger, silahkan ikuti langkah-langkahnya di bawah ini:

1. Pastikan anda sudah login di Blogger..
2. Pada Dashboard pilih New Post..
3. Kemudian pilih Edit Pages..
4. Pilih New Page..
5. Beri Judul "Daftar Isi", lalu Klik Edit HTML dan masukkan kode CSS & script di bawah ini:
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgusNB2w60HsxkN86PR-KhogZ985TnrLQSlsbEqc4IA_Q6sovDn54pgjSY5OG5x7QvrzECABKjmNJ0u9GGaEvH62Y6r2N1FS5jCTinU5EJQcnwh1xzLsNtQ1oicBg9BvmIZyfF-ozSBWs/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:ccc; repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background:#ccc; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://blog-dollar98.googlecode.com/files/Acc1.js" type="text/javascript">
</script>
<script src="http://blog-dollar98.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<span style='float:right;font:italic 9px Arial, Sans-Serif;'>
<a href='http://blog-dollar98.blogspot.com/' target='_blank'>:: widget by Blog Dollar ::</a></span>
Seperti pada gambar di bawah ini..
Membuat daftar isi (Sitemap) otomatis V.2 di Blogger

Keterangan:
Ubah http://blog-dollar98.blogspot.com dengan Url Blog anda..
6. Setelah itu Publish Page..
7. Selesai..

Rating: 5.0

Nur Wahid - Sunday, May 27, 2012

Cara membuat kamera pengintai atau CCTV di Blogger

Membuat kamera pengintai di Blog, untuk mempercantik tampilan blog.. Jika kamera pengintai di pasang di blog anda, Kamera pengintai seolah-olah akan mengintai semua kegiatan visitor atau pengunjung blog.. Cukup menarik bukan?
Jika anda tertarik untuk membuat dan memasang kamera pengintai di blog anda, silahkan ikuti langkah-langkahnya di bawah ini:

1. Login ke Blogger..
2. Pada Dashboard pilih Design..
3. Page Elements..
4. Add a Gadget > Html/Javascript..
5. Lalu pada Content masukkan kode script di bawah ini..
<script language="JavaScript" src="http://blog-dollar98.googlecode.com/files/cctv.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-JRgsfTRJgRbU2xUiqM6YYF_wZpkwNaDLygqMSAS810dgLIAoEg9YBtMFLpwW3kej4OyfFdCXs5RAcsl5yxAE2gXPXGxLbhQ9khx3rlSzmzYn3YbjLo3GhhTSvTLXagYWJWie26yNowM/s1600/cctv.gif")</script>
6. Save..
7. Selesai..

Rating: 5.0

Nur Wahid - Sunday, May 27, 2012

Sunday, May 20, 2012

Cara membuat widget tombol back to top di blogger

Sunday, May 20, 2012


Widget Back to top berfungsi untuk memudahkan anda, visitor, atau pengunjung untuk kembali ke atas "back to top". Cara kerja tombol back to top yaitu ketika anda meng-klik gambar back to top, maka akan secara otomatis melalukan scrolling untuk kembali ke atas.

1. Pastikan anda sudah login ke blogger
2. Pilih Dashboard > Design > Edit HTML
3. Cari kode </body> menggunakan Ctrl+F
4. Copy kode di bawah ini, dan Paste tepat di atas kode </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://blog-dollar.googlecode.com/files/backtotop.js' type='text/javascript'/> 
<!-- Back to top designed by Blog-dollar98.blogspot.com --> 
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='http://picturestack.com/454/419/kv0backtotopt0U.gif'/></a>

Keterangan: 
* Anda bisa mengganti Back to Top, dengan kata-kata yang anda suka, seperti: Meluncur ke atas, kembali ke atas, dsb...
* Untuk "http://picturestack.com/440/59/2sFAsORc8iCAAt5f.gif" itu adalah url gambar/logo back to top, anda bisa mengganti url tersebut dengan url gambar yang anda punya.. atau menggunakan gambar di bawah ini..
Silahkan anda klik kanan > save image as pada gambar di atas, lalu upload dan hosting gambar tersebut melalui www.picturestack.com, setelah itu Save template..
Selesai!

Rating: 5.0

Nur Wahid - Sunday, May 20, 2012

Friday, May 18, 2012

Cara membuat Contact Form di blogger

Friday, May 18, 2012


Membuat Contact Form atau biasa disebut "Contact Me" atau "Contact Us" di blogger.
Untuk fungsinya, anda pasti sudah tahu dari nama Contact Form itu sendiri.. Anda ingin membuat Contact Form pada Blog anda? Anda bisa gunakan fitur dari 123ContactForm, sebagai salah satu penyedia jasa untuk membuat Contact Form.. Untuk Demo atau Previewnya silahkan lihat di halaman Contact Blog ini..

1. Kunjungi halaman 123ContactForm.
2. Klik Sign Up for free > lalu pilih Basic, untuk membuat contact form secara gratis, kemudian klik sign up.
3. Masukkan Username anda, Password, Confirm Password, email. Lalu klik Create Account.
4. Pada Select new form type, pilih Contact Form.
5. Lalu pada Form name, masukkan nama yang anda inginkan, lalu klik Ok.
6. Design/Customize sendiri tampilan Contact Form sesuai keinginan anda.. Dari langkah pertama sampai langkah ketiga..
7. Pada langkah ketiga pilih opsi Blogger di bagian kiri.. Lalu copy kode scriptnya..

Untuk cara membuat halaman Contact Form di blogger, ikuti langkah-langkah di bawah ini:
1. Pada Dashboard, pilih New post > Edit Pages > New page.
2. Masukkan Title/Judul postingan anda.. dengan nama Contact, Contact Me atau Contact Us.
3. Pilih Opsi edit Html, lalu copy kode script yang anda dapat tadi..
4. Publish Page..
5. Selesai!

Happy Blogging!


Rating: 4.5

Nur Wahid - Friday, May 18, 2012

Thursday, May 17, 2012

Cara membuat dan memasang widget Google Custom Search di Blogger

Thursday, May 17, 2012


Google Custom Search merupakan widget Search berupa box, yang berfungsi untuk memudahkan visitor dalam mencari artikel/konten yang dicarinya seperti google itu sendiri..

Fungsi dan keuntungan dari Google Custom Search antara lain:
1. Hasil penelusuran yang cepat dan relevan.
2. Meningkatkan retensi dan konversi pelanggan di situs Anda.
3. Mengajak komunitas Anda untuk berkontribusi.
4. Hasilkan uang dengan Google Adsense Search. 
Dan masih banyak fungsi dan keuntungan lainnya..

Untuk cara membuat google custom search di blogger, berikut langkah - langkahnya:
1. Kunjungi Google Custom Search, klik "Buat Mesin Penelusuran Ubahsuaian" atau "Create a custom search engine", jika menggunakan bahasa Inggris.

2. Lalu masukkan Nama, Deskripsi, Bahasa, dan Situs yang akan ditelusuri. Pada edisi, pilih edisi standar untuk mendapatkan iklan secara gratis, lalu klik lanjut.

3. Kemudian pilih tampilan yang anda sukai, setelah itu klik lanjut.

4. Copy Code scriptnya dan pasang widgetnya pada blog anda..


Untuk cara memasang widget Google Custom Search di Blogger, silahkan ikuti langkah-langkahnya di bawah ini:
1. Pastikan anda sudah masuk/login ke Blogger
2. Pada Dashboard, pilih Design > Page Elements. 
3. Add a Gadget > HTML/Javascript, lalu pada kotak Content. Masukkan Code Script yang telah anda dapat tadi.. Setelah itu Save. dan Selesai!


Rating: 5.0

Nur Wahid - Thursday, May 17, 2012

Cara memasang widget Status Yahoo! Messenger pada Blogger

Widget Status YAHOO! MESSENGER merupakan fitur live chat untuk berinteraksi (bertanya - jawab) antara Visitor dengan Admin! sekaligus untuk mengetahui status YM admin, apakah sedang Online atau Offline.. Cara untuk chat antara visitor admin pun sangat mudah, anda tinggal meng-klik atau menekan tombol pada gambar / widget tersebut ketika status YM admin sedang Online, dengan begitu anda bisa chat secara langsung dengan admin tersebut..
Jika anda tertarik untuk memasang widget Status Yahoo! Messenger pada Blog anda, silahkan ikuti langkah - langkahnya di bawah ini :


1. Loggin ke Blogger
2. Pilih Design > Page Elements > Add a Gadget > Html/Javascript
3. Copy kode script di bawah ini lalu paste pada kotak Content

<a target="_blank" href="http://ymgen.com/chat.php?idne=personal1810">
<img border="0" src="http://opi.yahoo.com/online?u=personal1810&m=g&t=0"></a>
 Note :
Ubah personal1810 dengan ID yahoo anda, dan t=0 adalah kode utuk gambar yahoo! Messenger.. Anda bisa ganti kode t=0 dengan salah satu kode gambar di bawah ini, setelah itu Save..


t=0

t=1
t=2
t=3
t=4
t=5
t=6
t=7
t=8
t=9
t=10
t=11
t=12
t=13
t=14

Rating: 5.0

Nur Wahid - Thursday, May 17, 2012