6 Widget Search Box Keren untuk Blog

6 Widget Search Box Keren untuk Blog. Widget search box untuk membantu pengunjung menemukan apa yang mereka cari pada blog kita. Dan tentunya ini sangat berguna. Selain itu 99,99% para blogger memasang widget Search box pada blog mereka.

6 Widget Search Box Keren untuk Blog

Widget search box ini bisa anda pasang untuk Blogger / blogspot dan juga wordpress. Blog Bamz akan sharing untuk blogger saja yah! maklum lagi males buka wordpress :p. Berikut ini cara memasang widget search box di blogger/blogspot.

Cara memasang widget search box di blogger

Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget serch box keren di bawah ini dan paste pada element baru tadi.

Widget Search box 1
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7wnyvGrsC5mc9z4E33zsJcEKU4ZGr2dzkyTkDoWAiVxmWNH3vape44KjRU-5rZwwxRPDw1heBmrR3LrhjVqWR8sICGvqlRCR9vmJ-PZHago0NpR8zmH6Q7DBuaiEN9LnT5BC-8Qnh-zq_/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>

$0AWidget Search box 2
<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Dw581i3d30VWTPWRCUmpnnqoug-6aDAfuO-YmKHk1jGX_GNbGesK6fHGr2EHAor4ZTp_Xp2hlAgmMzF0BWMj4KVLgihVi-NRoLDYf2e_6uCyNFrFb9tePmHPfFXREcmEZIs33Y4-bchi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get"> <input type="text" id="b" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="bbutton" /></form></div>

Widget Search box 3
<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKEw1Qm2H09G7DULAH2SBdhoRhttVXmrKSXCp-7NiEfCPUhbu9aHJdJ7KTV_k4dC6yvI9xissfMwuufIcfF0csfYH9ph09VB9KmkF6cfN9ZFcQ-tztmAUX41PYBSUJgk6kkTfgwADc0bs1/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get"> <input type="text" id="c" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="cbutton" /></form></div>

Widget Search box 4
<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnmnqjkDM8aIln31IzKlzYuqpzKr1YBEf6DPNC87mYa-gbH3psaC5ZufADnmnTuv56TIyfNo1Wi-FoXqE1CA88QZKpPqj9tORhvygYusMLi8dQ9G_pua5Pz1YQ-quj3gfBIbO8AJut74Li/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#d-searchform{display: block;padding: 12px;margin:0;} form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#d-searchform #dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="d-searchbox"><form id="d-searchform" action="/search" method="get"> <input type="text" id="d" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="dbutton" /> </form></div>

Widget Search box 5
<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY3Y4PZM0s-Nv3I5u8lQtXxNSlt-Hdhj7frsk33X5f1uLKSHumoyckpbUZZJHwmvUl6kgXOfOAQNP5Z75_Wlk7RL887hyphenhyphenWDHcqfLLkC0b1jeq_fSgUKyewamXmC7FQQydcJxtsLdGM2dzi/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#e-searchform{display: block;padding: 12px;margin:0;} form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#e-searchform #ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="e-searchbox"><form id="e-searchform" action="/search" method="get"> <input type="text" id="e" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="ebutton" /></form></div>

Widget Search box 6
<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aV8JYc3kl0XAJ_YsEetnUSytjl5QOp9VMi1KY9j4AGrBDG74NKxCIJll4-Aby9SxCS3fgq1WldD1oZ0bqNFi3r1Zruh6tmPIloWxJ-rfs6KPYs3-oT8K6P4tZdJcUkFhwsMf2T07ZILe/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#f-searchform{display: block;padding: 12px;margin:0;} form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#f-searchform #fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="f-searchbox"><form id="f-searchform" action="/search" method="get"> <input type="text" id="f" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="fbutton" /> </form></div>

width:307px >> Silahkan ganti dengan lebar widget blog anda.

Cara membuat Read More otomatis di Blogspo

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?

Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.

Langkah-langkah cara membuat Read More Otomatis di Blogspot

• Login ke Blog anda
• Buka halaman design > Edit HTML > centang Expand template widget
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste kode berikut tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
• Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Finish simpan template dan lihat hasilnya

Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :

1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.

Cara Membuat Template Blog Sendiri

