Amieyaku: Mei 2016

Pernah kebayang nggak sih rasa envy menerpa pas kita lihat blog orang lain itu cantik-cantik dan bagus gitu….pokoknya good looking banget lah dibandingkan dengan blog kita sendiri. Dihari sabtu, 16 April 2016 kemarin nch yang kebetulan lagi cuti bulanan sehingga break dulu ngajinya langsung saya agendain untuk main ke matraman untuk belajar android dan java ke teman kampus. Karena saya sendiri belum pernah main dan bertemu lagi pasca liburan semester 1 jadi kami janjian di Toko Buku Gramedia Matraman. Rumah dia memang sekitar Gramedia. Bada Ashar saya tiba di Gramedia dan memang sudah lama juga nggak main kesitu lagi, akhirnya nunggu di dalam Gramedia dan langsung menuju ke Lt.2 dimana di lantai tersebut tentang buku-buku komputer. Tadinya sih niatnya mau beli buku panduan membuat wordpress karena memang sama sekali belum pernah menyentuh wordpress. Dari awal sudah terbiasa menggunakan Blogger sedangkan saran dari temen kalau memang serius menjadi seorang blogger pakenya wordpress dan pake domain sendiri (semoga saja cepet terealisasi punya domain sendiri. Allahumma Aamiin) hehehe…..

Pas berada di rak buku-buku tentang cms dan blog ada yang menarik hati buku mengenai Trik Lengkap Mempercantik Blogger-Blogspot penerbit Elex Media. Berhubung dari dulu memang sudah terbiasa belajar komputer dengan penerbit Elex Media (sebenarnya sih paling suka Informatika karena lebih detail isinya menurut saya, kalau Elex Media lebih ke tutorial dan pembahasan materinya sedikit. Nggak beda jauh sama Maxikom Cuma kalau maxikom sedikit susah tutorialnya). Sempat dilemma juga sih sebenarnya saat itu karena pengen nyoba wordpress dan setelah saya pertimbangkan kembali, kenapa nggak make over blog yang sudah ada aja…waktu baca-baca buku samplenya itu nggak ribet dan mudah dipahami. Akhirnya setelah teman saya datang juga langsung bayar tuh buku di kasir dan 1minggunya baru sempat saya praktikan.

Dalam buku Trik Lengkap Mempercantik Blogger-Blogspot penulisnya adalah lea Willsen. Dan didalam buku tersebut free CD yang isinya tutorial dan codingnya (jadi tinggal copas2 aja nch….lumayan hemat waktu dan nggak bikin jari keriting. Heheh) selain itu juga terdapat e-Book dan bonus tutorial. Buku tersebut terdapat 30 Bab namun saya hanya mempraktikan tidak ada setengahnya. Hanya 10 Bab dan yang 1 Bab masih debug yaitu Audio online Player T _ T (udah mabok utak-atiknya jadi dibiarkan sajalah….next time kalo lagi mood).

Yang saya gunakan untuk mempercantik Blogger saya adalah :

1. Tab Browser Berjalan (BAB 1)

2. Auto Hidden Navbar (BAB 2)

3. Link Bergerak (BAB 9)

4. Link Warna-Warni (BAB 10)

5. Print & Save to PDF (BAB 11)

6. Vote Button (BAB 13)

7. FB Like Button (BAB 15)

8. Twitter Tweet Button (BAB 16)

9. Maskot Terbang Twitter (BAB 17)

10. Kolom Komentar Fb (BAB 23)

11. Cursor Berekor (Tutorial Bonus)

12. Dissable Right Click (Tutorial Bonus)

13. Scroll pada Arsip Blog (Tutorial Bonus)

14. Scroll pada Post (Tutorial Bonus)

Bagi saya itu semua sudah cukup meski untuk tampilan background saya masih mengandalkan yang dari Blogger karena belum menguasai photoshop tapi ke-14 bab tadi sudah cukup sedikit cantikan untuk Blogger saya.

1. TAB BROWSER BERJALAN DAN KOLOM KOMENTAR FB

Maka nanti akan muncul tampilan

Setelah itu klik satu kali pada bagian dalam kolom-kolom yang berisi kode dan Ctrl+F untuk mencari <head> Enter

