Featured Post Today
print this page
Latest Post
Tampilkan postingan dengan label Blog Tips and Tricks. Tampilkan semua postingan
Tampilkan postingan dengan label Blog Tips and Tricks. Tampilkan semua postingan

Cara Membuat Kotak Komentar Facebook Berdampingan dengan Kotak Komentar Blogger

Seven Jon

Setelah browsing sekian lama dan mencoba scrip scrip untuk membuat komentar pada blog via facebook ternyata thema yang saya gunakan tidak sesuai dengan scrip yang akan di masukan karna terdapat beberapa fitur yang tidak ada di thema saya seperti <div class='comments comments-page' id='blogger-comments-page'> dan saya putuskan untuk tidak mencobanya kembali karna fitur yang satu ini sangat penting contoh'nya seseorang ingin berkomentar tentang postingan yang saya buat mingkin saja dia tidak punya akun google dll dkk dst akhir'nya tidak jadi komentar dan mencari sumber lain
tapi teringat nasihat ibu saya " Dimana ada kemauan disitu ada jalan " , sayapun mencoba kembali mencari scrip dan ketika di apply , jreeng dan hahaha ternyata work , Mungkin udah banyak yang tau dan buat tutorial cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger. Tapi belom semua tau cara paling mudah dan gak berbelit-belit seperti yang saya gunakan,Yuk disimak dulu caranya

1. Login dulu ke akun Blogger kamu.
2. Pilih Rancangan lalu Edit HTML kemudian centang  Expand Template Widget
3. Cari kode <div class='comments' id='comments'> kemudian copas kode dibawah ini, letakkan tepat dibawah kode <div class='comments' id='comments'> tadi.
NB : Jika kode <div class='comments' id='comments'> ada 2, pastekan kode dibawah ini tepat dibawah kode <div class='comments' id='comments'> yang ke-2.
Berikut adalah code / scripnya

 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Masukan ID Fb anda disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
<style>.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}</style>


4. Ganti tulisan warna merah (Masukkan ID Fb anda disini) dengan ID facebook anda. Karna ID fb sudah diganti menjadi username, untuk mengetahui ID anda silahkan pastekan link ini ke browser anda https://graph.facebook.com/username (contoh http://www.facebook.com/rivaldoelekkoyokbojogg maka usernamenya rivaldoelekkoyokbojogg) tapi kalau fans page pakai nomor misalnya (https://www.facebook.com/pages/SDN-Kepatihan/415012045281564 maka ID nya adalah 415012045281564)


5. Setelah diganti Simpan Template anda dan lihat hasilnya.

Nah gampang kan 
Okeh selamat mencoba dan jangan lupa tinggal kan komentar 
0 komentar

CARA MEMBUAT LIKE BOX DI SISI KIRI BLOG




بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم



 Ini dia salah satu widget yang sangat menakjubkan.

Dimana orang-orang selama bertahun-tahun hanya menggunakan  tombol facebook like saja di blog, akan tetapi hari ini saya ingin memperkenalkan dan share ke Anda Cara membuat kotak like facebook melayang di blog (floating facebook likebox).

Floating facebook likebox adalah sebuah slider yang menyembunyikan Likebox di dalam wadah dan ketika visitor (pengunjung) mengarahkan crusor ke tombol  maka akan terbuka kotak Facebook likenya. 

Langkah-langkahnya sebagai berikut:

LANGKAH 1. Menambahkan Plugin JQuery ke Blog Anda : 
  1. Masuk ke Dashboard Anda> klik Design (rancangan)> Edit HTML.
  2. Cari kode </head> Gunakan Control + f untuk memudahkan pencarian, kemudian pastekan kode jquery  berikut sebelum kode </head>
  3. <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
    3. (Abaikan langkah ini jika Anda telah menambahkan Plugin JQuery ke blog)
    Save (simpan) template. 
 4. Save (simpan) template


