Tampilkan postingan dengan label Pasang Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Pasang Widget. Tampilkan semua postingan

Sabtu, 12 Januari 2013

Cara Pasang Widget Mario Teguh di Blog

Cara Pasang Widget Mario Teguh di Blog - Kenal dengan Mario Teguh 'kan..? Memang di mana kenalannya? Saya kira kalaupun ada yang belum tahu sosok beliau, namun sudah banyak yang kenal dan mengetahuinya. Penampilannya dapat disaksikan pada sebuah acara  tayangan salah satu stasiun televisi swasta nasional pada setiap pekan.

Sebagai pemilik blog, kita juga bisa menghadirkan kata-kata motivasi dari Mario Teguh dengan memasang widgetnya pada blog. Dengan demikian, para pengunjung juga bisa membaca pesan-pesan dari beliau melalui widget ini.

Widget Mario Teguh's Quotes ini dibuat oleh oridwidget.blogspot.com. Widget ini juga dilengkapi dengan tanggal dan jam. Panjang dan tinggi standar dari widget ini adalah sebesar 250 px dan 220 px. Penampilan dari widget Mario Teguh's Quote dapat dilihat di bawah ini.


Bagaimana? Apakah Sobat tertarik untuk memasang widget di atas pada sidebar blog? Jika Sobat berminat memasangnya, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke Blogger Sobat.

2. Klik "Opsi lainnya" pada blog yang dipilih, lalu klik menu "Tata Letak".

3. Klik "Tambah Gadget".

4. Pada bagian "Dasar-dasar", carilah HTML/JavaScript, lalu klik tautannya.

5. Berikan judul sesuai keinginan.

6. Pada kotak "Konten", masukkan kode di bawah ini.

<p align="center"><embed src="http://www.widgipedia.com/widgets/orido/Mario-Teguh-Quotes-NoPict-7708-8192_134217728.widget?__install_id=1248336094072&__view=expanded" flashvars="&col1=d89b09&col2=7cc034&dayAdd=0&cal=true&gig_lt=1248336103578&gig_pt=1248336182359&gig_g=1&gig_n=blogger" swliveconnect="true" quality="best" loop="false" menu="false" wmode="transparent" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="250" height="220"></embed> </p>

7. Klik tombol "Simpan".

8. Klik dan seret widget ke tempat yang diinginkan.

9. Klik tombol "Simpan setelan".

10. Selesai.

Cukup sekian tulisan singkat yang dapat saya ketikkan di Blog Mulyono Website ini. Semoga dapat berguna buat teman-teman sekalian, terutama buat sahabat blogger di indonesia. Jangan pernah lupa untuk membagikannya di jejaring sosial facebook, twitter dan google plus. Sampai ketemu di informasi berikutnya, thanks sobat, Heppy Bloging!

Minggu, 09 Desember 2012

Cara Pasang Widget Kurs Rupiah di Blog

Cara Pasang Widget Kurs Rupiah di Blog - Money Exchange Rates Indonesia Rupiah (IDR) Widget adalah sebuah widget yang dikembangkan oleh Trilogicsoft Indonesia. Widget ini akan memudahkan kita sebagai pemilik blog untuk memasang nilai tukar rupiah terhadap mata uang asing di sidebar blog. Kurs nilai mata uang asing yang dipakai dalam widget ini menggunakan kurs dari bank BCA.

Widget Kurs Rupiah ini selalu up-to-date sesuai dengan perubahan kurs yang diberlakukan oleh bank BCA. Exchange Rates IDR merupakan widget kurs rupiah yang bisa di-custom sesuai dengan keinginan kita. Tampilannya dapat diatur seperti warna background, text dan border.

Widget ini juga memberikan pilihan kurs yang ingin ditampilkan. Tidak hanya kurs dollar - rupiah saja (USD) tetapi ada juga kurs valuta asing lainnya seperti euro - rupiah (EUR), yen - rupiah (JPY) dan beberapa kurs nilai tukar rupiah lainnya.

Berikut cara memasang widget nilai tukar rupiah terhadap mata uang asing dari Trilogicsoft Indonesia di sidebar blog.

1. Kunjungi halaman http://www.trilogicsoft.com/product/items/widget-exchange-rates-idr

2. Silakan custom penampilan widget sesuai dengan yang Sobat inginkan.

