Cara Terbaru Gratis

Script

Showing posts with label Script. Show all posts

Cara Membuat Popular Post Warna Warni Di Blog Terbaru

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.

Cara Membuat Sumber Link Otomatis Saat Blog Di Copas Terbaru

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 membuat link aktif di komentar blog

Blog Script

Cara membuat link aktif di komentar blog, Membuat link aktif memang berguna bagi yang membuat link aktif tersebut, karena membuat link aktif merupakan salah satu cara yang sangat mudah untuk mendapatkan backlink secara gratis. Namun sering kali, banyak pemilik blog yang melarang pengunjungnya untuk membuat komentar yang berupa link aktif. Nah, bagi yang belum tahu bagaimana caranya membuat link aktif di komentar blog, saya akan sharing sebuah artikel yani Cara membuat link aktif di komentar blog. Berikut caranya,

1. Tentukan blog target yang mau teman-teman komen.

2. Copy kode dibawah ini, kemudian paste di kolom komentar yang sudah ditentukan.

<a href="https://caraterbarugratis.blogspot.com/p/daftar-isi.html">Nurul Hidayat</a>

3. Ganti tulisan berwarna BIRU dengan link yang akan dituju, dan ganti tulisan berwarna MERAH dengan teks yang teman-teman inginkan.

Oke, sangat mudah untuk membaut link aktif di komentar blog. Teman-teman pasti bisa melakukannya kok. Sekian dari saya untuk hari ini. Selamat bereksperimen dan semoga sukses.

Cara Membuat External Link Otomatis NoFollow di Blog

Blog Script Add Comment

Cara Membuat External Link Otomatis NoFollow, Pada postingan kali ini saya akan berbagi seputar info tentang SEO (Search Engine Optimization). Didalam dunia blog ada yang namanya link internal dan link external. Saya akan bahas Cara Membuat External Link Otomatis NoFollow. Mungkin ada beberapa pertanyaan "Kenapa dan mengapa link external harus dibuat nofollow ?" Mungkin banyak sekali blog yang beraliran DoFollow. Namun, menurut referensi yang saya dapatkan dari situs seo checker bahwa agar blog tidak terlalu banyak External Link. Kalaupun ada, silahkan di set semaksimal mungkin agar link menjadi NoFollow. Bagaimana caranya ?

Cara Membuat External Link Otomatis NoFollow

1. Login ke blogger.com
2. Masuk ke rancangan -> Edit HTML -> Klik Expand Widget Templates
3. Copas kode dibawah ini dan letakkan sebelum kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
jQuery('a').each(function() {
var href = jQuery(this).attr('href');
if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 ||
href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {
jQuery(this).attr("rel", "nofollow");
}
});
//]]>
</script>

4. Simpan

Nah sekarang Link External blog kamu secara otomatis menjadi Nofollow. Jadi, silahkan terapkan dan tunggu apalagi coba sekarang juga. Semoga bermanfaat :)

Cara memasang javascript otomatis menambahkan alt tag dan title pada gambar

Blog Script Add Comment

selain untuk mengoptimasi seo dari artikel yang kamu buat , Mengisi alt gambar itu berguna juga untuk menanam keyword yang sedang kamu bidik karena di search engine juga ada loh pencarian yang di filter dengan hasil gambar jadi buatlah gambar postingan kamu semenarik mungkin dan selengkap mungkin dengan mengisi alt tag dan title nya.

script auto tag alt and title image blogger

Juga dengan membari alt tag serta title pada gambar itu membuat mesin pencari lebih cepat menemukan dan mengenal postingan kamu sesuai dengan keyword yang visitor cari di search engine.

Gimana postingan kamu bisa page one jika hal tersebut kamu lupakan ? Jadi mari kita lihat bagaimana cara membuat alt tag otomatis pada gambar postingan blogger kamu.

Buka dashboard blogger kamu ; https://www.blogger.com
Klik menu tema / template / theme.
Klik Edit HTML.
Cari kode </body> lalu letakan kode dibawah ini tepat diatasnya :

<script>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src');
var stringtittle = $("h1").text().replace(/\n/g, "")
if(!$img.attr('title')){
$img.attr('title', stringtittle);
}
if(!$img.attr('alt') ){
$img.attr('alt', stringtittle);
}
});
});
//]]>
</script>

Cara Terbaru Gratis | Kumpulan Tips, Trik, Info dan Tutorial

Cara Membuat Popular Post Warna Warni Di Blog Terbaru

Cara Membuat Sumber Link Otomatis Saat Blog Di Copas Terbaru

Cara membuat link aktif di komentar blog

Cara Membuat External Link Otomatis NoFollow di Blog

Cara Membuat External Link Otomatis NoFollow

Cara memasang javascript otomatis menambahkan alt tag dan title pada gambar