Cara Mengatasi Blank Screen (Layar Hitam) Windows 7

Cara Mengatasi Blank Screen (Layar Hitam) Windows 7: Baiklah shobat kali ini saya akan coba membagikan sedikit pengetahuan saya dalam bentuk tutorial untuk cara mengatasi layar hitam pada windows 7.
Pasti dari kalian semua bingung kenapa tampilan layar windows 7 kalian bisa blank (layar hitam), padahal pada setting Personalization leptop/komputer kalian sudah mencoba mengubah tampilan temanya, namun tetap saja tampilanya jika komputer/leptop shobat matikan lalu hidupkan kembali maka tampilanya akan kembali menjadi blank screen (layar hitam).
Nah masalah itu biasanya akan memberikan efek pada saat kamu coba membuka/menjalankan aktivitas kamu seperti biasanya pada saat kamu kembali menjalankan leptop seperti membuka aplikasi Ms office, mendengarkan lagu dan sebagianya itu tidak bisa di jalankan malah , padahal pada settingan Bios leptop/komputer sobat tidak ada masalah apa-apa malahan windows berubah mentok menjadadi blank screen, Nah jika shobat juga mengalami hal yang sama maka kamu tidak perlu khawatir, ini bukan masalah yang timbul dari kerusakan hardware atau komponen luar pada komputer sobat, melainkan softwarenya yang bermasalah.

Masalah ini dapat terjadi pada berbagai jenis merek Komputer/Leptop seperti Toshiba, Asus, Acer, dan sebagainya asal komputer/leptopt tersebut menggunakan windows 7, nah untuk itu bisa kamu coba cara mengatasinya yang saya bagikan kali ini. nah jika kamu ingin menggunakan cara cepat atau kamu tidak ingin ribet dalam permasalahan ini kamu bisa menginstal ulang leptop/komputer kamu maka pastinya masalah blank screen yang sebelumnya kamu alami kemungkinan bisa hilang di karenakan software yang bermasalah tadi akan uninstal ulang dan di ganti dengan software baru yang tidak mengalami masalah.
Namun jika sobat tidak memiliki waktu untuk melakukan hal di atas kamu bisa gunakan cara berikut ini, untuk Mengatasi Blank Screen (Layar Hitam) Windows 7 .

Cara Mengatasi Blank Screen (Layar Hitam) Windows 7

Solusi 1: Cara Mengatasi Blank Screen (Layar Hitam) Windows 7 Menggunakan Safe Mode

Pertama-tama hal yang harus kamu lakukan untuk masuk ke sistem Safe Mode adalah menekan tombol

F8

secara terus menerus pada keyboard kamu, stelah itu silahkan kamu pilih safe mode jika sudah berhasil silahkan kamu masuk ke langkah berikut.

1. Tekan tombol
   F2
   +
   Alt
   +
   Delate
   pada keyboard kamu lalu pilih windows task manager
2. jika sudah terbuka selanjutnya kamu klik tab processes.
3. Lalu silahkan kamu cari nama Explorer.exe lalu klik kanan mouse pilih end process untuk mengakhiri program tersebut.
4. Nah lalu silahkan kamu klik New Task (Run)
5. Masukan Explorer.exe pada tab terbuka, kemudian kamu klik Ok.
6. Nah jika sudah selesai sekarang klik tombol star, pada kotak pencarian (Search Proggram End Files) ketikan Device manager lalu klik tombol
   Enter
   untuk membukanya.
7. Setelah device manager terbuka lalu silahkan klik ganda pada display adapter, lali klik kanan pada driver yang baru saja terinstal.
8. Langkah selanjutnya klik Update Driver Software.
9. Nah pada langkah ini kamu akan di hadapkan dengan dua pilihan, silahkan kamu pilih yang pertama.

Solusi 2: Cara Mengatasi Blank Screen (Layar Hitam) Windows 7 Menggunakan System Restore (Pemulihan System)

Hal pertama yang bisa di lakukan adalah melakukan System Restore (Pemulihan System), di sini kamu harus memiliki instalasi windows 7 yang sudah di burning ke CD/DVD atau juga kamu sudah menyimpan software instalasi windows 7 pada leptop/komputer, atau juga bisa menggunakan sistem bootable flashdisk, Jika kamu belum tau cara membuat Bootable flashdis windows 7 kamu bisa search di google.

1. Jika sudah silahkamu kamu lakukan Restar pada komputer/leptop kamu, tekan tombol
   F2
   untuk menampilkan bios jika sudah masuk lakukan pengubahan sistem media booting pertama misalnya kamu menggunakan flashdisk sebagai medianya maka langsung kamu ubah booting pertama (first Booting) sesuai dengan nama flashdisk yang kamu gunakan.
2. Jika muncul pesan (Text) "Press Any Key bla-bla-bla" silahkan kamu klik tombol sembarang (apapun) pada keyboard kamu.
3. Selnjutnya silahkan kamu sesuaikan tanggal dan bahasanya.
4. Nah jika sudah silahkan klik pada system Restore.
5. lalu pilih driver untuk lokasi penyimpanan instalasi windows, biasanya di simpan pada (driver C;\) lalu klik next.
   
6. Pada area kotak System Recovery Options kamu pilih System Restore lalu klik next.
7. Di sini kamu pilih Restore Point yang kamu inginkan, pilihlah opsis windows 7 yang kira-kira pada tanggalnya tersebut masih normal, lali klik next.
8. Terakhir klik Finsh.

Solusi 3: Cara Mengatasi Blank Screen (Layar Hitam) Windows 7 Menggunakan Startup Repair

Nah untuk cara terakhir ini Langkah-langkahnya hamir mirip dengan langkah dari solusi 2, hanya saja di sini kita menggunakan sistem Startup Repair.

1. Sama seperti langkah solusi 2, silahkan kamu masukan DVD/Flashdisk.
2. Nah ketika muncul pesan (text) "Press Any Key bla-bla-bla" silahkan kamu klik tombol sembarang untuk melanjutkan ke tahap berikutnya.
3. Selanjutnya kamu atur sesuai Bahasa dan Tanggal, lalu klik next.
4. Klik untuk Repair Your Computer
5. Silahkan pilih driver tempat kamu menyimpan driver untuk menginstal windows, lalu klik next.
6. Klik Startup Repair lalu klik next, lalu silahkan tunggu hingga proses selesai.

Nah silahkan kamu coba 3 Cara Mengatasi Blank Screen (Layar Hitam) Windows 7 di atas Satu-persatu, dan semoga bisa membantu untuk mengatasi masalah yang terjadi pada leptop/komputer kamu.
Mungkin sampe di sini dulu tutorial saya kali ini melihat hari sudah semakin larut malam, dan jika ada kekurangan kata yang saya terapkan pada artikel ini saya mohon maaf.

Meningkatkan Traffict Blog Menggunakan Jingling Software Auto Visitor

Meningkatkan Traffict Blog Menggunakan Jingling Software Auto Visitor: Jingling pernakah shobat mendengarkan kata jingling??. Jingling adalah tool blackheat seo dari negara china yang dapat di gunakan untuk meningkatkan arus visitor dari berbagai negara yang di arahkan langsung ke blog blog kamu.
Jingling di bagikan secara gratis untuk kamu yang ingin mengambil jalan pintas untuk meningkatkan traffict blog kamu jadi tidak heran banyak user yang menggunakanya, admin sudah pernah mencobanya dalam 24jam blog kamu akan kebanjiran visitor dari berbagai negara juga termasuk indonesia yang bisa mencapai 29.000 visitor atau selebihnya.

Jika kamu seorang blogger sejati kamu pasti memilih jalan yang murni dari usaha diri sendiri

Bukan hanya itu jingling ini juga dapat kamu gunakan untuk bot ppc biasanya semacam adfly dan lainya.
Untuk tutorial pemakaianya silahkan shobat search di google karna mohon maaf saya belum sempat membuat artikel tutorialnya. Sebenarnya penggunaan jinggling cukup mudah kok, pokoknya ga ribet dech yaa, makanya banyak yang menggunakan software ini.

Untuk file downloadnya kamu bisa kunjungi link berikut:

Download

Password: 123456

Oky mungkin itu saja tips yang saya berikan kali ini semoga bisa bermanfaat bagi shobat pengguna jingling salam indah ID Dzgn.

Template Blogger Mirip Samehadaku

Template By: TemplatesFansub

• LIVE DEMO
• DOWNLOAD

Material Design Download Button Effect Ripple Di Blog

