Cara menyembunyikan shoutmix chat dikiri dan kanan blog (ChatBox Hidden)

Chat Shoutmix di blog adalah hal yang sangat menguntungkan karna para pengunjung bisa berbagi informasi dengan sang pemilik blog dan juga pengunjung lainnya..
Namun, terkadang ada beberapa teman terlalu banyak memasang gadget iklan hingga tak ada tempat lagi untuk memasang fasilitas chat.

Untuk mensiasatinya maka kita buat chat dalam bentuk hidden seperti yg ada di kanan atas blog ini..

Jika
sobat belum mempunyai chat shoutmix silahkan download dulu disini

Nah, buat sobat yg ingin memasang chatbox hidden berikut langkah-langkahnya:


1. Login ke blog sobat
2. Klik Rancangan
3. Tambah Gadget
4. Cari tempat yg ingin di pasang chatbox
5. Copy kode di bawah ini dan pastekan pada Gadget sobat

Untuk ChatBox hidden Kiri

<!-- left chatbox hidden from http://lovelizzers.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://mob737.photobucket.com/albums/xx17/arisyudha/chatbox.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

MASUKAN KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://lovelizzers.blogspot.com/2011/06/menyembunyikan-shoutmix-chatbox-chatbox.html" target="_blank">
Get this!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left chatbox hidden from http://lovelizzers.blogspot.com/ END -->

Untuk ChatBox Hidden Kanan

<!-- right chatbox hidden from http://lovelizzers.blogspot.com/ START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('http://mob737.photobucket.com/albums/xx17/arisyudha/Chatbox-1.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

TARUH KODE SHOUTMIX DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://lovelizzers.blogspot.com/2011/06/menyembunyikan-shoutmix-chatbox-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right chatbox hidden from http://lovelizzers.blogspot.com/ END -->

6. Klik Simpan dan Selesai..

Sekarang lihat blog sobat, chat box shoutmix sobat udah tidak terlihat lagi

Selengkapnya..

Label/Kategori: Tutorial Blog

Cara membuat nomor halaman blog (number page navigation)

Selain sebagi pengganti Link Posting Baru, Beranda, dan Link Posting Lama, nomor halaman jugan mempercantik tampilan blog kita dan berfungsi untuk mempermudah pengunjung yang ingin membaca artikel² kita yg telah lalu..

Nah. Bagi sobat² yang ingin membuat Nomor Halaman Blog (Number Page) berikut langkah² nya:

1. Login keblog sobat

2. Klik Rancangan

3 klik Edit HTML

4. Centang tulisan Expand Template Widget

5. Copy kode dibawah ini dan pastekan di atas kode ]]></b:skin>

/* -- NUMBER PAGE NAVIGATION -- */
.showpageArea a{
text-decoration:underline;
}

.showpageNum a{
text-decoration:none;
border:1px solid#006400;
margin:0 2px;
padding:2px;
}

.showpageNum a:hover{
border:1px solid#006400;
background-color:#006400;
}

.showpagePoint{
color:#111;
text-decoration:none;
border:1px solid#006400;
background:#006400;
margin:03px;
padding:3px;
}

.showpageOf{
text-decoration:none;
padding:2px;
margin:0 2px 0 0;
}

.showpage a{
text-decoration:none;
border:1px solid#006400;
padding:2px;
}

.showpage a:hover{
text-decoration:none;
}

.showpageNum a:link,.showpage a:link{
text-decoration:none;
color:#111;
}

6. Kemudian copy kode dibawah ini dan pastekan diatas kode </body>

<b:if cond='data:blog.pageType! = &quot;item&quot;'>
<scripttype='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord=&#39;Previous&#39;;
vardownPageWord =&#39;Next&#39;;
</script>
<scriptsrc='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

7. Terakhir, cari kode seperti ini 'data:label.url'



Hapus kode Tersebut, dan ganti dengan kode di bawah ini

'data:label.url+&quot;? &amp;
max-results=5&quot;'

8. Simpan, dan selesai


Sekarang lihat blog sobat, cantik bukan.....?????



Sumber: http://lovelizzers.blogspot.com/2010/07/cara-membuat-nomor-halaman-blog-number.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Cara Membuat Header Menjadi 2 Kolom

Pada template standar dari blogger biasanya header blog kita hanya berupa 1 buah kolom header, tapi ketika kita berkunjung ke blog teman - teman yang lain terdapat 2 sampai 3 kolom header
..
Bagaimana cara membuatnya..

Oleh karena itu kali ini kita akan membahas bagaimana Cara membuat header menjadi 2 kolom yang berada di kiri dan kanan, dimana kolom header yang ada di sebelah kanan bisa kita manfaatkan untuk menaruh banner iklan atau apa saja..

Tanpa harus saya jelaskan panjang lebar lagi berikut cara membuat header menjadi 2 kolom


Berikut langkah-langkahnya:

1. Login ke blog sobat

2. Klik Rancangan

3. Klik Edit HTML

4. Jangan lupa centang Expand Template Widget

5. Cari kode css yang mirip kode di bawah ini

/* Header ===================================
*/
#header-wrapper {
width:960px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:180px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

Hapus kode tersebut dan ganti kode dibawah ini

/* Header
===================================
*/
#header-wrapper {
width:960px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:180px;
}

#head-inner {
width:480px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#FFFFFF;
}

#r_head {
width:480px;
float:left;
padding-top:10px;
}

6. Kemudian
cari kode seperti di bawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' Blog (Header)' type='Header'/>
</b:section>
</div>

Hapus kode teesebut, kemudian ganti dengan kode di bawah ini :

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

7. Klik Simpan, Selesai..




Sumber: http://lovelizzers.blogspot.com/2011/06/cara-membuat-header-menjadi-2-kolom.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat Readmore Otomatis

Pada kesempatan yang lalu kita juga pernah membahas Cara Membuat Readmore atau Baca Selengkapnya dan juga Cara membuat readmore beserta judul postingan, maka kali ini kita akan membahas bagaimana Cara membuat readmore otomatis tanpa harus membagi artikel menjadi 2 bagian secara manual..

Berikut cara² nya:

1. Klik Rancangan

2. Klik Edit HTML

3. Jangan lupa centang Expand Template Widget

4. Copy kode di bawah ini dan pastekan diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no- float&quot; ;summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150;

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

summary_noimg = 450; adalah panjang artikel tanpa gambar,

summary_img = 360; adalah panjang artikel dengan gambar,

img_thumb_height = 120; adalah tinggi gambar,

img_thumb_width = 150; adalah lebar gambar
.


