Cara Dan Teknik Menciptakan Widget Footer Responsive Di Blogger

Cara Dan Teknik Menciptakan Widget Footer Responsive Di Blogger

Desain Blog

Unknown Juni 30, 2016

CARA Menampilkan atau Membuat Widget Footer Responsive di Blogger ini ialah update posting sebelumnya sehubungan cara Dan Teknik Membuat Footer di Bawah Halaman Blog.

Bedanya dengan tips membuat footer sebelumnya, yang ini masih empat kolom, namun RESPONSIVE. Sumbernya juga tetap sama, namun ditambah kode responsivenya. Sehingga menjadi  Widget Footer Responsive di Blogger.

Kodenynya juga sudah dimodifikasi sedikit sehingga lebih rapi. Ini penampakannya.

Fungsi Widget Footer ialah menampilkan link atau sajian navigasi ke posting lain, label, tautan luar, form kontak, atau apa saja, menyerupai fungsi sidebar widget.

cara Dan Teknik Membuat Widget Footer Responsive 4 Kolom

Berikut ini cara memasang kodenya. Cukup gampang dan kodenya cuma dua jenis, yakni CSS dan HTML.

Langkah Pertama: Masuk ke HML Template
Silakan masuk ke isyarat template blog Anda: Klik "Template" > klik "Edit HTML"

Langkah Kedua: Memasang Kode
1. KODE CSS

Copy & Paste isyarat berikut ini di atas isyarat ]]></b:skin> atau </style>

#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
max-width: 950px;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 950px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
text-align: left;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
@media only screen and (max-width:768px) {
#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}
#lowerbar-wrapper{overflow:hidden!important;width:90%!important;padding:20px}
#credits p{text-align:center!important}
}

Catatan: 
- Angka 950 ialah lebar template. Silakan sesuaikan dengan lebar template Anda. Jika mau full width, ubah menjadi 100%.
- Kode #333333 adalah isyarat background warna hitam. Jika ingin mengubahnya dengan warana kelabu lain, silakan ganti dengan Kode Warna HTML.

2. KODE HTML
Simpan isyarat berikut ini di atas isyarat </body> atau <div class='footer id='footer'>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
 </b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div> </div>

Save Template!

Langkah Ketiga: Memasang Widget
Kini widget footer area sudah terpasang di template blog Anda. Berikutnya tinggal memasang widget yang akan ditampilkan.

Klik "Layout" (Tata Letak). Jika Footer Widget Area belum muncul, refresh dengan menekan tombol F5 di keyboard komputer Anda.

Jika sudah muncul: Layout > Add A Gadget > Pilih Widget yang akan ditampilkan.

cara Dan Teknik Membuat Widget Footer Responsive 3 Kolom

Jika Istimewa untuk ingin menampilkan footer widget responsive tiga kolom saja, berikut ini penamapakan, link demo, dan kodenya:

Widget Footer Responsive 3 Kolom

LIVE DEMO

KODE CSS

