Regex Remove Everything Between Two Tags Notepad++

Regex Remove Everything Between TWo Tags Notepad++ Ada suatu ketika saya mempunyai banyak sekali file HTML. File-file HTML ini terkumpul menggunung secara tidak terasa dari kebiasan ketika melakukan save file saat surfing. Ketika menemukan artikel yang dianggap penting langsung melakukan save agar dikemudian hari bisa dibuka kembali bahkan lebih dari itu untuk diarsip.

Tentu saja bagian yang ingin diarsip adalah artikel utama saja. Bagian lainnya misalnya widget (sidebar dan footer) atau komentar tidak akan diambil. Untuk itu, sebelumnya harus dilakukan pembersihan dahulu dari kode-kode yang tidak diperlukan. Misalnya kode diantara style dan script yang biasanya panjang sekali bahkan hingga ratusan baris. Dengan regex, sekali klik kode-kode tersebut bakal dengan mudah dilenyapkan. Pilih Replace All atau bahkan bila semua file HTML sedang dibuka Replace All in All Opened Documents



Membuang apapun antara tag style dan script.

HTML
<style><]*>.*?</style>
<script><]*>.*?</script>

Regex lainnya yang barangkali diperlukan. Regex ini akan menghilangkan properti width dan height (biasanya pada tag img dan juga class). Regex ini saya perlukan untuk mengembalikan gambar atau lainnya pada ukuran semula sesuai aslinya (barangkali saja ada yang telah diperkercil)

HTML
width="[^"]*"
height="[^"]*"
class="[^"]*"

Simple Pre Code

Bagi temans yang yang mempunyai situs blogspot dengan sering memposting kode HTML, CSS, JavaScript atau kode lainnya tentu sudah tidak asing dengan tag pre. Biasanya kode-kode yang dibungkus menggunakan tag pre diperuntukkan untuk postingan tutorial.



Artikel ini akan membahas cara mengembangkan tag pre agar tampilannya berbeda dari yang biasa. Kode inilah juga yang digunakan di situs dezulblog.blogspot.com

Buka Blogger > Template > Klik Edit HTML > Simpan kode CSS di bawah ini sebelum ]]></b:skin> atau </style>

CSS

pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

Berikutnya simpan script di bawah ini sebelum tag penutup </body>

JS

<script type='text/javascript'>

//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Script di atas berfungsi untuk menyeleksi otomatis setiap sobat melakukan klik dua kali pada area yang dibungkus tag pre, kbd, dan blockquote.

Setelah itu simpan template.

Untuk penerapan pada postingan, silakan tambahkan kode di bawah ini pada tab HTML post

HTML

<pre class='code code-html'><label>HTML</label><code>... kode 

HTML (yang telah diparse) di sini ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Sumber: http://www.arlinadzgn.com/2015/04/simple-pre-code-dengan-seleksi.html

Memasang Kode Javascript Iklan di Atas Samping Postingan

Memasang Kode Javascript Iklan di Atas Samping Postingan Pada artikel sebelumnya kita telah membuat image dan teks random berbasis Javascript. Script Javascript tersebut bisa digunakan untuk membuat iklan produk yang akan kita tawarkan. Iklan akan menampilkan gambar dan teks berserta judul yang berganti berbeda-beda setiap kali halaman situs direfresh.

Baca juga: Cara membuat iklan random image dan teks berbasis Javascript.




Sekarang saatnya memasukkan kode script tersebut ke blog agar muncul di setiap halaman blog.

1. Parse terlebih dahulu kode Javscript di HTML Escape

Memasang langsung kode Javascript ke template postingan blogspot akan menimbulkan error, karenanya kode Javascript harus diparse terlebih dahulu. Kopi kode Javascript random iklan dan pastekan di sana kemudian klik Escape.

2. Masuk ke akun blog, pilih Template > Edit HTML

3. Cari kode berikut. Sebaiknya gunakan fitur Searching (Ctrl F)

HTML

<data:post.body/>,

tepat di atas kode tersebut, sisipkan kode berikut ini

HTML

<div style="float:left; margin-right:15px;margin-bottom:15px">
.... 
...Kode Javascrit hasil parse...
... 
</div>

Catatan: ganti left dengan right bila iklan ingin dimunculkan di kanan postingan.

Membuat Random Teks dan Image dengan Javascript