Custom Tampilan Widget
Custom Tampilan Widget

3. Kemudian copy kode widget tersebut.

Copy Kode
Copy Kode

4. Masuk ke akun Blogger Sobat.

5. Klik "Opsi lainnya" lalu klik menu "Tata Letak".

6. Klik tautan "Tambah Gadget" > "HTML/JavaScript".

7. Beri judul sesuai keinginan lalu paste kode widget tadi kolom "Konten".

8. Klik tombol "Simpan".

9. Klik dan seret widget ini ke lokasi yang Sobat inginkan.

10. Klik tombol "Simpan setelan".

11. Selesai.

Widget Kurs Rupiah
Widget Kurs Rupiah
Demikian informasi tentang memasang widget kurs rupiah di blog. Semoga bermanfaat bagi Sobat. Cukup sekian tulisan singkat yang dapat saya ketikkan di Blog Mulyono Website ini. Semoga dapat berguna buat teman-teman sekalian, terutama buat sahabat blogger di indonesia. Jangan pernah lupa untuk membagikannya di jejaring sosial facebook, twitter dan google plus. Sampai ketemu di informasi berikutnya, thanks sobat, Heppy Bloging!

Rabu, 15 Agustus 2012

Menambahkan Widget Recent Posts per Label

Widget recent posts (posting terakhir) per label ini akan menampilkan daftar artikel terbaru berdasarkan satu label tertentu. Penampakannya bisa dilihat pada screenshot di bawah ini.

Recent Posts per Label
Recent Posts per Label

Cara menambahkannya di blog dapat disimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger.

2. Klik menu "Opsi lainnya" >> "Template".

3. Klik tombol "Edit HTML" >> "Lanjutkan".

4. Beri tanda contreng di kotak "Expand Template Widget".

5. Letakkan kode CSS berikut di atas kode ]]></b:skin>

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

6. Kemudian cari kode </head> dan taruh kode berikut di atasnya.

<script src='http://adablogku.googlecode.com/files/lebelgambar.js' type='text/javascript'/>

7. Klik tombol "Simpan template".

8. Selanjutnya masuk ke menu "Tata Letak".

9. Klik tautan "Tambah Gadget" >> "HTML/JavaScript".

10. Beri judul yang diinginkan dan masukkan kode berikut di "Konten".

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/NAMALABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

11. Silakan dikustomisasi tampilan widget dengan mengubah kode yang berwarna merah. Bila ingin menampilkan elemen tertentu, ganti kode false menjadi true, begitu juga sebaliknya. Untuk NAMALABEL, isilah sesuai sewaktu label dibuat. Perhatikan huruf besar dan huruf kecil saat penulisan label pertama kali. Jika nama label terdiri dua kata atau lebih, maka ganti spasi dengan %20. Misalnya, ada label yang bernama Tutorial Blog maka NAMALABEL dalam kode di atas ditulis menjadi Tutorial%20Blog

12. Klik tombol "Simpan" jika sudah selesai.

Jumat, 10 Agustus 2012

Pasang Gadget Parse HTML di Blog

Dua hari yang lalu, saya memasang gadget atau tool parse HTML di blog ini. Tool tersebut saya tempatkan di postingan biasa dan saya buatkan tautannya di menu navigasi baris ke-dua. Tujuannya agar saya dan para pengunjung lainnya dapat dengan mudah mengaksesnya bila ingin menggunakan widget tersebut.

Tool ini berguna untuk mengonversi karakter <, ", &, ', dan > yang ada pada kode HTML menjadi &lt;, &quot;, &amp;, &#039;, dan &gt; secara otomatis. Bila Sobat ingin memasangnya juga, Sobat dapat menyalin kode di bawah ini dan menempelkannya di blog Sobat.

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&amp;up_grows=10&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=315&amp;h=200&amp;title=Post-Code%3A+code+converter&amp;border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&amp;output=js"> </script>

Jika Sobat ingin mengatur tampilan serta setelan gadget sesuai keinginan sendiri, Sobat dapat bisa berkunjung ke sini untuk mengatur dan mendapatkan kodenya.

Minggu, 15 Juli 2012

Cara Pasang Widget Random Posts yang Ringan

