Tips And Trick Computer ©: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Senin, 06 Agustus 2012

CARA MENGGANTI LOGO BLOGGER DENGAN LOGO SENDIRI

kali ini saya akan memposting cara mengganti Logo Blog dengan logo yang anda inginkan sendiri ..
Ya cara nya cukup udah sekali ...

Login dulu ke Blogger anda.
Klik Rancangan pada Dashboard
Klik Edit Html.
Tekan Ctrl + F untuk mencari kode berikut ini :
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[
Copy kode ini di antara kode di atas : <link href='url foto yang telah anda upload' rel='shortcut icon'/>
Contohnya seperti ini :

<title><data:blog.pageTitle/></title> <link href='alamat url foto yang telah anda upload' rel='shortcut icon'/>

<b:skin><![CDATA[

Cari logo blog anda Di Sini .. ini website semacam google .. heheh ..
kalau sudah ketemu Anda tinggal download dan rubah format nya , bisa di photobucket.com atau dimana saja .. banyak , cari aja di mbah google .. hehheh
ya kalau anda sudah punya sendiri tinggal masuk aja langsung ke Link di atas ini yang sudah saya Share ..

Pasti anda sudah tau kan tidak perlu di jelas kan lagi ..

Ya begitu saja yang Dapat Saya Posting ke blog ini ..

Sumber :http://tipsandtrickkom.blogspot.com/

READMORE>> »»

Cara membuat Menu Bar pada blog

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://riliever.blogspot.com/'>Edit me</a></li>
<li><a href='http://riliever.blogspot.com/'>Edit me</a></li>
<li><a href='http:// riliever .blogspot.com/'>Edit me</a></li>
<li><a href='http://riliever.blogspot.com/'>Edit me</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http:// riliever .blogspot.com/'>Edit me</a></li>
<li><a href='http://riliver.blogspot.com/'>Edit me</a></li>
<li><a href='http:// riliever .blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://riliever.blogspot.com/'>Edit me</a></li>
<li><a href='http:// riliever .blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>

Keterangan:

Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.

Posted By : http://tipsandtrickkom.blogspot.com/

READMORE>> »»

Minggu, 05 Agustus 2012

How to change animated Icon Cursor mouse in Blogger

Sometimes You might be bored with the common cursor icon mouse apperance on Your blog, so that You're intended to give a small touch to Your blog by giving them a stylish icon mouse. If You're wondering how to change icon cursor mouse on Your blogger (blogspot), then this post will show to You how to do that. The good news is that there's a hundreds even thousands of cursors icon mouse available on internet you can use for free, there's a sites that gives you a various of icon cursors mouse which You can pick them up whatever You like.

Addding animated cursors to your blog is very easy and simple, it's like You're add a widget on the sidebar of Your blog. Hoever, before to get free animated cursors You can visit these 2 sites:

- www.totallyfreecursors.com

- www.cursorpedia.com

On those sites You can choose any type of cursors you liked to add it on Your blog (blogspot) via widget. As You know that animated cursor has the specific extention file, like .ani, .cur, You can click the demo below how it looks like:

DEMO

How to change animated cursor mouse in Blogger:

STEP 1

1. Firstly, go to visit www.totallyfreecursors.com

2. Now You choose any type of cursors over there there you liked. For example Hypnotize 1 - Pointer 1

3. Over there You will be provided with HTML code of the cursor, then You just simply copy the HTML code

STEP 2

1. Now You login to Your Blogger account

2. From Dashboard, go to Design > Page Elements > Add A Gadget, then you choose HTML/Java Script

3. Then now just simple Paste the HTML code You have Copied from the site into yhe gadget box

4. Now Save Your gadget.

Posted By : http://tipsandtrickkom.blogspot.com/

READMORE>> »»

CARA MEMBUAT "READ MORE" OTOMATIS PADA BLOG

Berikut cara memasang readmore di blogspot :

-Login ke blogger dengan ID sobat.

-Pilih Rancangan atau Tata Letak.

-Pilih Edit HTML.

-Centang tulisan "expand template widget".

-Lalu cari kode </head> : untuk mempermudah pencarian tekan F3.

-Lalu masukkan code di bawah ini tepat di atas </head>

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

Kemudian sobat cari kode <data:post.body/>

Ganti kode <data:post.body/> dengan kode di bawah ini :

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

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> »»   </a></span>

</b:if>

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

</b:if>

Kemudian Save Template.

untuk keterangan readmorenya...

var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;

summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;

summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;

img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;

img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;

READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini .

Nah Demikian lah Yang Saya berikan Untuk sobat saya semua .. hahah ..

Gampang kan sobat ,,, selamat mencoba ya ..

Sumber : http://tipsandtrickkom.blogspot.com/

READMORE>> »»