Sobat bisa menggantinya sesuai keinginan sobat

5. Jika sobat pernah membuat Readmore versi lama kembalikan kode tersebut, kemungkinan setiap template memiliki kode yg berbeda, sebagai contoh seperti ini:

<div class='post-header-line-1'/>
<div class='post-body'>
<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'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Kode yg berwarna merah adalah kode yang harus anda hapus

6. Kemudian cari kode <data:post.body/>
ganti kode tsb dengan kode di bawah ini, jika terdapat 2 kode, taruh pada kode ke 2

<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'>Selengkapnya…<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Tulisan Selengkapnya... bisa sobat ganti sesuai keinginan sobat seperti Readmore..., Baca selengkapnya..., atau Baca selanjutnya...

Atau sobat bisa menggantinya dengan sebuah gambar seperti ini

Caranya: pada tulisan Selengkapnya.. sobat ganti dengan
kode di bawah ini

<img src='http://i737.photobucket.com/albums/xx17/arisyudha/th_selengkapnya.png' alt='Selengkapnya' />

tulisan yg berwarna merah adalah alamat url gambar di atas, jika sobat memiliki gambar sendiri, ganti alamat tersebut dengan alamat gambar milik sobat..

7. Simpan dan selesai

Selamat mencoba...!!!!!





Sumber: http://lovelizzers.blogspot.com/2011/06/membuat-readmore-otomatis.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Menghilangkan tulisan "Subcribe To" di bawah postingan

Seperti pada artikel sebelumnya, saya pernah membahas cara Menghilangkan tulisan link posting lama, maka pada kesempatan kali ini kita akan membahas lagi cara menghapus tulisan-tulisan yang berada di bawah postingan kita, yaitu Menghapus tulisan Subcribe To yang berada di bawah postingan kita.
Banyak teman teman blogger yang mengatakan bahwa tulisan tulisan ini sangat mengganggu keindahan blog, tapi ada juga yang membiarkannya. Itu semua tergantung keinginan masing-masing.
Cara menghapusnya pun cukup mudah, sobat tinggal menghapus sedikit kode HTML yang ada pada template milik sobat.
Bingung apa yang harus di hapus...?
Nah, untuk sobat yang tidak tau cara menghapus tulisan Subcribe To bisa mengikuti caranya berikut ini :

1. Login ke blog milik sobat

2. Klik Rancangan

3. Klik Edit HTML

4. Download Template Lengkap, jika sobat takut melakukan kesalahan

5. cari dan hapus kode dibawah ini, atau lebih cepatnya tekan ctrl+f

<div class="'feed-links'"> <data:feedlinksmsg/> <b:loop values="'data:links'" var="'f'">
<a class="'feed-link'" href="'data:f.url'" type="'data:f.mimeType'" target="'_blank'"><data:f.name/> (<data:f.feedtype/>)</a> </b:loop> </div>

6. Klik Simpan

Selesai, mudah bukan.....?




Sumber: http://lovelizzers.blogspot.com/2010/08/menghilangkan-tulisan-subcribe-to-di.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat Artikel Terkait dengan Gambar

Pada artikel sebelumnya kita membahas soal membuat artikel terkait maka kali ini kita akan membahas Cara membuat artikel terkait dalam bentuk gambar..

Baiklah, tanpa harus panjang lebar lagi berikut cara-caranya:

1. Klik RANCANGAN kemudian Edit HTML

2. Centang Expand Template Widget dan tunggu beberapa saat
hingga proses loading selesai

3. Kemudian cari kode

<head>

Copy kode dibawah ini dan paste kan diatas kode tadi

&lt;em&gt;Ampersands &amp; angle brackets need to be encoded.&lt;/em&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles Start--&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style type=&quot;text/css&quot;&gt;
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &amp;#8220;Times New Roman&amp;#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}

#related-posts a{
color:black;
}

#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
&lt;/style&gt; &lt;script src='http://blogergadgets.googlecode.com/ files/relatedthumbs21.js' type='text/javascript'/&gt;
&lt;/b:if&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles End--&gt;

4. Kemudian cari kode

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

copy kode di bawah ini dan pastekan dibawah kode tadi

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts- thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http:// www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a> <script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

var maxresults=5;
adalah jumlah artikel yg ingin di tampilkan dalam blog sobat, dan sobat bisa menggantinya sesuai keinginan sobat

6: Selesai





Sumber: http://lovelizzers.blogspot.com/2011/06/membuat-artikel-terkait-dengan-gambar.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat Artikel Terkait (Related Post) dalam Bentuk Scroll

Artikel terkait model scroll ini berfungsi agar tampilan blog kita jadi lebih menarik dan tidak mengganggu pemandangan blog kita, Karena jika artikel terkait kita yg di tampilkan berjumlah banyak maka artikel terkait kita akan menjulur kebawah dan itu akan sangat mengganggu pemandangan blog kita..

Sebagai contoh lihat artikel terkait yang dibawah postingan ini

Untuk membuat artikel terkait model scroll seperti ini, ikuti caranya berikut ini:

1. Klik RANCANGAN kemudian Edit HTML

2. Jangan lupa centang Expand Widget Template
dan tunggu beberapa saat sampai proses selesai...

3. Cari tulisan ]]></b:skin>

copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>

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


background-color:#22222; adalah warna background atau latar belakang artikel terkait, sobat bisa menggantinya dengan warna yg sobat inginkan, jika sobat ingin mengetahui jenis jenis kode warna silahkan Klik Disini

4. Kemudian cari <data:post.body/>
Copy kode dibawah ini dan pastekan di bawah kode <data:post.body/>

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

5. Simpan

height:200px; adalah tinggi kotak scroll yg ingin di tampilkan dalam blog, sobat bisa menggantinya sesuai keinginan sobat...

Selesai.. Semoga bermanfaat...




Sumber: http://lovelizzers.blogspot.com/2011/06/membuat-artikel-terkait-related-post.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Postingan Blog Otomatis Ke Twitter dan Facebook

Ingin posting blog anda secara otomatis tampil di twitter dan facebook kamu..?
Kali ini kita akan berbagi informasi bagaimana cara agar postingan sobat blogger bisa tampil di account Facebook dan Twitter sobat secara otomatis tanpa harus melakukannya secara manual tujuannya karena bisa menjadi sarana promosi blog anda tentunya...
Modal yang harus di miliki adalah sobat harus memiliki akun di twitter dan facebook, mungkin ini bukan hal yang baru buat anda, tapi ini menjadi hal yang menarik buat blogger pemula seperti saya.

