Cara Zain

Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru

2016-09-22T11:12:00.001+08:00

Sebelumnya saya pernah share cara membuat Efek Salju, Daun, Bintang berjatuhan di blogger yang memberikan suasana blog terasa lebih indah dan nyaman, sedangkan yang ini berbeda sebab kita akan membuat nya menjadi lebih horror dengan menambahkan efek petir pada blog yang berkilat kilat namun tanpa suara. Dan jika template blogspot, wordpress, website sobat memiliki tema dark atau berwarna gelap maka akan sangat cocok sekali untuk memberi animasi efek petir ini agar menambah keseraman dan membuat tampilan background dari situs tersebut menjadi keren serta lebih menarik untuk dilihat. Selain itu widget ini juga ringan dan untuk memasang nya pun mudah dengan cara hanya memasukkan beberapa script kode pada layout blog sobat.

Kali ini saya akan share gimana Cara Membuat Efek Petir Pada Blog Yang Keren Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memberi widget animasi kilatan petir di background blogger.

Cara Membuat Efek Petir Di Blog :

1. Bikin animasi petir bergerak seperti diatas yaitu dengan cara masuk ke menu Tata Letak / Layout dan klik Tambahkan gadget pada sidebar / footer

2. Kemudian klik tombol tambah pada HTML/Javascript

3. Setelah itu masukkan script kode berikut ke dalam kotak konten :

<style type="text/css">body {
background-image:
url(http://s19.postimg.org/j8cmo7b6b/efek_petir_carazain.gif);
background-color:transparent; }</style>

Jika sudah klik Simpan

4. Terakhir klik Simpan setelan.. Selesai dan lihat hasilnya

5. Berikut adalah screenshot gambar blog yang berhasil dan work 100% dalam memasang efek animasi petir yang menyambar :

Nah itulah bagaimana cara membuat efek petir pada blog yang keren dengan mudah dan cepat di tampilan terbaru.

Silahkan dicoba

Cara Melihat Tampilan Blog Versi Mobile Di PC/Laptop Terbaru

2016-09-20T12:29:00.001+08:00

Semakin berkembangnya teknologi sekarang maka semakin banyak juga gadget / device yang bermunculan seperti handphone, smartphone, tablet, ipad dengan berbagai macam ukuran layar yang dapat menuntut seorang blogger yang memiliki blogspot, wordpress, mywapblog, website untuk mengoptimalisasikan situs web nya agar dapat tampil sempurna di berbagai device tersebut. Maka dari itu biasanya banyak para blogger yang memakai template responsive sebab jika masih menggunakan template bawaan blog atau template download yang tidak responsive maka blog tidak akan tampil dengan sempurna, penuh / full dan tersusun rapi pada hp java, cina, symbian, android, blackberry, iphone dan lainnya. Adapun bagi sobat blogger yang ingin mengecek atau melihat tampilan blog nya yang versi mobile tanpa harus melalui / via handphone yaitu langsung lewat pc / komputer / laptop kita bisa menggunakan sebuah situs penyedia layanan tes mobile free yang akan dijelaskan cara nya dibawah ini.

Kali ini saya akan share gimana Cara Melihat Tampilan Blog Versi Mobile Di PC/Laptop Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin melihat tampilan blog dalam bentuk mobile dari pc melalui 2 situs penyedia tes mobile gratis dan keren.

Cara Melihat Blog Tampilan Mobile Di PC/ Laptop Melalui Responsinator.com :

1. Pertama kita bisa menggunakan situs responsinator yaitu dengan cara buka http://responsinator.com/ lalu pada bagian atas masukkan url / link blog sobat dan klik OK

2. Maka akan langsung muncul tampilan blog versi mobile secara potrait dan landscape pada iphone 5 seperti pada gambar, untuk melihat tampilan blog dari gadget lainnya seperti iphone 6, iphone 6 plump, crappy android, nexus 4 dan ipad sobat bisa geser / scroll ke bawah pada halaman tersebut

Cara Melihat Blog Tampilan Mobile Di PC/ Laptop Melalui Mobiletest.me :

1. Kedua kita akan menggunakan situs mobiletes yang lebih keren dan seperti nyata gambar gadgetnya yaitu dengan cara buka http://mobiletest.me/ lalu ada pilihan device antara lain Apple iPhone 5, HTC One, Nokia Lumia 920, Samsung Galaxy Y, Google Nexus 7, Apple iPad Mini, sobat bisa pilih dan klik salah satu untuk menampilkan blog sesuai pada device yang sobat pilih tersebut nanti

2. Kemudian masukkan alamat url blog sobat dan klik tombol GO

3. Maka blog sobat akan tampil secara potrait pada device tersebut seperti pada gambar dibawah ini

4. Untuk melihat tampilan secara landscape sobat bisa klik tombol Option dan pilih Landscape pada bagian Orientation

5. Maka blog sobat akan tampil secara landscape seperti pada gambar dibawah ini, untuk melihat konten blog sobat juga bisa geser scroll halaman yang ada di dalam device tersebut.. Selesai

Nah itulah bagaimana cara melihat tampilan blog versi mobile di pc/laptop dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Popular Post Warna Warni Di Blog Terbaru

2016-09-18T12:35:00.002+08:00

Popular post adalah daftar / urutan artikel yang paling banyak dilihat yang fungsinya sama seperti gadget random post, related post dan recent post yaitu untuk navigasi atau memudahkan para pengunjung mejelajahi seluruh konten postingan yang ada di blogspot, wordpress, mwb maupun website dengan mudah. Dan pasti sobat blogger pernah blogwalking atau berkunjung ke blog blog lain dan melihat sebuah widget most popular post ada yang bergerak, berjalan, memiliki scroll maupun yang warna warni dengan nomor dan bentuk yang keren terpasang biasanya pada sidebar template blog yang membuat tampilan blog menjadi sangat menarik untuk dilihat. Sebenarnya itu adalah widget popular post bawaan blog yang di pasang namun telah di modifikasi / costumize dengan menambahkan beberapa kode css pada php / html blog yang bisa sobat lakukan jika ingin menambah atau menampilkan popular posts yang berwarna warni dengan Title Only (hanya judul artikel) atau with thumbnails (dengan gambar) agar mempercantik tampilan blog.

Kali ini saya akan share gimana Cara Membuat Popular Post Warna Warni Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memasang / menambahkan widget most popular posts keren pada sidebar template blogger.

Cara Membuat Popular Post Warna Warni Di Blog :

1. Bikin popular post warna warni seperti diatas yaitu dengan cara pertama masuk tata letak lalu klik Tambahkan Gadget pada bagian sidebar

2. Kemudian klik tombol tambah pada Entri Populer / Popular Post

3. Setelah itu konfigurasi widget tersebut sesuai keinginan sobat, centang thumbnail gambar jika sobat ingin membuat populer post dengan gambar (with thumbnail) atau kosongkan bila ingin hanya judul (title only), jika sudah bisa klik tombol Simpan maka widget popular post biasa bawaan blogger sudah terpasang

4. Selanjutnya kita akan mengubah nya menjadi lebih berwarna dan keren yaitu dengan cara masuk ke menu Template dan klik Edit HTML

5. Kemudian cari kode ]]></b:skin> atau </style>, gunakan Ctrl+F untuk memudahkan pencarian

6. Setelah itu silahkan sobat pilih dibawah ini ada beberapa pilihan tipe widget popular post yang berbagai macam bentuk dan warna yang keren dan bagus lalu copy script kode nya :

TIPE 1

/*----- TAB POPULER -----*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:63px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

TIPE 2

/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 7 0 0}
.PopularPosts .item-snippet{font-size:11px}

TIPE 3

/* Popular Post */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:normal;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed
}
.widget-content ul li:last-child{border-bottom:medium none !important
}
.widget-content ul li a{color:#333
}
.widget-content ul li a:hover{color:#C80441
}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00
}

TIPE 4

.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#fff!important}.PopularPosts a:hover{color:#222!important}.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}.PopularPosts ul li:nth-child(1){background-color:#A51A5D}.PopularPosts ul li:nth-child(2){background-color:#F53477}.PopularPosts ul li:nth-child(3){background-color:#FD7FAA}.PopularPosts ul li:nth-child(4){background-color:#FF9201}.PopularPosts ul li:nth-child(5){background-color:#FDCB01}.PopularPosts ul li:nth-child(6){background-color:#DEDB00}.PopularPosts ul li:nth-child(7){background-color:#89C237}.PopularPosts ul li:nth-child(8){background-color:#44CCF2}.PopularPosts ul li:nth-child(9){background-color:#01ACE2}.PopularPosts ul li:nth-child(10){background-color:#94368E}.cloud-label-widget-content{text-align:left}.label-size{display:block;background:#fff;float:left;margin:0 2px 2px 0;color:#000!important;border:1px solid #ccc;padding:5px}.label-size:hover{border:1px solid #000;color:#000!important}.label-size a:hover{color:#000!important}

TIPE 5