#lower {margin:auto;padding: 0px 0px 10px 0px;width: 100%;max-width: 1000px;background:#333333;}
#lower-wrapper {background:#333333;margin:auto;padding: 20px 0px 20px 0px;width:1000px;border:0;}
#lowerbar-wrapper {background:#333333;float: left;margin: 0px 5px auto;padding-bottom: 20px;width: 32%;text-align:left;color:#ddd;font: bold 12px Arial, Tahoma, Verdana;line-height: 1.6em;word-wrap: break-word;overflow: hidden;}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {margin: 0px 0px 10px 0px;padding: 3px 0px 3px 0px;text-align: left;border:0;color:#ddd;text-transform:uppercase;font: bold 14px Arial, Tahoma, Verdana;}
.lowerbar ul {color:#fff;margin: 0 auto;padding: 0;list-style-type: none;}
.lowerbar li {display:block;color:#fff;line-height: 1.6em;margin-left: 0 !important;padding: 6px;border-bottom: 1px solid #222;border-top: 1px solid #444;list-style-type: none;text-align: left;}
.lowerbar li a {text-decoration:none; color: #DBDBDB;}
.lowerbar li a:hover {text-decoration:underline;}
.lowerbar li:hover {display:block;background: #222;}
@media only screen and (max-width:768px) {
#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}
#lowerbar-wrapper{overflow:hidden!important;width:95%!important;padding:5px}
#credits p{text-align:center!important}
}

KODE HTML

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Teks warna merah dapat Anda ubah menjadi Footer-Left, Footer-Middle, Footer-Right atau Footer1, Footer2, dan Footer3.

cara Dan Teknik memasangnya sama dengan membuat footer widget empat kolom di atas.  Jika hasilnya "acak-acakan", Anda tinggal sesuaikan kode-kode width (lebar), margin, dan padding sesuai dengan template blog Anda.

Demikian cara Dan Teknik Membuat Widget Footer Responsive di Blogger. Good Luck & Happy Blogging! (http://www.contohblog.com).*


Sumber http://www.contohblog.com/

Koleksi Desain Kartu Ucapan Selamat Idul Fitri

Koleksi Desain Kartu Ucapan Selamat Idul Fitri

Tulisan Lepas

Unknown Juni 28, 2016

Koleksi Desain Kartu Ucapan Selamat Idul Fitri Keren.

Koleksi Desain Kartu Ucapan Selamat Idul Fitri atau Selamat Lebaran, dengan gampang dan banyak ditemukan di Google.

Silakan ketik "selamat idul fitri" di Google, klik Image (Gambar), maka akan ditemukan aneka macam desain kartu ucapan selamat lebaran atau Idul Fitri yang dapat kita pilih dan redesain.

Jika ingin Ucapan Selamat Idul Fitri dalam goresan pena bahasa Arab dan Inggris, ketik saja "Idul Fitri Caligraphy" atau "Id Mubarak", maka akan muncul desain Ucapan Selamat Idul Fitri dalam bahasa Arab (kaligrafi) dan Inggris. Monggo dipilih.

Ucapan Selamat Idul Fitri sudah dapat diduga, akan bertebaran di internet --website, blog, media sosial, lembaga online, email, dan media online lainnya. Tentu, kita ingin mengupload atau memasang Ucapan Selamat Idul Fitri yang menarik dan unik, keren, dan unik!

Hari Raya Idul Fitri 1 Syawal 1437 H berdasarkan pemberitaan, akan jatuh pada hari Rabu 6 Juni 2018 M. Kementerian Agama RI bersama ulama dan ormas Islam melaksanakan sidang isbat (penetapan) hari lebaran tanggal 4 Juli. Demikian info dari media-media online.

Koleksi Desain Kartu Ucapan Selamat Idul Fitri Keren

Berikut ini beberapa pola Desain Ucapan Selamat Idul Fitri yang CB koleksi dari Google. Mohon maaf tidak menjelaskan sumbernya satu per satu, tapi sumbernya dapat didek dengan cara Googling tadi. Desainer asli, silakan klaim di kolom komentar.

 

Gambar Ucapan Selamat Idul Fitri Keren

Menurut CB, ini Gambar Ucapan Selamat Idul Fitri Paling Simple Tapi Keren sebab Ada gambar ketupatnya. Lingkaran di bawah itu dapat diisi dengan logo. Space lain yang masi kosong dapat diisi dengan ucapan, misalnya, Taqobbalallahu Minna Wa Minkum dalam bahasa Arab

Gambar Ucapan Selamat Idul Fitri Keren Bahasa Arab & Inggris (Id Mubarak)

Gambar Kaligrafi Idul Fitri berikut ini berbentug file PNG sehingga dapat dipasang di background warna apa saja, untuk redesain  Kartu Ucapan Selamat Idul Fitri yang keren versi Anda.

Demikian Koleksi Desain Kartu Ucapan Selamat Idul Fitri. Semoga bermanfaat. (http://www.contohblog.com).*

Sumber http://www.contohblog.com/

Makna Malam Qodar (Lailatul Qadr) Bagi Blogger

Makna Malam Qodar (Lailatul Qadr) Bagi Blogger

Blogging Tulisan Lepas

Unknown Juni 28, 2016

Makna Malam Qodar (Lailatul Qadr) bagi Blogger

MEMASUKI 10 malam terakhir bulan Ramadhan, para penceramah, baik di masjid-masjid (ceramah tarawih & subuh), khotbah Jumat, maupun para "dai kondang" yang ceramah televisi, biasanya mengulas sebuah malam yang disebut Malam Qodar (Lailatul Qadr).

Menurut para penceramah itu, Lailatul Qadr yaitu malam penuh kemuliaan, keberkahan, dan ampunan Allah SWT.

Disebutkan, pada malam itu para malaikat turun ke bumi untuk menyebarkan kebaikan dan kedamaian. Ibadah atau amal kebaikan pada malam itu pahalanya lebih baik dari amalan kebaikan yang dilakukan selama seribu bulan atau 83 tahun 4 bulan --itulah sebabnya Lailatul Qadr dikenal juga dengan sebutan Malam Seribu Bulan.

Lalu, apa hubungannya Lailatul Qadr dengan blogger? Ini beliau yang jadi ulasan kita.

Bagi para blogger, Lailatul Qadr juga dapat bermakna melaksanakan kebaikan yang pahalanya lebih baik dari seribu bulan, yaitu dikala seorang blogger membuat posting positif, bermanfaat, atau wacana kebaikan yang menambah wawasan-keterampilan pengunjung.

Menurut ustadz aku, yang namanya ibadah, kebaikan, atau amal soleh itu bukan khusus shalat, zakat, puasa, haji, doa, dzikir, baca Quran, dan amalan religius lainnya, tapi juga sedekah ilmu.

Para blogger hakikatnya yaitu orang-orang yang sedekah ilmu dengan mengembangkan (share) tips, pengalaman, atau ilmu pengetahuan (wawasan), selain membuat buku harian online (online diary). 

Nah, logikanya, jikalau kita menulis atau membuat posting yang baik sempurna pada malam Lailatul Qadr, maka pahalanya akan lebih baik atau senilai dengan amal baik selama seribu bulan! Amin...!

Benar gak begitu ya? Monggo, jikalau kebetulan ada ustadz yang membaca posting ini, mohon komentarnya. Semoga demikian. Good Luck & Happy Blogging! (http://www.contohblog.com).*


Sumber http://www.contohblog.com/

Cara Dan Metode Mengatur Jumlah Posting Di Halaman Label (Kategori)

Cara Dan Metode Mengatur Jumlah Posting Di Halaman Label (Kategori)

Desain Blog

Unknown Juni 28, 2016

CARA membatasi atau mengatur jumlah posting halaman label (Label Page) bahwasanya sudah CB share di posting Cara dan metode Menampilkan Halaman Statis dan Label di Navigasi Menu.

Biar fokus, CB repost dengan update biar jumlah posting di halaman label, ialah halaman yang terbuka ketika link label diklik, muncul sesuai dengan harapan kita.

Halaman label ialah halaman meliputi daftar judul posting di halaman label tertentu. Jika kita klik salah satu link label, contohnya di breadcrumb atau di widget label/kategori, maka muncul halaman khusus daftar posting label tertentu. Tampilannya biasanya menyerupai halaman depan --jika memakai template blog simple.

Secara default, jumlahnya banyak banget, dapat hingga 20. Untuk menyebabkan lebih fast loading, kita dapat mengatur jumlahnya, menjadi lima atau enam misalnya.

CB sendiri membatasi jumlah posting di halaman label sebanyak 8 buah. Silakan cek DEMO-nya: Halaman Label AdSense.

Cara dan metode Membatasi Jumlah Post di Halaman Label

Membatasi jumlah posting di halaman label dilakukan dengan nenambahkan instruksi max-results=5. Artinya, maksimum posting yang muncul atau tampil ada lima di halaman label.

Link Label Default:
http://contohblognih.blogspot.co.id/search/label/Google%20Adsense?

Link Label dengan Batasan Jumlah Posting:
http://contohblognih.blogspot.co.id/search/label/Google%20Adsense?&amp;max-results=5

Selain mengubah atau menambahkan kode &amp;max-results=5 seperti teladan di atas, kita juga harus mengubah instruksi link label dalam template blog sebagai berikut:

1. Template > Edit HTML

2. Cari (Ctrl+F) dan GANTI semua kode: data:label.url DENGAN: data:label.url+ &quot;?&amp;max-results=5&quot;

Catatan: Angka 5 dapat diubah menjadi berapa saja, maksimal 10 saja, biar tidak memberatkan loading halaman.

3. Save Template!

PENTING!

Jika blog Anda memakai Navigasi Halaman Nomor, dan navigasi itu tidak muncul di halaman label, maka:

TAMBAHKAN KODE &amp; di belakang tanda tanya (?),

Contoh dan Penjelasan :

expr:href='data:label.url + "?&amp;max-results=5"'
http://YOURBLOGNAME.blogspot.com/search/label/YOURLABEL?&amp;max-results=5

Untuk mengatur jumlah posting di navigasi halaman bernomor sendiri, ialah di kodenya di dalam template, ialah di kode:

<script type='text/javascript'>
/*<![CDATA[*/
var perPage=5; //Jumlah posting per halaman
var numPages=6; // Jumlah nomor/angka per halaman
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>

Demikian Cara dan metode mengatus atau membatasi jumlah posting di halaman label. Good Luck and Happy Blogging! (http://www.contohblog.com).*

Sumber http://www.contohblog.com/

Cara Dan Teknik Menciptakan Navigasi Top Sajian Responsive Plus Media Umum

Cara Dan Teknik Menciptakan Navigasi Top Sajian Responsive Plus Media Umum

Desain Blog

Unknown Juni 25, 2016

cara Dan Teknik Membuat Navigasi Top Menu plus Media Sosial Responsive

NAVIGASI hidangan atas (top menu) ini dapat juga dipasang di navigasin utama (main navigation). Namun, baiknya tetap pasang di atas header atau halaman blog paling atas.

Navigasi Top Menu ini responsive alias mobile friendly, sama ibarat tips desain navigasi hidangan responsive sebelumnya yang sudah CB share dan dipasang di blog ini.

Navigasi hidangan berfungsi sebagai link internal sekaligus memudahkan pengunjung membuka konten blog kita. Navigasi hidangan umumnya diisi link ke halaman statis (Kontak, About, Sitemap), dapat juga link ke halaman label, tautan keluar (external link), plus link ke akun media sosial.

cara Dan Teknik Membuat Navigasi Top Menu Responsive plus Media Sosial 

KODE CSS 
Simpan di atas isyarat ]]></b:skin> atau </style>

/*Topmenu plus Social Icon */
.menu-wrapper {background:#2980b9;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;}
.top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-family:&#39;Open Sans&#39;;font-size:14px;font-weight:400;background-color:transparent;color:#fff;display:block;margin:0;padding:8px 12px;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;}
.top-menu li.socialwrap a i{text-align:center;color:#fff;transition:initial;}
.top-menu li.socialwrap a:hover{background:#ef4824;color:#fff;}
.top-menu li.socialwrap.pinterest {border-right:0;}
.top-menu a#pull {display:none;}

@media only screen and (max-width:768px) {
.menu-top li ul { background:#222222; border:none; box-shadow:none; }
.menu-wrapper {margin:0;border:1px solid #e6e6e6;}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#fff;display:inline-block;font-family:&quot;Open Sans&quot;;font-size:12px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:&quot;\f03a&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#eee;display:inline-block;position:absolute;right:15px;top:5%;margin-right:10px;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;}
.top-menu li a:hover, nav a:active {background:#ef4824;border:none;color:#fff;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}

@media only screen and (max-width:640px) {
.menu-wrapper {margin:0 auto 20px auto;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}

KODE HTML
Simpan di atas isyarat header, contohnya <div id='header...> atau <div class='header...>

<div class='menu-wrapper'>
<nav class='top-menu'>
<ul>
     <li><a href='/p/about.html' title='About Us'>About</a></li>
     <li><a href='/p/sitemap.html' title='Our Sitemap'>Sitemap</a></li>
     <li><a href='/p/kontak.html' title='Contact us'>Contact</a></li>
     <li><a href='/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap pinterest'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest fa-fw'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-fw'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus fa-fw'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter fa-fw'/></a></li>
<li class='socialwrap facebook'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook fa-fw'/></a></li>
            </ul>
         <a href='#' id='pull'>MENU</a>
          </nav></div>

KODE JAVASCRIPT
Simpan di atas isyarat </body> atau </head>

<script type='text/javascript'>
//<![CDATA[
// Menu Top
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>


LINK AWESOME FONT
Pasang link ke font awesome di atas isyarat </head>. Jika di blog Anda sudah ada, abaikan!

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Pastikan juga sudah terpasang link ke isyarat jQuery di template blog Anda!

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

SAVE TEMPLATE!

Jika dilakukan dengan benar, mestinya Navigasi Top Menu Responsive plus Media Sosial sudah muncul di blog Anda. Good Luck & Happy Blogging! (www.contohblog.com).*


Sumber http://www.contohblog.com/

Cara Dan Metode Menciptakan Template Bawaan Blogger Jadi Responsive

Cara Dan Metode Menciptakan Template Bawaan Blogger Jadi Responsive

Desain Blog

Unknown Juni 24, 2016

cara Dan Teknik Membuat Template Bawaan Blogger Kaprikornus Responsive (Mobile Friendly).

POSTING me-responsive-kan template default blogger ini sebetulnya sudah ada di posting cara Dan Teknik Modifikasi Template Blog Bawaan Blogger.

CB repost supaya fokus ke cara Membuat Template Bawaan Blogger Kaprikornus Responsive atau meresponsivekan default blogger template.

disertakan bersama trik ini, pengguna template bawaan blogger, khususnya template Simple, tidak usah gundah lagi mencari template responsive yang bebas credit link selain yang premium.

Artinya, dengan memakai template bawaan blogger, maka blog Anda bebas link credit, alasannya ialah yang memodifikasi Anda sendiri.

Tulisan Powered by Blogger atau Diberdayakan oleh Blogger boleh dihapus, boleh juga dibiarkan. (Baca: cara Dan Teknik Menghapus Powered by Blogger).

Untuk Apa Dibuat Responsive?

Menjadikan tampilan Blog Responsive atau Mobile Friendly dimaksudkan biar blog kita lebih gampang terindeks mesin pencari Google (SEO Friendly).

Tampilan blog responsive juga biar blog ramah pengguna (user friendly) alasannya ialah lebih banyak didominasi pengguna internet kini memakai HandPhone/SmartPhone atau Mobile Devices untuk internetan.

Selengkapnya: 7 Alasan Harus Menggunakan Template Responsive

CARA #1 AKTIFKAN MOBILE TEMPLATE

Bagi blog platform Blogger, jan cubo cubo khawatir soal responsive desain ini, alasannya ialah Blogger milik Google ini sudah menyediakan template versi mobile.

Jika Anda memakai templata bawaan blogger, contohnya template Simple, aktifkan saja versi mobilenya dengan cara Template > klik Gear > Choose Mobile template, ibarat pada gambar di bawah ini:

Save!

CARA #2 GUNAKAN TEMPLATE RESPONSIVE

Ini cara lebih baik, yaitu gunakan template custom yang sudah responsive. Umumnya template yang dibentuk tahun 2013 ke atas sudah responsive, apalagi yang dibentuk taun 2015 ke atas ibarat di Galeri Template CB.

Jika Anda memakai template responsive (responsive blogger template), maka setting di atas tidak berlaku, melainkan yang disetting begini: pilih "No. Show desktop template on mobile devices".

Lihat juga: cara Dan Teknik Mengaktifkan Template Responsive.

CARA #3 RESPONSIVE-KAN TEMPLATE BAWAAN BLOGGER

Jika Anda bersikukuh memakai template bawaan blogger, namun ingin menjadikannya sebagai template responsive, maka lakukan langkah edit atau modifikasi berikut ini, ibarat dishare oleh Kompi Ajaib yang banyak direpost juga oleh blogger lain --sebagian tidak mencantumkan sumber :)

Demonya, hasil penerapan tips Membuat Template Bawaan Blogger Kaprikornus Responsive ini, dapat dilihat di CB Theme --Free Template tuh!

Anggap saja Anda sudah menciptakan blog gres dengan memilih pilih template Simple seperti ini:

Nah, template tersebut kita akan jadikan responsive alias mobile friendly (Lihat Demo lainnya). cara Dan Teknik me-responsive-kannya sebagi berikut.

cara Dan Teknik Membuat Template Bawaan Blogger Kaprikornus Responsive

1. Nonaktifkan Navbar Blogger

Klik Layout (Tata Tetak) > Edit Gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.

2. Membuat Gambar Postingan Kaprikornus Reponsive
Cari instruksi di bawah ini:

.post-body img, .post-body .tr-caption-container { padding: $(image.border.large.size); }

Ganti instruksi tersebut dengan instruksi di bawah ini:

.post-body img, .post-body .tr-caption-container {padding: 0;width:auto;max-width:100%;height:auto;}

3. Cari instruksi di bawah ini:

<b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>

Ganti dengan instruksi di bawah ini

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

4. Simpan instruksi CSS Responsive berikut ini di atas instruksi </head>

<style type='text/css'> @media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer, .region-inner {width:100%!important;min-width:100%!important;padding:0!important} body .navbar {height: 0!important;} .footer-inner {padding: 30px 0px!important;} } @media screen and (max-width: 603px){ .main-inner .columns {padding-right: 0!important;} .main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;} } </style>

5. Save! Simpan Template!

Kini template default blogger yang Anda gunakan sudah responsive. Silakan cek balasannya di Mobile Friendly Test di atau Troy Responsive Tester.

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Sumber http://www.contohblog.com/

Mengatasi Navigasi Halaman Blog Dengan Nomor Tidak Bekerja Sebagaimana Mestinya

Mengatasi Navigasi Halaman Blog Dengan Nomor Tidak Bekerja Sebagaimana Mestinya

Desain Blog

Unknown Juni 24, 2016

Cara dan metode Mengatasi Navigasi Halaman Blog dengan Nomor Tidak bekerja sebagaimana mestinya

NAVIGASI halaman dengan nomor ialah link atau tautan di halaman depan blog ke halaman berikutnya, pengganti Older Posts.

Anda yang memakai aba-aba navigasi halaman bernomor dari Helplogger, dan masih memakai aba-aba javascript berupa link ke google code, kemungkinan besar mengalami masalah. Navigasi halaman nomornya tidak berfungsi. Nomornya tidak muncul.

Hal itu dikarenakan link aba-aba lin JavaScript berkut ini sudah mati. Google Code yang menyimpan kodenya sudah ditutup.

DEAD LINK!

<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>

Untuk mengatasinya, biar navigasi halaman bernomor berfungsi dengan baik, cari aba-aba link tersebut, kemudian hapus, dan ganti dengan link aba-aba javascript navigation page numbered berikut ini:

   <script type="text/javascript" src="http://yourjavascript.com/1285534128/pagenavigationupdated.js"></script>

Jika masih tidak berfungsi --mestinya sih berfungsi-- maka gunakan aba-aba lengkap berikut ini:

  <script>
  /*<![CDATA[*/
    if (typeof firstText == "undefined") firstText = "First";
    if (typeof lastText == "undefined") lastText = "Last";
    var noPage;
    var currentPage;
    var currentPageNo;
    var postLabel;
    pagecurrentg();
    function looppagecurrentg(pageInfo) {
        var html = '';
        pageNumber = parseInt(numPages / 2);
        if (pageNumber == numPages - pageNumber) {
            numPages = pageNumber * 2 + 1
        }
        pageStart = currentPageNo - pageNumber;
        if (pageStart < 1) pageStart = 1;
        lastPageNo = parseInt(pageInfo / perPage) + 1;
        if (lastPageNo - 1 == pageInfo / perPage) lastPageNo = lastPageNo - 1;
        pageEnd = pageStart + numPages - 1;
        if (pageEnd > lastPageNo) pageEnd = lastPageNo;
        html += "<span class='showpageOf'>Page " + currentPageNo + ' of ' + lastPageNo + "</span>";
        var prevNumber = parseInt(currentPageNo) - 1;
       //Iccsi was here, doing magic  
        if (currentPageNo > 1) {
if (currentPage == "page") {
  html += '<span class="showpage firstpage"><a href="' + home_page + '">' + firstText + '</a></span>'
} else {
  html += '<span class="displaypageNum firstpage"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + firstText + '</a></span>'
}
}
if (currentPageNo > 2) {
            if (currentPageNo == 3) {
                if (currentPage == "page") {
                    html += '<span class="showpage"><a href="' + home_page + '">' + prevText + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + prevText + '</a></span>'
                }
            } else {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + prevNumber + ');return false">' + prevText + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + prevNumber + ');return false">' + prevText + '</a></span>'
                }
            }
        }
        if (pageStart > 1) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
            }
        }
        if (pageStart > 2) {
            html += ' ... '
        }
        for (var jj = pageStart; jj <= pageEnd; jj++) {
            if (currentPageNo == jj) {
                html += '<span class="pagecurrent">' + jj + '</span>'
            } else if (jj == 1) {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
                }
            } else {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'
                }
            }
        }
        if (pageEnd < lastPageNo - 1) {
            html += '...'
        }
        if (pageEnd < lastPageNo) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
            }
        }
        var nextnumber = parseInt(currentPageNo) + 1;
        if (currentPageNo < (lastPageNo - 1)) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + nextnumber + ');return false">' + nextText + '</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + nextnumber + ');return false">' + nextText + '</a></span>'
            }
}
if (currentPageNo < lastPageNo) {
//Iccsi was here, doing magic
if (currentPage == "page") {
  html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastText + '</a></span>'
} else {
  html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastText + '</a></span>'
}
        }
        var pageArea = document.getElementsByName("pageArea");
        var blogPager = document.getElementById("blog-pager");
        for (var p = 0; p < pageArea.length; p++) {
            pageArea[p].innerHTML = html
        }
        if (pageArea && pageArea.length > 0) {
            html = ''
        }
        if (blogPager) {
            blogPager.innerHTML = html
        }
    }

    function totalcountdata(root) {
        var feed = root.feed;
        var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);
        looppagecurrentg(totaldata)
    }
    function pagecurrentg() {
        var thisUrl = urlactivepage;
        if (thisUrl.indexOf("/search/label/") != -1) {
            if (thisUrl.indexOf("?updated-max") != -1) {
                postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
            } else {
                postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
            }
        }
        if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
            if (thisUrl.indexOf("/search/label/") == -1) {
                currentPage = "page";
                if (urlactivepage.indexOf("#PageNo=") != -1) {
                    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
                } else {
                    currentPageNo = 1
                }
                document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")
            } else {
                currentPage = "label";
                if (thisUrl.indexOf("&max-results=") == -1) {
                    perPage = 20
                }
                if (urlactivepage.indexOf("#PageNo=") != -1) {
                    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
                } else {
                    currentPageNo = 1
                }
                document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + postLabel + '?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')
            }
        }
    }
    function redirectpage(numberpage) {
        jsonstart = (numberpage - 1) * perPage;
        noPage = numberpage;
        var nameBody = document.getElementsByTagName('head')[0];
        var newInclude = document.createElement('script');
        newInclude.type = 'text/javascript';
        newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
        nameBody.appendChild(newInclude)
    }

    function redirectlabel(numberpage) {
        jsonstart = (numberpage - 1) * perPage;
        noPage = numberpage;
        var nameBody = document.getElementsByTagName('head')[0];
        var newInclude = document.createElement('script');
        newInclude.type = 'text/javascript';
        newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + postLabel + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
        nameBody.appendChild(newInclude)
    }

    function finddatepost(root) {
        post = root.feed.entry[0];
        var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
        var timestamp = encodeURIComponent(timestamp1);
        if (currentPage == "page") {
            var pAddress = "/search?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
        } else {
            var pAddress = "/search/label/" + postLabel + "?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
        }
        location.href = pAddress
    }
  /*]]>*/
