Cara Membuat Box Area Text di Posting Blog

  Scholover Blogger | Selamat siang sobat,...Setelah blog walking di blog tetangga, saya menemukan box text area yang membuat saya tertarik dan ter-inspirasi untuk membahasnya pada kesempatan kali ini untuk dijadikan sebuah kreasi pada posting blog kali ini. Sebelum masuk pada pembahasan Cara Membuat Box Area  Text  di Posting Blog, saya akan menjelaskan sedikit apa itu text area ?

Text area adalah suatu ruang yang digunakan untuk menempatkan text tertentu, biasanya di gunakan untuk banner, atau sebagai tempat penyimpanan kode-kode HTML/Javascript baik untuk bertukar link (Link Exchange) sesama blogger maupun untuk tujuan lain. Box area text juga bisa digunakan untuk menaruh pesan kepada pengunjung blog atau kepada diri sendiri dengan menggunakan abjat biasa.

Sebagai contoh :

disini tempat untuk menyimpan kode html/javascript atau pesan anda

Biasanya banyak para blogger yang meletakkan box text area tersebut di sidebar blog atau juga di postingan blog. Nah untuk itu saya akan jelaskan cara membuat box text area :

~ Cara Pasang Box Text Area di SideBar Blog.

1. Login ke Blogger, kemudian pilih Tata Letak --> Element Halaman;

2. Klik Tambah Gadget lalu pilih HTML/Java Script;

3. Copy dan paste kode dibawah ini :

<div align="center">

<textarea cols="30" name="code" rows="6"> Ganti dengan tulisan yang Anda inginkan</textarea></div>

4. Sebelum disimpan Anda bisa mengatur ukuran kotak sesuai keinginan yaitu dengan merubah angka pada rows untuk tinggi kotak dan pada cols untuk lebar kotak.

5. Terakhir Simpan dan lihat hasilnya.

~ Cara Pasang Box Text Area di Postingan Blog.

Cara memasang pada postingan itu sangat mudah, Anda cukup memasukan kode di atas sesuai keinginan Anda dan sebelum mempublish postingan Anda harus pastikan dahulu bahwa pada menu Post Option postingan pilih mode HTML yang diketik, selanjutnya klik Publish, selesai.

Selamat mencoba, salam blogger.

Membuat Popup Facebook Like Box Pada Blogger

Popup adalah window yang akan muncul secara otomatis ketika blog dibuka. Ada banyak hal yang dapat diisi pada jendela popup, biasanya diisi dengan halaman fan page facebook atau twitter. Popup terbukti dapat memberikan sedikit kontribusi tambahan dalam memperbanyak likers sebuah fanspage. Untuk itu, popup dirasa perlu pada sebuah blog.

Ada banyak cara dalam membuat popup fan page facebook, kali ini yang akan dibahas adalah membuat popup facebook dengan menggunakan generator yang lebih dapat memudahkan. Cara membuat Popup ini cukup mudah yaitu :

1. Kunjungi http://widgets.helperblogger.com/fb-popup-timer.html
2. Buat desain popup :
   
   • Select Skin Type = Pilih header dari popup yang diiginkan
   • Likebox Title (Not so long) = Tentukan nama judul popup like box
   • Facebook Fanpage Username = Masukkan alamat user fanpage, contoh ; http://www.facebook.com/pages/Scholovers-blogger/257118684424929, maka fanpage usernamenya Scholovers-Blogger
   • Wait Time (Seconds) = Waktu, lamanya popup ini muncul hingga tertutup secara otomatis
   • Popup Will Appear After (Minutes) = Berikan angka default 0
3. Setelah semua selesai, pilih Generate.
4. Pilih Add To Blogger.
5. Tidak perlu memberikan judul dari widget kemudian pilih Tambah Widget.

Selamat Mencoba & Happy Blogging.

Membuat Link URL Berupa Tombol ( Button )