Langsung aja dech, tanpa basa-basi...
Nah, untuk menampilkan postingan blog anda secara otomatis di Facebook dan Twitter, ada beberapa tahap yang akan di jalankan seperti dibawah ini:

1 Masuk ke twitterfeed atau klik disini


2. Lalu klik ''Register Now'' kemudian ''Create Acoount'' untuk mendaftarkan akun blogger kalian


3. Trus isi ''Feed Name'' dengan nama feed kalian, jika tidak ada masukkan saja nama blog kalian, dan isi ''RSS Feed Url'' dengan alamat Feed Url kalian, jika kalian belum mempunyai feed pihak ketiga, masuk feed url standar kalian yaitu http://bloggername/feeds/posts/default ganti tulisan berwarna biru dengan alamat blog kalian


4. Jika muncul tulisan "Feed Parse OK", berarti RSS FeedURL anda sudah benar. Sekarang masuk ke tahap selanjutnya.


5. Pada halaman "Available Service", langsung klik "Facebook" untuk menghubungkan dengan account Facebook anda.

6. Pada halaman "New Facebook Service", pilih "Connect with Facebook", atau jika account Facebook anda sedang aktif, anda bisa memilih pada account yang sudah logged pada pilihan no 1



7. Silahkan Login Ke Facebook kalian, dan ikuti langkah selanjutnya


8. Setelah sukses terkoneksi ke Facebook anda, maka akan muncul informasi seperti ini : You are currently logged into your “Your-Name-Here” Facebook account. Lalu Klik “Create Service” di bagian bawah

9. Lalu kembali ke "Available Services", klik "Twitter" untuk menghubungkan ke Account Twitter anda

10. Pada halaman "New Twitter Service", pilih “Authenticate Twitter”, atau bisa juga memilih account Twitter yang sudah logged jika anda sudah masuk pada account Twitter anda.



11. Jika terhubung dengan Twitter kalian, klik ''Allow''



12. Setelah sukses terhubung ke Account Twitter anda, maka akan muncul pesan “ Twitter auth successful. “


13. Selanjutnya Klik “Create Service” di bagian bawah

14. Setelah itu akan masuk ke halaman “Feed Publishing” dan bisa anda lihat Account Facebook danTwitter anda telah terkoneksi dengan adanya tanda Active.



15. Lalu klik "All Done"
Maka akan muncul halaman "Congratulations!" menandakan bahwa Account Facebook dan Twitter anda telah skses terkoneksi.



16. Klik "Go to Dashboard"


17. jika anda ingin menambah RSS lainnya atau menambah Account lainnya, silakan menuju "Create New Feed" dihalaman Dashboard

Nah, selesai dech.... Langkah selanjutnya anda cukup membuat posting di blog anda saja, maka secara otomatis postingan anda akan tampil di Account Facebook dan Twitter yang anda buat tadi.


Untuk informasi saja, bahwa TwitterFeed selalu melakukan update setiap 1 jam, maka dari itu jika anda membuat postingan baru mungkin tidak langsung muncul dengan serta-merta pada saat itu juga, silakan tunggu saja, update-nya cuma 1 jam sekali koq...

Semoga bermanfaat ya..



Sumber: http://lovelizzers.blogspot.com/2011/05/postingan-blog-otomatis-ke-twitter-dan.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Menghilangkan tulisan Berlangganan Entri Atom

Berlangganan feed atau berlangganan entri atom, adalah salah satu tulisan yang berada dibawah postingan
Di dekat tulisan ini juga terdapat Tulisan Link Posting Lama, dan Tulisan Subcribe To, dan kita juga sudah membahas cara menghapus tulisan tersebut pada postingan sebelumnya, dan kali ini yang kita bahas adalah cara menghapus tulisan Berlangganan entri atom, karena masih ada sobat yang belum mengerti cara menghapusnya maka dari itu saya bahas semua tulisan yang ada di bawah postingan dan cara menghapusnya.
Buat sobat yang ingin menghapus tulisan ini juga, boleh mengikuti caranya berikut ini:

1. Login ke blog sobat

2. Klik Rancangan

3. Klik Edit HTML

4. cari kode berikut ini

]]></b:skin>

Tambahkan kode di bawah ini di atas kode tadi

feed-links{
display:none;
}

5. Klik Simpan

Selesai, sekarang lihat blog sobat, mudah kan?

Selengkapnya..

Label/Kategori: Tutorial Blog

Menghilangkan tulisan Link Posting Lama dibawah postingan

Cara menghapus tulisan Link posting lama yang berada dibawah postingan.
Tulisan-tulisan yang berada di bawah postingan ini antara lain Berlangganan entri atom, Subcribe to, Posting Lama, Posting Baru, dan juga Beranda.
bagi teman - teman yang ingin menghapus tulisan posting lama/old posts caranya cukup mudah apa lagi yang sudah mengerti dengan yang namanya kode HTML.
baiklah, buat teman blogger yang tidak tau caranya, silahkan ikuti caranya berikut ini

1. Login ke blog milik sobat

2. Klik Rancangan

3. Klik Edit HTML

4. Jika sobat takut melakukan kesalahan silahkan Download Template Lengkap agar sobat bisa mengembalikannya.

5. Cari kode dibawah ini, atau lebih mudah tekan CTRL+F.

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float:right;padding-right:5px;
}
#blog-pager {
text-align: center;
}

hapus kode diatas dan ganti dengan kode dibawah ini

#blog-pager-newer-link {
display:none;
}
#blog-pager-older-link {
display:none;
}
#blog-pager {
display:none;
}

6. Klik Simpan, selesai

Mudah bukan, selamat mencoba..!





Sumber: http://lovelizzers.blogspot.com

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat read more atau baca selengkapnya

Read More adalah salah satu solusi agar postingan kita bisa terlihat lebih singkat juga tidak terlalu memakan banyak tempat pada halaman blog kita pada saat kita memposting sebuah artikel yang terlalu panjang.
Pada saat pengunjung membaca sebuah artikel milik kita yang terlihat hanyalah bagian awal dari postingan kita, sisanya atau keseluruhan artikel yang kita posting akan terlihat ketika pengunjung tersebut meng klik tulisan Read More.
Saran saya ketika sobat membuat sebuah artikel, tulislah inti dari judul artikel di bagian awal tulisan sobat, agar para pengunjung yang membaca artikel sobat menjadi lebih penasaran dan ingin terus membaca artikel sobat hingga tuntas.
Bagi sobat yang ingin membuat Read More silahkan ikuti langkah-langkahnya berikut ini :