Cara Membuat Template Blog Sendiri - Bagaimana cara membuat template blog sendiri? itulah pertanyaan yang sering ditanyakan para blogger. Ada beberapa cara yang digunakan orang untuk mempercantik blog mereka. Salah satunya yatu dengan merubah tampilan blog mereka dengan mengganti template standard yang ada. Artikel kali akan membahas bagaimana cara membuat Template blog sendiri.

Cara membuat template blog sendiri :

1. Membuat template blog sendiri dengan menggunakan fasilitas Blogger template Designer
Cara Membuat Template Blog tipe ini sangatlah umum alias sudah banyak yang tahu dan caranya pun cukup mudah. Alangkah baiknya bila anda langsung praktek disana. Silahkan ikuti link ini

2. Membuat template blog sendiri dengan bantuan software atau aplikasi
Cara membuat template blog tipe ini jarang digunakan orang untuk membuat template blog, kenapa? saya rasa jawabannya karena belum ada software gratisan untuk membuat template blog. Maksudnya, software untuk membuat template blog dijual dengan harga tertentu. Ya memang ada sebagian yang menggunakan software untuk membuat template blog sendiri.

3. Membuat template blog sendiri dengan cara editing Online
Cara membuat template blog inilah yang banyak digunakan, karena tidak perlu biaya dan kemungkinan besar sudah bisa dengan cepat untuk membuat template blog sendiri. Situs yang menyediakan fasilitas membuat template biasanya sudah menyediakan template template tertentu yang nantinya bisa anda edit sendiri. berikut ini situs yang menyediakan editing template secara online.

Situs membuat template blog sendiri secara online :

• Profilebrand : menyediakan fasilitas edit template gratis, kebanyakan template yang disediakan untuk kita edit bertema jaringan sosial ( facebook, twitter, myspace dll )
• Pimp my Profile : Nah untuk situs ini anda bisa membuat template blog, Myspace, dan friendster. Silahkan langsung saja ke situsnya.
• Yvoschaap : Situs ini menyediakan fasilitas untuk membuat template blog sendiri hanya khusus wordpress. 
• DoTemplate : wah kalau yang ini lumayan bagus bagi kita yang belajar membuat template blog sendiri. Disana sudah disediakan beberapa template untuk kita edit sendiri. Template yang disediakan juga cukup banyak dan simpel. Setelah anda selesai membuat template blognya, anda bisa langsung mendownloadnya disana.
• TemplateTr : Ini situs yang menyediakan fasilitas membuat template blog gratis dan cepat. Hanya dengan 4 langkah anda sudah bisa membuat template blog sendiri. Memang hasilnya simpel, tapi dengan karya hasil sendiri tentunya memiliki kebanggaan tersendiri.

Cara membuat template blog sendiri bukan hanya yang ada diatas. Anda juga bisa download template jadi dan langsung mengedit sampai berbeda dengan aslinya. Silahkan anda uji kemampuan dan imajinasi anda untuk menciptakan template yang berbeda dari yang lain. Ok deh itu saja arikel mengenai cara membuat template blog sendiri, selamat mencoba dan semoga sukses.

Cara membuat artikel terkait di blogspot

Cara membuat artikel terkait di blogspot dengan sedikit mondifikasi agar lebih keren. Artikel terkait atau related post berfungsi untuk membantu para pengunjung agar mengetahu apa saja artikel yang berhubungan dengan keyword atau artikel utama. Dan manfaatnya kepada pemilik blog yaitu akan menambah Page view apabila stiap artikel pada related post tsb di kunjungi oleh visitor. Contoh artikel terkait bisa anda lihat pada blog ini di bagian bawah setiap artikel atau postingan.

Cara membuat Artikel Terkait di blogspot

• Login ke blog anda > Design > HTML > centang Expand widget templates
• Cari kode <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F agar lebih mudah
• Biasanya ada 2 kode tersebut, anda cukup fokuskan pada kode yang pertama saja.
• Jika sudah ketemu, Copy kode dibawah ini lalu paste dibawah kode <div class='post-footer-line post-footer-line-1'>

Kode

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<DIV class='rbbox'>
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

• Simpan template. 

Modifikasi artikel terkait