Material Design Download Button Effect Ripple Di Blog: Baiklah kali ini blog ID Dzgn akan coba membagikan Tutorial untuk Cara Membuat Material Design Download Button Effec Riplle Di Blog, nah kamu pasti sudah tau donk Material Design itu apa?? Material Design adalah sebuah tampilan visual yang di luncurkan google pada tahun 2014, umumnya material design sendiri terdapat pada Android, OS dan masih banyak lainya sampe sekarang material design resmi di aplikasikan di berbagai produk Google.
Banyak Designer-designer web yang sudah mengembangkan material design ini untuk di terapkan pada template blog/web, apalagi saat ini penggemar tampilan material design sudah makin bertambah termasuk saya, oky kembali ke pembahasan kali ini, nah tutorial kali ini saya bagikan karena ada pengunjung blog ini yang merequest tutorial untuk tombol download menggunakan material design.
Jika kamu masih penasaran dengan demo tombol yang akan kita buat kamu bisa lihat demonya lebih lengkap di bawah ini:

Result

Nah Mudah-mudahan tutorial saya kali ini bisa menjawab keinginan anda untuk mengubah sedikit demi-sedikit tampilan blog kamu jadi lebih keren.

Material Design Download Button Effect Ripple

1. Masuk ke Blogger>Tema>Edit Html, lalu pastekan kode CSS berikut tepat sebelum kode ]]></b:skin>, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard kamu.

.ripplelink{border:1px solid rgba(0,0,0,0.12)}
.btn, .btn-large {
text-decoration: none;
color: #FFF;
background-color:#0092d4 !important;
text-align: center;
letter-spacing: .5px;
-webkit-transition: .2s ease-out;
-moz-transition: .2s ease-out;
-o-transition: .2s ease-out;
-ms-transition: .2s ease-out;
transition: .2s ease-out;
cursor: pointer;
}
.btn:hover, .btn-large:hover {
background: #08a7ef !important;
}.btn i{margin-left:0}
.z-depth-1-half, .btn:hover, .btn-large:hover, .btn-floating:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
-moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
}
.btn, .btn-large, .btn-flat {
border: none;
border-radius: 5px;
display: inline-block;
height: 36px;
line-height: 36px;
outline: 0;
padding: 0 2rem;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
}

2. Sekarang silahkan kamu cari kode </body> lalu pastekan kode Javascript ini di atasnya.

<script>
$(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});</script>

Nah jika sudah selesai silahkan kamu Simpan/save template.

3. Sekarang buat artickle/post baru silahkan kamu ubah modenya terlebih dahulu, pindah dari mode Compose ke mode HTML lalu pastekan kode html berikut.

<div style="text-align: center;"><a class="btn ripplelink" href="Url Tujuan" title=" "><i class="fa fa-download"></i> Download</a><a class="btn ripplelink" href="Url Tujuan" title=" ">Demo <i class="fa fa-paper-plane-o"></i></a></div>

Silahkan kamu ganti Url Tujuan dengan Link tujuan kamu.
Nah untuk penempatan tombol download ini kamu bisa pasang di bagian postingan mana saja,
Jika kamu termasuk orang kreative kamu pasti bisa mengedit/mengubah kembali warna atau bentuknya.

Jika sudah terakhir silahkan kamu publikasikan/pertinjau untuk melihat hasilnya.

Oky jika ada penempatan kata yang salah mohon maaf yaa!, jangan lupa Kritik dan Saran kamu, karna kami sangat membutuhkanya untuk lebih mengembangkan lagi pelayanan yang kami berikan.

Cara Membuat Kotak Berlangganan Keren Di Blog

Cara Membuat Kotak Berlangganan Keren Di Blog: Baiklah shobat kali ini ID Dzgn akan coba membahasas tutorial keren untuk blogger shobat.
Kotak Berlangganan atau biasa di sapa Box Subscribe, nah Kotak Berlangganan yang kita bahas kali ini iyalah Kotak berlangganan Via Email, sebenarnya sebelumnya saya juga sudah pernah membagikan Tutorial-tutorial yang temanya sama membahas Box Subscribe/Kotak Berlangganan.

Artikel Terkait: 
- Widget Box Subscribe (Kotak Berlangganan) Menggunakan Material Design Di Blog
- Cara Membuat Box Subscribe (Kotak Berlangganan) Keren Di Bawah Postingan Blog

Sebenernya artikel ini sudah lama saya buat tetapi waktu publikasinya kurang tepat hee, mengingat kemaren juga ada pengunjung yang menanyakan cara pembuatan kotak berlangganan yang kita bahas saat ini, yaa saya bagikan.
Untuk melihat demonya silahkan lihat di homepage blog ini.
Bagaimana dengan kamu tertarik memasangnya di blog kamu?, Silahkan ikuti tutorialnya di bawah ini.

Cara Membuat Kotak Berlangganan Keren Di Blogger

1. Silahkan kamu masuk terlebih dahulu ke Blogger>Tema>Edit Html blog kamu, lalu pastekan kode berikut tepat sebelum kode ]]></b:skin> atau </style>, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard kamu.

.iddzgn-subscribe-form{clear:both;display:block;overflow:hidden}
form.iddzgn-subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}.iddzgn-subscribe-css-email-field:focus{box-shadow: 0 1px 5px 1px rgb(0, 192, 220), 0 1px 10px 0 rgb(0, 192, 220);}
.iddzgn-subscribe-css-email-field{transition:all .3s;background:transparent;color:rgb(21, 74, 74);margin:10px 0;padding:15px 20px;width:99%;max-width:250px;border:2px solid;}
.iddzgn-subscribe-css-email-button{width:99%;max-width:150px; background:transparent;color:rgb(255, 122, 122);cursor:pointer;font-weight:710;padding:13px 30px;margin-left:15px;text-transform:none;font-size:17px;border:2px solid;transition:all .6s}
.iddzgn-subscribe-css-email-button:hover{background: rgba(0,0,0,0.8);border: 2px solid rgb(255, 255, 153);box-shadow: 0 1px 5px 1px rgb(0, 192, 220), 0 1px 10px 0 rgb(0, 192, 220);font-weight: bold;}.newsletter-box{;color:#1a4042;text-align:center}.newsletter-box__title,.newsletter-box__subtitle{text-shadow:1px 1px 1px rgba(0,0,0,0.3)}.newsletter-box__title{margin-top:0;font-size:2.9em}.newsletter-box__subtitle{font-size:1.2em}.newsletter-box__form{margin:25px auto 0 auto;max-width:380px;font-size:1.3rem}.newsletter-box__input{font-size:1rem}

2. Lalu silahkan kamu cari kode <div id='post-wrapper'> atau <div class='post-inner'>, dan pastekan kode berikut di bawahnya. Perlu di ingat strukture kode Html pada template tidak selalu sama jadi jika kamu tidak menemukan kode di atas, kamu bisa berkomentar di kolom komentar di bawah.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='newsletter-box'>
<div class='l-container-center'>
<h3 class='newsletter-box__title'>INSPIRING YOUR CREATIVITY !</h3>
<p class='newsletter-box__subtitle'>GET EXCLUSIVE CONTENT BY SUBSCRIBING TO OUR DAILY NEWSLETTER !</p>
<div class='iddzgn-subscribe-form'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=iddzgn' class='iddzgn-subscribe-form' method='post' onsubmit='window.open (&#39;https://feedburner.google.com/fb/a/mailverify?uri=iddzgn&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='iddzgn'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='iddzgn-subscribe-css-email-field' name='email' placeholder='Enter your Email..'/><input class='iddzgn-subscribe-css-email-button' title='SIGN UP' type='submit' value='SUBSCRIBE'/></form>
</div>
</div>
</div></b:if></b:if>

Silahkan kamu ganti iddzgn dengan ID Feed Bunner kamu.

Jika kamu ingin menampilan Kotak berlangganan ini di semua halamana kamu bisa hapus tag berikut

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
..........................
........................
.....................
.....................
....................
</b:if></b:if>

Titik-titik di atas adalah bayangan kode yang ada di bungkus oleh tag pengecualian (Jangan Di Hapus)
Silahkan kamu hapus kode yang sudah di warnai di atas untuk menampilkan Kotak berlanganan di semua halaman.

Oky jika sudah silahkan kamu save/simpan template, lalu lihat kembali blog/web kamu boommmm selamat kamu berhasil.
Nah mungkin sampe di sini saja ya, salam semua semoga bermanfaat.

Cara Membuat Tombol Download Ala Arlina Di Blog

 

Cara Membuat Tombol Download Ala Arlina Di Blog: Baiklah shobat kali ini saya akan coba membagikan tutorial, Cara Membuat Tombol Download Ala Arlina.
Tombol download ini biasanya di gunakan untuk membungkus link download/demo dan lainya,
Nah tutorial ini saya bagikan karena ada temen patner blog ini yang menanyakan cara pembuatanya, sebenarnya pemasangnya cukup mudah, gampang sekali jika shobat mau,

Cara Membuat Tombol Download Ala Arlina

1. Silahkan shobat buka Blogger>Tema>Edit Html, lalu silahkan cari kode berikut ]]></b:skin>  Untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard shobat, Nah jika sudah ketemu silahkan shoba ganti dengan CSS berikut.

