Tutorial Terbaru Membuat Auto Followers Instagram dengan Script

Tutorial Membuat Auto Followers Instagram dengan Script 2018 - Ada yang ingin memulai bisnis sosial media ? ingin punya akun instagram dengan followers yang banyak ? tidak perlu khawatir gan, kalian bisa mewujudkan itu semua dengan tutorial yang akan admin berikan pada kesempatan kali ini. yak benar sekali, Tutorial Membuat Auto Followers Instagram dengan Script ini bisa menjadi salah satu langkah awal agan mewujudkan keinginan dalam keperluan sosial media.

Kali ini admin akan menjelaskan bagaimana cara membuat sebuah panel sendiri, auto followers instagram, yang nantinya bisa agan gunakan dengan bijak. Admin sangat menyarankan bahwa tutorial ini bukanlah admin share secara bebas untuk digunakan seenaknya. Tapi ada beberapa ketentuan agar tidak ada yang merasa dirugikan. Salah satu hal yang penting adalah Hosting.

Ada banyak sekali pilihan hosting di google yang dapat agan pilah pilih terlebih dahulu, mana yang lebih cocok dengan kebutuhan agan sendiri. Berikut ini adalah beberapa referensi hosting yang cukup bagus, yaitu ada Hostinger, Niagahoster, dan lain - lain. Kalau begitu langsung saja menuju ke tutorial.

Tutorial

1. Silahkan agan men-download script Auto Followers 2018 by InstaHit di sini ( link download )

2. Siapkan cPanel yang sudah agan buat dan upload script yang sudah di download tadi ke dalam cPanel hosting agan.

3. Buka Wizard Database MySQL atau fitur yang sejenis pada hosting agan.

4. Buatlah sebuah Database dengan mengisi semua kolom yang ada dan beri tanda ceklis pada semua kolom.

5. Buka PhpMyAdmin atau fitur sejenis pada hosting agan dan buka tab SQL.

6. Drag dan Drop file table.sql ke dalam kolom tersebut dan klik kirim.

7. Kembali ke File Manager dan buka Folder Application > Config lalu cari file mainconfig.sql 

8. Edit file tersebut seperti di bawah ini.

9. Ganti "user_user" dengan username berdasarkan Database yang tadi, "password" dengan password yang sesuai dengan Database, dan "user_db" dengan username Database.

Sekian tutorial yang bisa admin berikan, jika ada kendala atau beberapa pertanyaan silahkan tanyakan di kolom komentar. Kurang lebihnya mohon maaf, Terimakasih sudah berkunjung!

Cara Membuat Ucapan Marhaban Ya Ramadhan Responsive di Blog

Cara Membuat Ucapan Marhaban Ya Ramadhan Responsive di Blog - Yap, datangnya bulan suci Ramadhan tidak akan lepas dari ucapan yang akan selalu terdengar. Marhaban Ya Ramadhan, untuk membuat ucapan serta tulisan itu di blog cukup mudah gan. Dengan menggunakan code CSS yang simple, mastah kompiajaib yaitu Adhy Suryadi sudah menshare code css itu dan sudah bisa agan gunakan sekarang juga. Bagi yang ingin segera memasang nya, silahkan melanjutkan posting ini.

Pada bulan suci ramadhan ini, kita sebagai umat muslim yang insyaallah akan selalu beriman dan bertaqwa kepada Allah SWT. wajib menyambut bulan yang penuh berkah ini. Selagi pengunjung mengelilingi blog agan, alangkah baiknya agan memberikan popup berupa ucapan Marhaban Ya Ramadhan. Dengan begitu insyaallah kita bisa terus mensucikan bulan yang pernuh berkah ini.

Tutorial Pemasangan

Pertama, silahkan agan masuk ke blogger dan pergi menuju ke template. Pasang style di bawah ini tepat di atas kode </head>