1. Login ke blog milik sobat

2. Klik Rancangan

3. Klik EDIT HTML

4. Beri tanda centang pada Expand Widget Template.

5. Copy kode di bawah ini dan paste kan tepat diatas kode </head>

<style>
<b:if cond='data:blog.pageType=="item"'> span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

6. Kemudian cari kode
<p><data:post.body/></p>
lalu copy kode dibawah ini dan paste tepat kode tersebut

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More..</a>
</b:if>

7. Klik "Save template"

8. kemudian klik Pengaturan

9. Klik Format dan masukan kode ini pada kolom kosong yang ada dibagian bawah

<div class="fullpost">
</div>

10. Klik Simpan, selesai.

Ketika sobat menulis sebuah artikel, kode diatas akan muncul. Tulis artikel yang ingin sobat tampilkan sebelum kode

<div class="fullpost">

dan sisa artikel sobat tulis sesudah kode tadi dan akhiri dengan kode

</div>





Sumber: http://lovelizzers.blogspot.com/2010/07/membuat-read-more-atau-baca.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Menaruh iklan di bawah postingan

Memasang iklan di bawah postingan banyak manfaatnya adalah iklan yang sobat pasang lebih berpeluang banyak untuk di klik oleh pengunjung blog sobat.

Nah, untuk memasang iklan di bawah postingan milik sobat, cara yang harus dilakukan adalah sebagai berikut :

1. Login ke blog sobat

2. Klik Rancangan

3. Klik Edit HTML

4. Beri tanda centang pada tulisan Expand Widget Template dan tunggu beberapa hingga proses loading selesai

5. Kemudian cari (ctrl + f) tulisan seperti dibawah ini :

<b:if cond='data:blog.pageType == "item"';
<style>.fullpost{display:inline;}</style><p><data:post.body/></p>


kemudian taruh kode iklan sobat di bawah kode diatas, tapi kode iklan yang ingin sobat pasang harus diparse terlebih dahulu, untuk mem parse nya, silahkan sobat ikuti caranya DISINI....

Dan jangan lupa klik Simpan, sekarang lihat postingan sobat, iklan tersebut akan terus muncul setiap sobat membuat artikel baru.



Sumber: http://lovelizzers.blogspot.com/2010/07/menaruh-iklan-di-bawah-postingan.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat halaman blog di facebook

Memasang blog di halaman facebook mempunyai banyak keuntungan yaitu, selain blog tambah rame yang mengunjungi, juga membuat traffic pengunjung kita meningkat.
Untuk membuat halaman blog kita di facebook cara yang dilakukan adalah sebagai berikut:

1. Login ke facebook sobat

2. Klik profil milik sobat

3. Gulir ke bawah kemudian cari tulisan Buat Lencana Profil

4. Kemudian klik tulisan Buat Halaman Anda

5. Kemudian tulis judul untuk halaman sobat dan sesuaikan dengan nama blog sobat (untuk photo, keterangan, dll sama halnya dengan mengedit profil sobat)

Setelah sobat selesai membuat halaman untuk blog sobat di facebook, sobat juga bisa menampilkan kotak penggemar halaman sobat di blog sobat, caranya sebagai berikut:

1. Sobat buka kembalu facebook sobat seperti cara diatas, kemudian copy kode HTML halaman sobat.

2. Kemudian masuk ke blog sobat

3. Klik Rancangan

4. Klik Tambah Gadget

5. kemudian cari tempat yang cocok untuk sobat taruh kotak penggemar sobat dan pastekan kode HTML yang sobat copy tadi.

6. klik simpan, selesai

Sekarang lihat blog sobat apakah kotak penggemar facebook sobat sudah terpasang dengan benar, jika belum terlihat, ulangi kembali cara diatas. Selamat Mencoba..!

Selengkapnya..

Label/Kategori: Tutorial Blog

Cara agar html tampil di postingan

Untuk membuat kode html agar tampil di postingan sebenarnya ada 2 cara yaitu yang pertama adalah dengan membuat text area, dan ini sudah kita bahas pada postingan yang lalu, bagi yang belum tahu cara membuat text area silahkan sobat Klik disini.

Kemudian untuk cara yang kedua ada dengan cara diparse, untuk mem parse kode html yang ingin di tampilkan tersebut, silahkan sobat kunjungi http://www.blogcrowds.com, kemudian masukan kode html yang ingin sobat tampilkan ke dalam kolom yang di sediakan, lalu sobat klik Parse yang berada di bawah kolom tersebut, setelah kode selesai di parse, silahkan sobat copy kode yang sudah di parse tersebut ke dalam postingan sobat, selesai..

Sekarang kode html yang ingin sobat tampilkan di postingan dapat terlihat, karena jika sobat tidak memparse kode tersebut, sobat tidak akan bisa memposting kode html tersebut, karena sistem akan langsung menyatakan bahwa kode sobat masukkan itu salah..
Selamat mencoba...!






Sumber: http://lovelizzers.blogspot.com/2010/07/cara-agar-html-tampil-di-postingan.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Memasang Google Translate Beserta Gambar Bendera

Translate dengan gambar bendera sangat besar manfaatnya, karena blog kita bisa di baca oleh semua pengunjung di berbagai negara...

Nah, bagi sobat yang ingin memasang fasilitas ini di blog sobat, silahkan ikuti caranya berikut ini :

1. Login ke blog sobat
2. Klik Rancangan
3. Klik tambah gadget yang ingin sobat letakkan fasilitas translate
4. Copy dan Pastekan kode html di bawah ini dalam gadget

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><br />
<img border="0" alt="English" style="cursor: pointer;" src="http://www.theadvertisementnews.com/english.gif" height="20" title="English" align="absbottom"/></a><a style="cursor: pointer;" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;" src="http://www.theadvertisementnews.com/pinginbelajarfrance.gif" height="19" title="French" align="absbottom" width="26"/></a><a style="cursor: pointer;" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;" src="http://www.theadvertisementnews.com/italian.gif" height="20" title="Italian" align="absbottom"/></a><a style="cursor: pointer;" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/rusia.gif" height="20" title="Russian" align="absbottom"/></a><a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/jepang.gif" height="20" title="Japanese" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/koreautara.gif" height="20" title="Korean" align="absbottom"/></a><a style="cursor: pointer;" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/saudiarabia.gif" height="20" title="Arabic" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/cina.gif" height="20" title="Chinese Simplified" align="absbottom"/><br />
</a>


5. Klik Simpan, selesai.

Sekarang blog sobat udah bisa di baca oleh pengunjung dari berbagai negara...