Cara membuat artikel terkait atau related post ini juga bisa di modifikasi. Bagaimana caranya? ok silahkan jika ingin di praktekkan.

• <H2>Artikel Terkait:</H2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda ingin menghapusnya.
• <DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas,  1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
• maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan
• maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan

Jika anda masih bingung atau pusing, jangan sungkan untuk bertanya. kotak komentar saya sediakan gratis loh :). ok deh cukup untuk artikel cara membuat artikel terkait atau related post di blogspot.

Cara Membuat Tombol Share Facebook, Twitter, Google + dll.

Cara Membuat Tombol Share Facebook, Twitter, Google + dll. Membuat tombol share facebook, twitter, digg atau mungkin ditambah dengan Google + diatas setiap posting / artikel blog dengan cara menambahkan kode atau script pada template anda. Share button atau tombol share untuk blogger sebenarnya bisa langsung anda dapatkan kodenya di situs situs yang menyediakannya, seperti contoh situs sharethis.com yang menyediakan kode untuk di pasang pada blog anda dengan fitur share yang lengkap. Namun yang kurang menarik adalah penempatannya yang kurang stretegis. Kali ini saya akan share cara membuat tombol share facebook, twitter, Google + dll di atas posting blog anda.

Cara membuat tombol Share atau Share button Blogger

• Pertama silahkan login blog anda
• Klik menu Design > Edit HTML > centang expand widget templates
• Cari kode <div class='post-body entry-content'> atau class='post-body entry-content' dan biasanya ada 2 kode tersebut, pakailah kode yang pertama
• Jika sudah ketemu, copy kode dibawah ini dan paste tepat diatas kode <div class='post-body entry-content'>

Kode

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</b:if>

• Langkah terahir yaitu simpan template

Cara Membuat Tombol Share atau share button di blogger ini adalah cara paling mudah untuk memasang fitur share / membagikan artikel anda. Share button ini juga bisa anda edit sesuai keeinginan anda, tapi jangan lupa back up templatenya dulu untuk menghindari kesalahan pada proses editing. Oh ya "User Name" diganti user name twitter anda. Untuk blog yang sudah menggunakan read more biasanya bukan menggunakan kode
<div class='post-body entry-content'>
melainkan kode di bawah ini
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
Pahami dulu, baru praktekkan cara membuat tombol share atau share button blogger type ini.

Manfaat Tombol Share / Share button blogger

Manfaat tombol share adalah memberikan kesempatan para pengunjung / visitor blog agar mereka bisa berbagi dengan teman atau jaringan mereka melalui fitur share yang tersedia pada blog anda. Tentunya ini sangat penting, secara langsung pengunjung akan mengajak orang lain untuk megunjungi blog anda. Selamat kebanjiran visitor dengan memasang tombol share / share button pada blog anda.

Cara membuat Popular Post animasi 3D

Cara membuat Popular Post animasi 3D pada bagian widget blog menggunakan kode simpel javascript. Widget popular post atau artikel populer memang di perlukan dalam sebuah blog. Dengan adanya widget popular post, secara para visitor akan penasaran dengan isi artikel yang menjadi populer di blog tersebut dan tentunya memiliki kemungkinan besar untuk melihat atau membaca artikel pada populer post tersebut. Apalagi dengan widget popular post yang unik, walaupun visitor tidak penasaran pada isi artikelnya, mungkin penasaran sama animasi pada widget popular tersebut. " wah kok keren ya widgetnya, Klik dulua lah " kemungkinan seperti itu hehe ^^. Sebelum mencoba, alangkah baiknya anda lihat contoh hasilnya disini. Ok sekarang lanjut ke cara membuat Popular Post animasi 3D.

Cara membuat Popular Post animasi 3D di Blogspot

• Login ke blog anda > Design > kemudian Add gadged baru pada elemen, jangan lupa pilih HTML / Javascript ( bebas dimana saja, karena hanya untuk penempatan Css dan koda javascript saja )
• Copy kode atau script berikut dan paste pada gadget tadi kemudian save ( tidak perlu judul )

<style type="text/css">
.cube { width: 250px; height: 250px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
});
</script>
<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/popularcube.js"></script>

