Cara Memasang Flag Counter di Blogspot

Cara Memasang Flag Counter di Blog Blogspot - Berapa jumlah pengunjung blog sobat?? Bagi sobat blogger yang belum tahu saya sarankan untuk memasang widget ini. Namanya Flag Counter. Flag counter adalah visitor count yang menampilkan jumlah pengunjung blog dengan ciri khas menampilkan bendera negara setiap pengunjung. Contoh bisa sobat lihat di sidebar blog ini.
kali ini saya akan share cara memasang widget flag counter di blog sobat. Sobat yang penasaran dan tertarik silahkan ikuti tutorial berikut.

1. Sobat kunjungi situs http://flagcounter.com 
Sobat akan melihat tampilan seperti berikut.

2. Seperti pada gambar, di situ sobat bisa mengatur tampilan dari flag counter tersebut sesuka hati.
Berikut beberapa menu editnya..

• Top Countries : menampilkan jumlah pengunjung tiap negara dengan bendera negara asal pengunjung
• Flag Map : menamplkan pengunjung dalam bentuk map aatau peta dunia seperti gambar berikut.

• Mini Counter : menampilan counter dalam bentuk mini berupa pagaview blog.
• Maximum Flag to Show : Jumlah bendera yang akan di tampilkan
• Column of Flags : Jumlah kolom untuk counter
• Label on Top of Counter : Nam dari counternya. bisa di ganti sesuai keinginan.
• Background Color : Warna latar belakang
• Text Color : warna teks
• Border color : Warna garis tepi
• Show Country Codes : Menampilkan kode setiap negara, misalnya amerika dengan kode US.
• Show Pageview Count : Menampilkan jumlah pageview atau jumlah penelusuran halaman di satu blog
• Show Number of Flags : Menampilkan seluruh jumlah bendera asal pengunjung

3. Setelah selesai ngeditnya, klik tulisan GET YOUR FLAG COUNTER. Kemudian sobat akan melihat tampilan seperti berikut.

4. Klik Skip, ambil kodenya, kemudian pasang ke HTML/Javascript blog sobat.

Cara Pemasangan :
Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
Masukkan kode kedalam kotak yang di sediakan kemudian klik save.

Read more

Cara Membuat Footer 3 Kolom Dengan Background

Cara Membuat Footer 3 Kolom Dengan Background - Nah sekarang akan saya share bagaimana Cara Membuat Footer 3 Kolom Dengan Background 

Cara Membuat Footer 3 Kolom Dengan Background ini akan membantu sahabat yang mempunyai sidebar yang terlalu penuh, untuk meng-antisipasinya maka silahkan sahabat untuk menambahkan kolom pada footer. Dan ini akan membantu tingkat loading pada blog sahabat, karena widget yang ditaro si samping blog, dengan widget yang ditaro pada bagian footer tentu akan berbeda tingkat loadingnya.

Nah apabila sahabat tertarik untuk membuatnya, dibawah ini Cara Membuat Footer 3 Kolom Dengan Background  :

1. Seperti biasa sahabat harus login terlebih dahulu ke Blogger

2. Lalu Pilih Rancangan

3. Setelah ini Edit HTML

4. Jangan lupa untuk Centang pada Expand Widget

5. Selanjutnya silahkan sahabat cari kode ]]></b:skin>

6. Copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin>
 

#bottom{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibiiN0iEJIz4zxy7A-3S_eFTfm_LvyHoFbDFjgBiE3SA3_4UvSLQydPRIhPYyyx2rtPYBnLI-DGseTyrF5Om9mlq6Qr6j03jvFIXwq_D6f65inErbBATFzlIO5e2qysEiEY7v5pbPY_0hi/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:280px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:280px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}

7. Sesuaikan lebar kolom dengan blog sahabat dengan mengganti angka yang berwarna Biru

8. Selanjutnya cari lagi kode yang mirip dengan kode

end content-wrapper 

atau 

</div> <!-- end content-wrapper-->

9. Copy kode dibawah ini dan pastekan tepat diatas kode tadi

<div id='bottom'>

<b:section class='category' id='category'/>

<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>

</div>

10. Simpan Template dan lihatlah hasilnya

Demikian Cara Membuat Footer 3 Kolom Dengan Background selesai sudah semoga sukses salam blogger

Read more

Membuat Reply Comments

