Cara Untuk Memperoleh Backlink dan Meningkatkan Trafik

Kita tau bahwa penting sekali untuk menjaga serta meningkatkan trafik pengunjung di blog. Untuk itu kita juga perlu tau bahwa memperoleh backlink yang banyak adalah cara yang efektif dan pintar untuk meningkatkan trafik dan ranking blog. Biasanya untuk menjelajah ke sebuah situs atau mencari artikel, user sangat tergantung pada search engine seperti Google, sehingga melalui search engine kita dapat meningkatkan trafik pengunjung. Untuk itu kita perlu mengetahui cara membuat search engine menjadi lebih bersahabat (friendly) dengan blog kita. Caranya yaitu memperoleh atau mengumpulkan backlink yang banyak karena search engine sangat menyukai situs atau blog yang terhubung ke berbagai situs lainnya.

Ada beberapa teknik yang bisa kita terapkan untuk memperoleh backlink dan meningkatkan trafik. Beberapa profesional blogger telah mengetahui cara-cara tersebut untuk itu saya ingin menjabarkan kepada anda trik dan tipsnya. Pertama yaitu anda perlu menyertakan link ke original writer atau ke penulis asli dimana anda memperoleh artikel tersebut. Selain membantu penunjung mengenal penulis asli dan membangun trafiknya, blog anda akan lebih mudah ditemukan pada search engine. Kedua, yaitu memberikan komentar pada blog atau situs yang dofollow, dimana sebenarnya situs tersebut memberikan sebagian dari page ranknya untuk anda jika anda berkomentar. Apabila situs anda Dofollow maka anda juga akan memiliki backlink yang kuat sehingga anda dapat membangun trafik melalui search engine. Ketiga, anda perlu untuk meyertakan atau mempromosikan blog anda pada forum online. Anda bisa menyertakan link blog anda sehingga anda dengan mudah memperoleh backlink. Keempat, anda perlu bergabung dengan situs jejaring sosial seperti facebook, twitter, tagged, dan lain-lain untuk mempromosikan blog anda. Anda dapat menggunakan fasilitas yang ditawarkan beberapa situs untuk membuat posting anda muncul pada situs jejaring sosial tersebut. Hal tersebut akan meningkatkan trafik anda dan membangun backlink yang sangat kuat.

Jadi yang mana yang anda pilih, metode pertama, kedua, ketiga atau keempat. Cobalah terapkan keempat metode tersebut diatas, saya jamin trafik pada situs atau blog anda akan meningkat dengan cepat. Semoga posting ini dapat membantu dan memberikan wawasan kepada sobat sekalian. Terima kasih telah membaca posting saya.

Read More

Membuat Recent Post Berdasarkan Label dengan Menggunakan Feeds

Sobat bloggers, feeds memang punya banyak kegunaan dalam hal blogging misalnya kita bisa membuat recent post, random post dan popular post hanya dengan menggunakan feeds. Feeds juga digunakan untuk berbagi posting atau artikel kita ke situs lain. Tapi apakah sobat tau kalau feeds bisa kita gunakan untuk membuat recent post berdasarkan label. Yang saya maksud disini adalah setiap posting sobat yang terbaru akan dimunculkan berdasarkan kategori atau label. Untuk membuat recent post atau posting terbaru dengan label kita akan menggunakan widget (gadjet) feeds pada blogger. Trik ini sangat mudah saja, untuk itu langsung saja kita praktekkan.

1. Login ke Blogger
2. Masuk ke Rancangan --> Elemen Halaman
3. Tambahkan Gadjet pada blog anda
4. Pilih Feeds pada daftar gadjet


5. Masukan feeds anda seperti di bawah ini:

http://jurus2ngeblog.blogspot.com/feeds/posts/default/-/facebook

Keterangan: Apabila kata dalam kategori anda terdapat spasi, misalnya blog trik maka gunakan kode %20, hasilnya bisa seperti dibawah ini:

http://jurus2ngeblog.blogspot.com/feeds/posts/default/-/blog%20trik

6. Gantilah url blog saya dengan url blog anda (kode berwarna hijau)
7. Kemudian klik Lanjutkan, maka akan muncul posting terbaru anda berdasarkan label
8. Atur jumlah posting yang ingin ditampilkan lalu klik simpan