Widget Random Posts merupakan widget yang dapat menampilkan daftar posting secara acak. Berbeda dengan gadget artikel terkait yang menampilkan posting-posting berlabel sama. Jadi, artikel-artikel yang berbeda label dapat tampil secara bersamaan dalam suatu kesempatan. Karena ditampilkan secara acak atau random, maka artikel-artikel yang sudah lama dapat muncul lagi bersama artikel-artikel yang lebih baru.

Dengan begitu maka pengunjung dapat melihat beberapa judul artikel kita yang telah lalu-lalu tanpa harus melihat daftar isi lengkap blog. Bila ada judul artikel yang menarik perhatian pengunjung dan pengunjung tersebut mengekliknya maka hal ini merupakan peluang untuk peningkatan page view blog kita.

Random Posts
Random Posts
Sebenarnya saya sudah pernah memuat artikel tentang memasang widget random posts atau artikel acak ini pada tahun lalu. Namun, widget random posts kali berbeda dari widget artikel acak sebelumnya. Saya merasa widget random posts buatan Zona Widgets ini terasa ringan jika dibandingkan dengan widget sebelumnya. Jadi, tidak begitu memberatkan loading blog.

Selain itu, widget yang satu ini memiliki 4 tampilan yang berbeda. Jadi, kita mempunyai banyak pilihan untuk memilih satu di antara 4 style tersebut. Untuk screenshot dan demonya dapat di lihat di sini. Bagaimana? Tertarik untuk menggunakan widget random posts ini pada blog Anda? Bila berminat, Anda bisa melihat langkah-langkah pemasangannya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik "Opsi lainnya" (menu drop down segitiga) > Tata Letak > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Beri judul sesuai keinginan Anda.

5. Letakkan kode berikut pada kolom "Konten".

<!-- Start Random Post -->
<script type='text/javascript'>
aa_r_post_number = 10; //jumlah tampilan
aa_style = 0; // style : 0, 1 ,2 ,3
aa_url = 'klikmunadi.blogspot.com'; // Your Blog URL Without HTTP://
</script>
<script type="text/javascript" src="http://zona_widgets_1.xtgem.com/2_random_post_style"></script>
<!-- End Random Post -->

  • 10 menunjukkan jumlah tampilan artikel yang diinginkan.
  • 0 merupakan style dari tampilan, ubah dengan yang Anda inginkan.
  • Ganti klikmunadi.blogspot.com dengan URL blog Anda tanpa HTTP.

6. Klik tombol "Simpan"

7. Klik dan seret gadget tersebut ke lokasi yang Anda inginkan.

8. Klik tombol "Simpan setelan" pada bagian kanan atas.

9. Lihat blog Anda untuk melihat hasilnya.

Rabu, 11 Juli 2012

Pasang Page Navigation 1234 di Blogger

Page Navigation merupakan suatu bentuk navigasi yang berguna untuk memudahkan pengunjung mengeksplorasi halaman-halaman posting yang ada di blog kita. Bentuknya berupa angka-angka berurutan | 1 | 2 | 3 | 4 | dan seterusnya. Salah satu tampilannya adalah seperti yang ditunjukkan gambar di bawah ini.

Widget yang satu ini dapat dikatakan sebagai pengganti dari fungsi "Posting Lama" atau "Older Posts" dan "Posting Lebih Baru" atau "Newer Posts". Di widget ini kita dapat mengatur jumlah posting yang ingin ditampilkan pada halaman result "Older Posts" (var pageCount=1;). Halaman result  "Older Posts" ini muncul saat mengeklik angka-angka halaman tadi.


Page Navigation
Page Navigation

Saya sendiri pernah memasang Page Navigation di blog ini. Namun, saya merasa widget ini membuat waktu loading blog menjadi bertambah. Sidebar kanan blog baru muncul setelah menunggu pengolahan data Page navigation selesai. Mungkin hal ini tidak akan terjadi bila koneksi internet yang saya gunakan termasuk kencang atau tidak lelet.

Bagi Anda yang ingin mencoba memasang gadget Page Navigation ini di Blogger dapat mengikuti langkah-langkah yang saya tulis di bawah ini. Skrip dari widget ini saya dapat dari Aaroz Blog.

1. Masuk ke akun Blogger Anda.

2. Setelah berada di Dasbor, klik segitiga hitam (Opsi lainnya) lalu pilih "Template".

