12 Script dan Widget Penting Bagi Blogger

Artikel Penting | Catatan Pengalaman | Tulisan Bebas - Halo sobat semua, khususnya para blogger mania. Siapa sih yang tak ingin mempunyai blog pribadi yang bagus dan menarik. Menarik sudah pasti pertama kali dinilai dari artikel yang bisa memberikan ilmu yang berguna. Selain itu aspek yang menjadi penilaian juga terkait tampilan dan fungsi yang powerful sebagai suatu blog. Walaupun blog pribadi atau personal, tidak ada salahnya kita memberikan fungsi yang lebih layaknya blog atau website yang sudah profesional. Saya juga sebagai seorang blogger yang masih dibilang baru, tidak akan bisa tanpa bantuan dari sesama blogger sekalian yang sudah mau berbagi informasi dan tips seputar blogging ini. Pada artikel ini, saya akan memberikan beberapa tool atau script yang saya pakai dalam blog Debrian Ruhut Blog ini. Mungkin ada beberapa sobat blogger yang bertanya-tanya, bagaimana membuat kotak search engine seperti tampilan google search. Atau ada yang bertanya bagaimana cara membuat kotak chat box yang ada di sebelah kanan blog ini. Semua akan saya bahas di artikel ini. Semoga bisa membantu sobat sekalian sekaligus menambah minat dan kesukaan dalam hal blogging. Ingat, hal pertama yang harus lebih diperhatikan adalah isi dari blog itu sendiri.

1. Theme Blogger

Tema yang saya ambil bernama Revolution Crunch Wordpress Theme buatan Brian Gardner yang sudah di convert menjadi versi blogger oleh bloganol.com. Tema ini terbilang cukup ringan namun dengan tampilan yang profesional. Saya sudah membuktikan sendiri.

2. Read More
Pada tampilan dasar, fungsi readmore tidak ada. Jadi semua posting yang saya post pasti ditampilkan menyeluruh. Saya memilih auto readmore dengan tampilan thumbnail agar pembaca bisa melihat gambar ilustrasi terkait posting di halaman depan. Gambar thumbnails ini akan otomatis diambil dari gambar pertama yang ada di artikel. Menarik bukan?. Sobat bisa melihat artikelnya di http://naughtyric.blogspot.com/2011/08/membuat-auto-readmore-di-blogspot.html

3. Fungsi Random Posts
Fungsi ini menurut saya sangat menarik, dan tidak disediakan secara khusus oleh blogger. Dengan adanya fungsi ini, maka pembaca bisa melihat artikel yang diload secara random pada saat itu. Fungsi ini seperti dalam google "Are you lucky?" atau saya lagi beruntung. hehe. Sobat bisa baca di artikel http://www.komputerseo.com/2010/04/cara-membuat-random-post-widget.html. Satu hal yang saya tekankan bahwa script random post versi ini tidak mengambil javascript dari luar misal yahoo atau google. Hal ini penting agar, script yang kita gunakan tidak menjadi ketergantungan dengan pihak luar. :)

4. Shout Box di Sebelah Kanan
Blogging kurang lengkap rasanya tanpa fungsi chat box ini. Selain sebagai media komunikasi terkhusus bagi yang malas menaruh komentar di artikel, fungsi chat box juga bisa sebagai media chat yang praktis dan real time. Artikel yang bisa di baca untuk membuat fungsi ini ada di http://cafeilmu-yangyang.blogspot.com/2013/03/cara-membuat-buku-tamu-guestbook-auto.html

5. Menambahkan Fav Icon
Walau sederhana, tapi ini adalah bagian yang saya suka. Dengan memasang fav icon, kita bisa menunjukkan ciri khas blog kita. Sobat bisa membuatnya hanya dengan menaruh script ini di antara <head> ... </head>
<link href='http://www.debrianart.co.cc/wp-content/themes/alltuts/images/favicon.ico' rel='shortcut icon'/>

6. Memberi Sorotan Warna Pada Kotak Posting
Ini adalah fungsi sederhana yang menurut saya juga menarik. Bila sobat masuk pertama kali di halaman utama Blog ini, maka ketika cursor di arahkan ke kotak bagian-bagian posting, maka kotak posting itu akan berubah warnanya. Sobat cukup masukkan kode berikut di antara tag <Body>... </body> atau bisa juga tepat di atas tag </body>. Perlu diingat bahwa fungsi ini akan jalan bila sobat sudah menaruh script READ MORE pada point nomor 2 sebelumnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <style>
    .hentry:hover {
     background:#ddd -moz-linear-gradient(top, #ddd, #CCCCCC);background:-webkit-gradient(linear, left      top, left bottom, from(#9999CC), to(#CCCCCC));
    color:#000000;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    }
    .hentry:hover a:link,#posts-list .hentry:hover a:visited {
    color:#940F04;
    }
</style></b:if>

Sobat bisa bereksperimen dengan warna-warna lain di text berwarna Hijau dan Merah di atas.

7. Membuat kotak pencarian dengan tampilan Google Search
Ini merupakan fungsi baru yang bisa memperindah tampilan kotak search blog sobat. Tampilan search google search kita pindahkan ke blogger kita. Untuk menambahkan fungsi ini, ada 2 tahapan yang harus sobat lakukan. Pertama menaruh script untuk tampilan yaitu css. Lalu kedua menaruh script di widget elemen.
Script CSS:

/* div container containing the form */
#searchContainer {
margin:20px;
}

/* Style the search input field. */
#field {
float:left;
width:165px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}