Menambahkan sebuah link dalam posting artikel blog, tentu para blogger sudah tahu caranya karna blogger sendiri sudah mempunyai fitur untuk menambahkan link URL dengan mudah pada form penulisan artikelnya. Tapi ada banyak cara dalam membuat link URL untuk mempercantik dan menambah daya tarik agar reader blog berkenan membuka / menkliknya.

Salah satu cara yang bisa digunakan adalah membuat link berbentuk tombol atau button. Contohnya seperti ini :

Untuk membuat sebuah link berbentuk tombol caranya mudah, codenya sebagai berikut :

<form action="http://www.facebook.com/pages/Scholovers-blogger/257118684424929" method="get" target="_blank">
<input name="q" type="submit" value="Like" />
</form>

Keterangan :

• Ganti http://tanganblogger.blogspot.com/p/daftar-isi.html dengan link URL tujuan
• Ganti Like dengan isi tulisan tombol yang diinginkan

Jika Sobat Ingin Membuat Link Url Berupa Tombol Efek Yang Unik

 Lihat Disini

Semoga Bermanfaat

Selamat Mencoba & Happy Blogging.

Download Aone-Ultra Video Joiner v.5.2 Gratis

Scholovers Blogger malam ini ingin Memposting Sebuah Software yang bernama Aone-Ultra Video Joiner v.5.2, Software Ini berfungsi untuk Menggabungkan Beberapa Video Menjadi Satu. penggunaan Software ini sangatlah mudah. Dan software ini cukup ringan.

Download (8.46MB)

Sekian Postingan di malam minggu yang sangat dingin ini, Semoga Bermanfaat.

Cara Membuat Permalink di Blog

Permalink adalah link permanen yang terdapat pada suatu website/blog. Permalink ini dapat selalu muncul pada setiap akhir posting atau posisi lain yang ditentukan oleh pemilik blog. Permalink juga dipercaya dapat menaikan Page Rank dan Seo pada Blog kita.
Disini kita akan membuat permalink yang bagus yang dilengkapi dengan foto dan pesan-pesan pada permalink. Seperti punya saya ini yang menampilkan pesan-pesan agar artikel tidak di coppy dan disebarluaskan dengan sembarangan. Jika sobat membuat permalink dengan cara yang saya ulas ini, hasilnya akan seperti berikut.

Ok, kita mulai ke pembahasan. Cara Membuat Permalink di Blog:
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Klik Edit HTML.
4. Centang "Expand Template Widget".
5. Cari kode ]]></b:skin>, agar lebih mudah gunakan tombol ctrl+F.
6. Letakan kode berikut diatas kode ]]></b:skin>.

.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

Pada kode diatas terdapat kode-kode warna yang tidak bisa saya tandai semua, bisa sobat ubah.

7. Cari kode <data:post.body/>, dalam template saya terdapat beberapa kode tersebut. Jika sobat mengalami hal yang sama, cobalah satu-persatu kode tersebut.
8. Masukan kode berikut tepat dibawah kode <data:post.body/>.

<!-- Permalink -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Game, Software, Blogging, Information</h4>
<div class='kontainer'>
<img alt='Scholovers' src='URL GAMBAR SOBAT'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Saling menghargai kreatifitas sobat Blogger.
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://regibrader-free.blogspot.com/2013/03/cara-membuat-permalink-di-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink -->

Keterangan: Tulisan berwarna Hijau adalah deskripsi Blog sobat, Tulisan berwarna Ungu adalah alt gambar, URL berwarna merah adalah gambar yang akan sobat tampilkan di permalink, Tulisan berwarna Biru adalah pesan-pesan yang akan sobat tampilkan di permalink.

9. Ubah deskripsi blog, alt gambar, gambar, dan pesan-pesan yang akan sobat tampilkan di permalink sesuai dengan yang sobat inginkan.
10. Klik Simpan Template.

Selesai, permalink telah terpasang di Blog sobat.

Cara Menambahkan Google Friend Connect Pada Blog

Asalamualaikum.Wr.Wb. kali ini saya akan share tentang Cara Menambahkan Google Friend Connect Pada Blog.

