Bikin Border Blog

Oke kawan - kawan, barusan ane belajar merubah-rubah tampilan blog. Buat ane sih biar gak membosankan, karena ane cepat bosan dan cukup capek klo harus ganti template lagi.
Nah, kali ini yang ane pelajari soal border ato garis tepi.

Mungkin para senior dah banyak yang tahu, jadi disini ane sekedar sharing aja. Yukk kita mulai sama-sama :

Ternyata boder itu ada beragam jenis yang bisa kita kreasikan agar tampilan blog lebih berbeda dari biasanya. border ini bisa kita gunakan untuk text atau pun image. berikut beberapa jenis border yang ane ketahui :

Contoh pemakaian pada text :

Kita perhatikan huruf yang berwarna merah.

Kode :

<span style="border: 5px solid rgb(240, 140, 0); padding: 8px;">solid</span>

Tampilan border :

solid

Kode :

<span style="border: 5px double rgb(240, 140, 0); padding: 8px;">double</span>

Tampilan border :

double

Kode :

<span style="border: 5px groove rgb(240, 140, 0); padding: 8px;">groove</span>

Tampilan border :

groove

Kode :

<span style="border: 5px dotted rgb(240, 140, 0); padding: 8px;">dotted</span>

Tampilan border :

dotted

Kode :

<span style="border: 5px dashed rgb(240, 140, 0); padding: 8px;">dashed</span>

Tampilan border :

dashed

Kode :

<span style="border: 5px inset rgb(240, 140, 0); padding: 8px;">inset</span>

Tampilan border :

inset

Kode :

<span style="border: 5px outset rgb(240, 140, 0); padding: 8px;">outset</span>

Tampilan border :

outset

Kode :

<span style="border: 5px ridge rgb(240, 140, 0); padding: 8px;">ridge</span>

Tampilan border :

ridge

Kode :

<span style="border: 5px hidden rgb(240, 140, 0); padding: 8px;">hidden</span>

Tampilan border :

hidden

Catatan : untuk merubah warna ada pada setinggan RGB atau #kode warna

Padding adalah jarak antara obyek dengan border

Jika kita ingin menambah border pada gambar postingan, kita cari kode ini :

.post img

Kemudian kita tambahkan kode border sehingga menjadi seperti ini :

.post img {border: 5px solid #F08C00;}

Nah, setelah kita coba, seperti biasa kita klik previewnya dulu klo dah mantabs baru kita save.

Membuat iFrame

Sobat punya kebiasaan mengintip kayak saya ? he he.. ternyata di blogspot ada sarana untuk menyalurkan hobby itu. iframe orang bilang. Klo sobat pengen tau caranya, yuk sama-sama kita belajar..

Pertama sobat masuk ke Layout blogspot trus add gadget, kemudian add HTML
Kedua, copy paste kode script di bawah ini :

<iframe align="left" frameborder="1" src="http://coolmixs.blogspot.com/" width="550" height="150" scrolling="yes"> </iframe>

lalu simpan

maka hasilnya akan seperti ini :












Mudah kan,

Jika sobat pegen mengintip alamat lain, tinggal ubah aja alamat web/blognya.
tapi ingat, izin dulu ya..
Untuk pengaturan lebar dan tinggi kotak agar sesuai penempatannya, sobat ubah

height="150" untuk tinggi

width="500" untuk lebar

Bikin Recent Comment ( komentar terbaru )

Selain pake widget feed comment blogger, ternyata ada juga cara lain bikin recent comment. Cara ini malah lebih cepat dalam loading, lebih cepat update dan bisa nampilin lebih dari 5 komentar terbaru.

Langkahnya cukup mudah,

Masuk ke Layout trus add HTML/Java Script
Kemudian masukkan kode di bawah ini :


<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i++) {
var entry = json.feed.entry[i];
var ctlink;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");

document.write('<li>');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write(' on ' + pttitle);
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
}
}
document.write('</li>');
document.write('<div style="font-size:75%;text-align:center"><a href="http://www.coolmixs.blogspot.com">Komentar Terbaru</a></div>');
}
</script>
<script src="http://loe.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>

kemudian simpan.

