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.