Langsung saja ini Cara Menambahkan Google Friend Connect Pada Blog :

1.       Login ke Google Friend Connect menggunakan akun blogger/gmail anda.

2.       Klik nama blog anda pada sidebar kiri dan pilih Add the member gadget.

3.       Bila sudah masuk pada Gadget / Anggota Langkah selanjutnya :

• Pilih ukuran Gadget yang sobat inginkan lalu pilih deretan wajah sesuai sobat juga.

•  Kemudian pilih pilihan warna sesuai keinginan sobat, Anda akan dibawa ke halaman kustomisasi gadget seperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris follower yang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalaman ini. :

• Jika sudah buat kode HTML dan Copy pastekan pada blog anda, maka kode HTML gadget follower / Google Friend Connect milik anda sudah selesai dan siap ditayangkan.

SEKIAN TERIMAKASIH

SEMOGA BERMANFAAT

Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)

Asalamualaikum.Wr.Wb. - Setelah saya Update tentang Free Download Template SEO Friendly Terbaru 2012 dan template itu sangat menarik karena sama seperti tempate Kertas Kecil Kita ini. Kali ini saya akan share lagi tentang Widget 3 in 1 Floating yang sangat menarik dan Efektif ini kepada kalian semua. Widget 3 in 1 floating yang menurut saya merupakan salah satu widget blogger terbaik di tahun 2012 ini. 3 buah widget melayang yang digabung dalam 1 gadget. Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like, sekarang waktunya kita bedah bersama sama Widget ini dalam Tips dan Trik NgeBlog Kertas Kecil Kita ini.

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :
1.   Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

2.       Copy script master widget dibawah ini dan paste pada gadget.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVGXeI9fzCg3YB5ltL1oqs9xu-iz8F6M7jLtdZgwKo-QiTAVxGiSaTwKFgE0_fTidRUuED3_VjHrKAX3beX6A0Zr9p5rhkVBo8KIrF-BEjSLchow-gQNWkFJ0RH3FufQJWM0KTHp5w_d8/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RHfqmN1doSkGjrvjD-XbeMgmSHmoi0vDQ1y_RnltqFTRC34ZuWTYIy2oDQ5jc6-KNNtiWPtS3YSDMpcRCYM6qjBdhGZE4HWzVeetKS9Ukv3GEkohH8la8SNsvwkXFY1StguWpwdSrwxz/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNiSFvM04sobDp8m0HCDA3o0d_3In34O52gnA5SFyYtQIkc_mSN-x61sdtEcgZI880rQm7-un8Jolj1ZRnMJwOQdiU25PM4soqEyK5v1Ys7aAIwngkyEK4D3iKu8gGCWXPFaV6Px4cOl6U/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOflWbmb0aWlHoHt_HIBZBjxoIeVd5iL__-GrJhedofa08Xm7hFccQ-uJ5B-JW3poKjr8pO7OLKnFubhcae7KDb7W_Zblq2YzZq6ykk4otFzmdvCo1sVuZiA5IIlbJqWyMmkJPtQovT8z/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5B90Y48o3IWNJeEw36RmTyIxq4VwwxfAur8-pb2_HKrzp1lzg0XIm-iBXYLkIz1vIyCiSrkVQJp0E3YWgZllrkPris_zNWps_keWbhBH1fh6b6wNC2eMzQCxmITHUK1d75uCTBEs1e3s/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFg7_GIWRAc3PXRqoUyoOU6mWcBxhmBoieCCdGtk0tgC0_8MeJKzYsrMM2B3dzMKT4hyphenhyphenYvLOxJkmOAkvk7Q0mFb61N30t-cgJzSfp810g26eCUSixPyj6a3KEFy3YDTn5FdVu7Bzs8hvD/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>

3.       Kustomisasi widget :

• Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
• Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
• Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