Sumber: http://lovelizzers.blogspot.com/2010/07/memasang-translate-dengan-gambar-bendera.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Cara cepat agar di index oleh google

Salah satu cara agar blog kita lebih cepat terindeks di google adalah kita di link oleh blog yang mempunyai page rank yang tinggi, dan biasanya blog-blog tersebut adalah blog terkenal.

Saran saya pasanglah terlebih dahulu link blog mereka pada halaman blog milik sobat, setelah itu mintalah agar blog sobat di linkback atau di link balik oleh mereka. Permintaan untuk di linkback bisa di ajukan pada buku tamu (shoutbox) atau bisa juga melalui komentar pada postingan atau jika ingin lebih pribadi kirim melalui email.

Saya yakin mereka akan segera memasang link sobat pada blog mereka, atau jika dalam waktu tiga hari masih belum di linkback, ajukan kembali permintaan untuk dilinkback karena untuk blog-blog terkenal dalam sehari tidak hanya satu atau dua blog saja yang pasang link blog mereka, maka wajar saja apabila ada satu atau dua blog yang terlewatkan untuk di linkback.


* Pasang tag meta

Salah satu cara agar blog kita lebih di lirik atau di kenali oleh mesin pencari miliknya om google adalah memasang tag meta di bagian header pada kode template blog. contoh tag meta untuk blogger seperti ini :

<meta name="robots" content="INDEX, FOLLOW"/>.
<meta name="description" content="Deskripsi dari blog sobat di sini "/>.
<meta name="keywords" content="kata kunci atau keyword simpan disini, buatlah beberapa keyword yang sobat anggap sangat berhubungan dengan blog sobat "/>.

Yang harus diperhatikan adalah tulisan-tulisan yang tercetak merah. Tulisan-tulisan tersebut haruslah di sesuaikan dengan kondisi blog sobat.

Untuk deskripsi, silahkan isi dengan deskripsi blog sobat. contoh untuk blog milik saya adalah "Panduan membuat blog di blogger.com. tips dan trik, serta download software secara gratis".

Untuk kata kunci (keyword), silahkan isi dengan kata kunci yang berhubungan dengan blog sobat. contoh untuk blog ini adalah : blog tutorial, cara membuat blog, bikin blog, cara bikin blog, dan sebagainya. Jangan lupa untuk menyisipkan tanda koma untuk memisahkan antara keyword yang satu dengan keyword yang lainnya.

Untuk judul blog, silahkan isi dengan judul dari blog sobat.Contoh : untuk blog ini adalah Blog tutorial.

Bagi yang belum mengetahui dimanakah tag meta di simpan, jawabannya adalah di dalam kode header blog, atau jika masih bingung simpan saja di bawah kode <title><data:blog.pageTitle/>.</title>


Sebenarnya masih ada beberapa tips yang bisa dilakukan, akan tetapi kayanya udah lemes nih ngetiknya, jadi dicukupkan sekian dulu deh, selamat mencoba dan mudah-mudahan blog sobat lebih cepat terindeks di google. Satu pertanyaan aja deh buat tambahan, sudahkah blog sobat terindeks di google? coba tuliskan alamat blog sobat pada search engine google di bawah postingan ini !

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat background gambar pada postingan

Pada postingan yang lalu kita pernah membahas soal Mengganti Background Warna Pada Postingan, maka pada postingan kali ini kita akan membahas soal mengganti background gambar pada postingan, jika sobat ingin mempunyai background postingan berupa gambar, langkah pertama yang harus di ingat yaitu sobat harus punya gambar yang akan di jadikan background. Trus gambar tersebut harus di upload ke hosting tempat menyimpan gambar. Bagi yang belum punya hostingan gambar gratis silahkan sobat daftar dulu di http://www.photobucket.com dan jangan lupa untuk meng copy alamat url gambar yang di upload tersebut.

Ketika sobat akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan

<div style="background:url('http://arisyudha.hexat.com/images/aryu_06.jpg') no-repeat;">
tuliskan text yang sobat ingin beri background gambar disini dan akhiri dengan kode
</div>

Ganti alamat url yang berwarna merah dengan alamat gambar yang ingin sobat jadikan background. Penggunaan kode no-repeat tentu saja apabila gambar memiliki ukuran besar dan tidak mau di tampilkan berulang-ulang.
Seperti halnya pada background dengan warna.

Sebagai contoh, saya ingin membuat posting dengan background yang beralamat di http://arisyudha.hexat.com/images/aryu_06.jpg

maka hasilnya akan seperti ini :

membuat background gambar pada postingan
Membuat background gambar pada postingan
Membuat background gambar pada postingan
Membuat background gambar pada postingan
Membuat background gambar pada postingan

Mudah bukan...? Sekarang lihat postingan sobat yang sudah di beri background gambar.





Sumber: http://lovelizzers.blogspot.com/2010/06/membuat-background-gambar-pada.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Memodifikasi search engine/ kotak pencarian

Apa itu search engine..?
Search engine adalah sebuah kotak pencarian yang memudahkan pengunjung mencari apa yang ingin mereka cari dalam blog sobat.

Search engine kini sudah di tambahkan oleh team blogger untuk memudahkan para blogger yang ingin memasang kotak pencarian didalam blog mereka, caranya seperti ini:


1. Masuk ke blog milik sobat

2. Klik Rancangan

3. Klik elemen laman

4. Kemudian klik laman bertulisankan "kotak penelusuran"

5. Tambahkan ke blog

6. Selesai


Tetapi ada juga para blogger yang ingin kotak pencariannya di modifikasi oleh mereka sendiri, karena kotak yang sudah di sediakan oleh blogger tidak bisa di rubah..

Nah, para postingan kali ini kita akan membahas cara memodifikasi kotak komentar dengan karya kita sendiri, selain mempercepat pencarian didalam blog kita, juga bisa membuat para pengunjung betah dengan keindahan blog kita..

Buat sobat yang ingin memasang kotak pencarian buatan kita sendiri silahkan ikuti langkah - langkahnya berikut ini:


1. Login ke blog sobat

2. Klik Rancangan

3. Klik elemen laman

4. Tambah elemen laman

5. Cari dan Klik laman bertuliskan HTML/JAVA SCRIPT

6. Lalu paste kan kode di bawah ini didalam kolom yang sudah disediakan

<p align="left"><form id="searchthis" action="http://lovelizzers.blogspot.com/search" style="display:inline;"method="get"><strong>Apa Yang Anda Cari Di Blog Ini<br /></strong><input id="b-query" maxlength="255" name="q" size="20" type="text" /><input id="b-searchbtn" value="CARI..!" type="submit" /></form></p>