/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}

/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:40px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuCwN-aYmvp70jQaSCcHG3u879iugwcEagng_t0D4A6rc5MHWarKaMAQC393OpFiqVCt5C4-Qvd7y1AAx9vzU895jiWpsq6aGwJ-Tyhm8tXNMfLneEMFNSd2fPv5YuyUmydUIvOUviC2gs/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuCwN-aYmvp70jQaSCcHG3u879iugwcEagng_t0D4A6rc5MHWarKaMAQC393OpFiqVCt5C4-Qvd7y1AAx9vzU895jiWpsq6aGwJ-Tyhm8tXNMfLneEMFNSd2fPv5YuyUmydUIvOUviC2gs/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

Script pada Widget Elemen:

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

8. Membuat Breadcrumbs (navigasi posisi kita dalam suatu blog)
Fungsi ini menurut saya penting untuk menunjukkan posisi kita dalam suatu blog. Dengan adanya fungsi ini, kita dapat dengan mudah melompat dari satu categori artikel ke kategori di atasnya. Script yang saya cantumkan mungkin sedikit berbeda dengan script yang sobat dapatkan di internet. Saya sudah merubah sedemikian sehingga tidak memberatkan blog sobat. :D
Script CSS:

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

Script Javascript: Pertama sobat cari kata kunci "<b:includable id='main' var='top'>" di HTML. Lalu pastekan kode ini tepat di atas kode tadi.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/></b:loop>
</div>
</b:if>
</b:if>
</b:includable>

9. Membuat Daftar isi blog
Bila sobat melihat bagian atas dari artikel ini, maka sobat akan menemukan kotak daftar isi blog. Fungsi ini dapat di tambahkan hanya dengan menaruk script ini ditempat yang sobat ingingkan
Script Javascript:

<div style='overflow:auto;width:240px;height:270px;padding:4px;border:1px solid #eee'><b>DAFTAR ISI BLOG</b><script src='http://sites.google.com/site/barajajs/listofcontent/contents.js' style='text/javascript'/><script src='http://debrianruhut.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc'/>
</div>

10. Membuat Search Terms
Script yang satu ini sangat berguna untuk mengetahui kata kunci pencarian yang diketikkan pengguna ketika mendapatkan blog kita. Jadi ketika ada seseorang mengetikkan kata kunci pencarian di mesin pencari, lalu kebetulan mendapatkan/mampir di blog kita, maka kata kunci itulah yang akan ditampilkan. Tinggal pasang script ini

<script language='javascript' src='http://users4.jabry.com/sttblogger/widget.asp'/>

11. Membuat Fungsi Share it!
Siapapun tau kegunaan fungsi ini, yaitu untuk memudahkan pembaca membagikan artikel kita ke beberapa Social Network, seperti Facebook, twiiter, buzz, digg, dll.

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

<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:4px 0px 30px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;font-style:Italic;'>Share This Article!: </div>

<div style='float:left;padding-left:10px;'><a name='fb_share' type='button_count'/><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script></div>

<div style='float:left;padding-left:10px;'><a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/><script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>

<div style='float:left;padding-left:10px;'><a class='DiggThisButton DiggCompact'/><script type='text/javascript'>
(function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://widgets.digg.com/buttons.js';
    s1.parentNode.insertBefore(s, s1);
    })();</script></div>

<div style='float:left;padding-left:10px;'><a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

</div>
    </b:if>

12. Membuat Fungsi Print to PDF
Nah, yang ini adalah fungsi terakhir yang saya bagikan dalam artikel ini. Sebenarnya masih ada beberapa fungsi lagi, tapi dengan 12 fungsi ini saja sudah membuat blog sobat menjadi sangat powerful. Selanjutnya adalah membuat artikel kita bisa di konversi ke file PDF. Seperti yang sudah saya bilang sebelumnya, bahwa blog itu yang penting adalah isinya. Dengan menggunakan fungsi ini, maka memungkinkan bagi siapa saja untuk dapat membaca artikel kita berulang-ulang kapan saja dan dimana saja. Sobat tinggal mengunjungi situs www.joliprint.com. Atau bila sobat sedang malas (atau dasarnya malas, hehe, kidding bro), sobat bisa copy pastekan saja script ini:

<div style='overflow:auto;width:240px;height:270px;padding:4px;border:1px solid #eee'><b>DAFTAR ISI BLOG</b><script src='http://sites.google.com/site/barajajs/listofcontent/contents.js' style='text/javascript'/><script src='http://debrianruhut.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc'/>
</div>

Gantikan alamat url yang di beri warna merah dengan alamat url blog sobat. Sobat bisa letakkan di mana saja sobat mau. Oke, semoga artikel ini bisa membatu sobat sekalian menciptakan blog yang powerful dan profesional. Semua tips ini juga datangnya dari para blogger yang lebih senior. Saling berbagi dan mendukung, itulah manfaat dari blogging yang kita lakukan selama ini. :D

Judul Artikel: 12 Script dan Widget Penting Bagi Blogger
Link URL : http://debrianruhut.blogspot.com/2011/08/12-script-penting-bagi-blogger.html
Jangan lupa untuk membagikan artikel 12 Script dan Widget Penting Bagi Blogger ini jika bermanfaat bagi sobat.

Label: Guides and Tips,Referensi

Debrian Ruhut says: Indonesian blogger, ten-fingers typist, pepsi hater, mommy cuisine lover, dog lover, and thank GOD a cum-lauder too :P ▬ You may share the article but don't forget to write the source link. No plagiarism please.