Keterangan :
angka 5 yang berwarna merah menunjukkan jumlah komentar yang ditampilkan
angka 100 yang berwarna kuning menunjukkan jumlah karakter dalam setiap komentar yang ditampilkan
angka-angka di atas bisa sobat ganti sesuai dengan keinginan sobat.

selamat mencoba

Pilih dofollow atau nofollow ?

Pada postingan saya sebelumnya, saya mengajak sesama blogger untuk merubah blog kita menjadi dofollow. Kali ini saya mencoba menambahkan tentang untung ruginya dofollow ?

Kelemahan dofollow : Secara default semua blog adalah nofollow, hal ini dimaksudkan untuk mengurangi spam yang masuk ke dalam blog kita. sedangkan kita semua tahu klo spam itu tidak disukai mesin pencari, dan ini berbahaya bagi blog kita.
 
Untuk meminimalkan spam yang masuk, bisa kita filter lewat PENGATURAN komentar di draft.blogger. Kita bisa pasang kode veryfikasi, atur siapa yang boleh berkomentar atau kita filter via email.

Keuntungan dofollow : Blog sobat adalah bahwa Sobat dapat membantu sesama blogger yang ingin mempromosikan blognya secara tidak langsung di blog sobat karena Komentar di blog dofollow akan diindeks oleh mesin pencari dan itu merupakan tindakan yang mulia kan.
Dofollow merupakan bentuk terimakasih kita kepada sesama blogger yang telah meluangkan waktu berkunjung dan menulis komentar di blog kita.


Untuk menjadi dofollow atau nofollow blog memang tergantung pertimbangan kita masing-masing. jika temen-temen ada info soal  dofollow ini, mohon sharingnya ya..

Apa itu DoFollow

Saya sering lihat saat blogwalking ada banner u comment i follow atau do follow, tapi gak ngerti gimana maksudnya. Ternyata  "azaz dofollow" ini cukup menguntungkan sesama blogger ;
1. Bagi Pengunjung yang berkomentar : Intinya bahwa link URL dalam postingan atau komentar akan dibaca oleh search engine yang akan menjadi backlink dan akhirnya akan meningkatkan poin pagerank.
2. Bagi Pemilik Blog : adalah bertambahnya pengunjung, ini otomatis meningkatkan traffic di blog tersebut.

Secara default, semua template blog adalah no follow dan cara untuk merubahnya menjadi do follow dapat dilakukan dengan cara di bawah ini :

1. Masuk ke Tata letak trus ke edit HTML
2. Trus cari kata
<a href="data:comment.authorUrl" rel="nofollow">
3. Hapus kalimat tersebut
4. Sehingga menjadi : <a href="data:comment.authorUrl">
5. Simpan template dan kabarkan bahwa blog sobat telah dofollow

Cara melihat suatu blog sudah dofollow atau belum dapat kita lakukan sebagai berikut :
1.Gunakan Mozilla firefox sebagai browser default sobat,
2. Klik kanan pada  orang yang memberi komentar kemudian klik "propertis".
3. Lihat tulisan "Relation", kalau isinya external berarti DoFollow, kalau belum maka akan tertulis NoFollow
4. Paling lengkap pake Add-on Firefox, disana bisa sobat lihat link external sebuah blog, page rank, alexa dll
mari saling berbagi sesama blogger dengan menghilangkan rel='nofollow' dari blog kita 

salam blogger


Referensi : http://www.squidoo.com/dofollow

Bikin Link Open new window

HyperLink / text link banyak kita jumpai dalam dunia blogger,
contoh :
coolmixs


Namun terkadang kita lupa bikin hyperlink yang tidak berpindah halaman ( open in new window ). Menurut saya, agar blog kita tidak tertupuk oleh link tersebut dan tidak ditinggalkan pengunjung, sebaiknya kita bikin link yang open new window aja

nah unutk bikin link yang open new window, temen - temen dapat menggunakan kode di bawah ini :

<a href="alamat url" target="_blank">teks disini </a>

untuk teks warna merah, sobat ganti dengan alamat link yang akan dipasang
untuk tesk warna biru, sobat isi dengan keterangan dari link tersebut

kemudian save aja, salam blogger

sumber : http://www.bloggertricks.com

