GuruGoBlog

This is Delphi, A free premium blogger theme for you.

9/27/2011

Masih ingat dengan floating image? Itu tuh gambarnya tetap diam sekalipun kita menggulung layar, seperti gambar bola dunia dan panah pada blog ini. Nah, floating image ini bisa kita mamfaatkan untuk perintah ke atas dan ke bawah halaman blog. Dengan adanya perintah ini dapat memudahkan para reader untuk melihat halaman atas/bawah blog kita tanpa harus melakukan penggulungan layar.

Untuk membuat perintah ke atas dan ke bawah dengan floating image ini sebenarnya cukup mudah, kamu tinggal menambahkan link pada floating image tersebut. Tapi jika kamu lagi males mikir dan ingin yang praktis-praktis, ikuti saja langkah-langkah berikut:

· Dari halaman Dasbor Blogger kamu, pilih Tata Letak - Edit HTML.

· Kopikan kode CSS berikut dan letakkan di atas ]]></b:skin>:

#floating-atas-bawah {
position:fixed; _position:absolute; bottom:5px; right:5px; clip:inherit; z-index:+1000;}

· Setelah itu kopikan kode HTML berikut (gunakan Control C) dan letakkan di bawah </head> (antara </head> dan <body>):

<div id='floating-atas-bawah'>
<a href='#' title='Ke Atas'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/keatas.png'/></a> <a href='#footer' title='Ke Bawah'><img border="0" src='http://sites.google.com/site/ruangsc/imgsb/kebawah.png'/></a>
</div>

Kamu dapat mengganti gambar panah sesuai keinginan. Dan jika perintah kebawah tidak bekerja, gantilah #footer dengan #bottom.

· Simpanlah hasil kerjaan kamu dan

Mudah kan?! Ok brow, selamat mencoba.....

Gambar-gambar yang bisa kamu pilih:

URL:http://sites.google.com/site/ruangsc/imgsb/arrow-up.gif

URL:http://sites.google.com/site/ruangsc/imgsb/arrow-down.gif

URL:http://sites.google.com/site/ruangsc/imgsb/keatas.png

URL:http://sites.google.com/site/ruangsc/imgsb/kebawah.png

URL:http://sites.google.com/site/ruangsc/imgsb/scrolltop.png

URL:http://sites.google.com/site/ruangsc/imgsb/scrolldown.png

Membuat Floating Image

Posted by GuruGoBlog on 08.20

URL:http://sites.google.com/site/ruangsc/imgsb/arrow-up.gif

URL:http://sites.google.com/site/ruangsc/imgsb/arrow-down.gif

URL:http://sites.google.com/site/ruangsc/imgsb/keatas.png

URL:http://sites.google.com/site/ruangsc/imgsb/kebawah.png

URL:http://sites.google.com/site/ruangsc/imgsb/scrolltop.png

URL:http://sites.google.com/site/ruangsc/imgsb/scrolldown.png

Untuk membuat artikel terkait atau related post, kita akan sedikit mengubek-ubek kode HTML template kita. Jadi seperti biasa saya sarankan untuk membackup template sobat terlebih dahulu sebelum membuat artikel terkait ini.

Buat blogger baru yang belum mengerti tentang artikel terkait akan saya beri sedikit gambaran, kurang lebihnya seperti ini, dalam setiap postingan tentunya kita akan mengelompokkan postingan kita dalam beberapa kelompok atau yang biasa disebut dengan label (kategori).

Artikel terkait itu biasanya yang saya tau selalu berada dalam 1 kelompok postingan yang di kategorikan, dan umumnya diletakkan di bagian bawah postingan.
Berikut tutorial singkatnya :
Login ke Blogger.
Klik Tata Letak.
Klik tab Edit HTML.
Kemudian klik Expand Template Widgets .
Cari kode yang seperti ini :

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

atau jika bingung tekan Ctrl + F kemudian ketikkan kode berikut :

<data:post.body/>
Jika sobat sudah menggunakan read more pada template sobat, maka akan terdapat 2 kode <data:post.body/>.
Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel Terkait</h3>
<br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Kemudian Save Template.

Untuk membuat artikel terkait versi 2, silahkan sobat baca postingan saya tentang cara memasang artikel terkait di sidebar. Selamat mencoba !

Membuat Related Post

Posted by GuruGoBlog on 08.13

Berikut Langkah-langkahnya.

Pertama login ke blog kamu,
Pilih LayOut --> Add Gadget --> HTML/java Script

KoPas kode di bawah ini, caranya tinggal copy paste saja, langsung ke TKP :

<marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200"><br /><br /><script style="text/javascript" src="http://h1.ripway.com/icalholic/js_daftar_isi.txt"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://namablogmu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br /><br /></marquee><br/>By <a href="http://www.geraiblog.com/2011/02/tips-cara-membuat-daftar-isi-blog.html" target="_blank">mr blog</a>

Nah beres dech..............silahkan dicoba, kalau belum berhasil itu tandanya kita diberikan kesempatan untuk terus belajar, belajar dan belajar. Semoga Sukses...!!

Daftar Isi Efek Marquee (Berjalan)

Posted by GuruGoBlog on 08.07

Berikut Langkah-langkahnya.

Pertama login ke blog kamu,
Pilih LayOut --> Add Gadget --> HTML/java Script

