Raja Pepaya | Jual Pepaya Murah dan Berkualitas: trik dan tips blogging

Showing posts with label trik dan tips blogging. Show all posts

Monday, December 31, 2012

Cara Membuat Popup Facebook Like Box Dengan Timer Pada Blog

Satu lagi widget like box (kotak suka) fans page facebook popup yang dilengkapi dengan timer atau waktu dengan 4 skin gambar yang berbeda-beda. Kotak like box popup ini muncul ketika halaman blog dibuka dan dirancang untuk tidak muncul kedua kalinya jika pengunjung sudah mengklik like atau suka pada box tersebut serta dilengkapi dengan tombol close pada sudut kanan atas.

Widget like box yang satu ini sangat berbeda dari widget like box facebook melayang karena like box melayang akan selalu muncul pada saat halaman dibuka atau direload. Berbeda dengan like box fans page facebook popup dengan timer yang dirancang khusus dan dilengkapi dengan timer untuk menutup sendiri pada saat countdown timernya sudah habis serta dilengkapi dengan script atau fitur pembaca cookies pada browser sehingga membuat like box yang satu ini tidak akan muncul untuk kedua kalinya jika like atau suka pada box tersebut sudah di klik.

Like box ini sendiri didesain oleh kakiheboh yang diberi nama "LikeBox FB Fanpage Pro". Cara pemasangannya sendiri sangatlah mudah, cukup dengan mengcopy paste kode css/script dan memasukkannya kedalam template, tepatnya diletakkan di atas tag </body> atau di bawah tag <body> dan untuk demonstrasinya sendiri, silahkan sobat klik live demo di bawah ini.

LIVE DEMO

Setelah melihat demo di atas, mungkin sobat tertarik untuk memasangnya pada blog sobat dan jika iya, berikut kode dan cara meletakkan kode tersebut ke dalam template :

Login ke Blogger
Pilih Template » Edit HTML » Centang Expand Template Widget
Copy kode di bawah ini dan pastekan tepat di atas tag </body> atau di bawah tag <body>

