Showing posts matching the search for kode-warna.html

Showing posts sorted by date for query kode-warna.html. Sort by relevance Show all posts

Membuat Posting Lama Selalu di Homepage

Ahmad Maryuki Tuesday, August 28, 2012 Posting 33 comments

Screen Shoot Featured Post Sejuta Trik Blogger

Membuat Posting Lama Selalu di Homepage sama artinya dengan mengedit HTML agar posting atau artikel lama kita selalu berada di halaman utama blog (homepage). Pada posting ini bertujuan untuk membuat ucapan selamat datang di blogspot ataupun memprioritaskan salah satu posting kita untuk tampil di halaman index, halaman depan, halaman home atau halaman beranda. Tapi bukan di halaman tetangga ya :D
Trik ini bisa digunakan bila kita membuat blog untuk bisnis. Dimana setiap pengunjung yang membuka blog kita pada halaman utama maka artikel tersebut yang akan muncul. Bukan artikel baru melainkan artikel lama yang ingin kita tampilkan di halaman utama. Berhubung saya tidak pandai menulis dan berkata-kata saya rasa sahabat sudah tahu maksud artikel ini.

Untuk memulai membuat artikel lama atau artikel tertentu selalu berada di halaman utama kita perlu edit HTML agar artikel yang ingin ditampilkan pada halaman utama selalu muncul. Cara menampilkan artikel tertentu pada home page yang sejuta trik blogger berikan ini ada dua yaitu cara lama (Blogger Version 2) dan cara baru (Blogger Version 3).

Blogger Version 2

1. Mengganti tanggal posting pada sebuah artikel

Klik New Post >Menulis artikel/edit artikel lama > Publist Post

Kemudian dilanjutkan dengan menekan back kemudian Post Option> Centang Sceduled at

Kemudian dilanjutkan dengan memasukkan tanggal terbaru atau tanggal masa depan.

Cara di atas masih menyisakan kekurangan yaitu saat kita menampilkan arsip blog maka tanggal yang tampil akan menunjukkan masa depan. Sungguh ini sebuah keanehan bukan? Bagaimana pendapat sahabat?

2. Menambah atau menanam kode di template

Untuk memperbaiki cara tersebut ikuti cara baru berikut ini

Klik Design > Edit HTML > Klik Expand Widget Template > Cari kode berikut ini bila ada :D

Kemudian pastekan di bawahnya kode berikut :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<h2>Welcome to My Blog</h2>

<p> Blog ini membahas seputar trik edit blogger agar lebih menarik. Tidak hanya itu kami bertujuan untuk saling berbagi informasi tentunya di kategori blogspot. Kami sangat senang jika artikel kami bermanfaat bagi anda semua. Berikan komentar jika ada masalah. Akhir kata Happy blogging by Sejuta Trik Blogger

</p>

<a class='learn-more' href='http://sejutatrik.blogspot.com/2008/10/welcome.html'>Learn More</a>

</div>

</div></b:if>

Klik preview dan bila sudah puas dengan hasilnya maka klik save. Kode yang berwarna biru adalah kode untuk menampilkan artikel lama atau artikel tertentu pada halaman utama di blogger. Sahabat bisa ganti sesuai selera. Bila sahabat ingin selalu menampilkan artikel tersebut maka hapus kode warna biru. Memang cara ini terbilang sederhana (tidak otomatis) karena kita harus membuat deskripsi artikel namun bagi saya sangat profesional.

Cara tersebut masih sangat sederhana tanpa gambar karena hasil tergantung bawaan template sahabat. Jika ingin mengembangkan menjadi lebih profesional lagi silakan saja sesuai kreatifitas dan minat sahabat seperti menambah gambar atau yang lainnya.

Blogger version 3

Untuk blogger v3 ini lebih mudah karena sudah bawaan template default dari blogspot. Seperti template Contempo, Soho dan Notable sudah ditambahkan otomatis tinggal menambahkan widget seperti biasa. Caranya :