#wrap {
margin: 20px auto;
text-align: center;
}.btn {
display: inline-block;
position: relative;
font-weight: 700;
background: #3cc091;
padding: 9px 18px;
margin: 0 3px;
border-radius: 3px;
opacity: 1;
border: 0;
text-transform: uppercase;
transition: all .3s ease-out;
}.btn:hover, .btn:active {
background: #374760;
}
a.btn {
color: rgba(255,255,255,1);
}

Nah jika sudah silahkan shobat save/simpan tema.
4. Sekarang silahkan shobat buat postingan baru atau mungkin shobat sudah menyediakan postingan sebelumnya yang ingin di pasangkan tombol download ini silahkan di edit kembali, pada halaman postingan shobat silahkan pindah dari mode Compose ke mode HTML yang ada pada bagian pojok kiri atas, dan pastekan kode berikut pada area HTML tadi.

<div id="wrap">
<a class="btn" href="Link demo sobat" rel="”nofollow”" target="_blank">Result <i class="fa fa-paper-plane"></i></a></div>
<a class="btn" href="Link demo sobat" rel="”nofollow”" target="_blank">Download <i class="fa fa-download"></i></a>

Silahkan shobat ganti text yang sudah saya beri tanda di atas dengan link tujuan shobat

Terakhir silahkan shobat Publikasikan/Pertinjau langsung untuk melihat hasilnya.

Mungkin sampe itu saja selamat mencoba, jangan lupa ninggalin jejak di kolom komentar di bawah ini terimakasi.

Cara Merubah Tampilan Blockquote Dengan Efek Shake Di Blog

Cara Merubah Tampilan Blockquote Dengan Efek Shake Di Blog: Hallo shabat blog ID Dzgn kembali lagi bersama saya admin blog ini, kali ini saya akan membahas tutorial yang mungkin bisa merubah tampilan blockquote shobat jadi lebih keren, dan lebih menarik,

Nah di atas adalah gambar animasi dari demo blockquote efek shake, jika masih penasaran dengan demonya berikut silahkan lihat link demonya.

Result

Nah bagai mana keren bukan?, Tertarik membuatnya di blog kamu???

Cara Merubah Tampilan Blockquote Dengan Efek Shake Di Blog

1. Silahkan shobat masuk ke Blogger>Tema>Edit Html, Lalu kamu cari kode ]]></b:skin> lalu pastekan kode berikut di atasnya, untuk mempercepat pencarian silahkan shobat klik tombol

CTRL

+

F

pada keyboard shobat.

.post-body blockquote {
background: transparent !important}
.post blockquote {
-webkit-user-select:text;
-moz-user-select:text;
-webkit-animation-name: shake;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPRbGDXCMV07nAp0_uEZzozfL23iwhWp6frgUfqM4TQpbHYW0hxdSTp7TWKUUTFmEjIJ_Mks0Y1I_KsEGqQ2FL-6xdCDPQLlxyI78fHdSfehpzcweHn3yan8TbTdm7x4k6XJtKSLy8M01f/s320/M4Mvn.png);
padding:15px;
font:13px  comic sans MS;
border-top:4px Groove #ff6699;
border-bottom:4px groove #ff6699;
border-right:2px dotted #ff6699;
border-left:2px dotted #ff6699;
color:#ff6699;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
blockquote:hover{
background-image :url(https://blogger.googleusercontent.com/img/proxy/AVvXsEjDyZ8ye78xy2PPM_3-oppGR16GNExzCuh4MGLrdKJFJg8AM0QXF7l7Ql4h86PnbDh3o0Hq8vXiGvfGqbpmduMumdkY24GNrUc7E0hhH02L_l97WaTIbD4DU61BGA=s0-d); padding: 5px;
-webkit-animation-name: none;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
background-image:url(https://blogger.googleusercontent.com/img/proxy/AVvXsEj-e7WgxrT14rOAE_SbuVs36PRgIsvR9DgqofYEc1HJ0qQTSkhAkQIHQMrBqUJVhggCgC-MPeo2t-TB2HDwZql2moh4Kjeme-V1kfAFgsPuvgS4tioGRQ74t6hptXlrLlH-q7Fye7vg9XC2uZu5mRQtRcK3mR8f2151WQbqRuu2vay5Ff5Wug=s0-d);
background-position:bottom right;
background-repeat:no-repeat;}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

Jika sebelumnya sudah terpasang CSS untuk tag blockquote Shobat bisa menghapusnya atau langsung menggantinya dengan CSS blockquote di atas.

Nah jika sudah selesai silahkan save/simpan.
2. Nah silahkan sobat buat artikel baru, atau mungkin jika sudah ada artikel yang ingin di isi dengan efek blockquote sobat bisa gunakan artikel tersebut. Pada bagian artikel yang di edit silahkan kamu buat tag blockquote contoh:

<blockquote>Text Kalian Di Sini</blockquote>

"Text Kalian Di Sini" Silahkan shobat ganti dengan text yang di bungkus blockquote.
Jika shobat termasuk orang yang kreative shobat bisa mengeditnya lagi.

Nah jika sudah selesai silahkan shobat Publikasikan kembali, lalu lihat hasilnya.

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog: Baiklah kali ini blog ID Dzgn akan coba membagikan sedikit tutorial untuk Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog,  biasa di gunakan untuk membuat tombol Download, Preview, dan Buy Now, nah buat kamu yang sudah pernah melihat demo/style yang mirip dengan tutorial berikut ini pasti keren bukan, tutorial ini bertujuan untuk menjadikan blog terlihat lebih Rapi, Keren, dan terlihat lebih Prefesional tentunya. memindahkan element tombol download postingan ke sidebar blog sudah banyak yang menggunakanya terbukti blog mereka menjadi lebih keren rapi, dan tentunya saja seperti yang saya katakan tadi prefesional, karena pengunjung akan betah jika blog yang mereka kunjungi memeliki tampilan yang menarik, rapi, juga keren, pengunjung pastinya akan merasa betah Berlama-lama untuk kunjung.

Bagi yang masih bingung dengan tampilan element template seperti gambar di atas, bisa lihat demonya di bawah ini:

Demo

Oky tampa Basa-basi yuk pasang langsung di blog kamu.

Cara Memindahkan Element Tombol Download Postingan Ke Sidebar Blog

1. Silahkan buka Blogger>Tema>Edit Html, pada edit html silahkan kamu cari kode ]]></b:skin> lalu silahkan pastekan kode berikut tepat di atasnya, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard kamu.

/* CSS StoreStyle */
#store-style{overflow:hidden;font-family:'Open Sans',sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px}
#store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}.rio-ss{padding-top:15px;overflow:hidden}.idb{line-height:1.5;padding:25px 0 5px}
#store-style .storebutton:hover{background:#333;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px}
.storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:left}
.storelist:last-child{border-bottom:none}
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}

2. Nah kalo sudah selesai, selanjutnya silahkan kamu cari kode </head> pastekan kode berikut tepat di atasnya.

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){ 
$('a[name="details"]').before($('#Theme-details').html()); 
$('#Theme-details').html(''); 
}); 
/*]]>*/
</script>

3. Nah sekarang silahkan kamu cari markup kode sidebar contohnya: aside id='sidebar-wrapper' atau <div id='sidebar-wrapper jika sudah ketemu sekarang silahkan kamu letakan kode berikut tepat di atasnya.

<a name='details'/>
<div class='clear'/>

Tag markup awalan kode sidebar tidak selalu sama, dalam template memiliki strukture kode yang berbeda-beda, maka dari itu kenali terlebih dahulu tag kodenya dengan teliti.

Nah kemungkinan contoh peletakan langkah ke 3 persis seperti gambar di bawah ini.

Nah sekarang silahkan kamu save tema.

4. Sekarang pindah, ke menu Postingan buat postingan baru kamu atau Jika kemungkinan kamu ingin menyisipkan tombol ini dalam postingan yang sebelumnya sudah kamu publikasikan, silahkan kamu edit kembali. lalu pindah dari mode Compose ke HTML lalu letakan kode berikut terserah di bagian mana, tapi untuk menjaga postingan agar tetap terlihat seo di mata pencarian google (Search Engine) letakan kode berikut tepat paling bawah postingan (akhir).

