Cari Artikel

March 16, 2013

Cara Memasang Tombol Back to Top Auto Hide (Otomatis Tersembunyi) di Blog

Cukup lama juga ya saya tidak memposting artikel. Beberapa waktu yang lalu, waktu saya sempat terpakai untuk melakukan percobaan-percobaan pada widget serta mempermak blog saya agar nampak apik terlihat. Alhamdulillah kali ini saya bisa kembali membagi tips dan trik mempermak blog yang saya ketahui kepada anda warga blogger.
Cara Memasang Tombol Back to Top Auto Hide (Otomatis Tersembunyi) di Blog

Artikel kali ini saya akan membahas tentang bagaimana cara memasang tombol back to top auto hide (otomatis tersembunyi) di blog. Tombol ini, seperti namanya, akan membantu anda kembali ke bagian atas halaman tanpa perlu melakukan scrolling pada tombol scroll di samping kanan halaman. Kebanyakan tombol yang back to top yang anda lihat di blog, tidak memiliki fitur auto hide, dan akan selalu nampak meskipun halaman anda geser hingga ke bagian atas halaman. Widget yang akan saya bagi ini tentu saja berbeda dengan yang pernah anda lihat, dengan fitur autohide yang akan membuat tombol menjadi hilang secara otomatis saat halaman yang tampil berada pada bagian atas halaman. Dan pastinya dengan fitur back to top  auto hide ini anda tentu saja tidak akan terganggu dengan tombol back to top saat anda menggeser halaman ke bagian atas. Contoh tombol back to top auto hide ini dapat anda lihat di bagian samping kanan halaman blog ini.

Apakah anda pensaran? Baiklah, saya akan memberitahukan kepada anda bagaimana cara memasangnya di blog anda.

Cara Memasang Tombol Back to Top Auto Hide (Otomatis Tersembunyi) di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add Gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://lh3.googleusercontent.com/-lT4CsPKBvYg/UTeJBkstIaI/AAAAAAAAA68/n_Sd0Y0U9DA/s35/1362613905_Previous.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script> 

Step 3

Klik Save 

Sekarang coba anda perhatikan di bagian samping kanan blog anda, sudah terpasang tombol back to top bukan?
Bila anda ingin gambar tombol ikon yang lain, silahkan mengganti alamat URL yang di beri warna merah dengan URL gambar anda sendiri
Selamat mencoba!
Wassalam.

March 12, 2013

Cara Memasang Widget Chatbox (Buku Tamu) di Blog

Anda sudah mengetahui apa itu buku tamu di blog bukan? Biasanya, pengunjung yang datang dan jalan-jalan ke blog akan meninggalkan jejaknya di buku tamu tersebut. Selain itu, buku tamu ini juga bisa berfungi sebagai aplikasi chatting dengan pengunjung blog anda. Bila anda sering mengunjungi blog orang lain, maka anda akan melihat buku tamu ini melayang di samping blog atau bersembunyi di bagian samping blog tersebut. Tapi tahukah anda, bahwa ternyata ada banyak situs yang menyediakan widget chatbox ini secara gratis untuk dipasang di blog anda. Salah satunya adalah CBox. Berikut cara memasangnya di blog.

cara memasang widget chatbox (buku tamu) di blog

Cara Memasang di Blog

Step 1

Masuk ke situs http://www.cbox.ws/

Step 2

Klik Product > Sign Up Now 

Step 3