Saat log in blogger dan pada menu layout seperti berikut :

Klik add a Gadget

Klik Featured Post dan pilih artikel yang ingin kamu selalu tampilkan pada halaman beranda. Simpan dan kamu sudah bisa menampilkan artikel sesuai pilihan kamu tanpa harus edit HTML.
Updated : 23 Sept 2018

Membuat Menu Vertikal Pelangi Di Blogspot

Ahmad Maryuki Friday, December 23, 2011 Menu, SEO 3 comments

Membuat Menu Vertikal Pelangi Di Blogspot adalah menu tegak yang biasa dipakai di blogger akan tetapi menampilkan tampilan yang berwarna-warni. Sebenarnya membuat menu pelangi di blogspot sangat mudah sekali. Yuk membuat menu pelangi di blog kita!

Sebenarnya kelebihan dari menu vertikal pelangi di blog ini adalah untuk menarik pengunjung dengan warna-warna pelangi untuk menjelajahi isi blog kita. Benar bukan?

Dalam membuat menu pelangi di blogspot kita hanya membutuhkan kode CSS dan HTML sebagai kunci utamanya. Dengan cara ini kemungkinan penggunaan gambar sebagai background untuk membuat menu juga bisa kita lakukan.

Sejuta Trik Blogger berharap blog ini tidak seperti kelemahan pelangi. Yaitu bentuknya cantik tapi cepat menghilang. Wah jangan sampai ya! Kalau itu terjadi, saya hanya bilang TERLALU!ha ha ha. Untuk yang sudah master CSS mohon dibetulkan jika saya keliru dalam kodenya!

Baik langsung saja kita membuatnya.

A. Pada bagian EDIT HTML (Design) kita akan taruh kode CSS di bawah ini :

Untuk CSSnya kita hanya menambahkan "request" warna untuk menjadikannya pelangi. Kodenya adalah sebagai berikut:

#leftnav {
width: 200px;
position: relative;
margin-left: 5px;
margin-top: 20px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#leftnav a
{
display: block;
padding: 3px;
width: 160px;
background-color: #12366A;
border-bottom: 1px solid #eee;
}

#leftnav a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#leftnav a:hover, #leftnav a.request:hover
{
background-color: #FA5858;
color: #000;
}

#leftnav a.request

{
color: #12366A;
background-color: #F5A9A9;
}

#leftnav a:hover, #leftnav a.request2:hover
{
background-color: #FE9A2E;
color: #000;
}
#leftnav a.request2
{
color: #12366A;
background-color: #F5D0A9;
}

#leftnav a:hover, #leftnav a.request3:hover
{
background-color: #F4FA58;
color: #000;
}
#leftnav a.request3
{
color: #12366A;
background-color: #F3F781;
}

#leftnav a:hover, #leftnav a.request4:hover
{
background-color: #ACFA58;
color: #000;
}
#leftnav a.request4
{
color: #12366A;
background-color: #ACFA58;
}

#leftnav a:hover, #leftnav a.request5:hover
{
background-color: #58FA58;
color: #000;
}
#leftnav a.request5
{
color: #12366A;
background-color: #A9F5A9;
}

Keterangan :

1) background-color: #12366A; (Warna Kepala Menu)
2) width: 200px; (Lebar kotak)
3) font-family: Arial, Helvetica, sans-serif; : (Jenis Huruf)
4) 1 sampai 5 adalah menu 1 sampai 5
5)

#leftnav a:hover, #leftnav a.request:hover
{
background-color: #FA5858;

dan seterusnya adalah warna yang tampil

#leftnav a.request2
{
color: #12366A;
background-color: #F5D0A9;
}

adalah warna perubahan

7) Selanjutnya edit sendiri ya? Jika butuh kode warna silakan kunjungi KODE WARNA HTML. Atau jika menemukan kode dan tidak tahu warnanya silakan gunakan tool PARSE KODE WARNA. Tinggal masukkan kodenya kemudian enter!

