Cara membuat ikon jejaring sosial mengagumkan dengan efek pop out di blog

Pada kesempatan kali ini saya ingin share lagi ke anda tentang cara membuat ikon jejaring sosial mengagumkan dengan efek pop out yang di buat murni menggunakan CSS. Ikon-ikon ini di desain sedemikian rupa menyerupai permen (candy) yang akan menarik perhatian para visitor blog anda dan cara menambahkannya pun cukup mudah. Ikon-ikon ini bisa anda tambahkan pada sidebar blog untuk membiarkan para visitor atau pembaca mengikuti di jejaring sosial favorit anda, ikon-ikonnya antara lain Rss Feed, Email, Facebook, Twitter, Google+ dan youtube.


LIVE DEMO (arahkan krusor anda ke ikon di bawah ini)

LANGKAH-LANGKAHNYA:

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript

• Kemudian kopi dan pastekan kode berikut didalamnya:

<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="http://jalu-pangna.blogspot.com/feeds/posts/default?alt=rss" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=jalu-pangna&amp;loc=en_US" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="http://plus.google.com/u/0/103806695606848957210" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="https://www.facebook.com/pages/Eyang-anom/427305383989192" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="http://www.twitter.com/sijalupangna" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="http://www.youtube.com/sijalupangna" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<style>
.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>

•  Simpan gadget..selesai

KUSTOMISASI

Silahkan anda ganti Link/URL yang disorot warna kuning dengan Link/URL anda

Happy blogging..!

Cara membuat 4 style widget iklan di blog

Pada postingan kali ini saya akan share lagi ke anda tentang cara membuat 4 style widget iklan di blog. Widget ini memiliki efek CSS yang keren dan lebih atraktif. Dengan style widget iklan ini membuat blog anda akan terlihat lebih keren dan tidak ada pengaruhnya sama sekali terhadap loading blog. Widget iklan ini cukup mengagumkan dan untuk menambahkannya di blog cukup mudah.

Langkah-langkahnya:

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript

• Kemudian kopi dan pastekan kode berikut didalamnya:

 Style 1

<style id="TechBlogGuide_css" type="text/css">
div.TechBlogGuide_1263441{width:100%;display:block}div.TechBlogGuide_1263441 a{width:468px}div.TechBlogGuide_1263441 a img{padding:0}div.TechBlogGuide_1263441 a em{font-style:normal}div.TechBlogGuide_1263441 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;}div.TechBlogGuide_1263441 img{border:0;clear:right;}div.TechBlogGuide_1263441 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}div.TechBlogGuide_1263441 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}div.TechBlogGuide_1263441 a{line-height:100%}div.TechBlogGuide_1263441 a.adhere{width:468px;height:60px;line-height:480%}
</style>
<div class="widget-content">
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
<div id="TechBlogGuide_1263441" class="TechBlogGuide_1263441 TechBlogGuide"><a title="Advertise Here" href="http://jalu-pangna.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!-- style widget iklan by http://jalu-pangna.blogspot.com -->
</div> 

Style 2

 

<style>

