Menggunakan Multi Tabbed Widget untuk Menghemat Space Blog

Bismillahirrahmanirrahim...

MULTI PASTE - Hal yang sering menjadi dilema pada saat melakukan setting layout blog adalah penyesuaian widget pada side bar, terkadang kita harus menentukan pilihan widget mana yang akan ditampilkan dan mana yang harus dikorbankan untuk menyesuaikan tampilan blog agar kelihatan serasi saat tampil pada browser pengunjung, terutama untuk blog yang hanya terdiri dari dua kolom, tentunya akan lebih selektif dalam menampilkan widget pada side bar.

Untuk mengatasi hal ini, maka salah satu solusi yang mungkin dilakukan adalah Menggunakan Multi Tabbed Widget untuk Menghemat Space Blog.  Widget ini dirilis oleh Mohammad Mustafa Ahmedzai pada bulan Juni 2011 dan merupakan salinan script widget Wordpress yang dibuat dan disesuaikan dengan Platform Blogger.  Script ini dapat diedit dan disesuaikan dengan template blogger versi baru serta penerapannya yang tidak begitu rumit, mudah-mudahan anda akan menyukainya.  Style dari Multi Tabbed Widget seperti gambar di bawah ini atau Anda bisa melihat live demo (klik tombol live demo).

Untuk mempraktekkannya ikuti langkah implementasi seperti di bawah ini sekarang!

• Login ke blogger dengan ID anda

• Klik menu Template pada sisi kiri halaman, sebaiknya backup terlebih dahulu template anda lihat artikel Cara Backup dan Restore Template Blogger

• Jika template sudah di backup, klik Template >> Edit HTML >> Proceed

• Cari kode ]]></b:skin>

• Copy kode dibawah ini dan paste diatas kode ]]></b:skin>