/* Pengaturan Warna */ .PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%} .PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%} .PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%} .PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%} .PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%} .PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%} .PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%} .PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%} .PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%} .PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%} /*Custom Popular Post*/ .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img { margin:0 0; padding:0 0; list-style:none; border:none; background:none; outline:none;} .PopularPosts ul { margin:.5em 0; list-style:none; font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif; color:black; counter-reset:num;} .PopularPosts ul li img { display:block; margin:0 10px 0 10px; width:50px; height:50px; float:left;} .PopularPosts ul li { background-color:#eee; margin:0 10% .4em 0; padding:.5em 1.5em .5em .5em; counter-increment:num; position:relative;} .PopularPosts ul li:before, .PopularPosts ul li .item-title a { font-weight:bold; font-size:120%; color:inherit; text-decoration:none;} .PopularPosts ul li:before { content:counter(num); display:block; position:absolute; background-color:black; color:white; width:30px; height:30px; line-height:30px; text-align:center; top:50%; right:-10px; margin-top:-15px; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;}

Jika sudah memilih tipe dari widget tersebut dan copy scriptnya selanjutnya masukkan script tersebut tepat diatas kode ]]></b:skin> atau </style> seperti pada gambar dibawah ini dan klik Simpan template.. Selesai dan lihat hasilnya

7. Berikut adalah tampilan tampilan blog yang berhasil atau work 100% dalam membuat popular post warna warni dengan berbagai tipe :

TIPE 1 ( TITLE ONLY)

TIPE 1 (WITH THUMBNAIL)

TIPE 2 (TITLE ONLY)

TIPE 2 (WITH THUMBNAIL)

TIPE 3 (TITLE ONLY)

TIPE 3 (WITH THUMBNAIL)

TIPE 4 (TITLE ONLY)

TIPE 4 (WITH THUMBNAIL)

TIPE 5 (TITLE ONLY)

TIPE 5 (WITH THUMBNAIL)

Nah itulah bagaimana cara membuat popular post warna warni di blog dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Fanspage Facebook Melayang Di Blog Terbaru

2016-09-15T12:55:00.000+08:00

Untuk mendapatkan banyak traffic sebuah situs salah satunya adalah melalui sosial media seperti facebook, twitter, google plus jadi sangat baik untuk menghubungkan blog, wordpress, website dengan media sosial. Sebelumnya saya pernah share Cara Membuat Widget Like Box Facebook yang biasanya dipasang pada sidebar maupun footer blog, sedangkan untuk tutorial ini berbeda sebab kita akan memasang fanspage facebook secara melayang di halaman / page blog yang bentuknya keren dan menggunakan tombol close jadi pengunjung tidak akan terganggu oleh gadget likebox fans page fb ini. Adapun kegunaan menampilkan / menambahkan fan page facebook pada blog yaitu agar pengunjung dapat menyukai fanspage kita tanpa terkecuali, semakin banyak yang like maka akan semakin bagus karena setiap kali sobat share artikel / postingan di fanspage fb maka akan muncul juga di beranda orang yang sudah like fanspage sobat secara otomatis jadi sangat baik buat sobat memasang fanspage facebook ini dengan cara membuat gadget baru pada layout dan memasukkan beberapa script kode.

Kali ini saya akan share gimana Cara Membuat Fanspage Facebook Melayang Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memasang like box fans page fb melayang pada blogspot.

Cara Membuat Lika Fan Page Facebook Di Blogger Secara Float :

1. Bikin pop up Fanspage FB seperti diatas yaitu dengan cara masuk menu Layout atau Tata Letak dan klik Tambahkan gadget

2. Kemudian klik tombol tambah pada HTML/Javascript

3. Setelah itu masukkan semua kode berikut ke dalam kotak konten :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaKcJO5RTVkvtomDa6Nxb4yvcPTwglWKchzjDGJm1v6K521l8MoTdodgDZPrA_5y5Yd7vI63c4pGB6CFKVTaF-rMlnYDACOMXo6HS1l3dCKTrPGHb3JqSp6hpt-rTSvsmGYnnZSTZQ7Nmq/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/carazain&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
<center>
<span id="linkit"><a href="https://goo.gl/1hk8xa">Get This Widget</a></span></center>
</div>
</div>

#Ganti tulisan warna merah dengan alamat fanspage facebook sobat

Jika sudah sobat bisa langsung klik Simpan..

4. Terakhir klik tombol Simpan setelan.. Selesai

6. Berikut adalah tampilan blog yang berhasil dipasang like box fanspage facebook keren yang melayang saat awal membuka blog :

Nah itulah bagaimana cara membuat fanspage facebook melayang di blog dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Sumber Link Otomatis Saat Blog Di Copas Terbaru

2016-09-14T18:19:00.000+08:00

Biasanya banyak para copaser yang tidak bertanggung jawab saat mengcopy artikel blogspot, wordpress, website kita yaitu tanpa menulis / menyertakan / mencantumkan link sumber halaman nya yang bisa saja dapat merugikan kedua belah pihak. Untuk mengatasinya ada sebuah tips dan trik yaitu dengan membuat sumber link otomatis yang akan bekerja ketika ada orang yang mengcopy postingan sobat maka sumber link akan muncul sendiri atau ikut tercopy juga secara otomatis pada bagian bawah jadi dapat mengingatkan para pencuri konten agar menampilkan / menaruh sumber link dari artikel blog sobat yang di copas. Untuk cara memasang nya juga mudah hanya dengan menambahkan beberapa script ke dalam html template blogger sobat tapi tidak direkomendasikan untuk blog tutorial sebab banyak koding yang jika dipasang sumber link maka akan mengganggu.

Kali ini saya akan share gimana Cara Membuat Sumber Link Otomatis Saat Blog Di Copas Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin membuat link sumber otomatis ketika postingan di copy paste pada blog.

Cara Membuat Link Sumber Di Blog Otomatis :

1. Bikin sumber link otomatis seperti diatas yaitu dengan cara masuk menu Template dan klik Edit HTML

2. Kemudian cari kode </body> , biasanya ada di bagian paling bawah html

3. Setelah itu masukkan kode berikut tepat diatas kode </body> :

<script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Link Sumber :"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://yourjavascript.com/03166194114/sumberlink-carazain.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script>

Jika sudah sobat bisa klik Simpan template.. Selesai

4. Berikut adalah hasil copyan dari blog yang berhasil dipasang sumber link otomatis :

Nah itulah bagaimana cara membuat link otomatis saat blog di copas dengan mudah dan cepat.

Silahkan dicoba

Cara Memasukkan Video Youtube Ke Postingan Blog Terbaru

2016-09-13T00:16:00.000+08:00

Selain memasukkan tulisan dan gambar pada posting blog, wordpress, website, menambahkan / mengupload video kedalam postingan di situs web mungkin juga diperlukan bagi blog yang memposting artikel tentang tutorial, game, musik, film yang membutuhkan dukungan video agar memudahkan pengunjung dan membuat blog menjadi lebih menarik sebab tidak semua pengunjung dapat mengerti hanya dengan melalui tulisan dan gambar tanpa memasang video streaming yang dapat menampilkan tutorial atau lain sebagainya secara rinci, nyata dan lebih jelas. Maka dari itu, banyak para blogger yang menaruh video di setiap artikel blogspot nya baik dengan mengunggah file video atau menggunakan youtube yang merupakan situs berbagi video terbesar dan paling popular di internet. Adapun untuk cara memasukan video ke postingan blog ada 2 cara yaitu pertama dengan mengambil kode embed dari youtube dan kedua lewat fasilitas insert video yang ada di blogger itu sendiri.

Kali ini saya akan share gimana Cara Memasukkan Video Youtube Ke Postingan Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin upload atau menambahkan video kedalam / pada posting artikel di blogspot dengan cepat melalui 2 cara mudah.

Cara Memasukan Video Youtube Menggunakan Kode Embed :

1. Buka youtube - cari video yang ingin dimasukkan ke postingan blog sobat - jika sudah klik tombol share yang ada dibawah - klik lagi pilihan Embed - lalu copy semua script yang muncul atau tampil yang merupakan kode embed dari video tersebut

2. Kemudian kita akan masukan video tersebut ke blog dengan cara masuk dashboard dan klik Entri baru untuk membuat artikel yang akan dipasang video

3. Setelah itu isi judul - klik mode HTML - lalu paste / masukkan kode embed yang sudah didapatkan tadi ke kotak dan bisa menambahkan kode <center> . . . </center> agar posisi video berada di tengah

4. Selanjutnya sobat bisa klik mode compose untuk melihat hasilnya lalu klik Publikasin.. Selesai

5. Berikut adalah contoh hasil dari memasukkan video menggunakan kode embed ( klik tombol play untuk memutar video ) :

Cara Memasukkan Video Youtube Menggunakan Menu Insert Video :

1. Buat Entri / Artikel baru - Isi judul - klik Mode Compose - lalu klik icon Insert A Video seperti pada gambar

2. Maka akan muncul tampilan berikut, jika sobat ingin upload video dari yang ada di komputer bisa klik tombol Pilih Video Untuk Unggah, sedangkan kalau ingin dari youtube sobat bisa langsung klik tab From Youtube

