Cara Membuat Google Plus Button

Mungkin nama Google Plus sudah tidak asing lagi di telinga anda. Ya Google Plus merupakan situs jejaring sosial yang saat ini sedang bersaing dengan facebook dan twitter. Jika anda memiliki Google Plus Page maka anda dapat membuat Google Plus Button di blog untuk mempromosikan blog anda serta berbagi informasi kepada teman-teman anda. Untuk itu saya langsung saja memberikan tutorial bagaimana memperoleh Google Plus Button. Ikuti langkah berikut ini:

1. Masuk ke Google Plusone Button
2. Pilihlah size (ukuran), anotasi dan bahasa yang anda inginkan
3. Setelah itu klik link Advance Option

4. Masukan URL to +1 dengan url blog anda, lalu klik enter
5. Lalu kopi kode dibawahnya
6. Sekarang anda hanya perlu meletakkan kode tersebut di sidebar atau diposting blog

Tutorial ini sangat mudah dan singkat saja. Dengan memasang tombol Google Plus One maka kemungkinan akan semakin banyak pengunjung yang mencircle page anda. Mudah2an informasi yang saya sampaikan dapat membantu anda. Terima kasih atas kesediaannya membaca artikel ini.

Read More

Membuat Link Sumber Muncul pada Artikel Kopi Paste

Sobat bloggers bagaimana kabarnya? Senang sekali bisa berjumpa pada tutorial Blog Trik dan Tips “tak ada blog kalau tak ada triks”. Sobat bloggers tau tidak jika anda mengkopi artikel saya di setiap posting maka akan muncul sumber artikel dari blog saya. Jika anda ingin tau triknya maka saya akan berikan langkahnya. Caranya sangat mudah sekali, cuma membutuhkan waktu sebentar saja. Oke langsung aja kita ke TKP sambil minum kopi…..he3

1. Kunjungi situs https://id.tynt.com/
2. Kemudian anda Daftar dulu atau Sign Up untuk membuat akun, Isi domain (url blog), email dan password. (jangan lupa untuk melakukan konfirmasi di email anda)
3. Klik next untuk masuk ke pengaturan script
4. Klik tombol Customize Attribution, lalu atur yang ingin ditampilkan jika seseorang mengkopi artikel anda, misalnya anda ingin menampilkan link blog maka pilih url saja, atau anda ingin menampilkan judul blog maka pilih page title.
5. Setelah selesai pengaturannya klik save dan anda akan diberikan script untuk diletakan di template blog anda. Kopilah script tersebut.
6. Kemudian masuk ke blogger, klik Rancangan --> Edit HTML
7. Lalu letakan script tersebut diatas kode </head>
8. Simpan template anda lalu lihat hasilnya.

Cobalah kopi artikel atau teks pada blog anda. Maka akan muncul sumber artikel berupa link atau judul posting dari blog anda (tergantung pengaturan anda tadi). Jika anda ingin informasi tentang jumlah artikel dan artikel apa saja yang dikopi paste, langsung saja login ke situs yang tadi kita kunjungi menggunakan akun yang telah anda daftar. Sekian dari saya, semoga bermanfaat dan selamat mencoba

Read More

Membuat Efek Slide Facebook Fan Page Like di Blog

Sobat blog trik dan tips, kebetulan saya ada waktu sedikit untuk memposting artikel yang menarik. Tentunya kita akan membuat widget facebook fan page like yang melayang disamping blog, atau biasanya disebut floating facebook fan page. Script jquery yang kita gunakan ini akan memberikan efek yang manarik yaitu sliding efek ketika didekatkan dengan cursor, dan akan menutup apabila cursor menjauh. Previewnya dapat anda lihat pada gambar disamping. Dengan memasang widget ini pada blog dijamin facebook anda akan semakin banyak fannya alias penggemarnya. Untuk memasang script ini sangat mudah, hanya membutuhkan beberapa langkah saja. Jadi bagaimana tertarik untuk membuatnya....? Kalau begitu ikuti tutorialnya berikut ini:

1. Pada blog anda masuk ke Design --> Edit HTML
2. Carilah kode </head>
3. Letakan script jquery dibawah ini diatas kode </head>

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

4. Simpan template anda