8) Paste kode di atas di atas ]]></b:skin>

9) Warna hover paling akhir mempengaruhi perubahan pada kepala menu vertikal tersebut. Jadi apabila warna perubahan atau hover paling akhir berwarna hijau, maka kepala menu vertikal akan berubah hijau pula.

10) Untuk menambah link silakan tambah ke request 6, dan seterusnya.

B. Jika sudah masukkan kode HTML di Add Widget seperti biasa

<div id="leftnav">
<ul id="navlist">
<li id="active"><a href="http://www.unitcoins.us/" id="current">Home</a></li>
<li><a class="request" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request2" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request3" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request4" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
<li><a class="request5" href="http://www.unitcoins.us/quote.shtml">Request a Quote</a></li>
</ul>
</div>

Happy Blogging! by. Sejuta Trik Blogger

Nah, sekarang sudah jelas kan cara membuat menu vertikal pelangi di blogspot? Semoga trik sederhana ini membantu sahabat semua.

Demo :

Cara Ganti Blockquote Modifikasi di Blogger

Ahmad Maryuki Tuesday, October 25, 2011 Posting, SEO 9 comments

Di dalam posting blogger pada menu ada tombol seperti di atas. Tombol tersebut adalah menu untuk membuat blockquote. Apasih blockquote itu? Menurut sejuta trik blogger blockquote berarti petikan posting. Blockquote memperjelas apa yang kita posting di blogspot. Misalnya kita memposting beberapa sub judul. Dalam sub judul itu kita dapat memperjelas dengan petikan posting yang kita sebut sebagai blockquote. Mari kita bahas cara ganti blockquote modifikasi di blogger

Secara default atau bawaan, blockquote di tunjukkan kurang lebih seperti ini

Dari gambar di atas, kode dalam membuat blockquote bawaan kurang lebih adalah di bawah ini

.blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}

.......

Dan pada saat posting (Posisi Edit HTML) adalah

<blockquote style="overflow:auto;height:200px;padding:10px;background:black;color:lime;">
Disini Text Anda
</blockquote>

Jika sahabat tidak suka dengan blockquote bawaan blogger dan ingin merubah blockquote bawaan blogspot dengan style modifikasi berikut ini caranya

1. Login di blogspot

2. Sahabat akan di bawa ke dashboard.

3. Klik Menu Design seperti gambar di bawah ini :

4. Klik Template

5. Backup dulu template sobat dengan klik tombol seperti di bawah ini

6. Klik edit HTML

7. Klik Proceed

8. Centang Expand Widget Template

9. Cari kode blockquote seperti ini (Biasanya 2 baris) :

.blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}

.......

10. Hapus semua kode tersebut dan ganti dengan pilihan kode berikut :

a. Blockquote dengan background kertas bergaris

.post blockquote {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqAGXAAicWO3v9aTtVyr7g6tu-LRMMSHycudz_WDbeA4EKyIPN3ChplCVEwQR4UzoIO-PRva-t5HFZB5PbcdSKESiMcDPPDSiNf0SNl6fjkhfnL7wak4uzbmiYir1cRvB1N-XBKMcmcbk/s1600/notebook-with-numbers.gif) repeat-y;

margin: 0 20px;
padding: 0px 20px 5px 55px;

color:#7a7a7a;
font: bold 0.9em "Comic Sans MS", verdana;
line-height: 153%;
}
.post blockquote p {
margin: 0;
}

Ket : ubah kode yang ditandai dengan warna-warni di atas sesuai selera sobat. Untuk ganti background gambar, Tinggal klik kanan dan klik simpan lokasi gambar. Dan berikut pilihan backgroundnya :

b. Blockquote efek timbul dan shadow