Mudah saja kan caranya? Anda dapat memanfaatkan fasilitas (gadjet) pada blogger untuk membuat posting terbaru berdasarkan label. Sekian tutorial dari saya, semoga bermanfaat ya...

Read More

Membuat Komentar Facebook Berdampingan dengan Komentar Blogger

Hai sob bagaimana kabar akhir pekan anda yang pasti menyenangkan bukan. Kebetulan karena suasana yang menyenangkan ini saya akan memberikan tutorial gimana cara membuat komentar facebook dan blogger berdampingan di blog anda. Trik yang satu ini udah saya terapkan di Blog trik dan Tips dan hasilnya sangat bagus. Oke langsung saja kita ikuti langkah-langkahnya ya:

1. Login ke Blogger
2. Masuk ke Rancangan --> Klik Edit HTML
3. Centang Expand Template Widget
4. Carilah kode <div class='comments' id='comments'>
5. Setelah ketemu paste kode dibawah ini dibawah kode <div class='comments' id='comments'>

<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'/> Komentar Facebook
</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/> Komentar Blogger
</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'>

Keterangan: kode warna merah adalah lebar kotak komentar, tinggal anda sesuaikan

6. Kemudian letakkan kode dibawah ini diatas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='jurus2ngeblog' 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>

7. Ganti ID Facebook (jurus2ngeblog) dengan ID Facebook anda
8. Cari lagi kode /* atau #comments
9. Letakan kode berikut ini dibawah kode tadi

.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;}

Sekian tutorial dari saya selamat mencobanya.

Read More

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 News Sticker dengan Jquery

News sticker adalah cuplikan judul berita atau highlight yang ditampilkan dalam bentuk sticker. Ada news sticker dalam bentuk show hide ada juga dalam bentuk marquee (teks berjalan). News sticker biasanya bisa ditemukan dalam acara berita di tv yang ditampilkan dibawah layar. Kali ini news stiker yang kita buat sedikit berbeda karena menampilkan judul posting atau artikel dalam bentuk show hide. Selain judul berita news sticker ini juga menampilkan tanggal posting artikel tersebut. Kita akan menggunakan script jquery untuk membuatnya news sticker ini. Ingin tau caranya ikuti tutorial berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode kode ]]></b:skin>
4. Paste kode dibawah ini diatas kode ]]></b:skin>

/* News Sticker by www.jurus2ngeblog.blogspot.com
---------------------------------------------*/
.newspic {background:#FFF url(http://4.bp.blogspot.com/-dx79apSnB6I/T3UoZVIgltI/AAAAAAAACxY/35LWW31ebL4/s1600/BRK+NW.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}
.news {width: 840px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000;text-decoration:none;}
.news a:hover {color:#0099cc;text-decoration:underline;}

5. Selanjutnya letakkan kode berikut ini di atas kode </head>

<!-- News sticker by www.jurus2ngeblog.blogspot.com -->
<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#0099cc;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 12px courier;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 960px;
height: 13px;
border: 0px solid #cdcdcd;
padding: 0px;
font:bold 13px courier;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #0099CC;}
#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}
#example1 a:hover {color:#111;text-decoration:none;}
</style>

6. Kemudian kita akan meletakkan news sticker tersebut diatas posting dan sidebar seperti posisi news sticker milik saya, caranya yaitu cari kode <div id='outer-wrapper'>

7. Setelah itu paste kode berikut diatas kode <div id='outer-wrapper'>

<div style='clear:both;'/>

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://jurus2ngeblog.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

8. Ganti kode berwarna merah dengan url blog anda
9. Simpan template anda dan lihat hasilnya

Demikian cara membuat news sticker di blogger. Semoga dengan tampilan news sticker halaman anda semakin senang dibaca oleh pengunjung. Selamat mencobanya....!

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.jurus2ngeblog.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/AVvXsEib2zeT0L7QhAw1GTLMsyrxYbvhAKfWfcJp4p_WcN7_5kzTQvJVDOzfOGOxxW92mtEAINZucz7ZffWrYlbHvHCnqAM0QuicXglr8ifyRejf83sCtw3rzGD0txNuwhHIEOquvVrC3Jty0zI/s1600/anon5.png')
.ssyby('blank')
</script><!-- Avatar Komentar by www.jurus2ngeblog.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

Cara Mengatasi Galat atau Error pada Browser Anda

Pernahkan sewaktu login pada web atau memberikan komentar di blog anda berjumpa dengan Galat. Galat atau bahasa inggrisnya kita kenal dengan istilah "error" terjadi karena keterbatasan komputer dalam menyajikan informasi. Galat dapat terjadi apabila cookies atau cache pada browser kita belum dibersihkan. Galat juga bisa terjadi apabila server sedang melakukan perbaikan sistem operasi. Kebetulan saya pernah berjumpa dengan galat bX-tm....... sewaktu memberikan komentar diblog. Inilah isi galatnya:

Galat saat memenuhi permintaan Anda. Maafkan kami, tapi kami tidak dapat menyelesaikan permintaan Anda. Saat melaporkan galat ini ke Layanan Bantuan Blogger atau pada Kelompok Bantuan Blogger, jangan lupa: Jelaskan apa yang Anda lakukan sebelum galat ini muncul. Sediakan kode galat dan informasi tambahan berikut ini. bX-tm......... Informasi ini akan membantu kami melacak masalah Anda dan menyelesaikannya. Mohon maaf atas ketidaknyamanan ini.........dll

Untuk mengatasi galat diatas ada beberapa cara:

1. Anda dapat menghapus cookies, cache, dan history pada blog anda. Caranya pada menu bar browser anda (Mozzila), Klik Tool kemudian klik Recent History. Setelah itu tekan tombol Clear now. Kemudian anda coba keluar dari akun anda lalu login kembali.

2. Anda coba gunakan browser lain, misalnya seperti Google Chrome, Opera dan lain-lain.

3. Cobalah untuk mengganti bahasa pada situs anda. Misalnya di blogger, anda masuk ke Draft Blogger, Ganti bahasa, lalu sign out dan sign in kembali.

Sekian dulu trik dan tips dari saya semoga anda dapat mengatasi galat yang muncul pada browser. Saya bermarap setidaknya artikel ini dapat bermanfaat bagi anda semua. Salam blogging.......

Read More

Membuat Tulisan Admin pada Komentar Anda

Biasanya kita menggunakan highlighter untuk membedakan komentar admin dan pengunjung. Namun ada cara lain untuk kita membuat komentar admin berbeda dengan komentar pengunjung, yaitu dengan membuat tulisan ADMIN pada sudut dari kotak komentar admin. Komentar admin ini akan berbeda pada threaded comments sehingga kita dapat membedakan antara pengujung dan admin. Untuk melihat contohnya anda bisa lihat digambar samping atau pada komentar di Blog Trik dan Tips. Jika anda ingin membuatnya ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Klik Edit HTML
3. Cari kode </body>
4. Paste kode dibawah ini diatas kode </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- Admin comments by www.jurus2ngeblog.blogspot.com start-->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNbidmOgT7XA5-_A6LiENFsFCFwUCdOOxeIOLwaLNZwMSNRfHunCJfAKrkd5jshgPhy_kEz1YFy0fzzYZI_BVhwPKG39VrdxFG-cYOxy-C3BIerRbgxOpKOZKvHSTugSNv-KPJvZ07Z3s/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- Admin comments ends -->

Keterangan:
- kode merah adalah garis pinggir
- kode biru adalah warna background
- kode hijau adalah gambar tulisan admin
- kode orens adalah jarak garis pinggir ke tulisan

5. Terakhir simpan template anda lalu lihat hasilnya

Sangat mudah kan untuk membuat tulisan komentar admin di daftar komentar blog anda. Silahkan dicoba aja yang pasti akan membuat blog anda semakin tambah bagus untuk dilihat.

Read More

Cara Mengganti dan Menambah Style Font di Template Blogger

Hai sobat bloggers, kembali kita ketemu lagi di Blog Trik dan Tips "tak ada blog jika tak ada trik"....he3. Mungkin anda sudah tau apa itu font, font adalah jenis atau gaya tulisan. Pada blogspot (blogger), anda bisa mengganti font pada template anda, namun jumlah jenis font sangat terbatas. Beberapa jenis font yang dimiliki blogger yaitu arial, courier, georgia, lucinda grande, times, trebuchet, verdana dan webdings. Jenis font ini kadang tidak sesuai dengan keinginan anda. Ada pasti ini memiliki font dengan gaya blog anda sendiri yang lebih stylis atau elegan. Untuk itu saya akan memberikan trik dan tips bagaimana kita bisa memperoleh bermacam-macam font untuk digunakan ditemplate anda. Simaklah tutorial berikut ini:

1. Buka situs Google Web Font http://www.google.com/webfonts/#ChoosePlace:select
2. Silahkan cari jenis font yang anda inginkan, tambahkan beberapa font dengan mengklik tombol Add to Collection.
3. Klik tombol Use disebelah kanan bawah browser

4. Kemudian kopi kode dari Google Font (kodenya seperti ini, kode ini hanya contoh saja tidak perlu anda kopi):

<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>

5. Pada template anda carilah kode seperti ini <![CDATA[/*

6. Paste kode yang dikopi dari Google Web Font diatas kode <![CDATA[/*
7. Tambahkan kode slash "/" yang berwarna merah pada akhir kode yang dipaste tadi sehingga terlihat seperti dibawah ini:

<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'/>

8. Sekarang anda tinggal mengganti font pada template anda. Saya akan memberikan contoh bagi anda untuk mengganti font header di template anda, caranya seperti berikut ini:
9. Carilah kode #header h1 atau h2.postTitle {
10. Setelah itu ganti font family yang tadi anda pilih, contohnya seperti dibawah ini:
Kode awal pada template yang belum dirubah

#header h1{color:#00008B;font-size:26px;font-family: Arial ;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}

Kode setelah dirubah saya

#header h1{color:#00008B;font-size:26px;font-family:'Condiment', cursive;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}

Begitulah caranya kita menambahkan font baru ke template, bagaimana tertarik untuk membuatnya. Silahkan dicoba aja, tapi jangan lupa ikuti langkah di atas dengan baik dan ingat untuk back up template anda. Sekian dan selamat mencoba!

Read More

Cara Membuat Fan Page Google Plus

Fan page tidak hanya dibuat difacebook namun kita bisa membuat fan page juga di Google Plus. Cara membuat fan page di Google Plus sangat mudah hanya membutuhkan beberapa menit saja sudah jadi. Fan page biasanya dikhususkan untuk memuat artikel-artikel atau sekedar ingin mempromosikan sesuatu. Blog Trik dan Tips juga sudah memiliki fan pagenya di Google plus, jadi jaangan lupa untuk circle kita. Jika anda belum tau tentang Google plus, maka istilah circle ini kita kenal sebagai menambah ke daftar pertemanan. Jadi bagaimana tertarik membuat fan page di Google Plus? Kalau begitu ikuti langkah berikut ini:

1. Jika anda sudah memiliki akun Google Plus langsung saja login ke sini https://plus.google.com/pages/create

2. Pilihlah kategori halaman untuk fan page anda.
3. Masukan judul halaman fan page dan url blog anda (centang jika anda setuju untuk membuat fan page)
4. Masukan tag line atau kata kunci dari blog anda, gunakan tanda koma untuk masing-masing kata, misalnya blog, trik, tips.......

5. Upload foto profil lalu klik continue.
6. Terakhir klik tombol finish

Jika fan page anda sudah jadi silahkan promosikan fan page anda lewat blog, atau anda bisa mempromosikan langsung dari fan page anda sendiri, dengan begitu banyak orang akan mengenal fan page anda. Oke sekian dulu trik dan tips dari saya, selamat mencobanya!

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/AVvXsEi5YzFyV5Bng_PXYNYm7pe_9IsThr5wRntmR9JiXBqZgBajQbuCkkstthvg_pZAbalE474G74_RscncgHLJT9v9iFVTEPxcNjzQ1JNnAyEBXQQ_1oYcetp97iTyxl-aehmFK9FAu-nDqYD1/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://jurus2ngeblog.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 Tombol Horizontal Twitter, Facebook dan Google Plus di Blog

Sebelumnya saya telah memberikan tips dan trik bagaimana membuat tombol twitter pada blog anda. Nah kali ini kita akan membuat trik yang lebih menarik lagi yaitu membuat tombol twitter, facebook, dan google plus pada posting blog anda. Tombol social bookmarking ini berfungsi untuk mengijinkan pengunjung yang membaca posting anda untuk berbagi melalui situs twitter, facebook dan google plus ke teman-temannya. Hal ini tentunya akan meningkatkan trafik pada blog anda. Untuk memasangnya sangat mudah saja, caranya ikuti langkah berikut ini:

1. Log in ke blogger.
2. Klik Rancangan --> Edit Halaman
3. Centang expand template widget
4. Carilah kode seperti ini: <data:post.body/>
5. Paste kode dibawah ini dibawah kode <data:post.body/>

<!—Tombol Sosial horizontal oleh www.jurus2ngeblog.blogspot.com-->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));

</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='horizontal-social-buttons' style='padding:5px 0 5px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->

<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
</div>
</b:if>

<div style='clear: both;'/>
<!—Tombol Sosial horizontal oleh www.jurus2ngeblog.blogspot.com-->

Keterangan: Jika anda ingin tombol ini muncul diatas posting blog maka kode tersebut diletakan diatas kode <data:post.body/>

6. Simpan template anda lalu lihat hasilnya

Jika anda sudah memasangnya maka hasilnya akan terlihat seperti pada bagian bawah posting blog saya. Semoga artikel ini bermanfaat bagi anda. Selamat mencobanya!

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/AVvXsEjGmHtundrPCdb0P3XnGP7ZdlVfbnl02yfzGydB7DyroOwC4Obh4FhZuuniCDuwV2llpVuJEK3g9WY6qVtrk1qjAD7HS_LM9pFzSC0Cgu-jmfRJV4vzP6UGBDnWQMQMEu0DFVQIboQ0UDhp/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%2Fjurus2ngeblog&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.jurus2ngeblog.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

Mengatasi Masalah Invalid Security Certificate pada Browser Anda

Beberapa hari yang lalu saya sempat menemui masalah mengenai security certificate pada browser saya karena merubah tanggal awal pada komputer ke tanggal yang lama. Tapi saya bisa memperbaikinya dan browser mozilla kembali berjalan dengan baik. Untuk itu saya ingin berbagi kepada anda, mengapa masalah Invalid Security Certificate bisa muncul pada brower yang anda gunakan.

Invalid Security Certificate bisa muncul pada browser anda karena dua hal yaitu:

Sertifikat website dibuat oleh pribadi dan bukan dibeli dari lembaga yang punya wewenang (Maka pada browser anda akan tampil tulisan "The certificate is not trusted because it is self signed".

Browser yang anda gunakan sudah habis masa berlakunya dan harus diperpanjang (Maka pada browser anda akan muncul "Secure Connection Failed - The certificate will not be valid until 11/05/2010 07.00 (Error code: sec_error_expired certificate)"

Untuk masalah pertama ("The certificate is not trusted because it is self signed") seperti diatas kita bisa masuk ke situs atau website dengan cara berikut ini:
1. Klik link "Or you can add an exception"
2. Klik tombol "Add exception"
3. Selanjutnya klik tombol "Get Certificate"
4. Terakhir klik tombol "Confirm Security Exception"
Dengan langkah seperti demikian anda bisa masuk ke website yang anda tuju
Sedangkan untuk masalah kedua ("The certificate will not be valid until 11/05/2010 07.00") disebabkan oleh sudah habisnya masa berlaku browser yang anda instal di komputer. Setiap browser seperti Mozzila Firefox, Explorer, dll biasanya memiliki tanggal expirednya. Untuk itu anda dapat memperpanjang tanggal dengan cara menginstal versi terbarunya. Terkadang juga masalah ini muncul bukan karena masa berlaku browser yang sudah habis, melainkan anda pernah mengubah tanggal komputer ke tanggal yang lama. Untuk itu anda hanya perlu mengganti tanggal komputer yang lama ke tanggal yang baru. Caranya berikut ini:

1. Lihat sudut kanan bawah dekstop anda, akan menunjukan waktu atau jam terkini
2. Klik 2 kali kemudian anda tinggal mengubah tanggalnya (bulan dan tahun)

Maka selesailah sudah masalah anda soal security certificate. Semoga artikel ini bermanfaat, selamat mencoba!

Read More

Membuat Tombol Twitter dan Jumlah Follower pada Blog

Sobat Blog Trik dan Tips jika anda punya akun twitter dan ingin mempromosikan blog anda, cobalah buat widget yang satu ini. Kita akan membuat tombol twitter follower pada blog, fungsinya yaitu untuk mengajak pengujung dari blog untuk mengikuti status anda pada twitter. Tombol twitter biasanya ditempatkan di sidebar atau dibawah posting. Penempatannya tergantung selera anda yang penting mudah dilihat oleh pengunjung aja. Kebetulan saya juga akan memberikan tips bagaimana memunculkan jumlah follower pada tombol twitter anda. Mudah saja untuk membuatnya, ingin tau caranya untuk itu ikuti langkah berikut ini:

1. Kunjungi situs ini https://twitter.com/about/resources/buttons#follow
2. Pilihlah tombol follow
3. Pada Button Option masukan username twitter anda
4. Kopi kode atau script untuk tombol twitter
5. Paste kode tersebut pada widget di blog anda.

6. Untuk memunculkan jumlah pengunjung pada tombol twitter tersebut maka ganti data-show-count="false" menjadi data-show-count="true". Hasilnya akan seperti tombol twitter milik Blog trik dan tips dibawah ini:

Follow @jurus2ngeblog
menjadi seperti ini:
Follow @jurus2ngeblog

7. Simpan widget anda lalu lihat blog anda
Dengan membuat tombol twitter mudah-mudahan anda semakin banyak followernya ya. Kebetulan karena sudah membaca artikel saya ini jangan lupa ya untuk follow saya di twitter ...Oke deh terima kasih sudah membaca, selamat mencobanya...

Read More

Memperbaiki Fungsi Tombol Reply pada Threaded Comments

Blog trik dan tips kali ini akan membahas bagaimana mengatasi masalah pada tombol reply threaded comments. Ada pasti sudah tau apa itu threaded comments, namun terkadang fungsi dari threaded comments tidak dapat bekerja dengan baik . Permasalahannya terletak pada tombol reply atau tombol balas. Ketika di klik malah tidak berfungsi, yang muncul adalah tulisan "javascript:void(0)" disudut kanan bawah browser anda.

Saya pun pernah memiliki masalah tersebut namun masalah itu udah saya pecahkan dan akhirnya threaded comments bisa bekerja dengan baik pada blog saya. Nah sobat ingin tau caranya ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Klik Edit HTML
3. Back up atau download template anda terlebih dahulu
4. Klik Expand Template Widget
5. Carilah kode seperti dibawah ini:

<b:includable id='threaded_comment_js' var='post'>
<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var postId = &#39;<data:post.id/>&#39;;
var feed = &#39;<data:post.commentFeed/>&#39;;
var authorName = &#39;<data:post.author/>&#39;;
var authorUrl = &#39;<data:post.authorUrl/>&#39;;
var blogId = &#39;<data:top.id/>&#39;;
var baseUri = &#39;<data:post.commentBase/>&#39;;

// <![CDATA[
feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = feed;
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == authorName
&& comment.author.profileUrl == authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};

var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;

var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};

var tok = 'comment-form_';
var hash = window.location.hash || '';
var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

// Configure commenting API:
var configJso = {
'maxDepth': 2
};
var provider = {
'id': postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};

var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};

// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>

6. Hapus seluruh kode diatas lalu ganti dengan kode dibawah ini:

<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;

// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};

var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;

var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};

var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}

// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};

var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};

// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>

7. Simpan Template anda dan lihat hasilnya

Jika anda sudah mengikuti langkah diatas dengan baik, maka threaded comments akan berfungsi pada blog. Semoga dengan posting diatas dapat membantu dan memecahkan permasalahan yang anda cari, selamat mencobanya.

Read More

Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget (Update) Sudah Direvisi! Dijamin Berhasil 100%

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

Beberapa hari lalu di facebook page Pelajaran Blog sudah memberikan bocoran 'membuat show hide tab view widget for blogger'.
Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:

Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

(1)



(2)



(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.


#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;

}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}


Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:


<script language='javascript' src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>


Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:


<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Tiga
</div>


Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat ,moga berhasil and selamat ngulik kodenya ya :D

ket:kode bercetak tebal gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.

Read More

Menghilangkan Border Image atau Garis Pinggir Gambar

Garis pada pinggir gambar biasanya muncul karena pengaturan border image posting di template anda belum dihilangkan. Border image atau garis tepi gambar biasanya membuat gambar menjadi tidak ekspresif sehingga kurang memberikan tampilan yang menawan. Beberapa orang mungkin terganggu atau tidak nyaman melihat gambar pada posting mereka memiliki border atau garis tepi. Itu sebabnya garis tepi tersebut sering dihilangkan. Untuk menghilangkan garis tepi tersebut tidak sulit, mudah saja kok. Ikuti caranya berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Cari kode berikut ini:

.post-body img

4. Setelah ketemu, lihat kode tersebut, biasanya diikuti dengan kode seperti dibawah ini:

.post-body img{border:1px solid #ccc;margin:5px}

5. Ganti border anda menjadi 0 (warna merah)
6. Simpan template anda lalu lihat hasilnya.

Hilang sudah seluruh border gambar anda yang menggangu itu. Sekarang pasti lebih menyenangkan jika melihat posting artikel kita tanpa border gambar. Jika artikel ini bermanfaat silahkan berikan komentar anda.....selamat mencobanya.....

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 Rating 5 Star pada Blog

Saya akan memberikan tutorial bagaimana caranya membuat gadjet penilaian 5 bintang pada blog anda atau biasanya disebut juga 5 star rating widget. Ada beberapa cara kita bisa membuat widget seperti ini misalnya dengan menggunakan rich snippets, namun cara saya akan memberikan cara yang lebih sederhana. Widget yang kita buat ini dikembangkan oleh js kit dan mempunyai fitur atau tampilan yang cukup menarik. Ada pilihan 5 bintang untuk penggunjung dapat memilih. Biasanya widget ini ditempatkan dibawah postingan artikel blog anda dimana penggunjung akan membaca artikel dan memberikan penilaian terhadap artikel tersebut. Ingin tau cara membuatnya ikuti langkahnya dibawah 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'></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. Terakhir yaitu simpan template anda.

Coba anda lihat bagaimana widget ini tampil pada posting anda. Tampilannya pasti menarik bukan? Selamat mencoba ya semoga bermanfaat.

Read More

Membuat Page Peel Join Us On Facebook

Page peel blog adalah halaman yang melipat pada blog anda dan akan terbuka lebar lipatannya apabila anda mengarahkan mouse anda diatas efek tersebut, contohnya seperti yang ada pada gambar disamping. Page peel biasanya berada pada bagian sudut atas dari blog anda. Efek page peel ada yang statis juga ada yang dinamik. Page peel ini umumnya digunakan untuk berbagai tujuan salah satunya yaitu untuk mempromosikan iklan. Namun pada trik dan tips kali ini kita membuat page peel dengan efek Join US on Facebook. Jadi jika seseorang pada blog anda mengklik page peel tersebut maka dia akan diarahkan ke halaman page facebook anda. Jika anda penasaran bagaimana membuat page peel efek ikuti langkah berikut ini:

1. Login ke blogger
2. Masuk ke Design --> Klik Edit HTML
3. Cari kode </head>
4. Letakan script dibawah ini diatas kode </head>

<script type='text/javascript'>var tujuan =&#39; http://www.facebook.com/jurus2ngeblog &#39;</script>
<script src='https://sites.google.com/site/ivennuary/script-ivennuary/page-peel-effect/page_peel_effect.js/' type='text/javascript'/>

5. Ganti kode berwarna merah dengan url halaman facebook anda.
6. Simpan template

Mudah saja kan membuatnya, dengan tambahan efek page feel tersebut pada blog maka akan semakin banyak pengunjung yang bergabung dengan page facebook milik anda. Semoga artikel ini bermanfaaat......

Read More

Cara Pasang Lagu di Blog

Mau punya lagu di blog anda? ya pasti mau lah....kalo gak mau untuk apa di baca posting ini!....he3 just kidding (bercanda). Oke kali ini Blog Trik dan Tips akan memberikan resep khusus bagaimana anda bisa membuat lagu di blog. Ketika seorang pengunjung membuka halaman blog anda maka lagu tersebut secara otamatis akan dimainkan (play). Caranya mudah saja hanya perlu memasukan script pada gadjet anda. Kalau gitu ikuti langkahnya dibawah ini:

1. Login ke akun blog anda
2. Pilih Rancangan --> Elemen
3. Tambahkan Gadjet anda --> Pilih HTML/Javascript
4. Masukan kode di bawah ini

<embed align="CENTER" autostart="1" height="0" loop="1" src="http://www.4shared.com/embed/s8qieq3Y/Nikita_Willy_-_Kutetap_Menanti.swf " width="0"></embed>

5. Klik saved untuk menyimpan kode tadi

Coba anda tes lagunya. Buka saja halaman blog anda pasti akan ada lagunya Nikita Willy - Ku Tetap Menanti. Kalau anda ingin menganti lagu lain, ganti script yang berwarna merah dengan kode ektensi lagu dalam format swf. Untuk lagu-lagu lainnya dapat anda klik disini: Kumpulan Ekstensi Musik SWF untuk Blog

Read More

Pasang Toolbar Wibiya Untuk Mempercantik Blog Anda

Ada beragam cara untuk mempercantik atau membuat blog kita tambah keren. Misalya dengan memasang gadjet toolbar wibiya yang satu ini. Jika anda masih newbie dan ingin membuat blog anda tampil lebih indah tanpa mengotak atik script template anda, maka coba pasang toolbar wibiya. Anda bermacam-macam fitur yang ditawarkan toolbar ini seperti: chating pada blog, melihat statistik pengunjung, integrasi dengan akun facebook dan twitter, menampilkan tulisan terkini blog anda, dan lain-lain. Toolbar ini juga dilengkapi dengan tampilan personal yang anda bisa pilih sesuai dengan warna blog anda. Toolbar ini juga akan meningkatkan trafik pada blog anda. Jadi tunggu apa lagi coba pasang toolbar ini dan lihat hasilnya. Oke cara masangnya gini:

1. Buka situs http://wibiya.conduit.com/
2. Klik tombol “Get It Now”
3. Isi formulir sesuai dengan data Anda lalu kik tombol “Next”
4. Lalu pilih tema toolbar Anda pada bagian “Select A Theme”. Kemudian klik tombol “Next”
5. Pada bagian “Application Setting”, konfigurasi akun Anda kedalam toolbar tersebut, setelah itu klik tombol “Next”

6. Pada bagian “Add it”, klik logo “Blogger” atau install on blogger (pastikan anda sudah login pada blogger)
7. Lalu klik tombol “Add Widget”

Wibiya toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda. Blog anda yang pasti akan tambah keren dan meriah dengan tambahan aplikasi yang unik ini. Oke sekian tutorial dari Blog Trik dan Tips semoga bermanfaat.

Read More

Cara Mengetahui URL Feed Twitter Anda

Selain mengupdate posting blog di twitter anda juga bisa mengupdate status twitter diblog. Biasanya twitter menyediakan widget untuk update status twitter ke blog. Anda bisa mengatur tampilan widget ini sesuai dengan keinginan. Tapi anda juga bisa membuat update status twitter muncul di blog menggunakan feed. Anda hanya perlu mengetahui url feed twitter anda untuk dimasukan ke gadjet feed pada blog anda (namun apa url feed twitter anda bisa dimasukan ke gadjet feed pada blogger) Ingin tau caranya ikuti tutorialnya di bawah ini:

Cara mengetahui ID twitter anda
1. Pertama anda perlu mengetahui ID twitter, caranya klik url ini: http://www.idfromuser.com/
2. Klik tombol Get ID untuk mengetahui ID twitter anda, akan muncul id twitter anda lalu simpan id tersebut.

Cara mengetahui Feed Twitter Anda
1. Time Line RSS Feed
Untuk time line RSS feed urlnya seperti dibawah ini. Anda hanya perlu mengganti Twitter username dengan user name twitter anda.

http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=Twitter username

misalnya punya user name punya saya jika dimasukan akan terlihat seperti ini:

http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=jurus2ngeblog

2. List RSS feed
Untuk list rss feed, urlnya seperti dibawah ini. Ganti Twitter username dengan username milik anda.

http://api.twitter.com/1//lists/Twitter username/statuses.atom

3. ID RSS feed
Untuk ID rss feed anda akan memerlukan id anda seperti langkah diatas. Untuk url feednya akan terlihat seperti dibawah ini. Anda hanya perlu mengganti feed_id dengan id milik anda. (untuk feednya anda bisa mengubah rss menjadi atom atau json)

http://twitter.com/statuses/user_timeline/feed_id.rss

Anda bisa membuka url feed twitter saya pada address bar seperti punya saya http://twitter.com/statuses/user_timeline/528376417.rss. Namun sayang setelah saya coba memasukan feed dari twitter pada gadjet blogger, tak ada yang berhasil, malah yang muncul tulisan "url tidak valid". Semoga artikel ini bermanfaat....

Read More