3. Kemudian pada kotak search sobat bisa masukkan judul video atau alamat link video dari youtube untuk mencari video yang akan ditambahkan pada postingan blog, jika sudah sobat klik tombol Pilih

4. Selanjutnya sobat bisa klik Publikasikan untuk memposting.. Selesai

5. Berikut adalah contoh hasil dari memasukkan video youtube memakai menu insert video ( klik tombol play untuk memutar video ) :

Nah itulah 2 cara bagaimana cara memasukan video youtube kedalam postingan blog dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

2016-09-11T16:00:00.001+08:00

Kotak script atau yang biasa para blogger sebut yaitu text box area adalah sebuah kotak yang di dalam nya dapat dimasukkan tulisan atau script code baik yang biasa maupun dengan fungsi scroll agar terlihat rapi dan teratur pada sebuah postingan di blogspot, wordpress, atau website sehingga pengunjung pun nyaman ketika sedang membaca artikel yang ada di situs web tersebut. Untuk memasang / membuat kotak html blog kita hanya perlu memasukkan / menambahkan kode script ke dalam posting blog yang dapat kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.

Kali ini saya akan share gimana Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin membuat text box area yang keren pada artikel / posting di blogspot.

Cara Membuat Kotak Script Di Postingan :

1. Bikin kotak teks html seperti diatas yaitu dengan cara masuk dashboard blog dan klik Entri Baru untuk membuat artikel baru yang akan ditambahkan kotak script

2. Kemudian isi judul dan klik mode HTML

3. Setelah itu masukkan kode berikut, masih dalam mode HTML :

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">
.Masukkan Kode Script Sobat Disini.</div>

#Ganti tulisan warna merah dengan script atau tulisan yang akan sobat masukkan dalam kotak

Jika sudah klik Mode Compose untuk melihat hasilnya

4. Berikut adalah tampilan kotak script biasa tanpa scroll yang telah sobat buat..

Jika sobat ingin menggunakan scroll pada kotak script tersebut tinggal menambahkan kode yang berwarna biru seperti dibawah ini

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto;">
.Masukkan Kode Script Sobat Disini.</div>

#Untuk mengatur ukuran bisa ubah angka height (tinggi) dan widht (lebar) nya

Jika sudah bisa klik Publikasikan untuk mengepost artikel.. Selesai

5. Berikut adalah pilihan text box / kotak script yang berbagai macam bentuk dan warna yang bisa sobat gunakan agar terlihat lebih keren :

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Kode Script Sobat Disini</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Sobat Disini</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Sobat Disini</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Sobat Disini</div>

#Jika ingin menambahkan scroll tinggal menambahkan kode height widht dan overflow seperti pada langkah no 4 di atas

Nah itulah bagaimana cara membuat kotak script di dalam postingan blog dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Form Halaman Contact Us Di Blog Terbaru

2016-09-09T18:50:00.003+08:00

Form Contact Us adalah sebuah halaman form yang biasanya ada di menu tab blogspot, wordpress, joomla, website yang berfungsi jika pengunjung ingin bertanya sesuatu hal atau memberikan kritik dan saran kepada si pemilik situs web tersebut secara personal / privasi maka dapat menggunakan form hubungi kami tersebut. Banyak para blogger yang telah memasang formulir kontak pada blog nya baik di sidebar, footer atau laman blog sebab selain pembaca / visitor dapat mengirim pesan pribadi, juga untuk melengkapi fitur dari sebuah blog agar terlihat lebih professional. Ada banyak cara untuk pasang halaman kontak di blog bisa menggunakan script html buatan sendiri, widget bawaan dari blogger atau juga bisa melalui layanan gratis di internet yang keren dan dapat dipasang di pages blog seperti situs 123ContactForm.com , FoxyForm.com . Namun kita akan menggunakan layanan dari foxyform karena pembuatannya yang sangat mudah dan tanpa ribet selain itu juga lebih aman karena menggunakan captcha (anti spam).

Kali ini saya akan share gimana Cara Membuat Form Halaman Contact Us Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin menambahkan / memasang formulir hubungi / kontak kami pada blog dengan mudah.

Cara Membuat Halaman Kontak Di Blog :

1. Bikin form contact us seperti diatas yaitu dengan cara buka http://foxyform.com/ maka akan muncul tampilan berikut

#Bagian Setting ada pilihan title, name, e-mail dan subject, sobat bisa centang nama dan email
#Bagian Advances Settings untuk mengatur warna background dan font yang digunakan
#Bagian Target E-mail Address masukkan alamat email sobat untuk digunakan pada form kontak
#Bagian Captcha isi
#Bagian preview untuk melihat hasil setting

Jika sudah di setting, sobat bisa klik tombol Create Formular

2. Maka akan muncul HTML Code form kontak yang telah dibuat, sobat bisa copy semua script kode tersebut untuk dipasang pada blog

3. Kemudian masuk ke dashboard blog - Laman lalu klik Laman baru

4. Setelah itu isi judul Laman dan klik mode HTML

5. Selanjutnya masukkan kode form kontak yang telah di copy tadi ke dalam kotak seperti pada gambar, bisa menambahkan kode <center> . . . </center> agar widget berada ditengah lalu klik tombol Publikasikan

6. Selesai.. untuk melihat hasilnya bisa klik tulisan Lihat

7. Berikut adalah tampilan form contact us yang telah berhasil di pasang pada halaman blog :

Nah itulah bagaimana cara membuat form halaman contact us di blog dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru

2016-09-07T17:07:00.004+08:00

Efek animasi loading saat halaman dibuka / dimuat pada blog, wordpress atau website dapat membuat tampilan situs web tersebut menjadi keren dan menarik. Selain itu memasang atau menambahkan efek status loading di blogger ini juga ringan tidak terlalu berat sebab tidak menggunakan banyak kode html, hanya memakai beberapa kode css dan javascript. Untuk cara kerja dari animasi loading page ini sangat sederhana yaitu akan muncul dan bergerak saat memuat halaman ketika membuka blog dan akan berhenti / menghilang secara otomatis dan perlahan ketika blogspot kita sudah termuat secara penuh.

Kali ini saya akan share gimana Cara Membuat Efek Animasi Loading Keren Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memasang animasi loading page pada blog yang bergerak saat halaman dimuat.

Cara Menambahkan Efek Loading Di Blog :

1. Bikin animasi loading seperti diatas yaitu dengan cara masuk ke menu Template dan klik Edit HTML

2. Kemudian cari kode ]]</b:skin> atau </style> gunakan Ctrl+F untuk memudahkan pencarian

3. Setelah itu masukkan script berikut tepat diatas kode ]]</b:skin> atau </style> :

#cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjemYYvZXqg9xhe_Fafm7wtBFqdPdA-HYZMNCCJJgqtEakX-5uzFKhSiMuyRjiROf4KQfUOq50QLn2ik9DgiWFEiRrWDIF3dFW4IVqPQzRk_sJrdTVk1gqCSb7g_wJHj38LZt4p6A5_6Wo/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}

4. Kemudian cari lagi kode <body> gunakan Ctrl+F juga agar cepat

5. Selanjutnya masukkan script berikut tepat dibawah kode <body> :

<div id='cssload'/>

6. Kemudian cari lagi kode </body> biasanya paling bawah html blog

7. Lalu masukkan script jquery berikut tepat diatas kode </body> :

<script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script>

Jika sudah sobat bisa klik Simpan template.. Selesai dan lihat hasilnya

8. Berikut tampilan blog yang telah berhasil di pasang efek animasi loading page :

Nah itulah bagaimana cara membuat efek animasi loading keren di blog dengan mudah dan cepat.

Silahkan dicoba

Cara Memasang Game Online Di Blog Gratis Keren Terbaru

2016-09-05T11:57:00.002+08:00

Memasang game online di blog, wordpress, website selain untuk pribadi agar tidak bosan ngeblog juga dapat membuat pengunjung merasa betah berlama lama di situs tersebut karena bisa sekalian bermain game yang keren dan rame. Ini juga merupakan salah satu tips supaya meningkatkan traffic dari blog itu sendiri dengan memasukkan game flash baik di sidebar atau halaman posting pada blogspot. Untuk menambah / pasang permainan di blog sobat hanya perlu mencari situs situs penyedia game online gratis yang dapat di share / dibagikan gamenya dengan menggunakan script kode embed yang nanti akan di masukan ke blogger sobat.

Kali ini saya akan share gimana Cara Memasang Game Online Di Blog Gratis Keren Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin menambahkan / memasukkan permainan ke blog yang asik dan rame.

Cara Memasukan Game Online Ke Blogspot :

1. Bikin game online terpasang di blog yaitu pertama kita buka http://www.miniclip.com/webmasters/en/ maka akan muncul tampilan berikut

2. Kemudian sobat bisa scroll ke bawah halaman maka akan ada daftar beberapa game yang dapat dipasang, untuk melihat semua game bisa klik tombol View All