.post blockquote {
    border:5px #dcdcdc solid;
    background:#f6f6f6 url(http://www.opendrive.com/files/7045660_cNVdE/quote.png) 0px 0px no-repeat;
    padding:7px;
    padding-left:65px;
    margin:20px 0;
    }

    blockquote:hover {
    border:5px #f2f2f2 outset;
    color:#000
    background:#f2f2f2 url(http://www.opendrive.com/files/7045660_cNVdE/quote.png) 10px 15px no-repeat;
    -moz-box-shadow: 0 0 40px #B0C4DE;-webkit-box-shadow: 0 0 40px #B0C4DE;box-shadow: 0 0 40px #B0C4DE;
    color:#000;
    }

    .post blockquote p {
    margin: 0;
    padding-top:10px;
    }

c. Blockquote dengan scrool

Untuk blogquote dengan scrool, cara pembuatannya adalah manual seperti membuat text area. Yaitu dengan kode berikut ini pada posisi Edit HTML saat posting.

<blockquote style="overflow:auto;height:200px;padding:10px;background:black;color:lime;">
Disini Text Anda
</blockquote>

Keterangan :
Image by : Drupal.org
Trick by : My Blogger Trick

Saya lebih suka Cara Ganti Blockquote Modifikasi di Blogger untuk menampilkan kode html dengan blockquote dari pada dengan text area. Mohon maaf tidak disertai dengan demo nyata. So, silakan tentukan pilihan sobat.

Happy Blogging!
by. Sejuta Trik Blogger
Thanks for reading !

Membuat Link di Judul Widget

Ahmad Maryuki Tuesday, October 04, 2011 Link, SEO, Widget 1 comment

Dalam sebuah widget pasti kita beri judul. Khususnya widget berbasis HTML kita dapat memodifikasinya. Salah satunya dengan Menambah Link di Judul Widget. Dimana link dalam judul dapat dijadikan optimasi SEO Blogger on page. Nah untuk lebih jelasnya silakan baca di bawah ini :

1. Log in di blogger dengan id anda untuk masuk ke akun dan mengedit blog anda.
2. Klik Tata Letak / Layout
3. Tambahkan gadget dengan mengklik Add a Gadget
4. Pada menu yang tersedia, pilih atau klik HTML/Javascript
5. Copy pastekan Kode di bawah ini, CATATAN : Pastikan judul atau title sidebar / pada gadget HTML/Javascript dalam keadaan kosong untuk menghindari duplicate title.

Kode pertama Link dengan icon tau background :

