3 Template Blog Unik, Keren, Simple Responsive, Free Download!

Ketiga template keren ini cocok untuk blog berita, malajah, berita, ataupun general blog dan blog toko online. Istilahnya, multipupose blog! Bisa juga buat blog pribadi, khususnya template FreshLife.

1. Portable - SEO Responsive Blogger Template 

DEMO. DOWNLOAD

2. FreshLife - SEO Responsive Blogger Template

DEMO. DOWNLOAD

3. News Wire - SEO Responsive Blogger Template

DEMO. DOWNLOAD

Ke-3 Template Blog Simple Responsive Free Download alias Gratis ini cocok bagi blogger yang menginginkan tampilan blog yang unik, clean, bersih, simple, tapi seo friendly dan responsif. Good Luck!

Android Apps Blogger Template - Template Keren untuk Blog Aplikasi Android

KABAR gembira buat blogger yang konten blognya seputar Aplikasi Android (Android Apps). Bisa juga template keren nan SEO Friendy ini buat blog yang isinya tentang HandPhone, SmartPhone, Laptop, dan sejenisnya. Ini dia "Android Apps Blogger Template", Template Keren untuk Blog Aplikasi Android!

Ini dia Screen Shot alias penampakannya. Keren 'kan?

Template Android Apps Asli (Original):
DEMO
DOWNLOAD

Cara Membuat Tabbed Content di Sidebar Blog

Menampilkan atau membuat Tabbed Content Widget di Sidebar Blog bagus buat navigasi dan internal link blog, sekaligus mempercantik dan menghemat ruang.

Apa itu Tabbed Content? Jawabannya, seperti yang Anda lihat di gambar ilustrasi posting ini. Cara membuat tabbed widget semacam ini sangat mudah. Tinggal pasang kode yang sudah disediakan Blogger Central.

1. Klik "Layout" > "Add A Gadget"
2. Pilih "HTML/Javascript"

3. Kotak "title" (judul) kosongkan, jangan diisi apa pun.
4. Copy + Paste kode berikut ini di kotak konten:

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

5. Hapus javascript yang berwarna merah jika di dalam template Anda sudah ada. Jangan dobel, nanti "berantem" :)

6. Ubah angka 3 menjadi 4-5 atau berapa pun jika ingin menambah jumlah tab.

7. Save!

8. Tambahkan 3 widget (Add a Gadget) di bawah Tabbed Widget yang sudah dibuat tadi. Lihat gambar berikut ini:

Demikian  Cara Membuat Tabbed Content di Sidebar Blog. Untuk lebih jelas dan rinci, silakan ke TKP. Good Luck!

Menampilkan Kotak Subscription plus Media Sosial di Bawah Posting Blog

Cara membuat, memasang, memunculkan, atau menampilkan kotak berlangganan (RSS Subscription Box) plus akun Media Sosial Facebook, Twitter, dll. di bawah setiap posting blog sangat mudah.

Fungsi Kotak Subscription plus Media Sosial ini bisa meningkatkan follower jaringan sosial yang pada giliranya bisa membantu meningkatkan trafik pengunjung blog.

Cara Memasang Subscription Box di bawah Postingan Blog:

1. Login ke dashboard blogger.
2. Klik menu "Template" > klik "Edit HTML"
3. Cari (Ctrl+F) kode <div class='post-footer-line post-footer-line-1'>
4. Copas kode berikut ini di bawah kode tersebut. Ganti huruf yang berwarna merah dengan kepunyaan Anda.

<style>
.wc-subboxv2{
float:left;
width:500px;
padding:10px;
border:1px solid #ccc;
color:#444444;
background-color:#fff; 
margin:25px auto;
font-family:Droid Sans;
-webkit-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
}
ul.wc-subboxsoc{
list-style:none;
margin-top:30px;
overflow:hidden;
}
.wc-subboxsoc img
{
margin-left:-20px;
height:50px;
margin-top:6px;
}
.wc-subboxsoc li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.wc-subboxbutton{
background:#f8f8f8;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.wc-subboxbutton:hover{
background:#f0f0f0;
text-decoration:none !important;
}
.wc-subboxemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.wc-subboxemail h4
{
font:16px georgia, arial, verdana;
}
.wc-subboxemailform{
position:relative;
width:250px;
margin:0 auto;
}
.wc-subboxinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.wc-subboxbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.wc-subboxbutton{
padding:8px !important;
}
.wc-subboxemailform, .wc-subboxinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>

