Pengertian dan Cara Membuat Blogroll di Blog

Sebelum kita membuat blogroll di blog, alangkah baiknya kalau sebelumnya kita harus mengetahui dulu pengertian blogroll tersebut. Blogroll dapat didefinisikan sebagai sekumpulan link blog yang diletakkan di halaman blog kita. Blogroll juga kita bisa menfaatkan untuk saling bertukaran link dengan orang lain. Dan ini termasuk salah satu cara untuk meningkatkan traffic dan page rank sebuah blog.

Setelah kita mengetahui pengertian blogroll, maka sekarang saatnya kita kan membahas cara membuat blogroll itu di blog kita. Coba ikuti langkah berikut ini:

• Silahkan masuk ke dasbor akun blogspot Anda.
• Klik menu Rancangan.
• Klik Elemen Laman.
• Klik Tambah Gadget.
• Cari HTML/JavaScript, dan silahkan klik tanda "+".
• Lalu masukkan kode di bawah ini.

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 140px; height: 140px; text-align: Left; background:#ffffff;">

<a href="http://alamat-url-1/" target="_blank">Nama blog</a><br/>
<a href="http://alamat-url-2/" target="_blank">Nama blog</a><br/>
<a href="http://alamat-url-3/" target="_blank">Nama blog</a><br/>
<a href="http://alamat-url-4/" target="_blank">Nama blog</a><br/>

</div>

• Dan setelah selesai, silahkan klik Simpan.

Dari kode di atas, yang perlu kita perhatikan adalah:

Pada tulisan width = 140 (ini ukuran lebar blogroll yang bisa di ganti sesuai dengan blog kita) height = 140 (ini adalah ukuran tinggi blogroll yang bisa di ganti sesuai keinginan kita).

Pada tulisan  text-align: Left ini adalah merupakan letak huruf kita. Kalau kita mau hurufnya datar kanan, kita bisa mengganti kata left dengan Right atau kalau kita mau rata tengah kita bisa menggantinya dengan Center. 

Background = #ffffff (ini adalah merupakan warna latar belakang kotak atau tabel yang bisa kita ganti warnanya sesuai selera).

Teks yang berwarna hijau silahkan ganti dengan alamat url yang akan di masukkan dan nama blog yang ingin di tampilkan.

Sekarang apakah Anda sudah tau pengertian blogroll serta cara membuat blogroll di blog? Moga-moga artikel ini bisa membantu.

Read More

Membuat Related Post Dengan Thumbnails

Mempercantik tampilan blog memang sangat banyak caranya dan salah satunya adalah membuat related post dengan thumbnails.

 Related post dengan thumbnails adalah merupakan tampilan artikel terkait bergambar yang di tampilkan di bawah artikel blog kita. Jadi kalau artikel blog kita selau di sertai dengan gambar di awal artikel, maka  related post dengan thumbnails ini sangat bagus untuk blog kita.

Jika Anda tertarik ingin menampilkan artikel terkait yang di sertai dengan tampilan gambar, Anda bisa mencobanya dengan merubah sedikit kode template blogger atau blogspot Anda. Ikuti langkah berikut ini:

• Login ke account atau dasbor blogger anda.
• Masuk ke halaman Rancangan.
• Klik Edit Html.
• Dan jangan lupa beri tanda centang pada "Expand Widget Templates".
• Cari dan temukan kode </head>.
• Gantilah kode tersebut dengan kode dibawah ini :

<!--Related Posts with thumbnails Scripts and Styles Start-->

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

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

</head>

•  Lalu cari dan temukan lagi kode dibawah ini:

<div class='post-footer-line post-footer-line-1'>

• Lalu letakkan kode dibawah ini persis dibawah kode tersebut di atas.

<!-- Related Posts with Thumbnails Code Start-->

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

<div id='related-posts'>

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

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

</b:if>

<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

 <!-- Related Posts with Thumbnails Code End-->

• Sekarang simpan template Anda dengan cara klik SIMPAN TEMPLATE.

 Siap dech dan apabila langkah-langkah di atas di lakukan dengan benar, maka silahkan coba lihat hasilnya pada blog Anda. Pasti related post atau artikel terkait dengan thumbnails muncul pada halaman posting blog Anda.

Selamat mencoba!!!

Read More

Cara Membuat READMORE Otomatis di Blogspot

Cara Membuat Readmore Otomatis di blogspot atau blogger memang masih banyak yang belum tau caranya. Dan postingan kali ini kita akan membahas tutorial tentang cara membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Karena dengan adanya Readmore otomatis, maka kita bisa menentukan ukuran berapa ketinggian serta lebar penggalan postingan dan gambar yang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik di pandang mata.