<style type="text/css">
.pasang-link{ 
font-size:11px; 
float:right; 
font-weight:bold; 
background:url(http://t1.gstatic.com/images?q=tbn:lJgxPMEh7KGJJM:

http://aespesoft.com/wordpress/wp-content/themes/massivepress/images/category-rss.jpg) 
right 0px no-repeat; padding-right:20px; 
} 
</style>  
<h2><span class="pasang-link"><a href="URL">Link Title</a></span>Title Sidebar</h2>

6. Ganti kode warna merah dengan icon yang anda suka, kode warna biru adalh text link dan warna hijau adalah title sidebar.

Jadinya seperti ini :

Kode kedua link tanpan icon atau backgraund :

<style type="text/css">
.pasang-link{ 
font-size:11px; 
float:right; 
font-weight:bold; 
} 
</style>  
<h2><span class="pasang-link"><a href="URL">Link Title</a></span>Title Sidebar</h2>

Kode ketiga menampilkan text saja :

<style type="text/css">
.pasang-link{ 
font-size:11px; 
float:right; 
font-weight:bold; 
} 
</style>  
<h2><span class="pasang-link">Text Here</span>Title Sidebar</h2>

Jadinya seperti ini :

Begitulah cara menambah link di judul widget. Semoga bermanfaaat!

Sumber ane di http://www.sodiycxacun.web.id/2010/05/cara-membuat-link-atau-text-disamping.html#axzz1ZofLPTj2

Happy Blogging!
by. Sejuta Trik Blogger

Parse Kode Warna | HTML Color Code Checker

Ahmad Maryuki Sunday, September 25, 2011 Tools 2 comments

Banyak tools kode warna untuk blogger. Seperti Tool Kode Warna punya saya ini. Widget kode warna tersebut menunjukkan kode dari warna yang kita pilih akan menampilkan kode. Tapi masalahnya jika kita mempunyai kode dan ingin mengetahui apa warnanya apa? nah berikut ini adalah solusinya:
Anda tinggal memasukkan kode warna contoh #ffffff dan akan muncul di kotak. Mudah kan? Selamat menggunakan tool ini, dan semoga bermanfaat!

Untuk mencari warna atau cara pakai tools ini ikuti langkah sederhana berikut :
copy code html warna anda, misal #FBFBFB;
paste di form tersebut dan enter

Happy Blogging! by. Sejuta Trik Blogger

Menambah Background Avatar Pada Komentar Pengunjung

Ahmad Maryuki Tuesday, September 20, 2011 Komentar 5 comments

Berbicara kotak komentar memang banyak sekali hal-hal yang bisa kita utak-atik. Seperti merubah warna komentar admin berbeda dengan pengunjung, komentar dengan background dll. Nah terinspirasi dari web favorit saya kibagus. Dimana kotak komentarnya lain dari pada yang lain.

Pada blog tersebut bahwa setiap komentar apakah itu menggunakan profil blogger, anonymous, atau name dan url, akan muncul gambar avatar pada komentar pengunjung. Sebagai contoh lihat gambar di atas!

Untuk menambah background avatar pada komentar pengunjung ini juga sudah dijelaskan di Infonetmu. Namun tidak ada salahnya kalau kita berbagi pada orang yang belum tahu seperti saya ini. Belum lagi kasus saya mengikuti tutorial tersebut dimana salah satu kode gagal di temukan atau berbeda dengan yang dijelaskan. Baik langsung saja trik menambah background avatar pada komentar pengunjung.

1. Login ke blog kamu!

2. Klik Design

3. Klik Edit HTML

4. Download Full template untuk backup template kamu

5. Jangan lupa : Centang Expand Widget Templates

6. Cari kode :

]]></b:skin>

7. Copy dan paste kode ini di atasnya :

#comments-block .avatar-image-container img {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwL9C7gnEvLbHiol9NnKT2fqAQSdW98lA-jfM8FOhRYLlORNlR5NzFN_8NYBxBpvUnyzL698FHa7JfDTqJ7l2cbAG9Q_lHIeuq63xNWFXpd0ncMX1VKMxQTP-jnxV-3eMszYWcIs71S5b/s1600/arrow-right+copye.png) no-repeat left top; width:35px;height:35px}

8. Cari kode di bawah ini :

Jika kode di atas tidak ketemu mungkin kodenya seperti ini : <dl class='comments-block' id='comments-block'>

9. Hapus kode no 8 dan ganti dengan kode :

10. Cari lagi kode di bawah ini :

11. hapus dan Ganti juga kode no 10 dengan

<b:if cond='data:comment.favicon'>
      <img expr:src='data:comment.favicon'/>
      </b:if>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:blog.enabledCommentProfileImages'>
      <div expr:class='data:comment.avatarContainerClass'>
      <data:comment.authorAvatarImage/>
      </div>
      </b:if>

12. Jika sudah simpan template sobat.

Lihatlah salah satu posting sobat yang ada komentar dengan anonymous atau name dan url. Saya rasa sobat sudah bisa trik menambah background avatar pada komentar pengunjung. Dengan trik ini komentar anonymous atau komentar yang menggunakan name dan url akan terlihat avatarnya.

NB.

URL no.7 bisa sobat ganti dengan url sobat. Sebagai referensi sobat bisa menggunakan icon di bawah ini. Ukuran iconnya kurang lebih 35 x 35

Membuat Widget Melayang (Sliding Widget)

Ahmad Maryuki Monday, August 29, 2011 Widget 2 comments