LANGKAH 2. Tambahkan floating likebox ke blog Anda :
  1.  Buka halaman Tata Letak
  2. Klik tambah gadget > pilih tambah HTML/Javascript
  3. <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/AVvXsEjBtA1vHkxIm_bIshZNhFnWWqhM2NXNXKAaS3RaCOusIimzK5k0TxUltgzEpAjo-YHQblOJHZl9p66aZb_SuGX29DW3RdpyGU11pC73j0XXhEWoKGOBWGt9NS7xlfT1U8wxhB9qZxJFOHiO/s1600/facebook1.png") 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: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} 
    .w2bslikebox span a{color: #FF9D00;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:///www.facebook.com/pages/Eyang-anom/427305383989192&amp;
    width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=8&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http:/sijalupangna.blogspot.com">Tips dan trik, science dan bisnis</a></span></div></div>
    copy dan pastekan kode script atas ini

    Anda bisa mengganti "url fans page facebook Anda" dengan alamat url  fans page facebook Anda sendiri
    contoh fans page facebook blog ini : http://www.facebook.com/RivaldoAtthoriqPutraSetyadi?ref=hl.
    Sedangkan untuk gambar logo facebooknya seperti "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBtA1vHkxIm_bIshZNhFnWWqhM2NXNXKAaS3RaCOusIimzK5k0TxUltgzEpAjo-YHQblOJHZl9p66aZb_SuGX29DW3RdpyGU11pC73j0XXhEWoKGOBWGt9NS7xlfT1U8wxhB9qZxJFOHiO/s1600/facebook1.png", bisa  diganti dengan koleksi  gambar logo facebook Anda sendiri.
    Save template, selesai sudah Cara membuat kotak like facebook melayang di blog (floating facebook likebox).
    Semoga bermanfa'at. 
1 komentar

Membuat Komentar Terbaru dengan Gambar

Halo sobat blog trik dan tips, kali ini kita akan membuat komentar terbaru dengan gambar. Widget ini menggunakan javascript dan sangat mudah untuk diinstal. Sobat dapat memasang widget ini pada blog anda untuk sekedar memperindah atau mempercantik blog. Anda dapat mengetahui apabila seseorang berkomentar pada blog anda. Gambar komentator ditampilkan dalam bentuk lingkaran sehingga memberikan efek yang sangat menarik. Jika sobat ingin memasangnya pada blog ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukan kode berikut ini:
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 30,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

5. Selanjutnya sobat tinggal menganti kode berwarna merah dengan url blog anda.
6. Jika sobat ingin mengedit tampilan widget ini berikut adalah penjelasannya:
- Kode berwarna hijau adalah jumlah komentar yang ditampilkan
- Kode berwarna biru aadalah ukuran gambar komentator
- Kode berwarna orens adalah rincian komentar dari komentator
7. Terakhir simpan gadjet anda.
0 komentar

Membuat Widget Selamat Datang pada Blog


Blog trik dan tips kali ini akan memberikan tutorial bagaimana membuat pop up selamat datang pada blog. Pop up atau jendela munculan akan nampak apabila anda berkunjung ke blog. Anda bisa memodifikasi pop up ini dengan gambar, pesan untuk subscribe, dan lain sebagainya. Pop up ini dibuat oleh wierd walker untuk mempercantik dan menambah efek pada blog anda. Jika anda tertarik untuk membuatnya ikuti langkahnya dibawah ini:

1. Masuk ke Rancangan --> Edit HTML
2. Carilah kode </head>
3. Letakkan kode dibawah ini diatas kode </head>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/leightbox.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>
4. Masuk lagi ke Rancangan --> Edit Laman
5. Tambahkan gadjet lalu pilih HTML/Javascript
6. Masukkan kode berikut ini pada gadjet tersebut

<!-- Welcome page Start by http://blogtrikdantips.blogspot.com/ -->
<style>a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}
a.lbAction:hover {
background: #FFFFFF;
}
a.lbAction:active {
background: #999999;
}



div.leightbox {
color: #333;
display: none; /* toggle display to show/hide the popups when designing & previewing */
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
width: 500px;
height: 400px;
padding: 0;
border: 1em solid #000000;
background: #FFFFFF;
z-index: 101;
overflow: none;
}
div.scrollbox {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
overflow: auto;
}

.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);
}