Trik ini memang sudah banyak yang mengetahui, namun pasti ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis di poastingan blogspot atau blogger, maka bisa mengikuti tutorial berikut ini.

• Silakan masuk ke acount atau dasbor blogger Anda.
• Kemudian pilih menus Rancangan.
• Klik Edit HTML.
• Lalu berikan tanda ceklis pada bacaan Expand Widget Template dengan cara mengklik kotak tersebut.
• Setelah itu cari kode </head> 
• Dan setelah ketemu, silahkan masukkan script di bawah ini persis dibawah kode tersebut.

<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://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

• Lalu cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

• Lalu ganti kode tersebut dengan kode di bawah 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'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Keterangan dari script di atas:

• Tulisan yang berwarna pink adalah merupakan tulisan yang bisa di ganti-ganti.
• Summary noimg = 430 adalah merupakan tinggi artikel terpenggal tanpa image.
• Summary img = 340 adalah merupakan tinggi artikel terpenggal dengan image.
• Readmore bisa diganti dengan kata Baca Selengkapnya, Baca selanjutnya, dll...

Nach seperti inlah kira-kira script html cara membuat Readmore otomatis di blogspot atau blogger yang bisa mempercantik tampilan blog kita.

Read More

Membuat Judul Atau Title Blog Berjalan di Blogspot

Berkreasi dengan kode HTML dan php, memang merupakan sesuatu yang sangat mengasyikkan bagi yang mengerti tentang itu. Kita bisa memainkan tampilan website atau blog kita sesuka hati dengan pernak pernik yang menarik.

Kali ini kita bermain-main sedikit tentang kode html untuk membuat judul atau title blog berjalan di blogspot atau blogger. Sebenarnya ini juga bisa di pakai di blog wordpress, hanya saja cara membuatnya tentu agak berbeda dengan blogspot.Caranya begini:

• Login ke dashboard blogspot Anda.
• Pilih menu Rancangan.
• Lalu pilih menu Edit HTML.
• Klik kotak Expand Template Widget.
• Cari kode ini: <title><data:blog.pageTitle/></title> (bila susah mencarinya silahkan tekan tombol Ctrl dan tombol F di keybord komputer Anda, lalu perhatikan monitor Anda, nanti akan muncul kotak, maka silahkan masukkan kode tadi ke dalam kotak tersebut. Nanti akan otomatis akan muncul kode yang di cari).
• Kalo sudah ketemu ganti kode itu dengan kode yang ini:

<b:include data=’blog’ name=’all-head-content’/>

<script language=’JavaScript’>

var txt=”<data:blog.pageTitle/>”;

var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

segarkan=setTimeout(“bergerak()”,kecepatan);}bergerak();

</script>

• Setelah itu silahkan klik tombol SIMPAN TEMPLATE.

Nach sekarang silahkan buka blog Anda dan silahkan perhatikan tampilan Judul atau title blog Anda di browser Anda.

Dan untuk mengatur kecepatan jalan hurufnya, silahkan ganti angka yang 100-nya sesuka Anda. Semakin besar angkanya maka semakin pelan jalan tulisannya. Begitu juga sebaliknya.

Gampang chan membuat judul atau title blog berjalan di blogspot atau blogger ??? Hanya dengan kode yang sedikit itu, bisa mempercantik tampilan blog kita.

Selamat berkreasi!!!

Read More

Cara Memasang Iklan atau Ads di Bawah Judul Postingan Blogspot

Memasang iklan di bawah judul postingan blog, bagi yang masih pemula memang masih banyak yang belum tau. Itu aku tau dari salah satu blog aku yang menggunakan domain costum, masih sangat banyak yang menanyakan gimana caranya meletakkan ads di bawah judul postingan blog. Karena kebetulan di blog aku tersebut, kebetulan juga aku meletakkan iklan di bawah judul postingan blog. Dan ternyata dengan meletakkan iklan di bawah postingan judul blog, ternyata sangat banyak mendapatkan klik dari user yang berkunjung dari pada di tempat lain.

Dan kalau Anda tertarik juga ingin meletakkan ads atau iklan di bawah judul postingan blog Anda, coba ikuti langkah berikut ini:

• Login ke dasbor blog Anda.
• Klik menu Rancangan.
• Klik edit HTML.
• Lalu cari code <div class='post-header-line-1'/>.
• Setelah ketemu, silahkan copy code di bawah ini dan pastekan di bawah code di atas.

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