Buat Artikel Terkait dengan Fungsi Scroll

Langsung aja kita coba bikin artikel terkait dengan fungsi scroll:
Biasakan simpan dulu template sobat sebelum edit HTML,

Masuk ke tata letak dan edit HTML,
sobat cari kode ini : <data:post.body/>

Jika ada dua ( karena udah pasang read more ), sobat pilih yang kedua

Letakkan kode script di bawah ini tepat di bawah <data:post.body/>
Pada sebagian template ada yang memasang kode ini di atas <data:post.body/>

copypaste kode ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<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 = 10;
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>

Kemudian sobat cari kode ]]></b:skin>
Letakkan kode di bawah ini di atas kode ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #083E00;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(0, 0, 0);}

Nah, simpan lalu kita lihat hasilnya..

Cara Membuat Scroll Widget

Cara membuat Link Scorll widget seperti ini

Link temen - temen

Abcdefghijklmn

Abcdefghijklmn

Abcdefghijklmn

Abcdefghijklmn

Caranya mudah aja kok, copy paste script kode dibawah ini, bisa ditempatkan pada postingan atau juga sebagai widget pada sidebar

copy paste kode ini

<h2 class="title">Judul</h2>
<div class="widget-content">
<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 310px; height: 150px; text-align: left;">

<li> <a href="http://alamat blog yang mo di pasang" target="new'">Nama Link</a></li>

<li> <a href="http://alamat blog yang mo di pasang" target="new'">Nama Link</a></li>

</div>

Kalimat - kalimat yang berwarna merah dapat sobat ganti sesuai yang sobat inginkan, widget scroll ini selain buat daftar link, juga bisa dipakai buat tulisan, gambar dan sebagainya.

Yuk kita coba, selamat berkreasi...

Bikin Teks/Gambar Buka Tutup (Spoiler)

Waktu jalan - jalan bersama kakek Google, saya ketemu ama temen blogger yang cukup menarik perhatian saya. Lucu, ringkas, praktis.. wah menarik deh pokoknya. Spoiler namanya, kayak gini nih..

Hwaha.. Keren kan..

Spoiler ini selain bikin page blog jadi ringkas, juga bikin tampilan lebih menarik, bisa kita pasang di postingan atau juga di sidebar. Caranya cukup mudah, tinggal copypaste script di bawah ini.

<div id="spoiler"><div><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP LAGI'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI DUNK'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="KLIK UNTUK MELIHAT" /><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">TARUH DISINI GAMBAR ATAU TEKS YANG DIBUKA TUTUP</div><div id="hide"></div></div></div>

Tulisan warna merah : sobat ganti dengan tulisan atau gambar yang mau dibuka tutup
Tulisan warna kuning: besar kecil font pada tombol, bisa diganti sesuai selera

Nah, sekarang kita coba yuk..

ILANGIN JUMLAH POSTINGAN PADA LABEL

Karene coolmixs masih berstatus blogger pemula, jadi saat nini coolmixs masih giat dan semangat’45 pelajari soal tips-tips ngeblog. Makana postingan coolmixs masih didominasi artikel tentang blogging. Karena coolmixs ingin membagina langsung ama temen-temen yang mampir di blog coolmixs. Nah kali ini soal angka-angka pada label / kategori. Mengingat usia coolmixs yang lum atu bulan nih, pasti baru dikit banget kan postingan coolmixs, kadang jadi malu sendiri ngeliatna. Makanya coolmixs coba cari ada gak tips buat ilangin tuh angka-angka jumlah postingan yang ada di Label.

Kemarin coolmixs berkunjung ke www.koolsonic.com . dan mbak ika punya tips untuk ilangin angka – angka label itu seperti ini :


Buka Layout > Edit HTML > Expand Widget templates.

Kemudian cari kode berikut:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Scroll ke bawah, cari dan delete saja kode ini: (<data:label.count/>) . Save template.

Udah deh, Kini pada label blog sudah tak ada lagi number count.

HALAMAN BARU DI BLOG