3. Lalu akan tampil banyak pilihan game, sobat bisa pilih sesuai dengan keinginan dengan mengklik Tombol yang ada dibawanya untuk mendapatkan kode embed seperti pada gambar

4. Selanjutnya sobat bisa pilih language / bahasa, atur size dan theme, jika tidak langsung saja copy semua script embed code tersebut yang nanti akan dipasang pada blog sobat

5. Setelah mendapatkan kode embed, kita akan memasukkannya ke blog dengan cara masuk ke Laman / pages dan klik Laman baru

6. Kemudian isi judul laman lalu klik mode HTML

7. Setelah itu masukkan kode embed yang telah didapatkan, berikut contoh embed code game Cut The Rope yang saya dapatkan dari situs miniclip :

<center>
<div class="miniclip-game-embed" data-game-name="cut-the-rope-time-travel" data-theme="0" data-width="1024" data-height="576" data-language="en"><a href="http://www.miniclip.com/games/cut-the-rope-time-travel/">Play Cut the Rope Time Travel</a></div>
<p style="text-align:center;"><a href="http://www.miniclip.com/games/cut-the-rope-time-travel/" target="_blank">Play Cut the Rope Time Travel</a> / More <a href="http://www.miniclip.com/games/genre-1/" target="_blank">Puzzle games</a></p>


<script src="//static.miniclipcdn.com/js/game-embed.js"></script></center>

#Ubah angka warna biru dengan ukuran lebar dan tinggi yang sobat inginkan agar pas dengan template blog
#Tambahkan kode warna merah agar letak widget pas ditengah halaman

Jika sudah, sobat bisa klik Publikasikan

8. Selesai.. selanjutnya bisa kita lihat hasilnya dengan mengklik tombol Lihat

10. Berikut adalah tampilan game online yang telah berhasil dipasang pada halaman blog

Selain dari Miniclip yang merupakan situs game flash online terkenal dengan berbagai macam genre game terbaik seperti action, sport, multiplayer, puzzle, racing dll sobat juga bisa mencari embed kode game dari situs situs web berikut agar lebih lengkap :

- www.embeddablegames.net
- www.htmlgames.com/html5-games-for-your-site/
- http://www.freegamesforyourwebsite.com/
- http://playtomax.com/embed
- http://publishers.spilgames.com/en/

Nah itulah bagaimana cara memasang game online di blog gratis keren terbaru dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Efek Zoom Pada Gambar Di Blog Terbaru

2016-09-03T10:39:00.002+08:00

Efek Zoom pada gambar di blog, wordpress, website selain untuk memudahkan pengunjung agar dapat melihat gambar yang terlalu kecil dan tidak kelihatan tulisan di dalamnya menjadi lebih besar dan jelas juga bisa membuat situs menjadi lebih menarik. Efek ini dapat memperbesar gambar ketika cursor / pointer diarahkan ke sebuah gambar yang ada di postingan / artikel maka gambar tersebut akan membesar secara otomatis tanpa harus di klik manual dahulu dan akan mengecil kembali jika kursor dipindahkan dari gambar tersebut. Cara pasang fitur efek auto zoom / pembesar image ini pada blogspot juga sangat mudah bagi para blogger sebab tidak menggunakan banyak javascript, jquery atau php tapi hanya dengan memasang / menambahkan beberapa kode CSS di html blog.

Kali ini saya akan share gimana Cara Membuat Efek Zoom Pada Gambar Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memperbesar gambar blog secara otomatis ketika cursor diarahkan ke gambar tersebut.

Cara Membuat Efek Zoom Image Di Blog Secara Otomatis :

1. Bikin efek zoom gambar seperti diatas yaitu dengan cara masuk ke menu Template dan klik Edit HTML

2. Kemudian cari kode ]]></b:skin> atau </style>, gunakan Ctrl+F untuk memudahkan pencarian

3. Setelah itu masukkan kode berikut tepat diatas kode ]]></b:skin> atau </style> :

.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}

Jika sudah sobat bisa klik Simpan template.. Selesai dan lihat hasilnya

Nah itulah bagaimana cara membuat efek zoom pada gambar di blog dengan mudah dan cepat.

Silahkan dicoba

Cara Memasang Lagu Di Blog Dengan Pilihan Sendiri Terbaru

2016-09-01T12:53:00.004+08:00

Memasang atau memasukkan lagu ke blog, wordpress, website adalah salah satu tips untuk membuat situs web lebih menarik sebab pengunjung dapat membaca artikel sambil mendengarkan musik yang ada baik secara otomatis diputar (autoplay) ketika membuka halaman awal blog maupun dengan manual klik tombol play yang ada pada widget tersebut. Untuk menambahkan lagu di blogger, kita akan menggunakan sebuah widget scm yang dapat memuat banyak playlist lagu dengan pilihan sendiri yang bisa didapat melalui link dari soundcloud, youtube atau situs mp3 lainnya selain itu gadget ini ngasih banyak pilihan warna dan berbagai macam bentuk yang keren jika di pasang pada blogspot sobat.

Kali ini saya akan share gimana Cara Memasang Lagu Di Blog Dengan Pilihan Sendiri Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memasukan musik ke blog yang keren dan bagus.

Cara Memasang Lagu Di Blog Dengan SCM Music Player :

1. Bikin widget pemutar musik pada blog yaitu dengan cara pertama masuk ke http://www.scmplayer.net/ lalu scroll pointer ke bawah maka akan muncul tampilan berikut untuk memilih skin dari widget tersebut yang akan dipasang di blog sobat. Atau sobat juga bisa menggunakan custom skin dengan memasukkan url skin css file ke dalam kotak yang ada di bawah. Jika sudah memilih skin klik Next atau Tab Edit Playlist seperti pada gambar

2. Kemudian pada tab edit playlist ini sobat bisa menambahkan lagu yang diinginkan dengan cara isi song title atau judul lagu secara manual dan masukkan song url / link lagu yang bisa didapatkan dari mp3 link, soundcloud atau youtube seperti pada contoh, saya menggunakan link dari youtube agar lebih mudah

3. Untuk mendapatkan link lagu dari youtube sobat bisa mencari / search lagu terlebih dahulu, lalu yang di kotakin merah itulah yang merupakan song url, sobat bisa copy dan memasukkannya di playlist atau jika sobat mempunyai video lagu milik sendiri bisa upload dulu ke youtube lalu ambil linknya untuk dimasukkan ke playlist tersebut

4. Setelah membuat daftar playlist selanjutnya masuk ke tab configure setting untuk mengatur beberapa pilihan yang berfungsi sebagai berikut:

PLAYBACK
- Auto Play : lagu berputar secara otomatis
- Shuffle Playback : lagu berputar secara acak
- Default Volume : besar volume suara yang diinginkan
- Repeat Mode : repeat playlist ( mengulang playlist ), play playlist once ( hanya memutar sekali lagu ),
repeat item ( mengulang sebuah lagu )

APPEARENCE
- Placement of Player Bar : top ( memasang diatas tampilan blog ), bottom ( dibawah blog )
- Show Playlist by Default : menampilkan secara default

Jika sudah sobat bisa klik tombol Done

5. Maka akan muncul script kode dari scm player, sobat bisa copy semua kode tersebut untuk dipasang pada blog

6. Untuk memasang script kode tersebut sobat bisa masuk menu Template dan klik Edit HTML

7. Kemudian cari kode <body> gunakan Ctrl+F untuk memudahkan pencarian

8. Setelah itu masukkan script kode yang sudah di copy tadi tepat dibawah kode <body>, jika sudah klik Simpan template.. Selesai dan lihat hasilnya

9. Berikut adalah tampilan blog yang telah berhasil dipasang lagu dengan menggunakan widget SCM Music Player.. pada pojok kiri atas adalah tombol untuk play (menghidupkan), pause (mematikan), next ( selanjutnya), previous (sebelumnya) dan pada pojok kanan atas adalah tombol untuk menampilkan playlist sobat

Nah itulah bagaimana cara memasang lagu di blog dengan lagu pilihan sendiri secara mudah dan cepat.

Silahkan dicoba

Cara Membuat Pesan Pembuka Dan Penutup Di Blog Terbaru

2016-08-31T10:07:00.002+08:00

Mungkin sobat pernah ketika mengunjungi suatu blog, wordpress, website dan melihat sebuah pesan peringatan / alert yang muncul sebelum masuk halaman awal / utama situs tersebut. Biasanya para blogger membuat pesan pembuka itu pada blogspot untuk memberikan ucapan atau informasi kepada pengunjung seperti tulisan selamat datang di blog, jangan lupa komentar dan lain sebagainya yang dapat dipasang lebih dari satu pesan. Selain pesan pembuka kita juga dapat memasang pesan penutup yang tampil saat keluar dari blog seperti tulisan terima kasih telah berkunjung dan lainnya agar blog menjadi lebih menarik.

Kali ini saya akan share gimana Cara Membuat Pesan Pembuka Dan Penutup Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memasang pesan selamat datang pada blogspot.

Cara Membuat Pesan Pembuka Di Blog :

1. Bikin pesan pembuka seperti di atas yaitu dengan cara masuk menu Template dan klik Edit HTML

