Maintenance

Maintenance PC

Designer

Multimedia Designer

Result

Reporting Result

27 July 2018

Related Post Dengan Google CSE (Custom Search Engine) pada Blog

Related post merupakan daftar dari artikel yang memiliki topik pembahasan yang sama dengan artikel utama yang sedang dibaca. Berfungsi untuk menarik minat pengunjung agar membuka artikel lain. Ini jelas bagus karena pengunjung akan menghabiskan waktu lebih lama di blog kamu. Bisa banget buat menurunkan bounce rate. Kita nggak bakal membuat related post atau artikel terkait dengan Javascript biasa. Kali ini sedikit berbeda, karena kita akan membuat related post menggunakan Google CSE.

Custom Search Engine (CSE) merupakan layanan Google khusus untuk melakukan pencarian di blog. Biasanya hasil dari CSE hanya akan keluar apabila anda melakukan aktifitas pencarian terlebih dahulu. Hasilnya akan menampilkan artikel terkait lebih banyak yang dibagi menjadi beberapa halaman. Ketika pindah halaman pun dia nggak nge-reload dulu.

A. Buat Unit CSE

Pertama, anda harus create/buat unit CSE yang baru terlebih dulu.
Buka link cse.google.com

Pada kolom Site to Search, isi dengan URL blog anda diikuti tanda slash dan bintang.
 Contoh:
 jasabuatsoftware.blogspot.com/*

Pada Language pilih Indonesia. Atau sesuaikan dengan bahasa blog anda.

Pada Name of the search engine, isi sesuai keinginan anda. Ini adalah nama unit Google CSE.

Selesai? Klik tombol CREATE 




Pada menu Look and feel, pilihlah Results only. Lalu klik tombol Save & Get Code

Akan muncul kode CSE yang tadi dibuat. Dan perhatikan bagian var cx = '0090xxxxxxxxxxxxxx:abcde_fg' Ini adalah search engine ID yang nanti kamu perlukan. Sementara simpan dulu di notepad.

B. Pengaturan di Blog

Cara perapkan pada blogger Langkahnya:
Untuk memperbagus tampilan, tambahkan dulu kode CSS berikut. Simpan ⏫ SEBELUM </style> ATAU </b:skin>.
 /* Related Post with Google CSE by Pirates Code */
#PCRelate {margin:0px; padding:0px; text-align:center; border-top:0px; border:1px solid #008c5f; border-top:0px} #PCRelate h3{font-size:18px; font:bold 18px Tahoma,sans-serif; margin:0px 0px 5px 0px; background:#008c5f; color:#fff; text-align:left; text-transform:uppercase; overflow:hidden; padding: 7px 20px}
#piratCSE {padding:0 20px 10px 20px; text-align:left; width:auto; height:100%; line-height:18px}
#piratCSE .cse .gsc-control-cse, .gsc-control-cse {padding:0px}
#piratCSE .gsc-control-cse {margin:0px; padding:0px}
#piratCSE .gsc-control-cse .gsc-table-result {margin:0 0 15px 0}
#piratCSE .gsc-results {width:100%}
#piratCSE .gsc-search-box, #piratCSE .gsc-above-wrapper-area, #piratCSE .gsc-resultsHeader {display:none}
#piratCSE .gsc-webResult .gsc-result {padding:0px}
#piratCSE .gsc-webResult .gsc-result:nth-child(4) {border-bottom:0}
#piratCSE .gs-result .gs-title, #piratCSE .gs-result .gs-title * {text-decoration:none; color:#008c5f; font-size:14px; font-weight:600; padding-bottom:18px}
#piratCSE .gs-result .gs-snippet {font-size:12px}
#piratCSE .gsc-reviewer, #piratCSE .gs-result a.gs-visibleUrl, #piratCSE .gs-result .gs-visibleUrl{color:#767676}
#piratCSE .gsc-table-cell-thumbnail, #piratCSE .gs-promotion-image-cell {padding-right:10px}
#piratCSE .gsc-results .gsc-cursor-box {margin:0px}
#piratCSE .gsc-preview-reviews ul {margin:0px}
#piratCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page, #piratCSE .gsc-cursor .gsc-cursor-page {color:#fff; text-decoration:none; margin:5px 10px 0 0; padding: 5px 10px; border-radius: 5px; display:inline-block}
#piratCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page {background:#2f303f !important}
#piratCSE .gsc-cursor .gsc-cursor-page {background:#008c5f}
#piratCSE .gsc-cursor .gsc-cursor-page:hover {background:#2f303f}
#piratCSE .gsc-url-top {padding:0px}
#piratCSE .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {color:#2f303f}
#piratCSE .gsc-thumbnail-inside {padding:0px} 

