SARANA SHARING INFORMASI: Trik Bloger

Trik Mengganti Lambang Alamat Blog

sadzili.blogspot.com1. Log in Blogger
2. Layout
3. Pilih Edit HTML
4. Kemudian Letakkan kode berikut sebelum kode </head>

<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>

Silahkan ganti kode berwarna biru dengan url gambar anda , anda bisa menggunakan gambar dibawah ini :

http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img527.imageshack.us/img527/6543/image7go9.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

Demikian tutorial Cara Mengganti Icon Blog Pada Address Bar, semoga dapat membantu anda dan bermanfaat untuk anda. Terimakasih atas kunjunganya.

baca selengkapnya

Script Terbaru Mempercepat Loading Blogspot

Tips mempercepat blogspot bertujuan untuk memperingan loading blogspot, agar blog kita disukai mesin pencari. Kalau blogspot kita ringan, loading cepat, robot google senang berkunjung ke blog kita. Salah satu caranya adalah menggunakan sebuah script sederhana berikut ini. Sebelumnya yang tidak kalah pentingnya adalah script external link open window dan juga script tanggal yang semuanya untuk platform blogspot.Cara kerja script ini adalah memanfaatkan cookie blogspot kita.

Kembali ke topik, Bagaimana cara mengaplikasikannya ke blogspot?
1. Login ke blogspot anda
2. Setelah masuk dasbor, pilih Rancangan >> edit HTML
3. Letakkan kode berikut ini diatas <body>