Ganti tulisan yang berwarna biru dengan alamat blog sobat
Sedangkan tulisan yang berwarna merah bisa sobat ganti dengan tulisan apa saja
yang sobat inginkan

7. Klik simpan selesai

Sekarang lihat blog sobat dengan karya sobat sendiri...!




Sumber: http://lovelizzers.blogspot.com/2010/06/memodifikasi-search-engine-pencarian.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Memasang tanggalan/kalender di blog

Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs seperti ini sangatlah banyak, tentunya mereka berlomba dengan menampilkan kalender-kalender yang menarik untuk di lihat. Agar tidak terlalu bingung mencarinya, saya berikan contoh satu saja
yaitu www.free-blog-content.
Silahkan coba sobat kunjungi situs tersebut !
Kalender yang di sediakan sangat beragam. Silahkan klik kategori yang ada untuk memilih bentuk kalender yang sobat sukai, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada notepad untuk nanti keperluan di simpan di blog. salah satu contoh gambar yang di sediakan seperti ini



Untuk cara memasangnya seperti ini :

1. Sign in di blog milik sobat bukan milik saya..!!

2. Klik menu Rancangan

3. Klik menu Elemen Laman

4. Klik tulisan Tambahkan sebuah Elemen Laman

5. Klik tombol bertuliskan HTML/
JavaScript

6. Copy kode yang tadi telah ada di notepad lalu paste pada kolom yang di sediakan

7. Klik tombol SIMPAN PERUBAHAN

8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN

9. Selesai.




Sumber: http://lovelizzers.blogspot.com/2010/06/memasang-tanggalan-kalender-di-blog.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat link dalam bentuk text

Apa itu link...?
Link adalah suatu teks atau
gambar yang berisi sebuah alamat url, jika di klik maka akan membawa kita ke alamat url yang ada didalam link tersebut. link tersebut bisa berbentuk sebuah ataupun sebuah gambar.
sebagai contoh, saya akan membuat link dalam bentuk tulisan seperti ini "ingin tau tentang cara membuat text area" silahkan sobat "KLIK DISINI"

Jika sobat meng klik link yang bertuliskan "KLIK DISINI" tersebut, maka sobat akan diarah ke halaman dimana artikel tersebut berada.

Cara membuatnya sangat mudah, dan tidak membutuhkan waktu yang lama, begini cara membuatnya...!

<a href="http//lovelizzers.blogspot.com/2010/06/membuat-text-area.html">Klik Disini</a>

text berwarna biru sobat ganti dengan alamat milik sobat, sedangkan text berwarna merah bisa sobat ganti sesuai keinginan sobat contohnya klik disini, next, atau sama seperti alamat url tersebut.




Sumber: http://lovelizzers.blogspot.com/2010/06/cara-membuat-link.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Cara Buat Contact Form Email (Hubungi Saya)

Contact form berfungsi untuk menghubungkan sobat dengan pengunjung dimana pada contact form tersebut dapat pengunjung dapat menghubungi sobat melalui sebuah email, entah untuk bertanya pada sobat ataupun ingin sekedar bersilaturahmi dengan sobat.
Di internet banyak sekali provider yang menyediakan CONTACT FORM secara gratis, tapi kali ini kita akan membahas cara membuat contact form di http://emailmeform.com

Untuk membuatnya ikutilah cara berikut ini :

1. Silahkan kunjungi situs http://www.emailmeform.com

2. Klik Sign up

3. Isilah form yang ada dengan data diri anda :
First Name : isi dengan nama depan
Last Name : isi dengan nama belakang
Username : isi dengan username yang di inginkan
Password : isi dengan kata sandi
Retype Password : isi ulang kata sandi
Your Email : isi dengan alamat email anda

5. Klik tombol Sign up

6. Buka email kiriman dari EmailMeForm untuk verifikasi

7. Setelah proses verifikasi selesai, silahkan klik tulisan click here untuk menuju halaman panel anda.

8. Klik tulisan Create new form

9. Ada beberapa form yang perlu di sisi :

Web form Name : isi dengan nama yang anda inginkan, atau
biarkan saja juga bisa

Recipients Email : isi dengan alamat email yang akan
menerima pesan.

Spam Email address : isi dengan alamat email yang di inginkan untuk menerima pesan spam

Thank you page : isi dengan alamat URL blog anda.

Number of fields : biarkan 4 saja.

10. Klik next terus, jika tidak ada lagi yang ingin di rubah

11. Klik Finish

12. Klik GET THE HTML CODES

13. Copy kode yang ada pada text area dan paste kan di elemen sobat, di postingan bisa di gadget juga bisa

Selamat mencoba...!



Sumber: http://lovelizzers.blogspot.com/2010/06/cara-buat-contact-me-hubungi-saya.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Cara menghilangkan icon obeng dan tang

Quick Edit adalah cara cepat pada blog anda, quick edit bergambar obeng dan tang. Berfungsi untuk melakukan editing terhadap elemen blog, tinggal meng klik saja icon nya dan kita bisa langsung bisa mengeditnya.

Icon tersebut
sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedang pengunjung yang lain tidak bisa melihat icon tersebut.

Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya.

Apakah kita bisa menghapus icon tersebut?

Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita.

Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Caranya seperti ini :
1. Login ke blogger
2. Klik Rancangan
3. Klik tab Edit HTML
4. Cari kode seperti ini :
]]></b:skin<
5. Copy paste kode dibawah ini tepat di atas kode yang tadi :

.quickedit{
display:none;
}

6. Klik Simpan template
7. Selesai.

Mudah kan...? Sekarang lihat blog sobat sudah tidak ada icon quick edit..




Sumber: http://lovelizzers.blogspot.com/2010/06/cara-menghilangkan-icon-obeng-dan-tang.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Memasang pesan selamat datang di blog

Ketika kita berkunjung ke blog orang, kita tidak langsung masuk ke halaman blog yang timbul adalah sebuah script alert, script alert ini bisa sebuah kata atau ucapan seperti ucapan "SELAMAT DATANG DI BLOG SAYA"

Setelah kita membaca script tersebut barulah kita masuk ke halaman tersebut.
Untuk memasang fasilitas alert di blog sangatlah mudah.

Contoh script yang di pasang seperti ini :

<script language='JavaScript'>alert("Selamat datang di blog saya");</script>

Ganti tulisan "selamat datang di blog saya dengan tulisan yang sobat inginkan,
jika sobat ingin menambahkan script tambahkan sesuai dengan keinginan. Misal
ingin memasang dua buah script alert, maka scriptnya jadi seperti ini :