2. Kemudian cari kode <head> biasanya ada di bagian paling atas

3. Setelah itu masukkan kode berikut tepat dibawahh kode <head> :

<script type='text/javascript'>alert("Selamat Datang Di Blog Saya")</script>

Kalau ingin membuat dua, tiga atau lebih dari satu pesan tinggal tambahkan saja script kodenya seperti ini :

<script type='text/javascript'>alert("Selamat Datang Di Blog Saya")</script>
<script type='text/javascript'>alert("Jangan Lupa Berkomentar dan Follow Blognya")</script>
<script type='text/javascript'>alert("Semoga Bermanfaat")</script>

#Ganti tulisan warna merah sesuai keinginan sobat

Jika sudah klik Simpan template.. Selesai

Cara Membuat Pesan Penutup Di Blog :

Untuk memasang pesan penutup caranya sama tinggal copy kode berikut :

<script type='text/javascript'>// goodbye alertfunction goodbye(){alert('Terima Kasih Telah Berkunjung ');}parent.window.onunload=goodbye;</script>

#Ganti teks warna merah sesuai dengan keinginan sobat

Kemudian masukkan kode tersebut tepat dibawah kode pesan pembuka yang tadi dipasang, jika sudah klik Simpan template.. Selesai

Nah itulah bagaimana cara membuat pesan pembuka dan penutup di blog dengan mudah dan cepat.

Silahkan dicoba

Cara Mengecek Kecepatan Loading Blog/WP/Web Terbaru

2016-08-27T17:06:00.001+08:00

Loading sebuah blog, wordpress atau website ketika diakses pastinya dapat mempengaruhi trafik dari situs tersebut sebab tidak semua orang memiliki koneksi internet, wifi, speedy yang mempunyai kecepatan tinggi jadi jika suatu blog sangat berat, lambat / lelet saat dibuka maka pengunjung pun akan merasa bosan karena lama menunggu dan akhirnya beralih ke blog lain yang lebih ringan. Loading pada blog bisa dipengaruhi dari template yang dipakai, terlalu banyak memasang / membuat widget yang tidak penting di blog dan lain sebagainya. Oleh karena itu sebagai seorang blogger sebaiknya kita juga memperhatikan loading blog agar bisa tampil lebih cepat yang dapat meningkatkan traffic dari pengunjung atau menambah viewer blog. Untuk mengecek kecepatan blog sobat bisa menggunakan beberapa situs terbaik yang menyediakan cek / test speed buat mengukur kecepatan sebuah situs yang disertai optimasi atau cara memperbaiki nya agar dapat lebih mempercepat loading halaman blogspot sobat tersebut.

Kali ini saya akan share gimana Cara Mengecek Kecepatan Loading Blog/WP/Web Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin melihat dan mengetahui kecepatan blog, wordpress atau website sobat dengan beberapa situs terbaik pengecek speed yang akan dibahas pada tutorial ini.

Cara Mengecek Kecepatan Blog dengan PageSpeed Insight dari Google :

1. Buka https://developers.google.com/speed/pagespeed/insights/ dan masukkan alamat blog atau situs sobat seperti pada gambar lalu klik tombol ANALYZE

2. Maka akan langsung tampil data speed blog sobat yang melalui mobile / hp / selular seperti gambar dibawah ini contohnya blog ini hanya mendapatkan skor 60/100 yang menurut pagespeed insight google masih kurang sebab biasanya skor normal dari pagespeed berkisar 75/100 jadi kalau dibawah itu berarti blog termasuk berat loadingnya dan perlu untuk diperbaiki. Sebaliknya jika diatas skor tersebut maka blog sobat termasuk cepat sekali loadingnya. Untuk melihat kecepatan blog dari desktop silahkan klik tab desktop yang ada disampingnya

3. Maka akan tampil skor kecepatan loading blog ketika membuka lewat desktop / pc / komputer contohnya blog carazain ini mendapatkan skor 86/100 yang berarti termasuk cepat saat tampil di desktop jadi masih lumayan lah walaupun di tampilan mobile sangat lambat karena diberi tanda seru warna merah dan bukan ceklis hijau seperti di desktop

Cara Mengecek Kecepatan Blog dengan GTmetrix :

1. Buka https://www.gtmetrix.com/ dan masukkan url blog atau situs sobat seperti pada gambar lalu klik Analyze

2. Maka akan langsung tampil pagespeed score dan analisis blog sobat dari situs GTmetriks tersebut

Cara Mengecek Kecepatan Blog dengan Pingdom :

1. Buka https://tools.pingdom.com/ dan masukkan link blog atau situs sobat, pilih test from / tempat untuk mengetes kecepatan blog lalu klik tombol START TEST

2. Maka akan muncul tampilan Performance grade dan analisis blog sobat dari tool pingdom tersebut

Nah itulah bagaimana cara mengecek kecepatan loading blog/wp/web dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Kotak Pencarian (Search Box) Di Blog Keren Terbaru

2016-08-24T17:08:00.004+08:00

Search Box / Kotak Pencarian adalah widget yang berfungsi untuk memudahkan pengunjung dalam mencari artikel / postingan yang mereka inginkan dengan cara hanya mengetikkan beberapa kata yang ingin dicari ke dalam kotak tersebut lalu klik tombol search maka akan menemukan / menampilkan hasil pencarian dari blog tersebut tanpa harus mencarinya dengan susah payah. Membuat kotak search bar di blog, wordpress, mywapblog, tumblr maupun website sangat penting bagi para blogger agar pengunjung tidak kesulitan dalam menemukan artikel yang mereka cari pada situs tersebut, selain itu kita juga bisa memasang berbagai macam bentuk search box yang keren, bagus, cantik, bergerak dengan kode script css dan html pada blogspot.

Kali ini saya akan share gimana Cara Membuat Kotak Pencarian (Search Box) Di Blog Keren Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin pasang kotak search pada blog dengan menggunakan css dan html.

Ada 2 cara bikin search Box yang akan dibahas yaitu yang pertama melalui widget bawaan dari blog dan yang kedua dengan menggunakan kode sendiri baik pada sidebar, footer atau header.

Cara Memasang Search Box Bawaan Blog :

1. Untuk membuat kotak search lewat bawaan blog dengan cara masuk menu Layout / Tata Letak lalu klik Tambahkan gadget di tempat yang sobat inginkan misal sidebar

2. Kemudian cari pilihan widget Kotak Penelusuran dan klik tombol tambah

3. Setelah itu langsung saja centang semua seperti gambar dibawah ini dan klik Simpan

4. Terakhir klik Simpan setelan yang ada di pojok kanan atas.. Selesai untuk pasang search box bawaan blog

Cara Memasang Search Box Dengan Kode Sendiri :

1. Kalau sobat tidak ingin dari bawaan blog, sobat bisa membuatnya dengan cara kedua menggunakan kode sendiri yaitu masuk menu Tata Letak / Layout dan klik Tambahkan gadget pada posisi yang diinginkan misal sidebar

5. Kemudian klik tambah pada pilihan HTML/Javascript

6. Setelah itu masukkan script kode berikut ke dalam kotak konten tersebut

<br/><form action="http://carazain.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="28" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

#Ganti tulisan warna merah dengan alamat url link blog sobat
#Ganti angka warna biru untuk mengatur ukuran search box

Jika sudah, sobat bisa klik tombol Simpan / Save

7. Terakhir klik Simpan setelan yang ada di pojok kanan atas.. Selesai untuk pasang search box dengan kode sendiri

Berikut ini beberapa script kode buat sobat untuk membuat search box dengan tampilan yang keren - keren menggunakan kode sendiri :

#Kode - kode tersebut bisa langsung dimasukkan ke kotak konten tanpa ada yang perlu di ganti / edit dulu.

Nah itulah bagaimana cara membuat kotak pencarian / search box di blog keren dengan mudah dan cepat.

Silahkan dicoba

Cara Share Posting Blog Otomatis Ke Google Plus Terbaru

2016-08-24T08:52:00.002+08:00

Share posting / berbagi tautan blog, wordpress, mywapblog, tumblr di halaman profil media sosial atau grup merupakan tips seo agar meningkatkan traffic jumlah pengunjung selain dari faktor konten, link dan lainnya. Seperti halnya facebook, twitter, instagram, path dan line, google plus adalah sosmed yang sangat efektif untuk mendapatkan pengunjung ke situs web atau blogspot sobat sebab merupakan salah satu social media terbesar, terkenal dan juga memiliki banyak pengguna atau user yang aktif. Jadi perlunya bagi sobat dan para blogger lainnya untuk membagikan artikel / postingan nya dari blog ke account google plus baik lewat hp atau komputer pc secara otomatis supaya blog SEO dan muncul di halaman pertama google.

Kali ini saya akan share gimana Cara Share Posting Blog Otomatis Ke Google Plus Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin berbagi artikel postingan ke akun google+ secara otomatis.

Cara Share Posting Ke Google Plus :