Reply system comment adalah reply comment bawaan blogger atau blogspot itu sendiri. Ya, memang blogger baru - baru ini menambah fitur reply comment system. Fitur ini mirip dengan reply comment system wordpress, tapi tetap ada bedanya. Bedanya, bisa sobat perhatikan sendiri, hehe..

Untuk pengguna template bawaan blogger, reply comment system ini sudah ada secara default. Tapi, bagaimana dengan template yang sudah di modifikasi 100%, kebanyakan reply comment system ini tidak muncul.
Sebelum memulai triks ini saya sarankan sobat untuk membackup terlebih dahulu template blog sobat sebagai antisipasi ketika terjadi kesalahan editing template.


1. login ke blogger 
2. rancangan => edit html => centang expand widget
3. car kode berikut

<b:include data='post' name='comments'/>

4. ganti dengan kode berikut

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.showThreadedComments'><b:include data='post' name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if></b:if>

5. biasanya ada 5 kode ganti semua dengan kode diatas
6.jika sudah simpan template bila penasaran ini dia screenshotnya

Read more

Membuat Tombol Hide Show (Spoiler)

Cara membuat tombol teks spoiler dengan Hide and Show di mana artikel yang kita sembunyikan (HIDE) tidak akan tampak sampai pengunjung mengklik tombol SHOW. Trik ini dapat dipakai untuk Blogger BLogspot atau Wordpress

Kata-kata sebelum di HIDE and SHOW

Tulis artikel disini


Setelah di HIDE AND SHOW (klik Show)

Tulis artikel di sini!

Caranya mudah, ikuti panduan berikut:

1. Buka halaman untuk menulis artikel -> pastikan dalam mode Edit HTML (untuk Blogger) atau HTML (untuk Wordpress)
2. Copy dan paste kode di bawah ke halaman posting. Klik View plain untuk mengcopy.

<div id="spoiler">
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>
<div class="alt2" style="-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(225, 228, 242); border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Tulis artikel di sini!   </div>
</div>
</div>

3. Taruh tulisan yang akan di HIDE AND SHOW di Tulis artikel di sini!

Read more

Cara Membuat Posting Bergaya Galeri Template

Cara Membuat Posting Bergaya Galeri Template. sudah sangat lama sekali saya tidak menjelaskan mengenai tutorial. karena kerinduan itulah, hari ini saya berniat untuk membuat sebuah posting yang mungkin masih asing bagi kalian yakni Cara Membuat Posting Bergaya Galeri Template. saya kepikiran membuat posting ini karena ada yang menanyakannya, pertanyaan akan saya jawab sekarang. nah, apasih artinya Galeri Template? sebenarnya saya tidak bisa menjelaskannya, tetapi jika kalian ingin tahu contohnya silahkan lihat di salah satu halaman posting saya. klik disini. kalau modem kalian agak lemot, bisa lihat print screen di bawah ini.

nah, bagaimana sobat? kalau kalian tertarik silahkan ikuti tutorial Cara Membuat Posting Bergaya Galeri Template di bawah ini :

1. Login dulu di Blog
2. kemudian pilih new post
3. antara Edit HTML dan Compose, pilih yang Edit HTML
4. copas kode di bawah ini

<div class="template" id="layout-8475" style="background-attachment: initial; background-clip: initial; background-image: url(http://bt.bloggerpremium.com/wp-content/themes/bt30/images/btemplates.png?v=1.1); background-origin: initial; background-position: -10px -330px; background-repeat: no-repeat no-repeat; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; float: left; height: 189px; margin-bottom: 20px; margin-left: 20px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 15px; padding-left: 7px; padding-right: 7px; padding-top: 15px; text-align: left; vertical-align: baseline; width: 226px;">

<h3 class="title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; line-height: 16px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">