<script language='JavaScript'>alert("Selamat datang di blog saya");</script<
<:script language='JavaScript'>alert("dan selamat menikmati");</script>

mudah bukan..?

Untuk memasangnya di blog sobat, ikuti langkah-langkahnya berikut ini:

1. Login ke blogger.
2. Klik Rancangan.
3. Klik tab Edit HTML
4. Cari kode </head>
5. Copy paste kode dibawah ini di atas kode </head>

<script language='JavaScript'>alert(Selamat datang di blog saya);</script>

ganti kata "Selamat datang diblog saya" dengan kata yang sobat inginkan
8. Klik tombol SIMPAN TEMPLATE.
9. Selesai.

Silahkan buka blog sobat dan lihat hasilnya.




Sumber: http://lovelizzers.blogspot.com/2010/06/memasang-pesan-selamat-datang-di-blog.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat text area

Apa itu text area..?
Text area adalah sebuah kotak yang didalamnya berisi text atau kode-kode HTML.
Text area ini berfungsi untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text sengaja diberikan kepada pengunjung blog agar bisa di copy.
Untuk membuat text area,

sebagai contoh silahkan sobat lihat text area di bawah
ini :

Tulislah text ataupun kode-kode sebanyak mungkin untuk di copy oleh pengunjung sobat

Nah untuk membuat text area seperti diatas, copy dan simpan kode dibawah ini agar sobat bisa membuat text area

<p align="center"><textarea name="code" rows="6" cols="20">Tulis text atau kode-kode yang ingin di tampilkan didalam text area</textarea></p>

Keterangan :
Tulisan yang berwarna biru sobat ganti dengan text ataupun sebuah kode yang ingin sobat masukkan di dalam textarea tersebut

rows="6" adalah tinggi dari text area, jika sobat ingin lebih tinggi ganti angka tersebut dengan angka yang lebih tinggi nilainya.

Cols="20", adalah lebar dari text area. Jika sobat ingin text area yang lebih lebar, ganti angka tadi dengan angka yang lebih besar nilainya.

Selamat mencoba...!




Sumber: http://lovelizzers.blogspot.com/2010/06/membuat-text-area.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Cara mengganti favicon

Favicon adalah sebuah icon ataupun gambar yang menjadi ciri khas bagi si pemilik blog, yang dapat menbedakan blog milik kita dengan blog orang lain dengan sebuah icon.

Favicon ini terdapat di sudut kiri blog sobat, di navbar, ataupun di addres bar.
jika sobat ingin merubah favicon tersebut dengan icon milik sobat, ikuti langkah berikut :

1. Sobat harus memiliki sebuah hosting gambar atau sebuah penympanan online untuk gambar milik sobat, buat sobat yang tidak mempunyai hosting gambar ataupun tempat penyimpanan file gambar di internet sobat bisa mendaftarkan diri sobat di
http://www.ziddu.com
atau juga bisa klik disini

Caranya:
1. Klik alamat tersebut diatas
2. Klik register untuk mulai pendaftaran
3. Masukan data diri anda pada kolom nama, email, dan password milik sobat
4. Klik Daftar, selesai
setelah sobat bergabung sobat sudah dapat meng upload gambar milik sobat. Ketika gambar milik sobat sudah tersimpan, maka secara otomatis alamat url gambar tersebut akan muncul, dan jangan lupa untuk meng copy alamat url milik sobat...

Sebagai contoh saya mempunyai alamat url gambar milik saya di http://s737.photobucket.com/arisyudha/aris%20yudha%20album/icon.jpg

2. Login ke blogger milik sobat
3. Klik rancangan/tata letak
4. Edit html
5. Kemudian masukan kode di bawah ini tepat diatas kode </head>

< href='http://s737.photobucket.com/arisyudha/aris%203yudha%20album/icon.jpg'rel='shortcut icon'/>

ganti kata yang berwarna biru dengan alamat url milik sobat

6. Klik save template.
Selasai, Mudah bukan ?
Silahkan lihat hasil yang sudah sobat buat.





Sumber: http://lovelizzers.blogspot.com/2010/06/cara-mengganti-favicon.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Cara membuat text berjalan

Text berjalan adalah sebuah kalimat yang dijalankan oleh sebuah kode html, kode ini di namakan kode "MARQUEE".
Text berjalan dapat di pasang di semua elemen. Di kolom postingan, di sidebar maupun di footer.
Untuk membuat text berjalan, sangatlah mudah, sebagai contoh, saya akan membuat kalimat ini

"membuat text berjalan"

untuk membuat text tersebut berjalan sobat hanya menambahkan kode "MARQUEE" diawal dan diakhir kalimat yang ingin dibuat berjalan, contohnya seperti ini

<marquee align="center" direction="right" height="200" scrollamount="2" width="40%">membuat text berjalan</MARQUEE>


Dan hasilnya akan seperti ini :


membuat text berjalan

Sobat juga bisa menambahkan kode tersebut sebagai kata penutup di blog sobat agar terlihat lebih menarik...
Selamat mencoba...!




Sumber: http://lovelizzers.blogspot.com/2010/06/cara-membuat-text-berjalan.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat background warna pada postingan

Membuat background warna pada text postingan memang menarik, selain menjadi ciri khas bagi sipemilik blog, juga dapat membuat pengunjung merasa lebih menikmati ketika berada didalam blog tersebut, artikel ini ku share buat sobat-sobat yang sangat suka dengan warna - warni blognya.
Untuk membuat background warna ini tidak begitu rumit membuatnya. kita hanya memasukkan kode seperti ini
diawal postingan

<div style="background:#FF00FF">

dan di akhiri dengan kode

</div> diakhiri kalimat postingan.

Sebagai contoh seperti ini :

"text yg ingin diberi background warna"

kode #FF00FF pada html diatas adalah sebuah kode warna, sobat bisa mengganti kode warna diatas dengan warna yang sobat inginkan.

Jika sobat belum tau kode - kode warna html silahkan Klik disini untuk mengetahui jenis - jenis kode warna html.

Selamat mencoba...!






Sumber: http://lovelizzers.blogspot.com/2010/06/membuat-background-text-pada-postingan.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Cara pasang shoutmix di blog

Shoutmix adalah semacam tempat untuk membuat komentar atau sebuah pertanyaan yang ditujukan kepada si pemilik blog atau tempat untuk berinteraksi ke sesama pengunjung ataupun hnya sekedar untuk blogwalking. di luar sana bnyak sekali terdapat penyedia shoutmix ataupun semacamnya, diantaranya