/*----- MP Multi Tabbed Widget ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-MN6l7LjGNrKFWJoHmGgIrDr6s3YX3dfkamcncvZcVS3oxtD2WvJRDh9S7jMfkPfCdh7iaPipNDGIbICEdYW4-HAugRTLNedVyRTTcFv9q1a-VlxaVRdF-15JnZxbCPSjSufPvOW-5I/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-MN6l7LjGNrKFWJoHmGgIrDr6s3YX3dfkamcncvZcVS3oxtD2WvJRDh9S7jMfkPfCdh7iaPipNDGIbICEdYW4-HAugRTLNedVyRTTcFv9q1a-VlxaVRdF-15JnZxbCPSjSufPvOW-5I/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

• Sekarang cari kode <div id='sidebar-wrapper'> jika anda tidak menemukannya, hal ini karena setiap template memiliki kode HTM yang uniq dan mungkin berbeda dengan template yang saya gunakan, anda bisa mencari kode lain seperti ini <div class='column-right-outer'>

• Selanjutnya copy kode di bawah ini dan paste tepat di bawah kode tersebut di atas.

<div class='tabviewsection'>

<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
  
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Tab-Wid-1</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tab-Wid-2</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Tab-Wid-3</a></li>
</ul>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                  
</div>                       
                           
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                    
</div>                       
                           
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                   
</div>

</div>

<div style='height:5px;clear:both;'/>

• Simpan Template anda dengan menekan tombol Save dan periksa Layout blog pada Page Elements atau Halaman Tata Letak harusnya akan tampil seperti gambar di bawah ini

• Sebagai catatan anda dapat mengganti kode yang ditulis dengan warna biru dengan judul widget yang anda inginkan, gunakan judul widget yang pendek saja untuk menyesuaikan dengan lebar side bar blog.

• Langkah terakhir adalah tempatkan widget yang ingin anda tampilkan pada Multi Tabbed Widget, jangan lupa untuk menyimpan perubahan pada Layout blog dengan menekan tombol Save Arrangement yang terletak di pojok kanan atas halaman Layout

• Periksa blog anda, jika sukses ucapkan Alhamdulillah...

Read More

Cara Membuat Fans page Facebook Di Blog Auto Hidden

BUMIAYU,ALJINET- DI mulai lagi aktifitas iseng-iseng di internet berbagi dengan yang lain,hehehe.
dengan di buatnya blogger semacam ini kita bisa saling berbagi dengan sobat dumay,oke kali ini aljinet bumiayu akan membagikan ilmu baru yang telah di dapat dari internet,yaitu turtorial memasang fans page facebook di blogger dengan tersembunyi(terhidden).
caranya:
Pasang kode jquery ini pada template sobat dan letakkan diatas kode  </head> berikut kodenya gan

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

Setelah kode tersebut terpasang, langkah berikutnya adalah pemasangan kode facebook fanpage pada widget dengan menambahkan gadget.

1. Login ke blogger sobat
2. Silahkan menuju tata letak
3. Tambah gadget dan pilih html/javascript
4. Lalu copy dan paste kode berikut

   <script src="http://infonetmu.googlecode.com/files/slidboxordinary.js" type="text/javascript"></script><div id="fbslidebox" style="position: fixed; width: 330px; overflow: hidden; bottom: 20px; right: 10px; background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilkrAy5H7yROWJNIAtdpeyIQpKIG9xjzLKBSBh3-1ZdQCYQc3GZwVHMC3ioAEPZzrCmu6GkJXrEMiCch9g4L_xfsO-XXrkEFDa8QttD0Z41jr37Bb7zZdcAirM73q_xc1xrND0DKXBGqDM/s0/bo-bg-html.gif&quot;) repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 2px solid rgb(17, 17, 17); display: block;">
   <div style="width: 320px; padding: 10px; margin: 0pt auto; overflow: hidden;">
   <a id="fbcloseslidebox" style="float: right; color: rgb(153, 153, 153); padding: 0pt 3px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 9px; font-family: Verdana,Geneva,sans-serif;" href="http://www.blogger.com/post-create.g?blogID=4155701203275692831#">Exit</a>
   <strong style="color: rgb(102, 173, 61);">Jangan Lupa Klik Like Ya</strong>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FInfonetmu&amp;width=300&amp;height=290&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=ff0000&amp;stream=false&amp;header=true&amp;appId=287998221248983" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowtransparency="true"></iframe>
   </div></div>

5. Lalu simpan

Keterangan:

Ganti kode yang berwarna merah dengan kode frame yang kamu dapat saat membuat fanpage facebook, buat yang belum punya kode warna merah tersebut silahkan menuju facebook dan buat fanpage dulu klik linknya, maka nanti akan diberi kode itu.kamu juga bisa mengatur lebar dan tinggi kotak tersebut dengan menambahkan kode css seperti pada yang berwarna kuning diatas.

Read More

Cara Membuat Artikel Terkait dengan Gambar (Thumbnail)

Pada postingan sebelumnya saya telah share Cara Membuat Artikel Terkait dengan Scroll Bar dan Cara Membuat Related Post dengan Thumbnail yang kedua-duanya sama kegunaannya untuk membuat artikel terkait dibawah postingan blog hanya berbeda model saja. Dan kali ini saya masih akan membahas Cara Membuat Artikel Terkait dengan Gambar (Thumbnail) tapi lebih mudah dan praktis tidak perlu mengedit html template dalam membuatnya. Kita akan menggunakan bantuan LinkWithin untuk membuat artikel terkait ini.  

LinkWithin akan membaca setiap gambar yang ada didalam setiap postingan artikel dan akan menjadikannya artikel terkait secara otomatis dengan gambar yang relevan dengan judul tepat dibawah postingan artikel. Dan untuk mendapatkannya cukup mudah, untuk langkah-langkahnya silahkan ikuti cara dibawah ini, , , ,

1. Langsung menuju TKP >>> LinkWithin

2. Jika sudah isi form registrasi blog kita untuk mendapatkan Widget ini. Untuk mengisinya seperti gambar dibawah ini :

3. Untuk langkah selanjutnya dalam LinkWithin sudah dijelaskan dengan rinci cara memasangnya diblog, jika sobat ingin mengambil link Klik bacaan Install Widget 

4. utk langkah selanjutnya sobat blogger pasti langsung  paham dengan mengikuti langkah Y telah ada pada langkah Y disediakan LinkWithin.

Dan secara otomatis akan langsung terinstall diblog kita, dan selamat Widget LinkWithin utk Membuat Artikel Terkait dengan Gambar berhasil dipasang diblog

<<<<< Selamat Mencoba >>>>> 

Baca Selengkapnya di : Cara Membuat Artikel Terkait dengan Gambar (Thumbnail) | AF Sahabat Artikel http://abyfarhan7.blogspot.com/2012/02/cara-membuat-artikel-terkait-dengan.html#ixzz1yGC4WVnk

Read More