<style>
/*<![CDATA[*/
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.idul_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(9,150,13,.8);z-index:99999;display:none}
.idul_message{width:50%;background:#fff;font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content:"";height:0;width:0;position:absolute;bottom:-40px;left:20px;border:20px solid transparent;border-color:#fff transparent transparent}
.profile-idul{background:#0c9f17;border:1px solid transparent;border-radius:100%;position:fixed;bottom:10px;left:10px;cursor:pointer;width:50px;height:50px;z-index:9999}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;left:-120px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;right:-30px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-left:-45%!important;}
.profile-idul2{left:50%;margin-left:-105px;}
.idul_message:before{left:50%;margin-left:-20px;}
.close_idul{color:#555;top:-16px;right:0;}
}
/*]]>*/
</style>

Kedua, sebelum memulai langkah kedua bagi yang ingin mengubah style diatas silahkan ganti apa yang agan tahu. Jangan asal mengedit jika tidak mengerti ! selanjutnya pasang kode di bawah ini tepat di atas kode </body>

<img class='profile-idul tada' onclick='openIdulfitri()' expr:alt='data:post.author' height='50' src='URL FOTO ANDA' width='50' title="Click Me!"/>
<div class="idul_layout animated flip" id="id_fitri">
  <div class="idul_message">
    <h2>"Marhaban Ya Ramadhan"</h2>
    <p>Bulan suci kembali tiba, saat tepat menyucikan diri dari segala dosa, mohon dimaafkan dari segala kesalahan.
      <br/><br/> Saya, <b>NAMA ANDA</b> selaku admin blog <b>TITLE BLOG</b> mengucapkan:
      <br/>
      <b>"Selamat menjalankan ibadah puasa bagi umat yang menjalankannya"</b>.</p>
    <img class='profile-idul2' expr:alt='data:post.author' height='200' src='URL FOTO ANDA' width='200' />
    <div class="close_idul" onclick='closeIdulfitri()'>&amp;times</div>
  </div>
</div>
<script>
//<![CDATA[
function openIdulfitri(){var e=document.getElementById("id_fitri");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
function closeIdulfitri(){var e=document.getElementById("id_fitri");"none"!==e.style.display?e.style.display="none":e.style.display="block"};
//]]>
</script>

Sekian tutorial yang dapat admin berikan, jika ada pertanyaan silahkan tanyakan di kolom komentar atau bisa langsung hubungi admin melalui menu contact me pada header blog. Terimakasih, dan sekali lagi admin ucapkan Marhaban Ya Ramadhan.

Cara Membuat Widget Music Player Keren Update

Cara Membuat Widget Music Player Keren Update - Jarang posting blogger tutorial, admin mau sharing tutorial widget music player atau pemutar musik keren dengan tampilan display mirip seperti pemutar music android atau smartphone. Penasaran ? sebelum dilanjutkan admin juga akan memperjelas pada agan semua, sebaiknya agan sudah memiliki tutorial mendasar dalam mengoperasikan blog agan. Jangan sampai tidak mengerti apa - apa tetapi agan terlanjut mencoba tanpa pengetahuan. Yuk lanjut membaca gan.

Sebelum melanjutkan posting ini menuju tutorial pemasangan widget music player ini, admin berterimakasih kepada admin dari blog seocips yang sudah sharing tutorial ini. Jika agan berminat mengunjungi blog seocips, admin juga akan mengarahkan link berikut pada blog seocips. Sebagai blog yang lebih professional, admin sangat terinspirasi dari blog tersebut. Okaylah lanjut pada tutorialnya gan.

Tutorial Pemasangan

Pertama agan buka blogger dan masuk ke template, setelah itu edit html dan copypaste javascript dibawah ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/SEOCIPS-musiccc.js' type='text/javascript'></script>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/seocips-music.js' type='text/javascript'></script>

Kedua masih tetap dalam edit html template, copypaste script style css berikut ini tepat diatas kode </b:skin> sebenarnya ada kode tambahan di depan </b:skin> intinya diatas kode tersebut.

*,:after,:before { box-sizing:border-box; }
.pull-left { float:left; }
.pull-right { float:right; }
.clearfix:after,.clearfix:before { content:''; display:table; }
.clearfix:after { clear:both; display:block; }
.track { width:2px; margin-right:5px; background:rgba(0,0,0,0); transition:background 250ms linear; }
.track:hover,.track.dragging { background:#d9d9d9; background:rgba(0,0,0,.15); }
.handle { right:0; width:2px; background:#999; transition:width 250ms; background:rgba(255,255,255,.2); }
.mhn-player { width:360px; height:500px; padding:15px; position:relative; margin:55px auto 0; background:rgba(0,0,0,.9); box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21); }
.mhn-player .album-art,.mhn-player .album-thumb { background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MC4zMTNweCIgaGVpZ2h0PSI5MC4zMTNweCIgdmlld0JveD0iMCAwIDkwLjMxMyA5MC4zMTMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDkwLjMxMyA5MC4zMTMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMTkxOTE5IiBkPSJNNDUuMTU2LDBDMjAuMjE4LDAsMCwyMC4yMTcsMCw0NS4xNTZjMCwyNC45MzksMjAuMjE4LDQ1LjE1Niw0NS4xNTYsNDUuMTU2YzI0LjkzOSwwLDQ1LjE1Ni0yMC4yMTgsNDUuMTU2LTQ1LjE1NkM5MC4zMTMsMjAuMjE3LDcwLjA5NSwwLDQ1LjE1NiwweiBNMjIuMzk3LDc4Ljc1M2MwLDAtNS4yNzQtMy41NC03LjIyNS01Ljc4Yy0xLjk1MS0yLjI0LTMuOTc0LTQuNjk2LTMuOTc0LTQuNjk2TDI2LjAxLDU4LjE2MWw1Ljc4LDUuNzhsMC4zNjIsMC4zNjFMMjIuMzk3LDc4Ljc1M3ogTTQ1LjE1Niw2My4yMTljLTkuOTc2LDAtMTguMDYzLTguMDg3LTE4LjA2My0xOC4wNjNjMC05Ljk3NSw4LjA4Ny0xOC4wNjMsMTguMDYzLTE4LjA2M2M5Ljk3NSwwLDE4LjA2Myw4LjA4NywxOC4wNjMsMTguMDYzQzYzLjIxOSw1NS4xMzIsNTUuMTMyLDYzLjIxOSw0NS4xNTYsNjMuMjE5eiBNNjQuMzAzLDMyLjUxM2MwLDAtMC42NjItMS4yMDQtMi4xNjctMi44OWMtMS41MDUtMS42ODYtMy45NzQtMy45NzQtMy45NzQtMy45NzRsMTAuMTE1LTE0LjQ1YzAsMCwyLjQwOCwxLjc0Niw0LjY5NiwzLjYxMmMyLjI4OCwxLjg2Nyw2LjE0MSw3LjIyNSw2LjE0MSw3LjIyNUw2NC4zMDMsMzIuNTEzeiBNNDUuMTU2LDQxLjE4MmMtMi4xOTUsMC0zLjk3NCwxLjc3OS0zLjk3NCwzLjk3NGMwLDIuMTk1LDEuNzc5LDMuOTc0LDMuOTc0LDMuOTc0YzIuMTk1LDAsMy45NzQtMS43NzksMy45NzQtMy45NzRDNDkuMTMsNDIuOTYxLDQ3LjM1MSw0MS4xODIsNDUuMTU2LDQxLjE4MnoiLz48L2c+PC9nPjwvc3ZnPg==) no-repeat center / 50%; }
.mhn-player .album-art { width:330px; height:330px; overflow:hidden; position:relative; border:1px solid #000; }
.mhn-player .album-art img { width:100%; display:block; }
.mhn-player .album-art:before { top:30px; left:50%; width:200px; content:'music'; font-size:72px; font-weight:600; position:absolute; margin-left:-100px; color:rgba(255,255,255,.4); }
.mhn-player .album-art:after { top:0; left:0; content:''; width:inherit; height:inherit; position:absolute; background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,1)); }
.mhn-player .album-art img { width:100%; position:relative; }
.mhn-player .album-art.blur img { -webkit-filter:blur(3px); -moz-filter:blur(3px); filter:blur(3px); }
.mhn-player a { color:inherit; text-decoration:none; }
.mhn-player .play-list { top:15px; left:15px; right:15px; display:none; bottom:245px; overflow-y:auto; position:absolute; width:auto !important; background:rgba(0,0,0,.4); padding-right:1px !important; }
.mhn-player .play-list a { color:#ccc; display:block; overflow:hidden; padding:6px 10px; white-space:nowrap; text-overflow:ellipsis; transition:all .4s ease-in-out 0s; }
.mhn-player .play-list a:hover { background:rgba(255,255,255,.2); }
.mhn-player .play-list a.active { color:#2ecc71; }
.mhn-player .play-list .album-thumb { width:35px; height:35px; overflow:hidden; margin-right:10px; border:1px solid #666; }
.mhn-player .play-list .album-thumb img { width:100%; display:block; }
.mhn-player .play-list .songs-info { max-width:240px; text-shadow:0 2px 2px #000; }
.mhn-player .play-list .songs-info .song-title { font-size:16px; }
.mhn-player .play-list .songs-info .songs-detail { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.mhn-player .current-info { left:30px; right:30px; color:#ccc; bottom:160px; margin-left:-15px; margin-right:-15px; position:absolute; text-shadow:0 2px 4px #000; }
.mhn-player .current-info>div { margin-top:10px; }
.mhn-player .current-info .song-title { font-size:24px; margin-top:10px; font-weight:400; }
.mhn-player .current-info .fa { min-width:30px; font-size:18px; text-align:center; font-weight:normal; }
.mhn-player .controls { margin-top:30px; position:relative; }
.mhn-player .controls .toggle-play-list { right:5px; width:40px; color:#ccc; height:40px; bottom:100px; border-radius:50%; line-height:40px; text-align:center; position:absolute; background-color:crimson; }
.mhn-player .controls .fa-pp:before { content:'\f04b'; }
.mhn-player .controls .active .fa-pp:before { content:'\f04c'; }
.mhn-player .controls .progress { height:1px; margin:15px 0; position:relative; background:#262626; }
.mhn-player .controls .duration { color:#ccc; font-size:14px; }
.mhn-player .controls .progress .bar { width:0; display:block; height:inherit; background:#bc3958; box-shadow:0 0 5px 0 #bc3958; }
.mhn-player .controls .action-button a { width:40px; height:40px; font-size:16px; margin-right:5px; border:2px solid; line-height:35px; border-radius:50%; text-align:center; display:inline-block; }
.mhn-player .controls .action-button a:hover,.mhn-player .controls .action-button a.active { color:#ccc; }
.mhn-player .controls .action-button a .fa { font-size:inherit; }
.volume { height:10px; width:100px; margin:0 10px; font-size:14px; cursor:pointer; display:inline-block; -webkit-appearance:none; background:transparent; }
.volume::-webkit-slider-runnable-track { height:.5em; background:#d8d8d8; border-radius:.25em; -webkit-appearance:none; }
.volume::-moz-range-track { border:none; height:.5em; background:#d8d8d8; border-radius:.25em; }
.volume::-ms-track { border:none; height:.5em; color:transparent; background:#d8d8d8; border-radius:.25em; }
.volume::-webkit-slider-thumb{-webkit-appearance:none; position:relative; margin:-.25em; border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-moz-range-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; cursor:ew-resize; border-radius:.5em}
.volume::-ms-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-ms-fill-lower,.volume::-ms-fill-upper { border-radius:5em; background:transparent; }
.volume::-ms-tooltip { display:none; }
.volume::-ms-fill-lower { background:#f05e7b; }
.volume::-webkit-slider-thumb { background:#dc143c; }
.volume::-moz-range-thumb { background:#dc143c; }
.volume::-ms-thumb { background:#dc143c; }
.volume::-webkit-slider-runnable-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume::-moz-range-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume[data-css="0"]::-webkit-slider-runnable-track{background-size:0% 100%}
.volume[data-css="0"]::-moz-range-track{background-size:0% 100%}
.volume[data-css="0.1"]::-webkit-slider-runnable-track{background-size:10% 100%}
.volume[data-css="0.1"]::-moz-range-track{background-size:10% 100%}
.volume[data-css="0.2"]::-webkit-slider-runnable-track{background-size:20% 100%}
.volume[data-css="0.2"]::-moz-range-track{background-size:20% 100%}
.volume[data-css="0.3"]::-webkit-slider-runnable-track{background-size:30% 100%}
.volume[data-css="0.3"]::-moz-range-track{background-size:30% 100%}
.volume[data-css="0.4"]::-webkit-slider-runnable-track{background-size:40% 100%}
.volume[data-css="0.4"]::-moz-range-track{background-size:40% 100%}
.volume[data-css="0.5"]::-webkit-slider-runnable-track{background-size:50% 100%}
.volume[data-css="0.5"]::-moz-range-track{background-size:50% 100%}
.volume[data-css="0.6"]::-webkit-slider-runnable-track{background-size:60% 100%}
.volume[data-css="0.6"]::-moz-range-track{background-size:60% 100%}
.volume[data-css="0.7"]::-webkit-slider-runnable-track{background-size:70% 100%}
.volume[data-css="0.7"]::-moz-range-track{background-size:70% 100%}
.volume[data-css="0.8"]::-webkit-slider-runnable-track{background-size:80% 100%}
.volume[data-css="0.8"]::-moz-range-track{background-size:80% 100%}
.volume[data-css="0.9"]::-webkit-slider-runnable-track{background-size:90% 100%}
.volume[data-css="0.9"]::-moz-range-track{background-size:90% 100%}
.volume[data-css="1"]::-webkit-slider-runnable-track{background-size:100% 100%}
.volume[data-css="1"]::-moz-range-track{background-size:100% 100%}

Ketiga klik save template, dan sekarang agan pergi ke tata letak dan add widget. Setelah itu pilih HTML/Javascript dan copypaste script dibawah ini.

<div class="mhn-player">
<div class="album-art"></div>
<div class="play-list">
 <a href="#" class="play"
  data-id="1"
  data-album="Lagu Pembukaan"
  data-artist="Seocips Alay Bingitz"
  data-title="Bingung"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsgUEM9P6OwSqu6FnewR-H5Vm4A3uLk7XdcQtM-35N_XgfJsp98A3xDTFm1c_qqqOL43QqYMxnvpMZVVje584wq7WbM5l7_hwbJJn6ZVU_8w3mWY2m6gcfXHbX0QhKTh-vsMPnoSDAC04/s1600/egoist.jpeg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/seocips-mp3-1.mp3"></a>
 <a href="#" class="play"
  data-id="2"
 data-album="Country song"
  data-artist="Alan Jackson"
  data-title="Remember When"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhityj1qtWwQ4DIkr6MNSsVpL6ZcmchxMO9ILxqyGHMyIWCGoTccGm63RToLYNghrK7koNn1CJTEeDbLGpv4FDkuiG9_GZaEazy0-xejYEXARa0qvnfGqxU2lgqOPo0dJPWnYgCA6-uqUI/s400/AlanJackson-GreatestHits.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/Remember%20When%20-%20Alan%20Jackson%20Lyrics.mp3"></a>
 <a href="#" class="play"
  data-id="3"
  data-album="SafeBand"
  data-artist="SafeBand"
  data-title="Semestinya Terlarang"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq3SZ2UZZ-3YmIhdwPMBpYvlll5NGouYU_Vxr8e9xFURDphQZXBWSGbsQFj9xxCrdNVvgkZoP6X7z6hv0oOL7ETvR0BFgf0TiPUUGY5bzgTqLkFxYhigAAN6VP9qh_9SoLzJc2s8IILfI/s1600/Kumpulan+Gambar+Anime+Jepang+Cantik+dan+Ganteng.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/Save%20Band%20-%20Semestinya%20Terlarang.mp3"></a>
 <a href="#" class="play"
  data-id="4"
  data-album="ABCD"
  data-artist="EFGH"
  data-title="IJKL"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrYGoaW691BgQhEa-T7T5e47PPmGPWSWyT1IoWvd7EIBayrM0w-21GJ9qekPW3wBM_6ZgcVJNSnYC4dnMYeiSaUHYcKiAcoVo3zmB0AljL0JtOqEm5F5bRCjJRhOEP7iZUw5aBe7Wouo/s1600/dark-angels.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/dj%20seocips.com-%20Hotmusic3.mp3"></a>
 <a href="#" class="play"
  data-id="5"
  data-album=""
  data-artist="Katy Perry"
  data-title="Roar"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUGbZb3OAf5DDTy_41OX4g_WHtxqGzocbQIpb3kvMBLpu4iiXCmcA4A7Vn9mQ3HVD5M2_7m0I7S6Rno-y3dgTqNDIM2Rf5H9gDQlKN-PXy31WbNA1MJi0NMGUxTncxKiNFBoAGtDikhX0/s1600/Katy+Perry+%25E2%2580%2593+Hits+Collection+%25282015%2529+320+KBPS.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/08.%20Katy%20Perry%20-%20Roar.mp3"></a>
 <a href="#" class="play"
  data-id="6"
  data-album=""
  data-artist="The Rock Indonesia"
  data-title="Selir hati"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYaIsAO5mUmKXTWu6MgBvhJtvDKK-6fI1zzgyl9_K1_IdUlExu3l4SsZZ4ezmD1Basx7rTgffWdoFh95xIan9g2b-MzjoT2dXuVFFM-20jQmeRytnAf6qYuxwYf6NiFSnLNqvEl_xwA/s1600/TheRockIndonesia.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/The%20Rock%20-%20Selir%20hati.mp3"></a>
  <a href="#" class="play"
  data-id="7"
   data-album="Yovie and Nuno"
  data-artist="Yovie and Nuno"
  data-title="Janji Suci"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7cx_6B9Y-OZNYklv2_JnfAsqYN7Ebwof29bZEUno3pCqbpcFiknDKi1f2gVRWusnoF6KPE9JFAQrbXzPSpcshaoVcSc7Qd4gjAcGBP0Q2L5wxwZkucdtActtBp01WuDIbsnHXhWKWbI/s1600/still-the-one.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/Yovie%20N%20The%20Nuno%20-%2003%20Janji%20Suci.mp3"></a>
 <a href="#" class="play"
  data-id="8"
  data-album="VX"
  data-artist="Seocips.com"
  data-title="Oh Yeah"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_eCoOkshUY1PidECELx8xOH_fQhHi0YxyHK-k7XJE4oJ0Mvy7HqdSnI-ioNZKTVZ-gH4w3F_3Lxz2pAqoPej2-Nma-4PF0tlaNd6EkwB2HTKdXPieZ-_sGauCxvegXI-GVWd9nQKSj4/s400-p/Gyakusatsu+Kikan+Genocidal+Organ+AnimeRid.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/seocips-mp3-1.mp3"></a>
  </div>
<div class="audio"></div>
<div class="current-info">
 <div class="song-artist"></div>
 <div class="song-album"></div>
 <div class="song-title"></div>
</div>
<div class="controls">
<a href="#" class="toggle-play-list"><i class="fa fa-list-ul"></i></a>
<div class="duration clearfix">
 <span class="pull-left play-position"></span>
 <span class="pull-right"><span class="play-current-time">00:00</span> / <span class="play-total-time">00:00</span></span>
</div>
<div class="progress"><div class="bar"></div></div>
<div class="action-button">
 <a href="#" class="prev"><i class="fa fa-step-backward"></i></a>
 <a href="#" class="play-pause"><i class="fa fa-pp"></i></a>
 <a href="#" class="stop"><i class="fa fa-stop"></i></a>
 <a href="#" class="next"><i class="fa fa-step-forward"></i></a>
 <input type="range" class="volume" min="0" max="1" step="0.1" value="0.5" data-css="0.5">
</div>
</div>
</div>

Selesai, tinggal save dan jika ingin mengedit bisa lihat tulisan yang diblock warna merah gan. Jika masih ada pertanyaan yang ingin disampaikan, silahkan gan. Lewat komentar juga bisa gan, akan admin balas komentar agan secepat mungkin.

Sekian tutorial blogger yang admin sampaikan, semoga bermanfaat terimakasih.

Cara Membuat Widget Recent Post By Label

Cara Membuat Widget Recent Post By Label - Gak lama - lama gan, admin mau sharing tutorial blogger yang sudah lama gak update. Mungkin tutorial kaya gini sudah banyak di google namun admin hanya ingin share ulang saja. Bagi yang tidak berminat membaca posting ini harap meninggalkan blog advaster segera. Tutorial ini admi dapatkan dari blogger ternama yaitu Arlina Design. Membuat recent post berdasarkan label dapat mempermudah pengunjung dalam menentukan topik yang ingin dilihat. Lanjut baca gan.

Pertanyaan yang biasa muncul dalam tutorial blogger adalah, apa saja sih min manfaat dari memasang widget ini ? dan admin akan memberikan penjelasannya dalam tag khusus untuk Fitur nya gan. Selain itu juga kesulitan dalam memasang widget itu tergantung dari seberapa luas pengetahuan yang agan miliki dalam mengedit blog. Biasanya admin sangat menyarankan agan sudah mengerti teknik dasar mengubah scrip mencari kode dan lainnya.

Fitur

• Mempermudah pengunjung dalam mencari post
• Membuat blog terlihat rapih
• Membantu blog agar terlihat professional

Tutorial Lengkap

Berikut ini adalah tutorial yang sudah dikemas sedemikian rupa agar mudah dipahami gan. Sekali lagi admin hanya repost tutorial ini. Silahkan di cermati dengan teliti gan.

Pertama masuk ke blogger dan template setelah itu pilih edit html. Seperti biasa silahkan agan copy dan pasang script dibawah ini tepat diatas kode </head>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Recent Post by Label */
.newarlinalabel1 ul,.newarlinalabel2 ul{list-style:none;margin:0;padding:0}
.newarlinalabel1 li,.newarlinalabel2 li{margin:0;padding:0;}
.newarlinalabel1 .widget,.newarlinalabel2 .widget{margin:0;padding:0}
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.newarlinalabel1 h2,.newarlinalabel2 h2,.newarlinalabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}
.newarlinalabel2 h2,.newarlinalabel3 h2{margin:20px 0 0 0;}
.newarlinalabel1 h2:before,.newarlinalabel2 h2:before,.newarlinalabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.newarlinalabel2 h2:before{content:&#39;\f0c3&#39;;}.newarlinalabel3 h2:before{content:&#39;\f143&#39;;}
.newarlinalabel1 .index,.newarlinalabel2 .index{font-size:10px;float:right;font-weight:400;}
.newarlinalabel1 .index a,.newarlinalabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.newarlinalabel2 .index a{color:#ef6c00;border-color:#ffa726}
.newarlinalabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.newarlinalabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.newarlinalabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.newarlinalabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.newarlinalabel2 span.newarlina_meta_comment a:hover{color:#38761d!important}
.newarlinalabel2 ul.newarlina_thumbs li a:hover,.newarlinalabel2 ul.newarlina_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.newarlina_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.newarlina_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.newarlina_thumbs{margin:0;padding:0}
ul.newarlina_thumbs li,ul.newarlina_thumbs2{margin:0;padding:0}
ul.newarlina_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.newarlina_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.newarlina_thumbs .cat_thumb img:hover{opacity:.9;}
ul.newarlina_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.newarlina_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.newarlina_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.newarlina_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}
ul.newarlina_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.newarlina_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.newarlina_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}
span.newarlina_title a{color:#333}
span.newarlina_title a:hover{color:#ff675c;text-decoration:none}
span.newarlina_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.newarlina_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.newarlina_meta a{color:#aaa;display:inline-block}
span.newarlina_meta_date,span.newarlina_meta_comment,span.newarlina_meta_more{display:inline-block;margin-right:10px}
span.newarlina_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.newarlina_meta_comment a:hover{color:#ff675c!important}
span.newarlina_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.newarlina_thumbs2 li a:hover,ul.newarlina_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.newarlinalabel1 .widget-content, .newarlinalabel2 .widget-content {padding:20px 25px;}
.newarlina_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.newarlina_right {width:46%;float:right;margin:0;padding:0;}
ul.newarlina_thumbs .cat_thumb {width:100%;height:auto;}
ul.newarlina_thumbs .cat_thumb img {width:100%;height:auto;}
ul.newarlina_thumbs li {margin:0;padding:0;}
span.newarlina_title2 {font-size:20px;line-height:1.2em;}
span.newarlina_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px}
.newarlina_right{width:100%;float:left;margin:0;padding:0}
ul.newarlina_thumbs2 li{border-bottom:0}
span.newarlina_summary,.newarlina_left{display:none}
span.newarlina_title{margin:0 0 5px}
ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.newarlina_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#newarlinalabel1-wrapper,#newarlinalabel2-wrapper{display:none}}
@media only screen and (max-width:320px){
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px}
.newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 20px 1px 20px}
.newarlina_right{width:100%;float:left;margin:0;padding:0}
ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newarlina_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px}
.newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 10px 1px 10px}
.newarlina_right{width:100%;float:left;margin:0;padding:0}
ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newarlina_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>

Kedua masih tetap pada kode </head> seperti yang tadi copy dan pasang script dibawah ini tepat diatas kode </head>. Sedikit informasi script dibawah ini setidaknya diberi satu spasi dari script yang pertama.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newarlina_left">'),document.write('<ul class="newarlina_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newarlina_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newarlina_meta">'),1==showpostdate&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newarlina_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newarlina_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newarlina_right">'),document.write('<ul class="newarlina_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newarlina_title newarlina_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newarlina_meta newarlina_meta2">'),1==showpostdate2&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment newarlina_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newarlina_meta_more newarlina_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy0kkhUp3Ij3w2twfMmcaXo1hy_krR5l2SkpgX2e7_ZvaMGOg6pxmUDcEiFY7T-Yr4mc0VRAcdCSYafWlM_CF0jS6wQGIWTbcH2uLhtymVg522265UOWty7UTmf0O-8xOGvj_MN6_grAXN/s1600/newarlina_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaK1T0v8lPqPnJEHRk0Lt4xpMfJmeKJL8UbgN8z_C5zkl_KcRNayOXFi2OWu1r3NtN-nAHqyM_vumLB4UfL6QhZdg5WrzgDUn1qjvbg0HcXQhkEasYWuUDeu_jGtUQOMrI5WE3liJeG9K/s1600/newarlinathumb_small.png&quot;;
</script>
</b:if>
</b:if>

Ketiga agan harus memasang markup widget dan pemasangannya agak sedikit rumit. Silahkan agan pasang script dibawah ini tepat diatas kode  <b:section class='main' id='main' maxwidgets='3' showaddelement='yes'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='newarlinalabel1-wrapper'>
        <b:section class='newarlinalabel1' id='newarlinalabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='Template' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
      <div id='newarlinalabel2-wrapper'>
        <b:section class='newarlinalabel2' id='newarlinalabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='Tips Blogger' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>

Sekarang agan save template dan masuk ke Tata letak. Cari widget yang tadi sudah dibuat melalui template dan buka widget tersebut. Silahkan ubah tulisan dibawah ini dengan nama labelnya. Contoh label " Tips Blogger ".

Sekian tutorial dari blog advaster. Jika agan mengalami kesulitan atau kendala dalam pemasangannya agan bisa tanyakan pada admin melalui kolom komentar atau melalui form contact jika kendala yang agan alami cukup banyak. Terimakasih.

Cara Membuat Box Terima Kasih Sudah Berkomentar pada Blog

Cara Membuat Box Terima Kasih Sudah Berkomentar pada Blog- Update tutorial blogger nih gan, admin mau sharing tutorial bagaimana cara membuat ucapan terima kasih sudah berkomentar berbentuk box yang nantinya akan terpasang di bawah kolom pengisian komentar. Sebenarnya tutorial ini sudah di posting oleh blog cak-yit dan admin hanya ingin menyebarluaskan tutorial ini agar para blogger bisa memperindah blognya.

Sebenarnya, pemasangan box ucapan terimakasih seperti ini tidak di haruskan oleh pihak blogger, atau bahkan oleh pihak google. Namun sebagai blogger yang sopan, kita wajib memudahkan pengunjung dalam mengunjungi blog kita dengan cara apapun. Termasuk memasang box seperti ini, bukan hanya memperindah blog kita saja, tapi fungsinya juga akan dirasakan oleh semua pengunjung agan yang merasa nyaman di blog agan.

Screenshot

Tutorial Pemasangan

Pertama agan masuk ke blogger, template dan edit html. Setelah itu agan cari kode ]]></b:skin> dan pasang script dibawah ini tepat diatas kode ]]></b:skin>.

.thanks {
font-family:Arial, sans-serif;
font-size:12px;
right:360px;
margin-top:-58px;
padding:6px 12px;
background:#f8f8f8;color:#999;
border:1px solid #c9cacb;
border-radius:3px;
position:absolute;
}

Kedua masih tetap pada template agan, sekarang cari kode <data:blogTeamBlogMessage/> dalam hal ini agan harus mengerti bahwa kode seperti itu tidaklah hanya ada satu, bisa saja empat.

<data:blogTeamBlogMessage/><a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Ketiga coba perhatikan script diatas gan. Itu adalah script original atau awal dari script pada kode <data:blogTeamBlogMessage/> namun sekarang tugas agan adalah memasang script dibawah ini tepat setelah script diatas ( pada step kedua ) saran admin pasang pada script kedua dan keempat ( yang tadi admin bilang ada satu bahkan empat kode <data:blogTeamBlogMessage/> ).

<div class='thanks'>Terima kasih telah berkomentar</div>

Selesai gan, sekarang tinggal agan cek dan pastikan apakah tutorial yang sudah agan terapkan sudah work dan berhasil dengan lancar. Jika agan mengalami kendala bisa lansgun tanyakan pada admin. Terimakasih sudah berkunjung.

Cara Mendapatkan Alexa Pro Gratis Terbaru 2016

Cara Mendapatkan Alexa Pro Gratis Terbaru 2016 - Okay gan admin mau share tutorial bagaimana mendapatkan alexa pro untuk blog pada alexa.com. Sebenarnya cara dan tutorial ini sudah banyak tersebar di google karena memang proses hacking sudah sangat mudah digunakan oleh pihak yang tidak bertanggung jawab. Tutorial ini admin buat atas dasar membantu para blogger agar tetap bisa mengedepankan blogger indonesia. Hal ini tidak lain dan tidak bukan dengan menggunakan credit card hasil hacking.

Okaylah gan admin akan menjelaskan sedikit mengenai website alexa ini.

Founded in 1996, Alexa has a rich history of providing deep analytical
insights to benchmark, compare and optimize businesses on the web.

Begitulah yang tercantum dari footer website alexa.com, berdasarkan itu website alexa memang sudah berdiri sejak tahun 1996 dengan mengandalkan system seadanya. Namun sekarang alexa dapat menilai beberapa blog, bahkan website dari hosting manapun secara mudah. Kita bisa saja mengabaikan alexa dan tidak memperdulikannya. Hal ini tidak menjadi masalah bagi website/blog besar yang sudah terkenal. Namun bagaimana dengan website/blog kecil yang belum terkenal ?

Alexa dapat membantu website/blog kecil agar dapat berkembang semestinya dan mendapatkan beberapa keuntungan yang dapat memajukan website/blog tersebut. Apalagi dengan menggunakan alexa pro, fitur tambahan akan agan dapatkan dengan mudah.

Cara mendapatkan alexa pro sangatlah mudah, agan harus masuk ke dashboard milik agan dan pastikan agan sudah mengerti cara mengutak - atik website alexa sehingga agan hanya harus memasukan data credit card dan billing address yang bisa agan dapatkan dibawah ini.

Name : Dark Master
Credit Card : 5415 9150 2698 8847
Expired Date : 12/17
Security Code : 770

Dan untuk billing address ada dibawah ini.

Address : Kawunganten
City : Cilacap
State/Province : JawaTengah
Postal Code/Zip : 53253
Country : Indonesia

Dengan mengisi data sesuai dengan billing address dan credit card diatas, maka agan hanya tinggal mengkonfirmasi bahwa website/blog agan adalah milik agan dengan cara get certified. Copy dan paste script javascript dari alexa nya, dan pasang tepat dibawah kode <head> setelah itu agan hanya tinggal menunggu konfirmasi lebih lanjut dari alexa.

Sekian tutorial dari admin, semoga bermaanfaat dan terimakasih.

Cara Membuat Artikel Terkait di Bawah Posting Blog

Cara Membuat dan Memasang Artikel Terkait ( Related Article ) Berdasarkan Label di Bawah Posting Blog - Blogger tutorial tetap update nih gan, admin mau share tutorial cara membuat kolom artikel terkait dibawah posting blog. Biasanya pada template download, kolom artikel terkait seharusnya memang sudah ada, namun mungkin untuk template tertentu terkadang belum ada dan untuk yang sering mengutak - atik template dan tiba - tiba kolom artikel terkait nya hiang bisa juga coba pasang ulang menggunakan yang satu ini.

Tampilan dari kolom artikel terkait ini juga menarik gan, dengan fungsi css yang dapat agan ubah sendiri nanti. Selain itu tutorial pemasangannya pun sangat mudah gan, namun mungkin nanti agan akan menemukan beberapa kode di dalam templatenya. Agan bisa melihat live demo dari artikel terkaitnya di blog advaster ini gan. Silahkan scroll ke bawah dan lihat apa yang ada disana, jangan kebanyakan scrollnya gan. Nah ketemu kan artikel terkaitnya ? kaya gitulah kurang lebih.

Screenshot

Tutorial Pemasangan

Pertama agan masuk ke blogger, template, dan edit html. Seperti biasa perhatikan script yang di blockquote. Copypaste script dibawah ini tepat diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = " Selengkapnya";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

Kedua setelah memasang script tadi, agan sekarang harus mencari kode <data:post.body/> pada template agan. Kode seperti itu bukan cuma ada satu, bisa jadi ada dua ataupun tiga. Jadi nanti agan copypaste script dibawah ini tepat dibawah kode <data:post.body/> pertama, <data:post.body/> kedua, atau <data:post.body/> ketiga. Coba satu - satu gan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts' style='margin-top:35px;'>
<h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>

Selesai, tinggal agan save dan lihat hasilnya. Untuk pengeditan seperti biasa tinggal agan cari kode cssnya dan edit. Terutama yang admin beri warna merah, agan bisa edit dengan mudah. Sekian yang bisa admin berikan mengenai Cara Membuat Artikel Terkait di Bawah Posting Blog, Terimakasih sudah berkunjung.

Cara Memodifikasi Tampilan Peringatan Cookies pada Blogspot

Tutorial Cara Memodifikasi Tampilan Peringatan Cookies pada Blogspot - Ada yang masih tidak tahu apa itu cookies untuk blogspot ? okaylah akan admin ceritakan sedikit mengenai cookies untuk blogspot ini. Cookies atau terutama peringatan cookies pada blogspot akan muncul jika agan menggunakan domain khusus bukan domain TLD, melainkan domain blogspot yang menggunakan domain khusus. Contoh domain khusus itu adalah blogspot.de, blogspot.it, blogspot.pt dan masih banyak lagi. Nanti akan admin berikan screenshot contoh dari peringatan cookies blogspot pada domain khusus milik blog hexho-zord.blogspot.com.

Untuk memodifikasi peringatan cookies blogspot ini, tidak lain dan tidak bukan lagi - lagi menggunakan pemanfaatan kode css pada template blog sendiri. Agar memberikan tampilan yang berbeda pada blog agan, admin sarankan agan bisa mengedit nya sendiri nanti. Cara pengeditannya seperti kode css seperti biasanya gan, namun tetap admin sarankan bila tidak mengerti cara pengeditan kode css sebaiknya tidak usah mencoba atau asal - asalan nanti malah berakibat tidak work sepenuhnya.

Screenshot

Tutorial Pemasangan

Pertama agan masuk ke blogger, template, lalu edit html. Setelah masuk agan copypaste script dibawah ini tepat diatas kode ]]></b:skin>

/* Cookies Blogspot */
.cookie-choices-info{background-color:rgba(56,66,75,.97)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;-webkit-transform:translateZ(0)}
.cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#cee6ea!important}
.cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#282f36!important;transition:all .1s linear}

Kedua agan pratinjau terlebih dahulu sebelum disave, jika agan merasa masih ada yang aneh atau kurang agan bisa edit dan sesuaikan dengan style blog agan. Setelah itu klik save dan selesai. Untuk melihat hasilnya agan bisa mencoba domain khusus pada blog agan. Seperti hexho-zord.blogspot.de, hexho-zord.blogspot.it, hexho-zord.blogspot.pt.

Tutorial diatas sangatlah mendasar dan mudah, namun pasti ada saja blogger yang tidak bisa menerapkan tutorial diatas dengan benar. Agan bisa tanyakan masalahnya pada kolom komentar, secepatnya akan admin bantu. Terimakasih

Cara Mengalihkan Ctrl U Menjadi Halaman Lain Pada Blog

Tutorial Cara Mengalihkan Ctrl U Menjadi Halaman Lain Pada Blog - Okay gan admin mau update tutorial blogger cara mengalihkan fungsi ctrl u yang biasanya digunakan untuk melihat script html dari page blog agan atau lebih tepatnya script template blog agan. Cara ini biasanya digunakan blogger untuk mencuri script yang ada pada blog milik blogger lain. Tidak menutup kemungkinan hampir semua blogger mungkin pernah melakukan ctrl u untuk sekedar melihat - lihat script pada template blog lain. Namun hanya pada batasan melihat, bukan mencuri.

Selain menggunakan ctrl u, sebenarnya ada cara lain agar dapat melihat script pada html suatu halaman. Yaitu dengan menggunakan view-source:www.website.com dan cara ini belum bisa di cegah karena itu adalah salah satu fitur dari browser. Namun setidaknya kita sebagai blogger yang selalu waspada harus memasang pengalihan ctrl u dengan mengalihkan nya kepada halaman yang akan menampilkan kata - kata atau gambar yang akan menyampaikan bahwa blog kita tidak mengizinkan blogger lain untuk melihat script template kita.

Dengan cara itu kita bisa meminimalisir pencurian aset blog kita. Memang kita harus selalu berbagi trik maupun tips yang kita punya kepada blogger lain, namun cara berbaginya itu tidak dengan membiarkan script kita diambil secara bebas. Tetapi dengan melalui posting atau artikel yang kita buat dengan tujuan sharing tutorial blog yang kita punya.

Tutorial Pemasangan

Pertama kita masuk ke blogger, template, lalu edit html. Setelah masuk ke edit html, agan harus mencari kode </body> dan copypaste script dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="http://www.advaster.net/p/stop.html"});
//]]>
</script>

Kedua sebelum disave, silahkan agan siapkan terlebih dahulu halaman yang berfungsi sebagai pengalihan dari ctrl u. Contohnya seperti yang ada pada script diatas. Setelah dibuat halamannya, tinggal agan ganti yang berwarna merah dengan url halaman yang tadi agan buat dan save.

Selesai gan, bagaimana ? mudah bukan ? jika agan masih memiliki beberapa kendala dalam mempraktekan tutorial ini, agan bisa tanyakan pada admin melalui menu contact diatas blog. Terimakasih.

Cara Membuat Artikel Pada Posting Blog Tidak Bisa di Copy

Tutorial Lengkap Cara Terbaru Membuat Artikel Pada Posting Blog Tidak Bisa di Copy - Siap update tutorial blogger nih, cara membuat artikel blog kita tidak bisa di copypaste oleh orang lain. Cara ini hanya berpengaruh pada artikel, hal ini bertujuan agar orang lain tetap bisa mengeksplor blog kita dengan mudah ( bagian selain atikel/post tetap bisa di copypaste ). Awalnya script anti copypaste membuat semua bagian dari halaman blog kita tidak bisa di copypaste, namun sekarang ada cara terbaru agar hanya artikel saja yang tidak bisa di copypaste.

Tutorial ini mengandalkan fasilitas css dan javascript untuk membuat script anti copypaste. Sebenarnya tips dan cara ini berguna untuk membuat ulah blogger jahil yang suka mengcopy dan paste postingan blogger lain jera dan tidak akan melakukan hal itu lagi. Namun kita juga harus tetap berhati - hati dengan copaser yang cerdik. Mereka bisa melakukan segala hal untuk mencuri artikel yang kita buat agar blog mereka semakin bagus.

Selain itu, tutorial ini juga mengedankan prinsip to the point. Artinya kita juga membebaskan pengunjung untuk mengcopypaste apa saja yang ada diblog kita, kecuali artikel dan postingan kita. Dengan prinsip itu maka hal ini tidak akan mengganggu aktivitas pengunjung yang datang dan mengunjungi blog kita. Hal ini sangat bagus untuk perkembangan blog kita.

Tutorial Pemasangan

Pertama agan masuk ke blogger, pilih template dan edit html. Setelah masuk ke dalam pengeditan template, agan copy dan paste script dibawah ini tepat diatas kode ]]></b:skin>

.post {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
}

Kedua masih diedit template, agan copypaste script dibawah ini agar blockquote tetap bisa dicopypaste ( abaikan tahap ini jika agan tidak ingin blockquote bisa dicopypaste ) copy tepat diatas kode ]]></b:skin>

blockquote {
  user-select: text;
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
}

Selesai. Sekarang artikel pada postingan blog agan aman dan tidak akan di gondol oleh maling artikel lagi. Tetaplah waspada terhadap copaser cerdik, sekali lagi tetaplah waspada pada copaser cerdik! Terimakasih gan.

Cara Mengganti Redirect blogspot.co.id Menjadi blogspot.com Kembali

Tutorial Cara Mengganti Redirect blogspot.co.id Menjadi blogspot.com Kembali - Banyak blogger indonesia yang resah karena url blognya redirect ke blogspot.co.id dari blogspot.com dan kebingungan. Apa yang menyebabkan blogspot.com ganti menjadi blogspot.co.id ? hal ini terjadi karena kini indonesia memiliki domain nya sendiri untuk blogger indonesia sendiri. Lalu apa dampaknya bagi blog indonesia yang masih menggunakan url blogspot.com dan tiba - tiba mengalami redirect sendiri menjadi blogspot.co.id ? apakah hal ini akan berdampak negatif bagi blog tersebut ? langsung saja cekidot.

Pengalihan domain dari blogspot.com menjadi blogspot.co.id ini sangatlah merugikan blog indonesia. Hal ini dapat dibuktikan dari pergantian alexa data untuk blog, pagerank blog, dan lainnya. Walaupun semua data akan kembali seperti semula dengan usaha mengembalikan kejayaan url lama untuk url baru, namun tetap saja usaha kita yang dulu sia - sia. Dengan demikian banyak blogger indonesia yang menggunakan trik anti redirect itu dan agan pun juga bisa menggunakannya.

Caranya sangat mudah gan, agan hanya harus membuka blogger agan, lalu pilih template dan cari edit html. Setelah ada pada tahap pengeditan agan harus bisa mengedit template secara dasar nya dahulu. Kalau sudah mengerti silahkan lanjutkan baca tutorial lengkapnya dibawah ini.

Tutorial Pemasangan

Pertama agan masuk ke blogger, template dan edit html nya. Setelah itu agan copy dan paste script dibawah ini tepat diatas kode </head> atau bisa juga dibawah kode <head>

<script type='text/javascript'>
var str=window.location.href.toString();if("-1"==str.indexOf(".com/")){var str1=str.substring(str.lastIndexOf(".blogspot."));if("-1"==str1.indexOf("/"))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>

Kedua agan bisa memilih script dibawah ini untuk menggantikan script yang tadi. Pilih salah satu saja gan, jangan pasang kedua duanya. Penempatan tetap diatas kode </head> atau dibawah kode <head>

<script type="text/javascript">
var blog = document.location.hostname;var slug = document.location.pathname;var ctld = blog.substr(blog.lastIndexOf("."));if (ctld != ".com") {var ncr = "http://" + blog.substr(0, blog.indexOf("."));ncr += ".blogspot.com/ncr" + slug;window.location.replace(ncr);}
</script>

Selesai, tinggal agan save template nya. Sekarang agan buka blognya menggunakan blogspot.com yang biasa. Contohnya blogagan.blogspot.com jangan buka lagi url blogagan.blogspot.co.id agar url yang blogspot.co.id benar - benar tidak pernah terbuka dan menghilang dari index google. Terimakasih

Cara Membuat Hover Gambar Keren pada Blog

Tutorial Cara Membuat Hover Gambar Keren pada Blog - Apakah hover itu ? hover adalah sudah kode css yang dapat membuat suatu objek bergerak ketika tersentuh oleh cursor. Untuk kali ini admin ingin share beberapa script hover yang keren dan cocok untuk agan yang ingin mencoba hover untuk gambar - gambar pada blog agan. Disini admin punya 8 hover script yang bisa agan coba dan pakai satu per satu untuk dicoba gan. Untuk review nya agan bisa lihat gambarnya saja ya.

Okaylah admin akan langsung cekidot ke cara dan tahapan pemasangan. Oh iya satu lagi gan untuk membuat sebuah hover untuk image itu tidaklah semudah yang agan kira. Bagi yang sudah terbiasa mencoba sesuatu untuk template nya mungkin ini sangat mudah. Tapi bagaimana dengan yang masih pemula ? okay nanti akan admin jelaskan secara detail untuk pemasangan nya.

Daftar Efek Hover

1. Focus

.post-body img { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { border:70px solid #000; border-radius:50%; }

2. Shrink

.post-body img { height:400px; width:400px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { width:300px; height:300px; }

3. Zoom

.post-body img { height:300px; width:300px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { width:400px; height:400px; }

4. Circle

.post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.post-body img:hover { border-radius:50%; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }

5. Blur

.post-body img { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { -webkit-filter:blur(5px); }

6. Grayscale

.post-body img {    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */    filter: gray; /* IE6-9 */    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */;}.post-body img:hover {    filter: none;    -webkit-filter: grayscale(0%);}

7. Brighten

.post-body img { -webkit-filter:brightness(-65%); -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease; }
.post-body img:hover { -webkit-filter:brightness(0%); }

8. Tilt

.post-body img { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; }
.post-body img:hover { -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -ms-transform:rotate(-10deg); transform:rotate(-10deg); }

Nah itulah script css hover dengan berbagai versi gan. Untuk pemasangan akan admin jelaskan setelah ini. Terimakasih untuk seocips yang sudah memberikan script css yang lengkap. Okaylah gan sekarang admin akan jelaskan bagaimana cara penggunaan nya.

Tutorial Pemasangan

Pertama agan masuk ke blogger, template dan edit html. Setelah masuk ke edit html, agan harus mencari kode </b:skin> setelah itu copy dan pastekan script hover nya berdasarkan versi yang agan pilih tepat diatas kode </b:skin> yang banyak script css nya gan.

Selesai, namun admin tekankan untuk membuat suatu gambar memiliki hover pada objek tertentu tidaklah begitu mudah. Maka dari itu akan admin jelaskan dibawah ini.

Untuk membuat suatu gambar pada objek tertentu memiliki hover agan harus mengerti kode dari gambar tersebut contohnya seperti dibawah ini.

.PopularPosts ul li img {
    display: block;
    margin-right: 10px;
    padding: 0;
    width: 60px;
    height: 60px;
    float: left;
    transition: all 0.3s ease-out;
}

Perhatikan tulisan yang berwarna merah dan hijau. Kode yang harus agan mengerti yaitu yang berwarna merah, itu admin ambil dari gambar untuk widget popular post. Untuk yang berwarna hijau itu adalah kode yang membuat pergerakan hover nya menjadi smooth. Setelah script awalnya agan mengerti dan ditambahkan kode yang berwarna hijau, maka dibawah ini script yang sudah jadi.

.PopularPosts ul li img {
    display: block;
    margin-right: 10px;
    padding: 0;
    width: 60px;
    height: 60px;
    float: left;
    transition: all 0.3s ease-out;
}
.PopularPosts ul li img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Bagaimana gan ? pasti sudah mengerti kan. Jika memang masih belum mengerti agan bisa hubungi admin dan tanyakan sepuasnya lewat menu contact me diatas page. Terimakasih