• Sekarang masih pada halaman Design
• Silahkan add Gadged baru lagi dan pilih gadget popular post ( penempatannya terserah anda, bisa pada sidebar kanan atau kiri dan bawah ) kemudian save dan lihat hasilnya.

Contoh penempatan script membuat Popular Post

Cara membuat widget Popular Post animasi 3D ini sebenarnya masih bisa diterjemahkan atau istilahnya di dirinci, tapi dari pada mumet edit HTML templatenya mending pake cara di atas lebih mudah dan tidak beresiko ^^. Oh iya jangan lupa sesuaikan lebar dan tinggi widget ini sesuai lebar sidebar dimana tempat anda akan memasang widget popular post tsb. Jika mau pasang widget popular post nya di pasang di tempat yang strategis yah, biar menarik perhatian para pengunjung. Sampai jumpa di artikel berikutnya dan semoga sukses mencoba cara membuat popular post animasi 3D.

Cara Membuat Menu Drop Down

Cara membuat menu Drop Down atau istilah asingnya pull-down di Blogspot. Menu drop down akan sangat berguna untuk menghemat elemen blog kita. Tentunya dengan menu drop down, internal link maupun external link bisa kita ringkas menjadi 1 atau bahkan 2 menu drop down sesuai yang kita inginkan. Silahkan anda copy salah satu kode menu drop down di bawah ini sesuai keinginan anda, dan pasang pada widget blog anda

Cara membuat menu Dropdown standard di blog

<form name="jump">
<select name="menu"
onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://url1.com">Menu1 standard</option>
<option value="http://url2.com">Menu2 standard</option>
<option value="http://url3.com">Menu3 standard</option>
</select>
</form>

Cara membuat menu dropdown dengan tombol button di blog

<form name="jump">
<select name="menu"
onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://url1.com">Menu1 standard</option>
<option value="http://url2.com">Menu2 standard</option>
<option value="http://url3.com">Menu3 standard</option>
</select> <input
onclick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" type="button" value="Go" />
</form>

Cara membuat Drop down menu dengan tombol gambar

Gambar

<form name="jump">
<select name="menu"
onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://url1.com">Menu1 standard</option>
<option value="http://url2.com">Menu2 standard</option>
<option value="http://url3.com">Menu3 standard</option>
</select> <a href="javascript:jumpMenu()">
<img border="0" src="Link-Gambar-anda" /></a>
</form>

Menu drop down bisa anda tempatkan dimana saja, misalkan pada widget blog, footer bawah ataupun atas, bahkan juga bisa anda tempatkan di bawah / posting seperti penempatan artikel terkait dll. silahkan berkreasi sesuai keinginan dan kemampuan anda ^^. Oh ya jangan lupa ganti kode yang saya blog. Selamat mencoba dan semoga sukses. sudah yah itu saja tutorial cara membuat drop down menu di blog.

Cara membuat menu vertikal di blog

Cara membuat menu di blog, lebih tepatnya menu vertikal di blogspot alias blogger. Menu vertikal atau pun menu horizontal memang tidak bisa di hindari dalam dunia blogger. Terutama menu horizontal yang 99% template pasti ada menu horizontal. Sebelumnya saya sudah pernah mengulas tentang cara membuat menu horizontal di blogspot, dan pada posting kali ini saya akan berbagi tutorial cara membuat menu vertikal di blogspot.

Cara membuat menu Vertikal di Blogspot

• Login ke blog anda > Klik Design
• Add a gadged dan pilih HTML / javascript
• Penempatan gadged atau widget tepatnya pada sidebar kanan atau kiri, karena menu ini vertikal dan tentunya susunan menunya kebawah.
• Copy kode berikut dan paste pada gadged tsb