Nah, Pasti sobat sudah tau artinya Sliding Widget yaitu Membuat Widget Melayang (Sliding Widget). Sliding widget ini bisa diartikan widget yang meluncur, merosot atau apalah terserah sobat.

Nah untuk lebih jelasnya coba tengok kaskus. Di sebelah kiri ada widget share dan login yang mengikuti kemana mouse digerakkan atau di scrool atas atau bawah. nah untuk Membuat Widget Melayang (Sliding Widget) ini cukup mudah, berikut triknya

Cari kode

]]></b:skin>

Pastekan di atasnya kode berikut ini :

#widget_fly {
position:fixed;_position:absolute;bottom:0px;
left:0px;
clip:inherit;
_top:expression
(document.documentElement.scrollTop
+
document.documentElement.clientHeight-
this.clientHeight);
_left:expression
(document.documentElement.scrollLeft
+
document.documentElement.clientWidth
- offsetWidth); }

warna merah berarti letak widget yang ingin di terbangkan. Sobat bisa ganti di dengan bottom right atau dimana saja terserah, center bottom, up left dll.

Nah untuk membuat melayang, sobat hanya harus menambah <div id="widget_fly"> dan diakhiri dengan </div> pada html sobat.

Nih contohnya, Tambah HTML sobat,

<div id="widget_fly">

Kode HTML sobat

</div>

Kode HTML sobat adalah script yang ingin dibuatnya melayang. Beri nama </h> untuk mengosongkan nama script HTML sobat.

Mudah2an cara Membuat Widget Melayang (Sliding Widget) di atas berhasil, mudah dipahami dan membantu sobat dalam menghias blog sobat.

Sumber

Daftar Ping Service Terbaik | Blogger Ping Tools

Ahmad Maryuki Saturday, October 23, 2010 Tools

Dalam meningkatkan SEO Blog sahabat perlu adanya Ping berkala atau kirim url blog ke Search Engine (Google). Nah berikut ini Sejuta Trik Blogger punya Daftar Ping Service Terbaik buat kamu!

→ Ping url blog adalah upaya pemilik blog untuk melakukan test apakah server yang berhubungan blog dengan penyedia hosting blog tersebut. Ping blog berbeda dengan mengirim blog ke mesin pencari. Ping blog bertujuan apakah sebuah blog mampu dikirim ke server layanan hosting secepatnya atau tidak. Berikut ini saya sajikan daftar website service ping url blog gratis, anda tinggal memasukkan alamat blog dan url feed dan proses submit akan segera dilakukan saat itu juga.

1. Ping-0-matic http://pingomatic.com/

2. Pingler http://pingler.com

3. Pingoat http://pingoat.com

4. PingMyBlog http://www.pingmyblog.com

5. Feed Shark http://feedshark.brainbliss.com

6. Pingates http://pingates.com

7. Google http://www.googleping.com

8. Bing http://www.bing.com/webmaster/ping.aspx?siteMap=https://sejutatrik.blogspot.com/sitemap.xml

9. My Pagerank http://mypagerank.net/service_pingservice_index

10. Autopinger http://autopinger.com/

11. Ping. In http://ping.in/

12. Getrank http://www.getrank.org/google-ping/

13. Ping Website Tool Google Indexer - Prepostseo https://www.prepostseo.com/ping-multiple-urls-online

14. Ping Farm http://www.pingfarm.com/

15. Ping Farm http://doodlenerd.com/seo/ping-tool

Sementara yang terkenal atau familiar dahulu tentang daftar ping service terbaik. Selanjutnya akan update dengan jasa ping gratis lain.
Jangan Lupa, Setelah melakukan Ping, silakan cek juga di PAGERANK CHACKER TOOLS

Untuk Menjelajahi isi Blog, Silahkan Kunjungi DAFTAR ISI

Untuk memilih warna jika menggunakan kode, Silakan Kunjungi → TOOLS KODE WARNA HTML

Happy Blogging!
by. Sejuta Trik Blogger

Post Update December 15, 2018 at 01.30