Kali ini kita akan membuat teks dan image secara random dengan javascript. Image dan teks bisa disisipkan link ke halaman atau situs tertentu. Dengan demikian, image dan teks link random ini bisa digunakan untuk keperluan iklan. Teks dan image akan dirandom dan muncul bergantian ketika halaman dibuka atau pengunjung berpindah halaman.

Kode Javascript ini bisa dipasang di widget sidebar, footer, header atau bahkan bagian dipostingan artikel untuk situs blogspot. Untuk pemasangan kode random image dan teks yang dipasang di postingan artikel silakan baca petunjuknya di sini

JS

<script type="text/javascript">

quotes = [];
desc = [];
quotes[0] = "<a class='iklan' target='_blank' href='http://link#0'><h4><img class='imgiklan' src='http://link-image#0'> Judul-Iklan#0</h4></a>";
desc[0] = "Deskripsi-Iklan#0";
quotes[1] = "<a class='iklan' target='_blank' href='http://link#1'><h4><img class='imgiklan' src='http://link-image#1'> Judul-Iklan#1</h4></a>";
desc[1] = "Deskripsi-Iklan#1";
quotes[2] = "<a class='iklan' target='_blank' href='http://link#2'><h4><img class='imgiklan' src='http://link-image#2'> Judul-Iklan#2</h4></a>";
desc[2] = "Deskripsi-Iklan#2";

index = Math.floor(Math.random() * quotes.length);

document.write(quotes[index]);
document.write(desc[index]);

</script>

Catatan
Tentu saja alamat gambar, deskripsi dan link tujuan harus Anda ganti sesuaikan kebutuhan.
Anda bisa menambahkan gambar, deksripsi dan link sebanyak-banyaknya sesuai dengan kebutuhan

Membuat Slider Banner dengan Bootstrap

Untuk mempercantik tampilan situs juga untuk menarik perhatian pengunjung situs dibuatlah banner. Banner bisa berisi fitur unggulan situs (produk) atau bisa juga info promo yang sedang gencar disosialisasikan. Banner biasanya statis hanya satu gambar. Apabila ada banyak banner yang ingin ditampilkan di satu tempat maka dijadikanlah slide banner.

Bagi yang menggunakan CMS misalnya Wordpress, tentu sudah teredia banyak pilihan plugin slide banner yang bisa diambil. Namun bagi yang membangun situs dengan mengkoding dari awal, fitur yang ada di Bootstrap bisa jadi salah satu soluli. Ya, Bootstrap menyediakan fitur Carousel, yang bisa dimanfaatkan untuk membuat slide banner.

Pengantar dirasa sudah cukup. Tanpa banyak ba-bi-bu berikut ini adalah skrip membuat slider banner dengan Caraosel Bootstrap. Ganti alamat image dengan yang alamat yang kamu gunakan.

HTMLImage SLider dengan Bootstrap 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>SlideShow Example http://dezulblog.blogspot.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">

<h1>Slideshow dengan Bootstrap</h1>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#myCarausel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarausel" data-slide-to="1"></li>
    <li data-target="#myCarausel" data-slide-to="2"></li>
    <li data-target="#myCarausel" data-slide-to="3"></li>
</ol>

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="img/header-1.jpg">
    </div>
    
    <div class="item">
        <img src="img/header-2.jpg">
    </div>
    
    <div class="item">
        <img src="img/header-3.jpg">
    </div>
    
    <div class="item">
        <img src="img/header-4.jpg">
    </div>      
</div>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    
</div>
</div>

</body>
</html>

Download Kode

Download Ebook Photoshop

Download Ebook Photoshop. Photoshop adalah aplikasi untuk mengolah file bitmap. Penjelasan sederhannya, Photoshop adalah untuk mengolah foto. Tentu foto sendiri cakupannya luas. Mulai dari hasil jepretan hape hingga kamera profesional.

Photoshop dipergunakan luas untuk keperluan pengolahan digital baik untuk keperluan advertising dan publishing. Atau sekadar ganti dan permak foto wajah :D untuk keperluan narsis di facebook.

Download Ebook Photoshop ini berisi tutorial cara pake photoshop. Syarat untuk mendownload ebook ini adalah agan harus nubi. Kalau tidak maka agan akan seperti anak SMA yang membaca buku matematika SD kelas 3. :P