<script type='text/javascript'>
//<![CDATA[
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie(PageType)
{
var cssFile=getCookie(PageType);
if (cssFile!=null && cssFile!="")
{
var div = document.getElementById("page-skin-1");
var div2 = document.getElementById(PageType);
div.innerHTML = "";
div2.innerHTML = "";
document.write("<link type='text/css' rel='stylesheet' href='" + cssFile + "' />");
}
}
function writeCookie(homePg,itemPg)
{
setCookie("csshome",homePg,7);
setCookie("cssitem",itemPg,7);
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
checkCookie('cssitem');
//]]>
</script>

4. Simpan template Anda

Untuk mengetahui efek dari kerja script mempercepat blogspot ini, alangkah baiknya Anda memperhatikan blogspot kalian setelah ataupun sebelum pemasangan script percepat loading blogspot ini. Jujur.... zonaaneh setelah masdowi pasangi script ini loadingnya terasa lebih cepat dibanding sebelum dipasangi.

Selamat mencoba....

baca selengkapnya

Membuat Menu Tab Sederhana

Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot untuk dibuatkan menu horizontal yg sama dengan menu horizontal sebuah blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope you enjoy and like it!

menu horizontal blogger

demo menu horizontal

Kode CSS:

/* Navigasi tabs Sederhana buka-rahasia.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

Atau
:
/* Navigasi tabs Sederhana buka-rahasia.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:178px; height:30px; background:#010000; border:1px solid #ebebeb;margin-top:-10px; text-align:center; text-decoration:none; font-family:georgia, sans-serif; font-size:19px; font-weight:bold;color:#0afcf9; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

.

Kode HTML:

<div id='burasbar'>
<a href="#" class="burastabs">Home</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Blog Tips</a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:

1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.

2. Copy kode CSS di atas,

4. Cari ]]></b:skin> (cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat di atasnya.
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget

7. Setelah pop up window muncul, pilih opsi HTML/Javascript

8. Masukkan Kode HTML yg telah diedit tadi pada kolom seperti contoh berikut:

undefined

9. Klik save.

10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi. DOnE!

baca selengkapnya

Cara Memasang Tombol Facebook Share Dalam Postingan Blog

Selain facebook like yang sudah pernah saya bahas sebelumnya, Facebook juga memperkenalkan widget lain yang cukup terkenal yaitu Facebook share.

Sesuai namanya, widget ini berguna untuk membagikan sebuah halaman situs ke profil facebook.

Lalu apa bedanya antara Facebook like dan Facebook share?

Secara umum kedua widget tersebut sama-sama berguna untuk membagikan sebuah halaman situs ke Facebook. Sebagai contoh anda menyukai postingan ini maka anda bisa membagikan halaman ini ke teman facebook anda dengan menekan tombol facebook like atau facebook share.

Nah yang berbeda adalah cara penyajiannya. Jika anda membagikan melalui facebook like maka halaman ini akan muncul pada menu 'recent activity' sedangkan dengan facebook share halaman akan muncul pada menu 'News Feed'.

Agar lebih jelas perhatikan screenshot berikut:

Contoh tampilan posting yang dibagikan melalui facebook like

facebook like

Contoh tampilan posting yang dibagikan melalui facebook share

facebook share

Ok... sudah jelas ya perbedaannya. Sekarang mari kita pelajari cara memasang tombol facebook share dalam postingan blog. Untuk cara memasang tombol facebook like bisa anda baca disini.

1. Buka blogger. Masuk ke menu Design->Edit HTML

2. Beri centang pada 'Expand widget templates'

3. Cari kode <data:post.body/>

4. Kalau anda menemukan dua kode <data:post.body/> maka pilih yang pertama

5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <data:post.body/> jika anda ingin memasang tombol fshare dibawah postingan atau letakkan diatas <data:post.body/> jika anda ingin memasang diatas postingan.

Tombol Fshare tanpa counter

Kode:

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter diatas

Kode:

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter disamping

Kode:

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

baca selengkapnya

Membuat Related Post Berdasarkan Label Blog

Related Post,Related Article, Artikel Terkait, Membuat Related Post, cara membuat artikel terkait, Related Post Berdasarkan Label Blog

Related Post dalam bahasa Indonesia berarti Post yang terkait atau post yang berhubungan. Tidak sedikit dari kita, yang mengartikan Related Post dengan artikel yang berhubungan. Related Post adalah salah satu fitur blog yang befungsi untuk menampilkan post yang berkaitan atau post yang berhubungan dengan artikel yang di buka. Memasang Related Post atau memasang Artikel Terkait pada blog sobat blogger akan membuat pengunjung blog bisa lebih lama menghabisakan waktu di blog kita. Karena kita sudah menyuguhkan mereka bacaan atau artikel yang ada kaitanyya dengan artikel yang mereka baca atau cari.

Cara Membuat Related Post atau Cara Pasang Related Post:

Sobat blogger login dulu di blog sobat
Di bagian dashboard--> Klik Layout- -> Klik Edit HTML
Kasih tanda centang pada Expand Widget Template
Copy kode berikut :

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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>

Paste kode tersebut setelah kode <data:post.body/> (Kalau sobat blogger sudah memasang fitur Read More, Sobat blogger harus paste kode tersebut setelah kode Read More)
Save Template sobat.

baca selengkapnya

Cara Membuat Kotak Komentar Twitter dan Facebook Dengan Tap Berdampingan di Blogger

Kami telah mencoba selalu berinofasi untuk membuat sesuatu yang baru, yang dapat membuat blog kita meningkat Trafficnya, pasti berbagai cara kita lakukan. Kini kami mendukung usaha anda dalam postingan-postingan kami yang sangat bermutu dan berkualitas, semoga bisa menjadi sebuah kekuatan pada blog kawan-kawan.

Langsung saja, kami telah mencoba berbagai cara untuk membuat seperti yang anda lihat pada gambar. Awalnya kami hanya menggunakan penggabungan Blogger Comment dengan Facebook Comments, tapi kami melihat banyak juga saat ini para penggguna Twitter Mania, kami mencari solusi sebuah inofasi, akhirnya kami Tanya mbah google “Cara Membuat Aplikasi di Twitter” dan kami mencoba menganalisa dengan cermat. Seperti inilah yang dapat kami lakukan, menggabungkan 3 komentar langsung (Blogger, Twitter, Facebook) sehingga membuat komentar pada blog kita menjadi indah. Dan kami langsung mempraktekkannya pada blog kami, akhirnya berhasil.

Dan kami telah menggunakan ini.
Apakah kawan-kawan ingin menggunakannya juga-??

*Kami akan memberikan cara dengan mudah dan terperinci.
Semoga dapat bermanfaat.

Untuk membuat kotek komentar Blogger, Twitter, Facebook dengan digabungkan ikuti langkah dibawah ini :

Yang kita butuhkan adalah :
- APP ID (pada facebook)
- API Key (pada twitter)
- ID Blogger (pada bglogger)

Bingung cara membuatnya-??
Naahh…
Langsung saja untuk mendapatkan API Key buatlah aplikasi di Twitter,
Untuk membuat nya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)

Untuk mendapatkan APP ID buatlah aplikasi di Facebook Devoleper
Untuk membuatnya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)

Untuk mendapatkan ID Blogger,
Kita masuk pada blogger kemudian lihat pada Address Bar (copy angka setelah ID=…….)

Sekarang selesai langkah pertama.
Sebelum memulai, terlebih dulu download template lengkap untuk berjaga-jaga barangkali kita ingin mengembalikan ke template semula atau jika terjadi kesalahan. Sekarang kita mulai langkah-langkah memasang kotak komentar facebook dan twitter di blogger.

1. Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Centang 'Expand Template Widget'
2. Tekan tombol Ctrl+F lalu cari kode <head>
3. Masukkan kode berikut tepat di bawah kode <head>:

<meta content='Profile_ID' property='fb:admins'/>
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_KEY&v=1'/>

4. Perhatikan kode berwarna merah :

Ganti tulisan Profile_ID dengan ID profil atau username facebook kita. ID profil bisa berupa angka atau huruf. Cara mengetahui ID profil kita adalah dengan membuka halaman profil dan lihatlah kolom alamat (address bar). Seperti alamat facebook saya adalah www.facebook.com/djmemed, maka ID profil Saya adalah djmemed
Kita juga bisa mengeset username dengan masuk ke account settings (pengaturan akun) > username (nama pengguna) > edit (sunting).
Ganti tulisan APP_ID dengan ID Aplikasi facebook kita yang tadi kita buat sebelumnya
Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang kita buat sebelumnya

5. Berikutnya, cari kode class='comments'

6. Masukkan kode berikut tepat di bawah kode class='comments'

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

7. Perhatikan kode berwarna merah:
Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
Kita bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang diinginkan

8. Simpan template dan hasilnya bisa dilihat sendiri pada halaman postingan di blog saya ini. Selamat mencoba, semoga berhasil!

Selesai.... kan.

Tambahan ilmu :

Untuk menghilangkan ikon kotak komentar dari halaman statis, lakukan langkah-langkah berikut (setelah kita berhasil memasang kotak komentar facebook dan twitter di blogger):

Masuk ke dasbor > rancangan > edit HTML > ceklis 'expand template widget'
Dengan menggunakan Ctrl+F, cari kode class='comments'
Tepat di bawahnya, masukkan kode <b:if cond='data:blog.pageType != "static_page"'>
Di bawah kode yang kita tambahkan tadi, akan kita temukan kode-kode tab kotak komentar yang sudah kita masukkan sebelumnya.
Scroll ke bawah lagi dan temukan kode <div class='clear'/>
Tepat di atas kode tersebut, masukkan kode </b:if>
Simpan template

baca selengkapnya

Cara Memasang Fasilitas Print This Page di Blog

cara memasang Fasilitas Print This Page pada Blog, Fasilitas Print This Page, Print This Page Blog, Fasilitas Print This Page Blogspot

Pernah tidak sobat blogger berkunjung ke suatu blog, kemudian di blog tersebut terdapat Icon Printer di bawah posringan atau di samping title postingan? Kalau Icon printer tersebut di klik, maka artikel atau postingan pada halaman blog tersebut pasti akan akan di print. Ya... tentunya komputer sobat blogger harus sudah terhubung dengan komputer sobat. Bagaimana cara memasang fitur Print pada blog? Untuk tutorial kali ini, Rinjani Lovers akan memberikan tutorial blog tentang cara Memasang Fasilitas Print This Page pada blog.

Log In di http://www.blogger.com/
Klik Menu Rancangan, lalu pilih Edit HTML.
Kasih tanda Centang pada Expand Widget Template
Pilih salah satu di antara kedua kode yang ada di bawah ini:

Kode Pertama :

<a href='javascript:window.print()' title='Print this Page'><img src='http://i785.photobucket.com/albums/yy131/djnand/print.gif'/></a> <script type='text/javascript'>
var authorId = "C7AAB579-3D36-4A37-B7A1-0863E2F39F4B";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>

Hasil yang akan di tampilkan oleh kode pertama seperti ini :

Kode Kedua :

<a href="javascript:window.print()"><img src="http://i785.photobucket.com/albums/yy131/djnand/iconprint.png" alt="print this page" border="0"/> Print This Page</a>

Hasil yang akan di tampilkan oleh kode kedua seperti ini :

print this page

Print This Page

Letakkan salah satu di antara kedua kode tersebut setelah <data:post.body/> atau <p><data:post.body/></p>
Klik Simpan

Tambahan :
Kalau terdapat dua kode <data:post.body/> pada blog sobat, letakkan kode tersebut pada kode yang kedua

baca selengkapnya

Cara Hapus dan Menghilangkan Showing Posts With Label

Showing posts with label, hapus Showing posts with label, menghilangkan Showing posts with label

Kalau sobat blogger menggunakan widget Label sebagai menu navigasi, sudah pasti setiap kali pengunjung blog sobat mengklik label tersebut, di bagian atas di blog post sobat keluar tulisan “Showing posts with label ……... Show all posts”. Tulisan seperti itu, terlihat sangat menggangu kalau tidak di hapus di blog ini. Jadi kemarin malam, blog Rinjani Lovers menghapus tulisan “Showing posts with label ……... Show all posts” tersebut. Bagaimana cara hapus tulisan “Showing posts with label ……... Show all posts”? Ikuti langkah mudah di bawah ini!

Cara menghilangkan tulisan “Showing posts with label ……... Show all posts” di blog:

Silahkan sobat Log in di blog sobat
Di bagian Dashboard sobat klik layout dan klik Edit HTML
Kasih tanda centang pada Expand Widget Template. Kalau sobat tidak kasih tanda centang, maka kode yang akan di cari tidak akan dapat ditemukan.
Cari kode berikut:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Kalau sobat blogger sudah menemukan kode tersebut, Hapus kode itu dan ganti dengan kode di bawah ini

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Simpan template sobat.

Kalau sobat blogger sudah berhasil menghilangkan tulisan “Showing posts with label ……... Show all posts”, kasih tau sobat blogger yang lain tetang hal itu melalui kolom komentar di bawah ini.

baca selengkapnya

Cara Membuat Efek Pelangi untuk Link Blog

Sebelum sobat blogger membaca lebih lanjut tentang Tutorial Blog kali ini, coba sobat blogger menggeser mouse yang sobat pegang, kemudian arahkan cursor sobat pada salah satu link yang ada pada blog Rinjani Lovers ini. What do you see? Apa yang sobat lihat pada link tersebut? Sudah pasti perubahan warna pada Link tersebut. Perubahan warna pada Link tersebut menampilkan warna pelangi Merah, Jingga, Kuning, Hijau, Biru, Nila dan Ungu . Keren kan?

Ada dua kode yang bisa digunakan untuk membuat efek pelangi pada link blog tetapi yang akan Rinjani Lovers berikan adalah kode yang Rinjani Lovers terapkan pada blog ini. Berikut ini kode untuk membuat efek Pelangi pada link blog. Silahkan di copy!

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}

function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}

function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}

function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}

function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}

function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}

function ChangeColor()
{
objActive.style.color = makeColor();
}

function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

Kalau kode tersebut sudah di copy, Paste kode tersebut setelah kode </head> Seperti biasa, Tentunya sobat blogger harus login dulu ke akun blogger sobat, setelah itu, sobat klik menu Edit HTML. Lagi satu, Kalau kode tersebut sudah di paste, Simpan template sobat dan lihat hasilnya.

Menambahkan Efek pelangi Pada link Blog akan memperindah tampilan blog dan dapat membuat pengunjung blog kagum dengan keunikan-keunikan yang sobat tunjukkan pada blog sobat.

baca selengkapnya

Cara Buat Facebook Like Button di Blog

Tombol Facebook Like merupakan sebuah fitur yang di buat oleh Facebook supaya visitors atau pengunjung dari blog sobat dapat menunjukkan rasa sukanya terhadap tulisan yang sudah sobat blogger buat. Oleh karena itu, Hari ini Rinjani Lovers akan memberikan Tutorial Blog mengenai bagaimana cara membuat Tombol Facebook Like pada Setiap postingan sobat Blogger. Sebelum sobat blogger membuat tombol Facebook Like, silahkan sobat Blogger menentukan dimana sobat Blogger akan menempatkan Tombol Facebook Like tersebut. Berikut ini adalah tempat-tempat yang sering digunakan untuk meletakkan Tombol facebook Like:

Tombol Facebook Like di atas postingan
Tombol Facebook Like di bawah postingan
Tombol Facebook Like hanya muncul di halaman depan (Homepage)
Tombol Facebook Like hanya muncul di halaman posting saja (Single Post)

Ini merupakan kode untuk membuat Tombol Facebook Like:

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

Berikut ini adalah Cara Buat Facebook Like Button di Blog:

Login ke Blogger sobat di alamat http://www.blogger.com/
Klik Rancangan dan Klik Edit HTML
Kasih tanda centang pada Expand Template Widget
Cari kode berikut : <data:post.body/>
Kalau sobat sudah menemukan kode <data:post.body/> sobat bisa meletakkan kode Facebook yang berada di atas SEBELUM atau SETELAH kode <data:post.body/>

Keterangannya sebagai berikut:

Kalau sobat ingin meletakkan Tombol Facebook Like di atas Postingan, letakkan kode Facebook Like di atas SEBELUM <data:post.body/>
Kalau sobat ingin meletakkan Tombol Facebook Like di bawah Postingan, letakkan kode Facebook Like SETELAH <data:post.body/>
Kalau sobat ingin meletakkan Tombol Facebook Like pada halaman depan saja (Halaman Branda), letakkan kode facebook dengan cara seperti ini :

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

<data:post.body/>

Kode Tombol Facebook Like disini

</b:if>

Agar tombol Facebook like hanya muncul di halaman posting saja (Single post) :

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

<data:post.body/>

Kode Tombol Facebook Like disini

</b:if>

Kode yang berwarna Hijau, harus ditambahkan dengan cara seperti di atas. Jangan lupa meletakkan kode tombol Facebook Like.
Kalau sobat sudah meletakkan Kode Tombol Facebook Like dengan cara yang tepat, Simpan atau Save Template sobat.

Sebelum melakukan peng-editan Template, sebaiknya sobat melakukan Backup template sobat untuk menghindari adanya kesalahan dalam melakukan editing.

baca selengkapnya

Cara Buat Energy Saver

Energy Saver atau penyimpan energi adalah salah satu fitur blog yang bisa membuat tampilan blog terlihat lebih keren. Energy Saver muncul apabila pengunjung blog tidak melakukan aktivitas apapun pada blog sobat blogger. Masih belum tau juga? Coba jangan klik apapun atau menggeser Mouse sobat selama satu menit, Nanti sobat akan melihat Energy Saver muncul di blog ini.

Cara membuat Energy Saver adalah sebagai berikut:

Login ke Blogger sobat di alamat http://www.blogger.com/
Klik Rancangan dan Klik Edit HTML
Kasih tanda centang pada Expand Template Widget
Copy kode yang ada di bawah dan paste SEBELUM kode </head>

<script language='javascript' src='https://sites.google.com/site/unwanted86/javascript/savetheenvironment.js' type='text/javascript'/>

Save Template sobat

Untuk melihat apakah Energy Saver sudah terpasang di blog sobat, Explore blog sobat dan Biarkan selama satu menit (jangan melakukan aktivitas apapun).

Semoga Tutorial Blog yang sangat singkat ini, dapat memacu sobat blogger untuk membuat tampilan blog sobat lebih keren.

baca selengkapnya

Membuat Recent Post Animasi di Blog

tutorial blog, blogger tutoral, blogspot, blog, Membuat Recent Post Animasi, Recent post animated, widget recent post, free widget, recent post blog

Recent Post dalam Bahasa Indonesia berarti Posting baru-baru ini (Posting Terbaru). Widget Recent Post sangat bagus kalau di pasang di Blog sobat, karena Windget For Blogspot ini dapat mempercantik atau memperindah tampilan Blog dan dapat mempermudah pengunjung blog dalam mengetahui postingan terbaru dari blog sobat. Oleh karena itu, Tutorial Blogger kali ini akan membahas tentang bagaimana membuat Recent Post. Pada beberapa tutorial blog di situs lain, mereka memberikan Tutorial Blog tentang cara membuat recent post thumbnail, tetapi untuk Rinjani Lovers sendiri akan memberikan tutorial tentang cara membuat recent post Animasi. Silahkan ikuti langkah-langkah di bawah ini!

Cara membuat Recent Post:

Login ke akun blogger sobat di alamat http://www.blogger.com/
Klik Design kemudian klik Add a Gadget
Selanjutnya klik HTML/javascript
Copy kode di bawah ini

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://rinjanilovers.blogspot.com" target="_blank">get this widget here</a></small>

Pada kolom title atau judul beri nama RECENT POST
Selanjutnya pada kolom kedua, pastekan kode di atas.
Kemudian klik Save atau simpan

Tambahan:

Tulisan yang berwarna merah adalah kode warna untuk Background, silahkan sobat ganti dengan warna Background yang sesuai dengan template sobat.
Angka yang berwarna kuning adalah Jumlah Post atau Postingan yang akan ditampilkan, silahkan sobat sesuaikan sendiri.

baca selengkapnya

Cara Memasang Gambar di Sebelah Kiri Halaman Blog (Floating Image) gambat

gambat

Postingan yang kali ini sobat blogger baca adalah tentang cara memasang gambar di sebelah kiri halaman blog. Postingan ini Rinjani Lovers publikasikan karena kebetulan salah seorang dari rekan sesama blogger sempat bertanya melalui kolom komentar.
“gimana, cara menampilkan foto seperti gambar sampean n langsung terhubung ke facebook”
Sebenarnya, ada beberapa alasan sehingga blog ini memasang gambar tersebut di sebelah kiri :

Pertama, karena saya ingin blog ini terlihat beda dengan blog-blog yang lain (Bukan mau pamer muka).
Kedua, supaya pengunjung blog bisa berinteraksi secara langsung dengan saya melalui situs jejaring sosial Facebook.

Untuk membuat gambar tampil di sebelah kiri halaman blog, sudah pasti sobat blogger harus memiliki foto atau gambar yang akan ditampilkan.
Kalau sobat blogger sudah memiliki gambar, sobat Upload gambar tersebut ke PhotoBucket misalnya atau ke website-website penyimpanan gambar yang lain.
Kalau kedua hal itu sudah siap, ikuti langkan di bawah ini.

Cara menampilkan gambar di sebelah kiri halaman blog :

Sobat Login dulu di blog sobat
Pilih tata letak lalu klik Edit HTML
Kasih tanda centang pada Expand Widget Template
Copy kode berikut :

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+
document.documentElement.clientWidth - offsetWidth); }

Paste kode tersebut sebelum kode ]]></b:skin>
Selanjutnya, copy kode berikut :

<div id="trik_pojok"><br /><a href="http://www.facebook.com/#!/MuhammadSeptiRosidi"><br /><img src="URL GAMBAR" border="0" /></a><br /></div>

Paste kode tersebut sebelum kode </body>
Simpan Template sobat

Tambahan :
http://www.facebook.com/#!/MuhammadSeptiRosidi bisa di ganti dengan URL Facebook, URL Twitter, atau URL Blog sobat
Ganti URL GAMBAR dengan URL gambar sobat

Kalau sobat blogger mengalami kesulitan dalam membuat gambar di sebelah kiri halaman blog, silahkan sobat blogger bertanya melalui kolom komentar. Dengan senang hati Rinjani Lovers akan jawab.

baca selengkapnya

Cara Memasang Kotak Pencarian atau Box Search di blog

search box, kotak pencarian, memasang kotak pencarian, widget kotak pencarian, gadget, widget, menambahkan kotak pencarian

Search Box dalam bahasa Indonesia berarti kotak pencarian. Kotak pencarian merupakan sebuah tools yang dapat mempemudah pengunjung dalam menemukan artikel yang ingin di baca. Oleh karena itu, Tutorial blog yang akan disampaikan Rinjani Lovers adalah tentang cara membuat kotak pencarian pada blog. Kotak pencarian yang di tawarkan hari ini, memiliki tampilan yang sangat simple atau sederhana. Mungkin karena memiliki tampilan yang sangat sederhana, sehingga banyak blog memasang kotak pencarian ini.

Berikut ini tampilan dan kode dari masing-masing kotak pencarian :

Kotak Pencarian 1

Kotak Pencarian 2

Kotak Pencarian 3

Kode Kotak pencarian 1

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Click to go" type="submit"/></form>

Kode Kotak pencarian 2

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text" style="background: #ffffff; border: 2px solid #cccccc"/><input id="search-btn" value="Search" type="submit" style="background: #cccccc; border: 2px outset #cccccc; color: #000000; font-weight: bold;"/></form>

Kode Kotak pencarian 3

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text" value="Enter search query"/><input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3jT1aJQ5ezTuoImb9UmTgt2gbyIXAl2SRkX5dPTyFiG4nRkbycCn5-rG8_EngBXSsvhfcKPT3h49WRLyt2hpc3DPpOLFcm9MGsyk7IDWmzaTjKx8frFNUo7DbakYc7kA-SZB9d6pcb9w/s1600/magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

Copy salah satu kode dari kotak pencarian tersebut, letakkan kotak pencarian tersebut di kolom widget/gadget.

baca selengkapnya

Cara Buat Otomatis ALT Tag di Setiap Gambar Blog

alt tag gambar, optimasi gambar, gambar blog, Gambar, blog images, SEO Images, SEO, Optimalkan Gambar, java script gambar, kode gambar

Untuk melakukan proses SEO (Search Engine Optimization), banyak upaya atau hal yang harus kita lakukan. Salah satu dari upaya tersebut adalah dengan menambahkan ALT Tag pada semua gambar yang ada di blog. Banyak blogger yang beranggapan bahwa menambahkan ALT Tag pada gambar, hanya membuang-buang waktu saja. Itu adalah anggapan yang salah besar. Berdasarkan buku yang di rilis Google (Buku Search Engine Optimization), Google sangat menyarankan para Webmaster untuk menambahkan ALT Tag pada setiap post yang dipublikasikan karena hal itu akan berdampak positif buat blog tersebut. Silahkan sobat kunjungi Google Webmaster Tools untuk informasi lebih lanjut. Karena penambahan ALT Tag pada gambar sangat penting untuk SEO, Rinjani Lovers menyiapkan kode Java Script. Kode Java Script ini akan membuat semua gambar yang ada di blog Automatic Seo. Bagaimana dengan Postingan atau artikel yang sudah dipublikasikan sebelumnya? Semua gambar di postingan tersebut, secara otomatis memiliki ALT Tag. Kode Java Script ini di peroleh dari salah satu website berbahasa Inggris.

Cara menambahkan Automatic SEO for Images pada blog :

Login ke Blogger sobat di alamat http://www.blogger.com/
Klik Rancangan dan Klik Edit HTML
Kasih tanda centang pada Expand Template Widget
Copy kode yang ada di bawah dan paste SEBELUM kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[ $(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$("img:not([alt])").attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$("img:not([alt])").attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

//]]>
</script>

Simpan Template sobat.

baca selengkapnya

Cara Membuat Read More Blog dengan Mudah

Pada halaman pertama blog atau halaman branda, jumlah default post yang ditampilkan adalah tujuh post (Silahkan lihat bagian setting di bagian dashbor blog sobat). Kalau ke tujuh postingan sobat blogger ditampilkan pada satu halaman, sudah pasti antara header dan footer blog terdapat jarak yang cukup jauh. Hal itu membuat penampilan blog sobat terlihat kurang indah. Jadi apa yang harus dilakukan? Sobat harus memenggal setiap postingan blog sobat dengan cara “Membuat Read More”. Read More adalah sebuah fitur pemenggal postingan pada halaman depan atau branda suatu blog. Jika title atau link read more di klik, maka postingan penuh akan tampil. Oleh karena itu, Rinjani Lovers akan memberikan Tutorial Blog tentang cara membuat read more. Ikuti langkah di bawah ini untuk membuat Read more blog.

Login ke blogger sobat di www.blogger.com
Pilih menu Rancangan --- > Edit Html.
Kasih tanda centang pada Expand Template Widget
Copy kode berikut:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

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

Paste kode tersebut di atas kode </head>
Selanjutnya, Cari kode <data:post.body/>
Kalau sudah ketemu, ganti kode <data:post.body/> dengan kode di bawah ini

<b:if cond='data:blog.pageType == "static_page"'><br/>

<data:post.body/>

<b:else/>

<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:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>

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

</b:if>

Save atau simpan template sobat

Keterangan Kode di atas:

summary_noimg = 430 = Post terpotong tanpa Gambar
summary_img = 340 = Post terpotong tetap menggunakan gambar
img_thumb_height = 100 = Tinggi Gambar
img_thumb_width = 120 = Lebar Gambar

baca selengkapnya

Cara Buat Facebook Like Auto Hide

facebook like,facebook,facebook like auto hide,facebook Fan page,Cara Buat Facebook Like Auto Hide

Facebook like auto hide merupakan Facebook Social Plugin yang menampilkan berapa jumlah pengguna facebook yang like atau menyukai blog kita disertai dengan foto mereka. Facebook social Plugin ini terlihat keren dan indah kalau di pasang di blog karena kalau crussor diarahkan pada plugin ini, maka plugin ini akan langsung muncul. Itulah alasan mengapa plugin sosial ini disebut dengan istilah Facebook Like auto hide, tidak jarang juga yang menyebut plugin ini dengan istilah Facebook Fan Page Auto Hide (Kekeliruan dalam memberikan nama atau istilah ini sepertinya harus diluruskan karena social plugin untuk Facebook Fan Page berbeda jauh dengan Social Plugin Facebook Like).

Kalau tidak salah, mungkin ini adalah tutorial blog yang ketiga yang Rinjani Lovers berikan yang berkaitan dengan Facebook setelah Cara Buat Facebook Like Button di Blog dan Cara Memasang Facebook Like Badge di Blog. Kalau sobat blogger belum membaca tutorial yang saya sebutkan tadi, baca saja itu dulu.

Cara Membuat Facebook Like auto hide di blog :

Sobat blogger harus masuk dulu ke akun Blogger sobat.
Kemudian Klik Design dan Edit HTML
Cari kode </head>
Kalau sudah ketemu, Letakkan kode berikut di atasnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Simpan template sobat.

Proses pembuatan atau pemasangan Facebook Like auto hide belum selesai, masih ada kode yang harus sobat blogger masukkan lagi. Untuk itu, ikuti saja langkah di bawah ini!

Dari Dasboard, Klik Page Elements dan Klik Add a Gadget
Kemudian Pilih HTML/Javascript
Copy Paste kode berikut di dalam kotak yang tersedia

<script type="text/javascript">
//
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/RinjaniLovers/149904085104258&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe>

Sebagai tambahan, Ganti URL http://www.facebook.com/pages/RinjaniLovers/149904085104258 dengan URL Facebook sobat. Jadi sobat blogger harus login dulu di akun Facebook sobat.

baca selengkapnya

Pasang Aksesoris Berjatuhan Di Blog

1. Seperti biasa login terlebih dahulu di blog anda.

2. Jika sudah masuk dasbor, maka menuju TATA LETAK > EDIT HTML.

3. Kemudian cari kode ini <head>

4. sudah ketemu, anda letakkan kode berikut tepat di bawahnya, bisa juga diletakkan di atas kode

</body>

Untuk Daun :

<script src='http://arti.master.irhamna.googlepages.com/daun.js' type='text/javascript'>

</script>

Atau

<script src="http://ajurna.googlecode.com/files/daungugur1.js' type='text/javascript'>

</script>

Untuk salju :

<script src='http://denisahlan.netau.net/hujansalju.js' type='text/javascript'/>

</script>

Atau

<script src="http://ajurna.googlecode.com/files/salju1.js' type='text/javascript'/>

</script>

Untuk Bintang :

<script src="http://www.geocities.com/sehatserasi72/efekbintangberjatuhan.js' type='text/javascript'/>

</script>

Atau Cara Kedua Untuk Bintang :

1. Masuk Ke Rancangan >> Elemen >> Tambah Gadget Pilih HTML
2. Beri Nama <h2></h2>
3. Pastekan Kode Di Bawah Ini Kemudian Save.

<script type='text/javascript'>
//<![CDATA[
//Configure below to change URL path to the snow image
var snowsrc="http://img254.imageshack.us/img254/9386/starspins.gif";
// Configure below to change number of snow to render
var no =10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = "0";
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 400;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
//]]>
</script>

baca selengkapnya

Cara Menghilangkan Navbar di Blogspot

tutorial blog, blogger tutoral, blogspot, blog, Navbar di Blogspot, Cara Menghilangkan Navbar di Blogspot

Navbar adalah fitur default dari sebuah template yang di buat khusus buat blogspot. Posisi Navbar berada pada bagian paling atas sebuah template yang berisikan kotak pencarian dan beberapa link seperti Link Follow, Share, Report Abuse, Next Blog New Post, Design dan Sign Out. Terdapat banyak pilihan warna untuk Navbar seperti Warna Biru, Coklat, Hitam, Silver, warna Transparan yang terang dan warna Transparent yang gelap.

Walaupun Navbar memiliki mamfaat buat sebuah Blog, banyak Blogger yang sengaja menghilangkan atau menyembunyikan Navbar tersebut karena mereka merasa bahwa dengan adanya Navbar pada sebuah template blog, penampilan dari blog menjadi kurang indah. Sebelumnya, Blog Rinjani Lovers ini memiliki Navbar juga, tetapi Navbar tersebut tidak ditampilkan karena disain dari blog ini terlihat kurang sempurna ketika Navbar tersebut masih terpasang.

Menurut Rinjani Lovers, tidak semua blog terlihat tidak menarik dan kurang indah ketika Navbar masih terpasang di Blog mereka. Warna template atau desain template yang menentukan semua itu. Kalau fitur Navbar mengurangi keindahan template sobat, silahkan ikuti tutorial kali ini karena Rinjani Lovers akan memberikan tutorial Mengenai bagamana ”Cara Menghilangkan Navbar pada Blog”. Sebenarnya kurang tepat kalau kita menggunakan kata “Menghilangkan”, karena sesungguhnya yang akan kita lakukan saat ini adalah Menyembunyikan Navbar pada blog.

Cara Menghilangkan Navbar di Blogspot adalah sebagai berikut:

Sign In ke blog sobat di alamat www.blogger.com
Pilih Template pada menu drop down
Pilih Edit HTML dan klik Proceed
Copy kode di bawah ini

#navbar-iframe {
display: none !important;
}

Letakkan kode terebut sebelum kode /* Variable definitions
Simpan Template sobat

Lihat contohnya di bawah ini!

SEBELUM

-----------------------------------------------
Blogger Template Style
Name: Free Template
Designer: Kendhin
URL: http://rinjanilovers.blogspot.com
Date: Maret 2008
----------------------------------------------- */
/* Variable definitions
====================

SETELAH

-----------------------------------------------
Blogger Template Style
Name: Free Template
Designer: Kendhin
URL: http://rinjanilovers.blogspot.com
Date: Maret 2008
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================

Kalau sobat sudah memasukkan kode tersebut, Simpan atau Save Template sobat. Silahkan sobat buka Blog sobat, Sebuah Blog tanpa Navbar akan terlihat. Selamat Mencoba dan Semoga Berhasil

baca selengkapnya

Ganti Warna, Ukuran dan Font Komentar Blog

Ganti Warna, Ukuran dan Font Komentar Blog

Untuk memancing pengunjung blog memberikan komentar di blog kita, sobat blogger perlu sedikit memodifikasi tampilan font komentar, ukuran font komentar dan warna font komentar. Untuk melakukan modifikasi kotak komentar, kita harus melalui Template Designer yang ada di blog kita. Tapi sekarang yang jadi masalah, dibagian Template Designer tidak terdapat settingan untuk komentar. Bagaimana Solusinya? Gampang, kita tinggal buatkan settingan untuk komentar blog kita dengan sedikit penambahan kode pada bagian template. Silahkan sobat blogger ikuti langkah-langkah di bawah ini!

Cara Ganti Font, Ukuran dan Warna Komentar blog:

Log in dulu di http://www.blogger.com/
Di bagian Design, klik Edit HTML
Cari kode /* Variable definitions
Kalau sobat blogger sudah menemukan kode tersebut, letakkan kode berikut tepat di bawahnya

<Variable name="sscommentfont" description="Comment Font" type="font"
default="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif"/>
<Variable name="sscommentcolor" description="Comment Color" type="color" default="#000000" value="#000000"/>

Selanjutnya, cari kode yang seperti ini /* Comments --------- */
Di bagian bawah kode tersebut, letakkan kode berikut

.comments .comments-content .comment-content, .ss{

font: $sscommentfont;

color: $sscommentcolor;

}

Simpan Template sobat

Komentar blog, font komentar, warna font komentar, ukuran font komentar blog

Untuk langkah selanjutnya, silahkan sobat klik Template Designer. Di bagian "Advance" akan muncul Settingan untuk komentar. Perhatikan Gambar di bawah ini.

Komentar blog, font komentar, warna font komentar, ukuran font komentar blog

Dari gambar terebut, terlihat setting untuk Font komentar dan warna tulisan komentar, Silahkan sobat sesuaikan tampilan komentar blog sobat dari situ. Bagaimana Hasilnya? Silahkan sobat blogger memberikan komentar melalui kolom komentar di bawah ini, akan terlihat hasil dari modifikasi font, ukuran dan warna komentar yang sudah dilakukan oleh Rinjani Lovers.

Dapatkan Artikel terbaru Rinjani Lovers secara gratis! Untuk itu, masukkan Email anda pada kolom di bawah ini. Setiap artikel yang kami publikasikan, akan langsung kami kirim ke Email anda

baca selengkapnya

Langganan: Postingan (Atom)