div.TechBlogGuide_1263441 a.adhere:hover {
    border: 1px solid rgb(153, 153, 153);
    background: none repeat scroll 0% 0% rgb(221, 221, 221);
    color: rgb(51, 51, 51);
}
html > body div.TechBlogGuide_1263441 a.adhere {
    height: 58px;
    width: 466px;
}
div.TechBlogGuide_1263441 a.adhere {
    width: 468px;
    height: 60px;
    line-height: 480%;
}
div.TechBlogGuide_1263441 a.adhere {
    color: rgb(102, 102, 102);
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgb(204, 204, 204);
    background: none repeat scroll 0% 0% rgb(231, 231, 231);
    text-align: center;
}
.TechBlogGuide a:hover {
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.TechBlogGuide .ad1 {
    background: none repeat scroll 0% 0% rgb(17, 108, 165) !important;
}
div.TechBlogGuide_1263441 a {
    line-height: 100%;
}
div.TechBlogGuide_1263441 a {
    display: block;
    font-size: 11px;
    color: rgb(136, 136, 136);
    font-family: verdana,sans-serif;
    margin: 0px 4px 10px 0px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    float: left;
}
div.TechBlogGuide_1263441 a {
    width: 468px;
}
.TechBlogGuide a {
    text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
    color: rgb(238, 238, 238) !important;
    padding: 0px !important;
    margin: 0px 10px 10px 0px !important;
    overflow: visible !important;
    transition: all 0.2s ease 0s;
    border: 0px none !important;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
:focus {
    outline: 0px none;
}
</style>
<div class="widget-content">
<div style="margin-top:35px;">
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
<div id="TechBlogGuide_1263441" class="TechBlogGuide_1263441 TechBlogGuide"><a title="Advertise Here" href="http://jalu-pangna.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
</div>
</div>

Style 3

 

 <style>

html > body div.TechBlogGuide_1264012 a.adhere {
    width: 123px;
    height: 123px;
}
div.TechBlogGuide_1264012 a.adhere {
    width: 125px;
    height: 125px;
    line-height: 1000%;
}
div.TechBlogGuide_1264012 a.adhere {
    color: rgb(102, 102, 102);
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgb(204, 204, 204);
    background: none repeat scroll 0% 0% rgb(231, 231, 231);
    text-align: center;
}
.TechBlogGuide a:hover {
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.TechBlogGuide .ad5 {
    background: none repeat scroll 0% 0% rgb(61, 164, 21) !important;
}

.TechBlogGuide .ad6 {
    background: none repeat scroll 0% 0% rgb(182, 118, 6) !important;
}
.TechBlogGuide .even {
    margin-right: 0px !important;
}
div.TechBlogGuide_1264012 a {
    line-height: 100%;
}
div.TechBlogGuide_1264012 a {
    display: block;
    font-size: 11px;
    color: rgb(136, 136, 136);
    font-family: verdana,sans-serif;
    margin: 0px 8px 15px 0px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    float: left;
}
div.TechBlogGuide_1264012 a {
    width: 125px;
}
.TechBlogGuide a {
    text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
    color: rgb(238, 238, 238) !important;
    padding: 0px !important;
    margin: 0px 10px 10px 0px !important;
    overflow: visible !important;
    transition: all 0.2s ease 0s;
    border: 0px none !important;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
:focus {
    outline: 0px none;
}
</style>
<div class="widget-content">
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
<div id="TechBlogGuide_1264012" class="TechBlogGuide_1264012 TechBlogGuide">
<a href="http://jalu-pangna.blogspot.com/" title="Advertise Here" class="adhere ad5 odd" target="_blank">Advertise Here</a>
<a href="http://jalu-pangna.blogspot.com/" title="Advertise Here" class="adhere ad6 even" target="_blank">Advertise Here</a>
</div>
<!--style widget iklan by http://jalu-pangna.blogspot.com -->
</div>

Style 4

<style>
html > body div.TechBlogGuide_1272098 a.adhere {
    width: 258px;
    height: 258px;
}
div.TechBlogGuide_1272098 a.adhere {
    width: 260px;
    height: 260px;
    line-height: 2080%;
}
div.TechBlogGuide_1272098 a.adhere {
    color: rgb(102, 102, 102);
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgb(204, 204, 204);
    background: none repeat scroll 0% 0% rgb(231, 231, 231);
    text-align: center;
}
.TechBlogGuide a:hover {
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.TechBlogGuide .ad1 {
    background: none repeat scroll 0% 0% rgb(17, 108, 165) !important;
}
div.TechBlogGuide_1272098 a {
    line-height: 100%;
}
div.TechBlogGuide_1272098 a {
    display: block;
    font-size: 11px;
    color: rgb(136, 136, 136);
    font-family: verdana,sans-serif;
    margin: 0px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}
div.TechBlogGuide_1272098 a {
    width: 260px;
}
.TechBlogGuide a {
    text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
    color: rgb(238, 238, 238) !important;
    padding: 0px !important;
    margin: 0px 10px 10px 0px !important;
    overflow: visible !important;
    transition: all 0.2s ease 0s;
    border: 0px none !important;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
:focus {
    outline: 0px none;
}
</style>
<div class="widget-content">
<div id="TechBlogGuide_1272098" class="TechBlogGuide_1272098 TechBlogGuide"><a href="http://jalu-pangna.blogspot.com/" title="Advertise Here" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
</div>

Semoga bermanfa'at..

Mendesain sub heading dan minor heading atau style tag H3 dan H4

Seorang blogger pemula (termasuk penulis juga masih pemula) selalu memiliki gagasan/ide yang sempit tentang banyaknya pengkodean (coding) yang sederhana. Bahkan ketika saya terjun ke dunia blog dan masih pemula waktu itu, sama sekali saya tidak dapat memahami sedikitpun tentang coding apalagi coding yang rumit dan sulit. Untuk contoh misalnya merancang tag H3 dan H4 sebagian besar blogger pemula tidak menyadarinya.

Sebelum melanjutkan ke tutorial Anda harus  mengubah semua tag H3 menjadi H2. Karena ia akan bekerja untuk sub heading dan minor heading. Dan secara default blogger menetapkan Sub-Heading sebagai tag H3  dan minor heading sebagai tag H4 . 

Mendesain sub heading atau  tag H3

Sub-Heading umumnya mendapatkan prioritas di bawah tag judul. Tag heading (judul) kita tetapkan sebagai H2 dan Sub-Heading sebagai H3. Ketika kita menulis artikel tentang apa saja maka kita menggunakan banyak Sub-Heading dan untuk membuatnya sedikit menarik kita akan menggunakan ikon dan warna dengan coding sederhana ..
  
Tag Sub-Heading ini sangat berbeda dan memiliki style efek hover. Berharap anda akan menyukainya. :)

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template-> Edit HTML

• Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan proses pencarian
• Berikutnya kopi dan pastekan kode CSS dibawah ini tepat diatas kode  ]]></b:skin>  

h3{
font-family:Arial !important;
font-style:italic !important;
}
.post h3 {
color:#0000ff;
border-left:10px solid #0000ff;
border-right:10px solid #0000ff;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #0000ff;
-webkit-box-shadow:0px 0px 13px #0000ff;
-moz-box-shadow:0px 0px 13px #0000ff;
}
.post h3:hover {
color:#f01a1a;
border-left:10px solid #f01a1a;
border-right:10px solid #f01a1a;
box-shadow:0px 0px 13px #f01a1a;
-webkit-box-shadow:0px 0px 13px #f01a1a;
-moz-box-shadow:0px 0px 13px #f01a1a;
} 

• Simpan template..

Mendesain minor heading atau style tag H4

Tag ini sebenarnya kurang begitu penting dibandingkan dengan sub-heading. Umumnya kita gunakan untuk menandai beberapa info/headline yang kurang penting. Standarnya, blogger menetapkan tag H4 atau minor heading.

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template->Edit HTML

• Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan proses pencarian
• Berikutnya kopi dan pastekan kode CSS dibawah ini tepat diatas kode  ]]></b:skin>  

.post h4{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7K9oDdr8w1wB-4KuaH93iTFXpLGe-O74dXA8lywJPD9_hH-rp1akZGmAZ3oKkpzGHn7jZO4MB8ijNemAPg3XYnWsombPh4sW16A8XSAk0nc0Oo3Yy-iKDDZbjuZ49XaXIFJAHWjYLibh/s1600/h2.png") no-repeat scroll 4px center transparent;
border: 3px solid #C8C800;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
color: #A5A503;
font-family: 'lobster',sans-serif;
font-size: 19px;
font-weight: bold;
line-height: 1;
margin: 15px 3px;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
} 

•  Simpan template..Selesai.

Bagaimana menggunakannya?

Masuk ke postingan baru dan tulis artikel dengan sub-heading dan minor heading. Sekarang blok dan klik pada heading, sub-heading atau minor heading seperti  gambar di bawah:

 

Semoga bermanfa'at and happy blogging..!