1. Bikin post blog tershare otomatis ke google plus seperti diatas yaitu dengan cara masuk menu Setelan dan klik pilihan Pos, komentar dan berbagi

2. Kemudian scroll ke bawah halaman lalu pada "Bagi Otomatis pos yang baru dipublikasikan ke profil google+ Anda" ganti jadi Ya. Kalau sobat ingin muncul konfirmasi dulu sebelum post di share bisa juga pilih Ya pada "Ingatkan untuk berbagi setelah mengeposkan"

3. Jika sudah, silahkan klik Simpan setelan.. Selesai dan lihat hasilnya ketika sobat membuat posting baru maka akan otomatis tershare ke akun google+ sobat yang sudah menautkan nya ke blog

Nah itulah bagaimana cara share posting blog otomatis ke google plus dengan mudah dan cepat.

Silahkan dicoba

Cara Memasang Iklan Adsense Di Tengah Artikel Postingan Terbaru

2016-08-22T22:08:00.000+08:00

Memasang iklan di tengah artikel postingan merupakan salah satu tips yang paling efektif untuk meningkatkan jumlah klik iklan dan pendapatan adsense selain dari posisi seperti di atas artikel (dibawah judul), di akhir postingan, pada header dan sidebar kiri maupun kanan blogspot. Lokasi di tengah artikel adalah letak tempat yang paling strategis dalam pemasangan iklan sebab banyak mendapatkan perhatian dari para pengunjung yang sedang membaca artikel pada blog , wordpress, website yang dipasang iklan GA (google adsense) tersebut.

Kenapa jadi iklan Adsense sebab sebagian besar iklan yang dipasang di tengah artikel oleh para blogger adalah iklan adsense baik unit gambar, teks atau link tapi tidak menutup kemungkinan juga untuk memasang iklan ppc lainnya seperti klik saya, bidvertiser, chitika, media.net, clicksor dll di area bagian tengah postingan agar ctr atau potensi klik iklan semakin tinggi. Untuk membuat iklan di tengah posting caranya sama dengan cara memasang iklan di atas/bawah artikel blog yaitu bukan lewat add gadget / widget namun melalui edit html blog jadi script kode iklan yang akan kita pasang harus diparse terlebih dahulu, jika belum sobat bisa klik disini.

Kali ini saya akan share gimana Cara Memasang Iklan Adsense Di Tengah Artikel Postingan Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin pasang iklan di tengah postingan secara otomatis.

Cara Memasang Iklan Di Tengah Postingan Blog :

1. Bikin iklan di tengah artikel seperti diatas yaitu dengan cara masuk menu Template dan klik Edit HTML

2. Kemudian cari kode <data:post.body/> . Biasanya akan menemukan lebih dari satu kode, silahhkan pilih salah satu kode yang benar benar dapat menampilkan postingan sobat atau bisa juga cari kode <data:post.body/> yang diapit dengan tag kondisional <b:if cond=’data:blog.pageType == "item"’> seperti pada gambar dibawah

3. Setelah itu replace atau ganti kode <data:post.body/> tersebut dengan script kode berikut

<div expr:id='"post1" + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<center>Script Kode Iklan Disini</center>
</div>
<div expr:id='"post2" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

#Ganti tulisan warna merah dengan kode iklan sobat yang sudah di parse

Jika sudah klik Simpan template.. Selesai dan lihat hasilnya

4. Berikut adalah tampilan blog yang telah terpasang iklan adsense di tengah artikel

Nah itulah bagaimana cara memasang iklan adsense di tengah artikel postingan dengan mudah dan cepat.

Silahkan dicoba

Cara Mencegah Redirect/Pengalihan Blogspot.com ke co.id Terbaru

2016-08-22T12:02:00.004+08:00

Sebenarnya sudah lama domain blogspot.com berubah menjadi blogspot.co.id, namun tidak ada salahnya saya share kembali bagi sobat yang belum tahu dan bertanya penyebab dan akibat nya "kenapa blogspot.com dialihkan menjadi .co.id?. Redirect otomatis subdomain dari blogspot.com ke .co.id merupakan sebuah kebijakan google yang harus diterima para blogger dan diambil resikonya seperti alexa rank menurun, alamat / url blog tidak terlihat professional lagi dan lainnya. Tapi buat sobat yang tidak suka dengan pengalihan ini tidak perlu khawatir sebab dapat diatasi dengan menambahkan beberapa script kode ke dalam html blog sobat yang akan membuat blog atau mengembalikan nya ke domain blogspot.com baik di tampilan komputer maupun hp. Namun tidak disarankan pada blog yang telah terpasang iklan adsense karena dapat melanggar ketentuan GA.

Kali ini saya akan share gimana Cara Mencegah Redirect/Pengalihan Blogspot.com ke co.id Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin mengatasi redirect otomatis dari subdomain .com ke .co.id.

Cara Mencegah Pengalihan Blogspot.com ke Blogspot.co.id :

1. Bikin subdomain berubah menjadi blogspot.com yaitu dengan cara masuk menu Template dan klik Edit HTML

2. Kemudian sobat bisa cari kode <head> biasanya paling atas letaknya

3. Setelah itu masukkan kode berikut tepat dibawah kode <head>

<script type='text/javascript'> var str= window.location.href.toString(); if ((str.indexOf('.com/'))=='-1') { var str1=str.substring(str.lastIndexOf(".blogspot.")); if (str1.indexOf('/')=='-1') { var str2=str1; } else { var str2=str1.substring(0,str1.indexOf('/')+1); } window.location.href =window.location.href.toString().replace(str2,'.blogspot.com/ncr/'); } </script>

Jika sudah, silahkan sobat klik Simpan template.. Selesai dan lihat hasilnya

4. Berikut adalah tampilan subdomain blogspot yang berhasil diubah dari .co.id menjadi .com

Nah itulah bagaimana cara mencegah redirect/pengalihan blogspot.com ke co.id dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Iklan Melayang Di Bawah Blog Dengan Tombol Close

2016-08-20T11:36:00.003+08:00

Iklan float / melayang merupakan widget iklan yang dapat tetap pada posisinya walaupun halaman pada blogger, wordpress, mywapblog, atau web di scroll / digerakkan ke atas maupun ke bawah yang bertujuan agar iklan selalu tampil di halaman mana saja dari situs tersebut sehingga pengunjung dapat melihat dan mengklik iklan ppc / mandiri yang dipasang. Sebelumnya saya ada share cara memasang iklan melayang di kanan kiri blog, nah sekarang untuk iklan melayang ukuran 728x90 di bawah tampilan blog dengan tombol close. Selain itu script ini juga memiliki efek responsive yang dapat membuat iklan tidak terpotong pada tampilan semua device mobile/phone dengan ditambahkan beberapa kode CSS dan sedikit javascript agar loading blogspot tidak berat.

Kali ini saya akan share gimana Cara Membuat Iklan Melayang Di Bawah Blog Dengan Tombol Close, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin pasang space iklan banner dibawah blog dengan efek float dan responsive terbaru.

Cara Memasang Iklan Melayang Di Bawah Blog :

1. Buat iklan melayang seperti diatas yaitu dengan cara masuk menu Template dan klik Edit HTML

2. Kemudian cari kode </body> , gunakan Ctrl+F untuk memudahkan pencarian

3. Setelah itu masukkan script berikut tepat diatas kode </body>

<script type='text/javascript'>
$(document).ready(function() {$('img#closed').click(function(){$('#btm_banner').hide(90);});});
</script>

<div id='floatads' style='width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999'>
<div><a id='close-floatads' onclick='document.getElementById('floatads').style.display = 'none';' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjnc4_Frjw90RNkkskjsWGKdC3kf3N7qwNblmgczJBVo6ChBnVaUrQVDeAItHF5lkV5VJzUE2tJc7O73PN9ru9yTPB8mmnbCsCEG1d4A-8bqrmemFmq2xjB4mYyOIE6Nvmj_8ulfU7Pm4/s1600/btn_close.gif' title='close button'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>

<a href='http://carazain.blogspot.com' title='Pasang Iklan Disini'><img style='max-width:100%;height:auto' alt='Pasang Iklan Disini' src='https://s19.postimg.org/fj338k3tf/728x90.gif'/></a>

</div>
</div>

#Ganti kode warna merah dengan script banner iklan sobat

Jika sudah klik Simpan template.. Selesai dan lihat hasilnya

Nah itulah bagaimana cara membuat iklan melayang di bawah blog dengan tombol close secara cepat dan mudah.

Silahkan dicoba

Cara Menghapus Blog Secara Permanen Di Blogger Terbaru

2016-08-18T09:11:00.006+08:00

Menghapus blog milik sendiri atau orang lain di blogspot, wordpress, mwb (mywapblog) oleh para blogger lewat hp maupun komputer pc mungkin dikarenakan beberapa penyebab yakni seperti blog lama tidak terurus, blog percobaan yang asal asalan, salah membuat url, lupa password dan email akun, terlalu banyak mempunyai blog atau misalkan karena melanggar ketentuan google dan mendapatkan peringatan yang memaksa saya, sobat atau kita semua untuk menghapus / men-delete sebuah blog tanpa menunggu dari pihak google nya yang menghapus blog tersebut secara permanen.

