mizipediacom Welcome To My Website

Press Enter To Search

24 April 2018

Cara Mudah Membuat Tombol Reaksi di Bawah Artikel Pada Blogger

cara mudah membuat tombol reaksi di bawah artikel pada blogger. Malam ini saya akan berbagi cara membuat tombol reaksi di bawah artikel/ postingan blog, namun di antara para blogger ada yang suka memasang tombol reaksi dan ada juga yang tidak suka memasang nya. 

Sebenarnya dengan kita memasang tombol reaksi tersebut tentu menurut saya sangat berguna pada blog kita. Mengapa demikian karena kita bisa mengetahui apa reaksi pembaca terhadap tulisan yang kita tulis bagus atau tidak nya, dengan begitu bisa menjadi motivasi bagi kita sendiri untuk memperbaiki content yang kita buat.
Sebelumnya saya juga pernah mencoba untuk memasang tombol reaksi Vicomi namun saya tidak tertarik untuk memasang nya. jadi saya mencoba untuk memasang tombol reaksi yang simple saja. Dengan kita memasang tombol reaksi tersebut dapat memudahkan  kita bisa tahu seberapa besar reaksi pengunjung blog terhadap  yang kita bagikan tersebut.

Bagi anda yang tertarik untuk memasang tombol reaksi yang simple, bisa anda ikuti langkah-langkah di bawah ini.

Tombol Reaksi di Bawah Artikel

1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Temukan kode yang sesuai untuk meletakan tombol rekasi di bawah konten blog anda.
<!-- Reaksi Button Start -->
<div class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span></td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</div> 
<!-- Reaksi Button End -->
4. Selanjutnya anda bisa copy kode css tombol reaksi di bawah ini, dan pastekan di atas kode ]]></b:skin>
.reaction-buttons{margin-bottom:-15px !important}
.reactions-iframe{padding-top:4px;height:1.8em !important;}
.reactions-label{margin:8px !important}
5. Terakhir anda klik Save Template dan untuk memanggil tombol reaksi nya, anda bisa masuk ke Tata Letak. Atau lihat contoh gambar di bawah ini:
Jika sudah anda klik tombol centang pada kolom rekasi seperti gambar di atas, maka jangan lupa anda klik  Simpan coba anda lihat berhasil atau tidak jika berhasil saya ucapkan selamat anda sukses menerapkan nya. Untuk anda yang masih gagal menerapkannya bisa anda baca baik-baik dan ikuti langkah-langkah penjelasan di atas dengan cermat.

Demikian penjelasan saya pada malam ini, semoga artikel yang saya buat ini dapat berguna dan bermanfaat untuk anda. 

15 April 2018

Cara Membuat Kotak Iklan 300x250 Dan 125x125 Di Blogger


Pada malam ini saya akan berbagi Cara Membuat Kotak Iklan 300x250 Dan 125x125  Di BloggerMungkin sudah banyak teman-teman yang membuat artikel judul seperti di atas, namun saya rasa tidak ada salahnya untuk saya share kembali kan. Dan tentu kita sudah tahu bukan jika sidebar di blog bukan hanya digunakan untuk kepentingan penunjang konten blog, Tetapi sidebar tersebut juga dapat kita gunakan untuk ruang iklan mandiri yang biasanya menampilkan banner iklan 300x250 atau juga banner iklan 125x125. 

Dengan kita memasang kotak iklan tersebut menjadi suatu alternative monitize blog selain dari iklan Adsense mapun iklan yang lainnya. Artinya barang kali anda ingin membuka jasa pemasangan iklan pada blog anda, mungkin artikel ini cocok untuk anda terapkan di blog anda.

Keberadaan banner iklan 300x250 dan iklan 125x125 ini harus kita tata dengan rapih agar tampilannya tidak merusak pemandangan blog kita. Seperti yang anda lihat apalagi jika space iklan belum terisi banner iklan yang di tuju, maka tampilannya harus rapih agar orang mengetahui bahwa kita menyediakan slot iklan banner 300x250 dan iklan banner 125x125..


Dengan membuat kotak iklan 300x250 dan 125x125 di blog dengan CSS dan HTML yang sederhana yang membuat tampilannya rapih dan memberikan informasi yang jelas kepada orang lain yang sedang mengakses blog milik kita bahwa pada sidebar blog kita menyediakan pemasangan slot iklan banner.

Dan kotak iklan banner 300x250 dan 125x125 tentu pastinya akan menambah penghasilan dari blog. Apalagi jika blog anda pengunjung perharinya mencapai 1-5 ribu pengunjung. Nah untuk harga tiap slot iklan banner ini tentu saja bisa ditentukan oleh kita sendiri sebagai pemilik blog tersebut, untuk masalah harga mungkin tidak sama pastinya, akan terdapat perbedaan harga slot banner iklan antara jasa website kita dan jasa orang lain.