<style>
#fblikepop { background-color: #fff; display: none; position: fixed; top: 200px; _position: absolute; width: 450px; border: 10px solid #6F6F6F; z-index: 200; -moz-border-radius: 9px; -webkit-border-radius: 9px; margin: 0pt; padding: 0pt; color: #333333; text-align: left; font-family: arial,sans-serif; font-size: 13px;}
#fblikepop body {background: #fff none repeat scroll 0%; line-height: 1; margin: 0pt; height: 100%;}
.fbflush { cursor: pointer; font-size: 11px !important; color: #FFF !important; text-decoration: none !important; border: 0 !important;}
#fblikebg { display: none; position: fixed; _position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: #000000; z-index: 100;}
#fblikepop #closeable { float: right; margin: 7px 15px 0 0;}
#fblikepop h1 { background: #6D84B4 none repeat scroll 0 0; border-top: 1px solid #3B5998; border-left: 1px solid #3B5998; border-right: 1px solid #3B5998; color: #FFFFFF !important; font-size: 14px !important; font-weight: normal !important; padding: 5px !important; margin: 0 !important; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
#fblikepop #actionHolder {height: 30px;overflow: hidden;}
#fblikepop #buttonArea {background: #F2F2F2;border-top: 1px solid #CCCCCC;padding: 10px;min-height: 50px;}
#fblikepop #buttonArea a {color: #999999 !important;text-decoration: none !important;border: 0 !important;font-size: 10px !important;}
#fblikepop #buttonArea a:hover {color: #333 !important;text-decoration: none !important;border: 0 !important;}
#fblikepop #popupMessage {font-size: 12px !important;font-weight: normal !important;line-height: 22px;padding: 8px;background: #fff !important;}
#fblikepop #counter-display {float: right;font-size: 11px !important;font-weight: normal !important;margin: 5px 0 0 0;text-align: right;line-height: 16px;}</style>
<script src='http://www.google.com/jsapi'/><script>google.load("jquery", "1");</script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
kakinetworkdotcom01username="lostsector.stars",
kakinetworkdotcom01title="Join us at Facebook!",
kakinetworkdotcom01skin="01",
kakinetworkdotcom01time="15",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="en"
//]]>
</script>
<script src='http://lostsector-project.googlecode.com/files/likebox-facebook-with-timer.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Keterangan :

Lostsector.stars : Ganti dengan username fans page facebook sobat
Join us at Facebook : Silahkan disesuaikan
kakinetworkdotcom01time="15" : adalah waktu (seconds/detik) yang diperlukan sampai popupnya tertutup sendiri
Skin ="01" : Ganti dengan kode skin yang lain (01, 02, 03, 04). Contoh skinnya ada di bawah ini :

SKIN "01"

SKIN "02"

SKIN "03"

SKIN "04"

Langkah terakhir, simpan template sobat...!!!

Semoga artikel kali ini bermanfaat dan jika ada saran ataupun kekurangan dari tutorial ini, mohon memberikan komentar di bawah. Terima kasih dan happy blogging...!!!

Sumber

Cara Daftar Dan Submit Blog Di Technorati

Cara Daftar Dan Submit Blog Di Technorati -- Technorati merupakan sebuah directory blog yang paling terkenal saat ini. Jutaan pengguna blog sudah terdaftar di sini. Dan Technorati juga merupakan directory blog yang dofollow, sehingga para anggotanya secara otomatis akan mendapatkan backlink dari Technorati.

Siapa yang tidak mau untuk mendapatkan backlink berkualitas ini tentunya. Dan tentunya blog kita akan semakin mantap di mata search engine dan Alexa. Untuk itu kini saya share Cara Daftar Dan Submit Blog Di Technorati ini karena saya juga baru mendaftarkan blog ini di Technorati.

Cara mendaftarkan dan mensubmitkan blog kita di Technorati ini cukup mudah, silahkan simak uraian singkat Cara Daftar Dan Submit Blog Di Technorati di bawah ini.

Langkah Pertama:

Kita buat akun Technorati dulu, silahkan Anda masuk disini.
Kemudian klik tombol Join
Silahkan isi data-data Anda ke kolom yang telah disediakan.
Kemudian klik Submit.
Cek pada kotak masuk email Anda, cari email dari Technorati kemudian ikuti link yang diberikan untuk memvrifikasi akun kita.
Sampai di sini kita sudah mempunyai Akun Technorati. Langkah selanjutnya tinggal mensubmit blog kita seperti pada langkah kedua di bawah ini.

Langkah Kedua:

Silahkan Login ke akun Technorati Anda.
Kemudian klik pada nama akun Anda di sebelah kanan atas untuk menuju ke halaman My Profil
Silahkan update profil Anda sesuai dengan permintaan kolom
Pada bagian bawah pada kolom Claim My Blog, silahkan masukan URL blog Anda.
Pada halaman berikutnya silahkan masukan data sesuai permintaan.
Untuk kolom Feed URL silahkan tambahkan /atom.xml setelah URL blog Anda. sehingga menjadi seperti berikut ini: http://www.indosoftgame.blogspot.com/atom.xml
Setelah semuanya terisi data, silahkan klik tombol Proces to next step.
Pada jendela baru silahkan klik return to profil
Klik pada Check Claim
Kemudian Anda akan mendapatkan email dari Technorati yang berisi sebuah kode unik sebagai claim token seperti P9XDYKU3RXM4
Agar blog Anda dapat dikaim oleh Technorati, Anda harus membuat sebuah postingan baru yang memuat kode token seperti di atas.
Setelah postingan Anda di publish kan, silahkan menuju ke akun Anda di Technorati, masuk ke Claim Status dan klik Verify Claim Token.
Bila verifikasi telah berhasil, maka akan ada pemberitahuan dari Technorati pada email kita.

Atau juga bisa menaruh kode verifikasi dari Technorati di dalam HTML.

Masukkan kode dibawah, tepat dibawah kode <head>

<meta content='Kode Verifikasi Technorati Blog Anda' name='TechnoratiVerifyID'/>

Lalu klik simpan.

Jika langkah di atas sudah anda lakukan semua, silahkan anda tunggu email pemberitahuan yang berisi Technorati Claim Complete.

Demikian saja sharing saya mengenai Cara Daftar Dan Submit Blog Di Technorati ini semoga dapat dimengerti dan bermanfaat.

SUMBER

Sunday, October 7, 2012

Cara Merubah Tampilan Komentar Blogger

Komentar merupakan salah satu interaksi pengunjung terhadap Admin yang biasanya bertujuan untuk menyampaikan; masukan, cacian, sanjungan maupun kebingungan.
Tapi apakan sobat terbersit untuk menghias tampilan komentar di blog sobat?, jika belum mungkin tampilan komentar ini akan menginspirasi sobat untuk modifikasi tampilan komentar tersebut, tidak percaya??? lihat gambar dibawah ini

Nah lo, gimana ada yang berminat? ini masih yang part 1 masih ada part 2, untuk yang part 2 nanti nyusul.

Cara Merubah Tampilan Komentar Blogger

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Gunakan ctrl-f dan letakan kode CSS dibawah ini sebelum kode: ]]></b:skin>

/* Comments
----------------------------------------------- */
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
border-radius: 20px 20px 20px 20px;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
.cm_entry_a {
padding: 16px 16px 0 16px;background: #F7F7F7;
overflow: hidden;
border-radius: 20px 20px 20px 20px;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnp1LRUHmScHwkfuwFR66PCtKES_AWut7NWoZAcRuGh0P21l8o95mFl-lIxzZzYZesFBNRDZDM7oTgPkQAKiecfHKlQ9TRl75KWxv4uZRukuSFHcIwcikd0hQszxfbeRzJXI-5GOq5ezY/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
background-color: #F4F4F4;
padding: 5px;

}
.cm_info_a {
margin-bottom: 5px;
padding: 5px;
border-radius: 20px 20px 20px 20px;
}