<style>
.menu-vertikal, .menu-vertikal li ul{list-style-type: none;margin: 5px;width: 250px; /*Lebar Menu*/border: 1px solid black;}
.menu-vertikal li{position: relative;}
.menu-vertikal li a{background: #000000;font: bold 12px Verdana, Helvetica, sans-serif;color: #FFFFFF;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}
.menu-vertikal li ul{position: absolute;width: 250px;display: none;}
.menu-vertikal li ul li{float: left;}
.menu-vertikal li ul a{width: 250px;}
.menu-vertikal li a:visited, .glossymenu li a:active{color: white;}
.menu-vertikal li a:hover{background: #454545;}
* html .menu-vertikal li { float: left; height: 1%; }
* html .menu-vertikal li a { height: 1%; }
</style>
<ul id="verticalmenu" class="menu-vertikal">
<li><a href="/">Home</a></li>
<li><a href="http://Link1">Menu1</a></li>
<li><a href="http://Link2">Menu2</a></li>
<li><a href="http://Link3">Menu3</a></li>
</ul>

• Kemudian Save

Keterangan cara membuat menu vertikal di Blogspot :

• Ganti Link1, Link2, Link3 dan Menu1, Menu2, Menu3 sesuai kebutuhan anda. yangs aya contohkan hanya 4 menu dengan Home. Jika ingin menambah, silahkan di tambahi dibawah sendiri ya <li><a href="http://Link4">Menu4</a></li> dan seterusnya.
• Kode berwarna Merah adalah lebar menu dan list menu, silahkan anda sesuaikan dengan lebar widget sidebar blog anda.
• Kode berwarna Piru adalah warna background menu Vertikal
• Kode dengan warna Orange adalah warna tulisan dan bisa anda rubah sendiri
• Kode berwarna Pink adalah warna hover background menu vertikal tersebut. Maksudnya warna background apabila mouse di arahkan pada menu tersebut.

Membuat menu vertikal di blog hanya perlu sedikit waktu, karena prosesnya juga tidak lama alias rada rada gampang ^^. Ya sudah selamat mencoba dan semoga sukses membuat menu vertikal di blog.

Cara membuat artikel terkait pada sidebar blog

Cara membuat artikel terkait pada sidebar blog. Membuat artikel terkait pada sidebar blogger atau blogspot tentunya lebih menarik dibandingkan artikel terkait yang sudah umum berada di bawah setiap postingan. Blog ini juga menggunakan artikel terkait dibagian sidebar kanan. Karena saya sendiri sudah mencoba pada blog ini, saya akan share cara membuat artikel terkait pada sidebar blog.

Cara membuat artikel terkait atau related post pada sidebar

• Login ke blog anda > Edit HTML > centang expand widget templates
• Cari kode </head> ( gunakan CTRL + F untuk mempermudah pencarian )
• Copy kode dibawah ini dan paste di atas kode </head>

Kode

<!-- Related Post -->
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

• Selanjutnya cari kode <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'>
• Pilih salah satu saja, kemudian paste kode berikut tepat dibawahnya

 <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

• Kalau sudah silahkan simpan template
• Sekarang lanjut ke Page element > add a gadged dibagian sidebar kanan / kiri > pilih HTML / Javascript > Beri judul ' Artikel Terkait ' kemudian paste kode berikut pada gadget tersebut

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

• Save
• Sekarang kembali lagi ke Edit HTML > centang expand widget template dan cari title='Artikel Terkait'
• Biasanya kodenya seperti dibawah ini

<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

• Sekarang anda tambahkan kode berwarna merah dibawah ini sehingga hasilnyapun seperti dibawah ini

<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

• Simpan template dan lihat hasilnya

Cara membuat artikel terkait atau related post

Cara membuat artikel terkait atau related post pada sidebar blog memang sedikit rumit yah? ^^. tapi tenang saja, cara ini sudah saya praktekkan sebelumnya, kalau bingung anda bisa tanya langsung pada komentar. Kelebihan membuat artikel terkait / related post semacam ini adalah artikel yang di tampilkan di random. oh iya kode yang warna hijau di abaikan saja, karena itu hanya nomor urut id widget anda. Misalkan di blog anda HTML5, jangan diganti, cukup di abaikan saja. Kode yang berwarna biru adalah jumlah artikel terkait yang ingin di munculkan. Ok itu saja langkah-langkah cara membuat artikel terkait atau related post pada sidebar blog.

Memasang Facebook like di blog

Memasang Facebook like di blog pengguna blogger atau blogspot. Cara memasang Facebook like di blog sangat mudah asalkan anda bisa menerapkan langkah langkah yang saya berikan. Memasang Facebook like diblog memang perlu, agar para visitor atau pengunjung bisa memberikan like atau suka bahkan membagikan atau share artikel blog kita kepada teman teman mereka di facebook. Dengan memasang facebook like di blog, tentunya apabila visitor sudah memencet tombol like yang ada pada setiap artikel blog, otomatis pada facebook mereka akan ada notice kalau visitor tersebut sudah menyukai artikel yang kita tulis. kemungkinan besar teman facebook mereka akan penasaran, "kenapa orang ini menyukai ini?" disinilah peluang blog kita akan kebanjiran visitor. ok deh sekarang lanjut ke cara memasang Facebook like di Blog.

Cara memasang Facebook like di blog

• Login ke Blog anda > Design > Edit HTML > centang expand widget templates
• Cari kode <data:post.body/> . Untuk pengguna read more biasanya ada 3 kode tersebut, Pilih saja kode yang kedua lalu paste kode berikut tepat di atas kode <data:post.body/>

<div class='facebook-like'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp; action=like&amp; layout=standard&amp; show_faces=false&amp;width=400&amp; font=arial&amp; colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
</div>

• Simpan dan lihat hasilnya.

Cara memasang Facebook like di blog bukan hanya ini saja, tapi tergantung bagaimana anda bisa memahami kode kode yang ada pada template blog anda, sehingga tidak akan mengalami kesalahan dalam penempatan. Bicara mengenai penempatan facebook like ini akan tampil di atas setiap artikel atau postingan blog. Jika ingin di tempatkan pada bagian bawah setiap artikel / posting, maka anda tinggal paste saja dibawah <data:post.body/>. <data:post.body/> adalah kode dari artikel blog. Silahkan di coba memasang Facebook like di blog dengan cara ini dan jangan lupa kalau sudah berhasil, ditunggi tanggapan atau komentarnya yah ^^.

Mempercantik Facebook like di blog

Setelah memasang facebook like di blog anda sukses, tentunya semua orang ingin mempercantik tombol facebook like, iya kan? Sekarang kita akan mempercantik facebook like yang sudah di pasang pada blog anda dengan cara merubah warna background dan border ( garis tepi ) seperti di blog ini.

Cara mempercantik Facebook like di blog

• Login ke blog anda > Design > Edit HTML
• Cari kode ]]></b:skin> ( gunakan CTRL + F untuk mempermudah pencarian ) dan kalau sudah ketemu, silahkan paste Css berikut tepat di atas kode ]]></b:skin>

