Membuat Form Berlangganan Artikel Via Email Dibawah 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.

VIEW DEMO

Berikut Cara Membuat Form Berlangganan via Email di bawah postingan:

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

Read More

Cara Membuat Menu Navigasi Breadcrumbs di Blogger

Menu navigasi BreadCrumbs adalah navigasi yang berada di bagian atas postingan, yang muncul secara horizontal. Navigasi breadcrumbs ini menyediakan link untuk kembali ke halaman sebelumnya, dan menunjukkan urutan isi halaman dari Bagian depan halaman (Homepage) hingga ke posting/artikel. Menu navigasi tidak akan muncul di bagian halaman depan (Homepage). Urutan navigasi breadcrumbs yaitu di mulai dari Home » Label posting  » Posting, seperti pada gambar di bawah ini:

View Demo

Berikut langkah-langkah membuat menu navigasi breadcrumb di blogger:

1. Pada Dashboard pilih Design > Edit Html.

2. Backup template dahulu dengan mengklik Download Full Template, untuk antisipasi bila terjadi error pada template anda.

3. Beri centang pada Expand Widget Templates

4. Letakkan kode CSS di bawah ini, di ATAS kode ]]></b:skin>

.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;}

5. Cari kode <b:includable id='main' var='top'> dan GANTI dengan kode di bawah ini:

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'>

 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

</b:if>

</b:loop>

 &#187; <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

6.  Save Template
7. Selesai..

Rating: 5.0

Nur Wahid - Saturday, June 23, 2012

Read More

Cara membuat teks berjalan di Menu Bar Blogspot

Membuat Teks Berjalan Di Menu Bar Blogspot - Cukup unik! Karena memang teksnya bisa berjalan di Menu Bar, seperti pada gambar di atas.. Untuk anda yang tertarik untuk membuat teks berjalan di menu bar pada Blog anda, silahkan ikuti langkah-langkahnya di bawah ini:


1. Pastikan anda sudah Login ke Blogger.
2. Pada Dashboard, pilih Design
3. Kemudian pilih Edit HTML
4. Lalu cari kode </head>
5. Copy kode di bawah ini, dan paste di atas kode </head>

<script type='text/javascript'>//<![CDATA[
msg = " -- Selamat datang di Blog Dollar ";msg = " | Blog-dollar98.blogspot.com -- " + msg;pos = 0;function scrollMSG() {document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}scrollMSG();//]]></script>

Seperti pada gambar di bawah ini..

Keterangan:
-  Ubah teks "Selamat datang di Blog Dollar | Blog-dollar98.blogspot.com" dengan teks yang anda sukai.
- 200 adalah gerak kecepatan teks berjalan, kurangi nilainya untuk mempercepat gerak teks berjalan dan sebaliknya jika ingin memperlambat..


Happy Blogging!

Rating: 5.0

Nur Wahid - Sunday, June 10, 2012

Read More

Cara 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..

Berikut Cara Membuat Permalink di Blogspot:

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

Read More

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

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

Read More

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

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..

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

Read More

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

Read More

Cara membuat background pada judul sidebar Blogger

Cara membuat Background pada judul sidebar Blogger..
Postingan kali ini special untuk menjawab pertanyaan teman saya "Fajar Suryo" yang bertanya kepada saya, "Bagaimana cara membuat backgroud pada judul sidebar?" .. Ok, akan saya coba jawab..


Gambar di bawah ini adalah contoh judul sidebar sebelum di beri background :

Dan gambar di bawah ini adalah contoh judul sidebar setelah di beri background :

Langsung saja, berikut langkah-langkah cara membuat background pada judul sidebar blog:
1. Pastikan anda sudah masuk/login di blogger
2. Pada Dashboard, pilih Design > Edit Html > beri checklist pada "Expand Widget Templates"
3. Lalu cari tulisan yang ingin anda beri background, misalnya saya ingin memberi background pada tulisan "Partner" , maka anda cari tulisan "Partner" menggunakan Ctrl+f agar lebih cepat.. Seperti gambar di bawah ini..

4. Pada tulisan yang saya Block " <h2><data:title/></h2> ", ubah kode " <h2><data:title/></h2> " menjadi..

<h3><data:title/></h3>

Seperti pada gambar di bawah ini :