3. Selanjutnya pilih "Edit HTML" diikuti klik tombol "Lanjutkan".

4. Cari kode ]]></b:skin> kemudian letakkan kode berikut di atas kode tadi.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

5. Klik tombol "Simpan template".

6. Langkah selanjutnya masuk ke menu "Tata Letak".

7. Klik Tambah Gadget >> HTML/Javascript.

8. Masukkan kode di bawah ini pada kolom "Konten".

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

9. Klik tombol "Simpan".

10. Pindahkan elemen ini ke bawah "Posting Blog".

11. Klik tombol "Simpan setelan".


Minggu, 01 Juli 2012

Cara Mudah Memasang Gadget Terjemahan di Blogger

Memasang widget atau gadget Terjemahan atau Translate di blog berguna untuk menerjemahkan konten blog ke dalam berbagai bahasa. Hal ini dapat memudahkan pengunjung blog dari luar negeri yang ingin membaca lebih lanjut artikel blog kita.

Google sendiri telah menyediakan widget Terjemahan untuk dipasang di blog. Ada sekitar 64 pilihan bahasa yang tersedia dalam widget tersebut.

Sebenarnya, bila kita menggunakan peramban web Google Chrome, di sana telah tersedia semacam toolbar untuk menerjemahkan konten blog atau web yang ingin kita baca.

Widget Terjemahan
Widget Terjemahan
Pada beberapa waktu yang lalu, bila ingin memasang gadget Terjemahan dari Google, kita terlebih dahulu mengunjungi halaman tertentu guna melakukan pengaturan widget dan mengambil kode widget tersebut untuk dipasang pada blog.

Namun sekarang, Blogger sudah memudahkan kita karena widget Terjemahan sudah tersedia pada pilihan "Gadget Dasar-dasar". Dengan demikian cara untuk memasang widget Terjemahan menjadi lebih praktis.

Berikut langkah-langkah mudah untuk memasang gadget Terjemahan di Blogger.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" (tanda segitiga hitam kecil).

3. Kemudian pilih "Tata Letak".

4. Selanjutnya pilih "Tambah Gadget" pada bagian yang mana saja.

5. Silakan cari gadget Terjemahan dan klik tautannya.

6. Berikutnya pada jendela "Mengonfigurasikan Terjemahan", silakan berikan judul sesuai keinginan, kemudian tentukan "Gaya". Ada 3 pilihan gaya yaitu, "Vertikal", "Horizontal", dan "Hanya Naik-Turun". Sambil memilih gaya, Anda dapat melihat "Pratinjau"-nya.

7. Jika sudah mengatur widget, silakan klik tombol "Simpan".

8. Pindahkan elemen gadget Terjemahan ke lokasi yang Anda inignkan.

9. Klik tombol "Simpan setelan".

Sepengamatan saya, bila kita menyetel blog dalam bahasa Inggris (Setelan > Bahasa dan pemformatan) maka pilihan "Inggris" pada pilihan bahasa widget tersebut tidak muncul.

Minggu, 26 Februari 2012

Cara Memasang Multi Tab di Blogger

Banyaknya widget atau gadget yang ingin dipasang pada blog tentunya dapat memenuhi ruang pada sidebar di blog. Agar tak memakan tempat dan untuk menghemat ruang pada blog, kita dapat memasang multi tab pada sidebar untuk meletakkan widget-widget tersebut.

Jumlah tab dalam widget multi tab ini adalah sebanyak 3 tab. Script widget multi tab ini dipasang langsung pada menu “HTML/JavaScript”. Jadi, kita tidak perlu mengedit HTML template blog.

3 tab view menu.
Berikut ini langkah-langkah dalam memasang widget multi tab di Blogger. Silakan disimak dan semoga berhasil dan juga bermanfaat.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavaScript.

3. Copy kode di bawah ini dan paste di kolom “Konten”.