Kali ini saya akan share gimana Cara Menghapus Blog Secara Permanen Di Blogger Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin delete / hapus blog sendiri pada blogspot.

Cara Menghapus Blog Di Blogspot :

1. Bikin blog terhapus dari search engine atau internet secara permanen yaitu dengan cara login terlebih dahulu di blogger lalu klik tanda panah bawah - Setelan pada blog yang mana ingin dihapus seperti gambar berikut

2. Kemudian lihat di sebelah kiri layar dan klik pilihan Lainnya pada menu Setelan

3. Setelah itu klik tombol Hapus Blog seperti pada gambar dibawah ini

4. Maka akan muncul tampilan berikut yang memberikan info bahwa "Blog yang telah dihapus dapat dipulihkan dalam jangka waktu 90 hari sebelum dihapus selamanya..." Jadi sobat bisa mengembalikan blog yang dihapus dalam batas waktu 90 hari sebelum blog terhapus secara permanen. Sebelum manghapus blog sobat juga bisa mengekspor dengan meng-klik tombol Unduh Blog, jika tidak langsung saja sobat klik tombol Hapus Blog Ini untuk melakukan penghapusan blog.. Selesai

Nah itulah bagaimana cara menghapus blog sendiri di blogspot dengan mudah dan cepat.

Silahkan dicoba

Cara Memasang Iklan Di Bawah/Atas Posting Blog Terbaru

2016-08-11T14:45:00.001+08:00

Penempatan iklan yang baik dan benar pada blog selain pada sidebar, header, melayang di kiri kanan blog, juga bisa memasang nya di dalam konten artikel atau tepatnya dibawah dan atas artikel / postingan blogspot agar mendapatkan banyak klik dari pengunjung. Posisi dibawah/atas posting ini merupakan tempat paling banyak digunakan oleh para blogger untuk memasang iklan ppc seperti Google Adsense, KlikSaya, Bidvertiser dan yang lainnya sebab sebagian besar pengunjung lebih fokus ke dalam konten ketika mengunjungi sebuah blog jadi jika kita pasang iklan dibawah judul posting dan akhir posting tersebut maka akan membuat potensi klik nya / CTR semakin tinggi.

Kali ini saya akan share gimana Cara Memasang Iklan Di Bawah/Atas Posting Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin pasang iklan pada atas dan bawah artikel blogspot.

*Sebelumnya kode iklan sobat sudah di parse terlebih dahulu agar tidak terjadi error pada template, jika belum bisa klik disini

*Sobat juga bisa membackup template terlebih dahulu agar bisa dikembalikan ke semula jika terjadi error ketika melakukan edit html

Cara Memasang Iklan Di Bawah / Atas Postingan Blog :

1. Bikin iklan dibawah / atas postingan yaitu dengan cara masuk ke menu Template lalu klik Edit HTML

2. Kemudian sobat bisa cari kode <data:post.body/>, gunakan Ctrl+F untuk memudahkan pencarian.. Biasanya kode tersebut ada lebih dari satu di html blog jadi sobat nanti bisa coba satu persatu sampai berhasil

3. Jika sudah menemukan kode tersebut, maka untuk memasang iklan di atas postingan blog tinggal masukkan kode iklan sobat tepat di atas atau sebelum kode <data:post.body/> Contohnya :

<b:if cond='data:blog.pageType == "item"'>
<center>KODE IKLAN SOBAT UNTUK DIATAS POSTING</center>
<data:post.body/>
</b:if>

*kode berwarna biru bisa sobat tambahkan jika belum ada pada template tersebut yang berfungsi agar iklan hanya muncul pada halaman posting saja bukan di halaman index atau awal.

*kode berwarna merah bisa ditambahkan agar posisi iklan ditengah

Lebih jelasnya sobat bisa lihat seperti gambar dibawah ini

4. Selanjutnya untuk memasang iklan dibawah postingan blog sobat tinggal masukkan kode iklan tepat dibawah kode <data:post.body/> Contohnya :

<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<center>KODE IKLAN SOBAT UNTUK DIBAWAH POSTING</center>
</b:if>

Untuk contoh gambar dibawah ini sudah ada kode <b:if. . . (warna biru) jadi tinggal menambahkan kode iklan saja, jika di template sobat belum ada maka harus menambahkan kode warna biru seperti diatas beserta kode iklan tepat dibawah kode <data:post.body/> . Kalau sudah klik Simpan template.. Selesai

5. Jika berhasil maka iklan sobat akan muncul seperti gambar dibawah ini

Berikut gambar iklan diatas postingan :

Berikut gambar iklan dibawah postingan :

Nah itulah bagaimana cara memasang iklan dibawah / atas postingan blog dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Menu Dropdown Di Blog Dengan Mudah Terbaru

2016-06-10T11:03:00.000+08:00

Menu Dropdown adalah sebuah menu bar navigasi pada blog, wordpress maupun website yang memiliki sub sub menu menurun kebawah jika mouse / pointer di arahkan. Sebelumnya saya ada share cara membuat menu bar di blog tanpa edit html / css / php dengan tampilan standar. Sedangkan menu tab yang satu ini berbeda dengan yang sebelumnya sebab dapat memuat beberapa sub menu jadi bisa membuat menu lebih banyak sehingga pengunjung bisa menelusuri semua isi konten blog secara mudah dan cepat. Selain itu, dengan membuat / menambah / memasang menu dropdown ini pada blog maka tampilan blog akan menjadi lebih professional dan menarik. Untuk cara pasang nya pun tidak ribet bagi pemula hanya dengan menambahkan beberapa script kode html dan css pada template blog maka menu dropdown yang keren ini akan muncul di tampilan blog kita serta untuk penempatan widget menu dropdown ini sobat juga bisa mengatur nya baik dibawah maupun diatas header blog secara horizontal sesuai dengan keinginan.

Kali ini saya akan share gimana Cara Membuat Menu Dropdown Di Blog Dengan Mudah Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin menambahkan menu dropdown pada blog yang bagus, unik dan keren.

Cara Membuat Menu Dropdown Dengan CSS :

1. Bikin menu dropdown seperti diatas yaitu dengan cara masuk ke menu Template dan klik Edit HTML

2. Kemudian cari kode ]]></b:skin>, gunakan Ctrl+F untuk memudahkan pencarian

3. Lalu masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7elfxyir4e1x5aSllLhwrzgaICntnzMfsZG8BqDUztmVXCBvgihZXenRp7hBGk0oNMDSOjwQvp4YCWn1KdR9xoeB5dkBfMCSpWnJ-0sBbCmDcHu1ZO_y_B9EKWu87LYDXFT3WxhI-wZY/s1600/menubar.png) repeat-x;width:940px;margin:0 auto;padding:0 auto} #menuwrapper{width:940px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiq5tgLYpd7slF9ve2kJVU5k9IJvMpBZ3268eRfe6TV4rnTzg2eRCnRhkXxMltdlKpt6w2wzG40ZvgaNAuiaEhR8-2-GNroUB62QDZZXM7AGaKWW5RWxM8q_z9dBU81yAN_ntopBiYw_I/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

#Kode warna biru untuk mengatur ukuran lebar menu dropdown, sesuaikan dengan template sobat

4. Setelah itu cari lagi kode </header>, gunakan Ctrl+F untuk mempermudah

5. Lalu copy kode berikut :

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwFB8w7u619Cc-2VVuK9ltRfmeqyD6iapYbjJxK_wy0i67fQMroaLwrNJ5o2pIm197Rj6FA8jM9GjFaGVO-ffwU5GzNNZxKpJE37Go_CNFo4WJemRcy6zNEtKJwW5gxW8A6aZNrVxGopQ/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='#'>Tentang Admin</a></li>
<li><a class='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a></li>
<li><a class='#'>Tips dan Trik</a>
<ul>
<li><a href='#'>Komputer</a></li>
<li class='hr'/>
<li><a href='#'>Blogspot</a></li>
<li class='hr'/>
<li><a href='#'>Internet</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Software</a>
<ul>
<li><a href='#'>Application</a></li>
<li class='hr'/>
<li><a href='#'>Games</a></li>
<li class='hr'/>
<li><a href='#'>Anti Virus</a></li>
<li class='hr'/>
<li><a href='#'>OS Windows</a></li>
<li class='hr'/>
<li><a href='#'>Driver</a></li>
<li class='hr'/>
<li><a href='#'>Cracking</a></li>
<li class='hr'/>
<li><a href='#'>Hacking</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://carazain.blogspot.co.id/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://carazain.blogspot.co.id'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnkxlZNnO-ESQ4u8zEKNbnSMLTb9F8YOPUOtdN0AYckHzy7X5snCH9KVASTiCIYZFwB73-AXFanYhgryiGz6U3BNDhagpNnGZx6rdMvLaMSdfYe1eMBNLYiP5Td6AYDiFNXEX277lcto/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini sob......'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTIuwSnBmbOoMyui8YsBGCEVWk_bzqUpeU5rxNxS7-pAdecakbDEAz7PPPZgwpu8iwZ-VWUBpAaG95B10lZ81b7Rn_3zFFoDThq0TmGFbCPSdFVZU5rHwLQO-RB2eWY3xsCI5K1-p52M/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