5. Save template..
6. Selesai, dan lihat hasilnya...


Happy Blogging! 
Rating: 5.0

Nur Wahid - Sunday, May 20, 2012

Read More

Cara membuat efek daun-daun berjatuhan di Blogger!

Membuat efek daun berjatuhan di blogger untuk mempercantik tampilan Blog.. Akan terlihat indah blog anda jika terdapat efek daun-daun berjatuhan.. Untuk membuat efek daun berjatuhan di blogger sangat mudah!
Untuk lebih jelasnya, silahkan ikuti langkah-langkahnya di bawah ini:


1. Login ke Blogger
2. Pilih Dashboard > Design > Edit HTML
3. Cari kode </head> menggunakan Ctrl+F atau F3 (agar lebih cepat pencariannya)
4. Copy kode script di bawah ini, dan paste tepat di atas kode </head>

<script src='http://blog-dollar98.googlecode.com/files/daun.js' type='text/javascript'/>

Seperti gambar di bawah ini:

5. Save template.
6. Selesai!


Happy Blogging! 
Rating: 4.0

Nur Wahid - Sunday, May 20, 2012

Read More

Cara membuat widget tombol back to top di blogger

Cara membuat widget tombol Back to Top di Blogger.

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.

Berikut cara membuat tombol back to top/kembali ke atas di blogger:

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!

Baca juga: Membuat Tombol Scroll Back To Top dengan Efek jQuery Smooth.

Rating: 5.0

Nur Wahid - Sunday, May 20, 2012

Read More

Bird Flying: Cara membuat widget burung Twitter berterbangan pada Blogger

Widget burung twitter berterbangan di Blogger merupakan salah satu widget yang cukup unik untuk mempercantik tampilan Blog.. Jika burung twitter tersebut di klik maka akan terhubung ke Twitter yang anda miliki setelah anda membuat/memasang widget burung twitter berterbangan pada blog anda..


Anda tertarik untuk membuat Widget burung twitter berterbangan pada blog anda? Jika tertarik silahkan ikuti langkah - langkahnya di bawah ini :


1. Login ke Blogger
2. Pilih Design > Page Elements > Add a Gadget > HTML/Javascript, copy code di bawah ini, lalu paste pada kotak Content..

<script type="text/javascript" src="http://blog-dollar.googlecode.com/files/widget%20twitter%20burung%20terbang.js"></script><br /> <script type="text/javascript"> var birdSprite="http://4.bp.blogspot.com/-jmMHmT3wOak/Tam8b6aBLkI/AAAAAAAABBg/goBeWfPYRYw/s1600/birdsprite.png"; 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"); var twitterAccount = "http://twitter.com/NurWahiid";var tweetThisText = "Follow Me";tripleflapInit();</script>

Keterangan:
Ubah username saya, NurWahiid dengan Username Twitter anda, setelah itu Save, dan lihat hasilnya!


Rating: 5.0

Nur Wahid - Thursday, May 17, 2012

Read More

Nabble Free Forum: Cara membuat forum pada blogger dengan gratis dan mudah!

Ingin membuat forum pada blog anda? Anda bisa gunakan Nabble™ sebagai salah satu penyedia layanan untuk membuat forum dengan gratis dan mudah! Biasanya Forum di gunakan untuk tempat berdiskusi, berbagi pengetahuan atau bertanya jawab..

Jika anda ingin dan menggunakan fitur dari Nabble™ untuk membuat forum pada blog anda, silahkan ikuti langkah - langkahnya di bawah ini :

1. Silahkan kunjungi Nabble™

2. Lalu pilih Start a Free Forum!

3. Isi semua form dengan lengkap.. Jangan lupa checklist "I have read and I agree to Nable's Terms Of Use" dan klik Create Forum..

4. Forum anda telah selesai di buat.. Lalu check inbox email anda dan klik linknya untuk mengkonfirmasi.. Agar anda dapat menggunakan semua fitur..

5. Setelah itu pada options pilih "Embedding options"

6. Lalu copy code scriptnya..

7. Pada dashboard pilih > Pages > New Pages > Blank page > HTML, kemudian paste-kan code scriptnya.. Klik Publish, dan selesai!!

Rating: 5.0

Nur Wahid - Sunday, May 13, 2012

Read More