<div style="display:none">

<div id="Theme-details">

<div id="store-style">

<center><a class="storebutton but1" href="#LINK-DEMO" target="_blank">Live Preview</a></center>

<div class="rio-ss idb">

See it live with all the features that exist, both on the homepage and the page posts.</div>

</div>

<div id="store-style">

<center><a class="storebutton but2" href="#LINK-PURCHASE" target="_blank">$5.20 - Buy Now</a></center>

<div class="rio-ss">

<span class="storelist">Support Template Update</span>

<span class="storelist">Remove Footer Credits</span>

<span class="storelist">For Unlimited Domains</span>

<span class="storelist">No Encrypted Scripts</span>

<span class="storelist">Support Color Change</span>

<span class="storelist">And Much More...</span>

</div>

</div>

<div style="clear:both">

</div>

</div>

</div>

Nah nantinya kode di atas akan berpindah secara otomatis ke bagian sidebar blog kamu
Nah ini yang perlu di ketahui, tutorial ini akan otomatis responsive jika template yang kamu gunakan sudah di lengkapi dengan fitur responsive, jadi perlu teliti terlebih dahulu dalam memilih template.

Nah jika kamu ingin yang di tampilkan hanya terlihat text silahkan kamu ganti dengan kode berikut.

<div style="display:none">
<div id="Theme-details">

/* Tulisan yang ingin ditampilkan di sidebar blog. */

<div style="clear:both">
</div>
</div>

Terakhir silahkan kamu Publikasi/simpan lalu pilih pertinjau.
mungkin sampe di sini saja tutorial saya akali ini, semoga bermanfaat ya.

Re-Loader Windows Activator Free Download

Re-Loader Windows Activator Free Download: Baiklah shobat kali ini saya ingin membagikan software aktivasi Windows untuk berbagai Windows yang terinstal pada leptop/pc kamu,

Re-Loader Activator - aktivator otomatis Windows XP / 7/8 / 8.1 / 10TP dan Office 2010/2013/2016 yang lain. Hal ini dimungkinkan untuk mengubah informasi OEM dalam pengaturan sistem. Aktivator ini akan mengaktifkan versi Windows tidaka hanya Windows Re-Loader juga otomatis mengaktifkan versi Microsoft Office manapun, termasuk Windows 10 RTM Professional.
Nah silahkan kamu download Re-Loader Windows Activator di bawah ini.

Info Password: https://iddzgn.blogspot.com

Nah semoga bermanfaat ya!!☺ Jika ada masalah dengan link download di atas bisa konfirmasi admin di kolom komentar di bawah terimakasi.

Material Design Membuat Contact Form Di Blog

Material Design Membuat Contact Form Di Blog: Hallo sahabat ID Dzgn kali ini saya akan coba membagikan tutorial untuk cara membuat/memasang contact form di blog.
Contact Form atau biasa di sebut Contact Us pada umumnya banyak keuntungan yang di dapatkan di mana akan mempermudah pengunjung untuk mengirim pesan pribadi langsung ke Admin blog atau web, Pada blogger bawaan contact form sebenarnya sudah di sediakan pada aplikasi widget/gadget blogger namun tampilanya sangat masih sederhana, berbeda dengan contact form/contact us yang akan kita bahas ini sudah menggunakan project terbaru dari google yaitu material design.
banyak designer web yang sudah menambahkan project ini dalam merancang berbagai Struktur kode Html misalnya pada template blog, widget, dan lebih lainya.

Result

Nah tertarik untuk memasangnya??, pemasangan contact form ini begitu mudah untuk lebih lengkap silahkan kamu ikuti tutorialnya di bawah ini.

Material Design Membuat Contact Form Di Blog

1. Silahkan buat laman baru dalam mode HTML/jika sudah ada laman contact form/contact us sebelumnya bisa shobat ganti dengan Html berikut.

<form name="contact-form"><div class="datainput"><input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div><div class="datainput"><input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div><div class="datainput"><textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="highlight"></span> <span class="bar"></span> <label>Message</label> </div><input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></form><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '2097019471312122410';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2097019471312122410','//iddzgn.blogspot.co.id/','2097019471312122410');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '2097019471312122410', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script> <style scoped="scoped">
.datainput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.datainput input:focus ~ label,.datainput input:valid ~ label,.datainput textarea:focus ~ label,.datainput textarea:valid ~ label{top:-20px;font-size:14px;color:#5264AE}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.datainput input:focus ~ .bar:before,.datainput input:focus ~ .bar:after,.datainput textarea:focus ~ .bar:before,.datainput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.datainput input:focus ~ .highlight,.datainput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.datainput input:focus ~ label,.datainput input:valid ~ label,.datainput textarea:focus ~ label,.datainput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#2196F3;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style> <div class='clear'></div>
<div style='clear:both;'></div>

2097019471312122410 Silahkan shobat ganti dengan ID blog shobat
//iddzgn.blogspot.co.id/ Silahkan kamu ganti dengan Url situs web kamu.

Nah untuk mendapatkan ID blog kamu silahkan lihat gambar di bawah ini.

Nah bagai mana gampang bukan, jika sudah selesai melalui Langkah-langkahnya di atas, terakhir silahkan kamu Publikasikan/Pertinjau terlebih dahulu untuk melihat hasilnya.

Baca Juga: Cara Membuat Contact Form Style 1 Material Design

Oky mungkin cukup sampe di sini ya, kalo ada masalah yang timbul bisa keluhkan dalam bentuk komentar di bawah ini, tapi jangan dengan kata-kata yang tidak pantas, ok terimakasi sampe ketemu di tutorial ngeblog selanjutnya.

Merubah Tampilan Widget Popular Post Jadi Lebih Keren

Merubah Tampilan Widget Popular Post Jadi Lebih Keren: Baiklah shobat kali ini saya akan coba memberikan tutorial untuk mengubah tampilan widget popular post kamu jadi lebih keren, membuat tampilan web/blog jadi lebih keren itu idaman pasti setiap pemiliknya.
Nah cara penerapanya pun cukup terbilang mudah hanya harus melewati sedikit langkah-langkah di bawah ini maka widget poplart kamu akan terlihat lebih menarik dari sebelumnya.
Populart post dengan tampilan thumbnails bisa memberikan kesan menarik bagi pengunjung (visitor) blog kmau,
Nah bagai mana tertarik memasangnya??? Langsung saja ikuti tutorialnya di bawah ini.

Merubah Tampilan Widget Popular Post Jadi Lebih Keren

1. Pertaman-tama buka Blogger>Tema>Edit Html, nah pada edit html silahkan kamu cari kode ]]></b:skin> lalu pastekan kode berikut tepat di atasnya. untuk mempercepat pencarian kamu bisa klik tombol

CTRL

+

F

di keyboard kamu.