</script>

Jangan lupa, Save Template!

melalui atau bersama ini mengganti link js dari Google Code menjadi aba-aba yang sangat banyak tersebut, selain memunculkan nomor navigasi, juga membuat Loading blog kian kenceng. Good Luck! (http://www.contohblog.com).*


Sumber http://www.contohblog.com/

Cara Dan Teknik Mengatasi Redirect Ke Website Telkom Di Koneksi Speedy

Cara Dan Teknik Mengatasi Redirect Ke Website Telkom Di Koneksi Speedy

Internet Software

Unknown Juni 23, 2016

Cara dan metode Menghilangkan atau Mengatasi Redirect ke Website Telkom di Koneksi Speedy.

PENGGUNA Telkom Speedy pastinya pernah atau sering mengalami, ketika membuka sebuah halaman web, ternyata tidak pribadi kebuka, tapi mengarah (redirect) ke halaman Telkom, contohnya http://www.telkom.co.id/?url=http://www.google.com/ atau http://www.telkom.co.id/?url=http://www.blogger.com/

Sebagai contoh, ini keluhan seorang pelanggan di sebuah forum: 

Halo, saya seorang pengguna Telkom Speedy dan baru2 ini mengganti modem ke TP-LINK TD-8817 bundle Telkom Indonesia. Saya membeli modem ini di salah satu toko komputer lokal..

Sejak ketika itu, setiap membuka situs email aku, layar akan selalu redirect ke www.telkom.co.id/?www.tujuan.com

Tetapi begitu saya membuka situs yang sama sekali lagi, situs email tersebut akan tampil ibarat biasa. Kenapa sanggup begitu ya? Saya sudah menggunakan public DNS, dan juga sudah mematikan fungsi TR-069.  Terima kasih.

Soal ini Telkom menjengkelkan. Bisa dikatakan "licik" sebab memaksa pelanggan membuka website telkom.co.id.

Belum lagi, belakangan, menyisipkan iklan pula! Itu lho.. cfc uzone atau uadezchange. Sangat mengganggu, tapi pelanggan "tidak berdaya". Soal sisipan iklan sudah CB ulas di Cara Menghapus Sisipan Iklan Speedy-Indihome Telkom cfs uzone & uadexchange.

Satu-satunya cara Menghilangkan Redirect Telkom.co.id atau Mengusir Sisipan Iklan Uzone ialah berhenti langganan Telkom Speedy. Banyak keluhan, namun banyak pula yang tak punya pilihan lain. 

Btw, apa berkah ya pendapatan yang dinikmati para petinggi dan karyawan Telkom, dengan cara bisnis yang banyak dikomplain alias membuat gusar pelanggan? Apa berkah ya, bisnis dengan cara tidak fair ibarat itu?

Masalah Redirect Telkom.co.id ini rame juga dibicarakan di sebuah forum.

Cara dan metode Menghilangkan Redirect Telkom.co.id

Cara dan metode Ringkas: 

Lakukan Setting IP dan DNS secara manual. Misalnya, IP : 192.168.1.25 dan DNS : 8.8.8.8. 

Cara dan metode Lengkap:

Berikut ini salah satu cara mengatasi Redirect Telkom.co.id seperti dishare drcompt. Coba saja, biar works!

1. Ketik alamat website pada address kafe web browser anda dengan alamat terenkripsi https, misal https://id.yahoo.com bukan http://id.yahoo.com

2. Alternatif kedua dengan cara mengetik alamat web dalam karakter kapital, misal WWW.BLOGGER.COM bukan www.blogger.com

3. Langkah yang lebih rumit untuk mengatasi redirect ke website Telkom ini ialah dengan mengubah pengaturan modem.

Bila modem yang Anda pakai tipe TP-LINK model TD-W8151N, ikuti langkah-langkah berikut:

- Pastikan koneksi internet terhubung dengan PC/Laptop
- Ketik 192.168.1.1 pada Address Bar di web browser
- Ketik username dan password modem TP-LINK, jikalau setingan belum pernah diubah (default) username: admin ; password: admin

- Pada tampilan setingan modem TP-LINK, klik sajian Access Management ibarat gambar di bawah

• Klik submenu Filter
• Pada pilihan Filter Type Selection pilih URL Filter
• Pada pilihan active pilih Yes
• Pada pilihan URL Index: 1 isikan URL: http://www.telkom.co.id
• Klik Save
• Ulangi langkah nomor 8, pilih URL Index: 2 isikan URL: cfs.u-ad.info
• Klik Save
• Ulangi langkah nomor 8 untuk mengeblok situs-situs yang lain ibarat u-ad.com, v3-mercusuar.info, internet-positif.org, dll
• Klik Save 

Untuk model modem lain, ganti IP Address servernya, misal modem indihome ZTE model ZXHN H108N ganti ip addressnya menjadi 192.168.1.254.

Cara dan metode Mengatasi Redirect ke Website Telkom di Koneksi Speedy. Semoga berhasil. Good Luck! (http://www.contohblog.com).*

Sumber http://www.contohblog.com/

Cara Dan Teknik Menciptakan Kotak Pencarian Plus Media Umum Di Sidebar Blogger

Cara Dan Teknik Menciptakan Kotak Pencarian Plus Media Umum Di Sidebar Blogger

Desain Blog

Unknown Juni 19, 2016

Cara dan metode Membuat Kotak Pencarian plus Ikon Media Sosial di Sidebar Blog.

KOTAK Pencarian (Search Box) yakni salah satu sajian utama yang wajib ada dalam sebuah situs web atau blog.

Kotak pencarian ini memudahkan pengunjung dan admin blog sendiri untuk mencari info yang dibutuhkan.

Kotak pencarian harus gampang dilihat, contohnya di header atau sidebar paling atas. Search Box ini terkait dengan User Experience (UX) atau pengalaman pengguna.

Blog yang tidak dipasangi kotak pencarian termasuk kategori yang jelek dan tidak ramah pengguna (user friendly).

Ikon media umum berfungsi untuk meningkatkan jumlah follower, kawan, atau liker. Link akun sosial media di bawah kotak pencarian, juga memudahkan pengunjung keep in touch dengan admin lewat media umum --Facebook, Twitter, Google Plus, Pinterest, Feedburner, dan LinkedIn.

Cara dan metode Membuat Kotak Pencarian + Media Sosial di Sidebar

Cara dan metode memasang, menampilkan, atau membuat widget Kotak Pencarian (Search Box) plus Ikon Media Sosial di sidebar blog sangat mudah. Kita tinggal pasang kode.

Sebelum memasangnya, pastikan Anda harus punya dulu akun-akun media sosialnya --Facebook, Twitter, Google Plus, Pinterest, Feedburner, dan LinkedIn.

1. Layout > Add a Gadget di sidebar paling atas.
2. Copy + Paste isyarat berikut ini di kolom "Content". Kolom judul biarkan kosong.

<!-- SEARCH BOX -->
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 30px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}
#search-box input[type=&quot;text&quot;]
{width: 90%;padding: 7px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
<!-- SEARCH BOX END -->

<!-- SOCIAL PROFILE END -->
<div class='widget-content'>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
    .TZ-social{padding:0 5px 15px;}
    .TZ-social img:hover{opacity:0.8}
    .googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
    #widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
    .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id='socialwidget'>
    <div class='TZ-social'>
    <!-- social ico -->
    <center>

    <a href='http://facebook.com/username' rel='nofollow' style='margin-right: 15px;' target='_blank'>
    <img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJWWrU4vFkKkc3KSxCbGnxGr4Ew9YbOWPT4VrNzDJqmh6ZhtmtWyADdrhbhrQA8iKASTCYmF4SZ-8I70wYwWD4Vt9FHiEiaGdcZCAgmDWTtp3f_x9IbEJc8smPIoChIWZ3BSPrKoOF5c/s1600/facebook.png'/></a>

    <a href='http://twitter.com/username' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1h2CC2NayES2kXIEs_SnJp0XLfYCrx-B_HKImGUvtU853WkGyrVG2avaHpSCxetNgxr-dLYCuFLA9b5Us6VTYWmTohMc_aYW1fGy6_NGCoHDOmTGGaAg0B9s-SE-xDROib_MrbeMKGYs/s1600/twitter.png'/></a>

    <a href='https://plus.google.com/ID Number/posts' rel='me' style='margin-right: 12px;' target='_blank'>
    <img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnQlcx_-75cNcB2HN8im5MOC0oMdFFF83K83M5__B1WG4yNuGEC000QC5he-Htty0SujJ1PwhaEcLcDYgi8yDNgkB3jBVbWwb9utUT09wbMN28P-xzwoSuBuh2bz6D7Oq3J9alrijAq68/s1600/gplus.png'/></a>

    <a href='http://www.pinterest.com/username' style='margin-right: 12px;' target='_blank'>
    <img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZVBKko1t8uAq8UPRfEL2i28t13Yk_xkSxHsgJmkpTbO4SbpMWLdtSuS51CQyRYH26ArQC1gi5XRKJus8yM5K40kmsOtB40ynUpMyh8jBt37SCEK8S_5ysqtfEiRpvnE2YVsn7UDl35Y4/s1600/pinterest.png'/></a>

    <a href='http://feeds.feedburner.com/Feedburner ID' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXpcu-gcH69ttYZF97iHHBZmKfJPac2Dgd1FC3RdoqNSIKYS1WiwBFKEpngcv60O9HCncfl94bsYIABCJFyQz98638_50avqhYpO-onmLCuzQ4GFyre1QqG3cDhYH3XESG8JmNVoLePhY/s1600/rss.png'/></a>

    <a href='http://www.linkedin.com/in/username' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgakYxnQDBsuzfwzxWcONv6Q2u6K-He3TgbRZXTwH_JBRlFfG2DPJVStATiDpK6Vadls586vfQJhFfxdbRlU65xEReTS1O2OPejOYjehf_YmlLXpErR2oHhjqCMHzqEOGrPHyH73YI01eU/s1600/linkedin.png'/></a>

    </center>
    </div>
    </div>
</div>
<!-- SOCIAL PROFILE END -->

3. Ganti ID yang berwarna merah dengan kepunyaan Anda.
4. Save!

Kini Kotak Pencarian plus Media Sosial sudah muncul di sidebar blog Anda! Good Luck! (http://www.contohblog.net).*


Sumber http://www.contohblog.com/