5. Masuk ke Elemen Halaman lalu klik Tambah Gadjet

6. Pilih HTML/Javascript

7. Masukkan kode berikut ini:

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-17D-jJNDDxNmuPG1Mx0Mtb0W6L4gt9g03weeiUSSQLb-rNUpixJBVCUByF5b45HT4qQlpGytSQeLf7uucxY8GvSL9UxZqjEp1lrAzJ8RF7uMfaJ4cdqEEni9ec5n_4_RpkludVjFp5Iq/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fblogk-ky&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span style="color:#fff;">Widget by: <a style="color:#fff; font-weight:bold" href="http://www.blogtrikdantips.blogspot.com">Indra</a></span></div></div>

8. Ganti tulisan berwarna merah dan nama fan page anda

9. Simpan gadjetnya

Sobat bagaimana dengan hasilnya...semoga dengan kode ini akan membuat blog anda menjadi lebih menarik dan bertambah pengunjung dan fannya...semoga bermanfaat.

Read More

Membuat Widget Penilaian Artikel Menggunakan Jempol

Pada Trik dan Tips kali ini kita akan membuat Penilaian Menggunakan Jempol atau Thumbs Up and Down Rating Widget pada blog anda. Sebelumnya kita telah membuat 5 star rating widget dengan menggunakan bintang namun widget yang satu ini berbeda karena menggunakan jempol. Jompol atas dan jempol bawah adalah dua penilaian yang berbeda. Jempol atas menunjukan isi dari artikel anda disukai oleh pembaca, sebaliknya jempol bawah menunjukan isi artikel tidak disukai oleh pembaca. Widget jempol ini akan tampil dengan jumlah banyaknya jempol atas dan jempol bawah. Jika ingin membuat blog anda lebih menarik maka cobalah tampilkan widget ini. Untuk membuatnya ikutilah langkah berikut ini:

1. Masuklah ke Rancangan --> Edit HTML
2. Klik Expand template widget
3. Carilah kode seperti ini <data:post.body/>
4. Letakan kode dibawah ini diatas kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'></div>

</b:if>

Keterangan: kode biru diatas menunjukan widget ini hanya tampil pada posting artikel.

5. Letakan kode dibawah ini diatas kode </body>

<script src="http://js-kit.com/ratings.js"></script>

6. Lalu simpan template anda.

Coba anda lihat bagaimana widget ini tampil pada posting anda. Anda akan melihat Jempol Up dan Jempol dawn dengan tampilan yang sangat menarik. Smoga artikel in ibermanfaat. Selamat mencoba ya semoga bermanfaat.

Read More

Membuat Kotak Facebook Like Melayang dengan Tombol Close

Sobat blog trik dan tips, sebelumnya saya telah mengajarkan bagaimana untuk membuat efek slide facebook page fan like di blog. Pada kesempatan ini kita akan membuat hal yang sama namun bukan dengan efek slide tetapi menggunakan efek melayang. Kotak facebook page fan like akan muncul dan melayang pada blog di posisi yang tetap. Kotak Facebook Like akan mengikuti ke bawah atau ke atas apabila halaman di scroll. Kotak ini dilengkapi dengan tombol close untuk menonaktifkan gadjet tersebut. Nah penasaran gimana tampilannya pada blog anda ikuti langkah berikut ini:

1. Log in ke Blogger
2. Masuk ke Design --> Elemen Halaman
3. Tambahkan Gadjet
4. Pilih HTML JavaScript
5. Masukan kode berikut ini dalam gadjet tersebut:

<style type="text/css">

#topbar{

position:absolute;

padding-left:-100px;

background-color: transparancy;

width: 300px;

visibility: hidden;

z-index: 100;

}

</style>

<script type="text/javascript">

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 30 //set x offset of bar in pixels

var startY = 5 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}

function closebar(){

if (persistclose)

document.cookie="remainclosed=1"

document.getElementById("topbar").style.visibility="hidden"

}

function staticbar(){

barheight=document.getElementById("topbar").offsetHeight

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

var d = document;

function ml(id){

var el=d.getElementById(id);

if (!persistclose || persistclose && get_cookie("remainclosed")=="")

el.style.visibility="visible"

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

el.y -= startY;

}

return el;

}