.PopularPosts  h6{color:#e51c23}
.PopularPosts .item-thumbnail{margin:3px 10px 10px 0;border:1px solid #E6E6E6;border-radius:50%;overflow:hidden;display:inline}
.PopularPosts .item-thumbnail a img{height:40px;width:40px;display:block;margin:0;padding:0;border-radius:50%}
.PopularPosts ul{list-style-type:none;background:#fff}.PopularPosts li{margin:0;padding:10px!important}.PopularPosts ul li{margin:10px 5px;padding:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)}.PopularPosts li a{font-weight:700;font-family:'Roboto',sans-serif;font-size:13px;color:#828282!important;transition:all .5s;border:none}.PopularPosts li a:hover{color:#07ACEC!important;border:none}.cloud-label-widget-content{margin-top:10px!important}

Jika di template shobat sebelumnya sudah terpasang css populart post, shobat tinggal ganti dengan css di atas

2. Terakhir silahkan kamu save/simpan tema kamu, lalu lihat hasilnya jika sudah selamat yaa!!

Nah mungkin sampe di sini tutorial saya, bagai mana shobat mudah bukan, jika penerapan di atas tidak memberikan hasil seperti yang di inginkan. shobat bisa mengeluhkan kesalahan ini dalam bentuk komentar di bawah ini terimakasi

Template Non AMP Vs AMP Mana Yang Lebih Bagus Untuk Di Pasang Pada Situs Web

Template Non AMP Vs AMP Mana Yang Lebih Bagus Untuk Di Pasang Pada Situs Web: Hallo sahabat ID Dzgn di manapun kalian berada, kali ini saya ingin membahasa mana sebenaranya lebih bagus template AMP atau template Non AMP, oky kita buka pembahasan dengan pengertian dari AMP.

AMP (Accerelated Mobile Page) adalah project terbaru yang di luncurkan google yang berupa halaman Web yang di rancang berdasarkan spesifikasi sumber terbuka, Laman AMP merupakan hasil validasi yang di simpan dalam cache AMP Google, agar sebuah laman yang di tayangkan kecepatanya di tingkatkan kemungkinan 4x lebih cepat dari biasanya khususnya pada tampilan mobile.

Nah di atas adalah sedikit penjelasan dari pengertian apa itu AMP???,

Sedangkan Non AMP  adalah project lama yang di luncurkan google sama berupa halaman Web, namun tingkat kecepatanya masih di tanyakan baik dalam tampilan Deskop maupun Mobile,

Nah dalam penjelasan di atas di sebut template yang di lengkapi dengan fitur AMP lebih cepat dari template Non AMP, namun menurut saya template AMP belum tentu lebih cepat dari template Non AMP tergantung dari orang yang merancang kode CSS, HTML, dan JavaScript yang di sisipkan pada template, karena jika berlebihan maka sama saja Sama-sama lemot, Menurut kamu bagai mana???

Nah untuk melihat perbanding perbedaan dari template AMP dengan Non AMP di bawah ini saya sudah punya kelebihan dan kekuranganya.dari dua template tersebut.

Template AMP (Accerelated Mobile Page)

Kelebihan Dari Template AMP

1. Kecepatan yang di hasilkan bisa mencapai 4x lebih cepat dari template Non AMP, di karenakan template dengan Fitur AMP di simpan pada cache AMP Goggle, sehingga bisa memberikan akses lebih cepat khususnya pada tampilan laman mobile.
2. Lebih hemat data karena template AMP memanfaatkan Cache yang sebelumnya sudah di simpan pada browser kita, di saat kita mengunjungi laman/situs dengan tampilan fitur AMP, kamu bisa menghemat data koneksi 10x lebih hemat dari template Non AMP.
3. Di dukung oleh banyak Platform, termasuk juga Google penelusuran (Search Engine)
4. Template yang menggunakan Fitur AMP juga sudah pasti di lengkapi dengan fitur responsive, sehingga kamu tidak usah khawatir jika laman web/blog kamu di kunjungi oleh berbagai jenis perangkat.

Jika ada kelebihan pasti ada pula kekuranganya, berikut adalah kekurangan yang di miliki template AMP

Kekuranga Dari Template AMP

1. Tidak menjamin SEO, perlu kamu ketahui template AMP tidak bisa menjamin bahwa blog kamu akan menjadi akan lebih seo.
2. Tidak Support komentar Blogger, salah satu kekurangan yang di miliki laman web AMP, jadi anda harus menggunakan sumber lain yang menyediakan jasa yang suport untuk komentar pada laman web AMP. Padahal komentar blogger merupakan salah komentar terbaik karena komentar ini mendukung dari berbagai platform seperti google, wordpress, MSvalidate, hingga sampe dengan Annonymous.
3. Bukan hanya komentar saja kekurangan dari Laman Web AMP,  kekuranga yang sangat di sayangkan pada template AMP, tidak supportnya Page Number pada laman web, Blog Pager With Title, kurangnya situs penyedia tutorial untuk mempercantik laman web AMP, jadi jika kamu ingin mengedit template AMP masih sangat terbatas di karenakan project ini masih terbilang baru dalam duni web designer.

Nah sudah tau kelebihan dan kekuarangan dari Template atau situs laman web AMP, nah bagai mana dengan template yang non AMP??, untuk lebih lengkapnya kamu bisa lihat di bawah ini.

Template Non AMP (Tidak Menggunakan Fitur AMP)

Kelebihan Dari Template Non AMP

1. Menjamin SEO, template Non AMP ini paling banyak di gunakan oleh Situs laman web di luar sana, sehinggan banyak Designer-designer web yang sudah mengembangkanya sehinggan sudah di lengkapi dengan fitur yang menjamin SEO pada situs laman web.
2. Responsive, sama halnya dengan template AMP template Non AMP juga sudah di lengkapi dengan fitur responsivenya, jadi sobat tidak perlu cemas jika laman web kamu di kunjungi lewat berbagai jenis perangkat.
3. Free  Editing, template Non AMP kamu bebas di edit sesuka kamu karena sudah banyak blog/situs yang menyediakan Tutorial-tutorial untuk cara editing template Non AMP dari A sampe Z.
4. Tidak kalah dengan Template AMP, template Non AMP juga banyak di dukung oleh platform termasuk juga Google penelusuran (Search Enggine)


Nah kurang lebihnya kelebihan daru Tenplate Non AMP seperti di atas, sudah saya katakan juga bila ada kelebihan pasti ada kekurangan, berikut adalah kekurangan dari template Non AMP.

Kekurangan Dari Template Non AMP

1. Kecepatan situs Laman Web yang mengunakan Template Non AMP masih di pertanyakan di karenakan laman web Non AMP sistem penyimpanan cache pada browser tidak mendukung untuk mempercepat penayangan laman web Non AMP, jadi laman web Non AMP atau situs yang menggunakan template Non AMP masih berpatokan dari struktur kode HTML, CSS dan JavaScript jika banyak yang di muat jelas saja akan memberikan efek loading yang lambat pada laman web Non AMP.
2. Data koneksi tidak menjamin, jadi data koneksi masih sama di ragukan, tergantung dari muatan struktur HTML yang di muat, lebih besar maka bisa di bilang lebih boros data. masih banyak lainya kekurangan dari laman web Non AMP.


Nah di atas adalah Kelebihan dan Kekurang dari Template AMP maupun Template Non AMP, kembali kepada diri kalian Masing-masing mau pilih AMP atau Non AMP sebenarnya sama saja yang penting isi (Artikel) bermanfaat bagi banyak orang, kalo artiklenya hanya bisa Copas blog lain ya hasilnya sama saja Sama-sama akan di hiraukan oleh Platform penelusuran Google.
Jadi saran saya buat kalian para blogger boleh Copas artikle blog/situs lain asal ada sedikit perubahan dalam penerapan kata dan tidak lupa juga untuk menerapkan Link Sumber artikle yang di copas.

Mungkin itu saja dari saya, semoga bisa bermanfaat bagi shobat semua, Lebih dan kurangnya saya mohon maaf. jika ada kesempatan di waktu lain saya akan kembali membagikan refrensi informasi yang lebih bermanfaat lagi.

Cara Membuat Share Button Efek Show Hide Material Design

Cara Membuat Share Button Efek Show Hide Material Design: Share Button atau biasa di sebut tombol share sosial media sudah tidak asing lagi dengan kata ini, share button adalah aplikasi kecil yang dapat kita di pasang pada blog/web dengan berupa sekumpulan kode CSS, HTML, dan juga JavaScript. Share button banyak memiliki fariasi (style) yang berbeda, misalkan seperti Widget Like Box Melayang Di Blog , sebenarnya kegunaanya sama yaitu untuk mempermudah pengunjung blog yang ingin melakukan sharing artikel ke sosmed mereka, bedanya hanyalah di lengkapi dengan tombol like namun tidak menggunakan efek show hide seperti share button yang akan kita bahas ini.

Result

Share button, banyak Designer-designer web yang mengembangkanya sehinggan memiliki model masing-masing tombol share ini tergantung yang membuatnya. sedangkan untuk tombol yang saya bagikan ini menggunakan efek material design, apa lagi material design gini sudah merambat ke Designer-designer web, sehingga banyak yang mengembangkanya termasuk saya.

Cara Membuat Share Button Efek Show Hide Material Design

Untuk cara pemasanganya memang masih terbilang rumit, namun jelas jika anda punya tekat pasti bisa. hanya butuh kemampuan pemahan yang jeli.
1. Silahkan shobat masuk ke Blogger>Tema>Edit Html, lalu silahkan kamu pastekan kode link CSS berikut tepat di bawah kode <head>, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard shobat.

  <link href='https://cdn.rawgit.com/BulshitMan-BM/ID-Dzgn/ce097e4e/Material.css' rel='stylesheet'/>

2. Nah jika sudah, selanjut kamu cari kode </body>, lalu copas kode berikut tepat di atasnya.

<script>
$(window).load(function() {
  var buttonCircles = $(&quot;.nav-circle&quot;);

  $(&quot;.btn-nav&quot;).on(&quot;tap click&quot;, function() {
    $(this).toggleClass(&quot;closed-nav&quot;)
    if ($(this).hasClass(&quot;closed-nav&quot;)) {
      slideDown();
    } else {
      slideUp()
    }
  });

  $(&quot;.round-circle&quot;).click(function() {
    $(&quot;.btn-nav&quot;).toggleClass(&quot;closed-nav&quot;);
    slideUp();
  })
//<![CDATA[
  function slideDown() {

    var topMargin = 20
    for (i = 0; i < buttonCircles.length; i++) {
      topMargin += 85
      $(buttonCircles[i]).animate({
        top: topMargin
      }, function() {
        $(".circle-container, .round-circle").css("visibility", "visible");
        if ($(".fa-plus").hasClass("unRotateIcon")) {
          $(".fa-plus").removeClass("unRotateIcon").addClass("rotateIcon");
        } else {
          $(".fa-plus").addClass("rotateIcon");
        }

      })
    }
  }

  function slideUp() {
    var resetTop = 20
    for (i = 0; i < buttonCircles.length; i++) {
      $(buttonCircles[i]).animate({
        top: resetTop
      }, 400, function() {
        $(".circle-container, .round-circle").css("visibility", "hidden");
        if ($(".fa-plus").hasClass("rotateIcon")) {
          $(".fa-plus").removeClass("rotateIcon").addClass("unRotateIcon");
        } else {
          $(".fa-plus").addClass("unRotateIcon");
        }
      })
    }
  }

});//]]></script>
<div style='clear: both;'/>   <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js'/>

3. Jika sudah sekarang silahkan kamu cari kode bebas ]]></b:skin> atau bisa juga </style> dan paste kode berikut tepat di atasnya.

  .btn-nav {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #000 !important;
  z-index: 9999;
  height: 60px !important;
  width: 60px !important;
  line-height: 80px !important;
}

.fa-plus {
  color: #fff !important;
  font-size: 2em !important;
  margin-top: 11px;
  font-weight: 300;
}

.plus-container {
  border: 1px solid #fff;
  margin-top: 100px;
  text-align: center;
}

.fa-exp {
  font-size: 6em;
  margin: 0 auto;
  display: block;
}

.round-circle {
  border-radius: 50%;
  background-color: #228a9c;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 20px;
  text-align: center;
  line-height: 80px;
  visibility: hidden;
}

.round-circle > a {
  height: 80px;
  width: 80px;
}
.facebook {    background: rgba(0, 88, 255, 0.83);}
.gplus {background:#de0d00;}
.twitter {background: #00c0dc;}
.phone {    background: #09d248;}
.circle-container {
  visibility: visible;
  position: absolute;
  height: 400px;
  left: 20px;
  width: 100px;
}

.first-circle {
  z-index: 4;
}

.second-circle {
  z-index: 3;
}

.third-circle {
  z-index: 2;
}

.forth-circle {
  z-index: 1;
}

.fixed-container {
  position: fixed;
  z-index: 99999;
  display: block;
}

.fa-nav {
  color: #fff;
  font-size: 25px;
  margin-top: 18px;
}

@-webkit-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-moz-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@-o-keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes rotateIcon {
  from {
    -webkit-transform: rotateZ(0);
       -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
         -o-transform: rotateZ(0);
            transform: rotateZ(0);
  }

  to {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

.rotateIcon {
  -webkit-animation-name: rotateIcon;
     -moz-animation-name: rotateIcon;
       -o-animation-name: rotateIcon;
          animation-name: rotateIcon;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}

@-webkit-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@-moz-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@-o-keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

@keyframes unRotateIcon {
  from {
    -webkit-transform: rotateZ(360deg);
       -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
         -o-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }

  to {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
         -o-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}

.unRotateIcon {
  -webkit-animation-name: unRotateIcon;
     -moz-animation-name: unRotateIcon;
       -o-animation-name: unRotateIcon;
          animation-name: unRotateIcon;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
}

.ua {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #fff;
  font-size: 2em;
}

.fa {
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

.ua:hover .fa {
   color: #67809F;
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}
ul { list-style-type:none; margin:0; padding:0; }

4. Nah jika ketiga tahap di atas sudah kamu selesaikan, sekarang kamu tinggal melakukan tahap terakhir (Memasang Html Share Button), silahkan kamu cari tag pembuka body <body lalu pastekan kode Html berikut tepat di bawahnya.

<div class='fixed-container'>
  <a class='btn-floating btn-large waves-effect waves-light circle btn-nav' rel='nofollow noreferrer'><i class='fa fa-plus' id='icon'/></a>
  <div class='circle-container'>
    <div class='round-circle nav-circle waves-effect waves-teal first-circle facebook'>
    <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share To Facebook'><i class='fa fa-nav fa-facebook'/></a>
    </div>
    <div class='round-circle nav-circle waves-effect waves-teal second-circle gplus'>
      <a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Share To Google+'><i class='fa fa-nav fa-google-plus'/></a>
    </div>
    <div class='round-circle nav-circle waves-effect waves-teal third-circle twitter'>
            <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share To Twitter'><i class='fa fa-nav fa-twitter'/></a>
    </div>
    <div class='round-circle nav-circle waves-effect waves-teal forth-circle phone'>
      <a href='#contact' rel='nofollow noreferrer'><i class='fa fa-nav fa-phone'/></a>
    </div>
  </div>
</div>

- Sebelum kamu memasang Share Button ini pastikan sudah terpasang Link CSS Font Icon Awesome di template kamu.
- #contact Silahkan kamu ganti dengan Url Contact Us kamu, atau kamu bisa mengubahnya sesuai dengan selera kamu.
- Jika kamu kreative kamu pasti bisa mengubah posisi Share Button ini.
- Jangan Lupa BackUp terlebih dahulu template blog kamu, untuk berjaga-jaga bila nanti terjadi error dalam pemasangan.

5. Terakhir silahkan kamu Save tema/Simpan template kamu, lalu lihat hasilnya.

Oky mungkin sampe di sini dulu tutorial saya kali ini semoga bisa bermanfaat bagi shabat bloggerku semua
jika ada pertanyaan lain silahkan shobat berikan pertanyaan dalam bentuk komentar di bawah.

Cara Merubah Warna ScrollBar Blog Menggunakan CSS

Cara Merubah Warna ScrollBar Blog Menggunakan CSS: Baiklah shobat kali ini saya akan coba membagikan tutorial yang mungkin berguna bagi shobat ku semua, Merubah Warna ScrollBar sebenarnya sudah banyak Situs-situs yang menyajikan tutorial ini, namun banyak pula saya liat ada yang sudah usang kode CSS/Tidak Work lagi untuk versi browser terbaru.
Nah di sini saya menggunakan CSS browser yang menggunakan "webkit", sedikit penjelasan Webkit adalah  salah satu komponen dasar dari pramban web yang biasanya di temukan pada kode CSS.

Result

Nah tampa Basa-basi lagi mari langsung saja ke tutorial pemasanganya di blog kamu.

Cara Merubah Warna ScrollBar Blog Menggunakan CSS

1. Masuk Terlebih dahulu ke Blogger>Tema>Edit Htaml, pada Edit Html silahkan kamu cari kode ]]></b:skin>, Lalu pastekan CSS berikut tepat sebelum kode yang kamu cari sebelumnya. untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard laptop kamu.

::-webkit-scrollbar { width:10px; background:#111; }
::-webkit-scrollbar-thumb { background-color:#F2784Ba; }

- Jika kamu ingin merubah ukuran besar kecilnya ScrollBar, silahkan kamu sesuaikan ukuranya (10px) ganti sesuai dengan ukuran yang kamu inginkan.
- Jika kamu ingin merubah warna dari ScrollBar ini, kamu bisa mengganti kode warna #F2784Ba dengan kode warna yang sesuai dengan selera kamu.
- Ingat Tutorial ini hanya akan berhasil bila browser anda menggunakan komponen CSS "Webkit"

Jika sudah sekarang silahkan kamu Save/Simpan tema kamu, lalu silahkan buka web kamu, Jika berhasil selamat yaa!!!
Oky mungkin sampe di sini saja, sampe bertemu di tutorial selanjutnya.
Jika masih ada kesulitan pemasangan silahkan berikan komentar anda berupa pertanyaan-pertanyaan mengenai cara di atas.

Cara Membuat Table Keren Di Postingan Blog

Cara Membuat Table Keren Di Postingan Blog: Post table bisanya di gunakan pada postingan artikel yang ingin menampilkan jumblah atau formulir data tertentu, saya juga menggunakan post table pada postingan saya, saya menggunakan post table untuk menampilkan Fitur-fitur template yang saya bagikan namun dengan tampilan yang sedikit berbeda.
Post table ini cocok untuk di gunakan di blog/website yang menyediakan resfrensi berbagai jenis penjualan maupun pembelian. Post table ini di gunakan untuk mempercantik artikle yang di publikasikan apalagi artikel tersebut berisikan daftar (Isi atau Fitur) terntentu.

Untuk membuat Post table ini cukup mudah kamu hanya perlu melakukan sedikit tahap dalam pemasangnya.

Cara Membuat Table Keren Di Postingan Blog

Langkah Pertama

Langkah Pertama Kamu masuk ke Blogger kamu, lalu pilih menu Tema, pilih Edit Html. Pada Edit Html silahkan kamu cari kode ]]</b:skin>, lalu pastekan kode CSS berikut tepat sebelum kode yang di cari tadi, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard kamu.

/* CSS Post Table */
table{border-collapse:collapse;border-spacing:0;}
.post-body table td{border:1px solid #e9e9e9;padding:10px;text-align:center;vertical-align:top;}
.post-body table th {border:1px solid #029864;padding:15px 8px!important;text-align:center;vertical-align:top;color:#fff;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:bold;text-transform:capitalize;font-size:15px;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.services_list{text-align:left !important}
.services{background:#0f9d58!important;width:28%;overflow:hidden;text-align:center!important;border-left:0}
.free_version,.premi_version,.theme_instal{background:#1dc087!important;width:22%;overflow:hidden;text-align:center!important}
.premi_version{background:#0f9d58!important}
.post-body i.fa-check,.post-body i.fa-times,.post-body i.fa-minus{height:27px;width:27px;line-height:27px;text-align:center;border-radius:99em;color:#fff}
.post-body i.fa-check{background:#83cd30}
.post-body i.fa-times{background:#f13a3a}
.post-body i.fa-minus{background:#ffbd2e}

Jika di template kamu sudah terpasang CSS Post Table sebelumnya kamu bisa menghapusnya atau langsung menggantinya dengan CSS Post Table di atas

Nah jika sudah sekarang silahkan kamu save tema/simpan, Lalu silahkan ikuti cara ke dua berikut ini.

Langkah Kedua

Langkah kedua yang harus kamu lakukan adalah masuk ke menu postingan kamu, buat postingan baru. atau pilih postingan yang ingin kamu sisipkan Post Tablenya,
Pada menu postingan terdapat pilihat Compose dan HTML

Silahkan kamu Pindahkan Mode Compose ke mode HTML, lalu pastekan kode HTML berikut terserah di mau di mana posisinya, tergantung selera kamu.

<div class="buy_now"><table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th class="services">Services</th><th class="free_version">Free Version</th><th class="premi_version">Premium Version</th><th class="theme_instal">Theme + Installation</th></tr>
<tr><td class="services_list">File Documentation</td><td><i class="fa fa-minus" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Remove Footer Credits</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">One Time Payment</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">No Encrypted Scripts</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Lifetime Premium Support</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">For Unlimited Domains</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Lifetime Template Updates</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
<tr><td class="services_list">Theme Installation Service</td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-times" aria-hidden="true"></i></td><td><i class="fa fa-check fa-6" aria-hidden="true"></i></td></tr>
</tbody> </table></div>

Silahkan kamu ubah sesuai dengan keinginan kamu, jika kamu kreatif kamu pasti tidak pusing untuk masalah seperti ini, Terakhir siklahkan kamu save/Publikasikan.

Silahkan kamu lihat kembali postingan kamu, Jika sudah terpasang selamat.
mungkin sampe di sini dulu postingan saya kali ini, semoga bermanfaat, jika ada kesusahan bisa di tanyakan dengan berkomentar di bawah ini.

Template Yang Di Pakai Arlina Design/AD Responsive

Template Yang Di Pakai Arlina Design/AD  Responsive: Baiklah shobat kali ini saya akan coba membagikan template yang mungkin sedang kamu cari saat ini, template ini mirip dengan yang di gunakan oleh Arlina Dzgn, template ini sendiri saya kurang tau siapa yang pertama kali membagikanya secara gratis saya sendiri kurang tau. template ini sebenarnya saya sudah pernah menggunakanya seblumnya entah di mana saya mendapatkan template ini saya lupa situsnya.

Template ini Menurut saya sangat menarik, di mana pada tampilanya sendiri sudah responsive di setiap tampilan mobile maupun non mobile, nah kamu bisa mendownload template ini secara gratis kalo kamu mau.

Result

Template Yang Di Pakai Arlina Design/AD  Responsive

Features	Availability
Responsive	True
Google Testing Tool Validator	True Cek
Mobile Friendly	True Cek
100% SEO Ready	True
Documentation	True
Support Update	True
Grid Post	True
Top Menu	True
Menut Navigation	True
Slot Ads	True
Breadcrumbs	True
Share Button	True
Related Posts	True
Sidebar Tab Nav	True
Footer Widget Subscribe	True
Back To Top	True
Font Awesome	True

Download

Nah Semoga Bermanfaat yaa gan, sampe di sini dulu
Baca Juga: Zona Grid Premium Template Responsive

Cara Mengatasi Gambar Thumbnail Buram Pada Widget Populart Post

Cara Mengatasi Gambar Thumbnail Buram Pada Widget Populart Post: Beberapa waktu lalu saya membagikan postingan yang sama permasalahanya yaitu Mengatasi Thumbnail Gambar Buram Di Blog itu hanya pada bagian postingan homepage, nah jika permasalahanya pada widget populart post blog bukan pada postingan post homepage, lantas bagai mana cara mengatasinya??,
Sebenarnya ada banyak cara untuk mengatasi permasalahan terjadinya gambar buram pada widget populart post salah satunya menggunakan JavaScript aktif untuk memperbaikinya, shobat bisa coba memasang javascript untuk mengembalikan gambar thumbnail buram pada widget populart post shobat.

Cara Mengatasi Gambar Thumbnail Buram Pada Widget Populart Post

1. Masuk ke Blogger>Tema>Edit Html, Silahkan shobat cari kode </body>, Lalu shobat pastekan JavaScript di bawah ini tepat sebelum kode yang di cari tadi. Untuk mempermudah pencarian shobat bisa klik tombol

CTRL

+

F

Pada keyboard leptop shobat.

<script type='text/javascript'>$('.PopularPosts ul li img').attr('src', function(i, src) {
return src.replace('s72-c', 'w170-h170');
});</script>

Sekarang coba shobat Save/Simpan template shobat, lalu silahkan lihat kembali blog shobat apakah masih buram atau tidak??, Kalo tidak selamat Populart post shobat kini sudah pulih kembali.

Mungkin sampe di sini dulu tutorial saya kali ini selamat mencoba.

Cara Membuat Fanspage Melayang Ala Seocips

Cara Membuat FansPage Melayang Ala Seocips:Hallo sahabat blogger ketemu lagi dengan saya admin ID Dzgn, Kali ini saya akaan coba membagikan Tutorial Cara Membuat Fanspage Melayang ala seocips.

Result

Nah sebelum membahas tutorial ini, saya turut bersedih karena blog seocips kini sudah tidak bisa memberikan Tutorial-tutorial bermanfaat lagi untuk kita blogger pemula, entah penyebabnya kenapa tapi setau saya blog seocips terkena Google Error 404. untuk lebih lengkap kenapa blog seocips menghilang kamu bisa kunjungi link berikut Misteri Menghilangnya Blog Seocips.com.
Oky kembali ke pembahasan tutorial ini sebenranya saya ambil dari blog lama saya, saya hanya merubah artikel postinganya.

Cara Membuat Fanspage Melayang Ala Seocips

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div>

Cara Memasang Fanspage Ala Seocips Lewat Edit Html

1. Silahkan kamu masuk Blogger>Tema>Edit Html, Silahkan kamu cari kode </style>  Lalu pastekan kode berikut tepat di atas kode yang di cari, untuk mempercepat pencarian shobat bisa klik tombol

CTRL

+

F

Pada Keyboard Leptop shobat

Css Untuk Fanspage Melayang Pojok Atas Ke Bawah Samping Kiri

/*Fixed Facebook Like Box BulshitMan*/
.fb-btn-BulshitMan {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:99999999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 5s;-webkit-animation:atas 5s;animation:atas 5s;}
.fb-btn-BulshitMan {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-BulshitMan a:link, .fb-btn-BulshitMan a:visited {color:#ffcc00;}
.fb-btn-BulshitMan a:hover {color:#fff;}
.fb-btn-BulshitMan2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s}
.fb-btn-BulshitMan2 {padding:3px ;color:#fff;font-size:120%;}
@-webkit-keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@-webkit-keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
@keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}

Css Untuk Fanspage Melayang Pojok Atas Ke Bawah Samping Kanan

/*Fixed Facebook Like Box BulshitMan*/
.fb-btn-BulshitMan {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:99999999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 5s;-webkit-animation:atas 5s;animation:atas 5s;}
.fb-btn-BulshitMan {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-BulshitMan a:link, .fb-btn-BulshitMan a:visited {color:#ffcc00;}
.fb-btn-BulshitMan a:hover {color:#fff;}
.fb-btn-BulshitMan2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s}
.fb-btn-BulshitMan2 {padding:3px ;color:#fff;font-size:120%;}
@-webkit-keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@-webkit-keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
@keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
}

Nah di atas adalah Css untuk Membuat Fanspage Ala Seocips dari pojok atas kiri, maupun dari pojok atas kanan, kamu bisa menyesuaikanya sesuai selera kamu. Jika Sudah Sekarang silahkan kamu cari kode </body> Lalu pastekan kode berikut tepat di atasnya.

<div class="fb-btn-Bulshitman">
<div class="fb-btn-BulshitMan2">
<div class="fb-page" data-href="https://www.facebook.com/iddzgn" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/iddzgn"><a href="https://www.facebook.com/iddzgn">ID Dzgn</a></blockquote></div></div></div>

- Silahkan kamu ganti https://www.facebook.com/iddzgn dengan Url Fanspage kamu
- Pastikan Blog kamu sudah terpasang SDK JavaScript facebook di blog kamu, untuk menampilkan Fanspage

Jika sudah selesai terakhir silahkan kamu Save Tema.

Cara Memasang Fanspage Melayang Ala Seocips Lewat Widget Blog

Nah Untuk tahap ini lebih simple dari pada cara di atas, untuk anda yang mungkin terlalu rumit jika melewati edit Html
Shobat bisa coba dengan cara berikut ini.
1. Masuk ke Blogger>Tata Letak>Tambah Gadget/Widget>HTML/JavaScript, Jika sudah silahkan kamu pastekan kode HTML berikut tepat di kolom Html.

<style>
/*Fixed Facebook Like Box BulshitMan*/
.fb-btn-BulshitMan {background:rgba(1, 0, 1, 0.2);margin:0;padding:0;text-align:center;position:fixed;bottom:1%;left:0.5%;z-index:99999999;box-shadow:0 3px 4px #444;border:1px solid #ccc;display:block;-moz-animation:atas 5s;-webkit-animation:atas 5s;animation:atas 5s;}
.fb-btn-BulshitMan {padding:5px ;color:#fff;font-size:120%;}
.fb-btn-BulshitMan a:link, .fb-btn-BulshitMan a:visited {color:#ffcc00;}
.fb-btn-BulshitMan a:hover {color:#fff;}
.fb-btn-BulshitMan2{background:rgba(1, 0, 1, 0.3);-moz-animation:kanan 15s;-webkit-animation:kanan 15s;animation:kanan 15s}
.fb-btn-BulshitMan2 {padding:3px ;color:#fff;font-size:120%;}
@-webkit-keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@keyframes atas{
from{transform:translate(0px, -2000px)}
to{transform:translate(0px,0px)}
}
@-webkit-keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}
@keyframes kanan{
from{transform:translate(30000px, 0px)}
to{transform:translate(0px,0px)}
}</style>
<div class="fb-btn-Bulshitman">
<div class="fb-btn-BulshitMan2">
<div class="fb-page" data-href="https://www.facebook.com/iddzgn" data-width="200" data-height="125" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/iddzgn"><a href="https://www.facebook.com/iddzgn">ID Dzgn</a></blockquote></div></div></div>

Nah kalo shobat ingin merubah melayang dari sisi kiri menjadi kanan, shobat bisa mengganti dengan css di atas sesuaikan dengan selera shobat.
Nah jangan lupa juga ganti Link url facebooknya yaa!!!

Mungkin sampe di sini tutorial saya kali ini, semoga bermanfaat untuk shobat blogger, Jika ada masaialah silahkan berikan komentar shobat di bawah ini melalui disqus.

Cara Membuat Material Design Related Post Di Blog

Baiklah kali ini saya akan coba membagikan sedikit tutorial blog yaitu Cara Membuat Material Design Related Post Di Blog ini cukup sederhana, di balik tutorial ini shobat blogger ku pasti ada keinginan mempercantik tampilan blognya guna mempermudah pengunjung untuk mengakses keterkaitan post yang sedang di baca.

Result

bagaiman berminat untuk memasangnya di blog mu?? jika iya silahkan ikuti tutorialnya di bawah ini.

Cara Membuat Material Design Related Post Di Blog

Sebelum melanjutkannya.

Apasih arti dari related post??

Lebih lengkapnya Related Post: adalah aplikasi script html yang di pasang pada blog atau website. Related post biasanya menampilkan gambar, Judul Post, dan beberapa content yang terkait dengan postingan/artikel yang sedang di baca.

Nah Tersu untuk alasan yang wajib untuk di pasang pada web atau blog bagaimana tuh??

Kegunaannya ialah agar pengunjung (pembaca) dapat meneruskan bacaan yang terkait dan menjadikan pengunjung lebih betah (dalam mengunjungi situsnya).
Dari namanya saja Related Post "(Artikel Terkait)" Maka kategory artikel/postinganya yang sama di tampilkan dengan tulisan di sebuah judul artikel (Post). Misalkan kategory yang sedang di baca adalah Tips Blog, maka yang akan di tampilkan oleh Related Post ini iyalah postinga/artikel yang serupa (terhubung) Kategory yang sama.
Yapsss sudah tau dengan pengertiannya, mari ikuti pemasangnya di bawah ini

Cara Memasang Material Design Related Post Di Blog

1. Buka terlebih dahulu Blogger>Tema>Edit Html. Lalu pastekan kode di bawah ini tepat di atas kode ]]></b:skin> atau</style>, Untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

Pada Keyboard kamu.

/* Related Post CSS */
.related-post-item-tooltip{height:54px;overflow:hidden;width:50%;float:left;text-overflow:ellipsis;padding:10px}#related-post .material-icons{font-size:200%;right:20px;color:#607D8B;top:-1px;position:absolute}#related-post{background:#fff;margin:10px}.related-post{margin:30px 0 0;position:relative;padding:0 0 10px}.lol h4 i,.related-post h4 i{margin-right:14px}.lol h4,.related-post h4{border-radius:4px;color:#555;font-size:100%;font-family:'Roboto',Arial;text-transform:uppercase;text-align:left;font-weight:700;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;padding:15px 20px 12px;margin:0 0 20px}.related-post-style-3,.related-post-style-3 li{margin:0 auto;padding:0!important;list-style:none;word-wrap:break-word}.related-post-style-3 li a{font-family:'Roboto',sans-serif;color:#666;font-weight:700!important;font-size:14px;line-height:1.4em}.related-post-style-3 li a:hover{color:#111}.related-post-style-3 .related-post-item{display:inline-block;float:left;border-radius:3px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:47%;margin-right:15px;height:auto;padding:0;margin-bottom:20px!important;position:relative;overflow:hidden}.related-post-style-3 .related-post-item:focus{outline:none;border:none}.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:40%;height:100px;float:left}.related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto!important;transition:all 1s ease-out}.related-post-item:hover .related-post-item-tooltip a{opacity:1}.related-post-item-tooltip a{color:#666!important;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;font-size:12px!important;position:relative}
@media screen and (max-width:480px){.related-post-style-3 .related-post-item{width:100%!important}.related-post-style-3 .related-post-item-thumbnail{height:100px!important}}

2. Nah jika sudah silahkan selanjutnya kamu cari kode berikut<div class='post-footer-line post-footer-line-3> atau </article>, Silahkan shobat cari satu-persatu dengan kode yang sama, karna setiap template memiliki markup kode yang berbeda-beda. lalu  pastekan kode berikut tepat di bawahnya.

<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;&lt;i class=&#39;fa fa-bookmark&#39;&gt;&lt;/i&gt; Related Post&lt;/h4&gt;&quot;,
numPosts: 6,
summaryLength: 370,
titleLength: &quot;auto&quot;,
thumbnailSize: 300,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
widgetStyle: 3,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.idblanter.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+""):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>

6 adalah banyak postingan yang akan di tampilkan, silahkan ganti sesuai dengan selera kamu

3. Terakhir silahkan save tema/simpan, dan lihat salah satu postingan yang sudah terpasang kategory (label). Semoga berhasil