<b:if cond='data:blog.pageType == "item"'>
<div class='wc-subboxv2'>
<div class='wc-subboxemail'>
<h4 style='text-align:center;'>Get Free Updates in your Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='wc-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=contohblognih&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='contohblognih'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='wc-subboxinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
 <input class='wc-subboxbutton' title='' type='submit' value='Subscribe'/>
</form>
</div>
<ul class='wc-subboxsoc'>
<li>
<a href='http://feeds.feedburner.com/contohblognih'><img src='http://2.bp.blogspot.com/-IXJ5WpaZllc/UiIRkBdgE0I/AAAAAAAACUQ/H41RlpEwkSU/s1600/rss.png' title='Subscribe us'/></a>
</li><li>
<a href='https://twitter.com/contohblog'><img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Follow us'/></a>
</li><li>
<a href='https://www.facebook.com/cbblogger'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Like us'/></a>
</li><li>
<a href='https://plus.google.com/106869251529186655236/posts'><img src='https://lh4.googleusercontent.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/h120/google.png' title='Circle us'/></a>
</li>
</ul>
</div>
</b:if>

5. Save Template!

Selamat! Blog Anda sudah Menampilkan Kotak Subscription plus Media Sosial di Bawah Posting yang bisa meningkakan like, follower, dan subscriber serta jumlah pengunjung.

Sumber

Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih

POSTING atau tulisan panjang di blog akan sangat menyiksa pembaca. Melelahkan mata. Tulisan panjang bisa dibagi menjadi dua bagian (halaman/page) atau lebih. Simak saja detik.com, khususnya detikSport, yang demen banget membagi tulisan panjangannya menjadi beberapa bagian.

Selain memudahkan dan "memanjakan" pembaca, tulisan pendek lebih mudah dipahami, dimengerti, lebih menarik dibaca, dan... bisa meningkatkan pageviews lho!

Jika tidak ada, ya... masukkan dong! Copas kode tersebut di bawah kode <head> di template Anda. Caranya:

1. Klik  menu "Template" > "Edit HTML"
2. Cari (Ctrl+F) kode <head>
3. Copas kode jquery tersebut di bawahnya.

Langkah 2
1. Klik "New Post" (Entry Baru)
2. Klik mode "HTML"
3. Copy + Paste kode berikut ini:

<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>

<div class="content_1">

Tulisan Bagian 1 di Sini!

</div>

<div class="content_2" style="display: none;">

Tulisan Bagian 2 di Sini!

</div>

<div class="content_3" style="display: none;">

Tulisan Bagian 3 di Sini!

</div>

<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Demikian Cara Membagi Tulisan Panjang Menjadi Dua Bagian Atau Lebih. Sekali lagi, tulisan pendek lebih baik dan lebih menarik dibaca ketimbang tulisan panjang.

Kita bisa juga sih membagi postingan panjang itu menjadi beberapa bagian secara tersendiri. Maksudnya, ditulis di beberapa posting. Misalnya menggunakan judul (Bagian 1), (Bagian 2), dan seterusnya.

Tapi cara yang sekarang kita bicarakan ini lebih populer dan ngetrend di sejumlah portal berita seperti detik.com dan situs berita lainnya.

Selamat mencoba dan happy blogging! Jangan lupa selalu berusaha memposting konten berkualitas alias memperhatikan aspek USABILITY bagi pengunjung blog Anda.

Template Blog SEO untuk Blog Foto dan Video

Johny Jazztube - SEO Blogger Template for Video

DEMO - DOWNLOAD

Video Box - SEO Blogger Template fot Video

DEMO - DOWNLOAD

Top 5 Template Blog SEO Responsif

MaxMag Responsive Magazine Blogger Template

DEMO - DOWNLOAD

Easy News Responsive Magazine Blogger Template

DEMO - DOWNLOAD

Thesis SEO Responsive Blogger Template

DEMO - DOWNLOAD