Banner iklan yang belum terisi maka slot akan menampilkan text yang menjelaskan bahwa slot tersebut tersedia untuk iklan banner, baik iklan banner 300x250 dan maupun iklan banner iklan 125x125.

Jika anda memang tertarik untuk mencobanya, bisa anda ikuti langkah-langkah di bawah ini, Nah untuk demo lihat saja gambar video GIF di atas yang sudah saya sediakan.

Cara Membuat Kotak Iklan 300x250 Dan 125x125

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
  2. Kemudian masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Copas kode di bawah ini dan letakan di atas kode ]]></b:skin> untuk Blog AMP silahkan tambahkan style amp-custom.
    *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    .kotak_iklan{background:#efefef;width:300px;margin:0 auto;text-align:center;padding:16.6666666667px}
    .kotak{background:grey;height:125px;width:125px;display:inline;margin:0;padding:0;float:left;position:relative;}
    .kotak:nth-child(1),.kotak:nth-child(3){margin-right:16.6666666667px}
    .kotak:nth-child(1),.kotak:nth-child(2){margin-bottom:16.6666666667px}
    .kotak a{position:relative;display:block;z-index:2}
    .kotak:before{content:"Your Space 125x125";line-height:1.2;position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;font-size:20px;display:flex;flex-direction:column;justify-content:center;z-index:1;}
    .kotak-300{width:300px;height:250px;}
    .kotak.kotak-300:nth-child(1){margin-right:0;margin-bottom:0;}
    .kotak_iklan.p0{padding:0;}
    .kotak-300:before{content:"Your Space 300x250";}
    .clear{clear:both;}
  4. Selanjutnya anda simpan kode di bawah ini di dalam HTML berikut pada widget HTML/JavaScript di sidebar.
    <div class="kotak_iklan p0">
        <div class="kotak kotak-300">
        <!-- simpan banner 300x250 di bawah ini -->
       
        </div>
        <div class="clear"></div>
    </div>
    <br />
    <div class="kotak_iklan">
        <div class="kotak">
        <!-- simpan banner 125x125 di bawah ini seperti contoh berikut ini -->
        <a href="#" target="_blank" rel="nofollow noopener" title="Bitcoin">
        <img src="file:///C:/Users/tarmizi/Downloads/mizipediacom.webp" alt="Bitcoin" title="Bitcoin" height="125" width="125"/>
        </a>
        </div>
       
        <div class="kotak">
        <!-- simpan banner 125x125 di bawah ini -->
       
        </div>
       
        <div class="kotak">
        <!-- simpan banner 125x125 di bawah ini -->
       
        </div>
       
        <div class="kotak">
        <!-- simpan banner 125x125 di bawah ini -->
       
        </div>
       
        <div class="clear"></div>
    </div>
  5. Jika sudah selesai tinggal anda klik save Template.
Dan tinggal anda simpan banner-banner iklan pada slot-slot tersebut sesuai keterangannya dan seperti contoh yang saya berikan di atas. seperti ini: <a href="#" target="_blank" rel="nofollow noopener" title="Bitcoin"> <img src="file:///C:/Users/tarmizi/Downloads/mizipediacom.webp" alt="Bitcoin" title="Bitcoin" height="125" width="125"/> </a>
Demikian penjelasan saya pada malam ini semoga bermanfaat untuk anda, selamat mencoba dan sukses kawan.

Apa Itu Jaringan Komputer dan Fungsinya

Apa Itu Jaringan Komputer dan Fungsinya: Sebelumnya saya sudah pernah membagikan Cara Atasi Wifi Laptop/Pc No Terdeteksi Sinyal. Mungkin di antara kalian pasti ada yang sudah mengetahui maupun belum mengetahui apa itu apa itu Jaringan Komputer dan Fungsinya. 

Baik lah pada siang ini saya akan menjelaskan sedikit. Nah yang paling sering kita dengar untuk masalah komputer/ Pc yaitu Jaringan Komputer. Tentunya komputer yang sudah mempunyai sistem terkoneksi antara satu dengan yang lain pasti akan menggunakan istilah jaringan dalam penggunaannya. Untuk lebih jelasanya bisa anda simak macam-macam jenis jaringan komputer dan Fungsinya.
Tentuya jaringan yang terdapat pada komputer/Pc Fungsinya banyak sekali manfaat yang bisa Anda dapatkan. Dengan banyaknya manfaat, maka tentu banyak yang akan memilih untuk menggunakan jaringan dengan sistem tertentu. Penggunaannya dapat kita sesuaikan dengan kebutuhan sehingga bisa mempermudahkan semua dalam kegiatan apapun  yang selama ini kita jalankan secara manual.

Jaringan yang ada di komputer adalah sistem yang terdiri dari dua atau lebih perangkat komputer. Ditambah dengan perangkat-perangkat lainnya yang dibuat atau dirancang untuk bekerja dengan berbagai tujuan yaitu bisa untuk berkomunikasi,  mendapatkan layanan ataupun service antara komputer satu dengan yang lainnya, kemudahan kita untuk mengakses berbagai informasi yang ada di internet, dan masih banyak lagi lainnya.

Tentang Jaringan Komputer

Fungsi Dan Manfaat
* Manfaat nya adalah kita bisa mempercepat proses berbagi data. Salah satu alat yang digunakan untuk berbagi data yaitu dengan menggunakan perangkat tambahan seperti flashdisk dll nya.

Kita bisa menghemat biaya. Penggunaan jaringan pada komputer bermanfaat untuk menekan biaya untuk kebutuhan perangkat-perangkat yang Anda gunakan saat ini. sumber daya bisa digunakan secara bersamaan. Contoh misalkan kita mempunyai hanya satu buah printer saja, printer tersebut kemudian bisa kita gunakan oleh banyak User atau pengguna dengan komputer yang berbeda-beda. Sehingga Anda hanya cukup menyediakan satu printer untuk banyak komputer.

Tetapi dengan menggunakan jaringan pada komputer, transfer data tentunya akan lebih cepat bahkan bisa menjangkau jarak jauh sekalipun. Hal ini dapat memudahkan kita sebagai pengguna untuk mendapatkan file data yang Anda perlukan.

Informasi Terbaru
* Sudah pasti dengan adanya jaringan di komputer ditambah sistem penyimpanan data yang terdapat pada satu komputer dan dikelola dengan baik pada satu komputer. Sehingga Anda mendapatkan akses dari berbagai tempat yang berbeda, dan bisa membatasi akses ke data tertentu sewaktu data tersebut sedang diproses.

Berbagai Jenis Jaringan
* Komputer sendiri terbagi menjadi berbagai jenis jaringan. untuk perbedaan dari jenis ini terbagi berdasarkan dari tempat, letak geografis, distribusi sumber informasi dan lainnya.

Nah untuk pembagian bisa berdasarkan dari jangkauan geografisnya yaitu meliputi terbagi menjadi tiga yaitu LANMAN dan WAN. Local Area Network atau yang sering disingkatkan dengan dengan nama  LAN. apa itu LAN, LAN adalah jaringan yang hanya meliputi wilayah kecil saja, untuk contohnya adalah seperti warnet, kantor, atau sekolah.

1. Umumnya LAN mempunyai luas areanya tidak lebih dari 1 km persegi. Ini biasanya jaringan LAN menggunakan teknologi IEEE 802.3 Ethernet dengan batas kecepatan transfer data sekitar 10, 100, bahkan 1000 MB/s. Dan tidak hanya menggunakan teknologi Ethernet, jaringan ini juga sudah banyak menggunakan teknologi nirkabel seperti Wi-Fi untuk jaringan LAN.

2. Jenis yang ini MAN atau Metropolitan Area Network. Jaringan tersebut bisa mencakup suatu kota dengan dibekali kecepatan transfer data yang tinggi.  Jaringan ini merupakan gabungan beberapa LAN. Jangkauan jaringan MAN tersebut kalau tidak salah berkisar antara 10-50 km dan terdiri atas satu atau dua kabel saja. Tetapi bisa ditambahi dengan adanya elemen switching yang difungsikan dengan rancangan menjadi lebih sederhana. 

3. Wide Area Network atau WAN adalah jenis Jaringan ini memiliki jangkauan geografis yang lebih luas dibandingkan dengan LAN, nah untuk contohnya pada sebuah negara bahkan benua. WAN tersebut sering difungsikan sebagai penghubung dua atau lebih jaringan yang bersifat lokal. Anda bisa dikomunikasikan dengan pengguna yang lain walaupun Anda tidak dalam satu wilayah yang sama.

Jaringan Komputer 
Jaringan Komputer juga terbagi dari jenis yang didasarkan pada pendistribusian sumber informasi atau data yang diperoleh. Berdasarkan fungsinya tersebut terbagi menjadi dua jenis yaitu: 
1. Jaringan peer to peer dan 
2. Jaringan komputer klien-server.

* Jenis Jaringan Komputer Peer to Peer adalah ini memungkinkan sebuah komputer dapat berfungsi sebagai server dan sekaligus sebagai klien walaupun ada dalam satu jaringan. Sehingga satu komputer memiliki dua fungsi sekaligus, ini semua tergantung dari kita ingin menggunakan yang mana.

* Jaringan Komputer Client Server. Untuk Jenis ini adalah model untuk jaringan yang salah satu dari komputernya bisa digunakan sebagai Server dengan fungsi untuk melayani komputer lain yang difungsikan sebagai klien. Dan sehingga model jaringan ini komputer server biasanya mempunyai bagian khusus dan hanya memiliki fungsi sebagai penyedia layanan yang dibutuhkan oleh klien.

Tidak hanya hanya itu Jaringan komputer juga dibagi berdasarkan topologinya. Jenis ini terbagi berdasarkan topologi ring, topologi bus, topologi star, topologi tree dan topologi mesh Jenis jaringan ini yaitu merupakan bentuk jaringan dimana memiliki bentuk atau struktur jaringan yang dapat menghubungkan komputer yang satu dengan yang lainnya.

1. Topologi Ring
Pada topologi ring setiap komputer akan di hubungkan dengan komputer yang lain dan seterusnya sampai kembali lagi ke komputer pertama, dan membentuk sebuah lingkaran sehingga disebut ring, topologi ini berkomunikasi menggunakan data token tujuannya adalah untuk mengontrol hak akses komputer untuk menerima data, misalnya komputer 1 akan mengirim file ke komputer 4, maka data akan melewati komputer 2 dan 3 sampai di terima oleh komputer 4, jadi sebuah komputer akan melanjutkan pengiriman data jika yang dituju bukan IP Address dia. lainnya.


=> Kelebihan dari topologi jaringan komputer ring ini adalah pada kemudahan dalam proses pemasangan dan instalasi, penggunaan jumlah kabel LAN yang sedikit sehingga akan menghemat biaya.

=> Untuk kekurangan paling fatal dari topologi ini yaitu, jika salah satu komputer ataupun kabel nya  ada yang bermasalah, maka pengiriman data akan terganggu bahkan menjadi error.

2. Topologi Bus
Topologi jaringan komputer bus ini sangat tersusun rapi seperti antrian dan  menggunakan hanya satu kabel coaxial dan setiap komputer terhubung ke kabel yang memakai konektor BNC, dan kedua ujung dari kabel coaxial harus diakhiri oleh terminator.
=> Untuk kelebihan dari bus hampir sama dengan ring, yaitu kabel yang digunakan tidak banyak dan menghemat biaya pemasangan anda.

=> Kekurangannya dari topologi bus ini yaitu apabila terjadi gangguan atau masalah pada satu komputer bisa menggangu jaringan di komputer lain, dan untuk topologi ini sangat sulit mendeteksi gangguan, dan sering terjadinya antrian data, jika jaraknya terlalu jauh harus menggunakan repeater.

3. Topologi Star
Nah topologi star ini membentuk seperti bintang karena semua komputer di hubungkan ke sebuah hub atau switch dengan kabel UTP, sehingga hub/switch lah pusat dari jaringan dan bertugas untuk mengontrol lalu lintas data, bila komputer 1 hendak mengirim data ke komputer 4, data akan dikirim ke switch dan langsung di kirimkan ke komputer tujuan tanpa melewati komputer lain. Topologi jaringan komputer inilah yang paling banyak digunakan oleh masyarakat sekarang mengingat karena kelebihannya lebih banyak.
=> Kelebihan topologi ini adalah sangat mudah mendeteksi komputer mana yang mengalami gangguan,  dan mudah untuk melakukan penambahan atau pengurangan komputer tanpa mengganggu yang lain, serta tingkat keamanan sebuah data lebih tinggi.

=> Untuk Kekurangannya topologi jaringan komputer ini yaitu, akan memerlukan biaya yang tinggi untuk pemasangan, karena membutuhkan kabel yang banyak serta switch/hub, dan kestabilan jaringan sangat tergantung pada terminal pusat, sehingga jika switch/hub mengalami gangguan, maka seluruh jaringan akan terganggu. 

4. Topologi Tree
Topologi jaringan komputer Tree ini adalah merupakan sebuah gabungan dari beberapa topologi star yang dihubungan dengan topologi bus, jadi setiap topologi star tersebut akan terhubung ke topologi star lainnya menggunakan topologi bus, biasanya dalam topologi ini terdapat beberapa tingkatan jaringan, dan jaringan yang berada pada tingkat yang lebih tinggi dapat mengontrol jaringan yang berada pada tingkat yang lebih rendah.

=> Untuk kelebihan dari topologi tree adalah mudah menemukan suatu kesalahan dan juga mudah melakukan perubahan jaringan jika diperlukan.

=> Dan untuk kekurangan nya adalah menggunakan banyak kabel, sering terjadi tabrakan dan lambat, jika terjadi kesalahan pada jaringan tingkat tinggi, maka jaringan tingkat rendah akan terganggu juga

5. Topologi Mesh
Topologi mesh ini setiap komputer akan terhubung dengan komputer lain dalam jaringannya memakai kabel tunggal, jadi proses pengiriman data akan langsung mencapai komputer tujuan tanpa melalui komputer yang lain lagi ataupun switch atau juga hub.

=> Kelebihanyanya adalah proses pengiriman lebih cepat dan tanpa melalui komputer lain, jika salah satu komputer mengalami kerusakan tidak akan menggangu komputer yang lain.

=> Kekurangan dari topologi mesh ini yaitu, akan memakan sangat banyak biaya karena membutuhkan jumlah kabel yang sangat banyak dan setiap komputer harus memiliki Port I/O yang banyak juga, selain itu proses instalasi pun sangat rumit.

Dan ada juga jenis jaringan komputer yang berdasarkan media transmisinya. Jaringan Komputer ini terbagi menjadi beberapa jenis yaitu 
1. Jaringan yang menggunakan media kabel (wired network) dan
2. Ada yang tidak menggunakan kabel atau juga disebut dengan nirkabel.

# Jenis jaringan pada komputer yang masih memakai kabel ini biasanya menggunakan media kabel tujuannya adalah untuk sebagai media penyampaian data. Jenis ini juga kerap disebut  dengan jenis jaringan menggunakan media transmisi terpadu atau disebut Guided Transmission Media.

Ada beberapa kabel yang dapat Anda gunakan untuk membuat model jaringan yang satu ini bagian diantaranya yaitu kabel Coaxial, kabel TP (STP dan UTP), serta kabel Fiber Optic. Dengan kabel jenis seperti ini maka jaringan akan kuat dan dapat digunakan dengan semaksimal mungkin.

# Untuk penjelsan no 2 yang berdasarkan media kabel penyampaian data adalah jaringan tanpa menggunakan kabel atau juga disebut dengan nirkabel. Jaringan komputer yang seperti ini mengandalkan sistem gelombang untuk media penyampaian data pada komputer tersebut.

Nah ada lagi untuk jenis jaringan nirkabel yang satu ini juga sering disebut dengan jaringan yang menggunakan media transmisi tidak terpadu. Contoh dari jaringan yang menggunakan jenis jaringan ini yang dapat Anda temukan dan juga sering digunakan antara lain Gelombang Mikro, Satelit dan Sinar Infra Merah.

Dari pembagian penjelasan di atas mengenai jaringan ternyata masih ada lagi dari pembagian lainnya yaitu berdasarkan distribusi sumber transmisi datanya. Pembagian ini kemudian masih dibagi lagi menjadi beberapa jenis yaitu:
1. Terpusat Dan 
2. Terdistribusi. 

* Untuk jenis dari jaringan ini merupakan jenis yang terdiri dari komputer klien dan juga server. Selanjutnya salah satu dari komputer yang dimiliki oleh klien menjadi komputer yang berfungsi sebagai perantara sehingga dapat digunakan untuk mengakses komputer yang menjadi sumber informasi di jaringan tersebut.

* Penjelasan yang terakhir yaitu Jenis yang kedua untuk berdasarkan distribusi sumber adalah Jaringan Terdistribusi. untuk jenis jaringan yang satu ini menjadi satu jenis perpaduan antara beberapa jenis jaringan yang terpusat sehingga pada satu jaringan memiliki beberapa komputer server dengan saling berhubungan antara klien sehingga membentuk sistem dengan jaringan tertentu.


Mungkin sampai disini saja penjelasan singkat saya pada siang ini, semoga apa yang telah di sampai kan di atas bisa menambah ilmu pengetahuan kita, semoga bermanfaat untuk kita semua. Dan jangan sampai kelewatan update panduan terbaru dari mizipediacom

14 April 2018

Cara Mudah Membuat Popup Search Box Google Custom Di Blogger

Cara Mudah Membuat Popup Search Box Google Custom Di BloggerSebelumnya saya sudah share Cara Membuat Floating Search Box Keren Jadi sore ini saya akan berbagi cara  membuat popup Box Google Custom Search, tombol search ini bisa diletakan di mana saja sesuka anda.

Tombol search ini keren loh, jika anda klik maka search box Google Custom Search akan muncul dan hasil pencarian akan tampil di bawah search box.

Untuk lebih jelas demonya silahkan coba anda klik tombol  ikon search di pojok kanan atas. atau lihat video Gambar GIF.

Jika anda ingin menerapkan langkah- langkah di atas bisa anda coba di bawah ini.

Cara Mudah Membuat Popup Search Box Google Custom 

  1. Pertama , pastikan anda sudah masuk di dasbhor sobat sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Kode ikon search di bawah ini bisa anda letakan di menu header atau di manapun anda sukai.
    <a href='javascript:void(0)' class='searchbutton' onclick='openSearchbox()' title='Click To Search'></a>
  4. Silahkan anda simpan kode CSS di bawah ini di atas kode </head>
    <style type='text/css'>
    .searchbutton{text-decoration:none}
    .searchbutton:after{content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:none;position:relative;}
    
    .search-box{position:fixed;top:10%;left:20%;right:20%;max-width:879px;background:rgba(255,255,255,1);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);display:none;visibility:hidden;padding-top:54px;}
    .search-box.active{display:block;visibility:visible;margin:auto;z-index:1002;-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
    @-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    50%{opacity:1}
    }
    @keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    50%{opacity:1}
    }
    .search-box .inputpoint {background:#333;margin:0 auto;padding:10px 12px 6px;position:absolute;top:0;left:0;right:0}
    #searchbox-layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);display:none;z-index:1001}
    .search-box .close-searchbox{cursor:pointer;position:absolute;top:-20px;right:-20px;width:20px;height:20px;padding:0;margin:0;border:0;outline:0;border-radius:100%;font-weight:bold;color:#555;background:#fff;font-size:24px;font-family: Arial;text-align:center;line-height:20px;transition:all .3s;z-index:999}
    .search-box .close-searchbox:hover {color:red;}
    .search-result .gsc-results-wrapper-visible{max-height: calc(100vh - 200px);overflow-y:auto;margin-bottom:10px}
    .gsc-input-box{border-radius:2px}
    .gsc-input-box-focus,.gsc-search-box .gsc-input>input:focus{border:1px solid #b9b9b9!important;border-top-color:#a0a0a0!important;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;outline:0!important}
    .gsc-results-wrapper-visible{background:#fff;padding:0 10px!important;border:none;width:100%;height:100%;margin:10px 0 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    .gsc-search-box-tools .gsc-search-box .gsc-input{padding-right:5px!important;font-family:Roboto,Arial,sans-serif!important;font-size:14px!important;font-weight:500!important;}
    .cse .gsc-search-button input.gsc-search-button-v2,input.gsc-search-button-v2{padding:6px!important}
    input.gsc-search-button{margin-top:3px!important;margin-left:0!important}
    .cse .gsc-control-cse,.gsc-control-cse{background-color:#fff;border:none!important;padding:0!important}
    #gs_cb50,#gs_st50,.gsib_b{vertical-align:middle}
    a.gsst_a{line-height:1}
    .gsc-result .gs-title{height:auto!important;word-wrap:break-word}
    table.gsc-table-result{border-collapse:collapse;border-spacing:0}
    table.gsc-search-box{border-style:none;border-width:0;border-spacing:0 0;width:100%;margin-bottom:0!important}
    table.gsc-search-box td.gsc-input{padding-right:5px!important}
    .gs-web-image-box-landscape img.gs-image,.gs-web-image-box-portrait img.gs-image{margin-left:7px;max-width:60px!important;max-height:60px!important}
    .gs-image-box.gs-web-image-box.gs-web-image-box-landscape,.gs-image-box.gs-web-image-box.gs-web-image-box-portrait{width:70px!important}
    .gs-webResult.gs-result a.gs-title:link{padding-left:0!important}
    .gs-promotion div.gs-visibleUrl-long,.gs-promotion div.gs-visibleUrl-short,.gs-result .gs-title:hover,.gs-result .gs-title:hover *,.gs-webResult div.gs-visibleUrl-long,.gs-webResult div.gs-visibleUrl-short{color:#e8554e!important}
    .gs-result .gs-title,.gs-result .gs-title *{color:#333!important;text-decoration:none!important}
    .gsc-control-cse,.gsc-control-cse .gsc-table-result{font-family:Roboto,Arial,sans-serif!important;font-size:13px}
    .gs-result .gs-snippet{font-weight:300;word-wrap:break-word;padding-left:10px!important}
    .gsc-control-cse .gsc-table-result b,.gsc-control-cse b{font-weight:900!important;color:000!important;transition:all .4s ease-in-out}
    .gsst_a .gscb_a{font-family:Roboto,Arial,sans-serif!important;font-size:18px!important;font-weight:900!important;color:#555!important}
    .gsst_a:focus .gscb_a,.gsst_a:hover .gscb_a{color:#333!important}
    .gsc-control-wrapper-cse{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    </style>
  5. Pastikan Anda sudah memasang Font Awesome di blog Anda, Karena ikon search menggunakan Font Awesome, .
  6. Selanjutnya silahkan anda simpan kode di bawah ini di atas kode </body>
    <div class='search-box' id='search_box'>
    <div class='inputpoint'>
    <script>
    //<![CDATA[
      (function() {
        var cx = '0061063966908433t34t4:6ebjgbfg_kh';
        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>
    <gcse:searchbox></gcse:searchbox>
    </div>
    <div class='search-result'>
    <gcse:searchresults></gcse:searchresults>
    </div>
    <div class="close-searchbox" onclick="hidesearchbox()"><span>&#215;</span></div>
    </div>
    <div id='searchbox-layer'></div>
    <script>
    //<![CDATA[
    function openSearchbox(){document.getElementById("search_box").classList.toggle("active");document.getElementById("searchbox-layer").style.display = "block";}
    function hidesearchbox(){document.getElementById("search_box").classList.toggle("active");document.getElementById("searchbox-layer").style.display = "none";}
    //]]>
    </script>
  7. Kemudian ganti kode :
Anda ganti kode 0061063966908433t34t4:6ebjgbfg_kh dengan Search Engine ID blog anda, bagi anda yang ingin mendapatkan Search Engine ID blog anda bisa anda anda klik URI ini https://cse.google.com/cse/all
 Demikian penjelasan sore ini, selamat mencoba dan semoga bermanfaat untuk anda.

12 April 2018

Cara Kustomisasi Template Ala Kompi Ajaib

Cara Kustomisasi Template Ala Kompi Ajaib: Sebelumnya saya sudah membagikan artikel download ala template kompi ajaib, namun pada malam ini saya akan bagikan Cara Kustomisasi Template Ala Kompi Ajaib. Tujuannya  agar Anda tidak merasa kesulitan untuk menyesuaikan beberapa element template nantinya.

Di bawah ini ada beberapa element template yang harus anda aktifkan atau diganti terlebih dahulu secara manual oleh admin blog, diantaranya yaitu:

Quickedit Post atau Post Edit

Silahkan anda aktifkan terlebih dahulu (jika belum muncul ikon edit post di postingan) quickedit post untuk anda yang ingin agar mempermudah mengedit postingan atau menuju halaman post editor postingan yang akan di edit.

Jadi bisa anda aktifkan fitur seperti di bawah ini melalui yaitu melalui :
dashboard ==> tata letak ==> dan kemudian anda klik edit pada blog post (kotak paling besar) dan centang pada "Show Quick Editing" Lihat gambar di bawah ini agar anda tidak kebingungan.

Photo Admin atau Photo Avatar

Anda ganti photo avatar untuk photo admin blog tersebut dengan mengganti url photo avatar pada kode berikut ini (kode yang saya marking), silahkan buat photo Anda dengan dimensi 40px x 40px.
.authorphoto{position:absolute;top:0;left:0;width:38px;height:38px;cursor:pointer;background:#ddd url(http://2.bp.blogspot.com/-KjVxDap0Bzs/Uc7Jfm_9VWI/AAAAAAAAEqs/jD56hYNIm88/s48/anon48.gif)center no-repeat;padding:0}

Menampilkan Kode Postingan

Nah untukTemplate ini kompi ajaib sudah membuat syntax highlighter dari highlight.js jadi silahkan anda gunakan tag pre seperti berikut di pada artikel atau konten anda.
<pre><code>
Script Di Sini
</code></pre>
Jika anda ingin menampilkan kode di postingan seperti kode di artikel saya ini, maka jangan lupa  untuk menggunakan kode <br/> di setiap akhir barisnya. Langsung anda paste kodenya pada postingan mode Compose kemudian setelah beres menulis semua artikelnya pindahkan ke mode HTML, jika sudah baru lah anda beri tag pre pada setiap kodenya, dan dengan begitu maka akan otomatis memiliki <br/> di setiap akhir barisnya. Tema syntax highlight.js ini menggunakan tema dark, jadi jika anda ingin mengganti tema syntax ini lebih kerenb lagi bisa anda simak penjelsan di postingan Cara Membuat  Syntax Highlighter Highlight.js With Copy To Clipboard Clipboard.js

Jika blog Anda tidak menampilkan kode di artikel, saran saya lebih baik harus anda hapus script highlight.js tujuannya agar loading blog menjadi lebih ringan lagi. Silahkan hapus kode berikut.
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js' type='text/javascript'/>

hljs.initHighlightingOnLoad();hljs.configure({useBR:true});$("div.code").each(function(e,t){hljs.highlightBlock(t)});

loadCSS("//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/dark.min.css");

Mengganti Title Blog Dengan Image

Namun bila anda ingin mengganti title blog dengan gambar, silahkan anda ganti kode berikut ini:
<span class='homeblog'><a href='/' title='Homepage'><span class='spantitle'>Title</span>Blog</a></span>
Dan anda ganti kode yang saya marking dengan image seperti berikut ini:
<span class='homeblog'><a href='/' title='Homepage'><img alt='logo blog' src='URL IMAGE' height='tinggi image tanpa satuan' width='lebar image tanpa satuan' title='Homepage'/></a></span>

Komentar Blog

Oya untuk masalah masalah template ini kompi ajaib hanya mengaktifkan kolom komentar dari Google Plus saja. Untuk kode-kode komentar Blogger sudah di hapus sama beliau, nah jika anda ingin menggunakan komentar blogger silahkan lengkapi lagi kode-kode komentar Bloggernya  di bawah ini. 

Jika anda seorang blogger yang sudah lama bergelut di dunia blogging tentu pasti paham dengan urusan kode css seperti di bawah ini. Dan anda sudah mengetahuinya kode apa saja yang sudah di hapus, Anda pasti dapat melihatnya, maka silahkan Anda sedikit jeli untuk kode tersebut. Atau bisa juga silahkan anda ganti dengan kolom komentar Disqus dengan mengganti kode berikut dengan kode komentar Disqus:
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='620' expr:data-href='data:blog.canonicalUrl'>
</div></div>
<script type='text/javascript'>
//<![CDATA[
document.getElementsByClassName('g-comments')[0].setAttribute('data-width', document.getElementById('g_comments').clientWidth);
//]]>
</script>
Selanjutnya silahkan tambahkan </div> di akhir kode komentar Disqus tersebut.

Jangan Lupa Baca Juga  Cara membuat Show  Facebook  Hide Dan Defer JS

Demikian penjelasan singkat pada malam ini, selamat mencoba dan semoga berhasil. salam blogger

Showing posts with label


We Specialize in



Blogging
Panduan Ngeblog

Gunakan blog sebagai tempat untuk menyalurkan ide dan pemikiran.

Get in touch
Adsense
Mengenal apa itu Adsense

Beberapa hal yang harus lakukan untuk mendapatkan hasil maksimal dari AdSense

Get in touch
Tips Seo
Definisi SEO dan Cara Melakukan SEO

cara atau teknik untuk membuat situs atau blog kita berada pada halaman pertama

Get in touch
Template Blogger
Pengenalan dan Pengertian Template Blog

Ada bermacam template seo freadly dan responsive, anda bisa memilih sesuka anda

Get in touch
Widget
Widget Terbaik Blog

Trik dan tips menampilkan atau mendesain halaman dengan menambah widget

Get in touch
Tips Computer
Kumpulan Tips tips-komputer Terbaru

Memudahkan Anda belajar mencari trik dan tutorial terbaru seputar dunia IT.

Get in touch
Menu navigasi
Membuat menu Navigasi blog

Daftar menu yang dibuat berdasarkan halaman statis atau label pada postingan.

Get in touch
Info Kesehatan
Tentang kesehatan 

Mencegah penyakit, memperpanjang hidup, meningkatkan kesehatan fisik.

Get in touch

My work
You've probably noticed


Steps In My Work


Trik Android

Membahas seputar android, Tips Dan Trik android.

Travel Tips

Tips ringkas yang berguna untuk anda yang ingin berliburan

Harga Handphone

Informasi harga handphone, android terbaru untuk spesifikasi dan harga HP tersebut.

Code voucher

Voucher codes dan promo kupon dari Toko-toko terkenal Indonesia dan SEAsia.


Web Tools


Me Code Parse

Gunakan alat parse html (parser / converter tool) untuk memparse atau mengkonversi script atau kode iklan Google Adsense atau Chitika, kode iklan lainnya untuk disisipkan di HTML

Me Color Picker

Klik pada gambar untuk mendapatkan kode html .. Gunakan pemilah warna gambar online kanan untuk memilih warna dan dapatkan Kode Warna html dari pixel ini.

Me CSS Minifier

Sebuah tools yang berguna untuk mengkompres kode CSS, dengan mengkompres kode CSS di dalam template otomatis bisa mempercepat loading blog dan itu akan sangat baik

Kamus HTML

Sebuah halaman website dan juga menampilkan berbagai informasi yang di inputkan ke dalam html ... Kamus HTML. HTML tersusun dari kode-kode dan juga terdapat tag-tag tertentu

Me Font Awesome

Icon set yang paling populer di web dan toolkit. Catatan: Tidak ada download atau instalasi yang diperlukan! Anda menempatkan ikon Ikon Awesome dengan menggunakan awalan fa

Me CSS Triangle

CSS Geometric Triangle adalah menggambar yang dilakukan oleh seorang programer menggunakan HTML dan CSS. CSS Triangle Cukup warnai salah satu sisi/dua sisi border saja

Me Encode Script

Alat ini dapat menyembunyikan link credit,jadi anda bisa menggunakan tools dibawah ini dengan bijak, untuk mengencode script, link, dan lainnya

Me CSS Filter

Beberapa gaya untuk menyesuaikan rendering gambar. Filter memungkinkan efek gambar seperti alat Photoeditor. Skala abu-abu () - mengkonversi gambar grayscale dan lainnya

PARTNERS
Domain Murah Indonesia

Web Hosting services, Hosting Murah, web development, Indonesia domain name registration, web programming murah and internet services. Di jamin murah Hosting dan Domain

Buy / Sell Bitcoin, Ethereum
and other Digital Assets .Bitcoin.co.id is an online platform where you can buy and sell Bitcoin, Ethereum and other Digital Assets in Indonesia. Register now to gain the optimal experience in trading Digital Assets!

Register Now

Contact Us


Malaysia
Jl. Bangsar Utama,
59000 Kuala Lumpur, Malaysia
0166941451
mizipedia@gmail.com

Jangan sampai kelewatan update panduan
terbaru dari mizipediacom !

×Close

Notifications

Disqus Logo