.cm_name {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;
}
.cm_name_a {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
margin-bottom: 10px;
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #fff;
font-size: 13px;
color: #333;
word-wrap:break-word;
border-radius: 0px 20px 20px 20px;
}
.cm_entry_a p {
margin-bottom: 10px;
background: url("http://congdongit.com.vn/images/misc/admin.gif") no-repeat right;
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #fff;
font-size: 13px;
color: #333;
word-wrap:break-word;
border-radius: 0px 20px 20px 20px;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

Langkah 3
Setelah itu letakkan kode dibawah ini diatas kode </body>

Langkah 4
Lalu cari kode <b:includable id='comments' var='post'>

<b:includable id='comments' var='post'>
kode yang harus di ganti
</b:includable>

Jadi diantara kode <b:includable id='comments' var='post'> dan </b:includable> ada sebuah kode yang agak relatif panjang dan kode tersebut harus diganti dengan kode dibawah ini

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_head'>
<div class='cm_avatar_a'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>
<b:else/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>
</b:if>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_entry_a'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
<b:else/>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

<b:else/>
<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
<b:else/>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>

Nah pada kode diatas sobat wajib mengganti tulisan __BlogID__ dengan ID Blog sobat

Langkah 5
Kemudian cari kode seperti dibawah ini

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Biasanya ada 4 kode yang serupa dengan kode di atas maka dari itu ganti semua kode tersebut dengan kode ini

<b:include data='post' name='comments'/>

Langkah Terakhir
Klik Simpan Template

Sumber : http://koderator.blogspot.com

Sunday, July 8, 2012

Menambahkan Add Gadget pada Header Blog

Tampilan dalam Blogspot pada dasarnya dibagi dalam beberapa bagian, yaitu Header, Body,Sidebar, dan Footer. Header sendiri biasanya berisi dengan title blog beserta deskripsi singkat dari blog tersebut. Body berisi konten utama dari blog berupa artikel atau posting. Sidebar danFooterberisi komponen tambahan yang isinya bisa diganti-ganti sesuai dengan keinginan. Dalam Blogspot ini sendiri komponen-komponen tersebut biasa disebut dengan Gadget.

Pada template standar Blogspot dari bagian-bagian tersebut, kita bisa menambahkan atau mengurangi Gadget dengan bebas pada bagian Sidebar dan Footer (ditandai dengan adanya fungsi Add Gadget). Untuk Header, kita tidak bisa menambahkan Gadget, karena padaHeadersudah dikunci hanya digunakan untuk menempatkan Title dan deskripsi blog, atau menambahkan image sebagai pengganti Title.

Nah, dalam tulisan kali ini saya ingin kembali memberikan informasi singkat, bagaimana cara menambahkan Gadget pada bagian Header Blogspot, dengan adanya Gadget ini kita bisa menyisipkan atau memasang item lain seperti Script Html, Teks, Gambar tambahan, atauGadget lainnya sesuai keinginan. Trik berikut ini saya buat berdasarkan template standar Blogspot, tapi tidak menutup kemungkinan bisa digunakan pada template lain (diluar template yang telah disediakan oleh Blogspot).

kita akan melakukan perubahan pada bagian Header(saya beri tanda kotak merah). Langkah pertama yang kita lakukan adalah masuk ke Edit Html(sub tab Layout), jangan lupa untuk mencentang Expand Widget Templates. Pada script yang ada silakan cari script seperti dibawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Internet Connection Tutorial (Header)' type='Header'/>

</b:section>

</div>

Langkah berikutnya adalah mengganti item dari maxwidgets, maxwidgets ini sendiri berfungsi menampilkan jumlah widget (Gadget) dalam Header. Sebagai contoh di sini saya isi dengan angka 5 (maxwidgets=’5’), ini berarti kita bisa menambahkan sampai dengan 5 itemGadget pada bagian Header, jika kita ingin menambahkan dalam jumlah yang tidak terbatas, cukup kosongkan saja (maxwidgets=’’). Setelah itu kita ganti item darishowaddelementdengan yes (showaddelement=’yes’), fungsi tag ini adalah memunculkan fungsi Add Gadgetpada Header. Jika sudah maka tampilan scriptnya jadi seperti ini.

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>

<b:widget id='Header1' locked='true' title='Internet Connection Tutorial (Header)' type='Header'/>

</b:section>

</div>

Setelah itu simpan template tersebut. Jika perubahan script tersbut benar, maka pada bagianPage Element akan berubah dengan munculnya tambahan Add Gadget sama seperti pada bagian Sidebar.

gimana mudahkan....enjoy...

Raja Pepaya | Jual Pepaya Murah dan Berkualitas