Ketik kode tepat dibawah <head>

<script type='text/javascript'>

//<![CDATA[

msg = "Assalamu’alaikum…..";

msg = "Selamat Datang di Amieyaku Me…." + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",150);

}

scrollMSG();

//]]>

</script>

(KODE UNTUK BROWSER BERJALAN)

<meta content='Username FB Anda' property='fb:admins'/>
<meta content='App ID Anda' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

NB: untuk mengetahui Username FB bisa kita lihat dengan mengunjungi kronologi fb sendiri. Username terletak setelah http://www.facebook.com/******

***** itulah username fb kita.

Cari kode lagi <class=’comments’> ketik kode di bawahnya

<div class='js-default-tab comments-tab' id='fb-comments' title='Beri komentar dengan akun Facebook Anda'>

<fb:comments-count expr:href='data:post.url'/> Komentar Facebook

</div>

<div class='comments-tab' id='blogger-comments' title='Beri komentar dengan akun Blogger Anda'>

<data:post.numComments/> Komentar Blogger

</div>

<div class='clear'/>

</div>

<div class='comments-page' id='fb-comments-page'>

<b:if cond='data:blog.pageType == "item"'>

<div id='fb-root'/>

<fb:comments expr:href='data:post.url' num_posts='10' width='640'/>

</b:if>

</div>

<div class='comments comments-page' id='blogger-comments-page'>

(KODE KOLOM KOMENTAR FB)

Klik Simpan Template.

2. AUTO HIDDEN NAVBAR

Edit HTML – Ctrl+F ketik body { lalu ketik kode tepat diatas body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)} #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Klik Simpan Template

3. LINK BERGERAK DAN LINK WARNA-WARNI

Edit HTML – Ctrl+F ketik </head>

Ketik kode dibawah ini tepat di atas </head>

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

<script type='text/javascript'>

$(document).ready(function() {

$('a').hover(function() { //mouse in

$(this).animate({ marginLeft: '12px' }, 400);

}, function() { //mouse out

$(this).animate({ marginLeft: 0 }, 400);

});

});</script>

<script src='http://tobadak.googlecode.com/files/linkberkedip.js'/>

Klik Simpan Template.

4. PRINT & SAVE TO PDF, VOTE BUTTON, TWITTER TWEET BUTTON

Edit HTML – Ctrl+F ketik <data:post.body/>

(akan ada tiga hasil pencarian yang dapat kita temukan dan yang kita perlukan adalah yang posisi kedua sehingga kita harus mengEnter dua kali agar kita mendapatkan hasil pencarian yang berada di posisi tengah yaitu kode kedua).

Ketik kode diatas <data:post.body/>

<b:if cond='data:blog.pageType == "index"'><a class='printfriendly' expr:href='data:post.url + "?pfstyle=wp"' style='margin-right:1em; color:#6D9F00; text-decoration:none;' title='Klik di sini untuk print atau menyimpan halaman dalam bentuk PDF'><img alt='Print Friendly and PDF' src='http://cdn.printfriendly.com/pf-button-both.gif' style='border:none;'/></a><b:else/><b:if cond='data:blog.pageType == "archive"'><a class='printfriendly' expr:href='data:post.url + "?pfstyle=wp"' style=' margin-right:1em; color:#6D9F00; text-decoration:none;' title='Klik di sini untuk print atau menyimpan halaman dalam bentuk PDF'><img alt='Print Friendly and PDF' src='http://cdn.printfriendly.com/pf-button-both.gif' style='border:none;'/></a><b:else/><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print(); return false;' style=' color:#6D9F00; text-decoration:none;' title='Klik di sini untuk print atau menyimpan halaman dalam bentuk PDF'><img alt='Print Friendly and PDF' src='http://cdn.printfriendly.com/pf-button-both.gif' style='border:none;'/></a></b:if></b:if>

(KODE UNTUK PRINT&SAVE TO PDF)

<script type="text/javascript" src="//w.likebtn.com/js/w/widget.js" async="async"></script>

(KODE VOTE BUTTON)

<b:if cond='data:blog.pageType == "item"'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='akun Twitter Anda' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></b:if>

(KODE TWITTER TWEET BUTTON)

Klik Simpan Template.

5. FB LIKE BUTTON