#Ganti kode warna biru dengan nama menu dan sub menu
#Ganti kode warna merah dengan url tujuan menu tersebut
#Ganti kode warna hijau dengan alamat blog sobat

Jika sudah, masukkan semua kode tersebut tepat dibawah kode </header> dan klik Simpan template.. Selesai dan lihat hasilnya

Selain memasang menu dropdown dibawah header seperti cara diatas, sobat juga bisa memasangnya diatas header blog dengan cara pada tutorial no5 masukkan kodenya tepat diatas kode <header> bukan </header>. Atau sobat juga bisa memasangnya pada menu tata letak yang mudah dengan cara tambahkan gadget pada bawah header, sidebar atau footer blog dan masukkan kode yang ada tutorial no5 tersebut lalu simpan.

Nah itulah bagaimana cara membuat menu dropdown di blog dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Menu Bar Di Blog Dengan Mudah Terbaru

2016-06-09T18:31:00.004+08:00

Menu bar adalah navigasi yang ada di blog, wordpress maupun website yang berfungsi untuk memudahkan pengunjung menelusuri seluruh konten yang ada pada situs web tersebut. Sebenarnya jika sobat menggunakan template download biasanya sudah ada menu bawaannya seperti dropdown jadi tidak perlu membuat menu bar dan sub menu tab lagi di blogspot. Namun bagi yang template blognya standar atau tidak mempunyai menu bar tidak perlu khawatir sebab kita bisa menambah / memasang / membuat nya dengan mudah dan juga tanpa edit html / php / kode css yang sangat cocok untuk blogger pemula. Dengan menu bar keren ini, sobat dapat menampilkan halaman statis dan laman kategori label serta bisa menautkan menu bar dengan link dari web lain. Selain itu, kita juga bisa mengatur letak / posisi menu bar tersebut baik secara horizontal dibawah header, samping sidebar maupun pada footer blog.

Kali ini saya akan share gimana Cara Membuat Menu Bar Di Blog Dengan Mudah Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin menambahkan menu bar pada blog tanpa edit html untuk pemula.

Cara Membuat Menu Di Blog Dengan Mudah :

1. Bikin menu bar seperti diatas yaitu dengan cara masuk ke menu Tata Letak dan pada bawah header klik Tambahkan Gadget

2. Kemudian klik tombol tambah pada pilihan Laman

3. Setelah itu masukkan judul (boleh dikosongkan) dan centang semua laman yang ingin ditampilkan, lalu jika ingin menambah laman kategori tertentu bisa klik Tambahkan tautan eksternal seperti pada gambar

4. Selanjutnya akan muncul tampilan berikut, isi Judul laman dan masukkan url atau link tujuannya, jika sudah klik Simpan Tautan

5. Kemudian sesuaikan posisi, sobat bisa menggesernya ke atas atau ke bawah agar teratur

6. Jika sudah langsung saja klik Simpan

7. Setelah itu untuk mengatur warna menu bar sobat bisa masuk ke menu Template dan klik Sesuaikan

8. Selanjutnya klik pilihan Tingkat lanjut - Latar Tab dan atur Warna sesuai keinginan sobat

9. Terakhir jika sudah merubah warna menu, klik tombol Terapkan ke Blog yang ada di pojok halaman.. Selesai dan lihat hasilnya

Nah itulah bagaimana cara membuat menu di blog dengan mudah dan cepat tampilan terbaru.

Silahkan dicoba

Cara Membuat Iklan Melayang Di Kanan Kiri Blog Terbaru

2016-06-06T15:40:00.002+08:00

Iklan melayang atau floating merupakan salah satu penempatan iklan di blogspot, wordpress, joomla maupun website yang letaknya strategis sebab iklan akan tetap pada posisinya walaupun browser di scroll ke bawah atau ke atas yang memungkinkan orang lain / pengunjung akan selalu melihat iklan tersebut di samping kanan kiri blog kita dan bisa mengkliknya. Space banner / kotak / kolom iklan float yang memiliki ukuran 160x600 ini juga dilengkapi dengan tombol close jadi pengunjung dapat menutup iklan tersebut jika dirasa menggangu ketika mereka browsing. Namun biasanya untuk iklan ppc tidak memperbolehkan memasang iklan secara float atau melayang, jadi disarankan membuat iklan melayang ini hanya untuk blog yang mau pasang iklan mandiri atau iklan tanpa pihak ketiga dimana hanya pemilik blog dan pemasang iklan yang saling berinteraksi dan membuat kontrak dengan harga yang kebanyakan para advertiser berani membayar tinggi untuk penempatan iklan pada posisi ini.

Kali ini saya akan share gimana Cara Membuat Iklan Melayang Di Kanan Kiri Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memasang space banner iklan di samping kiri dan kanan pada blogspot secara float.

Cara Memasang Iklan Di Kiri Kanan Blog :

1. Bikin iklan melayang pada samping kanan dan kiri blog yaitu dengan cara masuk ke menu Tata Letak

2. Kemudian scroll kebawah halaman dan klik Tambahkan Gadget baik pada sidebar atau footer blog, terserah saja

3. Lalu klik tombol tambah pada HTML/Javascript

4. Setelah itu copy script kode berikut :

<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHWVkKoRt40GYJrPS2XtWuCbSZ39Dnrlq72rQZO5KcqPVloh8UcW3pMKgCq6rL2Ih2T13iX0Y20eDtJrr6mtsYy0lRqoajBAcqjb_sKcPPI5fXarFif8k-mIi9CIC_mGMSIiDZEJGwa6xK/s1600/close3.png' alt='close' title='close button'/></center></a></div>

<a href="http://carazain.blogspot.com/" target="_blank"><img src="http://s19.postimg.org/d3ypty98z/space_banner_160x600.gif" border="0" alt="iklan 160 x 600" title="Pasang Iklan Anda Disini" /></a>

</div>


<div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHWVkKoRt40GYJrPS2XtWuCbSZ39Dnrlq72rQZO5KcqPVloh8UcW3pMKgCq6rL2Ih2T13iX0Y20eDtJrr6mtsYy0lRqoajBAcqjb_sKcPPI5fXarFif8k-mIi9CIC_mGMSIiDZEJGwa6xK/s1600/close3.png' alt='close' title='close button'/></center></a></div>

<a href="http://carazain.blogspot.com/" target="_blank"><img src="http://s19.postimg.org/d3ypty98z/space_banner_160x600.gif" border="0" alt="iklan 160 x 600" title="Pasang Iklan Anda Disini" /></a>

</div>

# Ganti kode yang berwarna merah dengan kode iklan sobat untuk posisi di kanan
# Ganti kode yang berwarna biru dengan kode iklan sobat untuk posisi di kiri

Jika sudah masukkan semua kode tersebut kedalam kotak konten lalu klik Simpan.. Selesai dan lihat hasilnya

Nah itulah bagaimana cara membuat iklan melayang di kanan kiri blog dengan mudah dan cepat.

Silahkan dicoba

Cara Mengganti Alamat URL Blog Di Blogger Terbaru

2016-06-05T11:54:00.002+08:00

URL adalah alamat link dari blogger, wordpress, mwb maupun website sebagai identitas dari situs web tersebut. Sebuah alamat blog yang bagus dan benar yakni tersedia, jelas tulisannya, keren, tidak terlalu panjang dan unik selain mudah untuk diingat oleh para pengunjung juga agar besar kemungkinan untuk dapat ditemukan di search engine. Biasanya kebanyakan para blogger yang ingin mengubah atau mengganti alamat pada blognya baik yang domain sendiri / .com atau masih menggunakan blogspot disebabkan karena terlalu panjang dan tidak sesuai dengan tema blog tersebut. Namun jika blog sudah berumur lama serta memiliki banyak artikel yang sudah jadi dan terindex, tidak disarankan untuk ganti url karena akibatnya traffic blog akan turun drastis dan memulainya dari nol lagi. Lain halnya dengan blog yang baru dibuat karena google belum crawl atau index blog jadi tidak masalah untuk cara merubah alamat blog tersebut menjadi lebih SEO dan valid dengan mudah dan gratis.

Kali ini saya akan share gimana Cara Mengganti Alamat URL Blog Di Blogger Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin menghapus alamat blog dan menggantinya dengan alamat yang baru.

Cara Mengganti Alamat Blog Di Blogger :

1. Bikin alamat url blog baru yaitu dengan cara masuk ke Menu Setelan lalu klik Dasar

2. Kemudian pada Alamat Blog klik tombol Edit seperti gambar dibawah ini

3. Terakhir ubah alamat blog sesuai dengan keinginan sobat, jika sudah klik Simpan dan lihat hasilnya.. Selesai

Nah itulah bagaimana cara mengganti alamat blog di blogger dengan mudah dan cepat.

Silahkan dicoba