<span class="Apple-style-span" style="color: #444444; font-family: Arial, Helvetica, sans-serif; font-size: small;"><a href="http://newscheat.blogspot.com/2011/08/personal-template.html">Personal Template</a></span></h3>
<span class="Apple-style-span" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #444444; font-family: Arial, Helvetica, sans-serif; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><img alt="Football Fan" class="thumb livepreview" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhel6_B8rYisu7BUDZPfHbDvn60ie9Q2uazh41wz1wCLoIuRvDSQeVnNq6ZkjSgsKKAwLrTiVhgVrZ1D85phTk45gHyex_J4ssE_Zl2cIyrWTQ99BjBHz_61NCUlo4FBHNOCCBw_E6hRjZf/s400/Shopping+Bag.jpeg" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-color: initial; border-color: initial; border-left-color: rgb(153, 153, 153); border-right-color: rgb(153, 153, 153); border-style: initial; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-width: initial; height: 128px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; width: 225px;" /></span>
<span class="Apple-style-span" style="color: #444444; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 14px;"><a href="http://newscheat.blogspot.com/2011/08/personal-template.html">More Details&nbsp;<img border="0" class="icon-demo-download" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTd7L0Ry2grvXUwfssfOk4Iue5cHa4zKBqj6vY32_vzfU60dKNIJvZ-7bD1-E2SwRxI547liZNA4F6pqYBMh0JUzT-Y2w56A240P56pdVwbxfqE2EeusxLgKxkRWPekwL4Iv9TLTYEHKtC/s200/arrow.gif" style="border-color: initial; border-color: initial; border-style: initial; border-top-style: none; border-width: initial; height: 9px; margin-bottom: 0px; margin-left: 3px; margin-right: 0px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top; width: 9px;" /></a></span></div>

<div class="template" id="layout-8473" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://bt.bloggerpremium.com/wp-content/themes/bt30/images/btemplates.png?v=1.1); background-origin: initial; background-position: -10px -330px; background-repeat: no-repeat no-repeat; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; float: left; height: 189px; margin-bottom: 20px; margin-left: 20px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 15px; padding-left: 7px; padding-right: 7px; padding-top: 15px; text-align: left; vertical-align: baseline; width: 226px;">

<h3 class="title" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; line-height: 16px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">

<span class="Apple-style-span" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #444444; font-family: Arial, Helvetica, sans-serif; font-size: small; line-height: 16px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><a href="http://newscheat.blogspot.com/2011/08/indigo-blogger-template.html"><span class="Apple-style-span" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-color: initial; border-style: initial; line-height: 16px; margin-bottom: 10px; outline-color: initial; outline-style: initial;">I</span>ndigo Template</a></span></h3>
<span class="Apple-style-span" style="color: #444444; font-family: Arial, Helvetica, sans-serif;"><img alt="SuvMag" class="thumb livepreview" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWE8uM-OgZRNNhdg8TejNpgItpzQzLQCjhXKE6XDclk_0Zufi0SrDTsJxdQ-WNu54CnRkSV7j7k34ITgVpfT3yvY8FYOa317jhJDlyILJwxLiLMvr_Pzjn226o8hM95ymkOYJJsDe5RmBY/s400/Indigo1.jpg" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-color: initial; border-color: initial; border-left-color: rgb(153, 153, 153); border-right-color: rgb(153, 153, 153); border-style: initial; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-width: initial; height: 128px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline; width: 225px;" /></span>

<div class="clearfix meta" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; font-weight: bold; line-height: 16px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;">

<a class="fl" href="http://btemplates.com/2011/blogger-template-suvmag/demo/" rel="nofollow" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; float: left; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="background-color: #eeeeee; color: #444444; font-family: Arial, Tahoma, Verdana; font-weight: normal; line-height: 14px;"></span></span></a><span class="Apple-style-span" style="color: #444444; font-family: Arial, Helvetica, sans-serif;"><a href="http://newscheat.blogspot.com/2011/08/indigo-blogger-template.html">More Details&nbsp;<img border="0" class="icon-demo-download" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTd7L0Ry2grvXUwfssfOk4Iue5cHa4zKBqj6vY32_vzfU60dKNIJvZ-7bD1-E2SwRxI547liZNA4F6pqYBMh0JUzT-Y2w56A240P56pdVwbxfqE2EeusxLgKxkRWPekwL4Iv9TLTYEHKtC/s200/arrow.gif" style="border-color: initial; border-color: initial; border-style: initial; border-top-style: none; border-width: initial; height: 9px; margin-bottom: 0px; margin-left: 3px; margin-right: 0px; margin-top: 3px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: top; width: 9px;" /></a></span></div>

</div>

<div style="text-align: left;">

</div>

• langkah terakhir klik Simpan

keterangan

• ganti tulisan berwarna biru dengan URL Gambar kalian
• ganti tulisan berwarna merah dengan Link yang dituju

semoga bermanfaat ^_^

Sumber :  http://newscheat.blogspot.com

 

Read more