mas.peypah | kumpulan trik blogger

selamat datang di www.maspeypah.co.cc | kumpulan trik blogger

cara membuat share this post

Kamis, 11 Maret 2010 Ayo komen.!! 36 orang merespon sejauh ini..

halo sobat blogger dimanapun anda berada. Saya akan membuat artikel tentang cara meningkatkan traffic pengunjung blog anda dengan menggunakan share this post. Sebelumnya saya juga memposting tentang ini. Btw, trik ini saya dapatkan dari sini!!

Mungkin diantara para sobat blogger belum mengerti apa maksud dan fungsi Share This Post ini. Share This Post ini terdapat 7 tombol, yaitu : Digg, Delicious, Facebook, Google, Stumble, Technorati dan Twitter. Fungsinya adalah untuk mensubmit artikel Anda dengan mudah karena kita tinggal mengklik saja salah satu social bookmark dan secara otomatis artikel Anda akan langsung tersubmit ke social bookmark. Dan tentu saja fungsi utama Social Bookmark adalah meningkatkan traffic pengunjung.

Langsung aja deh, gk usah basa-basi..

1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. beri tanda centang pada Expand Template Widget
4. Cari kode ]]></b:skin>
5. Letakkan script di bawah ini, dan letakkan di atas ]]></b:skin>

div.sociable { margin: 16px 0;}

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}


6. Lalu cari kode <data:post.body/>
ket: Jika blog Anda sudah memakai fungsi readmore, maka terdapat dua kode tersebut. Maka pilih kode yang kedua/terakhir biar tidak tampak pada halaman utama.

7. Copy kode di bawah ini, lalu letakkan di bawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sociable'>
<div class='sociable_tagline'>
<img alt='maspeypah' src='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfOTb1pF1I/AAAAAAAAAuI/M-fC8ABhw6c/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfN_PyGWsI/AAAAAAAAAtw/HUcVDlUpfwg/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='http://1.bp.blogspot.com/_KgIhfKU4BcE/SwfN5pqFA4I/AAAAAAAAAto/HFYS5rLHaIo/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='http://2.bp.blogspot.com/_KgIhfKU4BcE/SwfOGlfWg6I/AAAAAAAAAt4/1NpvgqnynAg/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='http://3.bp.blogspot.com/_KgIhfKU4BcE/SwfOL1O6pFI/AAAAAAAAAuA/fCpnpHg87yg/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='http://3.bp.blogspot.com/_KgIhfKU4BcE/SwfObF-toHI/AAAAAAAAAuQ/SwO1_vXBHWg/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfOoNe2fWI/AAAAAAAAAuY/cxTxqKCpVYE/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='http://2.bp.blogspot.com/_KgIhfKU4BcE/SwfOswiRsWI/AAAAAAAAAug/cllKpvLIDi4/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>
</b:if>

8. Simpan

semoga bermanfaat..

cara membuat read more otomatis dengan gambar

Ayo komen.!! 34 orang merespon sejauh ini..
halo sobat blogger. Lama gak nge-blog dan memberi tutorial segar yg bisa membuat blog anda lebih mantap. Dan pada kesempatan kaliini saya akan memberikan tutorial blog, yaitu cara membuat read more otomatis dengan ditambahi gambar. JIka anda tertarik dengan ini, anda bisa mencoba tutorial ini. Trik ini sangat mudah. Langsung aja ya..!!
readmore otomatis
cekidot..

1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Centang Expand Template Widget
4. Cari kode </head>
5. Copy kode di bawah ini,dan letakkan di atas </head>

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


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

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

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

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

6. Lalu cari kode <data:post.body/>
7. Ganti kode tersebut dengan kode di bawah ini..

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://lh6.ggpht.com/_Kwwy9VyLMKw/S3qDYQZCiRI/AAAAAAAACxA/aXY0neVNzh0/but_readmore.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


ket: gambar readmore bisa diganti, dengan cara ganti URL gambar(yg warna merah)


8. Simpan

semoga bermanfaat..

cara pasang favicon versi scroll text

Sabtu, 27 Februari 2010 Ayo komen.!! 11 orang merespon sejauh ini..
halo sobat blogger di manapun anda berada. Percantik/perganteng blog anda dengan trik blogger dari saya ini. Trik ini ialah favicon, tapi favicon ini lain daripada yg lain, favicon ini namanya favicon versi scroll text. Sebagai contoh seperti milik saya yg berada di address bar..

mau?? pengen??
begini caranya...

1. Buka http://www.freefavicons.info
2. Klik browse untuk mengambil gambar dari komputer Anda
3. Kolom di bawahnya isi dengan text yang akan muncul



4. Kalau sudah klik Create Favicon
5. Kemudian klik Get It Now untuk menyimpan hasilnya di komputer Anda
6. File tersimpan di komputer Anda

kemudian daripada itu ..

Extract File
Akan ada beberapa file yang terdownload, extract hasil download.
- Buka File Rar Anda, akan ada banyak file
- Biasanya file yang kita butuhkan akan bernama Animated_favicon.gif, klik file tersebut
- Klik Extract To pada toolbar WinRAR
- Pilih tempatnya lalu klik OK

ImageShack
- Buka http://imageshack.us
- Klik Browse, cari file (animated_favicon.gif) yang tadi telah Anda extract
- Klik Start Upload (kolom lain abaikan saja, tak perlu diisi
- Nah, muncul URL file Anda yang bisa Anda gunakan untuk favicon Anda

Penting!!! Ada Direct link to image dan short link to image
Pilih saja yang direct link to image, yang kita gunakan adalah URL di kolom sebelah kiri tulisan Direct link to image.

Pasang Favicon
Untuk memasangnya sudah pernah saya bahas, baca saja cara ganti icon blog(favicon)
Di artikel tersebut ada script untuk memasang favicon, ganti yang berwarna merah dengan URL yang baru saja Anda dapat.

Semoga bermanfaat........

cara membuat tulisan berkedip/blink

Jumat, 26 Februari 2010 Ayo komen.!! 14 orang merespon sejauh ini..
halo sobat blogger dimanapun anda berada. Saya akan memberi trik yg enteng2 saja, bagi yg uda tau/uda master gpp ikutan aja, karena trik ini unutk para NEWBIE seperti saya.,, btw, trik ini simpel buanget. Trik ini namanya cara membuat tulisan kedip-kedip/blink-blink, untuk contohnya anda bisa lihat di header saya bagian pojok kanan. Gimana? uda tau? klo uda anda ingin mencobanya? Silahkan praktekkan tutorial dari saya ini..
kedip-blink
cekidot!!
caranya..

<blink> taruh tulisan.mu disini.. </blink>

ket :
trik ini bisa dipakai dalam sebuah link..
<blink><a href="http://www.maspeypah.co.cc">blog saya..</a></blink>
hasilnya..
blog saya..

saya kira itu saja..
kurang lebihnya saya mohon maap,.. Wassalamualaikum Wr.Wb(heheehee..)

semoga bermanfaat ..

recent comments


join this site!

recent post


ingin seperti ini ??
di sini tempatnya!!
© 2009 mas.peypah | kumpulan trik blogger. Powered by mas.peypah