shoutmix
shoutcamp
cbox

Tapi kali ini saya akan membahas cara membuat shoutmix. Tanpa menunggu banyak waktu, langsung aja kita bahas cara membuat shoutmix:

1. Klik www.shoutmix.com Untuk memulai pendaftaran.
2. Isilah kotak pendaftaran dengan Data diri anda.
Shoutbox ID : Isikan dengan nama anda
Password: Isikan dengan password yang anda
inginkan
Retype password: Isikan ulang dengan password yang anda masukan
Name: Isikan Dengan nama anda
Email: isikan dengan email anda
3. Lalu Klik radio buton Yang Ada sebelum teks I have read and
agree to the Terms of Service.
Dan Klik Continue.
4. Setelah Itu Klik get code Untuk Mendapatkan Scipt html.
5. Copy kode tersebut ke blog anda.

Caranya :
1. Login ke blogger
2. Klik rancangan/Tata Letak
3. Tambah gadget
4. Lalu Pilih HTML
5. Lalu paste kode tersebut
6. Lalu simpan, selesai

Seperti ini contoh shoutmix yang udah di buat

.
ShoutMix chat widget






Sumber: http://lovelizzers.blogspot.com/2010/06/cara-pasang-shoutmix-di-blog_19.html

Selengkapnya..

Label/Kategori: Tutorial Blog

Membuat Arsip Blog Model Scroll

Kali ini kita akan membahas masalah arsip blog.
Jika pada arsip blog standar yg kita gunakan akan memakan banyak tempat dihalaman depan, apa lagi jika jumlah postingan kita terlalu banyak maka akan mengganggu pemandangan beranda blog kita..
Saat kita memakai arsip blog model hirarki maka jumlah postingan kita akan menjulur panjang kebawah..

Untuk mensiasatinya kita buat menjadi model scroll, dan tentunya agar memperindah tampilan blog kita..

Berikut langkah-langkah dalam membuat arsip blog model scroll:

1. Buatlah arsip blog terlebih dahulu

2. Seperti biasa, klik Rancangan, kemudian klik Edit HTML, dan jangan lupa centang Expand Template Widget

3. Di bagian kode HTML cari dan amati kode di bawah ini..

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:150px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>


Kode yang berwarna biru adalah kode yg harus sobat tambahkan..
Sedangkan height:150px adalah tinggi arsip yang ingin di tampilkan di blog sobat, dan sobat bisa mengganti dengan ukuran yg sobat inginkan...

3. Simpan template, selesai..

Semoga bermanfaat..!




Sumber: http://lovelizzers.blogspot.com

Selengkapnya..

Label/Kategori: Tutorial Blog

Postingan Blog Otomatis Ke Twitter dan Facebook

Ingin posting blog anda secara otomatis tampil di twitter dan facebook kamu..?
Kali ini Lovelizzers akan berbagi informasi bagaimana cara agar postingan sobat blogger bisa tampil di account Facebook dan Twitter sobat secara otomatis tanpa harus melakukannya secara manual tujuannya karena bisa menjadi sarana promosi blog anda tentunya...
Modal yang harus di miliki adalah sobat harus memiliki akun di twitter dan facebook, mungkin ini bukan hal yang baru buat anda, tapi ini menjadi hal yang menarik buat blogger pemula seperti saya.

Langsung aja dech, tanpa basa-basi...
Nah, untuk menampilkan postingan blog anda secara otomatis di Facebook dan Twitter, ada beberapa tahap yang akan di jalankan seperti dibawah ini:

1 Masuk ke twitterfeed atau klik disini


2. Lalu klik ''Register Now'' kemudian ''Create Acoount'' untuk mendaftarkan akun blogger kalian


3. Trus isi ''Feed Name'' dengan nama feed kalian, jika tidak ada masukkan saja nama blog kalian, dan isi ''RSS Feed Url'' dengan alamat Feed Url kalian, jika kalian belum mempunyai feed pihak ketiga, masuk feed url standar kalian yaitu http://bloggername/feeds/posts/default ganti tulisan berwarna biru dengan alamat blog kalian


4. Jika muncul tulisan "Feed Parse OK", berarti RSS FeedURL anda sudah benar. Sekarang masuk ke tahap selanjutnya.


5. Pada halaman "Available Service", langsung klik "Facebook" untuk menghubungkan dengan account Facebook anda.

6. Pada halaman "New Facebook Service", pilih "Connect with Facebook", atau jika account Facebook anda sedang aktif, anda bisa memilih pada account yang sudah logged pada pilihan no 1



7. Silahkan Login Ke Facebook kalian, dan ikuti langkah selanjutnya


8. Setelah sukses terkoneksi ke Facebook anda, maka akan muncul informasi seperti ini : You are currently logged into your “Your-Name-Here” Facebook account. Lalu Klik “Create Service” di bagian bawah

9. Lalu kembali ke "Available Services", klik "Twitter" untuk menghubungkan ke Account Twitter anda

10. Pada halaman "New Twitter Service", pilih “Authenticate Twitter”, atau bisa juga memilih account Twitter yang sudah logged jika anda sudah masuk pada account Twitter anda.



11. Jika terhubung dengan Twitter kalian, klik ''Allow''



12. Setelah sukses terhubung ke Account Twitter anda, maka akan muncul pesan “ Twitter auth successful. “


13. Selanjutnya Klik “Create Service” di bagian bawah

14. Setelah itu akan masuk ke halaman “Feed Publishing” dan bisa anda lihat Account Facebook danTwitter anda telah terkoneksi dengan adanya tanda Active.



15. Lalu klik "All Done"
Maka akan muncul halaman "Congratulations!" menandakan bahwa Account Facebook dan Twitter anda telah skses terkoneksi.



16. Klik "Go to Dashboard"


17. jika anda ingin menambah RSS lainnya atau menambah Account lainnya, silakan menuju "Create New Feed" dihalaman Dashboard

Nah, selesai dech.... Langkah selanjutnya anda cukup membuat posting di blog anda saja, maka secara otomatis postingan anda akan tampil di Account Facebook dan Twitter yang anda buat tadi.


Untuk informasi saja, bahwa TwitterFeed selalu melakukan update setiap 1 jam, maka dari itu jika anda membuat postingan baru mungkin tidak langsung muncul dengan serta-merta pada saat itu juga, silakan tunggu saja, update-nya cuma 1 jam sekali koq...


Semoga bermanfaat ya..

Selengkapnya..

Label/Kategori: Tutorial Blog