window.stayTopLeft=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("topbar");

stayTopLeft();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<br />

<div class="clear">

</div>

<div id="topbar">

<div style="text-align: right;">

<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFjvZeFC_EwQJW_2UGbARJ-cHfw1LQBwkWVrySn_yGcVETHxGXBAAAGf4uKFiiYMUTHsbcZA7QUKm9EYq701V3CxzYxcuccmzVy9Zz6P8m9d6Qtq1Fi74XfK6PqFBE3PSZyPNpvGq0KLPS/s1600/close3.png" /></a></div>

<center>

<div style="background: #fff;">

PASTE KODE LIKE BOX DISINI

<span >Widget by: <a style=" font-weight:bold" href="http://blogtrikdantips.blogspot.com/">Indra</a></span>

</div>

</center>

</div>

6. Ganti kode yang berwarna merah dengan kode like box facebook fan milik anda, untuk membuatnya sobat dapat lihat DISINI

7. Simpan template anda lalu lihat hasilnya

Gimana mudah saja kan untuk membuatnya. Cobalah buat di blog anda, yang pasti fan page ada pada facebook akan semakin bertambah penggemarnya. Selain itu trafik blog anda akan semakin meningkat. Oke sekian dulu trik dan tips kali ini. Selamat mencoba..

Read More

Membuat Avatar pada Komentar Anonymous di Blog

Ada cara untuk mengganti gambar default anonymous komentar pengunjung ke gambar lain yang lebih menarik. Gambar atau avatar pada komentar dapat kita ganti dengan emoticon, gambar kaskus, dan lain-lain. Kita akan menggunakan script jquery sehingga mudah saja untuk memasangnya. Gambar tersebut akan muncul ketika sesorang tanpa id (anonymous) memberikan komentar pada blog anda. Penasaran bagaimana cara membuatnya, ikuti tutorial yang berikut ini:

1. Log in ke blogger.
2. Pilih Rancangan --> Edit HTML
3. Carilah kode </body>
4. Kemudian tambahkan kode dibawah ini diatas kode </body>

<!-- Avatar Komentar by www.blogtrikdantips.blogspot.com start --><script src='http://code.jquery.com/jquery-latest.js'/>

<script>

$("img[src='http://img1.blogblog.com/img/anon36.png']")

.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkz0Z9_gdsjvVaKCBfvireXbq1NLQLj1G0fKUv9M1JUky912OHov9WWf10ZUD0DTaiGdCRtf7E_7AOYZP9nku73eH-IfGwvZDqyCu77w3Eop0-eLJjCDUl_XJccHsUBukzoY4sH3KnmJ4/s1600/anon5.png')

.ssyby('blank')

</script><!-- Avatar Komentar by www.blogtrikdantips.blogspot.com end -->

Keterangan:

- Anda tidak perlu memasang script jquery seperti diatas apabila telah terpasang pada template anda.

- Anda dapat mengganti kode warna merah dengan url gambar yang anda inginkan

5. Simpan template anda lalu lihat hasilnya

Sekian trik dan tips dari saya. Semoga dengan penampilan avatar yang baru pada blog anda akan semakin menarik pengunjung untuk berkomentar. Semoga tutorial singkat ini bermanfaat, selamat mencoba.

Read More

Membuat Efek Gelembung pada Cursor

Jika sobat ingin membuat cursor terlihat lebih bergaya dan menarik maka cobalah trik yang satu ini. Kali ini blog trik dan tips akan membahas bagaimana cara membuat efek gelembung pada cursor. Efek gelembung akan muncul apabila cursor digerakan dihalaman blog anda. Gelembung akan timbul lalu melayang ke atas halaman blog. Jika sobat penasaran dengan tampilkan efek cantik ini silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:

<noscript></noscript><!-- --><script type="text/javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/cursor_gelembung.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}

function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}

function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}

window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height;

div.style.width=width;

div.style.overflow="hidden";

return (div);

}

// ]]>

</script>

5. Simpan gadjet lalu lihat hasilnya

Jika sobat ingin mengubah warna gelembung pada cursor silahkan ganti kode yang berwarna biru diatas kode kode warna yang anda sukai. Selamat mencoba! Good Luck!

Read More