MyExtraNews Responsive Blogger Template

DEMO - DOWNLOAD

FlatMag Responsive Blogger Template

DEMO - DOWNLOAD

Warna Biru untuk Link-Hyperlink Blog

APA warna link/hyperlink di blog Anda, terutama di bagian posting (single post)? Warna Biru? Good! Biru (blue) adalah warna terpopuler untuk hyperlink atau link. Google, Facebook, Twitter, Yahoo!, dan Wikipedia menggunakan warna biru di link/hyperlink.

Wikipedia bahkan menggunakan istilah "blue link" dalam tulisan atau referensi tentang pengertian  "Hyperlink".

Ahli desain web yang sering mengadakan riset soal desain website, NN Group, juga menggunakan warna biru (#03c) sebagai link.

Sebaiknya, kita "ikut biru" juga karena user sudah terbiasa dan memahami bahwa yang berwarna biru adalah link/hyperlink yang bisa diklik dan mengarah ke posting atau blog lain.

Kode HTML Warna Biru

Berikut ini kode-kode warna biru yang digunakan Google dan situs-situs terpopuler lainnya. Anda bisa gunakan untuk mengganti warna link di blog Anda. Daftar kode warna lainnya dan selengkapnya bisa dilihat di Kode Warna HTML.

1. Kode HTML Warna Biru Link Google: #1e0fbe
2. Kode HTML Warna Biru Link Facebook: #3b5998
3. Kode HTML Warna Biru Link Twitter: #00acee
4. Kode HTML Warna Biru Link Wikipedia: #0645ad
5. Kode HTML Warna Biru Link NN Group:  #03c
6. Kode HTML Warna Biru Persib Bandung: #0033CC

Kode warna biru lainnya bisa Anda "intip" di situs masing-masing dengan cara:

1. Select All tulisan atau area yang berwarna biru
2. Klik Kanan 
3. Pilih "Inspect Element"
4. Copy kodenya yang diawali dengan kode pagar (#)

Makna Warna Biru

Menurut berbagai sumber hasil Googling, warna biru memiliki beberapa arti atau makna kejujuran, ketenangan, kesetiaan, bisa diandalkan, dan keharmonisan. Biru juga memberi kesan lapang dan sensitif.

Dalam dunia psikologi, biru itu simbol kestabilan karena biru merupakan warna langit. Secara psikologis warna biru ini akan memberikan dampak menenangkan, mengurangi ketegangan, serta menciptakan "sensasi cool."

Prinsip Warna Link

Haruskah link-hyperlink blog kita berwarana biru? Tidak harus, tapi "sebaiknya", mengingat situs-situs terkemuka di dunia juga menggunakan warna biru dengan berbagai variasinya.

Prinsipnya, warna link HARUS BERBEDA dengan warna teks utama. Jika teks utama hitam, sebaiknya tidak menggunakan warna hitam juga untuk link --kecuali jika Anda bermaksud  "menyembunyikan" link itu.

Menurut para ahli desain, hindari juga "penggunaan warna yang menyala" pada link --juga background blog-- karena warna menyala --seperti merah atau orange-- bisa membuat mata user cepat lelah sehingga pengunjung tidak akan betah berlama-lama dalam membaca. Lebih fatal lagi, terjadi "bounce back" atau "bounce rate" --user cepat klik "back" di browsernya untuk menutup blog dan kembali ke indeks hasil pencarian Google.

Guna mengantisipai user yang buta warna (blue color blind), disarankan pula  menggunakan "garus bawah (underline) pada link blog.

Cara Mengubah Warna Link

Warna link di template blog biasanya ada dalam kode-kode HTML seperti di bawah ini:

a:link {color:#0033cc;text-decoration: underline;}
a:hover {color:#c00;text-decoration: underline;}
a:visited {color:#990099;text-decoration: underline;}

Link = tauutan; #0033cc = biru

Hover = tampilan jika cursor mouse diarahkan ke link itu; #c00 = merah

Visited = tanda bahwa link itu sudah diklik sebelumnya; #990099 = ungu

Cara mengubahnya, Template > Edit HTML,  temukan dan ganti kode warnanya sesuai dengan selera Anda. Hidup The Blues danPangeran Biru! :)

10 Template Blog Toko Online Terbaik

1. Johny Palelu Peang - Template Blog Toko Online

Demo | Download

2. Johny Blackstore Template - Template Blog Toko Online

Demo | Download

3. Catalogspot K2 E-Commerce - Template Blog Toko Online

Demo | Download

4. Shopping Cart - Template Blog Toko Online

Demo | Download

5. Johny Joss - Template Blog Toko Online

Live Demo | Download

6. Johny Magstore - Template Blog Toko Online

Live Demo | Download

7. Blogger Store - Template Blog Toko Online

Live Demo | Download

8. Demo2 Ecommerce  - Template Blog Toko Online

Live Demo | Download

9. Baby Shop - Template Blog Toko Online

Live Demo | Download

10. Simplex eShop - Template Blog Toko Online

Live Demo | Download

Cara Membuat Toko Online di Facebook

Bagaimana cara membuat toko online (online store/online shop) di Facebook? Sebelum menjawab pertanyaan itu, kita jawab dulu pertanyaan: mengapa "harus" di Facebook?

Dalam riset marketing online, Facebook biasanya masuk dalam kategori tokon online dan "business page". Bahkan, sebuah survei yang dikutip Tech in Asia menunjukkan, Facebook termasuk situs atau aplikasi online yang paling banyak digemari di Indonesia.

Berikut ini adalah beberapa dari keseluruhan daftarnya:

1. Media online: Detik, Kompas, dan Yahoo. 
2. Toko online: TokoBagus, Kaskus, Facebook (di sini Facebook juga dianggap toko online). 
3. Internet banking: KlikBCA, Mandiri, dan BRI. Aplikasi chatting: BBM, WhatsApp, dan Line.

Cara Membuat Toko Online di Facebook

Membuat Toko Online di Facebook itu gampang banget. Syaratnya, tentu Anda harus punya akun Facebook (personal account) dan Fans Page atau Page Facebook.

Kali ini CONTOHBLOG akan share tentang cara membuat Toko Online di Facebook di dua tempat, dua aplikasi, atau dua cara:

1. Melalui Aplikasi StoreYa 
1. Buka StoreYa
2. Klik menu "Free Account" atau "Create Your Free Account Now"
3. Klik "Sign Up Using Facebook"
4. Ikuti perintah selanjutnya.

2. Melalui Aplikasi Ecwid-Shop
1. Buka Ecwid on Facebook
2. Klik "Add Store to Your Page"
3. Klik "Okay"
4. Ikuti perintah selanjutnya.

Selamat! Anda sudah punya tokoh online di Facebook! Silakan share kepada teman-teman Anda. Selamat menjadi "onlinepreneur" and... Good Luck!

Cara Baru Memasang Widget Alexa Rank di Blog

INILAH cara baru atau terbaru memasang Widget Alexa Rank di blog. Hanya dengan Copy+Paste kode, lalu ganti url alamat blog/website dengan alamat blog kita.

Link membuat widget alexa yang dulu banyak di-share dan mudah ditemukan, kini sudah jadi "Oppss!!" atau ke laman "Plans and Pricing". Lalu, di mana link atau lokasi kode widget alexa itu sekarang?

Alexa sudah mengubahnya menjadi di Alexa Support. Di sana tercantum begini:

Can I display my Alexa rank on my site?
Yes, using an Alexa widget like this you can display your site's Alexa rank on your site:

Just change yoursite.com to your website in two places in the HTML snippet below, and then copy and paste it into your website's HTML. Kode berikut ini hanya menampilkan ranking atau peringkat doang:

<a href="http://www.alexa.com/siteinfo/yoursite.com">

<script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/a?url=yoursite.com">

</script></a>

Here is a widget that displays both your site's Alexa rank and Sites Linking In count. Kode berikut ini menampilkan ranking dan link yang masuk ke blog kita:

<a href="http://www.alexa.com/siteinfo/yoursite.com">

<script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=yoursite.com">

</script></a>

Lalu, pilih yang mana? Sama saja. Silakan pilih kode kesatu atau yang kedua. Ingat, UBAH yoursite.com dengan nama blog/website Anda.