Cari kode <data:post.body/>. Gunakan shortcut CTRL + F untuk memudahkan. Jika ada beberapa kode, pilih yang terakhir. Tapi struktur setiap template pasti berbeda. Pastikan anda memilih salah satu yang work dengan template anda.

Simpan script berikut ⏬ SETELAH <data:post.body/>

<b:if cond='data:view.isPost'>
<div id='PCRelate'>
<h3>Artikel Terkait</h3>
<div id='piratCSE'/>
<script>//<![CDATA[
// Related Post with Google CSE piratescode
function piratCSE() {
  if (document.readyState != 'complete') {
    return google.setOnLoadCallback(piratCSE, true);
  }
  google.search.cse.element.render({gname:'gsearch', div:'piratCSE', tag:'searchresults-only', attributes:{linkTarget:'', webSearchResultSetSize:'small'}});
  var element = google.search.cse.element.getElement('gsearch');
  //]]>
  element.execute(&quot;<b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <data:label.name/> <b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if>&quot;);
  //<![CDATA[
};
window.__gcse = {
  parsetags: 'explicit',
  callback: piratCSE
};
(function() {
var cx = '0080xxxxxxxxxxxxxx:abcde_fg';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
//]]></script>
</div>
<div class='clear'/>
</b:if> 

Simpan Template


Fungsi Terbilang pada Delphi


Pada postingan ini akan membahas Fungsi Terbilang yang di gunakan untuk mengubah input dari angka menjadi output berupa huruf.


Berikut Langkah menggunakannya :

1. Buat Function menggunakan tipe Data string dan copykan kode berikut ini di bawah kode implementation atau anda bisa tempatkan di bawah syntax {$R *.dfm}


//Konversi Nilai Mata Uang ke dalam bahasa Indonesia

Function Terbilang(Uang:Int64):String;
Begin
      If (Uang = 1) Then Terbilang:='Satu '
      Else If (Uang = 2) Then Terbilang:='Dua '
      Else If (Uang = 3) Then Terbilang:='Tiga '
      Else If (Uang = 4) Then Terbilang:='Empat '
      Else If (Uang = 5) Then Terbilang:='Lima '
      Else If (Uang = 6) Then Terbilang:='Enam '
      Else If (Uang = 7) Then Terbilang:='Tujuh '
      Else If (Uang = 8) Then Terbilang:='Delapan '
      Else If (Uang = 9) Then Terbilang:='Sembilan '
      Else If (Uang = 0) Then Terbilang := ' '
      Else If (Uang = 10) Then Terbilang := 'Sepuluh '
      Else If (Uang = 11) Then Terbilang := 'Sebelas '
      Else If (Uang >= 12) And (Uang <= 19) Then Terbilang:=Terbilang(Uang Mod 10) + 'Belas '
Else If (Uang >=20) And (Uang <=99) Then Terbilang := Terbilang(Uang div 10) + 'Puluh ' + Terbilang(Uang Mod 10)
Else If (Uang >=100) And (Uang <=199) Then Terbilang := 'Seratus ' + Terbilang(Uang - 100)
Else If (Uang >= 200) And (Uang <=999) Then Terbilang := Terbilang(Uang div 100) + 'Ratus ' + Terbilang(Uang Mod 100)
Else If (Uang >=1000) And (Uang <=1999) Then Terbilang := 'Seribu ' + Terbilang(Uang - 1000)
Else If (Uang >=2000) And (Uang <=999999) Then Terbilang := Terbilang(Uang div 1000) + 'Ribu ' + Terbilang(Uang Mod 1000)
Else If (Uang >=1000000) And (Uang <=999999999) Then Terbilang := Terbilang(Uang div 1000000) + 'Juta ' + Terbilang(Uang Mod 1000000)
Else If (Uang >=1000000000) And (Uang <=999999999999) Then Terbilang :=Terbilang(Uang div 1000000000) + 'Milyar ' + Terbilang(Uang Mod 1000000000)
Else If (Uang >=1000000000000)  Then Terbilang :=Terbilang(Uang div 1000000000000) + 'Triliun ' + Terbilang(Uang Mod 1000000000000);
End;

2. Cara pemanggilan fungsi kode terbilang, Tambahkan komponen  TMemo, TEdit, TButton
3. Ubah nama komponen

        TEdit  ⏩  Edit1
        TMemo  ⏩  Memo1
        TButton  ⏩  Button1

4. Masukkan kode pemanggil terbilang pada TButton.Click seperti pada contoh berikut ini
procedure TForm1.Button1Click(Sender: TObject);
begin
 Memo1.Text := Terbilang(StrToInt64(Edit1.Text));
end;

untuk Contoh Sorce Code bisa download 

Via MEGA



19 July 2018

Template Blog magazine style SEO Friendly Responsive

Template-template blog dengan desain magazine style sangat cocok melengkapi segala jenis Blog Seperti Berita, Bisnis, Tutorial.



Berikut ini adalah Beberapa Template Gratis/Free yang bisa anda gunakan



1. Bpress - Magazine Responsive SEO Blogger Template


Live Demo- Download
2. Dynamic Mag -Magazine Responsive SEO Blogger Template


Demo - Download
3. Responsive Multipurpose Blogger Template v1.1


Demo. Download
4.Flat News -Magazine Responsive SEO Blogger Template


Live Demo - Download
5.Syahira -Magazine Responsive SEO Blogger Template


Demo - Download
6.Easy News -Magazine Responsive SEO Blogger Template

Demo - Download
7. My Extra News -Magazine Responsive SEO Blogger Template
Demo - Download
8.Cody -Magazine Responsive SEO Blogger Template


Demo - Download
9. Gravity Blogger Template High CTR Adsense


DEMO - DOWNLOAD
10. Fast Blog Responsive


Demo - Download
11. Sang Ads - Seo Friendly & Responsive High CTR Adsense Template


Demo - Download
12. Vikka Fast and Responsive High CTR Adsense Template


Demo - Download

13. Invision - Best Responsive High CTR Adsense Template


DEMO - DOWNLOAD
14. Axact v3.1 – Responsive Magazine Blogger Theme


Demo - Download

15. Setiva v1.6 – Responsive Magazine Blogger Template


Demo - Download

16. Magpress v3.1 – Magazine Responsive Blogger Template


DEMO - DOWNLOAD
17. MagOne v6.2.6 – Responsive News & Magazine Blogger Template


Demo - Download

18. Sevida v2.5 – Responsive Magazine Blogger Template


DEMO - DOWNLOAD

19. SILVANA – Blogger Template Responsive


Demo - Download

20. Apriezt v2.1 – Responsive Magazine News Blogger Theme


Demo - Download

21. SNews v1.5 – News / Magazine Responsive Blogger Theme


DEMO - DOWNLOAD
22. Punjab Press v5 Responsive Blogger Template


DEMO - DOWNLOAD

23. Ijonkz v2.0 – Responsive Magazine/News Blogger Template


Demo - Download

24. Apriezt v2.1 – Responsive Magazine News Blogger Theme

Demo - Download

25. Rifqiy v2.0 – Responsive Magazine/News Blogger Template

DEMO - DOWNLOAD

26. Maxxiz – Themeforest Responsive Magazine/News Blogger Template V1.3
Hasil gambar untuk Maxxiz – Themeforest Responsive Magazine/News Blogger Template V1.3
Demo - Download
27. Adamz v2.1 - Responsive Blogger Template

DEMO - DOWNLOAD
28. Ajbspot – Responsive MultiPurpose Blogger Template

DEMO - DOWNLOAD

29. XPress News – Responsive Blogger Magazine

Demo - Download

30. Geekish – Technology News Blogger Template

Demo - Download
31. Gagbox – Premium Memes Blogger Template

DEMO - DOWNLOAD

32. iPress – Multimedia Blogger Template

DEMO - DOWNLOAD
33. Extra News – Responsive Blogger Template

DEMO - DOWNLOAD

34. BlackNews – Magazine Premium Blogger Template
Demo - Download

35. Alpha
 
Demo - Download

36. Flat Mag – Responsive Magazine Blogger Template v1.2

Demo - Download


18 July 2018

Tombol Link chat ke applikasi messaging pada blogger

Messaging App adalah aplikasi untuk mengirim pesan. Seperti WhatsApp, Line, Telegram, Facebook Messenger, BBM, dan sebagainya. Aplikasi Messaging sangat membantu pembaca untuk menghubungi Contact Person Pengiklan. Hampir semua website yang berupa Jasa/Service, maupun Jual Beli pasti selalu mencantumkan kontak person yang bisa di hubungi. Dengan adanya link chat ke applikasi messaging, pengunjung akan bisa mudah menghubungi pengiklan hanya dengan sekali klik tanpa perlu simpan nomor atau menambah username terlebih dulu, mereka akan diantarkan ke link yang menuju chat.


Langkah-langkah memasang Tombol Link chat ke applikasi messaging pada Blog :
1. buka Blogger
Template ⏩Edit HTML, Kemudian cari kode ]]></b:skin> kemudian temukan kode <style> atau kode <style type='text/css'>.
2. copykan kode CSS berikut ini dibawah
kode yang anda temukan.

 /* Tombol Link chat ke applikasi messaging PiratesCode */