div.lightbox[id]{ position:fixed; }
div#overlay[id]{ position:fixed; }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById(&quot;HTML88&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;Text88&quot;).style.display=&quot;none&quot;">ENTER</a>
</div>
<div id="EPGrab"><a href=" http://blogtrikdantips.blogspot.com/" target="_blank">Make your own</a></div>
<div id="EPDarkLayer"></div>
<!-- CSS part -->
<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>
<!--[if IE 6]>
<style>
#EPDarkLayer {position:absolute;}
</style>
<![endif]-->
<!----------// POPUP (AUTOLOAD) //---------->
<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href=" http://rivaldoatthoriqputrasetyadi.blogspot.com/ ">Blog Trik dan Tips</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY7IUdZqZ2uXRZjI1R3Nii3uxgq7BZp6y5vWph88q2RQea4m081N_XPOi63Z6K9riAWBNxnauqFqUQZQX281iAJnv523QCCxoB1sOVH1U2hOYOayqyYJg4EUFQ4kqaIULa9J5zF3_1tPLP/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY7IUdZqZ2uXRZjI1R3Nii3uxgq7BZp6y5vWph88q2RQea4m081N_XPOi63Z6K9riAWBNxnauqFqUQZQX281iAJnv523QCCxoB1sOVH1U2hOYOayqyYJg4EUFQ4kqaIULa9J5zF3_1tPLP/s320/WelcomeToMyPageRdFlower2.jpg" /></a>

</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>

<!----------// POPUP (AUTOLOAD script: add AFTER the autoload popup div) //---------->
<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script><!-- Welcome page End -->

7. Gantikan kode berwarna biru dengan url blog dan judul blog anda
8. Simpan template anda lalu lihat hasilnya
0 komentar

Cara Membuat Indikator Loading Page / Halaman


Ada beberapa blog yang pernah saya kunjungi menggunakan indikator loading halaman. Biasanya sebuah gambar akan muncul ketika kita sedang membuka halaman sebuah web. Gambar tersebut menunjukan halaman tersebut sedang dalam proses loading. Blog Trik dan Tips kali ini akan memberikan tutorial bagaimana membuat loading page atau indikator loading halaman yang sederhana pada blog anda. Untuk membuatnya tidaklah sulit, ikuti saja langkahnya dibawah ini:

1. Masuk ke Rancangan --> Edit HTML
2. Back up (upload) template anda terlebih dahulu untuk mencegah kesalahan editing
3. Cari kode <body>
4. Hapus kode tersebut lalu ganti dengan kode dibawah ini:
<body onLoad='init()'>
<span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'><img border='0' src='http://1.bp.blogspot.com/-l6kpGSbwlAk/T4QyAAmu78I/AAAAAAAAC8M/3JL_qrskbEs/s400/kotak.gif'/></span>
<script>
var ld=(document.all);

var ns4=document.layers;
var ns6=document.getElementById&amp;&amp;!document.all;
var ie4=document.all;

if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;

function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>
5. Ganti kode berwarna biru dengan url gambar loading page yang anda suka
6. Simpan template anda lalu lihat hasilnya
0 komentar

cara mengetahui code warna

0 komentar

Menghilangkan Tang dan Obeng pada Blog


Waktu itu salah seorang sobat sempat bertanya kepada saya..."sob cara hilangin gambar tang dan obeng itu bagaimana sih? Jawab aku: ini dia bro tutorialnya! Tang dan obeng pada tampilan blog anda berfungsi untuk melakukan pengeditan gadjet tanpa harus masuk ke Rancangan blog. Tang dan obeng tersebut muncul ketika anda sedang login pada akun anda. Tapi jika anda merasa terganggu dengan keberadaan gambar ini maka anda dapat menghapusnya...Pengen tau caranya gimana hilangin tang dan obeng, ikuti langkah berikut ini:

1. Login ke blogger
2. Masuk ke Rancangan, klik pada Edit HTML
3. Cari kode ini ]]></b:skin> 
4. Kopi dan paste kode dibawah ini tepat diatas kode ini ]]></b:skin> 

.quickedit{
display:none;
}
5. Simpan template anda dan lihat hasilnya....
Selamat mencoba....happy bloggingrazz
0 komentar
 

Copyright © 2013. SDN KEPATIHAN - All Rights Reserved
Template Created by Creating Website Published by Rivaldo
Proudly powered by Blogger