.facebook-like {background:#e6e6fa; color:#FF7800; border:1px solid #00bfff; font-size:12px; margin-top:5px;padding-left:5px;padding-top:5px}

• Simpan dan lihat hasilnya :)

Catatan :

• background:#e6e6fa adalah warna latar belakang
• color:#FF7800 adalah warna tulisan
• border:1px solid #00bfff adalah warna border / garis tepi

Silahkan ubah kode warna yang merah sesuai keinginan anda. Lihat kode warna di http://camex.wen.ru/Sampel/Warna.html. Sudah ya tips untuk memasang facebook like di blog karena sudah lumayan panjang :p.

Cara membuat Popular Post dengan Animasi gambar berputar tahap 1

• Login ke Blog anda > Design > Pada page lemen silahkan add gadged baru Popular Posts seperti contoh gambar di bawah ini.

• Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
• Centang image thumbnail
• Pada bagian snipet tidak perlu di centang
• Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
• Save

Cara membuat Popular Post dengan Animasi gambar berputar tahap 2

• Pada menu design > Edit HTML (tidak perlu centang expand widget templates)
• Cari kode ]]></b:skin> dan paste Css berikut di atasnya

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

• Sekarang cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
• kalau sudah ketemu, ganti kode tersebut dengan kode dibawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>

• Sekarang simpan template

Membuat Popular Post dengan Animasi gambar berputar semacam ini tidak akan mengurangi kecepatan loading blog anda karena tidak ada penggunaan javascript dalam membuatnya. Oh yah perlu di ingat, kode yang berwarna merah kadang ada yang kodenya PopularPost2. Jika kodenya PopularPost2 yah anda tianggal mengganti kode yang saya berikan (yang warna biru) menjadi PopularPost2 juga :). Kalau masih bingung tanyakan langsung di kotak komentar yah, jangan lupa di like juga hehehe. Selamat mencoba cara membuat widget popular post dengan animasi gambar berputar.