----------
Klik untuk download
----------

SMS Gateway dengan Nokia PC Suite

Bila Agan seorang yang beraktifitas membuka toko online alias online shop, kegiatan berSMS-an merupakan rutinitas. Kecuali bila toko online Agan telah diotomasi proses ordernya melalui fitur keranjang belanja atau via telepon dengan banyak Customer Service. Namun bagi keumuman orang Indonesia, melakukan pesanan atau order melalui SMS (atau BBM) adalah pilihan favorit. Calon konsumen biasanya bertanya dulu tentang produk, harga dan lainnya (sekalipun itu telah dituliskan jelas di deskripsi produk) sebelum mengambil keputusan untuk pembelian. (Mungkin) kegiatan berSMS hanya cocok untuk toko online kecil yang dikelola oleh perorangan.
Bagaimana Agan selama ini menjawab pertanyaan-pertanyaan calon konsumen Agan? Apakah menjawab dari HP langsung dengan mengetik di keypad HP ataukah dengan cara lainnya? Bila mengetik langsung di HP tentu merepotkan sekalipun keypad HPnya QWERTY karena biasanya pertanyaan yang sering ditanyakan oleh calon konsumen kebanyakan pertanyaan berulang. Terlebih bila sedang melayani beberapa calon konsumen sekaligus. Bisa-bisa salah kirim SMS dan jari bisa keriting, he he.

Ada solusi agar lebih mudah menjawab SMS untuk kegiatan online shop yaitu dengan SMS gateway. SMS gateway diinstall di komputer PC atau laptop kemudian komputer dihubungkan dengan Handphone melalui kabel data atau Bluetooth. Untuk yang praktis, pilihlah bluetooth. Nantinya kegiatan SMS (menerima dan manjwab) dilakukan dari komputer. Untuk menjawab SMS ke konsumen, menurut saya lebih cepat dilakukan dari computer dengan mengetik di keyboard. Untuk beberapa jawaban berulang dan baku bisa dilakukan copy paste. Begitupun untuk memenuhi keinginan calon konsumen yang kebanyakan ingin layani fast respond.

Di jagad internet, ada beberapa tawaran aplikasi SMS Gateway berbayar dengan harga tertentu dengan banyak fitur. Selain fitur standar menerima dan menjawab SMS, SMS gateway berbayar mampu melakukan misalnya menjawab otomatis, melakukan broadcast (kirim SMS ke banyak orang sekaligus), dll. Namun di sini kita tidak akan bahas SMS Gateway berbayar tersebut. Yang akan di bahas di sini adalah SMS gratis bawaan pabrikan Handphone, yatu Nokia PC Suite. Sesuai dengan namanya handphonenya tentu saja harus merk NOKIA. Tidak perlu yang highend. Untuk lebih praktis, pilihlah bluetooth sebagai koneksi komputer dengan handphone. Bila komputer Agan belum ada bluetoothnya, Agan bisa beli Bluetooth dongle. Bentuknya seperti USB Flash disc (bahkan lebih kecil).

Instalasi NOKIA PC suite di komputer

1. Download aplikasi PC Nokia Suite di link ini
2. Lakukan instalasi PC Suite dengan mendouble klik file .exe hasil download. Pilih Next > Next dan default yang dipilihkan oleh system. Karena aplikasi ini gratis, Agan tidak akan diminta untuk mengisi nomor serial, crack atau sejenisnya.
3. Instalasi selesai dan silakan koneksikan handphone dan aplikasi.
4. Lakukan tes kirim dan terima SMS

Baca juga Cara instalasi dongle Bluetooth di komputer


Contoh dongle Bluetooth

[SOLVED] Bluetooth Peripheral Device Driver, Solving Steps

Harusnya ketika memasukkan dongle bluetooth ke lubang USB, bluetooth akan otomatis terdeteksi dan melakukan instalasi dengan driver bawaan Windows tanpa ba bi bu layaknya kita memasukkan mouse USB. Device bisa langsung dipakai. Namun untuk beberapa versi windows, bluetooth gagal diinstall. Bila Agan mengalami kasus serupa ini, berikut ini solusinya.

[Solved] Bluetooth Peripheral Device Driver, Solving Steps