Edit HTML – Ctrl+F ketik <body expr:class='"loading" + data:blog.mobileClass'> Enter

Ketik kode tepat dibawahnya

<div id='fb-root'/>

<script>//<![CDATA[

(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 = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=1567506953470720";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

//]]>

</script>

Cari lagi kode <data:post.body/> pastikan kode yang kedua yaitu yang berada ditengah dan ketik kode dibawahnya

<div class='fb-like' data-layout='button_count' data-send='false'

data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>

Klik Simpan Template.

6. MASKOT TERBANG TWITTER

Kunjungi Tata Letak

Klik Tambahkan Gadget pada salah satu petak yang tersedia. Pilih HTML/JavaScript

Ketik kode

<script type="text/javascript" src=" http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="URL warna maskot"; 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/akun Twitter Anda";tripleflapInit();</script>

Simpan.

Untuk beberapa pilihan warna maskot twitter terbang adalah seperti tabel berikut :

Warna:	URL:
Merah	http://i1013.photobucket.com/albums/af252/sleman234/red.png
Kuning	http://i1013.photobucket.com/albums/af252/sleman234/yellow.png
Hijau	http://i1013.photobucket.com/albums/af252/sleman234/Green.png
Biru	http://i1013.photobucket.com/albums/af252/sleman234/Blue.png
Ungu	http://i1013.photobucket.com/albums/af252/sleman234/purple.png
Cokelat	http://i1013.photobucket.com/albums/af252/sleman234/brown.png
Hitam	http://i1013.photobucket.com/albums/af252/sleman234/black.png
Putih	http://i1013.photobucket.com/albums/af252/sleman234/white.png
Orisinal	http://i1013.photobucket.com/albums/af252/sleman234/bluetwit.png

7. CURSOR BEREKOR

Kunjungi Tata Letak. Klik Tambahkan Gadget pilih HTML/JavaScript. Kemudian ketik coding dibawah ini

Simpan.

8. DISABLE RIGHT CLICK

Kunjungi Tata Letak pilih Tambahkan Gadget dan klik HTML/JavaScript dan ketik coding berikut

<script language="JavaScript">

var message="Maaf, fungsi klik kanan tidak bekerja!";

function clickIE4(){

if (event.button==2){

alert(message);

return false;

}

function clickNS4(e){

if (document.layers||document.getElementById&&!document.all){

if (e.which==2||e.which==3){

alert(message);

return false;

}

if (document.layers){

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown=clickNS4;

}

else if (document.all&&!document.getElementById){

document.onmousedown=clickIE4;

}

document.oncontextmenu=new Function("alert(message);return false")

</script>

<script type="text/javascript">

<!--

//Disable select-text script (IE4+, NS6+)

///////////////////////////////////

function disableselect(e){

return false

}

function reEnable(){

return true

}

//if IE4+

document.onselectstart=new Function ("return false")

//if NS6

if (window.sidebar){

document.onmousedown=disableselect

document.onclick=reEnable

}

// -->

</script>

<script language='javascript'>

function keypressed() {;return false;}document.onkeydown=keypressed;

// End --></script>

Simpan.

9. SCROLL PADA ARSIP BLOG

Edit HTML - Ctrl+F ketik <div id=’ArchiveList’> kemudian ketik coding berikut tepat diatasnya

<div class='widget-content' style='overflow:auto; height:300px'>

Gulir mouse ke bawah hingga terlihat </div> dan tambahkan </div> dibawah atau diatasnya karena itu untuk menutup div pada coding yang kita ketikkan. Lalu Simpan Template.

10. SCROLL PADA POST

Edit HTML - Ctrl+F ketik post-body { kemudian ketik coding berikut dibawahnya

overflow:auto;

height:1000px;

Simpan Template

Selesai....

Itulah cara mempercantik Blogger-Blogspot. Silahkan mencoba dan semoga bermanfat……

^ _ *

Referensi :

Willsen, Lea. 2014. Trik Lengkap Mempercantik Blogger-Blogspot. Jakarta : Elex Media Komputindo

Amieyaku

Kamis, 26 Mei 2016

Tanpa Cinta

Senin, 02 Mei 2016

Cara Mudah Mempercantik Blogger-Blogspot

Arsip Blog