Isi data diri anda pada kolom Sign Up. Pada bagian Style pilih model chatbox yang anda inginkan (lihat modelnya pada bagian kanan/ yang diberi tanda hijau

cara memasang widget chatbox (buku tamu) di blog

Step 4

Anda akan di arahkan ke halaman control panel. Klik Look & Feel untuk memodifikasi tampilan CBox anda nantinya.
  • Layout options disini anda bisa mengatur tata letak CBox (Jangan lupa klik save)
  • Style presets mengubah model CBox
  • Colors and Fonts untuk mengubah warna dan huruf CBox
  • Edit CSS di halaman ini, bila anda mengetahui cara memasang kode CSS, anda dapat mengubah kode CSS CBox yang ada

Step 5

Bila anda telah selesai memodifikasinya, klik Publish! > Copy kode yang ada

Step 6

Letakkan kode tersebut ke dalam halaman widget HTML/JavaScript

Semoga bermanfaat.
Wassalam. 

March 11, 2013

Stop Plagiarisme!: Menghilangkan Fungsi Klik Kanan Tanpa Menggunakan JavaScript

Pada artikel saya sebelumnya, saya sudah membahas tentang bagaimana cara agar tidak bisa klik kanan di blog. Pada artikel tersebut, saya memberikan anda beberapa kode JavaScript yang harus anda pasang untuk menghilangkan fungsi klik kanan tersebut. Nah, pada artikel kali ini saya akan memberikan anda cara menghilangkan fungsi klik kanan tanpa menggunakan JavaScript. Cara ini tergolong cara yang sangat mudah, anda hanya perlu menambah beberapa kode ke dalam halaman HTML Template anda.
menghilangkan fungsi klik kanan tanpa menggunakan javascript

Cara Menghilangkan Fungsi Klik Kanan Tanpa Menggunakan JavaScript

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut ke dalam kode <body>
oncontextmenu=”return false;”
Sehingga kodenya akan menjadi seperti ini
<body oncontextmenu=”return false;” >

Step 3

Klik Save Template

Selesai! dan blog anda sudah tidak bisa di klik kanan lagi.
Semoga bermanfaat.
Wassalam.

Stop Plagiarisme!: Cara Agar Tidak Bisa Klik Kanan di Blog Anda

Setelah anda membaca beberapa artikel saya tentang memproteksi tulisan dengan berbagai cara yaitu dengan memberikan link sumber otomatis dan mensetting blog agar teks tidak bisa diseleksi, pada kesempatan kali ini saya akan memberikan tips lagi untuk anda agar artikel anda bisa lebih aman dan tidak "dicuri" oleh orang lain dengan mensetting blog anda agar tidak bisa di klik kanan. Dengan mensetting blog anda agar tidak bisa di klik kanan, tentunya akan membuat orang lain tidak bisa menyalin tulisan anda dan hanya sekedar membacanya saja. Dengan begitu, Tulisan anda akan tetap aman, tanpa harus membuat peringatan di bawah artikel agar orang lain mencantumkan link sumber saat menyalin tulisan anda. Adapun bila orang lain ingin menyalinnya, maka mereka mungkin akan kembali menulisnya sendiri dan sepertinya hal tersebut mungkin tidak akan mudah bagi sebagian orang.

cara agar tidak bisa klik kanan di blog

Cara Agar Tidak Bisa Klik Kanan di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add Gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<script language="javascript">
<!--//Matikan Klik Kanan
var message="Oops, maaf anda dilarang klik kanan!"; ///////////////////////////////////
function clickIE() {
if (document.all) {(message);return false;}}
function clickNS(e) {
if (document.layers||(document.getElementById&&!document.all))
{
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function("alert(message);return false") // --></script>
Catatan!
Silahkan anda mengganti teks yang berwarna merah dengan pesan anda sendiri.

Step 3

Klik Save

Semoga bermanfaat.
Wassalam. 

Stop Plagiarisme!: Cara Agar Teks Tidak bisa di Seleksi

Selain memberikan link sumber otomatis pada blog anda, anda juga bisa mencoba hal lain agar artikel anda tidak "dicuri" oleh orang lain, yaitu dengan mensetting blog agar teks artikel di blog anda tidak bisa diseleksi. Menurut saya, ini adalah salah satu tindakan yang cukup ekstrem karena bila blog anda adalah blog tutorial membuat blog misalnya, tentunya akan sulit bagi pengunjung yang datang untuk menerapkan tutorial anda (apalagi bila berhubungan dengan kode yang harus dipasang di halaman HTML) ke dalam blognya. Tapi bila anda merasa bahwa isi blog anda sangat bernilai, maka anda dapat mencoba cara ini untuk memproteksi tulisan di blog anda. Semua pilihan tentunya kembali kepada anda sebagai si pemilik blog.

cara agar teks tidak bisa di seleksi


Nah, bila anda tertarik untuk memasangnya di blog anda, silahkan anda simak langkah-langkahnya sebagai berikut.

Cara Agar Teks Tidak Bisa di Seleksi

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
 <script type="text/javascript">

//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>

Step 3

Klik Save Template

Selesai!. Sekarang tulisan anda sudah tidak bisa diseleksi lagi. 
Semoga bermanfaat.
Wassalam.

Stop Plagiarisme! : Pasang Link Sumber Otomatis di Blog Anda!

Anda mungkin akan sangat kesal saat ada orang lain yang menyalin tulisan anda dan menaruhnya di blognya tanpa mencantumkan sumber artikelnya. Masalah plagiarisme memang sudah menjadi masalah yang sangat rawan di dunia perbloggeran, terlebih lagi bila blog anda berisi tentang suatu informasi umum. Anda pun mungkin sudah lelah untuk memperingatkan blogger-blogger lain agar mencantumkan link sumber saat menyalin tulisan anda. Olehnya saya ingin memberikan anda suatu tips bagi anda yaitu dengan memasang link sumber otomatis di blog anda, agar saat seseorang menyalin tulisan anda dan menaruhnya di blognya, secara otomatis link sumber artikel anda terpasang bersama artikel yang disalin. Berikut adalah cara memasangnya, semoga bisa bermanfaat bagi anda.

pasang link sumber otomatis di blog

Memasang Link Sumber Otomatis di Blog 

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut di atas kode <body>
<script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Sumber :"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://the-kampoeng-blogger.googlecode.com/files/link-sumber-otomatis.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script>

Step 3

Klik Save Template

Semoga bermanfaat.
Wassalam.  

Membuat Pelangi Teks Link di Blog

Pernahkah anda melihat pelangi? Saya rasa semua orang di dunia ini pasti pernah melihatnya. Entah itu seusai hujan turun, di dekat air terjun atau bahkan saat anda menyiram bunga di pagi hari, ada pelangi kecil terbentuk di sana bukan?. Nah, lalu bagaimana dengan pelangi pada teks link anda di blog? pernahkah anda membayangkannya? Mungkin anda akan berpikir bagaimana mungkin ada pelangi di teks link ya kan? But I think, nothing is impossible kan? Dengan adanya kode CSS yang membuat berbagai macam efek di blog, membuat hal-hal yang tidak mungkin bisa saja menjadi mungkin di blog. Nah salah satunya adalah pelangi di teks link ini. Apakah anda penasaran? Lalu mengapa tidak mencobanya? Baiklah saya akan memberitahu anda beberapa langkah untuk memasangnya di blog anda dan menyulap teks link anda menjadi berwarna warni seperti pelangi di blog anda.

membuat pelangi text link di blog

Membuat Pelangi Teks Link di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<script src='http://the-kampoeng-blogger.googlecode.com/files/link-warna-warni.js'>

Step 3

Klik Save

Sekarang coba anda arahkan kursor ke link yang ada di blog anda, dan lihatlah si pelangi sudah menempel di teks link anda. Bagaimana? Menarik bukan?
Semoga bermanfaat.
Wassalam.

Cara Mengganti Warna Background Teks di Blog Saat di Blok (Selected Text)

Saat anda memblok sebuah teks, apa yang anda lihat? sebuah background warna hitam dengan teks berwarna putih bukan? Nah, bagaimana bila kita sedikit memodifikasinya? Bagaimana bila saat anda memblok sebuah teks anda dapatkan bahwa teks anda sekarang telah mengganti warna background menjadi warna biru dengan teks putih atau background pink? Menyenangkan bukan? Tentu saja! Meski anda mungkin bukan seseorang yang memperhatikan hal ini secara detail, akan tetapi bukankah akan lebih menarik jika blog anda semakin unik dan menarik? Bagaimana? apa anda tertarik untuk mencobanya? Baiklah, saya akan memberi tahu anda tips mudah untuk memasangnya di blog, silahkan anda simak bagaimana cara mengganti warna background teks di blog saat di blok (selected text).

cara mengganti warna background teksdi blog saat di blok (selected text)

Cara Mengganti Warna Background Teks di Blog Saat di Blok (Selected Text)

Step 1

Masuk ke halaman dashboard > Template > HTML 

Step 2

Letakkan kode berikut tepat di atas kode body {
::selection {
    background: #ffb7b7; /* Safari */
        color: #ffffff;
    }
::-moz-selection {
    background: #ffb7b7; /* Firefox */
        color: #ffffff;
    }
::-webkit-selection {
    background: #ffb7b7; /* webkit */
        color: #ffffff;
    }
Catatan!
  • Ganti kode yang diberi warna merah untuk mengganti warna background teks saat di blok (selected teks)
  • Ganti kode yang diberi warna biru untuk mengganti warna teks saat di blok (selected teks)

Step 3

Klik Save Template

Sekarang coba anda blok teks di blog anda, perhatikan apa yang terjadi. Cool right?!
Selamat mencoba!
Wassalam.

Cara Setting Time Zone (Format Waktu) di Blog

Bila anda adalah salah seorang dari blog pemula, anda mungkin akan menemukan kesulitan dalam mengatur time zone (format waktu) di blog anda karena default time zone di blog menunjukkan ke pacific time zone. Tentunya anda juga menginginkan waktu dan tanggal di blog anda (yang biasa terpampang di tanggal dan waktu posting artikel) sesuai dengan zona waktu di tempat anda. Meskipun ini adalah hal yang kecil, akan tetapi bagi sebagian orang, perubahan zona waktu di blog merupakan hal yang sangat crucial. Nah, kali ini, saya akan sedikit membantu anda dengan memberikan tips atau cara setting time zone (format waktu) di blog. Silahkan anda simak baik-baik cara setting time zone (format waktu) di blog berikut ini.

cara setting time zone (format waktu) di blog

Cara Setting Time Zone (Format Waktu) di Blog

Step 1

Masuk ke halaman Dashboard > Setting > Language and Formatting

Step 2

Pada menu Formatting  ubah Time Zone dengan zona waktu daerah anda. Zona waktu disini diambil di kota-kota besar seperti Jakarta (WIB), Makassar (WITA), dan Jayapura (WIT). Anda tinggal memilih salah satu di antara ketiganya.

Step 3

Klik Save Setting

Nah, sampai di sini zona waktu di blog anda sudah berubah, sekarang coba anda perhatikan di bagian tanggal dan waktu artikel anda di publish, sudah berubah bukan?
Semoga bermanfaat.
Wassalam. 

Memasang Widget Social Bookmark Dengan Efek Peel (Terkelupas) di Blog

Berbagai macam efek dan gambar yang diberikan pada sosial media di blog telah membuat blog menjadi menarik dan tidak membosankan saat dikunjungi. Beberapa  modifikasi bentuk sosial media di blog yang sudah kita bahas sebelumnya adalah sosial media yang berbentuk perangko dan sosial media 3D dengan efek berputar di blog. Selain dari itu masih ada lagi modifikasi bentuk dan efek sosial media yang lainnya yaitu widget sosial media dengan efek peel (terkelupas). Nah, kali ini kita memang akan membahas mengenai bagaimana cara memasang widget sosial media dengan efek peel (terkelupas) di blog. Sebagaimana modifikasi bentuk dan efek sosial media yang lainnya, modifikasi yang satu ini juga tidak kalah bagusnya dengan modifikasi yang lain. Anda penasaran dengan bentuk sosial media ini? Anda bingung tentang bagaimana memasangnya di blog anda? Tenang saja, saya akan memberi tahu anda satu per satu bagaimana cara memasang widget ini di blog dalam 3 langkah saja. Silahkan anda simak baik-baik cara memasang widget sosial media dengan efek peel (terkelupas) di blog dengan seksama.

memasang widget sosial media dengan efek peel (terkelupas) di blog

Memasang Widget Sosial Media Dengan Efek Peel di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
 <!-- AWAL KODE DELICIOUS -->
<img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGDqvOi6_I/AAAAAAAABwU/V1wp5He0Va8/s400/DELICIOUS1.png'" src="http://3.bp.blogspot.com/_7wsQzULWIwo/SqGDq_yQIKI/AAAAAAAABwc/oFKdjffGT7Q/s400/DELICIOUS2.png" onmouseout="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGDq_yQIKI/AAAAAAAABwc/oFKdjffGT7Q/s400/DELICIOUS2.png'"/>
<!-- AKHIR KODE DELICIOUS -->
<!-- AWAL KODE RSS -->
<img width="" height="" onmouseover="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGvLkLbZI/AAAAAAAAByU/UAY0e3H8skU/s400/RSS1.png'" src="http://1.bp.blogspot.com/_7wsQzULWIwo/SqGG68DCUFI/AAAAAAAAByk/eqXDid_DUZY/s400/RSS2.png" onmouseout="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGG68DCUFI/AAAAAAAAByk/eqXDid_DUZY/s400/RSS2.png'"/>
<!-- AKHIR KODE RSS -->
<!-- AWAL KODE YOUTUBE -->
<img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGuULHk1I/AAAAAAAAByE/FbPpFQBC6nA/s400/YOUTUBE1.png'" src="http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGu3pt6nI/AAAAAAAAByM/QyIAvpL6N9Q/s400/YOUTUBE2.png" onmouseout="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGu3pt6nI/AAAAAAAAByM/QyIAvpL6N9Q/s400/YOUTUBE2.png'"/>
<!-- AKHIR KODE YOUTUBE -->
<!-- AWAL KODE YAHOO -->
<img width="" height="" onmouseover="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGttGnNZI/AAAAAAAABx0/q5eZRUfgfNc/s400/YAHOO1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGtycf68I/AAAAAAAABx8/TOF9DuD7n10/s400/YAHOO2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGtycf68I/AAAAAAAABx8/TOF9DuD7n10/s400/YAHOO2.png'"/>
<!-- AKHIR KODE YAHOO -->
<!-- AWAL KODE TWITTER -->
<img width="" height="" onmouseover="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGZCTqMOI/AAAAAAAABxk/eAIBpRqgJiE/s400/TWITTER1.png'" src="http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGZlcpt1I/AAAAAAAABxs/KUZHX71eimo/s400/TWITTER2.png" onmouseout="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGZlcpt1I/AAAAAAAABxs/KUZHX71eimo/s400/TWITTER2.png'"/>
<!-- AKHIR KODE TWITTER -->
<!-- AWAL KODE TECHNORATI -->
<img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGYWGbF8I/AAAAAAAABxU/o5IHL_Ciwss/s400/TECHNORATI1.png'" src="http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGYzi6R6I/AAAAAAAABxc/4Ib3ueGU4Oc/s400/TECHNORATI2.png" onmouseout="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGYzi6R6I/AAAAAAAABxc/4Ib3ueGU4Oc/s400/TECHNORATI2.png'"/>
<!-- TECHNORATI AKHIR KODE -->
<!-- AWAL KODE REDDIT -->
<img width="" height="" onmouseover="this.src='http://1.bp.blogspot.com/_7wsQzULWIwo/SqGGJWOkYZI/AAAAAAAABxE/_cOecHZDRsY/s400/REDDIT1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGYGTSWrI/AAAAAAAABxM/49lKyrQBSoA/s400/REDDIT2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGYGTSWrI/AAAAAAAABxM/49lKyrQBSoA/s400/REDDIT2.png'"/>
<!-- AKHIR KODE REDDIT -->
<!-- AWAL KODE FACEBOOK -->
<img width="" height="" onmouseover="this.src='http://4.bp.blogspot.com/_7wsQzULWIwo/SqGGIS5ncrI/AAAAAAAABw0/LaZwhbVchUQ/s400/FACEBOOK1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGI-67dFI/AAAAAAAABw8/60pD0Cixu3Q/s400/FACEBOOK2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGI-67dFI/AAAAAAAABw8/60pD0Cixu3Q/s400/FACEBOOK2.png'"/>
<!-- AKHIR KODE FACEBOOK -->
<!-- AWAL KODE DIGG -->
<img width="" height="" onmouseover="this.src='http://3.bp.blogspot.com/_7wsQzULWIwo/SqGGHk_dvrI/AAAAAAAABwk/kmAe1jCxrGA/s400/DIGG1.png'" src="http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGII4WnFI/AAAAAAAABws/F_7d2L5yFfA/s400/DIGG2.png" onmouseout="this.src='http://2.bp.blogspot.com/_7wsQzULWIwo/SqGGII4WnFI/AAAAAAAABws/F_7d2L5yFfA/s400/DIGG2.png'"/>
<!-- AKHIR KODE DIGG -->
Catatan !
Anda dapat mengubah lebar dan tinggi dari masing-masing ikon  dengan memasukkan nilai tinggi dan lebar ikon yang anda inginkan pada kode ini width="" height="" contohnya : width="40px" height="40px"

Step 3

Klik Save 

Selesai! dan sekarang anda lihat hasilnya di blog anda. Bagaimana? menarik bukan?
Selamat mencoba!
Wassalam.

March 10, 2013

Memasang Widget Ikon Sosial Media Bentuk Perangko di Blog

Setelah membahas tentang cara memasang ikon sosial 3D dengan efek berputar, kali ini kembali akan saya bahas tentang memasang bentuk ikon sosial media yang lain, yaitu memasang ikon sosial media bentuk perangko di blog. Ikon ini sangat cocok bagi anda yang hobi dengan filateli dan memiliki blog dengan latar belakang seperti itu. Bila anda tertarik dengan ikon sosial media yang satu ini, maka silahkan anda menyimak cara memasang ikon sosial media bentuk perangko di blog berikut ini.

memasang widget ikon sosial media bentuk perangko di blog

Memasang Ikon Sosiala Media Bentuk Perangko di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<style>
a:hover {background-color: transparent;opacity:0.6;}
</style>

<a title="Rss Feed" href="http://feeds.feedburner.com/thekampoengblogger" rel="nofollow" target="_blank">
<img border="0" src="http://3.bp.blogspot.com/-7xLpiOL7LV4/T1dZNM3ohWI/AAAAAAAAF50/eAtpntBl00k/s1600/rss_48x48.png" /></a>

<a title="Subscribe Via Email Rss" href="http://feedburner.google.com/fb/a/mailverify?uri=thekampoengblogger&loc=en_US" rel="nofollow" target="_blank">
<img border="0" src="http://3.bp.blogspot.com/-RZ_nVthHme8/T1dZK5PsCwI/AAAAAAAAF5o/FCKub8KoUWQ/s1600/mailrss_48x48.png" /></a>

<a title="Find Us On Facebook" href="http://facebook.com/thekampoengblogger" rel="nofollow" target="_blank">
<img border="0" src="http://3.bp.blogspot.com/-PTB2YQAQpcI/T1dZJ-qJIfI/AAAAAAAAF5c/-NcV2BAiWec/s1600/facebook_48x48.png" /></a>

<a title="Follow On Twitter" href="http://twitter.com/thekampoengblogger" rel="nofollow" target="_blank">
<img border="0" src="http://2.bp.blogspot.com/-_NF0RIdyat4/T1dZNqD06qI/AAAAAAAAF54/DEOr2Sx0hAU/s1600/twitter_48x48.png" /></a>

<a title="Add To Circles" href="https://plus.google.com/b/108200902911276741668/108200902911276741668/posts" rel="nofollow" target="_blank">
<img border="0" src="http://1.bp.blogspot.com/-REgYqi5zpsM/T1dZKferBMI/AAAAAAAAF5g/PXfik8LGPZY/s1600/googleplus_48x48.png" /></a>
Catatan!
Ganti semua URL yang diberi warna merah dengan URL Sosial media dan Feed anda sendiri.


Step 3

Klik Save

Selesai!
Salam filateli!
Wassalam.

Memasang Ikon Sosial Media 3D Dengan Efek Berputar di Blog

Sosial media, selain sebagai ajang silaturrahmi dengan teman-teman, juga bisa digunakan sebagai tempat untuk berbagi tulisan misalnya tulisan kita di blog. Jangan pernah menyepelekan peran sosial media dalam promosi blog anda, karena dengan membagikan artikel kita di berbagai sosial media, teman-teman kita pun akan tertarik untuk membaca tulisan-tulisan kita di blog, sehingga dengan sendirinya akan menaikkan trafik pengunjung di blog kita. Terlebih lagi, bila ternyata teman kita juga membagikan artikel kita ke teman-temannya yang lain, tentunya ini akan sangat menguntungkan bukan?

ikon sosial media 3D dengan efek berputar di blog



Ikon sosial media yang terpasang di blog, tidak selalu hanya berupa ikon statis. Kita pun dapat memodifikasinya hingga terlihat menarik saat di pasang di blog. Salah satu dari modifikasi ikon sosial media ini adalah dengan memasang ikon sosial media 3D dengan efek berputar di blog. Bila anda penasaran dengan cara  memasangnya, maka sebaiknya anda simak caranya berikut ini.

Memasang Ikon Sosial Media 3D Dengan Efek Berputar di Blog

Step 1

Masuk ke halaman dashboard > Layout >Add Gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<style>
#social a:hover {
background-color: transparent;
opacity:0.7;
}
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center>
<div id="social">
<!--Awal Kode RSS -->
<a title="Grab Our Rss Feed" href="URL-FEED-Anda" target="_blank">
<img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Rss Icon-->

<!--Email RSS-->
<a rel="nofollow" title="Get Free Updates Via Email" href="URL-RSS-EMAIL-Anda" target="_blank">
<img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Kode Email Rss Icon-->

<!--Google+-->
<a title="Follow Us On Google+" rel="nofollow" href="URL-GOOGLE-PLUS-Anda" target="_blank">
<img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></a>
<!--Akhir Kode Google+-->

<!--Awal Kode Pinterest-->
<a title="Follow Our Pins" rel="nofollow" href="URL-PINTEREST-Anda" target="_blank">
<img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>
<!--Akhir Kode Pinterest-->

<!--Awal Kode Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="URL-FACEBOOK-Anda" target="_blank">
<img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Kode Facebook-->

<!--Awal Kode Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="URL-TWITTER-Anda" target="_blank">
<img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--Akhir Kode Twitter-->
</div>
<br/>
<!--Awal Kode Tombol Feed Count-->
<a href="URL-FEEDBURNER-Anda" target="_blank">
<img alt="The Kampoeng Blogger" src="http://feeds.feedburner.com/~fc/thekampoengblogger?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
<!--Akhir Kode Tombol Feed Count-->
</center>
Catatan!
Silahkan anda mengganti kode yang diberi warna merah dengan URL sosial media dan URL Feed anda sendiri.

Step 3

Klik Save

Semoga bermanfaat.
Wassalam.

Memasang Twitter Burung Terbang Berbagai Warna di Blog

Twitter burung terbang berwarna biru muda di blog mungkin sudah biasa anda lihat di blog, akan tetapi twitter burung terbang dengan warna yang berbeda-beda, pastinya sangat jarang anda lihat bukan? Nah, pada kesempatan kali ini saya akan membahas tentang bagaimana memasang twitter burung terbang berbagai warna di blog. Memasang twitter burung terbang dalam beberapa warna ini tentu saja akan membuat blog anda semakin menarik, karena warna dari burung twitter menjadi serasi dengan blog anda. Apakah anda penasaran mencobanya? Silahkan simak caranya berikut ini.

twitter burung terbang berbagai warna di blog

Memasang Twitter Burung Terbang di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript
<!-- floating twitter Bird -->
<script type="text/javascript" src="http://the-kampoeng-blogger.googlecode.com/files/twitterburungterbang.js"></script>
<script type="text/javascript">
var birdSprite="https://lh6.googleusercontent.com/-Q_YiryuoNrs/UTxp_8RaGgI/AAAAAAAABHc/-XdIxChog2E/s320/burung%2520twitter%2520terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://thekampoengblogger.blogspot.com/";
tripleflapInit();
</script>

 Step 3

Klik Save

Catatan!
  • Ganti username dengan nama user name twitter anda
  • Bila anda ingin mengubah warna burung, ganti URL Gambar yang diberi warna merah dengan URL Gambar berikut.

Warna Putih

https://lh6.googleusercontent.com/-qY90Mu_neWU/UTxp-uKHb_I/AAAAAAAABHU/slHgZ3WwjF4/s320/burung%2520putih.png

Warna Merah

https://lh3.googleusercontent.com/-9r3gE3lcwSk/UTxp91ob_qI/AAAAAAAABHM/SHTPYrX4pMI/s320/burung%2520merah.png

Warna Kuning

https://lh5.googleusercontent.com/-jO7zCa6LY8E/UTxp8vsGQfI/AAAAAAAABHE/EU5dQtJiNP4/s320/burung%2520kuning.png

Warna Hitam

https://lh4.googleusercontent.com/-mAWRjsLKkI0/UTxp7cqOBiI/AAAAAAAABG8/d4ecFVzhDm8/s320/burung%2520hitam.png

Warna Hijau

https://lh5.googleusercontent.com/-XilW_O9XAK8/UTxp65MpvPI/AAAAAAAABG0/V5-wnLJmu-c/s320/burung%2520hijau.png

Warna Cokelat

https://lh5.googleusercontent.com/-JTc8qLHbVDg/UTxp6PLcc_I/AAAAAAAABGs/tbs_FQTMOrI/s320/Burung%2520coklat.png

Warna Biru Tua

https://lh5.googleusercontent.com/-STcSrNC-HrY/UTxp4aNfXtI/AAAAAAAABGk/m-aPspnlHoQ/s320/Burung%2520Biru%2520tua.png


Selamat mencoba!
Wassalam. 

Membuat Dropcap (Huruf Besar) Pada Postingan Artikel di Blog

Setelah sempat absen beberapa hari, alhamdulillah akhirnya hari ini bisa posting lagi. Nah, pada kesempatan kali ini, saya akan mencoba membahas tentang bagaimana cara membuat dropcap (huruf besar) pada postingan artikel di blog.

Apakah anda tahu apa itu dropcap? Bila anda sering mengoperasikan microsoft word saat mengetik tugas-tugas anda, mungkin anda akan mempunya sedikit bayangan tentang dropcap ini. Dropcap adalah huruf besar yang biasanya terdapat pada awal kata di dalam sebuah artikel. Biasanya dropcap dipakai untuk memulai sebuah artikel baru dalam sebuah tulisan. Bila anda masih belum mengerti apa itu dropcap, silahkan anda lihat gambar di bawah ini.

membuat dropcap (huruf besar) pada postingan artikel di blog

Membuat Dropcap (huruf besar) Pada Postingan Artikel di Blog

Sebelum anda melakukan perubahan pada halaman HTML Template anda, sebaiknya anda mem-backup template anda terlebih dahulu.

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode  ]]></b:skin>
/* Kode Dropcap by thekampoengblogger.blogspot.com
----------------------------------------------- */
.dropcap {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:Arial;
font-size:150px;
Catatan !
Untuk memodifikasi dropcap anda, silahkan anda mengubah settingan berikut sesuai dengan keinginan anda.
  • Ganti kode warna #000000 untuk mengganti warna huruf (untuk mencari kode warna yang diinginkan lihat di halaman kode warna)
  • Ganti kode warna #ffffff untuk mengganti background huruf
  • Ganti huruf Arial dengan mengetikkan nama huruf yang anda inginkan (baca bagaimana menambah huruf di blog)

Step 3

Klik Save Template

Step 4

Saat anda akan memulai sebuah tulisan, masukkan kode berikut ke halaman HTML (di samping compose).
<span class="dropcap">huruf awal</span>
Ganti huruf awal dengan huruf awal tulisan anda.
Contohnya : <span class="dropcap">A</span>

Selesai!
Semoga bermanfaat.
Wassalam.

Memilih dan Menambah Model (Style) Huruf (Font) di Blog

Dalam membuat sebuah artikel, atau judul atau apa saja yang berhubungan dengan huruf-huruf, memilih ukuran dan model huruf sangatlah penting, karena ini akan mempengaruhi minat baca dari pengunjung yang datang ke blog anda. Bayangkan saja bila artikel anda dipenuhi dengan huruf yang meliuk-liuk, atau semua huruf di tebalkan, tentunya ini akan membuat orang yang membaca artikel tersebut sakit mata saat melihatnya. Terlebih lagi bila ternyata artikel anda adalah artikel yang berupa paragraf, dijamin, pengunjung anda mungkin akan segera menekan tombol close pada sudut bar browsernya. Anda tidak ingin blog anda seperti itu kan? Nah, bila anda ingin mengetahui seperti apa bentuk font yang baik, sekedar tips, sering-seringlah blogwalking ke blog orang lain, lihatlah bentuk fontnya, apakah artikelnya menyenangkan untuk anda baca atau tidak, karena artikel yang baik, bukan hanya sekedar penuh style dan warna warni, tapi syarat utamanya adalah enak dipandang mata.

memilih dan menambah model (style) huruf (font) di blog


Lalu, bagaimana bila anda ingin mengubah huruf di blog anda namun ternyata huruf yang tersedia hanya terbatas? Nah, kali ini saya akan sedikit membantu anda mengenai hal ini. Saya akan membahas mengenai bagaimana cara menambah dan mengganti model (style) huruf (font) di blog. Silahkan anda simak caranya berikut ini.

Memilih dan Menambah Model (Style) Huruf (Font) di Blog

Memilih Jenis Huruf (Font)

Step 1

Bukalah situs http://www.google.com/webfonts/#

Step 2

Utak-atiklah ukuran hurufnya untuk melihat huruf yang akan anda pilih dalam berbagai ukuran.
menambah dan mengganti model (style) huruf (font) di blog

Step 3

Bila jumlah font yang akan anda gunakan terlalu banyak, anda dapat memilah-milahnya lagi dengan cara mengutak-atik menu filter yang ada pada sidebar kiri halaman.  Aturlah sesuai keinginan anda jenis hurufnya (type font), ketebalannya (thickness), kemiringannya (slant) dan lebarnya (width).

Step 4

Bila anda telah selesai memilih huruf yang anda inginkan, klik Add to collection. Anda dapat memilih lebih dari satu huruf.

Step 5

Klik Use

Step 6

Anda akan diarahkan ke halaman lain. Silahkan centang jenis huruf (ketebalan dan kemiringan) sesuai yang anda inginkan.
menambah dan mengganti model (style) huruf (font) di blog

Catatan!
Bijaklah dalam memilih! Semakin banyak jenis huruf yang anda pilih maka semakin loading blog anda!

Step 7

Copy kode yang diberikan yang akan di pasang di blog anda nantinya.

Menambah Font di Blog

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode yang sudah anda copy tadi di atas kode <![CDATA[/*

Step 3

Berikan kode / sebelum tanda penutup pada kode font tersebut.
Contohnya :
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'/>

Step 4

Klik Save Template

Selesai!
Sampai tahap ini font anda sudah bertambah di blog anda. Bila anda ingin mengganti semua font anda  maka silahkan membaca tutorial berikutnya.
Wassalam.