:root {
    --pccontact-WA: #2cda6d; /* Warna WhatsApp */
    --pccontact-Line: #00d500; /* Warna Line */
    --pccontact-Tele: #008fd5; /* Warna Telegram */
    --pccontact-Messenger: #2d9bff; /* Warna Messenger */
    --pccontact-BBM: #000000; /* Warna BBM */
    --pccontact-WA-usrname: "6281200000xxx"; /* Nomor WhatsApp */
    --pccontact-WA-text: "Assalamualaikum.Wr.Wb,%20saya%20telah%20menghubungi%20*anda%20melalui*%20halaman%20kontak%20pada%20website*"; /* Pesan WhatsApp */
    --pccontact-Line-usrname: "userLINEanda"; /* Username Line */
    --pccontact-Tele-usrname: "userTELEGRAManda"; /* Username Telegram */
    --pccontact-Messenger-usrname: "userMESSENGERanda"; /* Username Messenger */
    --pccontact-BBM-usrname: "222xxxx"; /* Pin BBM */
}
#pccontact {text-align:center; width:100%; line-height:0px}
#pccontact svg {width:55px;height:55px}
#pccontact a {text-decoration:none}
#pccontact .WA svg path {fill:var(--pccontact-WA)}
#pccontact .Line svg {width: 70px; height: 70px; margin-bottom: -20px; margin-left:20px} #pccontact .Line svg path {fill:var(--pccontact-Line)}
#pccontact .Tele svg path {fill:var(--pccontact-Tele)}
#pccontact .Messenger svg path {fill:var(--pccontact-Messenger)}
#pccontact .BBM svg path {fill:var(--pccontact-BBM)}
#pccontact .WA, #pccontact .Line, #pccontact .Tele, #pccontact .Messenger, #pccontact .BBM {display:inline-block; width:90px; text-align:center; margin:0 5px}
#pccontact .onoffswitch {    position: relative; width: 90px;    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;    margin-top:5px;}
#pccontact .onoffswitch-checkbox {    display: none;}
#pccontact .onoffswitch-inner {    display: block; width: 200%; margin-left: -100%;    transition: margin 0.3s ease-in 0s;}
#pccontact .onoffswitch-inner:before, .onoffswitch-inner:after {    display: block; float: left; width: 50%; height: 25px; padding: 0; line-height: 25px;    color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; text-align: center;    box-sizing: border-box;}
#pccontact .WA .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-WA); border-radius: 20px;}
#pccontact .WA .onoffswitch-inner:before {    content: var(--pccontact-WA-usrname);    background-color: var(--pccontact-WA); color: #FFFFFF;    font-size:11px;}
#pccontact .WA .onoffswitch-inner:after {    content: "WhatsApp";    color: var(--pccontact-WA);    font-size:14px;}
#pccontact .WA:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;}
#pccontact .Line .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-Line); border-radius: 20px;}
#pccontact .Line .onoffswitch-inner:before {    content: var(--pccontact-Line-usrname);    background-color: var(--pccontact-Line); color: #FFFFFF;    font-size:11px;}
#pccontact .Line .onoffswitch-inner:after {    content: "Line";    color: var(--pccontact-Line);    font-size:14px;}
#pccontact .Line:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;}
#pccontact .Tele .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-Tele); border-radius: 20px;}
#pccontact .Tele .onoffswitch-inner:before {    content: var(--pccontact-Tele-usrname);    background-color: var(--pccontact-Tele); color: #FFFFFF;    font-size:11px;}
#pccontact .Tele .onoffswitch-inner:after {    content: "Telegram";    color: var(--pccontact-Tele);    font-size:14px;}
#pccontact .Tele:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;}
#pccontact .Messenger .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-Messenger); border-radius: 20px;}
#pccontact .Messenger .onoffswitch-inner:before {    content: var(--pccontact-Messenger-usrname);    background-color: var(--pccontact-Messenger); color: #FFFFFF;    font-size:11px;}
#pccontact .Messenger .onoffswitch-inner:after {    content: "Messenger";    color: var(--pccontact-Messenger);    font-size:14px;}
#pccontact .Messenger:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;}
#pccontact .BBM .onoffswitch-label {    display: block; overflow: hidden;    border: 2px solid var(--pccontact-BBM); border-radius: 20px;}
#pccontact .BBM .onoffswitch-inner:before {    content: var(--pccontact-BBM-usrname);    background-color: var(--pccontact-BBM); color: #FFFFFF;    font-size:11px;}
#pccontact .BBM .onoffswitch-inner:after {    content: "BBM";    color: var(--pccontact-BBM);    font-size:14px;}
#pccontact .BBM:hover .onoffswitch-label .onoffswitch-inner {    margin-left: 0;} 