<style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 100px; /* Lebar Kotak Tab */
    height: 22px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
    background-color: #222222; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 0px solid #ccc; /*Warna border bawah kotak tab */
    font-family: "Arial, Helvetica, sans-serif", verdana; /* Font Kotak Tab */
    font-weight: 900; /* Ketebalan Teks kotak tab */
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #736F6E; /* Warna background utama kotak tab */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #ffffff; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 5px; /* Jarak teks dalam kotak content */
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    </style>
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 390px;" class="Tabs">
    <a><span style="color:white">Judul TAB 1</span></a>
    <a><span style="color:white">Judul TAB 2</span></a>
    <a><span style="color:white">Judul TAB 3</span></a>
    </div>
    <div style="width: 100%; height: 250px;" class="Pages">

    <div class="Page">
    <div class="Pad">
      <div>
        ISI KONTEN TAB 1
      </div>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
   ISI KONTEN TAB 2
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
     ISI KONTEN TAB 3
    </div>
    </div>
    </div></div></form>

    <script style="text/javascript" src="http://scriptforyou.googlecode.com/files/tabview.js"></script>
    <script type="text/javascript">tabview_initialize('TabView');
    </script>

  • Silakan ubah “Judul TAB 1,2,3” dengan judul tab yang Anda inginkan.
  • Masukkan konten Anda di “ISI KONTEN TAB 1,2,3”.
  • Mengenai atribut yang lainnya, Anda dapat mengaturnya sendiri sesuai keadaan template blog Anda.

4. Klik tombol SIMPAN.

5. Klik dan geser gadget ini ke tempat yang Anda inginkan.

6. Klik tombol SIMPAN.

7. Selesai.

Update:

Kalau ingin memasukkan link posting, coba ganti "ISI KONTEN TAB" dengan kode HTML di bawah ini.

<ol>
<li><a href="URL posting 1">anchor</a></li>
<li><a href="URL posting 2">anchor</a></li>
<li><a hef="URL posting dst">anchor</a></li>
</ol>

Contoh:

<ol>
<li><a href="http://klikmunadi.blogspot.com/2012/02/daftar-stasiun-televisi-lokal-di.html">Daftar Stasiun Televisi Lokal di Jakarta</a></li>
<li><a href="http://klikmunadi.blogspot.com/2012/02/tips-berkomentar-pada-form-komentar.html">Tips Berkomentar pada Form Komentar yang Terpotong</a></li>
</ol>

Maka hasilnya kira-kira seperti di bawah ini:

  1. Daftar Stasiun Televisi Lokal di Jakarta
  2. Tips Berkomentar pada Form Komentar yang Terpotong

Kalau tidak ingin pakai nomor, coba hilangkan tag <ol> dan </ol>

Sumber: http://districtshare.blogspot.com/2011/12/membuat-multi-tab-3-kololm-tanpa-edit.html

Minggu, 12 Februari 2012

Cara Membuat Widget Recent Posts atau Posting Terbaru

Assalamualaikum Sob, apa kabar di hari Senin yang cerah ini? Mengawali pekan ke-tiga di bulan Februari ini, ane mau berbagi tentang cara menambahkan border pada widget "Posting Terakhir" seperti yang terdapat di blog ini. Script widget "Recent Post" ini ane dapat dari folder BESTSEO-BLOGGER TEMPLATE.

Langsung saja, ane akan jelaskan sedikit tentang penambahan border di widget tersebut. Silakan disimak baik-baik Sob. Semoga mengerti dan bermanfaat.

1. Seperti biasa masuk dulu ke akun Blogger masing-masing.

2. Terus langsung saja menuju ke Rancangan >> Elemen Laman.

3. Klik Tambah Gadget yang ada di mana saja.

4. Selanjutnya, silakan pilih HTML/JavaScript.

5. Isikan judul sesuai keinginan Sobat di kolom "Judul"..

6. Kemudian copy dan paste kode di bawah ini di kolom "Konten".

<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

7. Nah, agar widget tersebut mempunyai border serta background, maka ane menambahkan kode seperti di bawah ini.