#Steps:
1. In the Bluetooth device window, right-click the phone icon and select 'Properties'
2. Click 'Hardware' tab then 'Properties'
3. Click 'Change settings'
4. Select the 'Driver' tab, then 'Update driver...'
5. Click the second option: "Browse my computer for driver software"
6. Click to choose the option "Let me pick from a list of device drivers on my computer"
7. From the list "Common hardware types", Select 'Ports (COM & LPT)'
8. Two droplists appear. Choose 'Microsoft' in the "Manufacturer" list, then 'Standard Serial over Bluetooth link' in the "Model" list
9. A warning window pops up. Ignore it by clicking 'Yes'
10. 'Close' and done!

#Download The Driver:
http://adf.ly/t0WNx (skip ad 2 times)
Click file download (("file menu" appears within the page,not the browser's menu))

#How to Manually install the Downloaded Driver
Apply the steps that are in the video first, and if you didn't get the same menu like me then, download this

http://adf.ly/t0WNx (skip ad 2 times)
Download & extract it & try to install one of these drivers for your "peripheral "
1-Open "Device Manager"
2-Right Click on your peripheral
3-Click "Update Driver"
4-Choose Browse my computer for driver software
5-browser for the folder that is the result of extracting the "bluetooth.rar" you have been downloaded
6-check the "Include sub-folders" option on the same window
7-click "next"
8-click "close"

#Another Solution using a third party software
1-Un-install your current version (BlueSoleil 10) first
2-Download and install this :
http://adf.ly/rZsOu
3-Add these registry keys by double click:
http://adf.ly/rZsQh
4-Add the following to your host file:
go to
C:\Windows\System32\drivers\etc\hosts
open it with notepad
Paste this at the end of the file:
127.0.0.1 license.bluesoleil.com
127.0.0.1 license2.bluesoleil.com
127.0.0.1 license3.bluesoleil.com
127.0.0.1 www.bluesoleil.com
5-Prevent the following files form connecting to the Internet via windows Firewall:
(go to firewall turn it on,then choose advanced settings,select outbound,select new rule,program,browse for these files in bluesoleil installation folder,block the connection.give it any name,finish"Do this with each file")
BlueSoleil.exe
BsMobileCS.exe
BlueSoleilCS.exe
BsHelpCS.exe
BtTray.exe
6-Restart Your PC.
7-Run the bluesoleil Now & Teset It.

Membuat Situs Galeri Produk Kaos Ocean Seven

Di forum FJB, persaingan makin sengit aja gan. Mungkin yang dulu pembeli sekarang malah ikutan jadi penjual. :D. Sekarang trit disundul, sekian menit kemudian tenggelam entah ada di halaman berapa. Di marketplace seperti txkxbxgus aturannya makin ketat. Dibatasi sekian iklan, waktu tayang berbatas waktu dan harus melewati approve yang malahan seringnya gagal lolos. Maaf gan curcol, itu hanyalah pengalaman ane. Yang lain mungkin tidak mengalami seperti itu.

Saatnya cari alternatif media untuk memasarkan produk yaitu dengan membangun situs. Sesederhana apapun. Di situs tersebut tempat pajang produk dan juga info promo, update dan lainnya. Situs juga memungkinkan konsumen potensial bisa kembali sewaktu-waktu. Untuk jangka panjang situs bisa diindeks oleh mesin pencari sehingga akan muncul dalam hasil pencarian.

Tutorial membuat galeri produk ini menggunakan skrip Wordpress. Kasusnya yaitu membuat situs galeri pajangan jualan dengan studi kasus produk kaos Ocean Seven. Jadi setelah mengikuti tutorial ini, agan mempunyai situs yang langsung tersisi 350 entri postingan produk.



Demo

Tools yang dibutuhkan

FileZilla untuk upload file ke server. Download di sini
Winzip, 7zip atau semacamnya untuk ektrak file
Skrip katalog. Download di sini (link Box telah diupdate)
Postingan katalog. Download di sini (link Box telah diupdate)

Di Install di mana?

Localhost
Agan berarti memerlukan server di komputer, bisa menggunakan XAMPP atau yang lainnya. Tutorial cara install worpress pake XAMPP sudah banyak. Silakan cari. Untuk yang akan install galeri di localhost setelah jadi nanti, harus terkoneksi ke internet karena gambar produk pada postingan ini disimpan di server google. Bila tidak, gambar produk di galeri katalog tidak muncul. Install di localhost tidak dibahas di sini

Hosting dan Domain Gratisan
Mau coba-coba dulu bagaimana caranya install skrip di web server? Boleh pake yang gratisan. Ada banyak penyedia layanan hosting dan domain gratisan. Namanya gratisan, domain dan hosting gratis mempunyai banyak keterbatasan. Salah satunya sering down. Harus sabar bila menggunakan yang gratisan. Untuk yang support bahasa Indonesia, bisa daftar dan kemudian buat akun domain dan hosting gratis di sini

Hosting dan Domain Berbayar
Untuk jangka panjang sebaiknya menggunakan hosting dan domain berbayar. Saat ini banyak hosting dan domain murah dengan space gede bahkan unlimited. Agan bisa upgrade hosting gratisan menjadi akun premium.

1. Upload File ke Sever

Untuk memulai langkah ini, asumsinya Agan sudah mempunyai domain dan hosting. Bisa yang gratisan ataupun berbayar. Agan sudah mempunyai alamat situs (domain), username dan password untuk masuk ke cpanel.

Lihat artikel sebelumnya, klik di sini.

2. Buat Database

Klik artikel sebelumnya di sini

Membuat database selesai, catatlah informasi-informasi tersebut (copy paste ke Notepad) karena mereka dibutuhkan ketika instalasi skrip nanti.

3. Unzip Skrip di Cpanel

Keterangannya klik di sini

4. Instalasi Skrip

Keterangannya klik di sini

5. Upload Postingan

5.1. Aktifkan Plugin
Login ke situs dengan menuliskan http://namasitusagan/wp-admin. Isikan username dan password ketika instalasi skrip.
Pilih menu Plugin dan aktifkan untuk plugin berikut ini (lihat gambar)

5.2. Upload Postingan
Ini yang paling penting. Link download postingannya ada di atas. Setelah download, lakukan ektrak dulu menggunakan WinZip.
Tools > Import > Wordpress
Tunggu hingga upload selesai.

5.3. Publish Gambar
Postingan masuk dengan status Draft. Untuk mem-publish banyak postingan sekaligus, silakan lihat gambar.

6. Pilih Themes

Menu Themes > Aktifkan Asteria Lite



Sekarang saatnya lihat situs Agan dalam tampilan depan dengan menulis alamat situs agan di browser

Hingga langkah ini, tutorial telah selesai.

Selanjutnya silakan agan atur bagian related product, pengaturan banner slide dan buat halaman keterangan lainnya sesuai kebutuhan.

Cara Instalasi Skrip Wordpress

Cara Instalasi Skrip Wordpress
Silakan baca postingan sebelumnya tentang upload file, buat database, ekstrak file di cpanel

Instalasi Skrip Wordpress
Tuliskan nama alamat situs agan di browser. Isikan nama informasi sesuai yang diberikan ketika melakukan pembuatan database.

Langkah 1


Langkah 1


Langkah 1


Langkah 1


Langkah 1


Langkah 1

Cara Unzip File zip di Cpanel

Cara Unzip File zip di Cpanel

Unzip File zip di Cpanel

Masih di cpanel, masuklah ke File Manager. Klik ikon bergambar file manager di halaman depan cpanel dan masuklah ke folder_html. Agan akan melihat file skrip yang tadi diupload melalui FileZilla di halaman public_html. Klik file tersebut dan klik tombol unzip.

Langkah 1


Langkah 2


Langkah 3


Langkah 4


Langkah 5

Cara Buat Database di Cpanel

Buat Database

Untuk membuat database, Agan harus masuk ke cpanel. Info alamat URL lokasi cpanel berbeda-beda. Ada yang http://namasitusanda.com/cpanel atau ada juga http://cpanel.namapenyediahosting/. Informasi alamat cpanel, username dan password akan dikirimkan ke Agan melaui email setelah pendaftaran domain dan hosting selesai.

Tampilan cpanel pun berbeda-beda, namun menunya sama. Untuk membuat database, cari saja ikon yang bertuliskan Database. Untuk gambar ilutrasi di tutorial ini mengambil tampilan paling umum dari cpanel.

Informasi yang harus dimasukkan ke dalam database adalah nama database, username dan password. Silakan Agan tentukan sendiri untuk nama-nama ini.

Setelah membuat database selesai, catatlah informasi-informasi tersebut (copy paste ke Notepad) karena mereka dibutuhkan ketika instalasi skrip nanti.

Langkah 1


Langkah 2


Langkah 3


Langkah 4


Langkah 5


Langkah 6

Cara Upload File ke Server Menggunakan FileZilla

Upload File ke Sever Menggunakan FileZilla

Untuk melakukan upload file, gunakan aplikasi FileZilla. Masukan nama situs, username dan password cpanel pada kolom isian yang bersesuain. Simpan file skrip wp-o7-free.zip (hasil download di atas) di folder public_html

Membuat Situs Galeri Produk Kaos Ocean Seven dengan Blogspot

Judul menggunakan kata Ocean Seven karena tutorial ini membahas situs blogspot galeri produk dengan postingan instan langsung berupa 300 entri kaos Ocean Seven. Template blogspot bisa digunakan untuk galeri produk lainnya.



Catatan.
Kita akan memasukkan langsung postingan produk Ocean Seven setidaknya 300 produk. Kadang blogspot menganggap postingan dengan jumlah ratusan sekaligus sebagai autoblog. Kadang situs dianggap sebagai spam karena melakukan postingan jumlah ratusan dalam sekejap. Sehingga akun blogspot dibanned. Saya pribadi berkali-kali melakukan ini aman-aman saja. Untuk berjaga-jaga terhindar dari banned. Sebaiknya gunakan akun blogspot yang benar-benar baru. Bahkan kalau bisa buat gmail baru untuk keperluan eksperimen ini. Saya sudah memperingatkan. Use your own risk.

Baiklah kita mulai
1. Daftar Blogspot.
Daftar blogspot sangat mudah. Modalnya hanya akun Gmail. Tutorialnya banyak sekali. Tidak akan dibahas di sini.

2. Download Themes
Download Themes Galeri di sini
Themes Blogspot responsive (tampilan layar menyesuaikan perangkat yang digunakan untuk membuka situs)
Ekstrak themes hasil download. Gunakan WinZIP.



3 Install Themes Blogspot
Pilih Template > Backup Restore > telusuri file themes > Upload



4. Customize Themes
o. Baris 653 atau sekitarnya (kadang beda) ganti dengan alamat blogspot Agan
o. Baris 1938 atau sekitarnya ganti dengan alamat facebook fan page Agan
o. Baris 1939 atau sekitarnya dengan twitter Agan
o. baris 1940 atau sekitarnya dengan alamat google plus Agan
o. Bila Agan tidak mempunya alamat fb dll, ganti saja alamatnya dengan # (tanda pagar)



5. Atur Layout
Layout > Remove widget yang ada di bagian atas posting. Atur widget agar ditempatkan di bagian sidebar dan footer





6. Import Produk
o. Ini yang paling penting. Download file untuk postingannya di sini
o. Ekstrak gunakan WinZip
o. Setting > Other > Import Blog
o. Uncek pilihan langsung Publish. Posting produk akan masuk ke dalam halaman Draft. (lihat gambar)
o. Tunggu sebentar hingga proses import selesai.
o. Bila sudah selesai. Agan akan melihat postingan di halaman Draft. Untuk mempublish banyak postingan klik kotak di atas postingan kemudian klik publish. (lihat gambar)
o. Selesai. Agan sudah mempunyai situs galeri produk Ocean Seven dengan 300 Produk.

Beritahu link alamat situs ini ke konsumen agan. Agan bisa melakukan update prostingan berupa update produk baru dll di situs

One Column Responsive Free Template Blogspot

Template ini masih keturunan dari Johny Ribet miliknya Mas Kolis.

Kebetulan saya membutuhkan template blogspot dengan hanya satu kolom. Jadinya si Johny Ribet ini dimodifikasi dengan membuang sidebar dan menjadikan kolom artikel penuh.

Ada empat varian One Column Responsive Free Template Blogspot si Johny Ribet ini. Bila Agan membutuhkan untuk keperluan blogspot silakan download.

Sesuai dengan Johny Ribet aslinya, template ini telah Related Post with Thumbnail ready.

Johny Ribet SOKLAT

Download 

Johny Ribet RED-ON

Download

Johny Ribet BLACKOK

Download

Johny Ribet BULAO

Download