Format Penulisan
Tulisan yang dikirim harus sudah di-encode. Dalam contoh diatas, %20 merupakan tanda ganti untuk spasi. Berikut kode lain yang bisa digunakan:
%0A untuk baris baru (enter / line break).

%25 untuk persen (%)

%26 untuk dan (&)

%3A untuk titik dua (:)

%3B untuk titk koma.

%3F untuk tanda tanya (?)

Kode lainnya bisa kamu lihat di w3schools.com

Selain itu, anda juga dapat menggunakan format text bawaan pada WhatsApp. Contohnya:
*: *piratescode* untuk membuat huruf tebal (bold) piratescode

_: piratescode untuk membuat huruf miring (italic) piratescode

~: ~piratescode~ untuk membuat huruf tercoret (strikethrough) piratescode

```: ```piratescode``` untuk membuat huruf monospace piratescode





untuk memanggil perintah tombol menuju chat langsung ke WhatsApp dan aplikasi lainnya. Tambahkan kode HTML ini dimanapun yang anda inginkan. Bisa di widget, postingan, atau halaman statis. Tanpa mengubah kode apapun, karena kode tersebut sudah diatur pada kode CSS sebelumnya.

 <div id="pccontact">
    <div class="WA">
        <a href="javascript:void(0)" onclick="window.open('https://api.whatsapp.com/send?phone='+getComputedStyle(document.querySelector('#pccontact .WA .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;','')+'&text='+getComputedStyle(document.querySelector('html'), ':root').getPropertyValue('--pccontact-WA-text').replace('&quot;','').replace('&quot;',''))" title="WhatsApp" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"></path></svg>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                </label>
            </div>
        </a>
    </div>
    <div class="Line">
        <a href="javascript:void(0)" onclick="window.open('http://line.me/ti/p/~'+getComputedStyle(document.querySelector('#pccontact .Line .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Line" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M 12.91 6.57 c 0.232 0 0.42 0.19 0.42 0.42 c 0 0.23 -0.188 0.42 -0.42 0.42 h -1.17 v 0.75 h 1.17 c 0.232 0 0.42 0.188 0.42 0.42 c 0 0.23 -0.188 0.42 -0.42 0.42 h -1.59 c -0.23 0 -0.418 -0.19 -0.418 -0.42 V 5.4 c 0 -0.23 0.188 -0.42 0.42 -0.42 h 1.59 c 0.23 0 0.418 0.19 0.418 0.42 c 0 0.232 -0.188 0.42 -0.42 0.42 h -1.17 v 0.75 h 1.17 Z m -2.57 2.01 c 0 0.18 -0.116 0.34 -0.288 0.398 c -0.043 0.014 -0.088 0.02 -0.133 0.02 c -0.14 0 -0.26 -0.06 -0.34 -0.167 L 7.95 6.62 v 1.96 c 0 0.23 -0.186 0.42 -0.42 0.42 c -0.23 0 -0.417 -0.19 -0.417 -0.42 V 5.4 c 0 -0.18 0.115 -0.34 0.286 -0.397 c 0.04 -0.015 0.09 -0.022 0.13 -0.022 c 0.13 0 0.25 0.07 0.33 0.17 L 9.5 7.37 V 5.4 c 0 -0.23 0.188 -0.42 0.42 -0.42 c 0.23 0 0.42 0.19 0.42 0.42 v 3.18 Z m -3.828 0 c 0 0.23 -0.188 0.42 -0.42 0.42 c -0.23 0 -0.418 -0.19 -0.418 -0.42 V 5.4 c 0 -0.23 0.188 -0.42 0.42 -0.42 c 0.23 0 0.418 0.19 0.418 0.42 v 3.18 Z M 4.868 9 h -1.59 c -0.23 0 -0.42 -0.19 -0.42 -0.42 V 5.4 c 0 -0.23 0.19 -0.42 0.42 -0.42 c 0.232 0 0.42 0.19 0.42 0.42 v 2.76 h 1.17 c 0.232 0 0.42 0.188 0.42 0.42 c 0 0.23 -0.188 0.42 -0.42 0.42 M 16 6.87 C 16 3.29 12.41 0.376 8 0.376 S 0 3.29 0 6.87 c 0 3.208 2.846 5.896 6.69 6.405 c 0.26 0.056 0.615 0.172 0.705 0.394 c 0.08 0.2 0.053 0.51 0.026 0.72 l -0.11 0.68 c -0.03 0.2 -0.16 0.79 0.7 0.43 c 0.86 -0.36 4.61 -2.72 6.29 -4.65 C 15.45 9.59 16 8.3 16 6.87"></path></svg>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                </label>
            </div>
        </a>
    </div>
    <div class="Tele">
         <a href="javascript:void(0)" onclick="window.open('https://telegram.me/'+getComputedStyle(document.querySelector('#pccontact .Tele .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Telegram" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z"></path></svg>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                </label>
            </div>
        </a>
    </div>
    <div class="Messenger">
        <a href="javascript:void(0)" onclick="window.open('https://m.me/'+getComputedStyle(document.querySelector('#pccontact .Messenger .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="Messenger" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" ></path></svg>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                </label>
            </div>
        </a>
    </div>
    <div class="BBM">
        <a href="javascript:void(0)" onclick="window.open('http://pin.bbm.com/'+getComputedStyle(document.querySelector('#pccontact .BBM .onoffswitch-inner'), ':before').getPropertyValue('content').replace('&quot;','').replace('&quot;',''))" title="BBM" target="_blank">
            <svg viewBox="0 0 24 24"><path d="M5.45,10.28C6.4,10.28 7.5,11.05 7.5,12C7.5,12.95 6.4,13.72 5.45,13.72H2L2.69,10.28H5.45M6.14,4.76C7.09,4.76 8.21,5.53 8.21,6.5C8.21,7.43 7.09,8.21 6.14,8.21H2.69L3.38,4.76H6.14M13.03,4.76C14,4.76 15.1,5.53 15.1,6.5C15.1,7.43 14,8.21 13.03,8.21H9.41L10.1,4.76H13.03M12.34,10.28C13.3,10.28 14.41,11.05 14.41,12C14.41,12.95 13.3,13.72 12.34,13.72H8.72L9.41,10.28H12.34M10.97,15.79C11.92,15.79 13.03,16.57 13.03,17.5C13.03,18.47 11.92,19.24 10.97,19.24H7.5L8.21,15.79H10.97M18.55,13.72C19.5,13.72 20.62,14.5 20.62,15.45C20.62,16.4 19.5,17.17 18.55,17.17H15.1L15.79,13.72H18.55M19.93,8.21C20.88,8.21 22,9 22,9.93C22,10.88 20.88,11.66 19.93,11.66H16.5L17.17,8.21H19.93Z" ></path></svg>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
                <label class="onoffswitch-label" for="myonoffswitch">
                    <span class="onoffswitch-inner"></span>
                </label>
            </div>
        </a>
    </div>
</div> 





Toko Online Pada Blogspot

Cara Mudah Membuat Toko Online (Online Store) di Blog Blogspot (Blogger).

CARA membuat toko online (online store, online shop) di Blog Blogspot sangat mudah dan gratis!
Caranya, anda harus memiliki blog dulu dengan membuka www.blogger.com, lalu isi "formulir" yang ada, maka otomatis Anda akan punya email gmail sekaligus bisa lanjut otomatis dengan membuat blog.


Toko online merupakan sarana atau tempat berbelanja yang menggunakan website sebagai tokonya. Sama halnya dengan toko konvensional atau toko nyata, toko online juga memiliki produk yang dijual, hanya saja dipajang dalam bentuk gambar yang terdapat pada website toko online.


Kenapa Harus Toko Online?

Saat ini toko online di Indonesia mulai berkembang pesat. Semakin banyak orang yang menggunakan internet untuk membeli dan menjual barang ataupun jasa.

Toko online di Indonesia memang sangat cocok sekali karena letak geografis indonesia yang kepulauan, memungkinkan kita untuk membeli barang tanpa perlu datang ketempat penjual.

Dengan toko online target pasar produk kita pun lebih luas, tidak hanya di seluruh Indonesia saja tetapi juga bisa menjangkau di seluruh dunia. Seumpama kita ga punya toko untuk menggelar dagangan kita atau rumah kita berada jauh dari keramaian ga masalah, karena kita bisa menggelar dagangan kita lewat toko online.

Anda bisa mulai membangun usaha toko online dengan modal yang bisa dibilang relatif kecil. Salah satu hal yang dirasakan sebagai kendala utama dalam memulai sebuah usaha adalah karena untuk membuka usaha tersebut membutuhkan modal yang tidak sedikit. Beruntung kita dengan adanya perkembangan teknologi yang begitu pesat sehingga memungkinkan kita untuk mencari uang di internet.

Peluang Bisnis Toko Online Bisa Dijalankan Oleh Semua Orang. Semua orang berpeluang untuk menghasilkan uang melalui toko online, toko online merupakan solusi terbaik bagi pemula yang ingin memulai bisnis di internet.

Apa Yang Dibutuhkan untuk Bisnis Toko Online?

Caranya cukup mudah:
  1. Anda harus mempunyai produk atau jasa untuk dipromosikan dan dijual.
  2. Membuat web atau blog toko online untuk memajang produk yang Anda jual.
  3. Promosi! Offline dan Online. Offline, bisa bikin kartu nama, brosur, spanduk, iklan di radio, iklan di koran, majalah, dll.
  4. Optimalisasi SEO Blog Anda! Cari template yang SEO Ready dan Fast Loading!

Koleksi Template Blog Toko Online

Berikut ini beberapa template blog toko online gratis, free download, yang bisa digunakan di blog toko online Anda, atau anda juga bisa memodifikasinya agar tampilan web terlihat elegan.




Blackstore Template -Template Blog Toko Online

Demo | Download


Shopping Cart -Template Blog Toko Online

Demo | Download


Johny Joss -Template Blog Toko Online

Live Demo | Download


Johny Magstore -Template Blog Toko Online

Live Demo | Download


Blogger Store -Template Blog Toko Online

Live Demo | Download


Demo2 Ecommerce -Template Blog Toko Online

Live Demo | Download


Shoppaholic Boutique - Online Shopping Store Blogger Template

DEMO | DOWNLOAD


Johny Ganteng Cart - Online Shopping Store Blogger Template

DEMO | DOWNLOAD


Shopping Cart - Online Shopping Store Blogger Template

DEMO | DOWNLOAD


Online Shopping Store Blogger Template

DEMO | DOWNLOAD


sumber : contohblog.com