Dua hari lalu coolmixs dipusingkan ama loding page yg
luemot banget gara2 majang
link donlot di halaman muka trus daftarna tu kebuka smua,
puanjang menjuntai
ampe kelantai.. ihiks.. garing. panjang deh pokokna. nah trus
coolmixs mikir tuh,
gimana carana biar daftar link donlot ane ni kagak puanjang gitu.
eh tiba-tiba kpikir ;) twink.. gimana klo bikin halaman baru
jadi ngelink di halaman lain?
bisa gak ya? mulai deh coolmixs browcing.. eits trnyata ada.
hwaduh.. coolmixs bener-bener ktinggalan kereta nih.
ternyata ada trik tuk bikin page baru yaitu dg manipulasi posting dan link.

nah nih... coolmixs bagi-bagi inpona hya..

1. buat postingan baru yg judulnya teserah temen - temen tuk halaman baru itu.

2. abis itu klik 'opsi entry' yg ada di bawah teks, ubah tanggal jadi posting terlama dari yg ada.

3. trus terbitkan entry, slanjutna masuk edit entry n cari postingan trlama yg baru kita bikin, setelah ktmu klik 'lihat' maka akan muncul halaman n jendela baru, trus copy alamat link halaman baru tsebut.

4. abis itu kita masuk pd 'tata letak', mau ditaruh dimana link halaman baru itu, di link header klo ada ato link gadget html aja, tinggal paste, trus simpan dah, jadi deh.. :)

trik ini msh bisa kita kreasikan lagi sebenarnya,

jadi met nyoba dan bekreasi hya..

salam blogger

CARA POSTING KODE HTML

Mungkin diantara temen – temen blogger ada yang bingung ketika akan mencoba berbagi postingan yang isinya kode – kode HTML tapi tidak bisa dimuat oleh blog dan dinyatakan ada kesalahan penulisan.

Awalnya coolmixs juga gitu, tiap mau terbitkan entry slalu gak bisa – bisa. puying juga...
Selalu tulisan dianggap ada kesalahan. Akhirna coolmixs browsing cara biar bisa posting kode – kode HTML dan nyoba membagi info ama temen – temen blogger.

Nah, ini yang harus kita lakukan :

Pertama,
Kita harus pergi ke alamat http://centricle.com/tools/html-entities/
Untuk mengconvert script HTML tayang ingin temen blogger posting atau langsung aja Klik Disini

Kedua,
Kita copy semua code Html yang akan kita posting ke kotak yang telah tersedia dibawah tulisan Convert text to HTML entities (and vice-versa) :

Ketiga, klik tombol Encode
Keempat, copy semua code yang ada dalam kotak ke dalam posting trus klik terbitkan entry

Sekarang lihat preview-na, klo udah ok tinggal simpan. Mudah kan

Selamat mencoba, semoga bermanfaat ..

BIKIN "read more" blogspot

Sebagai blogger pemula, coolmixs juga ingin menampilkan blog layaknya para webmaster. Salah satunya memotong postingan trus dikasih lanjutan "read more". Metode ini selain mempercantik blog, juga berguna agar halaman blog terasa ringan untuk dibuka.
Setelah googling dibeberapa blog tutorial, coolmixs sempat puying bin pening... hwduuh...
karena gak semua jurus para senior berhasil coolmixs terapkan.
Padahal coolmixs dah milih kode-kode yang bisa dipakai di template blogspot versi beta saja, bukan versi klasik.

Gyah... gak apalah namana juga lagi belajar. Setelah beberapakali googling ketemu juga ama yang punya jurus ampuh dan bisa coolmixs terapkan, yaitu punya oom.com.

Untuk itu coolmixs ingin berbagi ilmu ama temen - temen soal "read more" ini.
He he.. dah curhatnya itu aja, sekarang kita langsung ke kode untuk bikin read more nyah...

Pertama, buka halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini
di atas kode </head> Kalo udah, lalu simpan aja dulu

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[


/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Kemudian masih pada halaman EDIT HTML,
Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


trus disimpan dan abrakadabra...


Keterangan:
var thumbnail_mode = "float";
(kita dapat memutuskan apakah letak thumbnail berada di (float)
kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250;
(Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250;
(Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Namun kebanyakan template gratisan saat ini udah banyak yang  pake read more..
selamat mencoba.. semoga bermanfaat