4.      Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVGXeI9fzCg3YB5ltL1oqs9xu-iz8F6M7jLtdZgwKo-QiTAVxGiSaTwKFgE0_fTidRUuED3_VjHrKAX3beX6A0Zr9p5rhkVBo8KIrF-BEjSLchow-gQNWkFJ0RH3FufQJWM0KTHp5w_d8/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RHfqmN1doSkGjrvjD-XbeMgmSHmoi0vDQ1y_RnltqFTRC34ZuWTYIy2oDQ5jc6-KNNtiWPtS3YSDMpcRCYM6qjBdhGZE4HWzVeetKS9Ukv3GEkohH8la8SNsvwkXFY1StguWpwdSrwxz/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNiSFvM04sobDp8m0HCDA3o0d_3In34O52gnA5SFyYtQIkc_mSN-x61sdtEcgZI880rQm7-un8Jolj1ZRnMJwOQdiU25PM4soqEyK5v1Ys7aAIwngkyEK4D3iKu8gGCWXPFaV6Px4cOl6U/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOflWbmb0aWlHoHt_HIBZBjxoIeVd5iL__-GrJhedofa08Xm7hFccQ-uJ5B-JW3poKjr8pO7OLKnFubhcae7KDb7W_Zblq2YzZq6ykk4otFzmdvCo1sVuZiA5IIlbJqWyMmkJPtQovT8z/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5B90Y48o3IWNJeEw36RmTyIxq4VwwxfAur8-pb2_HKrzp1lzg0XIm-iBXYLkIz1vIyCiSrkVQJp0E3YWgZllrkPris_zNWps_keWbhBH1fh6b6wNC2eMzQCxmITHUK1d75uCTBEs1e3s/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFg7_GIWRAc3PXRqoUyoOU6mWcBxhmBoieCCdGtk0tgC0_8MeJKzYsrMM2B3dzMKT4hyphenhyphenYvLOxJkmOAkvk7Q0mFb61N30t-cgJzSfp810g26eCUSixPyj6a3KEFy3YDTn5FdVu7Bzs8hvD/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-3587425820990824703" style="width:250px;border:1px solid #ff0000;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ff0000';
skin['ENDCAP_BG_COLOR'] = '#ffffff';
skin['ENDCAP_TEXT_COLOR'] = '#ff0000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#000000';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_HEADLINE_COLOR'] = '#ff0000';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-3587425820990824703',
   site: '12625880981379543615' },
  skin);
</script>

</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('KertasKecilKita').start();
</script>
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FKertas-Kecil-Kita%2F252332308146760&amp;width=250&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=286045748116584" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:290px;" allowtransparency="true"></iframe>

</div>
</div>

5.      Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.

Live Demo Cool Button

KLIK SALAH SATU TOMBOL DI BAWAH UNTUK MELIHAT EFEKYA...!!!

HOME

LIVE DEMO

DOWNLOAD

Lihat Bagaimana Cara Membuat Tombol di atas, klik DISINI untuk info lebih lanjut...!!!

Cara Memperkecil Ukuran CSS Untuk Mempercepat Loading Blogger

Selain jenis dan mutu artikel, Salah satu alasan mengapa trafik pengunjung blog bisa meningkat atau menurun yakni kecepatan loading atau kecepatan memuat blog. Blog yang mempunyai kecepatan loading diatas rata-rata akan mampu menarik pengunjung dan hal ini juga ditegaskan oleh mesin pencari google bahwa "Website/Blog Harus Cepat".

Salah satu cara yang bisa dilakukan untuk mempercepat waktu load blog adalah dengan mengkompress CSS atau mengurangi pemakaian javascript yang tidak penting atau hosting Javascript di Google Code dan sesuai dengan judul artikel kali ini, maka saya akan menjelaskan bagaimana cara memperkecil ukuran CSS blog agar mampu mendongkrak kecepatan waktu load pada saat pengunjung melakukan request.

Penting...!!!

Sebelum mengkompress CSS template blog, saya sarankan untuk membackup full template, hal ini untuk menghindari kesalahan dalam melakukan kompress CSS.

• Buka situs www.cssdrive.com atau www.csscompressor.com
• Copy kode CSS template anda dan pastekan di dalam form csscompressor. Ingat CSS yang harus dicopy dan dicompress yakni di antara tag <b:skin><![CDATA[ dan ]]></b:skin>. Lihat Contohnya :

