Membuat Widget Info About Us dengan Show Hide - Kali ini aku akan membagikan sebuah widget Info About Us atau sebuah Box yang menampilkan foto pemilik blog, jumlah artikel yang di publish, deskripsi blog/tentang blog dan Sosial Media simple di samping kanannya. Widget box keren ini aku dapatkan dari blog indzign.blogspot.com.
Widget yang menampilkan Tentang blog itu penting alasannya ialah pengunjung sanggup dengan gampang mengetahui isi dan tema blog tersebut. Dan sajian pada samping kanan / Sosial media juga sanggup untuk sarana pengunjung semoga sanggup lebih erat dan berkomunikasi dengan Pemilik blog.
Bagi sahabat yang ingin memasang widget keren ini silahkan ikuti tutorial di bawah ini :
1. Buka Blogger.com > Template > Edit HTML > Lalu letakan CSS di bawah ini sempurna di atas
1. Buka Blogger.com > Template > Edit HTML > Lalu letakan CSS di bawah ini sempurna di atas
]]></b:skin> atau </style>/* CSS Widget Info About Us */ .boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px} .contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)} .circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%} .circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c} kepala{background:#de9b31;height:50px;width:100%;position:inherit} #textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:58.4%;box-sizing:initial;} #left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit} #left a{color:#bdc3c7;}#left a:hover{color:#fff;} .taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;} .taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff} .taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff} #left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff} #aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px} #aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)} .scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px} .scrollbarbox .innerone{height:480px;overflow:auto}} a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px} #popup{display:none;} #popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s} .popup-container{position:relative;margin:0 auto;padding:20px} a.popup-close{position:relative;top:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff} a.popup-close:hover{color:#fff} .totalposts{margin:auto;display:table;text-align:center} .totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999} .totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9} li.infoindzign{border:0;float:right;list-style:none} li.infoindzign a{background:#f39c12;color:#fff;display:block;margin:20px 20px 13px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-family:'Roboto Condensed';transition:background-color .3s} i.infoindzign a:hover{background:#e67e22;color:#fff;} @media (min-width:768px){.popup-container{width:600px}} @media (max-width:767px){.popup-container{width:100%}} 2. Letakan arahan HTML di bawah ini sempurna di bawah arahan
<body> atau <body. (tanpa titik) Klik Ctrl + F pada Keyboard untuk mempermudah pencarian.<li class='infoindzign'><a class='popup-link' href='#popup'>Info</a></li> <div class='popup-wrapper' id='popup'> <div class='popup-container'> <div class='boxinner'> <div class='circle'></div> <div class='circle'></div> <div class='circle'></div> <div class='contentbox'> <kepala><span id='textlogo'><data:blog.title/></span> <a class='popup-close' href='#closed' title='Close'>×</a> </kepala> <br/> <div class='scrollbarbox'> <div class='innerone'> <div id='aboutus'> <img expr:alt='data:blog.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpT0WyJ4XHdLUCHaS19qwHX8heGdM3tltEoa9HSrWsxLxLi2TNmW9U_HHvTrQ_i3TLk9XU4UN5Ol0-a6iqWz4V9pVaBuzKYGcHTX50uzag2fhnOQAdV3B1MKkebWZUMTfyXK_r3NRZZ3Py/s1600/indzign.jpg ' expr:title='data:blog.title'/><br/> <script src='/feeds/posts/default?alt=json-in-script&callback=getposts'></script><br/><br/> Deskripsi Tentang Blog anda Disini. </div></div></div> <div id='left'> <div class='taber1'><a href='/' rel='nofollow' target='_blank' expr:title='data:blog.title'><data:blog.title/></a></div> <div class='taber2'><a href='# ' rel='nofollow' target='_blank' title='Follow Us On Google+'>Google+</a></div> <div class='taber3'><a href='# ' rel='nofollow' target='_blank' title='Follow Us On Facebook'>Facebook</a></div> <div class='taber4'><a href='# ' rel='nofollow' target='_blank' title='Follow Us On Twitter'>Twitter</a> </div> <div class='taber6'><a href='# ' rel='nofollow' target='_blank' title='Follow Us On Codepen'>Codepen</a></div> <div class='taber7'><a href='# ' rel='nofollow' target='_blank' title='Join this blog'>Join this blog</a></div> </div></div></div></div></div> Note : Jika Sobat ingin memindahkan button untuk menampilkan Widgetnya, sahabat hanya tinggal menambahkan #popup pada href. Contoh :
3. Letakan Script di bawah ini sempurna di atas arahan
href='#popup' jikalau sudah dan tidak ingin menampilkan button originalnya sahabat tinggal menghapus arahan berikut : <li class='infoindzign'><a class='popup-link' href='#popup'>Info</a></li>3. Letakan Script di bawah ini sempurna di atas arahan
</head> atau </body><script type='text/javascript'> //<![CDATA[ // Total Posts function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Artikel yang di Publish</span></div>');} //]]> </script> Simpan Template dan Lihat hasilnya.
Semoga Tutorial "Cara Membuat Widget Info About Us dengan Show Hide di Blog" ini bermanfaat..
Terima Kasih...
Sumber https://www.idblanter.com
Terima Kasih...