9/23/2011

Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html"> Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html"> Cara Membuat Search Engine </option>
</select>

maka hasilnya akan seperti ini :

untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 2">Text 2</option>

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

ganti dengan kode ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

Membuat Dropdown Menu

Posted by GuruGoBlog on 14.03

9/22/2011

Membuat Artikel Terkait (Related Post)

Posted by GuruGoBlog on 17.42

9/17/2011

Cara membuat Auto Readmore otomatis :

1. Login ke Blogger
2. Klik Edit HTML centang Expand Widget Template
3. Cari code </head>
4. Copy script berikut di atas kode </head>

<script type='text/javascript'>
summary_noimg = 700;
summary_img = 500;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

Keterangan:
summary_noimg = jumlam karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
summary_img = jumlam karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter)
img_thumb_height = tinggi gambar thumbnail (misal: 150px)
img_thumb_width = lebar gambar thumbnail (misal: 200px)

· Setelah itu carilah kode : <p><data:post.body/></p> (Dalam beberapa template tidak memakai perintah paragraf (<p>), sehingga kodenya hanya <data:post.body/>. Jika ada 2 kode, pilih kode yang pertama.

· Ganti kode tersebut dengan kode ini:


<p>
<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='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + " " + data:post.title'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</p>


Catatan:
Jika ingin mengubah perataan teks ganti right dengan left, atau mengubah style huruf italic dengan normal. Tulisan Readmore... dengan kata lain atau dengan gambar.

· Simpanlah hasilnya.

Membuat Read More Automatis

Posted by GuruGoBlog on 17.30

Cara membuat Auto Readmore otomatis :

1. Login ke Blogger
2. Klik Edit HTML centang Expand Widget Template
3. Cari code </head>
4. Copy script berikut di atas kode </head>

<script type='text/javascript'>
summary_noimg = 700;
summary_img = 500;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

9/15/2011

Cara membuat Read more sejajar dengan paragraf adalah sbb:

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting.

Selengkapnya

mejadi

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. Selengkapnya

Caranya :

<b:if cond='data:blog.pageType == "item"'> 

<style>.fullpost{display:inline;}</style> 

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

<b:else/> 

<style>.fullpost{display:none;}</style> 

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

<a expr:href='data:post.url'><b>Selengkapnya.....</b></a> 

</b:if>

Agar kode read more atau selengkapnya menjadi sejajar dengan postingan, anda tinggal memindahkan kode </p> yang saya cetak merah, sehingga menjadi seperti ini :


<b:if cond='data:blog.pageType == "item"'> 

<style>.fullpost{display:inline;}</style> 

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

<b:else/> 

<style>.fullpost{display:none;}</style> 

<p><data:post.body/> 

<a expr:href='data:post.url'><b>Selengkapnya.....</b></a></p>

</b:if>

Membuat Read More Sejajar Dengan Paragrap

Posted by GuruGoBlog on 18.27

Cara membuat Read more sejajar dengan paragraf adalah sbb:

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting.

Selengkapnya

mejadi

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. Selengkapnya

Caranya :

<b:if cond='data:blog.pageType == "item"'> 

<style>.fullpost{display:inline;}</style> 

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

<b:else/> 

<style>.fullpost{display:none;}</style> 

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

<a expr:href='data:post.url'><b>Selengkapnya.....</b></a> 

</b:if>

Agar kode read more atau selengkapnya menjadi sejajar dengan postingan, anda tinggal memindahkan kode </p> yang saya cetak merah, sehingga menjadi seperti ini :


<b:if cond='data:blog.pageType == "item"'> 

<style>.fullpost{display:inline;}</style> 

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

<b:else/> 

<style>.fullpost{display:none;}</style> 

<p><data:post.body/> 

<a expr:href='data:post.url'><b>Selengkapnya.....</b></a></p>

</b:if>

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

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

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<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>

Perhatikan penempatan code yang berwarna merah
kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code

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

Untuk menempatkan di halaman Archive saja

<b:if cond='data:blog.pageType == "archive"'>

Untuk menempatkan dihalaman item/posting saja digunakan code

<b:if cond='data:blog.pageType == "item"'>

Dan untuk pada halaman pages atau static page blogger digunakan

<b:if cond='data:blog.pageType == "static_page"'>
Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini

<b:if cond='data:blog.url == "URL_HERE"'>

Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

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

Menampilkan Widget Di Halaman Tertentu

Posted by GuruGoBlog on 18.01

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML", lalu cari kode : .post img {- - -; ---;----;} atau mungkin saja berbeda seperti : .post-body img {- - -; ---;----;}

Yang harus diganti adalah isinya yang berwarna hijau, lalu gantilah yang berwarna hijau itu sehingga menjadi serti ini :

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Simpan dan lihat hasilnya.

Membuat Bayangan Pada Tepi Gambar Post Blog

Posted by GuruGoBlog on 17.46

9/13/2011

Sekilas Tentang Blog.

Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama. Awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari sebuah blog sangat bervariatif ada yang berisi tutorial, curhat, bisnis dan lain sebagainya. Secara umum, blog tidak ada bedanya dengan situs yang ada di internet.

Cara Membuat Blog.

Anda harus memiliki akun Gmail terlebih dahulu, jika belum memiliki silahkan daftar di Google Gmail.
Kemudian kunjungi