<b:skin><![CDATA[
#header-wrapper{width:960px;margin:0 auto}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{float:left;width:525px;text-align:left;color:#666;margin:0}
#header2{float:right;width:428px;margin-right:0px;text-align:left;color:#555}
]]></b:skin>

Keterangan : Warna biru adalah CSS yang akan dicompress.

• Jika kode CSS sudah dimasukkan, tekan "Compress-it!". Maka hasilnya akan seperti ini.

• Selanjutnya, ganti kode CSS template anda sebelumnya dengan kode CSS yang sudah di kompress tadi. Simpan dan lihat hasilnya... 

Note :

Untuk mengkompres kode CSS, saya sarankan agar mengkompress kode CSS per-bagian. Hal ini bertujuan untuk memudahkan anda dalam mengedit kode CSS template.

Semoga Bermanfaat...!!!

Kode Struktur dasar XML/HTML Template Blog/Website

Bagi para pemula blogger, mengenal dan memahami Kode Struktur dasar XML/HTML Template Blog/Website merupakan hal mutlak yang harus diketahui dan dipahami. Mengapa? karena dengan mengenal struktur dasar xml/html template blog akan bisa mempermudah dalam mengedit dan memodifikasi template. Contohnya seperti menambahkan header, kolom widget, footer dan lain sebagainya. 

Struktur dasar XML/XHTML template blogger terdiri dari beberapa bagian, diantaranya header, body outer, main, post body, sidebar dan footer. Semua element ini dibungkus oleh beberapa tag, mulai dari yang terluar sampai yang paling dalam. Untuk lebih jelasnya, perhatikan gambar dibawah ini.

Mengenal Struktur Dasar Kode XML/HTML Template Blogspot

<html>
<head>
Tempat untuk font script dan meta content
<b:skin><![CDATA[
Tempat CSS / Skin
]]></b:skin>
</head>
<body>
Tempat untuk content header, body, main, sidebar dan footer
</body>
</html>

Penjelasan Tags !

1. Tag HTML

Tag pembuka <html> dan tag penutup </html> merupakan desain awal (standard) untuk membentuk atau menciptakan suatu template atau design website yang didalamnya berisi semua element xml/html

2. Tag Head

Diantara tag pembuka <head> dan penutup </head> terdapat tag title, skin/css dan script. Isi tag head ini merupakan bagian penting untuk membangun blog atau website seperti peletakan font, script, meta content dan css/skin. Posisi peletakan font dan meta content, biasanya di letakkan tepat di bawah tag pembuka <head> sedangkan untuk CSS/Skin diletakkan di antara tag pembuka <b:skin><![CDATA[ dan tag penutup ]]></b:skin>.

3. Tag Body

Tag body ini merupakan tempat untuk menampilkan atau memvisualisasikan semua aktifitas blog, dan biasanya terbagi dalam 4 element utama, header (menu navigation), main-wrapper (post body), side-wrapper (widgets) dan footer (copyright atau credits)

Untuk menguraikan secara keseluruhan dan menggabungkannya menjadi template yang utuh, berikut kerangkanya.

<html>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[
body {..............}
#header-wrapper {..............}
#content-wrapper {..............}
.post {..............}
.left-sidebar-wrapper  {..............}
.right-sidebar-wrapper  {..............}
#footer {..............}
]]></b:skin>

</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- start content-wrapper -->

<div id='header-wrapper'>
<!-- widget header, description blogger-->
</div>

<div id='content-wrapper'>
      <div class='sidebar' id='left-sidebar-wrapper'>
       <!-- widget Sidebar Left-->
       </div>     

       <div class='post-wrapper' id='main-wrapper'>
       <!-- widget main-wrapper, post, comment and content-->
        </div>    
       <div class='sidebar' id='right-sidebar-wrapper'>
       <!-- widget Sidebar Right-->
       </div>

<div class='clear'>&#160;</div>  <!-- do not remove -->
</div>

