Cara Membuat Vertical Slide Menu / Trigger Hover (Update)

Info informasi Cara Membuat Vertical Slide Menu / Trigger Hover (Update) atau artikel tentang Cara Membuat Vertical Slide Menu / Trigger Hover (Update) ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain. Cara Membuat Vertical Slide Menu / Trigger Hover (Update) Sudah Direvisi! Dijamin Berhasil 100%

Membuat Vertical Sliding di Sudut Blog dengan Animasi menggunakan jQuery

Sepertinya pelajaran blog sedang demam ya dengan jquery,hehehe (begitulah,ini juga dari hasil copas sana sini kok mas,weqz???? pent-)
Contoh tampilannya lihat gambar dibawah ini ya,sedang untuk demo-nya sobat bisa lihat di SINI.

Langkah cara membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery ini sobat bisa lakukan langkah -langkah berikut:

Pertama,pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D



(1)



(2)



(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 250px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPE0_e0EsHnmGTXuZS0FXc0JMtjSj_nK9bUI2SV3JccPBPDVD6JNi-gcYKDa_JXNXrAtOfVrXzqXIVTfPvcI0syxGlLEscVBVYs2TdsUWyEB5mi4xsyGhP3h3G9-FNTk1cTpfevjtKeQ/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 250px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPE0_e0EsHnmGTXuZS0FXc0JMtjSj_nK9bUI2SV3JccPBPDVD6JNi-gcYKDa_JXNXrAtOfVrXzqXIVTfPvcI0syxGlLEscVBVYs2TdsUWyEB5mi4xsyGhP3h3G9-FNTk1cTpfevjtKeQ/s320/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEill-VwUs-68PPq-ND4m-J7AQMpH2My6bKh1D9v0nSzhOOdsFLytZeEQuCi6AFGM5y1qvhYw7nga1xAF8IbdqIsuSbtGzcGu9TGYO5gZRNq46qDBLAGgLptK0yvYULQQpEijcKW5ndMmec/s320/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:

<script src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

Lalu simpan templates.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<div class="panel">

<h2>Silakan pilih kategori:</h2>
<div style="clear:both;"></div>
<div class="columns">
<div class="colleft">
<h3>Bisnis Online</h3>
<ul>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Gratis">Pasang Iklan Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Tanpa Modal">Bisnis Tanpa Modal</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Uang Gratis Free!">Uang Gratis Free!</a></li>
</ul>
</div>

<div class="colright">
<h3>Ngemis Dollar Internet</h3>
<ul>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratisan (Baru)</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Baru! Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Langsung!">Pasang Iklan Langsung!</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis di Rumah">Bisnis di Rumah</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Gratis Uang Jajan">Gratis Uang Jajan</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<a class="trigger" href="#">Surf!</a>

Nah,sekarang simpan dan sobat bisa langsung lihat hasilnya,dan script ini akan bekerja dengan baik di browser mozilla dan Google Chrome ya gan(oya,edit dan ulik sendiri ya kabuuur...).
Good luck!

Demikian artikel tentang Cara Membuat Vertical Slide Menu / Trigger Hover (Update) ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Vertical Slide Menu / Trigger Hover (Update) ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik

Membuat Link Blogroll Animasi Gulung (Update)

Info informasi Membuat Link Blogroll Animasi Gulung (Update) atau artikel tentang Membuat Link Blogroll Animasi Gulung (Update) ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

Membuat Link Blogroll Animasi Gulung (Update) - beberapa hari lalu di facebook page Pelajaran Blog sudah memberikan bocoran 'membuat show hide tab view widget for blogger'.
Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:

Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

(1)



(2)



(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.


#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;

}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:


<script language='javascript' src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>

Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:


<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Tiga
</div>

Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat ,moga berhasil and selamat ngulik kodenya ya :D

ket:kode bercetak tebal gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.

Demikian artikel tentang Membuat Link Blogroll Animasi Gulung (Update) ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Link Blogroll Animasi Gulung (Update) ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik

Cara Membuat Sub Menu Navigasi Ber-Gambar

Info informasi Cara Membuat Sub Menu Navigasi Ber-Gambar atau artikel tentang Cara Membuat Sub Menu Navigasi Ber-Gambar ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

Navigasi Menu Box dengan Gambar

Sama seperti halnya membuat menu navigasi horizontal dengan sub menu vertikal pada posting beberapa waktu lalu,namun kali ini hanya merubahnya dalam bentuk sebuah sub menu bergambar dari menu navigasi pada blog dari www.blogger.com.
Pada dasarnya,kita hanya menyelipkan sebuah image / obyek gambar yang ingin ditampilkan sebagai pengganti tulisan dalam link-link yang ada dalam sub menu navigasi.
Hasilnya akan seperti ini (arahkan mouse pointer pada box menu dibawah ini:

• Home
• Join Us
  • 
  • 
• Other

Dengan demikian hal ini kita masuk dalam sesi menghias blog (tumben nih penulis pake bahasa formal,takut dibaca ma presiden RI ya,:p) hehe

Jika hanya mengombinasikannya dengan artikel 'membuat menu navigasi' yang lalu,hasil yang akan kita dapat tidak akan sesuai dengan apa yang kita inginkan,ini karena pengaturan jarak,background dan lebar serta tinggi dari box menu akan berbeda.

Berikut penjelasan lebih rincinya,dan dari cara ini nanti sobat dapat menenetukan dan memodifikasinya sendiri sesuai dengan selera masing-masing.

Langkah Membuat Sub Menu Navigasi dengan Bergambar

Pertama,sobat tentukan dahulu gambar yang akan ditampilkan dalam sub menu navigasinya,ini dapat dilakukan dengan dua cara dan sobat bisa pilih cara mana yang mudah bagi agan-agan,yakni:

1.Membuat gambar dengan software semacam dreamweaver,lalu upload gambar ke posting untuk mendapatkan url alamat dari gambar tersebut.

2.Bisa menggunakan gambar yang sudah ada yang sobat inginkan,misal dari hasil pencarian gambar di Google (tapi cara ini tidak efektif,karena saat situs yang kita ambil url obyek gambarnya sudah mengahapus obyek mereka(yang kita ambil url-nya) otomatis gambar di blog milik kita juga akan terhapus.

Dari dua langkah diatas,saya misal pilih no 1,dengan cara,saya punya gambar yang ada di komputer saya lalu saya upload ke posting setelah itu klik kanan pada gambar dan pilih 'view image' dan kita sudah dapat url gambar tersebut dan lakukan copy.

Kita sudah mendapatkan url dari alamat gambar (facebook button) yang ingin kita tempatkan pada submenu navigasi nantinya,yakni:

http://2.bp.blogspot.com/-_bY0IPOwcWg/TxgtZi6NdZI/AAAAAAAABL8/FPPqwNeQboY/s1600/facebook%2Bbutton%2Bpelajaran%2Bblog.JPG

Nah setelah itu,jika sobat menginginkan lebih dari satu gambar lagi dalam submenu(yang kami pakai dalam artikel ini adalah dua gambar),sobat bisa lakukan dengan langkah seperti cara diatas,misal saya ingin menambahkan gambar url dari twitter button pent-),dan saya telah mendapatkannya yakni:

http://1.bp.blogspot.com/-FzYVO5-wb2A/TxgtZZ9pZDI/AAAAAAAABL0/9Zd1ZMBTwA8/s1600/twitter%2Bbutton%2Bpelajaran%2Bblog.JPG

Dari langkah pertama ini kita sudah mendapatkan dua url gambar yang nantinya akan kita tempatkan pada submenu navigasi.

Kedua,seperti pada membuat menu navigasi horizontal dengan submenu vertikel di posting beberapa waktu lalu,kita akan menggunakannya dengan cara yang sama,ikuti langkah selanjutnya ya sob:

• Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.
  
  
  Gb.1
  
• Selanjutnya pilih tab Edit Html (Gb.2).
  
  
  Gb.2
  
• Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).
  
  
  Gb.3
  
• Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.
  
  #NavbarMenu{background:#ffffff; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; text-transform:capitalize border-bottom:1px solid #666;}
#NavbarMenu{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:capitalize; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#ffffff; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#222222; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia,;}
#nav li li a:hover, #nav li li a:active{background:#ffffff; color:black; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
  
• Setelah itu Simpan Templates.
• Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan.
• Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript (Gb.5)
  
  
  Gb.4
  
  Gb.5
  
• Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.
  
  <ul id='nav'>
<li><a href='http://nama_blog_anda.blogspot.com/' title='Home'>Home</a> </li>
<li><a href='http://nama_blog_anda.blogspot.com/'>Join Us</a>
<ul>
<li><a href='http://id-id.facebook.com/pages/Pelajaran-Blog/289839067320' title='Facebook'><img alt='facebook' height='100%' src='http://2.bp.blogspot.com/-_bY0IPOwcWg/TxgtZi6NdZI/AAAAAAAABL8/FPPqwNeQboY/s1600/facebook%2Bbutton%2Bpelajaran%2Bblog.JPG' title='facebook' width='100%'/></a> </li>
<li><a href='http://twitter.com/mrpujiajadeh' title='Twitter'><img alt='twitter' height='100%' src='http://1.bp.blogspot.com/-FzYVO5-wb2A/TxgtZZ9pZDI/AAAAAAAABL0/9Zd1ZMBTwA8/s1600/twitter%2Bbutton%2Bpelajaran%2Bblog.JPG' title='twitter' width='100%'/></a> </li>
</ul> </li>
<li><a href='#' title='Other'>Other</a> </li>
</ul>
  
• Lalu simpan,selesai dan lihat hasilnya :D

Demikian artikel tentang Cara Membuat Sub Menu Navigasi Ber-Gambar ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Sub Menu Navigasi Ber-Gambar ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik