Cara Menambahkan  Gadget Di Blogger

Cara Menambahkan Tools Tambahkan Gadget Di Blogspot

Pertama-tama sebelumnya yang harus kita pahami adalah layout atau tata letak dari template yang kita gunakan masing - masing disini saya memberikan tutorial menggunakan template  " Minima Classic - Download " 

Klik menu Template => Edit HTML lalu cari script HTML " sidebar-wrapper " dan script HTML " sidebar " Contoh nya bisa di lihat di script di bawah ini :

1. <div id='sidebar-wrapper'>
2.         <b:section class='sidebar' id='sidebar' preferred='yes'>

Nah jika sudah jangan lupa tutup script nya lihat script nya di bawah :

1. <div id='sidebar-wrapper2'>
2.         <b:section class='sidebar2' id='sidebar2' preferred='yes'>
3.          
4.         </b:section>
5.  </div>

Jangan lupa di ganti nama id dan class nya , disitu saya tambahin angka 2 dibelakang nya maksudnya itu adalah gadget ke 2 , belum paham silahkan gambar di bawah ini :D maklum saya susah nge-jelasin nya kalau nggak tatap muka langsung :D

Nah jika sudah silah kan copy dan paste script " sidebar-wrapper2 " tadi

1. <div id='sidebar-wrapper2'>
2.         <b:section class='sidebar2' id='sidebar2' preferred='yes'>
3.          
4.         </b:section>
5.  </div>

Tepat diatas " sidebar-wrapper " Contohnya bisa lihat screenshot di bawah :

Seperti pada komentar saya di script HTML disitu yaitu <!-- gadget saya letakkan di posisi kiri--> Caranya gampang tinggal kita cari CSS " sidebar-wrapper " Ctrl+F lalu paste , maka kita akan menemukan script " #sidebar-wrapper " tinggal copy paste , pastekan tepat di bawah " #sidebar-wrapper " nya ganti dengan nama " #sidebar-wrapper2 " Contoh nya bisa lihat gambar di bawah : 

Di script diatas ganti code float : $endSide; menjadi float left; di " #sidebar-wrapper2 " 

Dan simpan template lalu lihat di layout atau tata letak maka akan muncul 1 lagi tools tambahkan gadget atau add gagdet pada posisi atau letak di sebalah kiri :)

Note : Float Atau Posisi Gadget Bisa Di Ganti Mau Di Posisi Rigth Atau Left

Untuk lebih jelas dan lengkap nya silahkan nonton video tutorial nya :) 

 Lihat juga video-video saya lainnya di channel youtube saya KLIK

Tweet

1.Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML

2. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F

3. Letakan kode CSS di bawah tepat di atas kode]]></b:skin> :

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

4. Setelah itu cari lagi kode </head> kemudian letakan lagi kode di bawah ini tepat di atas

    kode </head> 

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB ANDA' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

5. Dari kode di atas, perhatikan kode yang saya beri warna merah. Ganti kode berwarna biru dengan

    ID Facebook anda.. Contoh : halaman facebook anda www.facebook.com/andra.antariksa maka ambil

    andra.antariksa sebagai ID anda

6. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita

    perlu menambahkan beberapa script lagi. Silahkan cari kode

    <div class='comments'id='comments'> 

    Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode

    tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class='comments' id='comments'>

 :

<!--FB COMMENT-->
 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'> 
<!--FB COMMENT-->

7. Perhatikan script di atas, ada 2 kode yang saya beri warna merah. 5 itu berarti jumlah komentar

    yang di tampilkan sedangkan 500 itu berarti lebar kolom komentar tersebut.

8. kemudian jangan lupa SAVE template anda dan lihat hasilnya .

Backlink :

http://huseinweb.blogspot.com

Tweet

 

   Pagi blogger! mungkin ane agak telat nih posting nya, tapi gpp lah karena kali ini ane posting template bayar yang bisa ente dapet gratis disini :v. Langsung aja klo gitu, silahkan sedot templatenya dan jangan lupa klo ngerasa postingan yg ane buat ini bermanfaat sekalian di share biar manfaatnya dirasakan orang lain juga :D

    Buzz is a simple, minimalistic and professional Mulitipurpose WordPress theme for any kind of Business, Portfolio or Blog. Buzz is fully responsive design with Bootstrap, ready to look stunning on any devices. Please take a Moment to explore its awesomeness.

                                                          DOWNLOAD | DEMO

Themeforest Price: $45


More At: piratesware.blogspot.com

Tweet