Tempatkan Di Sini Script Iklan Anda

</em><br/></b:if>

• Setelah itu klik SIMPAN TEMPLATE.

Siap dech. Sekarang blog Anda sudah bisa menampilkan iklan atau ads di bawah judul postingan blog Anda.

Read More

Membuat Floating Iklan Bergerak Mengikuti Kursor

Pernah Anda berkunjung ke blog seseorang dan melihat ada sebuah iklan bergerak yang mengikuti arah gerak kursor? Itulah yang dinamakan floating ads bergerak.

Nach kalau Anda tertarik ingin membuat floating ads bergerak mengikuti kursor di blog Anda, kita silahkan copy code javascript di bawah ini dan tempatkan di blog Anda.

Berikut cara membuat floating ads bergerak:

• Masuk atau login ke dasbor blog Anda.
• Klik menu Rancangan.
• Klik Tambah Gadget.
• Pilih HTML/Java Script dan silahkan klik tanda "+".
• Lalu copy code di bawah ini dan pastekan di dalamnya: 

<style type="text/css">

#topbar{

position:absolute;

background:#ffffff;

z-index:+1000;

}

</style>

<script type="text/javascript">

/***********************************************

* Floating Top Bar script- &#169; Dynamic Drive (www.dynamicdrive.com)

* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)

* This notice must stay intact for legal use.

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 100 //set x offset of bar in pixels

var startY = 75 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}

function closebar(){

if (persistclose)

document.cookie="remainclosed=1"

document.getElementById("topbar").style.visibility="hidden"

}

function staticbar(){

barheight=document.getElementById("topbar").offsetHeight

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

var d = document;

function ml(id){

var el=d.getElementById(id);

if (!persistclose || persistclose && get_cookie("remainclosed")=="")

el.style.visibility="visible"

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.center=x+"px";this.style.top=y+"px";};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

el.y -= startY;

}

return el;

}

window.stayTopLeft=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("topbar");

stayTopLeft();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<div id="topbar">

<div align="right">

<center><span style="background-color:#ffffff;"><font color="black"><b>KLIK SALAH SATU IKLAN UNTUK MENUTUP</b></font></span></center>

</div><div id=layerba" onclick="closebar(); return true">

<center><div style="overflow:hidden;width:800px;height:400px;padding:50px; border: 20px solid #ffffff">

SCRIPT IKLAN ANDA LETAKKAN DISINI

</div></center>

• Simpan dan lihat hasilnya.

Beginilah cara  membuat floating ads bergerak yang mengikuti arak kursor dimana di gerakkan. Dan berdasarkan pengalaman, dengan menggunakan script ini penghasilan kita akan berlipat ganda. Apalgi kalau ads yang kita tempatkan adalah merupakan iklan PPC (paid per click).

Tapi pesan saya hati-hati dalam memakai atau menggunakan script ini karena bisa-bisa nanti akun Anda di banned oleh tempat anda mendaftar. :)

Read More

Memasang Widget Kirim SMS Gratis di Blog

Anda pasti pernah melihat di blog seseorang yang memasang widget pengiriman SMS gratis ke semua operator? Artinya kita bisa kirim SMS secara gratis kesemua operator tanpa harus kita mengetik pesan di hp kita dan tentu saja tanpa memotong pulsa kita juga. Sekarang ini penyedia jasa seperti itu di internet memang sudah sangat banyak

Nach jika Anda juga tertarik ingin memasang widget pengiriman SMS gratis ini di blog Anda, sebenarnya sangat gampang koq. Tinggal copi scriptnya, lalu tempel di blog Anda.

Behubung di Indonesia juga sudah ada penyedia jasa seperti itu, maka kita manfaatkan layanan yang di Indonesia saja. Cara begini, copy script di bawah ini:

<iframe name="widgetsms" src="http://www.sms-online.web.id/widget/" width="270" height="350" frameborder="0"></iframe>

Lalu tempel atau paste di widget blog Anda. Silahkan widgetnya di simpan dan silahkan buka halaman blog Anda sekarang sudah tersedia widget pengiriman SMS gratis yang bisa di manfaatkan oleh user yang berkunjung ke blog kita. Sehingga memungkinkan user untuk selalu mengingat blog kita supaya dia bisa mengirim SMS ke tman-temannya tanpa harus mengeluarkan biaya. Dan ujungnya pengunjung blog kita semakin banyak. Bukankah begitu??? :)

Read More