.recent_posts_with_thumbs {height:auto;width:auto;padding:5px;background:#FFFFFF;border:1px solid #4169E1;}
  • Untuk mengatur warna latar belakang, silakan ubah kode #FFFFFF dengan kode warna lainnya.
  • Selanjutnya, ubah tebal border, jenis border, dan warna border pada border:1px solid #4169E1; sesuai keinginan Sobat. Kalau mau melihat sekilas tentang border, bisa mampir di sini.
8. Di mana kode untuk border di atas ditempatkan? Ane menaruh kode tersebut sebelum tag </style> sehingga hasilnya akan menjadi seperti di bawah ini.

<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
.recent_posts_with_thumbs {height:auto;width:auto;padding:5px;background:#FFFFFF;border:1px solid #4169E1;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

9. Langkah selanjutnya adalah mengeklik tombol SIMPAN.

10. Seret kotak widget tadi ke tempat yang Sobat kehendaki.

11. Jangan lupa untuk menekan tombol SIMPAN kembali.

12. Silakan lihat hasilnya. Mengenai parameter yang lainnya, Sobat dapat mengubahnya sendiri dengan mengutak-atik kode widget di atas.

Widget Recent Posts atau Posting Terakhir.

Senin, 25 Juli 2011

Cara Pasang Update Twitter di Blog

Pagi-pagi nge-buka blog, eh.. di kolom komentar posting Memasang Tombol Follow Me on Twitter di Blog ada Sobat Arief Rachmadi Blogger Pemula yang bertanya tentang bagaimana cara pasang update Twitter di blog. Nah, buat Sobat-sobat lain yang juga ingin memasang update Twitter di Blogger, silakan simak langkah-langkahnya di bawah ini.




1. Silakan pergi ke halaman http://twitter.com/about/resources/widgets

2. Kemudian klik tab My Website, lalu klik Profil Widget.


3. Selanjutnya isikan username Twitter Sobat pada tab Settings, lalu klik tombol Test Settings untuk melihat pratinjaunya.


4. Untuk mengatur penampilan widget silakan klik tab Preferences, untuk mengatur warna di Appearance sedangkan untuk mengatur ukuran widget di Dimensions. Silakan diatur sesuai keinginan masing-masing. Klik tombol Test Settings untuk melihat preview-nya.

5. Jika sudah selesai semuanya, silakan klik tombol Finish & Grab Code untuk mendapatkan kodenya.


6. Masuk ke akun Blogger Anda.

7. Klik tombol Add to Blogger. (Sobat juga bisa meng-copy paste kodenya secara manual)


8. Klik tombol MENAMBAH WIDGET.

9. Pindahkan elemen Twitter tadi ke tempat yang Sobat inginkan.

10. Klik tombol SIMPAN.

Senin, 02 Mei 2011

Cara Memasang Widget Random Posts di Blogger

Widget Random Posts merupakan widget atau gadget yang dapat menampilkan daftar judul posting blog kita secara acak. Karena ditampilkan secara acak maka posting blog kita yang telah lalu-lalu dapat muncul di sini. Dengan demikian para pengunjung dapat melihat kembali beberapa judul posting blog kita yang sudah lama. Bila mereka tertarik dengan judul posting tersebut dan membacanya, maka hal ini berarti dapat meningkatkan page view blog kita.

Nah, bila Anda tertarik untuk memasang widget random posts ini di sidebar blog Anda, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Beri judul sesuai keinginan Anda.

5. Copy kode di bawah ini dan paste di Konten.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>

  • var numofpost=10, angka 10 menunjukkan jumlah judul posting random posts yang ditampilkan. Ganti angka 10 dengan angka yang lebih tinggi nilainya jika Anda ingin lebih banyak lagi judul random posts yang ingin ditampilkan atau sebaliknya.
6. Klik tombol SIMPAN.

7. Pindahkan elemen ke tempat yang Anda inginkan.

8. Klik tombol SIMPAN.

Kamis, 24 Februari 2011

Cara Memasang Widget Daftar Isi

Daftar isi merupakan salah satu elemen yang penting di blog karena dapat memudahkan pengunjung dalam menjelajahi isi suatu blog. Dengan adanya daftar isi di blog maka akan mempermudah pengunjung untuk menemukan isi atau artikel-artikel dari suatu blog yang ingin dibaca. Daftar isi blog dapat dibuat secara manual  maupun otomatis. Membuat daftar isi secara manual memerlukan waktu yang lama dan dapat menyita waktu kita karena harus memasukkan satu-satu judul artikel yang telah kita terbitkan serta membuatkan linknya.

Selain cara manual, membuat daftar isi juga dapat dilakukan dengan menggunakan sebuah script. Dengan cara ini kita tidak perlu lagi menambahkan list baru setiap kali kita selesai menerbitkan sebuah artikel karena akan bertambah secara otomatis. Blog ini menggunakan widget daftar isi dari Abu Farhan. Di widget ini, 10 postingan terbaru akan ditempeli label New!!. Bila Anda tertarik memasang widget daftar isi di blog, silakan ikuti langkah-langkah berikut ini.

  • Masuk ke akun Blogger Anda.
  • Klik tombol ENTRI BARU.
  • Berikan Judul.
  • Copy-paste kode berikut di Edit HTML.
<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://NamaBlogAnda.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
  • Ganti NamaBlogAnda.blogspot.com dengan URL Blogger Anda.
  • Jika tidak ingin ditampilkan di homepage, atur Post tanggal dan waktu di bagian Dijadwalkan pada.
  • Klik tombol TERBITKAN ENTRI.
  • Buatkan link agar pengunjung dapat mengakses dengan mudah.

Untuk keterangan lebih lengkap, silakan kunjungi link berikut, The Best Table of Contents (TOC) or Sitemap for Blogger.

Jumat, 18 Februari 2011

Cara Memasang Widget SMS Gratis di Blogger

Salah satu fasilitas yang disediakan pemilik blog bagi pengunjung adalah dengan memasang widget sms gratis di blog. Widget ini membantu pengunjung yang tidak mempunyai pulsa untuk mengirim sms secara gratis. Kalau ingin membalas sms, si penerima pesan ya harus membalasnya ke nomor pribadi si pengirim yang mengirim sms melalui widget sms gratis ini.

Widget sms gratis ini dapat ditaruh di sidebar atau dalam postingan biasa, disesuaikan dengan keinginan atau kondisi blog sobat. kalau sobat ingin menaruh widget ini di postingan seperti di blog ini, berikut cara pemasangannya.
  • Masuk ke akun Blogger sobat.
  • Klik tombol Entri Baru.
  • Isikan Judul.
  • Pada Edit HTML, copy dan paste kode ini: <iframe name="I2" src="http://sms-online.web.id/widget" width="270" height="350"> not support </iframe>
  • Isikan Label atau kosongkan.
  • Silakan diatur hal-hal yang diperlukan pada Post Options. Kalau tidak ingin menampilkan di homepage, silakan atur Post tanggal dan waktu pada Dijadwalkan pada.
  • Klik tombol TERBITKAN ENTRI.
  • Buatkan link widget sms gratis ini di menu navigasi agar pengunjung mudah mengaksesnya.


Bila sobat ingin memasang widget ini di sidebar, berikut langkah-langkahnya:
  • Masuk ke akun Blogger sobat.
  • Klik Rancangan.
  • Klik Tambah Gadget.
  • Pilih HTML/JavaScript.
  • Masukkan Judul.
  • Di kolom Konten, copy dan paste kode ini: <iframe name="I2" src="http://sms-online.web.id/widget" width="270" height="350"> not support </iframe>
  • Klik tombol SIMPAN.
  • Pindahkan elemen ke tempat yang sobat inginkan.
  • Klik tombol SIMPAN.
  • Klik Lihat Blog utnuk melihat hasilnya.

Selasa, 08 Februari 2011

Cara Memasang Widget Recent Posts dan Recent Comments

Banyak dari blogger yang memasang widget Recent Posts dan Recent Comments di sidebar blog mereka. Untuk memasang kedua widget tersebut, blogger biasanya menggunakan javascript. Namun, penggunaan javascript berpotensi memperlambat loading sebuah blog. Bila sebuah blog sulit diakses karena loading yang berat, maka ada kemungkinan akan ditinggalkan oleh para pengunjung.

Selain menggunakan javascript, ada cara lain yang dapat dilakukan yaitu dengan menggunakan alamat feed kita sendiri. Untuk Recent Posts dapat menggunakan feed posts. Sedangkan untuk Recent Comments bisa menggunakan feed comments. Berikut ini adalah alamat feed untuk Recent Posts:
http://NamaBlogAnda.blogspot.com/feeds/posts/default
Sedangkan alamat feed untuk Recent Comments adalah sebagai berikut:
http://NamaBlogAnda.blogspot.com/feeds/comments/default
Untuk NamaBlogAnda harus diganti dengan nama blog Anda sendiri. Misalnya, nama blog ini adalah klikmunadi, maka alamat feed untuk Recent Posts akan menjadi seperti ini:
http://klikmunadi.blogspot.com/feeds/posts/default
Sedangkan Recent Comments alamat feednya menjadi:
http://klikmunadi.blogspot.com/feeds/comments/default

Berikut ini cara pemasangannya di blog:

  1. Masuk ke akun Blogger Anda.
  2. Di halaman Dasbor, klik Rancangan.
  3. Pilih Elemen Laman kemudian klik Tambah Gadget.
  4. Di halaman Dasar-dasar, pilih Feed.
  5. Masukkan alamat feed yang Anda inginkan, alamat feed Recent Posts atau Recent Comments.
  6. Klik LANJUTKAN.
  7. Isikan Judul, pilih berapa item yang akan ditampilkan, maksimal 5. Beri tanda centang di Tanggal Item, Sumber/pengarang item atau Buka link di jendela baru bila Anda menginginkannya. Silakan lihat di bawah untuk Pratinjaunya.
  8. Klik SIMPAN.
  9. Pindahkan posisi widget tersebut di tempat yang Anda inginkan.
  10. Kemudian klik SIMPAN.
  11. Klik Lihat Blog untuk melihat hasilnya.

Minggu, 23 Januari 2011

Cara Menambahkan Google Translate di Blog

Kegunaan memasang Google Translate di blog Anda dapat membuat blog Anda tersedia dalam bahasa lain. Penerjemah situs Google menawarkan akses cepat ke terjemahan otomatis dari halaman blog Anda. Cara memasang Google Translate di blog adalah cepat dan mudah. Berikut cara melakukannya:
  1. Silakan kunjungi situs http://translate.google.com/translate_tools
  2. Pilihlah jenis elemen terjemahan.
  3. Pilih bahasa halaman web/blog Anda.
  4. Silakan menyeting pengaturan opsional.
  5. Copy potongan kode HTML.
  6. Masuk ke akun Blogger Anda.
  7. Pilih menu Rancangan.
  8. Klik Elemen Laman.
  9. Klik Tambah Gadget pada sidebar.
  10. Pilih HTML/JavaScript.
  11. Beri judul di kolom Judul.
  12. Paste kode HTML yang tadi dicopy ke Konten.
  13. Jangan lupa diklik Simpan.
  14. Selesai.

    Kamis, 20 Januari 2011

    Cara Memasang Jam di Blog

    Salah satu cara yang dapat mempercantik blog kita agar menarik dilihat pengunjung adalah dengan memasang jam di blog kita. Situs yang menyediakan fasilitas ini adalah ClockLink.com. Situs ini menyediakan banyak tampilan jam web. Selain itu, di situs ini, jam dapat diatur untuk menampilkan setiap zona waktu di dunia online, sehingga tampilan jam-jam ini tidak hanya dekoratif tapi juga sangat praktis. Tidak ada biaya alias gratis untuk menggunakan salah satu jam ini di blog kita.

    Jika Anda tertarik memasang jam di blog, berikut ini langkah-langkah pemasangannya.

    1. Silakan kunjungi situs http://www.clocklink.com


    2. Arahkan kursor Anda ke sebelah kiri layar lalu pilihlah jenis-jenis tampilan jam sesuai dengan selera Anda di bawah menu Gallery mulai dari Newest sampai Wallpaper. Pada kesempatan kali ini saya memilih Analog.


    3. Silakan pilih jenis-jenis tampilan jam yang Anda sukai, kali ini saya memilih jam dengan Name: 0001. Kemudian klik View HTML Tag.


    4. Klik tombol Accept.


    5. Pilih warna jam sesuai keinginan Anda. Sesuaikan Timezone dengan lokasi Anda berada. Pilihlah Size jam menurut kebutuhan Anda. Bila sudah, silakan copy kode javascript yang ada di dalam kotak yang atas.


    6. Masuk ke akun Blogger Anda.



    7. Pilih Rancangan.


    8. Pilih Elemen Laman.

    9. Klik Tambah Gadget.


    10. Pada bagian Dasar-dasar, silakan pilih HTML/JavaScript.


    11. Kemudian isi judul di kolom Judul, paste kode javascript tadi yang sudah dicopy di kolom Konten. Jangan lupa klik SIMPAN.


    12. Selesai.