<!-- end content-wrapper -->

<!-- start footer-wrapper -->

<div id='footer-wrapper'>
<!-- content footer-->
</div>

<!-- end footer-wrapper -->

</div>

</body>
</html>

Demikianlan penjelasan singkat mengenai struktur dasar kode XML/HTML template blogspot, semoga dengan adanya penjelasan tersebut diatas, bisa menambah pengetahuan anda. Terima kasih !

Cara Membuat Tombol Efek Unik Untuk Blogger

Membuat salah satu tombol atau button pada blog adalah sebuah hal yang tidak jarang sahabat bloggers lakukan. Hal ini disebabkan oleh karena adanya beberapa kebutuhan para blogger untuk membuat sebuah postingan terlihat menarik dengan menggunakan sebuah tombol, baik itu tombol download, live demo, next, home, previous atau yang lainnya.

LIVE DEMO

Cara Pemasangan !

• Langkah pertama, login ke Blogger
• Pilih Template » Edit HTML » Proceed
• Copy kode CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>

.ls-button{

background-color:#0404B4;

font-family: 'Verdana', sans-serif;

font-size:12px;

text-decoration:none;

color:#fff;

position:relative;

padding:10px 20px;

padding-right:50px;

background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);

border-radius: 5px;

box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;

}

.ls-button:active {

top:3px;

background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);

box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;

}

.ls-button:before {

background-color:#FF0000;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3C7KPk-pJT4PlxCjJEutm7c9fjynJASh_V7iAf5sX5v9ohpQi9Tl4cRi5luJqUmqV6Dd_N7CSsvs75eWonxQLukMUiC8KHAUJINIdmnihztY6NdBo8XI6ri1B8hsK0TPmOWgQVYaZdHBH/s1600/lostsector-right-arrow.png);

background-repeat:no-repeat;

background-position:center center;

content:"";

width:20px;

height:20px;

position:absolute;

right:15px;

top:50%;

margin-top:-9px;

border-radius: 50%;

box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;

}

.ls-button:active::before {

top:50%;

margin-top:-12px;

box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;

}

• Simpan template

Cara Penggunaan !

Sekarang untuk memasangnya pada setiap postingan blog, masukkan kode berikut ke dalam HTML postingan.

<a class="ls-button" href="Masukkan link disini">Teks anda disini</a>

Pilih Publikasikan atau Pratinjau untuk melihat hasilnya.

Free Download WinRAR 32bit dan 64bit Bahasa Indonesia

Free Download WinRAR (32-bit) Terbaru – Pada postingan kali ini saya akan share software gratisan yang banyak digunakan oleh orang sehari-hari, salah satunya adalah winrar. software WinRAR merupakan salah satu program yang memiliki banyak fungsi yang cukup populer dibidang pengompresan data. software atau data yang sudah dikompres akan menjadi kecil ukurannya tergantung kehendak kita. setelah itu file yang sudah dikompres bisa ditransfer dalam ukuran yang lebih kecil dari ukuran semula. winrar juga dapat membantu kita mengamankan sebuah file. contoh kita punya software yang kita rahasiakan di pc kita, supaya orang tidak bisa mengaksesnya cukup kompres file tersebut dan beri password untuk memproteksi file tersebut.

Pertama install terlebih dahulu software winrarnya. silahkan download dibawah :

☺ Download Winrar 32Bit (Indonesia):
DOWNLOAD

☺ Download Winrar 64Bit (Indonesia):
DOWNLOAD

 Berikut cara memproteksi file anda dengan winrar:

☻Sediakan file yang akan anda proteksi

klik kanan pada file

pilih add to archieve..

☻pilih tab advance >> klik set password >> isikan password anda 2 kali >> ok

☻kembali ke tab general klik >> ok

selesai deh..
coba buka file archive yang baru saja anda buat.. pasti akan ada permintaan password untuk membuka file tersebut.

sekian postingan Free Download WinRAR (32-bit) Terbaru semoga bermanfaat.  ♪♪♪